@nethserver/ns8-ui-lib 1.0.0 → 1.0.2

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

@@ -20342,7 +20342,8 @@ var script$4 = {
     input: ["focus", "blur"]
   })],
   components: {
-    WarningFilled16: WarningFilled16__default["default"],
+    WarningFilled16: iconsVue.WarningFilled16,
+    WarningAltFilled16: iconsVue.WarningAltFilled16,
     ChevronDown16: ChevronDown16__default["default"],
     Close16: Close16__default["default"]
   },
@@ -20354,6 +20355,10 @@ var script$4 = {
       type: String,
       default: undefined
     },
+    warnText: {
+      type: String,
+      default: undefined
+    },
     helperText: {
       type: String,
       default: undefined
@@ -20433,6 +20438,7 @@ var script$4 = {
       dataFilter: null,
       isHelper: false,
       isInvalid: false,
+      isWarn: false,
       // includes user input items
       internalOptions: [],
       marginBottomOnOpenEnabled: false
@@ -20532,6 +20538,7 @@ var script$4 = {
       // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots["invalid-message"] || this.invalidMessage && this.invalidMessage.length);
       this.isHelper = !!(this.$slots["helper-text"] || this.helperText && this.helperText.length);
+      this.isWarn = !!(this.$slots["warn-text"] || this.warnText && this.warnText.length);
     },
     clearFilter: function clearFilter() {
       if (this.disabled) return;
@@ -20759,7 +20766,7 @@ var __vue_script__$4 = script$4;
 /* template */
 
 var __vue_render__$d = function __vue_render__() {
-  var _obj, _obj$1, _obj$2, _obj$3, _obj$4;
+  var _obj, _obj$1, _obj$2, _obj$3, _obj$4, _obj$5;
 
   var _vm = this;
 
@@ -20770,11 +20777,11 @@ var __vue_render__$d = function __vue_render__() {
   return _c('div', {
     class: ['ns-combo-box', 'cv-combo-box', _vm.carbonPrefix + "--list-box__wrapper", {
       'margin-bottom-on-open': _vm.marginBottomOnOpenEnabled
-    }],
+    }, (_obj = {}, _obj[_vm.carbonPrefix + "--text-input__field-wrapper--warning"] = !_vm.isInvalid && _vm.isWarn, _obj)],
     on: {
       "focusout": _vm.onFocusOut
     }
-  }, [_vm.title ? _vm._ssrNode("<label" + _vm._ssrAttr("for", _vm.uid) + _vm._ssrClass(null, [_vm.carbonPrefix + "--label", (_obj = {}, _obj[_vm.carbonPrefix + "--label--disabled"] = _vm.disabled, _obj)]) + " data-v-654085ae>", "</label>", [_vm._ssrNode("<div class=\"label-with-tooltip\" data-v-654085ae>", "</div>", [_vm._ssrNode("<span data-v-654085ae>" + _vm._ssrEscape("\n        " + _vm._s(_vm.title) + "\n      ") + "</span> "), _vm.hasTooltipSlot ? _c('cv-interactive-tooltip', {
+  }, [_vm.title ? _vm._ssrNode("<label" + _vm._ssrAttr("for", _vm.uid) + _vm._ssrClass(null, [_vm.carbonPrefix + "--label", (_obj$1 = {}, _obj$1[_vm.carbonPrefix + "--label--disabled"] = _vm.disabled, _obj$1)]) + " data-v-1d6c40a4>", "</label>", [_vm._ssrNode("<div class=\"label-with-tooltip\" data-v-1d6c40a4>", "</div>", [_vm._ssrNode("<span data-v-1d6c40a4>" + _vm._ssrEscape("\n        " + _vm._s(_vm.title) + "\n      ") + "</span> "), _vm.hasTooltipSlot ? _c('cv-interactive-tooltip', {
     staticClass: "info",
     attrs: {
       "alignment": _vm.tooltipAlignment,
@@ -20782,21 +20789,25 @@ var __vue_render__$d = function __vue_render__() {
     }
   }, [_c('template', {
     slot: "content"
-  }, [_vm._t("tooltip")], 2)], 2) : _vm._e()], 2)]) : _vm._e(), _vm._ssrNode(" "), _vm._ssrNode("<div role=\"listbox\" tabindex=\"-1\"" + _vm._ssrAttr("data-invalid", _vm.isInvalid) + _vm._ssrAttrs(_vm.$attrs) + _vm._ssrClass(null, [_vm.carbonPrefix + "--combo-box " + _vm.carbonPrefix + "--list-box", (_obj$1 = {}, _obj$1[_vm.carbonPrefix + "--list-box--light"] = _vm.isLight, _obj$1[_vm.carbonPrefix + "--combo-box--expanded"] = _vm.open, _obj$1[_vm.carbonPrefix + "--list-box--expanded"] = _vm.open, _obj$1[_vm.carbonPrefix + "--combo-box--disabled " + _vm.carbonPrefix + "--list-box--disabled"] = _vm.disabled, _obj$1)]) + " data-v-654085ae>", "</div>", [_vm.isInvalid ? _c('WarningFilled16', {
-    class: [_vm.carbonPrefix + "--list-box__invalid-icon"]
-  }) : _vm._e(), _vm._ssrNode(" "), _vm._ssrNode("<div role=\"button\" aria-haspopup=\"true\"" + _vm._ssrAttr("aria-expanded", _vm.open ? 'true' : 'false') + _vm._ssrAttr("aria-owns", _vm.uid) + _vm._ssrAttr("aria-controls", _vm.uid) + " tabindex=\"-1\" type=\"button\"" + _vm._ssrAttr("aria-label", _vm.open ? 'close menu' : 'open menu') + " data-toggle=\"true\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__field"]) + " data-v-654085ae>", "</div>", [_vm._ssrNode("<input" + _vm._ssrAttr("aria-controls", _vm.uid) + " aria-autocomplete=\"list\" role=\"combobox\"" + _vm._ssrAttr("aria-disabled", _vm.disabled) + _vm._ssrAttr("aria-expanded", _vm.open ? 'true' : 'false') + " autocomplete=\"off\"" + _vm._ssrAttr("disabled", _vm.disabled) + _vm._ssrAttr("placeholder", _vm.label) + _vm._ssrAttr("value", _vm.filter) + _vm._ssrClass(null, [_vm.carbonPrefix + "--text-input", (_obj$2 = {}, _obj$2[_vm.carbonPrefix + "--text-input--empty"] = !_vm.filter || _vm.filter.length === 0, _obj$2)]) + " data-v-654085ae> "), _vm.filter ? _vm._ssrNode("<div role=\"button\" tabindex=\"0\"" + _vm._ssrAttr("title", _vm.clearFilterLabel) + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__selection"]) + " data-v-654085ae>", "</div>", [_c('Close16')], 1) : _vm._e(), _vm._ssrNode(" "), _vm._ssrNode("<div role=\"button\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__menu-icon", (_obj$3 = {}, _obj$3[_vm.carbonPrefix + "--list-box__menu-icon--open"] = _vm.open, _obj$3)]) + " data-v-654085ae>", "</div>", [_c('chevron-down-16', {
+  }, [_vm._t("tooltip")], 2)], 2) : _vm._e()], 2)]) : _vm._e(), _vm._ssrNode(" "), _vm._ssrNode("<div role=\"listbox\" tabindex=\"-1\"" + _vm._ssrAttr("data-invalid", _vm.isInvalid) + _vm._ssrAttrs(_vm.$attrs) + _vm._ssrClass(null, [_vm.carbonPrefix + "--combo-box " + _vm.carbonPrefix + "--list-box", (_obj$2 = {}, _obj$2[_vm.carbonPrefix + "--list-box--light"] = _vm.isLight, _obj$2[_vm.carbonPrefix + "--combo-box--expanded"] = _vm.open, _obj$2[_vm.carbonPrefix + "--list-box--expanded"] = _vm.open, _obj$2[_vm.carbonPrefix + "--combo-box--disabled " + _vm.carbonPrefix + "--list-box--disabled"] = _vm.disabled, _obj$2)]) + " data-v-1d6c40a4>", "</div>", [_vm.isInvalid ? _c('WarningFilled16', {
+    class: [_vm.carbonPrefix + "--list-box__invalid-icon invalid-icon"]
+  }) : _vm._e(), _vm._ssrNode(" "), _vm.isWarn && !_vm.isInvalid ? _c('WarningAltFilled16', {
+    class: _vm.carbonPrefix + "--list-box__invalid-icon " + _vm.carbonPrefix + "--list-box__invalid-icon--warning warn-icon"
+  }) : _vm._e(), _vm._ssrNode(" "), _vm._ssrNode("<div role=\"button\" aria-haspopup=\"true\"" + _vm._ssrAttr("aria-expanded", _vm.open ? 'true' : 'false') + _vm._ssrAttr("aria-owns", _vm.uid) + _vm._ssrAttr("aria-controls", _vm.uid) + " tabindex=\"-1\" type=\"button\"" + _vm._ssrAttr("aria-label", _vm.open ? 'close menu' : 'open menu') + " data-toggle=\"true\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__field"]) + " data-v-1d6c40a4>", "</div>", [_vm._ssrNode("<input" + _vm._ssrAttr("aria-controls", _vm.uid) + " aria-autocomplete=\"list\" role=\"combobox\"" + _vm._ssrAttr("aria-disabled", _vm.disabled) + _vm._ssrAttr("aria-expanded", _vm.open ? 'true' : 'false') + " autocomplete=\"off\"" + _vm._ssrAttr("disabled", _vm.disabled) + _vm._ssrAttr("placeholder", _vm.label) + _vm._ssrAttr("value", _vm.filter) + _vm._ssrClass(null, [_vm.carbonPrefix + "--text-input", (_obj$3 = {}, _obj$3[_vm.carbonPrefix + "--text-input--empty"] = !_vm.filter || _vm.filter.length === 0, _obj$3)]) + " data-v-1d6c40a4> "), _vm.filter ? _vm._ssrNode("<div role=\"button\" tabindex=\"0\"" + _vm._ssrAttr("title", _vm.clearFilterLabel) + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__selection"]) + " data-v-1d6c40a4>", "</div>", [_c('Close16')], 1) : _vm._e(), _vm._ssrNode(" "), _vm._ssrNode("<div role=\"button\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__menu-icon", (_obj$4 = {}, _obj$4[_vm.carbonPrefix + "--list-box__menu-icon--open"] = _vm.open, _obj$4)]) + " data-v-1d6c40a4>", "</div>", [_c('chevron-down-16', {
     attrs: {
       "aria-label": _vm.open ? 'Close menu' : 'Open menu'
     }
   })], 1)], 2), _vm._ssrNode(" <div" + _vm._ssrAttr("id", _vm.uid) + " role=\"listbox\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__menu"]) + _vm._ssrStyle(null, null, {
     display: _vm.open ? '' : 'none'
-  }) + " data-v-654085ae>" + _vm._ssrList(_vm.limitedDataOptions, function (item, index) {
+  }) + " data-v-1d6c40a4>" + _vm._ssrList(_vm.limitedDataOptions, function (item, index) {
     var _obj;
 
-    return "<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__menu-item", (_obj = {}, _obj[_vm.carbonPrefix + "--list-box__menu-item--highlighted"] = _vm.highlighted === item.value, _obj)]) + " data-v-654085ae><div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__menu-item__option"]) + " data-v-654085ae>" + _vm._ssrEscape("\n          " + _vm._s(_vm.getItemLabel(item)) + "\n        ") + "</div></div>";
-  }) + "</div>")], 2), _vm._ssrNode(" "), _vm.isInvalid ? _vm._ssrNode("<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--form-requirement"]) + " data-v-654085ae>", "</div>", [_vm._t("invalid-message", function () {
+    return "<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__menu-item", (_obj = {}, _obj[_vm.carbonPrefix + "--list-box__menu-item--highlighted"] = _vm.highlighted === item.value, _obj)]) + " data-v-1d6c40a4><div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--list-box__menu-item__option"]) + " data-v-1d6c40a4>" + _vm._ssrEscape("\n          " + _vm._s(_vm.getItemLabel(item)) + "\n        ") + "</div></div>";
+  }) + "</div>")], 2), _vm._ssrNode(" "), _vm.isInvalid ? _vm._ssrNode("<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--form-requirement"]) + " data-v-1d6c40a4>", "</div>", [_vm._t("invalid-message", function () {
     return [_vm._v(_vm._s(_vm.invalidMessage))];
-  })], 2) : _vm._e(), _vm._ssrNode(" "), !_vm.isInvalid && _vm.isHelper ? _vm._ssrNode("<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--form__helper-text", (_obj$4 = {}, _obj$4[_vm.carbonPrefix + "--form__helper-text--disabled"] = _vm.disabled, _obj$4)]) + " data-v-654085ae>", "</div>", [_vm._t("helper-text", function () {
+  })], 2) : _vm._e(), _vm._ssrNode(" "), _vm.isWarn && !_vm.isInvalid ? _vm._ssrNode("<div" + _vm._ssrClass(null, _vm.carbonPrefix + "--form__requirement warn-text") + " data-v-1d6c40a4>", "</div>", [_vm._t("warn-text", function () {
+    return [_vm._v(_vm._s(_vm.warnText))];
+  })], 2) : _vm._e(), _vm._ssrNode(" "), _vm.isHelper && !_vm.isInvalid && !_vm.isWarn ? _vm._ssrNode("<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--form__helper-text", (_obj$5 = {}, _obj$5[_vm.carbonPrefix + "--form__helper-text--disabled"] = _vm.disabled, _obj$5)]) + " data-v-1d6c40a4>", "</div>", [_vm._t("helper-text", function () {
     return [_vm._v(_vm._s(_vm.helperText))];
   })], 2) : _vm._e()], 2);
 };
@@ -20806,12 +20817,12 @@ var __vue_staticRenderFns__$d = [];
 
 var __vue_inject_styles__$e = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-654085ae_0", {
-    source: ".margin-bottom-on-open[data-v-654085ae]{margin-bottom:14rem}.label-with-tooltip[data-v-654085ae]{display:flex;align-items:baseline}",
+  inject("data-v-1d6c40a4_0", {
+    source: ".margin-bottom-on-open[data-v-1d6c40a4]{margin-bottom:14rem}.label-with-tooltip[data-v-1d6c40a4]{display:flex;align-items:baseline}.ns-combo-box .warn-text[data-v-1d6c40a4]{margin-top:.25rem}.invalid-icon[data-v-1d6c40a4],.warn-icon[data-v-1d6c40a4]{right:3rem}",
     map: undefined,
     media: undefined
-  }), inject("data-v-654085ae_1", {
-    source: ".ns-combo-box .bx--tooltip__label .bx--tooltip__trigger{margin-left:.25rem}",
+  }), inject("data-v-1d6c40a4_1", {
+    source: ".ns-combo-box .bx--tooltip__label .bx--tooltip__trigger{margin-left:.25rem}.ns-combo-box .bx--list-box__invalid-icon--warning{position:absolute;top:50%;right:3rem;fill:#f1c21b;transform:translateY(-50%)}.ns-combo-box .bx--list-box__invalid-icon--warning+.bx--list-box__field .bx--list-box__selection{right:4rem!important}",
     map: undefined,
     media: undefined
   });
@@ -20819,10 +20830,10 @@ var __vue_inject_styles__$e = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__$e = "data-v-654085ae";
+var __vue_scope_id__$e = "data-v-1d6c40a4";
 /* module identifier */
 
-var __vue_module_identifier__$e = "data-v-654085ae";
+var __vue_module_identifier__$e = "data-v-1d6c40a4";
 /* functional template */
 
 var __vue_is_functional_template__$e = false;

package/package.json

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

package/src/lib-components/NsComboBox.vue

@@ -9,6 +9,10 @@
       'cv-combo-box',
       `${carbonPrefix}--list-box__wrapper`,
       { 'margin-bottom-on-open': marginBottomOnOpenEnabled },
+      {
+        [`${carbonPrefix}--text-input__field-wrapper--warning`]:
+          !isInvalid && isWarn,
+      },
     ]"
     @focusout="onFocusOut"
   >
@@ -62,7 +66,11 @@
     >
       <WarningFilled16
         v-if="isInvalid"
-        :class="[`${carbonPrefix}--list-box__invalid-icon`]"
+        :class="[`${carbonPrefix}--list-box__invalid-icon invalid-icon`]"
+      />
+      <WarningAltFilled16
+        v-if="isWarn && !isInvalid"
+        :class="`${carbonPrefix}--list-box__invalid-icon ${carbonPrefix}--list-box__invalid-icon--warning warn-icon`"
       />
       <div
         role="button"
@@ -156,7 +164,13 @@
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
     <div
-      v-if="!isInvalid && isHelper"
+      v-if="isWarn && !isInvalid"
+      :class="`${carbonPrefix}--form__requirement warn-text`"
+    >
+      <slot name="warn-text">{{ warnText }}</slot>
+    </div>
+    <div
+      v-if="isHelper && !isInvalid && !isWarn"
       :class="[
         `${carbonPrefix}--form__helper-text`,
         { [`${carbonPrefix}--form__helper-text--disabled`]: disabled },
@@ -174,7 +188,7 @@ import {
   carbonPrefixMixin,
   methodsMixin,
 } from "@carbon/vue/src/mixins";
-import WarningFilled16 from "@carbon/icons-vue/es/warning--filled/16";
+import { WarningFilled16, WarningAltFilled16 } from "@carbon/icons-vue";
 import ChevronDown16 from "@carbon/icons-vue/es/chevron--down/16";
 import Close16 from "@carbon/icons-vue/es/close/16";
 import _cloneDeep from "lodash/cloneDeep";
@@ -188,12 +202,13 @@ export default {
     carbonPrefixMixin,
     methodsMixin({ input: ["focus", "blur"] }),
   ],
-  components: { WarningFilled16, ChevronDown16, Close16 },
+  components: { WarningFilled16, WarningAltFilled16, ChevronDown16, Close16 },
   props: {
     autoFilter: Boolean,
     autoHighlight: Boolean,
     disabled: Boolean,
     invalidMessage: { type: String, default: undefined },
+    warnText: { type: String, default: undefined },
     helperText: { type: String, default: undefined },
     title: String,
     label: {
@@ -248,6 +263,7 @@ export default {
       dataFilter: null,
       isHelper: false,
       isInvalid: false,
+      isWarn: false,
       // includes user input items
       internalOptions: [],
       marginBottomOnOpenEnabled: false,
@@ -347,6 +363,10 @@ export default {
         this.$slots["helper-text"] ||
         (this.helperText && this.helperText.length)
       );
+      this.isWarn = !!(
+        this.$slots["warn-text"] ||
+        (this.warnText && this.warnText.length)
+      );
     },
     clearFilter() {
       if (this.disabled) return;
@@ -581,6 +601,15 @@ export default {
   display: flex;
   align-items: baseline;
 }
+
+.ns-combo-box .warn-text {
+  margin-top: 0.25rem;
+}
+
+.warn-icon,
+.invalid-icon {
+  right: 3rem;
+}
 </style>
 
 <style lang="scss">
@@ -589,4 +618,19 @@ export default {
 .ns-combo-box .bx--tooltip__label .bx--tooltip__trigger {
   margin-left: 0.25rem;
 }
-</style>
+
+.ns-combo-box .bx--list-box__invalid-icon--warning {
+  position: absolute;
+  top: 50%;
+  right: 3rem;
+  fill: #f1c21b;
+  transform: translateY(-50%);
+}
+
+.ns-combo-box
+  .bx--list-box__invalid-icon--warning
+  + .bx--list-box__field
+  .bx--list-box__selection {
+  right: 4rem !important;
+}
+</style>