@nethserver/ns8-ui-lib 1.12.3 → 1.12.4

package/dist/ns8-ui-lib.ssr.js

@@ -7015,9 +7015,17 @@ var script$t = {
       type: String,
       default: "Abort"
     },
+    confirmCancelText: {
+      type: String,
+      default: "Abort this task? This action can't be undone"
+    },
+    keepRunningLabel: {
+      type: String,
+      default: "Keep running"
+    },
     confirmCancelLabel: {
       type: String,
-      default: "Confirm abort"
+      default: "Yes, abort"
     },
     closeAriaLabel: {
       type: String,
@@ -7035,24 +7043,21 @@ var script$t = {
   data: function data() {
     return {
       isConfirmCancelShown: false,
-      isCancelButtonDisabled: false
+      isCancelButtonDisabled: false,
+      isKeepRunningButtonDisabled: false
     };
   },
   methods: {
     cancelTask: function cancelTask() {
-      var _this = this;
-
-      if (!this.isConfirmCancelShown) {
-        // show confirmation
-        this.isConfirmCancelShown = true;
-        setTimeout(function () {
-          _this.isConfirmCancelShown = false;
-        }, 5000);
-      } else {
-        // cancel task
-        this.$emit("cancelTask", this.id);
-        this.isCancelButtonDisabled = true;
-      }
+      this.isConfirmCancelShown = true;
+    },
+    handleKeepRunning: function handleKeepRunning() {
+      this.isConfirmCancelShown = false;
+    },
+    confirmCancelTask: function confirmCancelTask() {
+      this.$emit("cancelTask", this.id);
+      this.isCancelButtonDisabled = true;
+      this.isKeepRunningButtonDisabled = true;
     }
   }
 };/* script */
@@ -7070,21 +7075,17 @@ var __vue_render__$F = function __vue_render__() {
 
   return _c('div', [_vm._ssrNode("<div data-notification" + _vm._ssrAttr("role", _vm.isAlert ? 'alert' : undefined) + _vm._ssrAttr("aria-live", !_vm.isAlert ? 'polite' : false) + _vm._ssrClass(null, ["cv-notifiation " + _vm.carbonPrefix + "--toast-notification", _vm.carbonPrefix + "--toast-notification--" + _vm.kind.toLowerCase(), (_obj = {}, _obj[_vm.carbonPrefix + "--toast-notification--low-contrast"] = _vm.lowContrast, _obj), "notification", {
     'notification-read': _vm.isRead
-  }]) + " data-v-014a0a7f>", "</div>", [_c(_vm.icon, {
+  }]) + " data-v-4769db45>", "</div>", [_c(_vm.icon, {
     tag: "component",
     class: _vm.carbonPrefix + "--toast-notification__icon"
-  }), _vm._ssrNode(" "), _vm._ssrNode("<div" + _vm._ssrClass(null, _vm.carbonPrefix + "--toast-notification__details") + " data-v-014a0a7f>", "</div>", [_vm._ssrNode("<h3" + _vm._ssrClass(null, _vm.carbonPrefix + "--toast-notification__title") + " data-v-014a0a7f>" + _vm._ssrEscape("\n        " + _vm._s(_vm.title) + "\n      ") + "</h3> "), _vm._ssrNode("<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--toast-notification__subtitle", "notification-description-and-progress", "row", {
+  }), _vm._ssrNode(" "), _vm._ssrNode("<div" + _vm._ssrClass(null, _vm.carbonPrefix + "--toast-notification__details") + " data-v-4769db45>", "</div>", [_vm._ssrNode("<h3" + _vm._ssrClass(null, _vm.carbonPrefix + "--toast-notification__title") + " data-v-4769db45>" + _vm._ssrEscape("\n        " + _vm._s(_vm.title) + "\n      ") + "</h3> "), _vm._ssrNode("<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--toast-notification__subtitle", "notification-description-and-progress", "row", {
     'fix-margin-bottom': _vm.actionLabel || _vm.isProgressShown
-  }]) + " data-v-014a0a7f>", "</div>", [_vm.$slots.description ? _vm._t("description") : _c('span', [_vm._v(_vm._s(_vm.description))]), _vm._ssrNode(" "), _vm.isProgressShown ? _vm._ssrNode("<div class=\"progress\" data-v-014a0a7f>", "</div>", [_c('NsProgressBar', {
+  }]) + " data-v-4769db45>", "</div>", [_vm.$slots.description ? _vm._t("description") : _c('span', [_vm._v(_vm._s(_vm.description))]), _vm._ssrNode(" "), _vm.isProgressShown ? _vm._ssrNode("<div class=\"progress\" data-v-4769db45>", "</div>", [_c('NsProgressBar', {
     attrs: {
       "value": _vm.progress,
       "indeterminate": !_vm.progress
     }
-  }), _vm._ssrNode(" <div class=\"progress-bar-spacer\" data-v-014a0a7f></div> " + (_vm.progress ? "<div class=\"progress-number\" data-v-014a0a7f>" + _vm._ssrEscape(_vm._s(_vm.progress) + " %") + "</div>" : "<!---->"))], 2) : _vm._e()], 2), _vm._ssrNode(" " + (_vm.isCancelShown && _vm.isProgressShown ? "<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--toast-notification__caption", "action", "row"]) + " data-v-014a0a7f><button" + _vm._ssrAttr("disabled", _vm.isCancelButtonDisabled) + " type=\"button\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", {
-    'bx--btn--ghost': !_vm.isConfirmCancelShown
-  }, {
-    'bx--btn--danger': _vm.isConfirmCancelShown
-  }]) + " data-v-014a0a7f>" + _vm._ssrEscape("\n          " + _vm._s(_vm.isConfirmCancelShown ? _vm.confirmCancelLabel : _vm.cancelLabel) + "\n        ") + "</button></div>" : _vm.actionLabel ? "<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--toast-notification__caption", "action", "row"]) + " data-v-014a0a7f><button type=\"button\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", _vm.carbonPrefix + "--btn--ghost"]) + " data-v-014a0a7f>" + _vm._ssrEscape("\n          " + _vm._s(_vm.actionLabel) + "\n        ") + "</button></div>" : "<!---->") + " "), _vm.timestamp && !_vm.isProgressShown ? _vm._ssrNode("<div class=\"timestamp row\" data-v-014a0a7f>", "</div>", [_c('cv-tooltip', {
+  }), _vm._ssrNode(" <div class=\"progress-bar-spacer\" data-v-4769db45></div> " + (_vm.progress ? "<div class=\"progress-number\" data-v-4769db45>" + _vm._ssrEscape(_vm._s(_vm.progress) + " %") + "</div>" : "<!---->"))], 2) : _vm._e()], 2), _vm._ssrNode(" " + (_vm.isCancelShown && _vm.isProgressShown && !_vm.isConfirmCancelShown ? "<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--toast-notification__caption", "action", "row"]) + " data-v-4769db45><button type=\"button\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", "bx--btn--ghost"]) + " data-v-4769db45>" + _vm._ssrEscape("\n          " + _vm._s(_vm.cancelLabel) + "\n        ") + "</button></div>" : _vm.isCancelShown && _vm.isProgressShown && _vm.isConfirmCancelShown ? "<div class=\"cancel-confirmation\" data-v-4769db45><p class=\"cancel-confirmation__text\" data-v-4769db45>" + _vm._ssrEscape(_vm._s(_vm.confirmCancelText)) + "</p> <div class=\"cancel-confirmation__buttons\" data-v-4769db45><button type=\"button\"" + _vm._ssrAttr("disabled", _vm.isKeepRunningButtonDisabled) + _vm._ssrClass(null, [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", "bx--btn--ghost"]) + " data-v-4769db45>" + _vm._ssrEscape("\n            " + _vm._s(_vm.keepRunningLabel) + "\n          ") + "</button> <button" + _vm._ssrAttr("disabled", _vm.isCancelButtonDisabled) + " type=\"button\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", "bx--btn--danger"]) + " data-v-4769db45>" + _vm._ssrEscape("\n            " + _vm._s(_vm.confirmCancelLabel) + "\n          ") + "</button></div></div>" : _vm.actionLabel ? "<div" + _vm._ssrClass(null, [_vm.carbonPrefix + "--toast-notification__caption", "action", "row"]) + " data-v-4769db45><button type=\"button\"" + _vm._ssrClass(null, [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", _vm.carbonPrefix + "--btn--ghost"]) + " data-v-4769db45>" + _vm._ssrEscape("\n          " + _vm._s(_vm.actionLabel) + "\n        ") + "</button></div>" : "<!---->") + " "), _vm.timestamp && !_vm.isProgressShown ? _vm._ssrNode("<div class=\"timestamp row\" data-v-4769db45>", "</div>", [_c('cv-tooltip', {
     attrs: {
       "alignment": "center",
       "direction": "bottom",
@@ -7092,7 +7093,7 @@ var __vue_render__$F = function __vue_render__() {
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateDistance(_vm.timestamp, new Date(), {
     addSuffix: true
-  })) + "\n        ")])], 1) : _vm._e()], 2), _vm._ssrNode(" "), _vm.showCloseButton ? _vm._ssrNode("<button" + _vm._ssrAttr("aria-label", _vm.closeAriaLabel) + " type=\"button\" data-notification-btn" + _vm._ssrClass(null, _vm.carbonPrefix + "--toast-notification__close-button") + " data-v-014a0a7f>", "</button>", [_c('Close20', {
+  })) + "\n        ")])], 1) : _vm._e()], 2), _vm._ssrNode(" "), _vm.showCloseButton ? _vm._ssrNode("<button" + _vm._ssrAttr("aria-label", _vm.closeAriaLabel) + " type=\"button\" data-notification-btn" + _vm._ssrClass(null, _vm.carbonPrefix + "--toast-notification__close-button") + " data-v-4769db45>", "</button>", [_c('Close20', {
     class: _vm.carbonPrefix + "--toast-notification__close-icon"
   })], 1) : _vm._e()], 2)]);
 };
@@ -7102,11 +7103,11 @@ var __vue_staticRenderFns__$F = [];
 
 var __vue_inject_styles__$H = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-014a0a7f_0", {
-    source: ".notification[data-v-014a0a7f]{margin-bottom:0;margin-right:0}.action[data-v-014a0a7f]{padding-top:0;margin-bottom:0}.bx--toast-notification .bx--inline-notification__action-button[data-v-014a0a7f]{margin-left:-1rem}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--danger[data-v-014a0a7f]{margin:.5rem 0 .5rem -1rem}.notification-description-and-progress[data-v-014a0a7f]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-014a0a7f]{margin-bottom:0}.progress[data-v-014a0a7f]{margin-top:.75rem}.progress-bar-spacer[data-v-014a0a7f]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-014a0a7f]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-014a0a7f]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-014a0a7f]{width:100%}.notification-read[data-v-014a0a7f]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-014a0a7f]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-014a0a7f]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-014a0a7f]{font-weight:400}.cv-notifiation .timestamp[data-v-014a0a7f]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-014a0a7f]{color:#c6c6c6}.bx--tooltip__trigger[data-v-014a0a7f]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-014a0a7f]::before{border-bottom-color:#161616}div.row[data-v-014a0a7f]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-014a0a7f]{flex-grow:1}",
+  inject("data-v-4769db45_0", {
+    source: ".notification[data-v-4769db45]{margin-bottom:0;margin-right:0}.action[data-v-4769db45]{padding-top:0;margin-bottom:0}.cancel-confirmation[data-v-4769db45]{margin-top:1rem}.cancel-confirmation__buttons[data-v-4769db45]{margin-top:.5rem;margin-bottom:1.5rem;display:flex;gap:2rem}.bx--toast-notification .bx--inline-notification__action-button[data-v-4769db45]{margin-left:-1rem}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--danger[data-v-4769db45]{margin:.5rem 0 .5rem -1rem}.notification-description-and-progress[data-v-4769db45]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-4769db45]{margin-bottom:0}.progress[data-v-4769db45]{margin-top:.75rem}.progress-bar-spacer[data-v-4769db45]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-4769db45]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-4769db45]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-4769db45]{width:100%}.notification-read[data-v-4769db45]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-4769db45]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-4769db45]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-4769db45]{font-weight:400}.cv-notifiation .timestamp[data-v-4769db45]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-4769db45]{color:#c6c6c6}.bx--tooltip__trigger[data-v-4769db45]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-4769db45]::before{border-bottom-color:#161616}div.row[data-v-4769db45]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-4769db45]{flex-grow:1}",
     map: undefined,
     media: undefined
-  }), inject("data-v-014a0a7f_1", {
+  }), inject("data-v-4769db45_1", {
     source: ".cv-notifiation .timestamp button span{background-color:#161616!important;border-left:1px solid #393939;border-right:1px solid #393939;border-bottom:1px solid #393939}",
     map: undefined,
     media: undefined
@@ -7115,10 +7116,10 @@ var __vue_inject_styles__$H = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__$H = "data-v-014a0a7f";
+var __vue_scope_id__$H = "data-v-4769db45";
 /* module identifier */
 
-var __vue_module_identifier__$H = "data-v-014a0a7f";
+var __vue_module_identifier__$H = "data-v-4769db45";
 /* functional template */
 
 var __vue_is_functional_template__$H = false;

package/package.json

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

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;