@nethserver/ns8-ui-lib 0.1.26 → 0.1.28

package/README.md

@@ -2,25 +2,4 @@
 
 This library includes [Vue.js](https://vuejs.org/) UI components and mixins used by [NethServer 8](https://github.com/NethServer/ns8-core) UI.
 
-In `src/main.js` add the following to globally include NS8 components:
-
-```js
-// main.js
-
-import ns8Lib from "@nethserver/ns8-ui-lib";
-Vue.use(ns8Lib);
-```
-
-To import a mixin inside a component (e.g. `TaskService` mixin):
-
-```js
-// ComponentName.vue
-
-import { TaskService } from "@nethserver/ns8-ui-lib";
-
-export default {
-  name: "ComponentName",
-  mixins: [TaskService],
-  ...
-}
-```
+Documentation of NS8 UI library can be found in [this section of the Developer manual](https://nethserver.github.io/ns8-core/ui/library/).

package/dist/ns8-ui-lib.esm.js

@@ -18105,7 +18105,7 @@ var __vue_render__$g = function () {
       "for": _vm.uid,
       "aria-label": _vm.hiddenLabel
     }
-  }, [_c('div', [_vm._v("\n      " + _vm._s(_vm.visibleLabel) + "\n      "), _vm._v(" "), _vm.hasTooltipSlot && !_vm.hideLabel ? _c('cv-interactive-tooltip', {
+  }, [_c('div', [_c('span', [_vm._v(_vm._s(_vm.visibleLabel))]), _vm._v(" "), _vm.hasTooltipSlot && !_vm.hideLabel ? _c('cv-interactive-tooltip', {
     staticClass: "tooltip info",
     attrs: {
       "alignment": _vm.tooltipAlignment,
@@ -18148,11 +18148,11 @@ var __vue_staticRenderFns__$g = [];
 
 const __vue_inject_styles__$h = function (inject) {
   if (!inject) return;
-  inject("data-v-c1657d8a_0", {
-    source: ".tooltip[data-v-c1657d8a]{display:inline-block;position:absolute}",
+  inject("data-v-ce406b84_0", {
+    source: ".tooltip[data-v-ce406b84]{display:inline-block;position:absolute}",
     map: undefined,
     media: undefined
-  }), inject("data-v-c1657d8a_1", {
+  }), inject("data-v-ce406b84_1", {
     source: ".ns-toggle .bx--tooltip__label .bx--tooltip__trigger{margin-left:.25rem}",
     map: undefined,
     media: undefined
@@ -18161,7 +18161,7 @@ const __vue_inject_styles__$h = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$h = "data-v-c1657d8a";
+const __vue_scope_id__$h = "data-v-ce406b84";
 /* module identifier */
 
 const __vue_module_identifier__$h = undefined;
@@ -20785,8 +20785,6 @@ var cloneDeep_1 = cloneDeep;
 
 //
 const TOP_AFTER_REOPEN = 0;
-const TOP = 1;
-const FIXED = 2;
 const selectionFeedbackOptions = ["top-after-reopen", "top", "fixed"];
 var script$5 = {
   name: "NsMultiSelect",
@@ -20824,13 +20822,13 @@ var script$5 = {
       default: "Choose"
     },
     highlight: String,
+    // initial value of the multi-select,
+    // options in the form
+    // [{ label: '', value: '', name: ''}]
     value: {
       type: Array,
       default: () => []
     },
-    // initial value of the multi-select,
-    // options in the form
-    // [{ label: '', value: '', name: ''}]
     options: {
       type: Array,
       required: true,
@@ -20926,7 +20924,7 @@ var script$5 = {
   data() {
     return {
       open: false,
-      dataOptions: null,
+      // dataOptions: null, ////
       // includes user input items
       internalOptions: [],
       dataValue: "",
@@ -20951,17 +20949,15 @@ var script$5 = {
       if (this.acceptUserInput) {
         this.dataValue = this.value;
       } else {
-        this.dataValue = this.value.filter(item => this.dataOptions.some(opt => opt.value === item.trim()));
+        this.dataValue = this.value.filter(item => this.internalOptions.some(opt => opt.value === item.trim()));
       }
     },
 
     options() {
-      this.internalOptions = cloneDeep_1(this.options);
-      this.updateOptions();
+      this.internalOptions = cloneDeep_1(this.options); // this.updateOptions(); ////
     },
 
-    selectionFeedback() {
-      this.updateOptions();
+    selectionFeedback() {// this.updateOptions(); ////
     },
 
     open() {
@@ -20981,12 +20977,16 @@ var script$5 = {
   },
 
   created() {
-    this.internalOptions = cloneDeep_1(this.options);
-    this.updateOptions();
-    this.dataValue = this.value.filter(item => this.dataOptions.some(opt => opt.value === item.trim()));
+    console.log("ns-multi-select created"); ////
+
+    this.internalOptions = cloneDeep_1(this.options); // this.updateOptions(); ////
+
+    this.dataValue = this.value.filter(item => 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();
@@ -21003,11 +21003,11 @@ var script$5 = {
       },
 
       set(val) {
-        let firstMatchIndex = this.dataOptions.findIndex(item => item.value === val);
+        let firstMatchIndex = this.internalOptions.findIndex(item => item.value === val);
 
         if (firstMatchIndex < 0) {
-          firstMatchIndex = this.dataOptions.length ? 0 : -1;
-          this.dataHighlighted = firstMatchIndex >= 0 ? this.dataOptions[0].value : "";
+          firstMatchIndex = this.internalOptions.length ? 0 : -1;
+          this.dataHighlighted = firstMatchIndex >= 0 ? this.internalOptions[0].value : "";
         } else {
           this.dataHighlighted = val;
         }
@@ -21042,7 +21042,7 @@ var script$5 = {
     },
 
     limitedDataOptions() {
-      return this.dataOptions.slice(0, this.maxDisplayOptions);
+      return this.internalOptions.slice(0, this.maxDisplayOptions);
     },
 
     selectedItems() {
@@ -21051,6 +21051,36 @@ var script$5 = {
 
     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;
     }
 
   },
@@ -21064,8 +21094,7 @@ var script$5 = {
     clearFilter() {
       this.filter = "";
       this.$refs.input.focus();
-      this.doOpen(true);
-      this.updateOptions();
+      this.doOpen(true); // this.updateOptions(); ////
     },
 
     checkHighlightPosition(newHiglight) {
@@ -21079,92 +21108,103 @@ var script$5 = {
     },
 
     doMove(up) {
-      if (this.dataOptions.length > 0) {
+      if (this.internalOptions.length > 0) {
         // requery could have changed
-        const currentHighlight = this.dataOptions.findIndex(item => item.value === this.highlighted);
+        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.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;
-      } // 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));
-      } // added for ns-multi-select
-
-
-      if (this.acceptUserInput && this.filter.trim()) {
-        // suggest user input
-        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
-          });
-        }
+        this.highlighted = this.internalOptions[newHiglight].value; // this.checkHighlightPosition(newHiglight);
       }
     },
 
+    // updateOptions() { ////
+    //   console.log("ns-multi-select 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;
+    //   }
+    //   // 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)
+    //     );
+    //   }
+    //   // added for ns-multi-select
+    //   if (this.acceptUserInput && this.filter.trim()) {
+    //     //// remove block?
+    //     // suggest user input
+    //     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 => filterRegex.test(item.label));
+        firstMatchIndex = this.internalOptions.findIndex(item => filterRegex.test(item.label));
 
         if (firstMatchIndex < 0) {
           firstMatchIndex = 0;
         }
 
-        this.highlighted = this.dataOptions[firstMatchIndex].value; // this.checkHighlightPosition(firstMatchIndex);
+        this.highlighted = this.internalOptions[firstMatchIndex].value; // this.checkHighlightPosition(firstMatchIndex);
       }
     },
 
     onInput() {
-      this.doOpen(true);
-      this.updateOptions();
+      this.doOpen(true); // 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;
     },
 
@@ -21200,8 +21240,7 @@ var script$5 = {
         this.onItemClick(this.highlighted);
         this.$refs.input.focus();
         this.filter = "";
-        this.doOpen(false);
-        this.updateOptions();
+        this.doOpen(false); // this.updateOptions(); ////
       } else {
         this.doOpen(true);
       }
@@ -21263,11 +21302,10 @@ var script$5 = {
             this.clearFilter();
           });
         }
-      }
+      } // if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
+      //   this.updateOptions(); ////
+      // }
 
-      if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
-        this.updateOptions();
-      }
 
       this.$refs.button.focus();
       this.$emit("change", this.dataValue);
@@ -21501,7 +21539,7 @@ var __vue_render__$e = function () {
       "id": _vm.uid,
       "role": "listbox"
     }
-  }, _vm._l(_vm.limitedDataOptions, function (item, index) {
+  }, _vm._l(_vm.filteredOptions, function (item, index) {
     var _obj;
 
     return _c('div', {
@@ -21580,11 +21618,11 @@ var __vue_staticRenderFns__$e = [];
 
 const __vue_inject_styles__$f = function (inject) {
   if (!inject) return;
-  inject("data-v-3d8cc568_0", {
-    source: ".bx--multi-select--filterable .bx--tag.selected-item[data-v-3d8cc568]{margin-left:0;margin-bottom:.25rem}.margin-bottom-on-open[data-v-3d8cc568]{margin-bottom:14rem}.label-with-tooltip[data-v-3d8cc568]{display:flex;align-items:baseline}",
+  inject("data-v-3f4d297b_0", {
+    source: ".bx--multi-select--filterable .bx--tag.selected-item[data-v-3f4d297b]{margin-left:0;margin-bottom:.25rem}.margin-bottom-on-open[data-v-3f4d297b]{margin-bottom:14rem}.label-with-tooltip[data-v-3f4d297b]{display:flex;align-items:baseline}",
     map: undefined,
     media: undefined
-  }), inject("data-v-3d8cc568_1", {
+  }), inject("data-v-3f4d297b_1", {
     source: ".selected-item button.bx--tag__close-icon{position:relative;right:1px}.ns-multi-select .bx--tooltip__label .bx--tooltip__trigger{margin-left:.25rem}",
     map: undefined,
     media: undefined
@@ -21593,7 +21631,7 @@ const __vue_inject_styles__$f = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$f = "data-v-3d8cc568";
+const __vue_scope_id__$f = "data-v-3f4d297b";
 /* module identifier */
 
 const __vue_module_identifier__$f = undefined;