Enhancement: #76 Disable specific options

README.md

@@ -78,6 +78,7 @@ pnpm add vue-search-select
 |                 | optionValue         | String   |                            | value key                           |
 |                 | optionText          | String   |                            | text key                            |
 |                 | customText          | Function |                            | custom text function                |
+|                 | optionDisabled      | String   | false                      | disabled key                        |
 |                 | isError             | Boolean  | false                      | error style                         |
 |                 | isDisabled          | Boolean  | false                      | disable component                   |
 |                 | placeholder         | String   | ''                         |                                     |
@@ -98,6 +99,7 @@ pnpm add vue-search-select
 |                 | optionValue         | String   |                            | value key                           |
 |                 | optionText          | String   |                            | text key                            |
 |                 | customText          | Function |                            | custom text function                |
+|                 | optionDisabled      | String   | false                      | disabled key                        |
 |                 | selectedItems       | Array    |                            | default option(raw object)          |
 |                 | isError             | String   | false                      | error style                         |
 |                 | isDisabled          | Boolean  | false                      | disable component                   |

docs/src/components/Model/_DisabledOptions.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="ui vertical segment">
+    <div class="flexbox">
+      <div class="flex-content">
+        <h3>Disabled options</h3>
+        <div class="button-group">
+          <button type="button" @click="reset" class="small ui button">reset</button>
+          <button type="button" @click="selectOption" class="small ui button">option select from parent</button>
+        </div>
+        <div>
+          <model-select
+            ref="select"
+            :options="options"
+            v-model="item"
+            placeholder="placeholder text"
+          >
+          </model-select>
+        </div>
+      </div>
+      <div class="flex-result">
+        <table class="ui celled table">
+          <thead>
+          <tr>
+            <th>value</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>{{ item }}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ModelSelect } from "vue-search-select"
+
+export default {
+  data() {
+    return {
+      options: [
+        { value: "1", text: "aa" + " - " + "1", disabled: true },
+        { value: "2", text: "ab" + " - " + "2", disabled: false },
+        { value: "3", text: "bc" + " - " + "3", disabled: true },
+        { value: "4", text: "cd" + " - " + "4", disabled: true },
+        { value: "5", text: "de" + " - " + "5", disabled: false },
+        { value: "6", text: "ef" + " - " + "6", disabled: false },
+        { value: "10", text: "ef" + " - " + "10", disabled: false },
+        { value: "11", text: "ef" + " - " + "11", disabled: false },
+        { value: "12", text: "ef" + " - " + "12", disabled: false },
+        { value: "13", text: "down case" + " - " + "testcase", disabled: true },
+        { value: "14", text: "camel case" + " - " + "testCase", disabled: false },
+        { value: "15", text: "Capitalize case" + " - " + "Testcase", disabled: false },
+        { value: "16", text: "more a" + " - " + "1", disabled: false },
+        { value: "17", text: "more a" + " - " + "2", disabled: false },
+        { value: "18", text: "more a" + " - " + "3", disabled: false },
+        { value: "19", text: "more a" + " - " + "4", disabled: false },
+        { value: "20", text: "more a" + " - " + "5", disabled: false },
+        { value: "21", text: "more a" + " - " + "6", disabled: false },
+        { value: "22", text: "more a" + " - " + "7", disabled: false },
+        { value: "23", text: "more a" + " - " + "8", disabled: false },
+        { value: "24", text: "more a" + " - " + "9", disabled: false },
+        { value: "25", text: "more あ" + " - " + "10", disabled: false },
+        { value: "26", text: "more い" + " - " + "11", disabled: true },
+      ],
+      item: "",
+    }
+  },
+  methods: {
+    reset() {
+      this.item = ""
+    },
+    selectOption() {
+      // select option from parent component
+      this.item = this.options[0].value
+    },
+  },
+  components: {
+    ModelSelect,
+  },
+}
+</script>

docs/src/components/MultiList/_DisabledOptions.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="ui vertical segment">
+    <div class="flexbox">
+      <div class="flex-content">
+        <h3>Disabled options</h3>
+        <div class="button-group">
+          <button type="button" @click="reset" class="small ui button">reset</button>
+          <button type="button" @click="selectItem" class="small ui button">select from parent</button>
+        </div>
+        <div>
+          <multi-list-select
+            :list="someList"
+            option-value="code"
+            option-text="name"
+            option-disabled="disabled"
+            :custom-text="codeAndNameAndDesc"
+            :selected-items="items"
+            @select="onSelect"
+          >
+          </multi-list-select>
+        </div>
+      </div>
+      <div class="flex-result">
+        <table class="ui celled table">
+          <thead>
+          <tr>
+            <th>value</th>
+            <th>text</th>
+            <th>desc</th>
+          </tr>
+          </thead>
+          <tbody v-for="item in items" :key="item.code">
+          <tr>
+            <td>{{item.code}}</td>
+            <td>{{item.name}}</td>
+            <td>{{item.desc}}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import unionWith from 'lodash/unionWith'
+import isEqual from 'lodash/isEqual'
+import { MultiListSelect } from "vue-search-select"
+
+export default {
+  data () {
+    return {
+      someList: [
+        { code: '01', name: 'aa', desc: 'desc01', disabled: true },
+        { code: '02', name: 'ab', desc: 'desc02', disabled: false },
+        { code: '03', name: 'bc', desc: 'desc03', disabled: false },
+        { code: '04', name: 'cd', desc: 'desc04', disabled: true },
+        { code: '05', name: 'de', desc: 'desc05', disabled: false },
+        { code: '06', name: 'ef', desc: 'desc06', disabled: true }
+      ],
+      items: []
+    }
+  },
+  methods: {
+    codeAndNameAndDesc (item) {
+      return `${item.code} - ${item.name} - ${item.desc}`
+    },
+    onSelect (items) {
+      this.items = items
+    },
+    reset () {
+      this.items = [] // reset
+    },
+    selectItem () {
+      this.items = unionWith(this.items, [this.someList[0]], isEqual)
+    }
+  },
+  components: {
+    MultiListSelect
+  }
+}
+</script>

docs/src/views/Model.vue

@@ -8,6 +8,7 @@
     <disabled-prop-example />
     <customizing-event-example />
     <name-and-id-prop-example />
+    <disabled-options-example />
   </div>
 </template>
 
@@ -20,6 +21,7 @@ import ErrorPropExample from "../components/Model/_ErrorProp.vue"
 import DisabledPropExample from "../components/Model/_DisabledProp.vue"
 import CustomizingEventExample from "../components/Model/_CustomizingEvent.vue"
 import NameAndIdPropExample from "../components/Model/_NameAndIdProp.vue"
+import DisabledOptionsExample from "../components/Model/_DisabledOptions.vue"
 
 export default {
   components: {
@@ -31,6 +33,7 @@ export default {
     DisabledPropExample,
     CustomizingEventExample,
     NameAndIdPropExample,
+    DisabledOptionsExample
   },
 }
 </script>

docs/src/views/MultiList.vue

@@ -3,19 +3,22 @@
     <basic-example />
     <error-prop-example />
     <disabled-prop-example />
+    <disabled-options-example />
   </div>
 </template>
 
 <script>
 import BasicExample from "../components/MultiList/_Basic.vue"
 import ErrorPropExample from "../components/MultiList/_ErrorProp.vue"
 import DisabledPropExample from "../components/MultiList/_DisabledProp.vue"
+import DisabledOptionsExample from "../components/MultiList/_DisabledOptions.vue"
 
 export default {
   components: {
     BasicExample,
     ErrorPropExample,
     DisabledPropExample,
+    DisabledOptionsExample,
   },
 }
 </script>

libs/components/ModelListSelect.vue

@@ -39,11 +39,14 @@ export default {
     customText: {
       type: Function,
     },
+    optionDisabled: {
+      type: String,
+    },
   },
   computed: {
     options() {
       return this.list.map(e => {
-        return { value: e[this.optionValue], text: this.buildText(e) }
+        return { value: e[this.optionValue], text: this.buildText(e), disabled: !!e[this.optionDisabled] }
       })
     },
     innerValue() {
@@ -52,9 +55,13 @@ export default {
         return this.modelValue
       } else if (typeof this.modelValue === "object") {
         if (this.modelValue) {
-          return { value: this.modelValue[this.optionValue], text: this.buildText(this.modelValue) }
+          return {
+            value: this.modelValue[this.optionValue],
+            text: this.buildText(this.modelValue),
+            disabled: !!this.modelValue[this.optionDisabled]
+          }
         } else {
-          return { value: "", text: "" }
+          return { value: "", text: "", disabled: false }
         }
       } else {
         return this.modelValue

libs/components/ModelSelect.vue

@@ -42,7 +42,7 @@
         v-for="(option, idx) in filteredOptions"
         :key="idx"
         class="item"
-        :class="{ 'selected': option.selected || pointer === idx }"
+        :class="{ 'selected': option.selected || pointer === idx, 'disabled': option.disabled }"
         :data-vss-custom-attr="customAttrs[idx] ? customAttrs[idx] : ''"
         @click.stop="selectItem(option)"
         @mousedown="mousedownItem"

libs/components/MultiListSelect.vue

@@ -37,16 +37,19 @@ export default {
     selectedItems: {
       type: Array,
     },
+    optionDisabled: {
+      type: String,
+    },
   },
   computed: {
     options() {
       return this.list.map(e => {
-        return { value: e[this.optionValue], text: this.buildText(e) }
+        return { value: e[this.optionValue], text: this.buildText(e), disabled: !!e[this.optionDisabled] }
       })
     },
     items() {
       return this.selectedItems.map(e => {
-        return { value: e[this.optionValue], text: this.buildText(e) }
+        return { value: e[this.optionValue], text: this.buildText(e), disabled: !!e[this.optionDisabled] }
       })
     },
   },

libs/components/MultiSelect.vue

@@ -53,7 +53,7 @@
         v-for="(option, idx) in filteredOptions"
         :key="idx"
         class="item"
-        :class="{ 'selected': option.selected || pointer === idx }"
+        :class="{ 'selected': option.selected || pointer === idx, 'disabled': option.disabled }"
         :data-vss-custom-attr="customAttr(option)"
         @click.stop="selectItem(option)"
         @mousedown="mousedownItem"

libs/components/common.js

@@ -58,7 +58,9 @@ export default {
   // down enter key
   enterItem(self) {
     const currentItem = self.filteredOptions[self.pointer]
-    if (currentItem) {
+    const disabledItem = currentItem.disabled
+
+    if (currentItem && !disabledItem) {
       self.selectItem(currentItem)
     }
   },