@nethserver/ns8-ui-lib 0.1.31 → 1.0.0

package/src/lib-components/NsInlineNotification.vue

@@ -10,8 +10,8 @@
       `${carbonPrefix}--inline-notification`,
       `${carbonPrefix}--inline-notification--${kind.toLowerCase()}`,
       {
-        [`${carbonPrefix}--inline-notification--low-contrast`]: lowContrast,
-      },
+        [`${carbonPrefix}--inline-notification--low-contrast`]: lowContrast
+      }
     ]"
     v-on="$listeners"
     :role="isAlert ? 'alert' : false"
@@ -24,18 +24,22 @@
       />
       <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
         <p
-          v-if="title"
+          v-if="$slots.title || title"
           :class="`${carbonPrefix}--inline-notification__title title`"
-          v-html="title"
-        ></p>
+        >
+          <slot v-if="$slots.title" name="title"></slot>
+          <span v-else>{{ title }}</span>
+        </p>
         <p
-          v-if="description"
+          v-if="$slots.description || description"
           :class="[
             `${carbonPrefix}--inline-notification__subtitle`,
-            { 'mg-right': loading || timer },
+            { 'mg-right': loading || timer }
           ]"
-          v-html="description"
-        ></p>
+        >
+          <slot v-if="$slots.description" name="description"></slot>
+          <span v-else>{{ description }}</span>
+        </p>
         <p v-if="loading" class="loader"></p>
         <p v-if="timer">
           <NsCircleTimer
@@ -55,7 +59,7 @@
         `${carbonPrefix}--btn`,
         `${carbonPrefix}--btn--sm`,
         `${carbonPrefix}--btn--ghost`,
-        'action-button',
+        'action-button'
       ]"
       type="button"
     >
@@ -85,7 +89,7 @@ export default {
   props: {
     showCloseButton: {
       type: Boolean,
-      default: false,
+      default: false
     },
     description: String,
     actionLabel: { type: String, default: "" },
@@ -93,17 +97,17 @@ export default {
     kind: {
       type: String,
       default: "info",
-      validator: (val) => ["error", "info", "warning", "success"].includes(val),
+      validator: (val) => ["error", "info", "warning", "success"].includes(val)
     },
     lowContrast: Boolean,
     loading: {
       type: Boolean,
-      default: false,
+      default: false
     },
     timer: {
-      type: Number,
-    },
-  },
+      type: Number
+    }
+  }
 };
 </script>
 

package/src/lib-components/NsPasswordInput.vue

@@ -23,6 +23,7 @@
       </NsTextInput>
       <div class="password-meter">
         <span
+          v-if="minLength !== 0"
           :class="[
             'requirement',
             {
@@ -34,6 +35,7 @@
           >{{ lengthLabel }}</span
         >
         <span
+          v-if="checkComplexity"
           :class="[
             'requirement',
             {
@@ -45,6 +47,7 @@
           >{{ lowercaseLabel }}</span
         >
         <span
+          v-if="checkComplexity"
           :class="[
             'requirement',
             {
@@ -56,6 +59,7 @@
           >{{ uppercaseLabel }}</span
         >
         <span
+          v-if="checkComplexity"
           :class="[
             'requirement',
             {
@@ -67,6 +71,7 @@
           >{{ numberLabel }}</span
         >
         <span
+          v-if="checkComplexity"
           :class="[
             'requirement',
             {
@@ -138,6 +143,10 @@ export default {
       default: undefined,
     },
     light: Boolean,
+    checkComplexity: {
+      type: Boolean,
+      default: true,
+    },
     minLength: {
       type: Number,
       default: 8,
@@ -182,16 +191,32 @@ export default {
       return this.value.length >= this.minLength;
     },
     isLowercaseOk() {
-      return /[a-z]/.test(this.value);
+      if (!this.checkComplexity) {
+        return true;
+      } else {
+        return /[a-z]/.test(this.value);
+      }
     },
     isUppercaseOk() {
-      return /[A-Z]/.test(this.value);
+      if (!this.checkComplexity) {
+        return true;
+      } else {
+        return /[A-Z]/.test(this.value);
+      }
     },
     isNumberOk() {
-      return /\d/.test(this.value);
+      if (!this.checkComplexity) {
+        return true;
+      } else {
+        return /\d/.test(this.value);
+      }
     },
     isSymbolOk() {
-      return /\W|_/.test(this.value);
+      if (!this.checkComplexity) {
+        return true;
+      } else {
+        return /\W|_/.test(this.value);
+      }
     },
     isEqualOk() {
       return this.value.length && this.value === this.confirmPassword;

package/src/lib-components/NsToastNotification.vue

@@ -11,7 +11,7 @@
         `${carbonPrefix}--toast-notification--${kind.toLowerCase()}`,
         { [`${carbonPrefix}--toast-notification--low-contrast`]: lowContrast },
         `notification`,
-        { 'notification-read': isRead },
+        { 'notification-read': isRead }
       ]"
       v-on="$listeners"
       :role="isAlert ? 'alert' : undefined"
@@ -30,10 +30,11 @@
             `${carbonPrefix}--toast-notification__subtitle`,
             `notification-description-and-progress`,
             `row`,
-            { 'fix-margin-bottom': actionLabel || isProgressShown },
+            { 'fix-margin-bottom': actionLabel || isProgressShown }
           ]"
         >
-          <span v-html="description"></span>
+          <slot v-if="$slots.description" name="description"></slot>
+          <span v-else>{{ description }}</span>
 
           <div v-if="isProgressShown" class="progress">
             <NsProgressBar :value="progress" :indeterminate="!progress" />
@@ -48,7 +49,7 @@
           :class="[
             `${carbonPrefix}--toast-notification__caption`,
             `action`,
-            `row`,
+            `row`
           ]"
         >
           <button
@@ -58,7 +59,7 @@
               `${carbonPrefix}--btn`,
               `${carbonPrefix}--btn--sm`,
               { 'bx--btn--ghost': !isConfirmCancelShown },
-              { 'bx--btn--danger': isConfirmCancelShown },
+              { 'bx--btn--danger': isConfirmCancelShown }
             ]"
             :disabled="isCancelButtonDisabled"
             type="button"
@@ -73,7 +74,7 @@
           :class="[
             `${carbonPrefix}--toast-notification__caption`,
             `action`,
-            `row`,
+            `row`
           ]"
         >
           <button
@@ -82,7 +83,7 @@
               `${carbonPrefix}--inline-notification__action-button`,
               `${carbonPrefix}--btn`,
               `${carbonPrefix}--btn--sm`,
-              `${carbonPrefix}--btn--ghost`,
+              `${carbonPrefix}--btn--ghost`
             ]"
             type="button"
           >
@@ -98,7 +99,7 @@
           >
             {{
               formatDateDistance(timestamp, new Date(), {
-                addSuffix: true,
+                addSuffix: true
               })
             }}
           </cv-tooltip>
@@ -133,23 +134,23 @@ export default {
     description: String,
     showCloseButton: {
       type: Boolean,
-      default: true,
+      default: true
     },
     actionLabel: String,
     action: Object,
     isRead: {
       type: Boolean,
-      default: false,
+      default: false
     },
     progress: Number,
     timestamp: Date,
     isProgressShown: {
       type: Boolean,
-      default: false,
+      default: false
     },
     isCancelShown: {
       type: Boolean,
-      default: false,
+      default: false
     },
     cancelLabel: { type: String, default: "Abort" },
     confirmCancelLabel: { type: String, default: "Confirm abort" },
@@ -157,14 +158,14 @@ export default {
     kind: {
       type: String,
       default: "info",
-      validator: (val) => ["error", "info", "warning", "success"].includes(val),
+      validator: (val) => ["error", "info", "warning", "success"].includes(val)
     },
-    lowContrast: Boolean,
+    lowContrast: Boolean
   },
   data() {
     return {
       isConfirmCancelShown: false,
-      isCancelButtonDisabled: false,
+      isCancelButtonDisabled: false
     };
   },
   methods: {
@@ -181,8 +182,8 @@ export default {
         this.$emit("cancelTask", this.id);
         this.isCancelButtonDisabled = true;
       }
-    },
-  },
+    }
+  }
 };
 </script>