@nmorph/nmorph-ui-kit 2.2.22 → 2.2.24

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js

@@ -1,12 +1,13 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as z, ref as i, computed as t, watch as c, nextTick as U } from "vue";
-import { useModifiers as F } from "../../../utils/create-modifiers.js";
-import { useVirtualList as P } from "../../../hooks/use-virtual-list.js";
-import Y from "../nmorph-text-input/NmorphTextInput.vue.js";
-import G from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import J from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import K from "../../../assets/icons/loader.svg.js";
-const le = /* @__PURE__ */ z({
+import { defineComponent as P, ref as s, computed as l, watch as c, nextTick as Y } from "vue";
+import { useModifiers as G } from "../../../utils/create-modifiers.js";
+import { useVirtualList as J } from "../../../hooks/use-virtual-list.js";
+import { useZIndex as K } from "../../../hooks/use-z-index.js";
+import Q from "../nmorph-text-input/NmorphTextInput.vue.js";
+import W from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import X from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ee from "../../../assets/icons/loader.svg.js";
+const se = /* @__PURE__ */ P({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -28,74 +29,81 @@ const le = /* @__PURE__ */ z({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "select"],
-  setup(D, { expose: k, emit: _ }) {
-    k();
-    const a = D, n = i(a.modelValue), d = _, C = t(
-      () => F({
-        "nmorph-autocomplete": []
+  setup(_, { expose: C, emit: $ }) {
+    C();
+    const t = _, u = s(t.modelValue), d = $, L = l(
+      () => G({
+        "nmorph-autocomplete": [`${a.value && "open"}`]
       })
-    ), L = (e) => {
-      n.value = e, d("update:model-value", n.value);
-    }, r = i(!1), O = i(null), g = () => {
-      r.value = !1;
-    }, l = t(() => a.list.filter((e) => Object.keys(e).some((h) => String(e[h]).toLowerCase().includes(n.value.toLowerCase())))), p = t(() => a.virtual && l.value.length > 0), y = t(() => a.virtualItemHeight), b = t(() => a.virtualOverscan), I = t(() => a.virtualDynamicHeight), u = P(l, {
-      enabled: p,
-      itemHeight: y,
-      overscan: b,
-      dynamic: I
-    }), T = t(() => u.virtualItems.value), V = t(() => ({
-      height: `${u.totalHeight.value}px`
-    })), $ = t(() => ({
-      transform: `translateY(${u.offsetTop.value}px)`
-    })), x = (e) => typeof e == "number" ? `${e}px` : e, A = t(() => x(a.virtualMaxHeight)), o = i(0), f = t(() => l.value[o.value]), m = t(() => `${a.id || a.name || "nmorph-autocomplete"}-listbox`), H = (e) => `${m.value}-option-${e}`;
-    c(l, async (e) => {
-      r.value = e.length > 0, o.value = 0, await U(), u.scrollToIndex(0), u.refresh();
+    ), i = s(!1), O = (e) => {
+      i.value = e === "", u.value = e, a.value = !i.value && r.value.length > 0, o.value = 0, d("update:model-value", u.value);
+    }, a = s(!1), T = s(null), y = () => {
+      i.value = !0, a.value = !1;
+    }, r = l(() => t.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(u.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), x = l(() => t.virtualItemHeight), I = l(() => t.virtualOverscan), b = l(() => t.virtualDynamicHeight), n = J(r, {
+      enabled: f,
+      itemHeight: x,
+      overscan: I,
+      dynamic: b
+    }), A = l(() => n.virtualItems.value), V = l(() => ({
+      height: `${n.totalHeight.value}px`
+    })), M = l(() => ({
+      transform: `translateY(${n.offsetTop.value}px)`
+    })), H = (e) => typeof e == "number" ? `${e}px` : e, z = l(() => H(t.virtualMaxHeight)), o = s(0), v = l(() => r.value[o.value]), m = l(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), q = (e) => `${m.value}-option-${e}`;
+    c(
+      () => t.modelValue,
+      (e) => {
+        e !== u.value && (u.value = e);
+      }
+    ), c(r, async (e) => {
+      a.value = !i.value && u.value !== "" && e.length > 0, o.value = 0, await Y(), n.scrollToIndex(0), n.refresh();
     });
-    const v = (e) => {
-      d("select", e), n.value = e.value, setTimeout(() => {
-        r.value = !1;
+    const h = (e) => {
+      d("select", e), u.value = e.value, d("update:model-value", u.value), setTimeout(() => {
+        i.value = !0, a.value = !1;
       });
-    }, M = (e) => {
-      v(e);
-    }, B = () => {
-      r.value = l.value.length > 0;
-    }, s = i(!1);
-    c(n, async (e) => {
-      e !== "" && a.actionCallback && (s.value = !0, await a.actionCallback(), s.value = !1);
-    }), c(s, (e) => {
-      e && (r.value = !0);
+    }, B = (e) => {
+      h(e);
+    }, E = () => {
+      i.value = !1, a.value = r.value.length > 0;
+    }, p = s(!1);
+    c(u, async (e) => {
+      e !== "" && t.actionCallback && (p.value = !0, await t.actionCallback(), p.value = !1);
+    }), c(p, (e) => {
+      e && (a.value = !0);
     }), c(o, (e) => {
-      p.value && u.scrollToIndex(e);
+      f.value && n.scrollToIndex(e);
     });
-    const q = () => {
-      l.value.length && (r.value = !0, o.value = (o.value + 1) % l.value.length);
-    }, w = () => {
-      l.value.length && (r.value = !0, o.value = (o.value - 1 + l.value.length) % l.value.length);
+    const w = () => {
+      r.value.length && (a.value = !0, o.value = (o.value + 1) % r.value.length);
     }, N = () => {
-      !r.value || !f.value || v(f.value);
-    }, E = (e) => {
-      e.key === "ArrowDown" ? (e.preventDefault(), q()) : e.key === "ArrowUp" ? (e.preventDefault(), w()) : e.key === "Enter" ? (e.preventDefault(), N()) : e.key === "Escape" && (e.preventDefault(), g());
-    }, R = t(() => ({
+      r.value.length && (a.value = !0, o.value = (o.value - 1 + r.value.length) % r.value.length);
+    }, S = () => {
+      !a.value || !v.value || h(v.value);
+    }, j = (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), w()) : e.key === "ArrowUp" ? (e.preventDefault(), N()) : e.key === "Enter" ? (e.preventDefault(), S()) : e.key === "Escape" && (e.preventDefault(), y());
+    }, R = l(() => ({
       role: "combobox",
       "aria-autocomplete": "list",
-      "aria-expanded": r.value,
+      "aria-expanded": a.value,
       "aria-controls": m.value,
-      "aria-activedescendant": r.value ? H(o.value) : void 0
-    })), S = { props: a, initialValue: n, emit: d, modifiers: C, updateValueHandler: L, open: r, nmorphAutocompleteDOMRef: O, closeHandler: g, filteredList: l, virtualEnabled: p, virtualItemHeight: y, virtualOverscan: b, virtualDynamicHeight: I, virtualList: u, virtualItems: T, virtualSpacerStyle: V, virtualContentStyle: $, getCssSize: x, virtualMaxHeight: A, currentIndex: o, activeItem: f, listboxId: m, getOptionId: H, selectItem: v, clickHandler: M, focusHandler: B, loader: s, arrowDownHandler: q, arrowUpHandler: w, enterHandler: N, keydownHandler: E, inputAttrs: R, setVirtualItemRef: (e, h) => {
-      const j = e instanceof Element ? e : e?.$el;
-      u.measureElement(h, j);
-    }, get NmorphIcon() {
-      return J;
+      "aria-activedescendant": a.value ? q(o.value) : void 0
+    })), U = (e, g) => {
+      const F = e instanceof Element ? e : e?.$el;
+      n.measureElement(g, F);
+    }, D = K(a, () => t.zIndex), Z = l(() => ({
+      "--nmorph-autocomplete-input-z-index": D.value + 1
+    })), k = { props: t, initialValue: u, emit: d, modifiers: L, userClosed: i, updateValueHandler: O, open: a, nmorphAutocompleteDOMRef: T, closeHandler: y, filteredList: r, virtualEnabled: f, virtualItemHeight: x, virtualOverscan: I, virtualDynamicHeight: b, virtualList: n, virtualItems: A, virtualSpacerStyle: V, virtualContentStyle: M, getCssSize: H, virtualMaxHeight: z, currentIndex: o, activeItem: v, listboxId: m, getOptionId: q, selectItem: h, clickHandler: B, focusHandler: E, loader: p, arrowDownHandler: w, arrowUpHandler: N, enterHandler: S, keydownHandler: j, inputAttrs: R, setVirtualItemRef: U, dropdownZIndex: D, styles: Z, get NmorphIcon() {
+      return X;
     }, get NmorphDropdown() {
-      return G;
+      return W;
     }, get NmorphTextInput() {
-      return Y;
+      return Q;
     }, get NmorphIconLoader() {
-      return K;
+      return ee;
     } };
-    return Object.defineProperty(S, "__isScriptSetup", { enumerable: !1, value: !0 }), S;
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  le as default
+  se as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js

@@ -1,11 +1,11 @@
 import s from "./NmorphTextInput.vue2.js";
-import { openBlock as n, createElementBlock as r, normalizeStyle as m, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as _, withKeys as f, createBlock as a, withCtx as d, createVNode as y, resolveDynamicComponent as b } from "vue";
-import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const x = { class: "nmorph-text-input__input-side" }, v = {
+import { openBlock as n, createElementBlock as r, normalizeStyle as m, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as f, withKeys as y, createBlock as d, withModifiers as _, withCtx as a, createVNode as u, resolveDynamicComponent as b } from "vue";
+import x from "../../../_virtual/_plugin-vue_export-helper.js";
+const v = { class: "nmorph-text-input__input-side" }, k = {
   key: 0,
   class: "nmorph-text-input__prepend-icon"
-}, k = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
-function w(p, o, B, e, N, C) {
+}, w = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
+function B(p, o, N, e, C, I) {
   return n(), r(
     "div",
     {
@@ -13,11 +13,11 @@ function w(p, o, B, e, N, C) {
       style: m(e.styles)
     },
     [
-      i("div", x, [
-        e.slots["prepend-icon"] ? (n(), r("div", v, [
+      i("div", v, [
+        e.slots["prepend-icon"] ? (n(), r("div", k, [
           h(p.$slots, "prepend-icon")
         ])) : l("v-if", !0),
-        i("input", _({
+        i("input", f({
           id: e.id,
           ref: "inputDOMRef",
           name: e.name,
@@ -33,21 +33,23 @@ function w(p, o, B, e, N, C) {
           onFocus: e.handleFocus,
           onBlur: e.handleBlur,
           onKeydown: o[0] || (o[0] = (t) => e.emit("keydown", t)),
-          onKeyup: o[1] || (o[1] = f((t) => e.emit("on-enter"), ["enter"]))
-        }), null, 16, k),
-        e.props.typePassword || e.props.clearable ? (n(), a(e.NmorphButton, {
+          onKeyup: o[1] || (o[1] = y((t) => e.emit("on-enter"), ["enter"]))
+        }), null, 16, w),
+        e.props.typePassword || e.props.clearable ? (n(), d(e.NmorphButton, {
           key: 1,
           disabled: e.props.disabled,
           class: "nmorph-text-input__password-btn",
           "style-type": "transparent",
           width: "32px",
           height: e.props.height,
+          onMousedown: o[2] || (o[2] = _(() => {
+          }, ["prevent"])),
           onClick: e.actionButtonClickHandler
         }, {
-          default: d(() => [
-            y(e.NmorphIcon, null, {
-              default: d(() => [
-                (n(), a(b(e.actionIcon)))
+          default: a(() => [
+            u(e.NmorphIcon, null, {
+              default: a(() => [
+                (n(), d(b(e.actionIcon)))
               ]),
               _: 1
               /* STABLE */
@@ -62,7 +64,7 @@ function w(p, o, B, e, N, C) {
     /* CLASS, STYLE */
   );
 }
-const K = /* @__PURE__ */ u(s, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+const M = /* @__PURE__ */ x(s, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
 export {
-  K as default
+  M as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js

@@ -1,8 +1,8 @@
 import './NmorphDropdown.css';
 import n from "./NmorphDropdown.vue2.js";
-import { openBlock as r, createBlock as a, withCtx as l, createElementBlock as p, normalizeStyle as s, normalizeClass as c, renderSlot as i, createCommentVNode as d } from "vue";
+import { openBlock as r, createBlock as a, withCtx as s, createElementBlock as p, normalizeStyle as l, normalizeClass as c, renderSlot as i, createCommentVNode as t } from "vue";
 /* empty css                    */
-import t from "../../../_virtual/_plugin-vue_export-helper.js";
+import d from "../../../_virtual/_plugin-vue_export-helper.js";
 const m = ["role", "aria-label"];
 function f(e, _, h, o, w, k) {
   return r(), a(o.NmorphOverlay, {
@@ -11,26 +11,27 @@ function f(e, _, h, o, w, k) {
     "z-index": o.props.zIndex,
     "close-on-escape": o.props.closeOnEscape,
     "trap-focus": o.props.trapFocus,
+    "restore-focus": o.props.restoreFocus,
     onOnOutsideClick: o.outsideClickHandler,
     onOnEscapeKeydown: o.escapeHandler
   }, {
-    default: l(() => [
+    default: s(() => [
       o.props.open ? (r(), p("div", {
         key: 0,
         ref: "dropdownDOMRef",
         class: c([o.modifiers, o.props.contentClass]),
-        style: s(o.dropdownStyle),
+        style: l(o.dropdownStyle),
         role: o.props.role || void 0,
         "aria-label": o.props.ariaLabel || void 0
       }, [
         i(e.$slots, "default")
-      ], 14, m)) : d("v-if", !0)
+      ], 14, m)) : t("v-if", !0)
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["show", "z-index", "close-on-escape", "trap-focus"]);
+  }, 8, ["show", "z-index", "close-on-escape", "trap-focus", "restore-focus"]);
 }
-const O = /* @__PURE__ */ t(n, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
+const O = /* @__PURE__ */ d(n, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
 export {
   O as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphDropdown.css';
-import { defineComponent as w, ref as b, toRef as r, computed as i, watch as q } from "vue";
+import { defineComponent as q, ref as w, toRef as r, computed as i, watch as b } from "vue";
 import { useModifiers as v } from "../../../utils/create-modifiers.js";
 import { usePlacement as x } from "../../../hooks/use-placement.js";
 import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const k = /* @__PURE__ */ w({
+const k = /* @__PURE__ */ q({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -18,6 +18,7 @@ const k = /* @__PURE__ */ w({
     zIndex: { type: Number, required: !1, default: void 0 },
     closeOnEscape: { type: Boolean, required: !1, default: !0 },
     trapFocus: { type: Boolean, required: !1, default: !1 },
+    restoreFocus: { type: Boolean, required: !1, default: !0 },
     role: { type: String, required: !1, default: "listbox" },
     ariaLabel: { type: String, required: !1, default: "" },
     contentClass: { type: String, required: !1, default: "" }
@@ -25,7 +26,7 @@ const k = /* @__PURE__ */ w({
   emits: ["on-outside-click", "on-escape-keydown"],
   setup(f, { expose: m, emit: c }) {
     m();
-    const e = f, n = c, d = b(null), { placementCoords: l, placementReady: a, adjustPlacement: s } = x({
+    const e = f, l = c, d = w(null), { placementCoords: n, placementReady: a, adjustPlacement: s } = x({
       initialPlacement: r(e, "placement"),
       contentDOMElement: d,
       relativeElement: r(e, "relativeElement"),
@@ -36,31 +37,31 @@ const k = /* @__PURE__ */ w({
       () => v({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
-    ), o = (t) => typeof t == "number" ? `${t}px` : t, p = i(
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, u = i(
       () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
     ), h = i(() => ({
-      "--nmorph-dropdown-width": p.value,
+      "--nmorph-dropdown-width": u.value,
       "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
       "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
-      left: l.value.x,
-      top: l.value.y,
+      left: n.value.x,
+      top: n.value.y,
       visibility: e.open && a.value ? "visible" : "hidden"
     }));
-    q(
+    b(
       () => e.open,
       (t) => {
         t && s();
       },
       { flush: "post" }
     );
-    const u = { props: e, emit: n, dropdownDOMRef: d, placementCoords: l, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: p, dropdownStyle: h, outsideClickHandler: () => {
-      n("on-outside-click");
+    const p = { props: e, emit: l, dropdownDOMRef: d, placementCoords: n, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: u, dropdownStyle: h, outsideClickHandler: () => {
+      l("on-outside-click");
     }, escapeHandler: () => {
-      n("on-escape-keydown");
+      l("on-escape-keydown");
     }, get NmorphOverlay() {
       return O;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue2.js

@@ -1,25 +1,25 @@
 import './NmorphNotificationProvider.css';
-import { defineComponent as x, ref as u, computed as v, watch as g } from "vue";
-import { NmorphNotificationPlacement as q } from "./types.js";
-import A from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
-const N = 500, z = /* @__PURE__ */ x({
+import { defineComponent as g, ref as u, inject as q, computed as h, watch as A } from "vue";
+import { NmorphNotificationPlacement as b } from "./types.js";
+import z from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
+const N = 500, P = /* @__PURE__ */ g({
   __name: "NmorphNotificationProvider",
   props: {
     notifications: { type: Array, required: !0 },
     placement: { type: null, required: !1, default: "top-right" },
-    zIndex: { type: Number, required: !1, default: 1e3 },
+    zIndex: { type: Number, required: !1, default: void 0 },
     quantity: { type: Number, required: !1, default: 100 }
   },
-  setup(h, { expose: _ }) {
-    _();
-    const c = (e) => typeof e.id == "string" && e.id.length > 0, a = u([]), n = u([]), r = u([]), d = Object.values(q), f = (e) => {
-      r.value = r.value.filter((i) => i.id !== e), n.value = n.value.filter((i) => i !== e);
+  setup(_, { expose: I }) {
+    I();
+    const c = (e) => typeof e.id == "string" && e.id.length > 0, a = u([]), o = u([]), r = u([]), d = Object.values(b), f = (e) => {
+      r.value = r.value.filter((i) => i.id !== e), o.value = o.value.filter((i) => i !== e);
     }, p = (e, i = !0) => {
-      n.value.includes(e) || (i && !a.value.includes(e) && (a.value = [...a.value, e]), n.value = [...n.value, e], setTimeout(() => f(e), N));
-    }, s = h, y = v(
+      o.value.includes(e) || (i && !a.value.includes(e) && (a.value = [...a.value, e]), o.value = [...o.value, e], setTimeout(() => f(e), N));
+    }, s = _, m = q("nmorph", void 0), y = h(
       () => d.map((e) => {
         const i = r.value.filter(
-          (o) => (o.placement ?? s.placement) === e
+          (n) => (n.placement ?? s.placement) === e
         ), t = Math.max(i.length - s.quantity, 0);
         return {
           placement: e,
@@ -27,29 +27,29 @@ const N = 500, z = /* @__PURE__ */ x({
         };
       })
     );
-    g(
+    A(
       () => s.notifications,
       (e) => {
         const i = e.filter(c).filter((t) => !a.value.includes(t.id));
         r.value = r.value.map((t) => {
-          const o = i.find((l) => l.id === t.id);
-          return o ? { ...t, ...o } : t;
+          const n = i.find((l) => l.id === t.id);
+          return n ? { ...t, ...n } : t;
         }), i.forEach((t) => {
           r.value.some(
             (l) => l.id === t.id
           ) || r.value.push(t);
         }), r.value.filter(
-          (t) => !i.some((o) => o.id === t.id)
+          (t) => !i.some((n) => n.id === t.id)
         ).forEach((t) => p(t.id, !1));
       },
       { deep: !0, immediate: !0 }
     );
-    const I = v(() => s.zIndex), m = { ANIMATION_DURATION: N, hasNotificationId: c, removedIds: a, closingIds: n, renderedNotifications: r, placementList: d, removeRenderedNotification: f, closeHandler: p, props: s, notificationGroups: y, zIndex: I, get NmorphAlert() {
-      return A;
+    const x = h(() => s.zIndex ?? (m?.zIndex.current.value ?? 1e3) + 1), v = { ANIMATION_DURATION: N, hasNotificationId: c, removedIds: a, closingIds: o, renderedNotifications: r, placementList: d, removeRenderedNotification: f, closeHandler: p, props: s, nmorph: m, notificationGroups: y, zIndex: x, get NmorphAlert() {
+      return z;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  z as default
+  P as default
 };