@nethserver/ns8-ui-lib 1.12.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "1.12.3",
+  "version": "2.0.0",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",
@@ -47,20 +47,24 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-replace": "^2.3.4",
-    "@vue/cli-plugin-babel": "^4.5.10",
-    "@vue/cli-service": "^4.5.10",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
     "cross-env": "^7.0.3",
     "mark.js": "^8.11.1",
     "minimist": "^1.2.5",
     "rollup": "^2.53.2",
-    "@rollup/plugin-terser": "^0.4.0",
     "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.6.12",
-    "vue-template-compiler": "^2.6.12"
+    "vue": "^2.7.16",
+    "vue-template-compiler": "^2.7.16"
   },
   "peerDependencies": {
     "vue": "^2.6.12"
   },
+  "overrides": {
+    "vue-loader": "^15.10.0",
+    "vue-template-compiler": "^2.7.16"
+  },
   "engines": {
     "node": ">=12"
   },

package/src/lib-components/NsToastNotification.vue

@@ -45,7 +45,7 @@
 
         <!-- cancel button -->
         <div
-          v-if="isCancelShown && isProgressShown"
+          v-if="isCancelShown && isProgressShown && !isConfirmCancelShown"
           :class="[
             `${carbonPrefix}--toast-notification__caption`,
             `action`,
@@ -58,16 +58,50 @@
               `${carbonPrefix}--inline-notification__action-button`,
               `${carbonPrefix}--btn`,
               `${carbonPrefix}--btn--sm`,
-              { 'bx--btn--ghost': !isConfirmCancelShown },
-              { 'bx--btn--danger': isConfirmCancelShown }
+              `bx--btn--ghost`,
             ]"
-            :disabled="isCancelButtonDisabled"
             type="button"
           >
-            {{ isConfirmCancelShown ? confirmCancelLabel : cancelLabel }}
+            {{ cancelLabel }}
           </button>
         </div>
 
+        <!-- cancel confirmation -->
+        <div
+          v-else-if="isCancelShown && isProgressShown && isConfirmCancelShown"
+          class="cancel-confirmation"
+        >
+          <p class="cancel-confirmation__text">{{ confirmCancelText }}</p>
+          <div class="cancel-confirmation__buttons">
+            <button
+              @click="handleKeepRunning"
+              :class="[
+                `${carbonPrefix}--inline-notification__action-button`,
+                `${carbonPrefix}--btn`,
+                `${carbonPrefix}--btn--sm`,
+                `bx--btn--ghost`,
+              ]"
+              type="button"
+              :disabled="isKeepRunningButtonDisabled"
+            >
+              {{ keepRunningLabel }}
+            </button>
+            <button
+              @click="confirmCancelTask"
+              :class="[
+                `${carbonPrefix}--inline-notification__action-button`,
+                `${carbonPrefix}--btn`,
+                `${carbonPrefix}--btn--sm`,
+                `bx--btn--danger`,
+              ]"
+              :disabled="isCancelButtonDisabled"
+              type="button"
+            >
+              {{ confirmCancelLabel }}
+            </button>
+          </div>
+        </div>
+
         <!-- action button -->
         <div
           v-else-if="actionLabel"
@@ -153,7 +187,12 @@ export default {
       default: false
     },
     cancelLabel: { type: String, default: "Abort" },
-    confirmCancelLabel: { type: String, default: "Confirm abort" },
+    confirmCancelText: {
+      type: String,
+      default: "Abort this task? This action can't be undone",
+    },
+    keepRunningLabel: { type: String, default: "Keep running" },
+    confirmCancelLabel: { type: String, default: "Yes, abort" },
     closeAriaLabel: { type: String, default: "Dismiss notification" },
     kind: {
       type: String,
@@ -165,25 +204,23 @@ export default {
   data() {
     return {
       isConfirmCancelShown: false,
-      isCancelButtonDisabled: false
+      isCancelButtonDisabled: false,
+      isKeepRunningButtonDisabled: false,
     };
   },
   methods: {
     cancelTask() {
-      if (!this.isConfirmCancelShown) {
-        // show confirmation
-        this.isConfirmCancelShown = true;
-
-        setTimeout(() => {
-          this.isConfirmCancelShown = false;
-        }, 5000);
-      } else {
-        // cancel task
-        this.$emit("cancelTask", this.id);
-        this.isCancelButtonDisabled = true;
-      }
-    }
-  }
+      this.isConfirmCancelShown = true;
+    },
+    handleKeepRunning() {
+      this.isConfirmCancelShown = false;
+    },
+    confirmCancelTask() {
+      this.$emit("cancelTask", this.id);
+      this.isCancelButtonDisabled = true;
+      this.isKeepRunningButtonDisabled = true;
+    },
+  },
 };
 </script>
 
@@ -198,6 +235,17 @@ export default {
   margin-bottom: 0;
 }
 
+.cancel-confirmation {
+  margin-top: 1rem;
+}
+
+.cancel-confirmation__buttons {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  gap: 2rem;
+}
+
 .bx--toast-notification .bx--inline-notification__action-button {
   // following rule uses branding color so it's inside core _core.scss
   // color: $inverse-link;