@nethserver/ns8-ui-lib 0.0.46 → 0.0.50

package/package.json

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

package/src/lib-components/NsEmptyState.vue

@@ -14,7 +14,7 @@
         <slot name="pictogram"></slot>
       </template>
       <template v-else>
-        <ExclamationMark />
+        <ExclamationMarkPictogram />
       </template>
     </NsPictogram>
     <h5 class="title">{{ title }}</h5>
@@ -30,11 +30,11 @@
 <script>
 import NsPictogram from "./NsPictogram.vue";
 import NsLottieAnimation from "./NsLottieAnimation";
-import ExclamationMark from "./pictograms/ExclamationMark";
+import ExclamationMarkPictogram from "./pictograms/ExclamationMarkPictogram";
 
 export default {
   name: "NsEmptyState",
-  components: { NsPictogram, ExclamationMark, NsLottieAnimation },
+  components: { NsPictogram, ExclamationMarkPictogram, NsLottieAnimation },
   props: {
     title: {
       type: String,

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/NsMenuDivider.vue

@@ -0,0 +1,14 @@
+<template>
+  <cv-side-nav-divider />
+</template>
+
+<script>
+import CvSideNavDivider from "@carbon/vue/src/components/cv-ui-shell/cv-side-nav-divider.vue";
+
+export default {
+  name: "NsMenuDivider",
+  components: { CvSideNavDivider },
+};
+</script>
+
+<style scoped lang="scss"></style>

package/src/lib-components/NsMenuItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ns-menu-item">
+    <span v-if="icon == 'edit'" class="icon"><Edit20 /></span>
+    <span v-else-if="icon == 'trash'" class="icon"><TrashCan20 /></span>
+    <span v-else-if="icon == 'power'" class="icon"><Power20 /></span>
+    <span v-else-if="icon == 'rocket'" class="icon"><Rocket20 /></span>
+    <span v-else-if="icon == 'launch'" class="icon"><Launch20 /></span>
+    <span v-else-if="icon == 'star'" class="icon"><Star20 /></span>
+    <span v-else-if="hasIconSlot" class="icon">
+      <slot name="icon"></slot>
+    </span>
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<script>
+import Edit20 from "@carbon/icons-vue/es/edit/20";
+import TrashCan20 from "@carbon/icons-vue/es/trash-can/20";
+import Power20 from "@carbon/icons-vue/es/power/20";
+import Rocket20 from "@carbon/icons-vue/es/rocket/20";
+import Launch20 from "@carbon/icons-vue/es/launch/20";
+import Star20 from "@carbon/icons-vue/es/star/20";
+
+export default {
+  name: "NsMenuItem",
+  components: { Edit20, TrashCan20, Power20, Rocket20, Launch20, Star20 },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      validator: (value) =>
+        ["", "edit", "trash", "power", "rocket", "launch", "star"].includes(
+          value
+        ),
+    },
+  },
+  computed: {
+    hasIconSlot() {
+      return !!this.$slots.icon;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ns-menu-item {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 0.5rem;
+}
+</style>

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>