@nethserver/ns8-ui-lib 0.0.99 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.0.99",
+  "version": "0.1.2",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",

package/src/lib-components/NsCheckbox.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="ns-checkbox cv-checkbox"
+    :class="[
+      `${carbonPrefix}--checkbox-wrapper`,
+      { [`${carbonPrefix}--form-item`]: formItem },
+    ]"
+  >
+    <input
+      ref="input"
+      v-bind="$attrs"
+      v-on="inputListeners"
+      :class="`${carbonPrefix}--checkbox`"
+      type="checkbox"
+      :checked="isChecked === true"
+      :aria-checked="`${isChecked}`"
+      @focus="onFocus"
+      @blur="onBlur"
+      :value="value"
+      :id="uid"
+    />
+    <label
+      :class="[
+        `${carbonPrefix}--checkbox-label`,
+        {
+          [`${carbonPrefix}--label--disabled`]:
+            $attrs.disabled !== undefined && this.$attrs.disabled,
+          [`${carbonPrefix}--checkbox-label__focus`]: hasFocus,
+        },
+      ]"
+      :data-contained-checkbox-state="isChecked"
+      :data-contained-checkbox-disabled="$attrs.disabled"
+      :for="uid"
+    >
+      <!-- <span ////
+        :class="[
+          `${carbonPrefix}--checkbox-label-text`,
+          { [`${carbonPrefix}--visually-hidden`]: hideLabel },
+        ]"
+      >
+        {{ label }}
+      </span> -->
+      <div
+        :class="[
+          `${carbonPrefix}--checkbox-label-text`,
+          { [`${carbonPrefix}--visually-hidden`]: hideLabel },
+        ]"
+      >
+        <div class="label-with-tooltip">
+          <span>
+            {{ label }}
+          </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>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script>
+import { CvCheckbox } from "@carbon/vue";
+
+export default {
+  name: "NsCheckbox",
+  extends: CvCheckbox,
+  inheritAttrs: false,
+  props: {
+    hideLabel: Boolean,
+    label: String,
+    mixed: Boolean,
+    formItem: { type: Boolean, default: true },
+    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)],
+    },
+  },
+  computed: {
+    hasTooltipSlot() {
+      return !!this.$slots.tooltip;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.label-with-tooltip {
+  display: flex;
+}
+</style>
+
+<style lang="scss">
+// global styles
+
+.ns-checkbox .bx--tooltip__label .bx--tooltip__trigger {
+  margin-left: 0.25rem;
+}
+</style>

package/src/lib-components/NsComboBox.vue

@@ -1,7 +1,11 @@
 <template>
   <div
-    class="ns-combo-box cv-combo-box"
-    :class="`${carbonPrefix}--list-box__wrapper`"
+    :class="[
+      'ns-combo-box',
+      'cv-combo-box',
+      `${carbonPrefix}--list-box__wrapper`,
+      { 'margin-bottom-on-open': marginBottomOnOpenEnabled },
+    ]"
     @focusout="onFocusOut"
   >
     <label
@@ -11,8 +15,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"
@@ -206,6 +226,17 @@ export default {
     maxDisplayOptions: { type: Number, default: 100 },
     acceptUserInput: { type: Boolean, default: false },
     showItemType: { type: Boolean, default: false },
+    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 {
@@ -218,6 +249,7 @@ export default {
       isInvalid: false,
       // includes user input items
       internalOptions: [],
+      marginBottomOnOpenEnabled: false,
     };
   },
   model: {
@@ -237,6 +269,19 @@ export default {
       this.internalOptions = _cloneDeep(this.options);
       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);
@@ -286,6 +331,9 @@ export default {
     limitedDataOptions() {
       return this.dataOptions.slice(0, this.maxDisplayOptions);
     },
+    hasTooltipSlot() {
+      return !!this.$slots.tooltip;
+    },
   },
   methods: {
     checkSlots() {
@@ -510,3 +558,22 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+.margin-bottom-on-open {
+  margin-bottom: 14rem;
+}
+
+.label-with-tooltip {
+  display: flex;
+  align-items: baseline;
+}
+</style>
+
+<style lang="scss">
+// global styles
+
+.ns-combo-box .bx--tooltip__label .bx--tooltip__trigger {
+  margin-left: 0.25rem;
+}
+</style>

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,6 +119,7 @@
             @input="onInput"
             @focus="inputFocus"
             @click.stop.prevent="inputClick"
+            :disabled="disabled"
           />
           <div
             v-if="filter.length > 0"
@@ -194,6 +212,7 @@
         :key="item.value"
         :label="item.label"
         :kind="selectedItemsColor"
+        :disabled="disabled"
         class="selected-item"
       />
     </div>
@@ -291,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 {
@@ -303,6 +333,7 @@ export default {
       dataFilter: "",
       isHelper: false,
       isInvalid: false,
+      marginBottomOnOpenEnabled: false,
     };
   },
   model: {
@@ -329,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);
@@ -389,6 +433,9 @@ export default {
         this.internalOptions.find((opt) => opt.value === val)
       );
     },
+    hasTooltipSlot() {
+      return !!this.$slots.tooltip;
+    },
   },
   methods: {
     checkSlots() {
@@ -650,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">
@@ -659,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,
       },