@nethserver/ns8-ui-lib 0.0.36 → 0.0.40

package/package.json

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

package/src/lib-components/NsDangerDeleteModal.vue

@@ -14,8 +14,9 @@
         :title="warning"
         :showCloseButton="false"
       />
-      <div class="mg-bottom-md" v-html="description"></div>
-      <div v-html="typeToConfirmMessage"></div>
+      <div v-html="description"></div>
+      <slot name="explanation"></slot>
+      <div class="type-to-confirm" v-html="typeToConfirmMessage"></div>
       <cv-form @submit.prevent="confirmDelete">
         <cv-text-input
           v-model="userInput"
@@ -31,14 +32,13 @@
 
 <script>
 import UtilService from "../lib-mixins/util.js";
-import IconService from "../lib-mixins/util.js";
 import NsInlineNotification from "./NsInlineNotification.vue";
 
 export default {
   name: "NsDangerDeleteModal",
   //component added for storybook to work
   components: { NsInlineNotification },
-  mixins: [UtilService, IconService],
+  mixins: [UtilService],
   props: {
     isShown: {
       type: Boolean,
@@ -112,4 +112,8 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.type-to-confirm {
+  margin-top: 2rem;
+}
+</style>

package/src/lib-components/NsDropdownAction.vue

@@ -0,0 +1,98 @@
+<template>
+  <div data-overflow-menu :class="[`cv-overflow-menu`]" :id="uid">
+    <button
+      :class="[
+        `bx--btn--${lowerCaseKind}`,
+        'bx--btn',
+        'bx--btn--field',
+        {
+          [`${carbonPrefix}--overflow-menu--open`]: open,
+        },
+      ]"
+      aria-haspopup
+      type="button"
+      :aria-expanded="open ? 'true' : 'false'"
+      :aria-controls="`${uid}-menu`"
+      :id="`${uid}-trigger`"
+      ref="trigger"
+      @click="doToggle"
+      @keydown.space.prevent
+      @keyup.space.prevent="doToggle"
+      @keydown.enter.prevent="doToggle"
+      @keydown.tab="onOverflowMenuTab"
+    >
+      <slot name="trigger"> </slot>
+      <NsSvg :svg="ChevronDown20" :class="`${carbonPrefix}--btn__icon`" />
+    </button>
+    <div
+      :class="[
+        `${carbonPrefix}--overflow-menu-options`,
+        {
+          [`${carbonPrefix}--overflow-menu-options--open`]: open,
+        },
+      ]"
+      tabindex="-1"
+      ref="popup"
+      :aria-labelledby="`${uid}-trigger`"
+      :id="`${uid}-menu`"
+      :style="{ left: left + 'px', top: top + 'px' }"
+      @focusout="checkFocusOut"
+      @mousedown.prevent="preventFocusOut"
+    >
+      <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
+        <slot></slot>
+      </ul>
+      <div
+        class="cv-overflow-menu__after-content"
+        ref="afterContent"
+        tabindex="0"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        @focus="focusAfterContent"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { CvOverflowMenu } from "@carbon/vue";
+import NsSvg from "./NsSvg.vue";
+import IconService from "../lib-mixins/icon.js";
+
+export default {
+  name: "NsDropdownAction",
+  extends: CvOverflowMenu,
+  components: { NsSvg },
+  mixins: [IconService],
+  props: {
+    kind: {
+      type: String,
+      default: "secondary",
+      validator: (val) =>
+        [
+          "default",
+          "primary",
+          "secondary",
+          "tertiary",
+          "ghost",
+          "danger",
+          "danger--ghost",
+          "danger--tertiary",
+        ].includes(val),
+    },
+    up: Boolean,
+    offset: {
+      type: Object,
+      validator(value) {
+        return value && value.left !== undefined && value.top !== undefined;
+      },
+    },
+  },
+  computed: {
+    lowerCaseKind() {
+      return this.kind.toLowerCase();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

package/src/lib-components/pictograms/HardDrive.vue

@@ -0,0 +1,12 @@
+<template>
+  <path
+    id="hard--drive"
+    d="M26,6c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S26.552,6,26,6z M27,16c0-0.552-0.448-1-1-1
+	s-1,0.448-1,1s0.448,1,1,1S27,16.552,27,16z M27,27c0-0.552-0.448-1-1-1s-1,0.448-1,1s0.448,1,1,1S27,27.552,27,27z M31,31.36H1
+	c-0.199,0-0.36-0.161-0.36-0.36v-8c0-0.199,0.161-0.36,0.36-0.36h30c0.199,0,0.36,0.161,0.36,0.36v8
+	C31.36,31.199,31.199,31.36,31,31.36z M1.36,30.64h29.28v-7.28H1.36V30.64z M31,20.36H1c-0.199,0-0.36-0.161-0.36-0.36v-8
+	c0-0.199,0.161-0.36,0.36-0.36h30c0.199,0,0.36,0.161,0.36,0.36v8C31.36,20.199,31.199,20.36,31,20.36z M1.36,19.64h29.28v-7.28
+	H1.36V19.64z M31,9.36H1C0.801,9.36,0.64,9.199,0.64,9V1c0-0.199,0.161-0.36,0.36-0.36h30c0.199,0,0.36,0.161,0.36,0.36v8
+	C31.36,9.199,31.199,9.36,31,9.36z M1.36,8.64h29.28V1.36H1.36V8.64z"
+  />
+</template>