@nethserver/ns8-ui-lib 0.0.32 → 0.0.36

package/package.json

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

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

@@ -91,6 +91,8 @@ export default {
   watch: {
     isShown: function () {
       if (this.isShown) {
+        this.userInput = "";
+
         setTimeout(() => {
           this.focusElement("userInput");
         }, 300);

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

@@ -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>
@@ -92,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 {
@@ -107,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>