@nethserver/ns8-ui-lib 0.0.35 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",
@@ -58,6 +58,7 @@
     "node": ">=12"
   },
   "dependencies": {
+    "@rollup/plugin-json": "^4.1.0",
     "core-js": "^3.15.2",
     "date-fns": "^2.23.0",
     "date-fns-tz": "^1.1.6"

package/src/lib-components/NsDangerDeleteModal.vue

@@ -0,0 +1,115 @@
+<template>
+  <cv-modal
+    kind="danger"
+    size="default"
+    :visible="isShown"
+    @modal-hidden="onModalHidden"
+    @primary-click="confirmDelete"
+    :primary-button-disabled="name !== userInput"
+  >
+    <template slot="title">{{ title }}</template>
+    <template slot="content">
+      <NsInlineNotification
+        kind="warning"
+        :title="warning"
+        :showCloseButton="false"
+      />
+      <div class="mg-bottom-md" v-html="description"></div>
+      <div v-html="typeToConfirmMessage"></div>
+      <cv-form @submit.prevent="confirmDelete">
+        <cv-text-input
+          v-model="userInput"
+          class="mg-bottom-md"
+          ref="userInput"
+        ></cv-text-input>
+      </cv-form>
+    </template>
+    <template slot="secondary-button">{{ cancelLabel }}</template>
+    <template slot="primary-button">{{ deleteLabel }}</template>
+  </cv-modal>
+</template>
+
+<script>
+import UtilService from "../lib-mixins/util.js";
+import IconService from "../lib-mixins/util.js";
+import NsInlineNotification from "./NsInlineNotification.vue";
+
+export default {
+  name: "NsDangerDeleteModal",
+  //component added for storybook to work
+  components: { NsInlineNotification },
+  mixins: [UtilService, IconService],
+  props: {
+    isShown: {
+      type: Boolean,
+      default: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: "Confirm deletion",
+    },
+    warning: {
+      type: String,
+      default: "Please read carefully",
+    },
+    description: {
+      type: String,
+      default:
+        "Do you really want to delete this object? This action is irreversible",
+    },
+    typeToConfirm: {
+      type: String,
+      default: "",
+    },
+    cancelLabel: {
+      type: String,
+      default: "Cancel",
+    },
+    deleteLabel: {
+      type: String,
+      default: "I understand, delete",
+    },
+  },
+  data() {
+    return {
+      userInput: "",
+    };
+  },
+  computed: {
+    typeToConfirmMessage() {
+      if (this.typeToConfirm) {
+        return this.typeToConfirm;
+      } else {
+        return `Type <strong>${this.name}</strong> to confirm deletion`;
+      }
+    },
+  },
+  watch: {
+    isShown: function () {
+      if (this.isShown) {
+        this.userInput = "";
+
+        setTimeout(() => {
+          this.focusElement("userInput");
+        }, 300);
+      }
+    },
+  },
+  methods: {
+    onModalHidden() {
+      this.$emit("hide");
+    },
+    confirmDelete() {
+      if (this.name == this.userInput) {
+        this.$emit("confirmDelete");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

package/src/lib-components/NsEmptyState.vue

@@ -5,7 +5,7 @@
       :animationData="animationData"
       :refName="animationTitle"
       :animateOnHover="true"
-      :loop="1"
+      :loop="loop"
       :autoPlay="true"
       class="animation image"
     />
@@ -42,6 +42,10 @@ export default {
     },
     animationData: Object,
     animationTitle: String,
+    loop: {
+      type: [Boolean, Number],
+      default: 1,
+    },
   },
   computed: {
     hasPictogramSlot() {

package/src/lib-components/NsInfoCard.vue

@@ -1,5 +1,7 @@
 <template>
   <cv-tile kind="standard" :light="light" class="info-card">
+    <!-- overflow menu -->
+    <slot v-if="showOverflowMenu" name="menu"></slot>
     <!-- icon -->
     <div v-if="icon" class="row">
       <NsSvg :svg="icon" />
@@ -12,7 +14,7 @@
     </div>
     <div class="row slot">
       <!-- Extra content -->
-      <slot></slot>
+      <slot name="content"></slot>
     </div>
   </cv-tile>
 </template>
@@ -41,6 +43,10 @@ export default {
         return val.render !== null;
       },
     },
+    showOverflowMenu: {
+      type: Boolean,
+      default: false,
+    },
     light: Boolean,
   },
 };
@@ -52,6 +58,8 @@ export default {
   flex-direction: column;
   justify-content: center;
   min-height: 7rem;
+  // needed for abosulute positioning of overflow menu
+  position: relative;
 }
 
 .row {

package/src/lib-components/NsInlineNotification.vue

@@ -105,6 +105,8 @@ export default {
 .title {
   margin-right: 0.75rem;
   margin-bottom: 0.2rem;
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
 }
 
 .mg-right {
@@ -120,4 +122,9 @@ export default {
 .bx--inline-notification__close-button {
   position: absolute !important;
 }
+
+.bx--inline-notification__text-wrapper p {
+  // needed for inline notifications inside modal
+  padding-right: 0 !important;
+}
 </style>

package/src/lib-components/NsPasswordInput.vue

@@ -12,6 +12,7 @@
         :passwordShowLabel="passwordShowLabel"
         :passwordVisible="newPasswordVisible"
         :light="light"
+        :disabled="disabled"
         class="new-password"
         ref="newPassword"
       >
@@ -65,6 +66,7 @@
         :passwordShowLabel="passwordShowLabel"
         :passwordVisible="confirmPasswordVisible"
         :light="light"
+        :disabled="disabled"
         class="confirm-password"
         ref="confirmPassword"
       >
@@ -136,6 +138,7 @@ export default {
       type: String,
       default: "Equal",
     },
+    disabled: Boolean,
   },
   data() {
     return {
@@ -163,25 +166,25 @@ export default {
     },
   },
   watch: {
-    isLengthOk: function() {
+    isLengthOk: function () {
       this.emitPasswordValidity();
     },
-    isLowercaseOk: function() {
+    isLowercaseOk: function () {
       this.emitPasswordValidity();
     },
-    isUppercaseOk: function() {
+    isUppercaseOk: function () {
       this.emitPasswordValidity();
     },
-    isNumberOk: function() {
+    isNumberOk: function () {
       this.emitPasswordValidity();
     },
-    isSymbolOk: function() {
+    isSymbolOk: function () {
       this.emitPasswordValidity();
     },
-    isEqualOk: function() {
+    isEqualOk: function () {
       this.emitPasswordValidity();
     },
-    focus: function() {
+    focus: function () {
       if (this.focus && this.focus.element) {
         this.focusElement(this.focus.element);
       }

package/src/lib-components/NsProgressBar.vue

@@ -33,11 +33,12 @@ export default {
     return {
       progressLine: {
         width: this.value + "%",
+        transition: "width 0.3s",
       },
     };
   },
   watch: {
-    value: function() {
+    value: function () {
       this.progressLine.width = this.value + "%";
     },
   },

package/src/lib-components/pictograms/Group.vue

@@ -0,0 +1,18 @@
+<template>
+  <path
+    id="group"
+    d="M24.36,31h-0.72v-7.5c0-3.552-2.414-6.604-5.872-7.424c-0.15-0.036-0.261-0.163-0.275-0.316
+	c-0.015-0.154,0.071-0.3,0.212-0.363c1.517-0.675,2.496-2.181,2.496-3.836c0-2.316-1.884-4.201-4.2-4.201S11.8,9.244,11.8,11.561
+	c0,1.655,0.98,3.162,2.496,3.836c0.141,0.063,0.227,0.209,0.212,0.363c-0.014,0.153-0.125,0.281-0.275,0.316
+	c-3.458,0.82-5.872,3.872-5.872,7.424V31H7.64v-7.5c0-3.592,2.257-6.718,5.585-7.879c-1.326-0.907-2.146-2.421-2.146-4.061
+	c0-1.964,1.157-3.664,2.826-4.452C14.101,6.617,14.2,6.097,14.2,5.561c0-2.316-1.884-4.201-4.2-4.201S5.799,3.244,5.799,5.561
+	c0,1.656,0.98,3.162,2.496,3.836C8.437,9.46,8.521,9.606,8.507,9.76c-0.014,0.153-0.125,0.281-0.275,0.316
+	C4.774,10.896,2.36,13.948,2.36,17.5V25H1.64v-7.5c0-3.592,2.257-6.718,5.585-7.879C5.899,8.714,5.08,7.2,5.08,5.561
+	c0-2.713,2.207-4.92,4.92-4.92s4.92,2.207,4.92,4.92c0,0.422-0.052,0.836-0.157,1.237c0.791-0.205,1.683-0.205,2.473,0
+	c-0.104-0.401-0.157-0.815-0.157-1.237c0-2.713,2.208-4.92,4.921-4.92s4.921,2.207,4.921,4.92c0,1.64-0.82,3.154-2.146,4.061
+	c3.329,1.161,5.586,4.287,5.586,7.879V25H29.64v-7.5c0-3.552-2.414-6.604-5.872-7.424c-0.15-0.036-0.261-0.163-0.275-0.316
+	c-0.015-0.154,0.071-0.3,0.212-0.363C25.221,8.722,26.2,7.216,26.2,5.561c0-2.316-1.884-4.201-4.2-4.201s-4.2,1.884-4.2,4.201
+	c0,0.536,0.099,1.056,0.295,1.548c1.669,0.789,2.826,2.488,2.826,4.452c0,1.64-0.82,3.154-2.146,4.061
+	c3.329,1.161,5.586,4.287,5.586,7.879L24.36,31L24.36,31z"
+  />
+</template>