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 @@ + + 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 @@ + + 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 + +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. + + + +<<< @/.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. + + + +<<< @/.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} */