Add docs (#16)

* add vuepress and basic doc demo

* add email contacts example

* add country selector example

* update .vuepress/config.js

* add remote example

* release docs

Author: isneezy

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [unreleased]
+
 ## [0.3.0] - 2018-07-26
 ### Added
 - disabled property control to input and prop

docs/.vuepress/components/CountrySelector.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <div>Country:</div>
+        <v-selectize :options="options" v-model="selected" key-by="id" label="name" :keys="['name', 'id']"/>
+        <div>Current Value: {{ selected }}</div>
+    </div>
+</template>
+
+<script>
+import VSelectize from '@isneezy/vue-selectize'
+import countries from './countries'
+export default {
+  name: 'country-selector',
+  data: () => ({
+    options: countries,
+    selected: null
+  }),
+  components: {VSelectize}
+}
+</script>

docs/.vuepress/components/EmailContacts.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <div>Email:</div>
+        <v-selectize :options="options" @search="text = $event" v-model="selected" :create-item="maybeCreate()" multiple placeholder="Pick some people..." keyBy="email"
+                     label="name"
+                     keys="['name', 'email']">
+            <template slot="item" slot-scope="{item}">{{item.name}} <{{item.email}}></template>
+            <template slot="option" slot-scope="{option}">
+                <label>{{ option.name }}</label>
+                <span>{{ option.email }}</span>
+            </template>
+        </v-selectize>
+        <div>Current Value: {{ selected }}</div>
+    </div>
+</template>
+
+<script>
+  import VSelectize from '@isneezy/vue-selectize'
+
+  const REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
+    '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)'
+  export default {
+    name: 'email-contacts',
+    data: () => ({
+      text: '',
+      options: [
+        {name: 'Brian Reavis', email: '[email protected]'},
+        {name: 'Nikola Tesla', email: '[email protected]'},
+        {email: '[email protected]'}
+      ],
+      selected: null
+    }),
+    methods: {
+      maybeCreate () {
+        const regex = new RegExp('^' + REGEX_EMAIL + '$', 'i')
+        const match = this.text.match(regex)
+        if (match) return this.createContact
+        return false
+      },
+      createContact (email) {
+        const contact = {email}
+        this.options.push(contact)
+        return contact
+      }
+    },
+    components: {VSelectize}
+  }
+</script>
+
+<style scoped>
+    label, span{
+        display: block;
+    }
+</style>

docs/.vuepress/components/RemoteGitHub.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <div>Tags:</div>
+        <v-selectize :searchFn="search" :create-item="false" :options="options" v-model="selected" disableSearch>
+            <template slot="item" slot-scope="{item}">{{item.username}}</template>
+        </v-selectize>
+        <div>Current Value: {{ selected }}</div>
+    </div>
+</template>
+
+<script>
+import VSelectize from '@isneezy/vue-selectize'
+import debounce from 'lodash.debounce'
+export default {
+  name: 'remote-git-hub',
+  data: () => ({
+    options: [],
+    selected: 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'] || []
+        done()
+      })
+    }, 300)
+  },
+  components: {VSelectize}
+}
+</script>

docs/.vuepress/components/SingleItemSelect.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <div>Beast:</div>
+        <v-selectize :options="options" v-model="selected" placeholder="Select a person"/>
+        <div>Current Value: {{ selected }}</div>
+    </div>
+</template>
+
+<script>
+import VSelectize from '@isneezy/vue-selectize'
+export default {
+  name: 'single-item-select',
+  data: () => ({
+    options: ['Chuck Testa', 'Nikola Tesla', 'Sage Cattabriga-Alosa'],
+    selected: []
+  }),
+  components: {VSelectize}
+}
+</script>

docs/.vuepress/components/Tagging.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <div>Tags:</div>
+        <v-selectize :options="options" v-model="selected" multiple/>
+        <div>Current Value: {{ selected }}</div>
+    </div>
+</template>
+
+<script>
+import VSelectize from '@isneezy/vue-selectize'
+export default {
+  name: 'tagging',
+  data: () => ({
+    options: ['neat', 'awesome'],
+    selected: ['neat', 'awesome']
+  }),
+  components: {VSelectize}
+}
+</script>