@nethserver/ns8-ui-lib 0.1.27 → 0.1.28

package/src/lib-components/NsMultiSelect.vue

@@ -157,7 +157,7 @@
         ref="list"
       >
         <div
-          v-for="(item, index) in limitedDataOptions"
+          v-for="(item, index) in filteredOptions"
           :key="`multi-select-${index}`"
           :class="[
             `${carbonPrefix}--list-box__menu-item`,
@@ -262,10 +262,10 @@ export default {
       default: "Choose",
     },
     highlight: String,
-    value: { type: Array, default: () => [] },
     // initial value of the multi-select,
     // options in the form
     // [{ label: '', value: '', name: ''}]
+    value: { type: Array, default: () => [] },
     options: {
       type: Array,
       required: true,
@@ -326,7 +326,7 @@ export default {
   data() {
     return {
       open: false,
-      dataOptions: null,
+      // dataOptions: null, ////
       // includes user input items
       internalOptions: [],
       dataValue: "",
@@ -350,16 +350,16 @@ export default {
         this.dataValue = this.value;
       } else {
         this.dataValue = this.value.filter((item) =>
-          this.dataOptions.some((opt) => opt.value === item.trim())
+          this.internalOptions.some((opt) => opt.value === item.trim())
         );
       }
     },
     options() {
       this.internalOptions = _cloneDeep(this.options);
-      this.updateOptions();
+      // this.updateOptions(); ////
     },
     selectionFeedback() {
-      this.updateOptions();
+      // this.updateOptions(); ////
     },
     open() {
       if (this.marginBottomOnOpen) {
@@ -376,13 +376,17 @@ export default {
     },
   },
   created() {
+    console.log("ns-multi-select created"); ////
+
     this.internalOptions = _cloneDeep(this.options);
-    this.updateOptions();
+    // this.updateOptions(); ////
     this.dataValue = this.value.filter((item) =>
-      this.dataOptions.some((opt) => opt.value === item.trim())
+      this.internalOptions.some((opt) => opt.value === item.trim())
     );
   },
   mounted() {
+    console.log("ns-multi-select mounted"); ////
+
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },
@@ -395,13 +399,13 @@ export default {
         return this.dataHighlighted;
       },
       set(val) {
-        let firstMatchIndex = this.dataOptions.findIndex(
+        let firstMatchIndex = this.internalOptions.findIndex(
           (item) => item.value === val
         );
         if (firstMatchIndex < 0) {
-          firstMatchIndex = this.dataOptions.length ? 0 : -1;
+          firstMatchIndex = this.internalOptions.length ? 0 : -1;
           this.dataHighlighted =
-            firstMatchIndex >= 0 ? this.dataOptions[0].value : "";
+            firstMatchIndex >= 0 ? this.internalOptions[0].value : "";
         } else {
           this.dataHighlighted = val;
         }
@@ -427,7 +431,7 @@ export default {
       return this.filterable ? { marginTop: 0, marginBottom: 0 } : {};
     },
     limitedDataOptions() {
-      return this.dataOptions.slice(0, this.maxDisplayOptions);
+      return this.internalOptions.slice(0, this.maxDisplayOptions);
     },
     selectedItems() {
       return this.dataValue.map((val) =>
@@ -437,6 +441,42 @@ export default {
     hasTooltipSlot() {
       return !!this.$slots.tooltip;
     },
+    filteredOptions() {
+      //// use this.dataFilter?
+      if (!this.filter) {
+        return this.limitedDataOptions;
+      }
+
+      let results = this.internalOptions.filter((option) => {
+        return option.label
+          .trim()
+          .toLowerCase()
+          .includes(this.filter.trim().toLowerCase());
+      });
+
+      // user input
+
+      if (this.acceptUserInput && this.filter.trim()) {
+        // suggest user input if not already present among options
+        const trimmedFilter = this.filter.trim();
+        const optionFound = results.find(
+          (option) => option.label === trimmedFilter
+        );
+
+        if (!optionFound) {
+          results.push({
+            name: trimmedFilter,
+            label: trimmedFilter,
+            value: trimmedFilter,
+            type: this.userInputLabel,
+          });
+        }
+      }
+
+      // limit results
+      results = results.slice(0, this.maxDisplayOptions);
+      return results;
+    },
   },
   methods: {
     checkSlots() {
@@ -454,7 +494,7 @@ export default {
       this.filter = "";
       this.$refs.input.focus();
       this.doOpen(true);
-      this.updateOptions();
+      // this.updateOptions(); ////
     },
     checkHighlightPosition(newHiglight) {
       if (
@@ -479,105 +519,108 @@ export default {
       }
     },
     doMove(up) {
-      if (this.dataOptions.length > 0) {
+      if (this.internalOptions.length > 0) {
         // requery could have changed
-        const currentHighlight = this.dataOptions.findIndex(
+        const currentHighlight = this.internalOptions.findIndex(
           (item) => item.value === this.highlighted
         );
         let newHiglight;
 
         if (up) {
           if (currentHighlight <= 0) {
-            newHiglight = this.dataOptions.length - 1;
+            newHiglight = this.internalOptions.length - 1;
           } else {
             newHiglight = currentHighlight - 1;
           }
         } else {
-          if (currentHighlight >= this.dataOptions.length - 1) {
+          if (currentHighlight >= this.internalOptions.length - 1) {
             newHiglight = 0;
           } else {
             newHiglight = currentHighlight + 1;
           }
         }
-        this.highlighted = this.dataOptions[newHiglight].value;
+        this.highlighted = this.internalOptions[newHiglight].value;
         // this.checkHighlightPosition(newHiglight);
       }
     },
-    updateOptions() {
-      if (this.autoFilter) {
-        const escFilter = this.filter.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const pat = new RegExp(escFilter, "iu");
-        this.dataOptions = this.internalOptions
-          .filter((opt) => pat.test(opt.label))
-          .slice(0);
-      } else {
-        this.dataOptions = this.internalOptions.slice(0);
-      }
-      if (this.highlight !== this.highlighted) {
-        this.highlighted = this.highlight;
-      }
+    // updateOptions() { ////
+    //   console.log("ns-multi-select updateOptions"); ////
 
-      // multi select unique part
-      if (
-        !this.sorting &&
-        this.selectionFeedback !== selectionFeedbackOptions[FIXED]
-      ) {
-        // if included in data value move to top
-        this.dataOptions.sort(
-          (a, b) =>
-            (this.dataValue.includes(a.value) ? -1 : 1) -
-            (this.dataValue.includes(b.value) ? -1 : 1)
-        );
-      }
+    //   if (this.autoFilter) {
+    //     const escFilter = this.filter.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    //     const pat = new RegExp(escFilter, "iu");
+    //     this.dataOptions = this.internalOptions
+    //       .filter((opt) => pat.test(opt.label))
+    //       .slice(0);
+    //   } else {
+    //     this.dataOptions = this.internalOptions.slice(0);
+    //   }
+    //   if (this.highlight !== this.highlighted) {
+    //     this.highlighted = this.highlight;
+    //   }
 
-      // added for ns-multi-select
-      if (this.acceptUserInput && this.filter.trim()) {
-        // suggest user input
+    //   // multi select unique part
+    //   if (
+    //     !this.sorting &&
+    //     this.selectionFeedback !== selectionFeedbackOptions[FIXED]
+    //   ) {
+    //     // if included in data value move to top
+    //     this.dataOptions.sort(
+    //       (a, b) =>
+    //         (this.dataValue.includes(a.value) ? -1 : 1) -
+    //         (this.dataValue.includes(b.value) ? -1 : 1)
+    //     );
+    //   }
 
-        const trimmedFilter = this.filter.trim();
-        const itemFound = this.internalOptions.find(
-          (o) => o.value.trim() === trimmedFilter
-        );
+    //   // added for ns-multi-select
+    //   if (this.acceptUserInput && this.filter.trim()) {
+    //     //// remove block?
+    //     // suggest user input
 
-        if (!itemFound) {
-          this.dataOptions.push({
-            name: trimmedFilter,
-            label: trimmedFilter,
-            value: trimmedFilter,
-            type: this.userInputLabel,
-          });
-        }
-      }
-    },
+    //     const trimmedFilter = this.filter.trim();
+    //     const itemFound = this.internalOptions.find(
+    //       (o) => o.value.trim() === trimmedFilter
+    //     );
+
+    //     if (!itemFound) {
+    //       this.dataOptions.push({
+    //         name: trimmedFilter,
+    //         label: trimmedFilter,
+    //         value: trimmedFilter,
+    //         type: this.userInputLabel,
+    //       });
+    //     }
+    //   }
+    // },
     updateHighlight() {
       let firstMatchIndex;
-      if (this.autoHighlight && this.dataOptions.length > 0) {
+      if (this.autoHighlight && this.internalOptions.length > 0) {
         // then highlight first match
         const filterRegex = new RegExp(this.filter, "iu");
-        firstMatchIndex = this.dataOptions.findIndex((item) =>
+        firstMatchIndex = this.internalOptions.findIndex((item) =>
           filterRegex.test(item.label)
         );
         if (firstMatchIndex < 0) {
           firstMatchIndex = 0;
         }
-        this.highlighted = this.dataOptions[firstMatchIndex].value;
+        this.highlighted = this.internalOptions[firstMatchIndex].value;
         // this.checkHighlightPosition(firstMatchIndex);
       }
     },
     onInput() {
       this.doOpen(true);
 
-      this.updateOptions();
+      // this.updateOptions(); ////
       this.updateHighlight();
     },
     doOpen(newVal) {
-      if (
-        newVal &&
-        !this.open &&
-        this.selectionFeedback === selectionFeedbackOptions[TOP_AFTER_REOPEN]
-      ) {
-        this.updateOptions();
-      }
+      // if ( ////
+      //   newVal &&
+      //   !this.open &&
+      //   this.selectionFeedback === selectionFeedbackOptions[TOP_AFTER_REOPEN]
+      // ) {
+      //   this.updateOptions();
+      // }
       this.open = newVal;
     },
     onDown() {
@@ -610,7 +653,7 @@ export default {
         this.filter = "";
 
         this.doOpen(false);
-        this.updateOptions();
+        // this.updateOptions(); ////
       } else {
         this.doOpen(true);
       }
@@ -675,9 +718,9 @@ export default {
         }
       }
 
-      if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
-        this.updateOptions();
-      }
+      // if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
+      //   this.updateOptions(); ////
+      // }
       this.$refs.button.focus();
       this.$emit("change", this.dataValue);
     },
@@ -732,4 +775,4 @@ export default {
 .ns-multi-select .bx--tooltip__label .bx--tooltip__trigger {
   margin-left: 0.25rem;
 }
-</style>
+</style>