- complete docs overhaul

docs/gitbook/Advanced/AJAX.md

@@ -0,0 +1,60 @@
+## AJAX Remote Option Loading
+
+[](codepen://sagalbot/POMeOX?height=400)
+
+The `onSearch` prop allows you to load options via ajax in a parent component 
+when the search text is updated. It is invoked with two parameters, `search` & `loading`.
+
+```js
+/**
+* Accepts a callback function that will be run
+* when the search text changes. The callback
+* will be invoked with these parameters:
+*
+* @param {search}  String		Current search text
+* @param {loading} Function	Toggle loading class
+*/
+onSearch: {
+  type: Function,
+  default: false
+},
+```
+
+The `loading` function accepts a boolean parameter that will be assigned 
+to the vue-select internal `loading` property. Call `loading(true)` to set the 
+`loading` property to `true` - toggling the loading spinner. After your 
+asynchronous operation completes, call `loading(false)` to toggle it off.  
+
+#### Disabling Filtering
+
+When loading server side options, it can be useful to disable the 
+client side filtering. Use the `filterable` prop to disable filtering.
+
+```js
+/**
+ * When true, existing options will be filtered
+ * by the search text. Should not be used in
+ * conjunction with taggable.
+ * 
+ * @type {Boolean}
+ */
+filterable: {
+	type: Boolean,
+	default: true
+},
+```
+
+#### Loading Spinner
+
+Vue Select includes a default loading spinner that appears when the loading class is present. The `spinner` slot allows you to implement your own spinner.
+
+```html
+<div class="spinner" v-show="spinner">Loading...</div>
+```
+
+#### Library Agnostic
+
+Since Vue.js does not ship with ajax functionality as part of the core library, it's up to you to process the ajax requests in your parent component.
+
+I recommend using [axios](https://github.com/axios/axios) for creating your applications HTTP layer, 
+or [`fetch()`](https://github.com/github/fetch) for simple requests.

docs/gitbook/Advanced/Templating.md

@@ -0,0 +1,17 @@
+#### Scoped Slot `option`
+
+vue-select provides the scoped `option` slot in order to create custom dropdown templates.
+
+```html
+<v-select :options="options" label="title">
+    <template slot="option" slot-scope="option">
+        <span :class="option.icon"></span>
+        {{ option.title }}
+    </template>
+  </v-select>
+``` 
+
+Using the `option` slot with `slot-scope="option"` gives the 
+provides the current option variable to the template.
+
+[](codepen://sagalbot/NXBwYG?height=500)

docs/gitbook/Advanced/Validation.md

@@ -0,0 +1 @@
+[](codepen://sagalbot/zZQJKW?height=600)

docs/gitbook/Advanced/Vuex.md

@@ -1,18 +1,16 @@
-### Change Event <small>Vuex Compatibility</small>
-
-`vue-select` provides a `change` event. This function is passed the currently selected value(s) as it's only parameter.
-
-This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.
+### Using the `input` Event with Vuex
 
+`vue-select` emits the `input` event any time the internal `value` is changed. 
+This is the same event that allow the for the `v-model` syntax. When using
+Vuex for state management, you can use the `input` event to dispatch an
+action, or trigger a mutation.
 
 ```html
-<v-select v-on:change="consoleCallback" :options="countries"></v-select>
-```
+<v-select 
+    @input="myAction" 
+    :options="$store.state.options"
+    :value="$store.state.selected"
+  ></v-select>
+``` 
 
-```js
-methods: {
-  consoleCallback(val) {
-    console.dir(JSON.stringify(val))
-  },
-}
-```
+[](codepen://sagalbot/aJQJyp?height=500)