update documentation (#29)

* Update Remote Source Github

* add rotten tomatoes example #25

* Update github example #25

* smal improvements

* Update CHANGELOG.md

* document every component pops

* explicity show selectize dependency

* add slots docs template

* update docs

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - prettier 
 ### Changed
 - Updated dependencies (vue-cli v4)
+- Updated documentation and examples
 
 ## [0.5.0]
 ### Added

docs/.vuepress/components/ItemSlot.vue

@@ -0,0 +1,16 @@
+<template>
+  <VSelectize v-model="selected" :options="options" key-by="username" label="username" :keys="['username', 'host']">
+    <template v-slot:item="{item}">{{ item.username }}@{{ item.host }}</template>
+  </VSelectize>
+</template>
+<script>
+  import VSelectize from '@isneezy/vue-selectize'
+  export default {
+    name: 'ItemSlot',
+    components: { VSelectize },
+    data: () => ({
+      options: [{username: 'selectizejs', host: 'github.com'}],
+      selected: {username: 'selectizejs', host: 'github.com'}
+    })
+  }
+</script>

docs/.vuepress/components/OptionSlot.vue

@@ -0,0 +1,17 @@
+<template>
+  <VSelectize v-model="selected" :options="options" key-by="username" label="username" :keys="['username', 'host']">
+    <template v-slot:option="{option}">{{ option.username }}@{{ option.host }}</template>
+    <template v-slot:item="{item}">{{ item.username }}@{{ item.host }}</template>
+  </VSelectize>
+</template>
+<script>
+  import VSelectize from '@isneezy/vue-selectize'
+  export default {
+    name: 'OptionSlot',
+    components: { VSelectize },
+    data: () => ({
+      options: [{username: 'selectizejs', host: 'github.com'}],
+      selected: {username: 'selectizejs', host: 'github.com'}
+    })
+  }
+</script>

docs/.vuepress/components/RemoteGitHub.vue

@@ -1,10 +1,22 @@
 <template>
     <div>
         <div>Tags:</div>
-        <v-selectize label="name" :searchFn="search" :create-item="false" :options="options" v-model="selected" disableSearch>
-            <template slot="item" slot-scope="{item}">{{item.username}}</template>
+        <v-selectize key-by="url" label="name" :searchFn="search" :create-item="false" :options="options" v-model="selected" disableSearch>
+            <template v-slot:option="{ option }">
+              <div class="text-base">
+                <i class="fa fa-code-fork"></i>
+                <b class="ml-1">{{ option.name }}</b>
+                <small class="ml-1">by {{ option.owner }}</small>
+              </div>
+              <div class="text-gray-500">{{ option.description }}</div>
+              <div class="text-xs">
+                <span>{{ option.language }}</span>
+                <span class="ml-2"><b>{{ option.watchers }}</b> watchers</span>
+                <span class="ml-2"><b>{{ option.forks }}</b> forks</span>
+              </div>
+            </template>
         </v-selectize>
-        <div>Current Value: {{ selected }}</div>
+        <div>Current Value: {{ url }}</div>
     </div>
 </template>
 
@@ -14,20 +26,35 @@ import debounce from 'lodash.debounce'
 export default {
   name: 'remote-git-hub',
   data: () => ({
-    options: [],
+    options: [
+      {
+        "name": "vue-selectize",
+        "owner": "isneezy",
+        "description": "Vanila Vue.js component that mimics Selectize behaviour (no need jquery dependency)",
+        "language": "Vue",
+        "watchers": 30,
+        "forks": 5,
+        "url": "https://github.com/isneezy/vue-selectize"
+      }
+    ],
     selected: null
   }),
+  computed: {
+    url() {
+      return this.selected ? this.selected.url : null
+    }
+  },
   methods: {
     search: debounce (function (text, done) {
       if (text.length < 3) done()
       fetch(`https://api.github.com/legacy/repos/search/${text}`).then(response => {
         return response.json()
       }).then(data => {
-        this.options = data['repositories'] || []
+        this.options = data.repositories || []
         done()
-      })
-    }, 300)
+      }).catch(done)
+    }, 500)
   },
   components: {VSelectize}
 }
-</script>
+</script>

docs/.vuepress/components/RemoteRottenTomatoes.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="my-2">Movie:</div>
+    <VSelectize :options="movies" :searchFn="search" v-model="selected" disableSearch key-by="id" label="title" :create-item="false">
+      <template v-slot:option="{ option }">
+        <div class="flex overflow-hidden">
+          <img class="w-16" style="background: rgba(0,0,0,0.04);" :src="option.posters.thumbnail" alt="">
+          <div class="flex-1 pl-2">
+            <div class="truncate text-base font-bold">{{ option.title }}</div>
+            <div class="mt-2 flex flex-wrap">
+              <span class="px-1 rounded text-xs text-white bg-gray-500">
+                <i class="fa fa-exclamation-circle mr-1"></i>
+                {{ option.mpaa_rating }}
+              </span>
+              <span class="ml-1 px-1 rounded text-xs text-white bg-green-500">
+                <i class="fa fa-clock-o mr-1"></i>
+                {{ option.runtime }}
+              </span>
+            </div>
+            <div class="truncate mt-1">{{ option.synopsis || 'No synopsis available at this time.' }}</div>
+            <div class="truncate text-sm text-gray-500">
+              <template v-if="option.abridged_cast.length">
+                <span>Starring </span>
+                <span class="text-gray-700">
+                {{ option.abridged_cast.map(act => act.name).join(', ') }}
+              </span>
+              </template>
+              <template v-else>Actors unavailable</template>
+            </div>
+          </div>
+        </div>
+      </template>
+    </VSelectize>
+    <div class="py-2">Current vaue: "{{ selected ? selected.title : null }}"</div>
+  </div>
+</template>
+
+<script>
+  import VSelectize from '@isneezy/vue-selectize'
+  import debounce from 'lodash.debounce'
+  export default {
+    name: 'RemoteRottenTomatoes',
+    components: { VSelectize },
+    data: () => ({
+      movies: [],
+      selected: null
+    }),
+    methods: {
+      search:  debounce (function (text, done) {
+        if (text.length < 3) done()
+        fetch(`https://www.rottentomatoes.com/api/private/v1.0/movies.json?q=${text}&page_limit=10`).then(response => {
+          return response.json()
+        }).then(data => {
+          this.movies = data.movies || []
+          done()
+        }).catch(done)
+      }, 300)
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/components/Tip.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="p-4 border-l-4 border-green-500 bg-gray-200">
+    <p class="mb-2 font-bold"><slot name="title">TIP</slot></p>
+    <p>
+      <slot></slot>
+    </p>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'Tip'
+  }
+</script>

docs/.vuepress/config.js

@@ -5,7 +5,9 @@ module.exports = {
   // base: '/vue-selectize/',
   ga: 'UA-105706124-2',
   head: [
-    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/selectize.default.css' }]
+    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/selectize.default.css' }],
+    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' }],
+    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' }]
   ],
   themeConfig: {
     repo: 'isneezy/vue-selectize',
@@ -23,8 +25,15 @@ module.exports = {
         collapsable: false,
         children: [
           '/guide/',
-          '/guide/examples/',
-          '/guide/api/',
+          '/guide/examples/'
+        ]
+      },
+      {
+        title: 'API',
+        collapsable: false,
+        children: [
+          '/api/props',
+          '/api/slots'
         ]
       }
     ]

docs/README.md

@@ -12,7 +12,8 @@ actionLink: /guide/
 Installation
 
 ```bash
-npm install @isneezy/vue-selectize --save
-# OR
+# With npm package manager
+npm install selectize @isneezy/vue-selectize --save
+# OR with yarn package manager
 yarn add selectize @isneezy/vue-selectize
-```
+```

docs/api/props.md

@@ -0,0 +1,121 @@
+---
+title: Props
+---
+
+## multiple
+
+Equivalent to the multiple attribute on a `<select>` input.
+
+```js
+multiple: { default: false, type: Boolean },
+```
+
+## placeholder
+
+Equivalent to the placeholder attribute on a `<input>` input.
+
+```js
+placeholder: { default: '', type: String },
+```
+
+## options
+
+An array of strings or objects to be used as dropdown choices.
+If you are using an array of objects, vue-selectize will look for a `id` and `label` key  
+Ex. `[{id: 'MZ', label: 'Mozambique'}]`    
+A custom label key can be set with the [label](#label) prop.
+
+```js
+options: { default: () => [], type: Array },
+```
+
+## keyBy
+
+Selectable option unique identifier key, each option must have a unique identifier.
+Use this prop to change the default behavior
+
+```js
+keyBy: { default: 'id', type: String },
+```
+
+## label
+
+Tells vue-selectize what key to use when generating option labels when each option
+is an object.
+
+```js
+label: { default: 'label', type: String },
+```
+
+## keys
+
+vue-selectize internaly uses fuse.js to perform its search capabilities, this props tells
+witch keys to use for searching.
+
+```js
+keys: { default: () => ['label'] },
+```
+
+## value
+
+Contains the currently selected value. Very similar to a value attribute on an `<input>`. You can listen for changes
+using `input` event using v-on
+
+```js
+value: { default: null, type: [Array, Object, String, Number] },
+```
+
+## limit
+
+The limits the number of options that are visible in the dropdown
+
+```js
+limit: { default: 0, type: [Number] },
+```
+
+## disabled
+
+Disable the entire component.
+
+```js
+disabled: { default: false, type: Boolean },
+```
+
+## disableSearch
+
+Disable the built in search engine
+
+```js
+disableSearch: { default: false, type: Boolean },
+```
+
+## createItem
+
+User defined function for adding Options. Set to false to disable adding option
+
+```js
+createItem: {
+  default: function(text) {
+    return Promise.resolve(text)
+  },
+  type: [Function, Boolean]
+},
+```
+
+## searchFn
+
+User defined function for searching
+
+```js
+searchFn: { default: false, type: [Boolean, Function] },
+```
+
+## theme
+
+Selectize.js theme
+
+```js
+theme: { default: '', type: String }
+```
+
+

docs/api/slots.md

@@ -0,0 +1,35 @@
+---
+title: Slots
+---
+
+<tip>
+<tempalet slot="title">WARN</tempalet>
+This content is under revision and it is incomplete.
+</tip>
+
+<tip class="mt-2">
+VueSelectize leverages scoped slots to allow for total customization of the presentation layer.
+Slots can be used to change the look and feel of the UI, or to simply swap out text.
+</tip>
+
+## item  
+
+The text displayed to represent each selected item.
+- `item {Object|String}` - A selected option
+
+<ItemSlot />
+
+<<< @/docs/.vuepress/components/ItemSlot.vue
+
+## option
+
+The option within the dropdown.
+- `option {Object}` - The currently isolated option from `filteredOptions`
+
+<OptionSlot />
+
+<<< @/docs/.vuepress/components/OptionSlot.vue
+
+
+## create-item
+## spinner