@nethserver/ns8-ui-lib 0.0.47 → 0.0.51

package/src/lib-components/NsInfoCard.vue

@@ -1,38 +1,57 @@
 <template>
   <cv-tile kind="standard" :light="light" class="info-card">
     <!-- overflow menu -->
-    <slot v-if="showOverflowMenu" name="menu"></slot>
+    <slot v-if="hasMenuSlot" name="menu"></slot>
     <!-- icon -->
     <div v-if="icon" class="row">
       <NsSvg :svg="icon" />
     </div>
-    <div class="row">
-      <h3 class="title">{{ title }}</h3>
+    <div v-if="isErrorShown" class="row">
+      <NsInlineNotification
+        kind="error"
+        :title="errorTitle"
+        :description="errorDescription"
+        :showCloseButton="false"
+      />
     </div>
-    <div v-if="description" class="row">
-      <div class="description">{{ description }}</div>
+    <div v-else-if="loading" class="row">
+      <cv-skeleton-text
+        :paragraph="true"
+        :line-count="3"
+        class="skeleton"
+      ></cv-skeleton-text>
     </div>
+    <template v-else>
+      <div v-if="title" class="row">
+        <h3 class="title">{{ title }}</h3>
+      </div>
+      <div v-if="description" class="row">
+        <div class="description">{{ description }}</div>
+      </div>
+    </template>
     <div class="row slot">
       <!-- Extra content -->
-      <slot name="content"></slot>
+      <slot v-if="hasContentSlot" name="content"></slot>
     </div>
   </cv-tile>
 </template>
 
 <script>
 import NsSvg from "./NsSvg.vue";
-import { CvTile } from "@carbon/vue";
+import NsInlineNotification from "./NsInlineNotification.vue";
 
 export default {
   name: "NsInfoCard",
-  //components added for storybook to work
-  components: { NsSvg, CvTile },
+  components: { NsSvg, NsInlineNotification },
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
+    },
+    description: {
+      type: String,
+      required: false,
     },
-    description: String,
     icon: {
       type: [String, Object],
       default: undefined,
@@ -43,12 +62,20 @@ export default {
         return val.render !== null;
       },
     },
-    showOverflowMenu: {
-      type: Boolean,
-      default: false,
-    },
+    loading: Boolean,
+    isErrorShown: false,
+    errorTitle: String,
+    errorDescription: String,
     light: Boolean,
   },
+  computed: {
+    hasMenuSlot() {
+      return !!this.$slots.menu;
+    },
+    hasContentSlot() {
+      return !!this.$slots.content;
+    },
+  },
 };
 </script>
 
@@ -62,6 +89,12 @@ export default {
   position: relative;
 }
 
+.skeleton {
+  margin-top: 0.5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .row {
   display: flex;
   align-items: center;

package/src/lib-components/NsInlineNotification.vue

@@ -50,6 +50,7 @@
         `${carbonPrefix}--btn`,
         `${carbonPrefix}--btn--sm`,
         `${carbonPrefix}--btn--ghost`,
+        'action-button',
       ]"
       type="button"
     >
@@ -118,6 +119,10 @@ export default {
   flex-grow: 0;
 }
 
+.action-button {
+  margin-right: 0.5rem;
+}
+
 // place close button on the right
 .bx--inline-notification__close-button {
   position: absolute !important;

package/src/lib-components/NsPasswordInput.vue

@@ -21,35 +21,55 @@
         <span
           :class="[
             'requirement',
-            { 'requirement-ok': isLengthOk, 'requirement-light': light },
+            {
+              'requirement-ok': isLengthOk,
+              'requirement-light': light,
+              'requirement-disabled': disabled,
+            },
           ]"
           >{{ lengthLabel }}</span
         >
         <span
           :class="[
             'requirement',
-            { 'requirement-ok': isLowercaseOk, 'requirement-light': light },
+            {
+              'requirement-ok': isLowercaseOk,
+              'requirement-light': light,
+              'requirement-disabled': disabled,
+            },
           ]"
           >{{ lowercaseLabel }}</span
         >
         <span
           :class="[
             'requirement',
-            { 'requirement-ok': isUppercaseOk, 'requirement-light': light },
+            {
+              'requirement-ok': isUppercaseOk,
+              'requirement-light': light,
+              'requirement-disabled': disabled,
+            },
           ]"
           >{{ uppercaseLabel }}</span
         >
         <span
           :class="[
             'requirement',
-            { 'requirement-ok': isNumberOk, 'requirement-light': light },
+            {
+              'requirement-ok': isNumberOk,
+              'requirement-light': light,
+              'requirement-disabled': disabled,
+            },
           ]"
           >{{ numberLabel }}</span
         >
         <span
           :class="[
             'requirement',
-            { 'requirement-ok': isSymbolOk, 'requirement-light': light },
+            {
+              'requirement-ok': isSymbolOk,
+              'requirement-light': light,
+              'requirement-disabled': disabled,
+            },
           ]"
           >{{ symbolLabel }}</span
         >
@@ -75,7 +95,11 @@
         <span
           :class="[
             'requirement',
-            { 'requirement-ok': isEqualOk, 'requirement-light': light },
+            {
+              'requirement-ok': isEqualOk,
+              'requirement-light': light,
+              'requirement-disabled': disabled,
+            },
           ]"
           >{{ equalLabel }}</span
         >
@@ -263,4 +287,9 @@ export default {
   color: white;
   background-color: #198038;
 }
+
+.requirement-disabled {
+  color: #c6c6c6;
+  background-color: #f4f4f4;
+}
 </style>

package/src/lib-components/NsTextInput.vue

@@ -24,7 +24,7 @@
       <cv-interactive-tooltip
         :alignment="tooltipAlignment"
         :direction="tooltipDirection"
-        class="tooltip"
+        class="tooltip info"
       >
         <template slot="content">
           <slot name="tooltip"></slot>

package/src/lib-components/NsTile.vue

@@ -6,6 +6,7 @@
       { [`${carbonPrefix}--tile--light`]: isLight },
       'ns-tile',
       { 'pad-bottom': footerIcon },
+      { 'disabled-tile': disabled },
     ]"
     :checked="selected"
     :expanded="expanded"
@@ -75,9 +76,15 @@ export default {
     centered: Boolean,
     large: Boolean,
     light: Boolean,
+    disabled: Boolean,
   },
   computed: {
     tagType() {
+      if (this.disabled) {
+        // not selectable nor clickable
+        return "cv-tile-standard";
+      }
+
       switch (this.kind) {
         case "clickable":
           return "cv-tile-clickable";
@@ -129,4 +136,8 @@ export default {
 .pad-bottom {
   padding-bottom: 4rem;
 }
+
+.disabled-tile {
+  color: #c6c6c6;
+}
 </style>