renderless / slot examples

dev/Dev.vue

@@ -1,19 +1,26 @@
 <template>
-  <div id="app">
-    <sandbox hide-help v-slot="config">
-      <v-select v-bind="config" />
-    </sandbox>
+  <div id="app" class="font-sans px-5 py-5">
+<!--    <v-select :options="countries"/>-->
+    <ListSelect :options="countries" />
+<!--    <paginated />-->
   </div>
 </template>
 
 <script>
 import vSelect from '../src/components/Select';
+import ListSelect from './ListSelect';
+import Paginated from './Paginated';
 import Sandbox from '../docs/.vuepress/components/Sandbox';
-// import countries from '../docs/.vuepress/data/countryCodes';
-// import books from '../docs/.vuepress/data/books';
+
+import countries from '../docs/.vuepress/data/countryCodes';
+import books from '../docs/.vuepress/data/books';
 
 export default {
-  components: {Sandbox, vSelect},
+  components: {vSelect, Sandbox, ListSelect, Paginated},
+  computed: {
+    countries: () => countries,
+    books: () => books,
+  },
 };
 </script>
 
@@ -27,6 +34,8 @@ export default {
 
   #app {
     height: 100%;
+    max-width: 50rem;
+    margin: 0 auto;
   }
 
   hr {

dev/ListSelect.vue

@@ -0,0 +1,65 @@
+<template>
+  <renderless :options="options" multiple v-slot="select">
+    <div class="border-l border-r border-b border-gray-400 rounded">
+      <input
+          v-bind="select.scope.search.attributes"
+          v-on="select.scope.search.events"
+          class="border-b border-t border-gray-400 rounded-t px-2 py-1"
+          placeholder="Search for a Country"
+      />
+
+      <div class="options">
+        <ul class="w-1/2 px-3 relative">
+          <li class="text-gray-600 text-center py-1 sticky top-0 bg-white">Selected</li>
+          <li v-for="selected in select.scopedValues" class="w-full">
+            <button class="hover:cursor-pointer text-left overflow-y-scroll"
+                    @click="select.deselect(selected)">
+              <span class="text-red-500">-</span> {{ selected.label }}
+            </button>
+          </li>
+        </ul>
+
+        <ul class="w-1/2 px-3 relative border-l border-gray-400">
+          <li class="text-gray-600 text-center py-1 sticky top-0 bg-white">Available</li>
+          <li v-for="option in select.scopedOptions" class="w-full">
+            <button class="hover:cursor-pointer text-left overflow-y-scroll"
+                    v-bind="option.attributes" @click="select.select(option)">
+              <span class="text-blue-500">+</span> {{ option.label }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </renderless>
+</template>
+
+<script>
+import Renderless from '../src/components/Renderless';
+import countries from '../docs/.vuepress/data/countries';
+
+export default {
+  name: 'ListSelect',
+  components: {Renderless},
+  computed: {
+    options: () => countries,
+  },
+};
+</script>
+
+<style scoped>
+  input {
+    display: flex;
+    width: 100%;
+  }
+
+  .options {
+    display: flex;
+  }
+
+  .options ul {
+    list-style: none;
+    flex-grow: 1;
+    max-height: 20rem;
+    overflow-y: scroll;
+  }
+</style>

dev/Paginated.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-select :options="options">
+    <template v-slot:option="{ option, attributes, events }">
+      <li v-if="option.label === 'pagination'">
+        <button @click="offset -= 10">Prev</button><button @click="offset += 10">Next</button>
+      </li>
+      <li v-else v-bind="attributes" v-on="events">{{ option.label }}</li>
+    </template>
+  </v-select>
+</template>
+
+<script>
+import countries from '../docs/.vuepress/data/countries';
+
+export default {
+  name: 'Paginated',
+  data: () => ({
+    countries,
+    offset: 0,
+    limit: 10,
+  }),
+  computed: {
+    options () {
+      return [...this.countries.slice(this.offset, this.limit + this.offset), 'pagination'];
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .pagination {
+    display: flex;
+    margin: .25rem .25rem 0;
+  }
+
+  .pagination button {
+    flex-grow: 1;
+  }
+
+  .pagination button:hover {
+    cursor: pointer;
+  }
+</style>

dev/dev.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>Vue Select Dev</title>
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
   <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">-->
   <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">-->
   <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->