@nethserver/ns8-ui-lib 0.0.98 → 0.1.1

package/src/lib-components/NsDataTable.vue

@@ -380,6 +380,7 @@ export default {
     backwardText: { type: String, default: undefined },
     forwardText: { type: String, default: undefined },
     pageNumberLabel: { type: String, default: undefined },
+    filterRowsCallback: { type: Function }
   },
   data() {
     return {
@@ -455,9 +456,17 @@ export default {
       }
     },
     filterRows() {
+      if (this.filterRowsCallback) {
+        // call custom filterRows function
+        this.filteredRows = this.filterRowsCallback(this.searchFilter);
+      } else {
+        this.filteredRows = this.defaultFilterRows();
+      }
+    },
+    defaultFilterRows() {
       if (!this.searchFilter) {
-        this.filteredRows = this.allRows;
-      } else if (this.searchFilter) {
+        return this.allRows;
+      } else {
         // clean query
         const cleanRegex = /[^a-zA-Z0-9]/g;
         const queryText = this.searchFilter.replace(cleanRegex, "");
@@ -486,7 +495,7 @@ export default {
             }
           });
         }, this);
-        this.filteredRows = searchResults;
+        return searchResults;
       }
     },
     paginateTable(ev) {

package/src/lib-components/NsMultiSelect.vue

@@ -8,6 +8,7 @@
         [`${carbonPrefix}--multi-select__wrapper--inline--invalid ${carbonPrefix}--list-box__wrapper--inline--invalid`]:
           inline && isInvalid,
         [`${carbonPrefix}--multi-select--filterable`]: filterable,
+        'margin-bottom-on-open': marginBottomOnOpenEnabled,
       },
     ]"
     @focusout="onFocusOut"
@@ -19,8 +20,24 @@
         `${carbonPrefix}--label`,
         { [`${carbonPrefix}--label--disabled`]: disabled },
       ]"
-      >{{ title }}</label
     >
+      <div class="label-with-tooltip">
+        <span>
+          {{ title }}
+        </span>
+        <!-- tooltip -->
+        <cv-interactive-tooltip
+          v-if="hasTooltipSlot"
+          :alignment="tooltipAlignment"
+          :direction="tooltipDirection"
+          class="info"
+        >
+          <template slot="content">
+            <slot name="tooltip"></slot>
+          </template>
+        </cv-interactive-tooltip>
+      </div>
+    </label>
 
     <div
       role="listbox"
@@ -102,13 +119,14 @@
             @input="onInput"
             @focus="inputFocus"
             @click.stop.prevent="inputClick"
+            :disabled="disabled"
           />
           <div
             v-if="filter.length > 0"
             role="button"
             :class="`${carbonPrefix}--list-box__selection`"
             tabindex="0"
-            title="Clear selection"
+            :title="clearFilterLabel"
             @click.stop="clearFilter"
             @keydown.enter.stop.prevent="clearFilter"
             @keydown.space.stop.prevent
@@ -194,6 +212,7 @@
         :key="item.value"
         :label="item.label"
         :kind="selectedItemsColor"
+        :disabled="disabled"
         class="selected-item"
       />
     </div>
@@ -282,6 +301,7 @@ export default {
     showSelectedItems: { type: Boolean, default: true },
     unselectAriaLabel: { type: String, default: "Unselect" },
     clearSelectionAriaLabel: { type: String, default: "Clear selection" },
+    clearFilterLabel: { type: String, default: "Clear filter" },
     selectedLabel: { type: String, default: "selected" },
     userInputLabel: { type: String, default: "user input" },
     // limit the number of options to be displayed
@@ -290,6 +310,17 @@ export default {
     showItemType: { type: Boolean, default: false },
     // use cv-tag color
     selectedItemsColor: { type: String, default: "high-contrast" },
+    marginBottomOnOpen: { type: Boolean, default: false },
+    tooltipAlignment: {
+      type: String,
+      default: "start",
+      validator: (val) => ["start", "center", "end"].includes(val),
+    },
+    tooltipDirection: {
+      type: String,
+      default: "bottom",
+      validator: (val) => ["top", "left", "bottom", "right".includes(val)],
+    },
   },
   data() {
     return {
@@ -302,6 +333,7 @@ export default {
       dataFilter: "",
       isHelper: false,
       isInvalid: false,
+      marginBottomOnOpenEnabled: false,
     };
   },
   model: {
@@ -328,6 +360,19 @@ export default {
     selectionFeedback() {
       this.updateOptions();
     },
+    open() {
+      if (this.marginBottomOnOpen) {
+        if (this.open) {
+          setTimeout(() => {
+            this.marginBottomOnOpenEnabled = true;
+          }, 300);
+        } else {
+          setTimeout(() => {
+            this.marginBottomOnOpenEnabled = false;
+          }, 300);
+        }
+      }
+    },
   },
   created() {
     this.internalOptions = _cloneDeep(this.options);
@@ -388,6 +433,9 @@ export default {
         this.internalOptions.find((opt) => opt.value === val)
       );
     },
+    hasTooltipSlot() {
+      return !!this.$slots.tooltip;
+    },
   },
   methods: {
     checkSlots() {
@@ -649,6 +697,15 @@ export default {
   margin-left: 0;
   margin-bottom: 0.25rem;
 }
+
+.margin-bottom-on-open {
+  margin-bottom: 14rem;
+}
+
+.label-with-tooltip {
+  display: flex;
+  align-items: baseline;
+}
 </style>
 
 <style lang="scss">
@@ -658,4 +715,8 @@ export default {
   position: relative;
   right: 1px;
 }
+
+.ns-multi-select .bx--tooltip__label .bx--tooltip__trigger {
+  margin-left: 0.25rem;
+}
 </style>

package/src/lib-components/NsTag.vue

@@ -7,6 +7,7 @@
       `cv-tag ${carbonPrefix}--tag`,
       `${carbonPrefix}--tag--${tagKind}`,
       {
+        [`${carbonPrefix}--tag--disabled`]: disabled,
         [`${carbonPrefix}--tag--filter`]: isFilter,
         [`${carbonPrefix}--tag--${size}`]: size,
       },

package/src/lib-components/NsTextInput.vue

@@ -19,14 +19,16 @@
           },
         ]"
       >
-        <div>
-          {{ label }}
+        <div class="label-with-tooltip">
+          <span>
+            {{ label }}
+          </span>
           <!-- tooltip -->
           <cv-interactive-tooltip
             v-if="hasTooltipSlot"
             :alignment="tooltipAlignment"
             :direction="tooltipDirection"
-            class="tooltip info"
+            class="info"
           >
             <template slot="content">
               <slot name="tooltip"></slot>
@@ -158,9 +160,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.tooltip {
-  display: inline-block;
-  position: absolute;
+.label-with-tooltip {
+  display: flex;
+  align-items: baseline;
 }
 
 .prefix {