@nethserver/ns8-ui-lib 0.0.24 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.0.24",
+  "version": "0.0.29",
   "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,113 @@
+<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) {
+        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

@@ -64,6 +64,9 @@ export default {
 .title {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .description {

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>