@nethserver/ns8-ui-lib 0.0.71 → 0.0.74

package/package.json

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

package/src/lib-components/NsDangerDeleteModal.vue

@@ -24,6 +24,13 @@
           ref="userInput"
         ></cv-text-input>
       </cv-form>
+      <NsInlineNotification
+        v-if="isErrorShown"
+        kind="error"
+        :title="errorTitle"
+        :description="errorDescription"
+        :showCloseButton="false"
+      />
     </template>
     <template slot="secondary-button">{{ cancelLabel }}</template>
     <template slot="primary-button">{{ deleteLabel }}</template>
@@ -73,6 +80,18 @@ export default {
       type: String,
       default: "I understand, delete",
     },
+    isErrorShown: {
+      type: Boolean,
+      default: false,
+    },
+    errorTitle: {
+      type: String,
+      default: "",
+    },
+    errorDescription: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {

package/src/lib-components/NsModal.vue

@@ -19,5 +19,18 @@ export default {
       }
     },
   },
+  focusBeforeContent() {
+    this.$nextTick(() => {
+      if (this.$slots["primary-button"] && !this.primaryButtonDisabled) {
+        this.$refs.primary.$el.focus();
+      } else if (this.$slots["secondary-button"]) {
+        this.$refs.secondary.$el.focus();
+      } else if (this.$slots["other-button"]) {
+        this.$refs.otherBtn.$el.focus();
+      } else {
+        this.$refs.close.focus();
+      }
+    });
+  },
 };
 </script>

package/src/lib-components/NsToastNotification.vue

@@ -26,7 +26,7 @@
             `${carbonPrefix}--toast-notification__subtitle`,
             `notification-description-and-progress`,
             `row`,
-            { 'fix-margin-bottom': actionLabel },
+            { 'fix-margin-bottom': actionLabel || isProgressShown },
           ]"
         >
           <span v-html="description"></span>
@@ -38,8 +38,34 @@
           </div>
         </div>
 
+        <!-- cancel button -->
         <div
-          v-if="actionLabel"
+          v-if="isProgressShown"
+          :class="[
+            `${carbonPrefix}--toast-notification__caption`,
+            `action`,
+            `row`,
+          ]"
+        >
+          <button
+            @click="cancelTask"
+            :class="[
+              `${carbonPrefix}--inline-notification__action-button`,
+              `${carbonPrefix}--btn`,
+              `${carbonPrefix}--btn--sm`,
+              { 'bx--btn--ghost': !isConfirmCancelShown },
+              { 'bx--btn--danger': isConfirmCancelShown },
+            ]"
+            :disabled="isCancelButtonDisabled"
+            type="button"
+          >
+            {{ isConfirmCancelShown ? confirmCancelLabel : cancelLabel }}
+          </button>
+        </div>
+
+        <!-- action button -->
+        <div
+          v-else-if="actionLabel"
           :class="[
             `${carbonPrefix}--toast-notification__caption`,
             `action`,
@@ -117,6 +143,8 @@ export default {
       type: Boolean,
       default: false,
     },
+    cancelLabel: { type: String, default: "Abort" },
+    confirmCancelLabel: { type: String, default: "Confirm abort" },
     closeAriaLabel: { type: String, default: "Dismiss notification" },
     kind: {
       type: String,
@@ -125,6 +153,28 @@ export default {
     },
     lowContrast: Boolean,
   },
+  data() {
+    return {
+      isConfirmCancelShown: false,
+      isCancelButtonDisabled: 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;
+      }
+    },
+  },
 };
 </script>
 
@@ -139,10 +189,17 @@ export default {
   margin-bottom: 0;
 }
 
-.bx--toast-notification .bx--inline-notification__action-button.bx--btn--ghost {
+.bx--toast-notification .bx--inline-notification__action-button {
   // following rule uses branding color so it's inside core _core.scss
   // color: $inverse-link;
-  margin-left: -16px;
+  margin-left: -1rem;
+}
+
+@media (min-width: 42rem) {
+}
+.bx--toast-notification
+  .bx--inline-notification__action-button.bx--btn--danger {
+  margin: 0.5rem 0 0.5rem -1rem;
 }
 
 .notification-description-and-progress {

package/src/lib-components/NsWizard.vue

@@ -68,6 +68,7 @@
           @click="$emit('cancel')"
           type="button"
           class="wizard-button"
+          ref="wizardCancel"
           >{{ cancelLabel }}
         </NsButton>
         <NsButton
@@ -77,6 +78,7 @@
           :disabled="isPreviousDisabled"
           type="button"
           class="wizard-button"
+          ref="wizardPrevious"
           >{{ previousLabel }}
         </NsButton>
         <NsButton
@@ -103,12 +105,12 @@
 </template>
 
 <script>
-import { CvModal } from "@carbon/vue";
+import NsModal from "./NsModal";
 import IconService from "../lib-mixins/icon.js";
 
 export default {
   name: "NsWizard",
-  extends: CvModal,
+  extends: NsModal,
   mixins: [IconService],
   props: {
     cancelLabel: { type: String, default: "Cancel" },
@@ -122,5 +124,16 @@ export default {
     visible: Boolean,
     size: String,
   },
+  methods: {
+    focusBeforeContent() {
+      this.$nextTick(() => {
+        if (this.isNextDisabled) {
+          this.$refs.wizardCancel.$el.focus();
+        } else {
+          this.$refs.wizardNext.$el.focus();
+        }
+      });
+    },
+  },
 };
 </script>