@nethserver/ns8-ui-lib 0.1.10 → 0.1.13

package/package.json

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

package/src/lib-components/NsComboBox.vue

@@ -143,11 +143,7 @@
           @mousedown.prevent
         >
           <div :class="[`${carbonPrefix}--list-box__menu-item__option`]">
-            {{
-              showItemType && item.type
-                ? item.label + " - " + item.type
-                : item.label
-            }}
+            {{ getItemLabel(item) }}
           </div>
         </div>
       </div>
@@ -226,6 +222,7 @@ export default {
     maxDisplayOptions: { type: Number, default: 100 },
     acceptUserInput: { type: Boolean, default: false },
     showItemType: { type: Boolean, default: false },
+    showItemDescription: { type: Boolean, default: false },
     marginBottomOnOpen: { type: Boolean, default: false },
     tooltipAlignment: {
       type: String,
@@ -555,6 +552,18 @@ export default {
       if (this.disabled) return;
       this.doOpen(true);
     },
+    getItemLabel(item) {
+      let label = item.label;
+
+      if (this.showItemType && item.type) {
+        label += ` [${item.type}]`;
+      }
+
+      if (this.showItemDescription && item.description) {
+        label += ` ${item.description}`;
+      }
+      return label;
+    },
   },
 };
 </script>
@@ -576,4 +585,4 @@ export default {
 .ns-combo-box .bx--tooltip__label .bx--tooltip__trigger {
   margin-left: 0.25rem;
 }
-</style>
+</style>

package/src/lib-components/NsMultiSelect.vue

@@ -175,11 +175,7 @@
               :value="item.value"
               :name="item.name"
               :data-test="item.name"
-              :label="
-                showItemType && item.type
-                  ? item.label + ' - ' + item.type
-                  : item.label
-              "
+              :label="getItemLabel(item)"
               style="pointer-events: none"
             />
           </div>
@@ -308,6 +304,7 @@ export default {
     maxDisplayOptions: { type: Number, default: 100 },
     acceptUserInput: { type: Boolean, default: false },
     showItemType: { type: Boolean, default: false },
+    showItemDescription: { type: Boolean, default: false },
     // use cv-tag color
     selectedItemsColor: { type: String, default: "high-contrast" },
     marginBottomOnOpen: { type: Boolean, default: false },
@@ -688,6 +685,18 @@ export default {
     inputFocus() {
       this.doOpen(true);
     },
+    getItemLabel(item) {
+      let label = item.label;
+
+      if (this.showItemType && item.type) {
+        label += ` [${item.type}]`;
+      }
+
+      if (this.showItemDescription && item.description) {
+        label += ` ${item.description}`;
+      }
+      return label;
+    },
   },
 };
 </script>
@@ -719,4 +728,4 @@ export default {
 .ns-multi-select .bx--tooltip__label .bx--tooltip__trigger {
   margin-left: 0.25rem;
 }
-</style>
+</style>

package/src/lib-components/pictograms/UserProfilePictogram.vue

@@ -0,0 +1,14 @@
+<template>
+  <path
+    id="user--profile_1_"
+    d="M16,31.36C7.53,31.36,0.64,24.47,0.64,16S7.53,0.64,16,0.64S31.36,7.53,31.36,16
+	S24.47,31.36,16,31.36z M6.349,27c2.579,2.266,5.957,3.64,9.651,3.64c3.693,0,7.072-1.374,9.65-3.64h-0.01
+	c0-4.341-2.941-8.161-7.153-9.29c-0.144-0.038-0.248-0.16-0.265-0.307c-0.018-0.146,0.058-0.289,0.188-0.358
+	c1.678-0.897,2.72-2.635,2.72-4.534c0-2.84-2.306-5.151-5.14-5.151s-5.141,2.311-5.141,5.151c0,1.899,1.042,3.637,2.72,4.534
+	c0.13,0.069,0.205,0.212,0.188,0.358s-0.122,0.269-0.264,0.307C9.292,18.835,6.36,22.655,6.36,27H6.349z M19.435,17.25
+	c3.913,1.377,6.646,4.973,6.905,9.104c2.655-2.651,4.3-6.314,4.3-10.354c0-8.073-6.567-14.64-14.64-14.64
+	C7.927,1.36,1.36,7.927,1.36,16c0,4.04,1.645,7.703,4.3,10.354c0.258-4.135,2.982-7.729,6.883-9.104
+	c-1.506-1.094-2.415-2.846-2.415-4.739c0-3.237,2.629-5.871,5.86-5.871c3.232,0,5.861,2.633,5.861,5.871
+	C21.85,14.404,20.941,16.156,19.435,17.25z"
+  />
+</template>