@nethserver/ns8-ui-lib 0.0.45 → 0.0.49

package/package.json

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

package/src/lib-components/NsBackupCard.vue

@@ -27,121 +27,83 @@
       </div>
     </template>
     <template v-else>
-      <div v-for="backup in backupsContainingInstance" :key="backup.id">
-        <div class="row">
-          <h5
-            v-if="backupsContainingInstance.length > 1"
-            class="title mg-top-sm"
-          >
-            {{ backup.name }}
-          </h5>
-        </div>
-        <div class="table-wrapper">
-          <div class="table">
-            <!-- status -->
-            <div class="tr">
-              <div class="td label">{{ statusLabel }}</div>
-              <div class="td status">
-                <span v-if="!backup.enabled" class="ns-warning">
-                  {{ backupDisabledLabel }}
-                </span>
-                <span
-                  v-else-if="
-                    status[backup.id] && status[backup.id].success == true
-                  "
-                  class="ns-success"
-                >
-                  <span>{{ statusSuccessLabel }}</span>
-                </span>
-                <span
-                  v-else-if="
-                    status[backup.id] && status[backup.id].success == false
-                  "
-                  class="ns-error"
-                >
-                  {{ statusErrorLabel }}
-                </span>
-                <span v-else class="ns-warning">
-                  {{ statusNotRunLabel }}
-                </span>
-              </div>
-            </div>
-            <!-- repository -->
-            <div class="tr">
-              <div class="td label">{{ repositoryLabel }}</div>
-              <div class="td">
-                {{ backup.repoName }}
-              </div>
-            </div>
-            <!-- completed -->
-            <div class="tr">
-              <div class="td label">{{ completedLabel }}</div>
-              <div class="td">
-                <span v-if="status[backup.id] && status[backup.id].end">
-                  <cv-tooltip
-                    alignment="center"
-                    direction="bottom"
-                    :tip="
-                      (status[backup.id].end * 1000)
-                        | date('yyyy-MM-dd HH:mm:ss')
+      <div class="backups">
+        <div
+          v-for="backup in backupsContainingInstance"
+          :key="backup.id"
+          class="backup"
+        >
+          <div class="row">
+            <h5
+              v-if="backupsContainingInstance.length > 1"
+              class="title mg-top-sm"
+            >
+              {{ backup.name }}
+            </h5>
+          </div>
+          <div class="table-wrapper">
+            <div class="table">
+              <!-- status -->
+              <div class="tr">
+                <div class="td label">{{ statusLabel }}</div>
+                <div class="td status">
+                  <span v-if="!backup.enabled" class="ns-warning">
+                    {{ backupDisabledLabel }}
+                  </span>
+                  <span
+                    v-else-if="
+                      status[backup.id] && status[backup.id].success == true
                     "
-                    class="info tooltip-with-text-trigger"
+                    class="ns-success"
                   >
-                    {{
-                      formatDateDistance(
-                        status[backup.id].end * 1000,
-                        new Date(),
-                        {
-                          addSuffix: true,
-                        }
-                      )
-                    }}
-                  </cv-tooltip>
-                </span>
-                <span v-else>-</span>
-              </div>
-            </div>
-            <!-- duration -->
-            <div class="tr">
-              <div class="td label">{{ durationLabel }}</div>
-              <div class="td">
-                <span
-                  v-if="
-                    status[backup.id] &&
-                    status[backup.id].end &&
-                    status[backup.id].start
-                  "
-                >
-                  {{
-                    (status[backup.id].end - status[backup.id].start)
-                      | secondsFormat
-                  }}
-                </span>
-                <span v-else>-</span>
-              </div>
-            </div>
-            <!-- total size -->
-            <div class="tr">
-              <div class="td label">{{ totalSizeLabel }}</div>
-              <div class="td">
-                <span v-if="status[backup.id] && status[backup.id].total_size">
-                  {{ status[backup.id].total_size | byteFormat }}
-                </span>
-                <span v-else>-</span>
+                    <span>{{ statusSuccessLabel }}</span>
+                  </span>
+                  <span
+                    v-else-if="
+                      status[backup.id] && status[backup.id].success == false
+                    "
+                    class="ns-error"
+                  >
+                    {{ statusErrorLabel }}
+                  </span>
+                  <span v-else class="ns-warning">
+                    {{ statusNotRunLabel }}
+                  </span>
+                </div>
               </div>
+              <NsBackupCardDetails
+                v-if="backupsContainingInstance.length == 1"
+                :backup="backup"
+                :status="status"
+                :repositoryLabel="repositoryLabel"
+                :completedLabel="completedLabel"
+                :durationLabel="durationLabel"
+                :totalSizeLabel="totalSizeLabel"
+                :totalFileCountLabel="totalFileCountLabel"
+              />
             </div>
-            <!-- total file count -->
-            <div class="tr">
-              <div class="td label">{{ totalFileCountLabel }}</div>
-              <div class="td">
-                <span
-                  v-if="status[backup.id] && status[backup.id].total_file_count"
-                >
-                  {{ status[backup.id].total_file_count | humanFormat }}
-                  ({{ status[backup.id].total_file_count }})
-                </span>
-                <span v-else>-</span>
-              </div>
+          </div>
+          <div class="table-wrapper">
+            <div class="table">
+              <cv-accordion
+                v-if="backupsContainingInstance.length > 1"
+                ref="accordion"
+              >
+                <cv-accordion-item :open="toggleAccordion[0]">
+                  <template slot="title">{{ showMoreLabel }}</template>
+                  <template slot="content">
+                    <NsBackupCardDetails
+                      :backup="backup"
+                      :status="status"
+                      :repositoryLabel="repositoryLabel"
+                      :completedLabel="completedLabel"
+                      :durationLabel="durationLabel"
+                      :totalSizeLabel="totalSizeLabel"
+                      :totalFileCountLabel="totalFileCountLabel"
+                    />
+                  </template>
+                </cv-accordion-item>
+              </cv-accordion>
             </div>
           </div>
         </div>
@@ -163,11 +125,13 @@
 
 <script>
 import IconService from "../lib-mixins/icon.js";
-import DateTimeService from "../lib-mixins/dateTime.js";
-
+import UtilService from "../lib-mixins/util.js";
+// import DateTimeService from "../lib-mixins/dateTime.js"; ////
+import NsBackupCardDetails from "./NsBackupCardDetails";
 export default {
   name: "NsBackupCard",
-  mixins: [IconService, DateTimeService],
+  components: { NsBackupCardDetails },
+  mixins: [IconService, UtilService],
   props: {
     title: {
       type: String,
@@ -225,6 +189,10 @@ export default {
       type: String,
       default: "Disabled",
     },
+    showMoreLabel: {
+      type: String,
+      default: "Show more",
+    },
     moduleId: {
       type: String,
       required: true,
@@ -307,6 +275,14 @@ export default {
   min-height: 7rem;
 }
 
+.backup {
+  margin-bottom: 1rem;
+}
+
+.backup:last-child {
+  margin-bottom: 0;
+}
+
 .row {
   display: flex;
   align-items: center;
@@ -355,3 +331,11 @@ export default {
   margin-right: 0.25rem;
 }
 </style>
+
+<style lang="scss">
+// global styles
+
+.ns-backup-card .bx--accordion--start .bx--accordion__content {
+  margin-left: 0;
+}
+</style>

package/src/lib-components/NsBackupCardDetails.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="ns-backup-card-details">
+    <!-- repository -->
+    <div class="tr">
+      <div class="td label">{{ repositoryLabel }}</div>
+      <div class="td">
+        {{ backup.repoName }}
+      </div>
+    </div>
+    <!-- completed -->
+    <div class="tr">
+      <div class="td label">{{ completedLabel }}</div>
+      <div class="td">
+        <span v-if="status[backup.id] && status[backup.id].end">
+          <cv-interactive-tooltip
+            alignment="center"
+            direction="bottom"
+            class="info tooltip-with-text-trigger"
+          >
+            <template slot="trigger">
+              {{
+                formatDateDistance(status[backup.id].end * 1000, new Date(), {
+                  addSuffix: true,
+                })
+              }}
+            </template>
+            <template slot="content">
+              {{ (status[backup.id].end * 1000) | date("yyyy-MM-dd HH:mm:ss") }}
+            </template>
+          </cv-interactive-tooltip>
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+    <!-- duration -->
+    <div class="tr">
+      <div class="td label">{{ durationLabel }}</div>
+      <div class="td">
+        <span
+          v-if="
+            status[backup.id] &&
+            status[backup.id].end &&
+            status[backup.id].start
+          "
+        >
+          {{
+            (status[backup.id].end - status[backup.id].start) | secondsFormat
+          }}
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+    <!-- total size -->
+    <div class="tr">
+      <div class="td label">{{ totalSizeLabel }}</div>
+      <div class="td">
+        <span v-if="status[backup.id] && status[backup.id].total_size">
+          {{ status[backup.id].total_size | byteFormat }}
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+    <!-- total file count -->
+    <div class="tr">
+      <div class="td label">{{ totalFileCountLabel }}</div>
+      <div class="td">
+        <span v-if="status[backup.id] && status[backup.id].total_file_count">
+          {{ status[backup.id].total_file_count | humanFormat }}
+          ({{ status[backup.id].total_file_count }})
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DateTimeService from "../lib-mixins/dateTime.js";
+
+export default {
+  name: "NsBackupCardDetails",
+  mixins: [DateTimeService],
+  props: {
+    backup: {
+      type: Object,
+      required: true,
+    },
+    status: {
+      type: Array,
+      required: true,
+    },
+    repositoryLabel: {
+      type: String,
+      default: "Repository",
+    },
+    completedLabel: {
+      type: String,
+      required: true,
+    },
+    durationLabel: {
+      type: String,
+      required: true,
+    },
+    totalSizeLabel: {
+      type: String,
+      required: true,
+    },
+    totalFileCountLabel: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ns-backup-card-details {
+  // do not render root div, only table rows
+  display: contents;
+}
+
+.tr {
+  display: table-row;
+}
+
+.td {
+  display: table-cell;
+}
+
+.label {
+  padding-right: 0.75rem;
+  font-weight: bold;
+  text-align: right;
+  padding-bottom: 0.5rem;
+}
+</style>

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/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>