@nethserver/ns8-ui-lib 0.0.31 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.0.31",
+  "version": "0.0.35",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",
@@ -58,7 +58,6 @@
     "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/NsCircleTimer.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="base-timer" :style="{ height: size + 'px', width: size + 'px' }">
+    <svg
+      class="base-timer__svg"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g class="base-timer__circle">
+        <path
+          id="base-timer-path-remaining"
+          stroke-dasharray="251"
+          class="base-timer__path-remaining green"
+          d="
+            M 50, 50
+            m -40, 0
+            a 40,40 0 1,0 80,0
+            a 40,40 0 1,0 -80,0
+          "
+          :style="{
+            'stroke-width': strokeWidth + 'px',
+            'stroke-dasharray': circleDasharray,
+            color: color,
+          }"
+        ></path>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NsCircleTimer",
+  props: {
+    timeLimit: {
+      type: Number, // milliseconds
+      required: true,
+    },
+    size: {
+      type: Number,
+      default: 16,
+    },
+    strokeWidth: {
+      type: Number,
+      default: 20,
+    },
+    color: {
+      type: String,
+      default: "#00a2de",
+    },
+  },
+  data() {
+    return {
+      timerInterval: null,
+      timePassed: 0,
+      timeLeft: -1,
+      // length = 2πr = 2 * π * 40 = 251
+    };
+  },
+  computed: {
+    circleDasharray() {
+      return `${(this.calculateTimeFraction() * 251).toFixed(0)} 251`;
+    },
+  },
+  created() {
+    this.timeLimitSeconds = (this.timeLimit - 1000) / 1000;
+    this.timeLeft = this.timeLimitSeconds;
+
+    this.timerInterval = setInterval(() => {
+      this.timePassed += 1;
+      this.timeLeft = this.timeLimitSeconds - this.timePassed;
+    }, 1000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timerInterval);
+  },
+  methods: {
+    calculateTimeFraction() {
+      return this.timeLeft / this.timeLimitSeconds;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.base-timer {
+  position: relative;
+}
+
+.base-timer__circle {
+  fill: none;
+  stroke: none;
+}
+
+.base-timer__path-remaining {
+  stroke: currentColor;
+
+  /* animation starts at the top of the circle */
+  transform: rotate(90deg);
+  transform-origin: center;
+
+  /* one second aligns with the speed of the countdown timer */
+  transition: 1s linear all;
+}
+
+.base-timer__svg {
+  /* flips the svg and makes the animation to move left-to-right */
+  transform: scaleX(-1);
+}
+</style>

package/src/lib-components/NsEmptyState.vue

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

package/src/lib-components/NsInlineNotification.vue

@@ -27,11 +27,19 @@
           v-if="description"
           :class="[
             `${carbonPrefix}--inline-notification__subtitle`,
-            { 'mg-right': loading },
+            { 'mg-right': loading || timer },
           ]"
           v-html="description"
         ></p>
         <p v-if="loading" class="loader"></p>
+        <p v-if="timer">
+          <NsCircleTimer
+            :timeLimit="timer"
+            :size="16"
+            :strokeWidth="20"
+            color="white"
+          />
+        </p>
       </div>
     </div>
     <button
@@ -62,10 +70,12 @@
 
 <script>
 import { CvInlineNotification } from "@carbon/vue";
+import NsCircleTimer from "./NsCircleTimer.vue";
 
 export default {
   name: "NsInlineNotification",
   extends: CvInlineNotification,
+  components: { NsCircleTimer },
   props: {
     showCloseButton: {
       type: Boolean,
@@ -84,6 +94,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    timer: {
+      type: Number,
+    },
   },
 };
 </script>

package/src/lib-components/NsPasswordInput.vue

@@ -12,7 +12,6 @@
         :passwordShowLabel="passwordShowLabel"
         :passwordVisible="newPasswordVisible"
         :light="light"
-        :disabled="disabled"
         class="new-password"
         ref="newPassword"
       >
@@ -66,7 +65,6 @@
         :passwordShowLabel="passwordShowLabel"
         :passwordVisible="confirmPasswordVisible"
         :light="light"
-        :disabled="disabled"
         class="confirm-password"
         ref="confirmPassword"
       >
@@ -138,7 +136,6 @@ export default {
       type: String,
       default: "Equal",
     },
-    disabled: Boolean,
   },
   data() {
     return {
@@ -166,25 +163,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,12 +33,11 @@ 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/NsDangerDeleteModal.vue

@@ -1,113 +0,0 @@
-<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/pictograms/Group.vue

@@ -1,18 +0,0 @@
-<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>