@nethserver/ns8-ui-lib 0.0.38 → 0.0.42

package/package.json

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

package/src/lib-components/NsDangerDeleteModal.vue

@@ -32,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,

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/NsIconMenu.vue

@@ -72,8 +72,6 @@
 <script>
 import { CvOverflowMenu } from "@carbon/vue";
 
-//// move to ns8-ui-lib
-
 export default {
   name: "NsIconMenu",
   extends: CvOverflowMenu,

package/src/lib-components/NsTextInput.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    :class="[
+      `cv-text-input`,
+      `ns-text-input`,
+      `${carbonPrefix}--form-item`,
+      `${carbonPrefix}--text-input-wrapper`,
+      { [`${carbonPrefix}--password-input-wrapper`]: isPassword },
+    ]"
+  >
+    <div v-if="hasTooltipSlot">
+      <label
+        :for="uid"
+        :class="[
+          `${carbonPrefix}--label`,
+          {
+            [`${carbonPrefix}--label--disabled`]:
+              $attrs.disabled !== undefined && $attrs.disabled,
+          },
+        ]"
+        >{{ label }}</label
+      >
+      <!-- tooltip -->
+      <cv-interactive-tooltip
+        :alignment="tooltipAlignment"
+        :direction="tooltipDirection"
+        class="tooltip"
+      >
+        <template slot="content">
+          <slot name="tooltip"></slot>
+        </template>
+      </cv-interactive-tooltip>
+    </div>
+    <label
+      v-else
+      :for="uid"
+      :class="[
+        `${carbonPrefix}--label`,
+        {
+          [`${carbonPrefix}--label--disabled`]:
+            $attrs.disabled !== undefined && $attrs.disabled,
+        },
+      ]"
+      >{{ label }}</label
+    >
+    <div
+      :class="[
+        `${carbonPrefix}--text-input__field-wrapper`,
+        {
+          [`${carbonPrefix}--text-input__field-wrapper--warning`]:
+            !isInvalid && isWarn,
+        },
+      ]"
+      :data-invalid="isInvalid"
+    >
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--text-input__invalid-icon`"
+      />
+      <WarningAltFilled16
+        v-if="isWarn"
+        :class="`${carbonPrefix}--text-input__invalid-icon ${carbonPrefix}--text-input__invalid-icon--warning`"
+      />
+
+      <input
+        :id="uid"
+        :class="[
+          `${carbonPrefix}--text-input`,
+          {
+            [`${carbonPrefix}--text-input--light`]: isLight,
+            [`${carbonPrefix}--text-input--invalid`]: isInvalid,
+            [`${carbonPrefix}--text-input--warning`]: isWarn,
+            [`${carbonPrefix}--password-input`]: isPassword,
+          },
+        ]"
+        v-bind="$attrs"
+        :value="value"
+        v-on="inputListeners"
+        :data-toggle-password-visibility="isPassword"
+        :type="dataType"
+        ref="input"
+      />
+      <button
+        v-if="isPassword"
+        :class="[
+          `${carbonPrefix}--btn`,
+          `${carbonPrefix}--text-input--password__visibility__toggle`,
+          `${carbonPrefix}--tooltip__trigger`,
+          `${carbonPrefix}--tooltip--a11y`,
+          `${carbonPrefix}--tooltip--bottom`,
+          `${carbonPrefix}--tooltip--align-center`,
+        ]"
+        @click="togglePasswordVisibility"
+        type="button"
+      >
+        <span :class="`${carbonPrefix}--assistive-text`">{{
+          passwordHideShowLabel
+        }}</span>
+        <ViewOff16
+          v-if="isPasswordVisible"
+          :class="`${carbonPrefix}--icon-visibility-off`"
+        />
+        <View16 v-else :class="`${carbonPrefix}--icon-visibility-off`" />
+      </button>
+    </div>
+    <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+    <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
+      <slot name="warn-text">{{ warnText }}</slot>
+    </div>
+    <div
+      v-if="isHelper"
+      :class="[
+        `${carbonPrefix}--form__helper-text`,
+        { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
+      ]"
+    >
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CvTextInput } from "@carbon/vue";
+import {
+  WarningFilled16,
+  WarningAltFilled16,
+  View16,
+  ViewOff16,
+} from "@carbon/icons-vue";
+
+export default {
+  name: "NsTextInput",
+  extends: CvTextInput,
+  components: { WarningFilled16, WarningAltFilled16, View16, ViewOff16 },
+  props: {
+    helperText: { type: String, default: undefined },
+    invalidMessage: { type: String, default: undefined },
+    label: String,
+    passwordHideLabel: { type: String, default: "Hide password" },
+    passwordShowLabel: { type: String, default: "Show password" },
+    passwordVisible: Boolean,
+    type: String,
+    value: String,
+    warnText: { type: String, default: undefined },
+    tooltipAlignment: {
+      type: String,
+      default: "center",
+      validator: (val) => ["start", "center", "end"].includes(val),
+    },
+    tooltipDirection: {
+      type: String,
+      default: "bottom",
+      validator: (val) => ["top", "left", "bottom", "right".includes(val)],
+    },
+  },
+  computed: {
+    hasTooltipSlot() {
+      return !!this.$slots.tooltip;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.tooltip {
+  display: inline-block;
+  position: absolute;
+}
+</style>
+
+<style lang="scss">
+// global styles
+
+.ns-text-input .bx--tooltip__label .bx--tooltip__trigger {
+  margin-left: 0.25rem;
+}
+</style>