docs: update tagging docs

docs/.vuepress/components/CreateOption.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <v-select
+      v-model="selected"
+      multiple
+      taggable
+      :options="options"
+      :create-option="text => ({ label: text, isTag: true })"
+    />
+    <pre><code>selected: {{ selected }}</code></pre>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    selected: [],
+    options: [
+      {
+        label: "Vue",
+        isTag: false
+      }
+    ]
+  })
+};
+</script>

docs/.vuepress/components/CreateOptionReduce.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <v-select
+      v-model="selected"
+      taggable
+      multiple
+      label="label"
+      :options="[]"
+      :create-option="label => ({ label, isTag: true })"
+      :reduce="option => option.isTag"
+    />
+    <pre><code>selected: {{ selected }}</code></pre>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    selected: [],
+    options: [
+      {
+        label: "Vue",
+        isTag: false
+      }
+    ]
+  })
+};
+</script>

docs/.vuepress/config.js

@@ -1,13 +1,12 @@
-const {description} = require('./config/meta');
+const { description } = require("./config/meta");
-const head = require('./config/head');
+const head = require("./config/head");
-const plugins = require('./config/plugins');
+const plugins = require("./config/plugins");
-const themeConfig = require('./config/themeConfig');
+const themeConfig = require("./config/themeConfig");
 
 module.exports = {
-  title: 'Vue Select',
+  title: "Vue Select",
   description,
   head,
   plugins,
-  themeConfig,
+  themeConfig
 };
-

docs/.vuepress/config/themeConfig.js

@@ -22,6 +22,7 @@ module.exports = {
           ['guide/install', 'Installation'],
           ['guide/options', 'Dropdown Options'],
           ['guide/values', 'Selecting Values'],
+          ['guide/tagging', 'Tagging'],
           ['guide/upgrading', 'Upgrading 2.x to 3.x'],
         ],
       },

docs/guide/tagging.md

@@ -0,0 +1,48 @@
+## `taggable`
+
+To allow input that's not present within the options, set the `taggable` prop to true. This will
+add the current search text as a selectable option.
+
+<v-select taggable multiple />
+
+```html
+<v-select taggable multiple />
+```
+
+## `pushTags`
+
+If you want added tags to be pushed to the options array, set `push-tags` to true. This way, if
+they are removed from the selection, they remain present in the options list afterwards.
+
+<v-select taggable multiple push-tags />
+
+```html
+<v-select taggable multiple push-tags />
+```
+
+## createOption
+
+The `createOption` prop accepts a `{function}` callback that receives the tag being selected (the
+current search text) as it's first parameter. Whatever you return from this function will be set as
+the selected value.
+
+In the example below, added tags will be created with an `isTag: true` flag.
+
+<CreateOption />
+
+<<< @/.vuepress/components/CreateOption.vue
+
+## `taggable` with `reduce`
+
+When combining `taggable` with `reduce`, you must define the `createOption` prop. The
+`createOption` function is responsible for defining the structure of the objects that Vue Select
+will create for you when adding a tag. It should return a value that has the same properties as the
+rest of your `options`.
+
+If you don't define `createOption`, Vue Select will construct a simple object following this structure:
+`{[this.label]: searchText}`. If you're using `reduce`, this is probably not what your options look
+like, which is why you'll need to set the function yourself.
+
+<CreateOptionReduce />
+
+<<< @/.vuepress/components/CreateOptionReduce.vue{7-8}

docs/guide/values.md

@@ -114,63 +114,5 @@ is true, `v-model` and `value` must be an array.
 ```
 <v-select multiple :options="['Canada','United States']" />
 
-## Tagging
-
-To allow input that's not present within the options, set the `taggable` prop to true.
-
-```html
-<v-select taggable multiple />
-```
-
-<v-select taggable multiple />
-
-If you want added tags to be pushed to the options array, set `push-tags` to true.
-
-```html
-<v-select taggable multiple push-tags />
-```
-
-<v-select taggable multiple push-tags />
-
-### Using `taggable` & `reduce` together
-
-When combining `taggable` with `reduce`, you must define the `createOption` prop. The
-`createOption` function is responsible for defining the structure of the objects that Vue Select
-will create for you when adding a tag. It should return a value that has the same properties as the 
-rest of your `options`.
-
-If you don't define `createOption`, Vue Select will construct a simple object following this structure: 
-`{[this.label]: searchText}`. If you're using `reduce`, this is probably not what your options look
-like, which is why you'll need to set the function yourself.
-
-**Example**
-
-We have a taggable select for adding books to a collection. We're just concerned about getting the
-book title added, and our server side code will add the author details in a background process. The
-user has already selected a book.  
-
-```js
-const options = [
-  {
-    title: "HTML5",
-    author: {
-      firstName: "Remy",
-      lastName: "Sharp"
-    }
-  }
-];
-```
-
-```html
-<v-select
-  taggable
-  multiple
-  label="title"
-  :options="options"
-  :create-option="book => ({ title: book, author: { firstName: '', lastName: '' } })"
-  :reduce="book => `${book.author.firstName} ${book.author.lastName}`"
-/>
-```  
-