@nethserver/ns8-ui-lib 0.0.82 → 0.0.85

package/package.json

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

package/src/lib-components/NsDataTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ns-data-table">
     <cv-search
-      v-if="isSearchable"
+      v-if="isSearchable && !isErrorShown"
       :label="searchLabel"
       :placeholder="searchPlaceholder"
       :clear-aria-label="searchClearLabel"
@@ -13,9 +13,16 @@
       ref="tableSearch"
     >
     </cv-search>
+    <NsInlineNotification
+      v-if="isErrorShown"
+      kind="error"
+      :title="errorTitle"
+      :description="errorDescription"
+      :showCloseButton="false"
+    />
     <!-- loading data -->
     <cv-data-table-skeleton
-      v-if="isLoading"
+      v-else-if="isLoading"
       :columns="columns"
       :rows="skeletonRows"
     ></cv-data-table-skeleton>
@@ -358,6 +365,9 @@ export default {
     isSearchable: { type: Boolean, default: false },
     isLoading: { type: Boolean, default: false },
     skeletonRows: { type: Number, default: 10 },
+    isErrorShown: { type: Boolean, default: false },
+    errorTitle: { type: String, default: "Cannot retrieve table data" },
+    errorDescription: { type: String, default: "Something went wrong" },
     noSearchResultsLabel: { type: String, default: "No results" },
     noSearchResultsDescription: {
       type: String,

package/src/lib-components/NsModal.vue

@@ -1,14 +1,145 @@
+<template>
+  <div
+    data-modal
+    :id="uid"
+    :class="[
+      `cv-modal ${carbonPrefix}--modal`,
+      {
+        'is-visible': dataVisible,
+        [`${carbonPrefix}--modal--danger`]: kind === 'danger',
+      },
+    ]"
+    tabindex="-1"
+    @keydown.esc.prevent="onEsc"
+    @click.self="onExternalClick"
+  >
+    <div
+      :class="[
+        `${carbonPrefix}--modal-container`,
+        { [`${carbonPrefix}--modal-container--${internalSize}`]: internalSize },
+      ]"
+      v-bind="dialogAttrs"
+      ref="modalDialog"
+    >
+      <div
+        class="cv-modal__before-content"
+        ref="beforeContent"
+        tabindex="0"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        @focus="focusBeforeContent"
+      />
+      <div :class="`${carbonPrefix}--modal-header`">
+        <p :class="`${carbonPrefix}--modal-header__label`">
+          <slot name="label"></slot>
+        </p>
+        <p :class="`${carbonPrefix}--modal-header__heading`">
+          <slot name="title">Modal Title</slot>
+        </p>
+        <button
+          :class="`${carbonPrefix}--modal-close`"
+          type="button"
+          @click="onClose"
+          ref="close"
+          :aria-label="closeAriaLabel"
+        >
+          <Close16 :class="`${carbonPrefix}--modal-close__icon`" />
+        </button>
+      </div>
+
+      <div
+        :class="[
+          `${carbonPrefix}--modal-content`,
+          { [`${carbonPrefix}--modal-content--with-form`]: hasFormContent },
+        ]"
+        ref="content"
+        :tabindex="scrollable ? 0 : undefined"
+      >
+        <slot name="content"></slot>
+      </div>
+
+      <cv-button-set
+        :class="[
+          `${carbonPrefix}--modal-footer`,
+          {
+            [`${carbonPrefix}--modal-footer--three-button`]:
+              hasPrimary && hasSecondary && hasOtherBtn,
+          },
+        ]"
+        v-if="hasFooter"
+      >
+        <cv-button
+          type="button"
+          kind="secondary"
+          @click="onOtherBtnClick"
+          v-if="hasOtherBtn"
+          ref="otherBtn"
+        >
+          <slot name="other-button">Other button</slot>
+        </cv-button>
+        <cv-button
+          type="button"
+          kind="secondary"
+          @click="onSecondaryClick"
+          v-if="hasSecondary"
+          ref="secondary"
+        >
+          <slot name="secondary-button">Secondary button</slot>
+        </cv-button>
+        <NsButton
+          :disabled="primaryButtonDisabled"
+          type="button"
+          :kind="primaryKind"
+          @click="onPrimaryClick"
+          v-if="hasPrimary"
+          ref="primary"
+          :loading="isLoading"
+        >
+          <slot name="primary-button">Primary button</slot>
+        </NsButton>
+      </cv-button-set>
+      <div
+        class="cv-modal__after-content"
+        ref="afterContent"
+        tabindex="0"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        @focus="focusAfterContent"
+      />
+    </div>
+  </div>
+</template>
+
 <script>
 import { CvModal } from "@carbon/vue";
+import NsButton from "./NsButton";
 
 export default {
   name: "NsModal",
   extends: CvModal,
+  components: {
+    CvModal,
+    NsButton,
+  },
   props: {
     hideOnClickOutside: {
       type: Boolean,
       default: false,
     },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    alert: Boolean,
+    closeAriaLabel: { type: String, default: "Close modal" },
+    kind: {
+      type: String,
+      default: "",
+      validator: (val) => ["", "danger"].includes(val),
+    },
+    autoHideOff: Boolean,
+    visible: Boolean,
+    primaryButtonDisabled: Boolean,
+    size: String,
+    hasFormContent: Boolean,
   },
   methods: {
     onExternalClick(ev) {

package/src/lib-components/NsWizard.vue

@@ -66,6 +66,7 @@
           kind="secondary"
           :icon="Close20"
           @click="$emit('cancel')"
+          :disabled="isCancelDisabled"
           type="button"
           class="wizard-button"
           ref="wizardCancel"
@@ -118,6 +119,7 @@ export default {
     nextLabel: { type: String, default: "Next" },
     isPreviousDisabled: Boolean,
     isNextDisabled: Boolean,
+    isCancelDisabled: Boolean,
     isNextLoading: Boolean,
     closeAriaLabel: { type: String, default: "Close modal" },
     autoHideOff: Boolean,