From 619771d0f0db560926d7bc0971e69d8ae06a819f Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Thu, 14 Nov 2019 12:18:40 -0800
Subject: [PATCH] create selectable docs (#996)

---
 .../components/LimitSelectionQuantity.vue     | 21 +++++++++
 .../components/UnselectableExample.vue        | 16 +++++++
 docs/.vuepress/config.js                      |  1 +
 docs/guide/selectable.md                      | 44 +++++++++++++++++++
 src/components/Select.vue                     |  3 +-
 5 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vuepress/components/LimitSelectionQuantity.vue
 create mode 100644 docs/.vuepress/components/UnselectableExample.vue
 create mode 100644 docs/guide/selectable.md

diff --git a/docs/.vuepress/components/LimitSelectionQuantity.vue b/docs/.vuepress/components/LimitSelectionQuantity.vue
new file mode 100644
index 0000000..f6890b7
--- /dev/null
+++ b/docs/.vuepress/components/LimitSelectionQuantity.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-select
+    multiple
+    placeholder="Choose up to 3 books!"
+    label="title"
+    v-model="selected"
+    :options="books"
+    :selectable="() => selected.length < 3"
+  />
+</template>
+<script>
+import books from '../data/books';
+export default {
+  data() {
+    return { selected: [] }
+  },
+  computed: {
+    books: () => books,
+  }
+}
+</script>
diff --git a/docs/.vuepress/components/UnselectableExample.vue b/docs/.vuepress/components/UnselectableExample.vue
new file mode 100644
index 0000000..ee7d935
--- /dev/null
+++ b/docs/.vuepress/components/UnselectableExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <v-select
+    placeholder="Choose a book to read"
+    label="title"
+    :options="books"
+    :selectable="option => ! option.author.lastName.includes('Woodhouse')"
+  />
+</template>
+<script>
+import books from '../data/books';
+export default {
+  computed: {
+    books: () => books,
+  }
+}
+</script>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 1f2e6a0..2bed2c8 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -118,6 +118,7 @@ module.exports = {
           collapsable: false,
           children: [
             ['guide/validation', 'Validation'],
+            ['guide/selectable', 'Limiting Selections'],
             ['guide/vuex', 'Vuex'],
             ['guide/ajax', 'AJAX'],
             ['guide/loops', 'Using in Loops'],
diff --git a/docs/guide/selectable.md b/docs/guide/selectable.md
new file mode 100644
index 0000000..954fc73
--- /dev/null
+++ b/docs/guide/selectable.md
@@ -0,0 +1,44 @@
+## Selectable Prop <Badge text="v3.3.0+" />
+
+The `selectable` prop determines if an option is selectable or not. If `selectable` returns false
+for a given option, it will be displayed with a `vs__dropdown-option--disabled` class. The option
+will be disabled and unable to be selected. 
+
+```js
+selectable: {
+  type: Function,
+  /**
+   * @param {Object|String} option
+   * @return {boolean}
+   */
+  default: option => true,
+},
+```
+
+### Example
+
+Here `selectable` is used to prevent books by a certain author from being chosen. In this case,
+the options passed to the component are objects: 
+
+```json
+{ 
+    title: "Right Ho Jeeves", 
+    author: { firstName: "P.D", lastName: "Woodhouse" }, 
+}
+```
+
+This object will be passed to `selectable`, so we can check if the author should be selectable or not.
+
+<UnselectableExample />
+
+<<< @/.vuepress/components/UnselectableExample.vue{6}
+
+## Limiting the Number of Selections
+
+`selectable` can also be used a bit more creatively to limit the number selections that can be made 
+within the component. In this case, the user can select any author, but may only select a maximum
+of three books.
+
+<LimitSelectionQuantity />
+
+<<< @/.vuepress/components/LimitSelectionQuantity.vue{8}
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 211e0fb..281ec7c 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -229,10 +229,11 @@
       },
 
       /**
-       * Decides wether an option is selectable or not. Not selectable options
+       * Decides whether an option is selectable or not. Not selectable options
        * are displayed but disabled and cannot be selected.
        *
        * @type {Function}
+       * @since 3.3.0
        * @param {Object|String} option
        * @return {Boolean}
        */