@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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

@@ -1,37 +1,95 @@
 import './NmorphDropdown.css';
-import n from "./NmorphDropdown.vue2.js";
-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 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, {
-    show: o.props.open,
-    transparent: "",
-    "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: s(() => [
-      o.props.open ? (r(), p("div", {
-        key: 0,
-        ref: "dropdownDOMRef",
-        class: c([o.modifiers, o.props.contentClass]),
-        style: l(o.dropdownStyle),
-        role: o.props.role || void 0,
-        "aria-label": o.props.ariaLabel || void 0
-      }, [
-        i(e.$slots, "default")
-      ], 14, m)) : t("v-if", !0)
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 8, ["show", "z-index", "close-on-escape", "trap-focus", "restore-focus"]);
-}
-const O = /* @__PURE__ */ d(n, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
+import { defineComponent as v, ref as y, toRef as o, computed as n, watch as x, openBlock as i, createBlock as O, unref as k, withCtx as C, createElementBlock as _, normalizeStyle as b, normalizeClass as E, renderSlot as B, createCommentVNode as W } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { toCssSize as S, createCssSizeVariables as D } from "../../../utils/common.js";
+import { usePlacement as F } from "../../../hooks/use-placement.js";
+import M from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+const R = ["role", "aria-label"], j = /* @__PURE__ */ v({
+  __name: "NmorphDropdown",
+  props: {
+    open: { type: Boolean },
+    relativeElement: {},
+    placement: { default: "bottom" },
+    width: { default: 160 },
+    minWidth: { default: void 0 },
+    maxWidth: { default: void 0 },
+    xOffset: { default: 0 },
+    yOffset: { default: 0 },
+    fillWidth: { type: Boolean, default: !0 },
+    zIndex: { default: void 0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    trapFocus: { type: Boolean, default: !1 },
+    restoreFocus: { type: Boolean, default: !0 },
+    role: { default: "listbox" },
+    ariaLabel: { default: "" },
+    contentClass: { default: "" },
+    hideShadow: { type: Boolean, default: !1 }
+  },
+  emits: ["on-outside-click", "on-escape-keydown"],
+  setup(s, { emit: r }) {
+    const e = s, a = r, l = y(null), { placementCoords: d, placementReady: c, adjustPlacement: p } = F({
+      initialPlacement: o(e, "placement"),
+      contentDOMElement: l,
+      relativeElement: o(e, "relativeElement"),
+      yOffset: o(e, "yOffset"),
+      xOffset: o(e, "xOffset"),
+      enabled: o(e, "open")
+    }), f = n(
+      () => z({
+        "nmorph-dropdown": [!e.open && "closed", e.hideShadow && "hide-shadow"]
+      })
+    ), m = n(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : S(e.width)
+    ), u = n(() => ({
+      "--nmorph-dropdown-width": m.value,
+      ...D({
+        "--nmorph-dropdown-min-width": e.minWidth === void 0 ? "auto" : e.minWidth,
+        "--nmorph-dropdown-max-width": e.maxWidth === void 0 ? "none" : e.maxWidth
+      }),
+      left: d.value.x,
+      top: d.value.y,
+      visibility: e.open && c.value ? "visible" : "hidden"
+    }));
+    x(
+      () => e.open,
+      (t) => {
+        t && p();
+      },
+      { flush: "post" }
+    );
+    const h = () => {
+      a("on-outside-click");
+    }, w = () => {
+      a("on-escape-keydown");
+    };
+    return (t, P) => (i(), O(k(M), {
+      show: e.open,
+      transparent: "",
+      "z-index": e.zIndex,
+      "close-on-escape": e.closeOnEscape,
+      "trap-focus": e.trapFocus,
+      "restore-focus": e.restoreFocus,
+      onOnOutsideClick: h,
+      onOnEscapeKeydown: w
+    }, {
+      default: C(() => [
+        e.open ? (i(), _("div", {
+          key: 0,
+          ref_key: "dropdownDOMRef",
+          ref: l,
+          class: E([f.value, e.contentClass]),
+          style: b(u.value),
+          role: e.role || void 0,
+          "aria-label": e.ariaLabel || void 0
+        }, [
+          B(t.$slots, "default")
+        ], 14, R)) : W("", !0)
+      ]),
+      _: 3
+    }, 8, ["show", "z-index", "close-on-escape", "trap-focus", "restore-focus"]));
+  }
+});
 export {
-  O as default
+  j as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphDropdown.css';
+import o from "./NmorphDropdown.vue.js";
+/* empty css                    */
+export {
+  o as default
+};

package/dist/components/navigation/nmorph-tabs/NmorphTabs.vue.js

@@ -1,73 +1,64 @@
 import './NmorphTabs.css';
-import m from "./NmorphTabs.vue2.js";
-import { openBlock as n, createElementBlock as s, normalizeClass as t, renderSlot as a, createElementVNode as r, Fragment as i, renderList as d, toDisplayString as l, createCommentVNode as _, withDirectives as h, vShow as p } from "vue";
-/* empty css                */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = { class: "nmorph-tabs__label-list" }, v = ["id", "custom", "onClick"], u = { key: 0 }, k = { class: "nmorph-tabs__content__wrapper" }, g = { class: "nmorph-tabs__content" }, y = ["id"], C = { key: 0 };
-function T(c, I, N, e, V, w) {
-  return n(), s(
-    "div",
-    {
-      class: t(e.modifiers)
-    },
-    [
-      a(c.$slots, "default"),
-      r("div", b, [
-        (n(!0), s(
-          i,
-          null,
-          d(e.updatedPanes, (o) => (n(), s("div", {
-            id: e.getTabLabelId(e.tabsIdentifier, o.name),
-            key: o.name,
-            class: t(["nmorph-tabs__label", [
-              { "nmorph-tabs__label--selected": o.name === e.props.modelValue },
-              { "nmorph-tabs__label--disabled": o.disabled }
-            ]]),
-            custom: o.disabled,
-            onClick: (S) => e.changeTab(o)
-          }, [
-            e.slots.default ? _("v-if", !0) : (n(), s(
-              "div",
-              u,
-              l(o.label),
-              1
-              /* TEXT */
-            ))
-          ], 10, v))),
-          128
-          /* KEYED_FRAGMENT */
-        ))
+import { defineComponent as V, computed as p, ref as I, provide as S, useSlots as T, openBlock as t, createElementBlock as s, normalizeClass as _, renderSlot as w, createElementVNode as a, Fragment as h, renderList as f, unref as o, toDisplayString as v, createCommentVNode as b, withDirectives as B, vShow as N } from "vue";
+import { useModifiers as E } from "../../../utils/create-modifiers.js";
+import { generateUUID as L } from "../../../utils/common.js";
+import { getTabLabelId as U, getTabContentId as $ } from "./utils.js";
+const x = { class: "nmorph-tabs__label-list" }, z = ["id", "custom", "onClick"], F = { key: 0 }, M = { class: "nmorph-tabs__content__wrapper" }, P = { class: "nmorph-tabs__content" }, j = ["id"], q = { key: 0 }, O = /* @__PURE__ */ V({
+  __name: "NmorphTabs",
+  props: {
+    modelValue: { default: 0 },
+    stretch: { type: Boolean, default: !1 },
+    panes: { default: () => [] }
+  },
+  emits: ["update:model-value", "tab-change"],
+  setup(g, { emit: k }) {
+    const n = g, i = k, y = p(
+      () => E({
+        "nmorph-tabs": [n.stretch && "stretch"]
+      })
+    ), C = (l) => {
+      if (l.disabled) return;
+      const { name: d } = l;
+      i("update:model-value", d), i("tab-change", d);
+    }, c = I([]), r = L();
+    S("nmorph-tabs-data", {
+      tabsData: c,
+      tabsIdentifier: r
+    });
+    const m = p(() => n.panes.length > 0 ? n.panes : c.value), u = T();
+    return (l, d) => (t(), s("div", {
+      class: _(y.value)
+    }, [
+      w(l.$slots, "default"),
+      a("div", x, [
+        (t(!0), s(h, null, f(m.value, (e) => (t(), s("div", {
+          id: o(U)(o(r), e.name),
+          key: e.name,
+          class: _(["nmorph-tabs__label", [
+            { "nmorph-tabs__label--selected": e.name === n.modelValue },
+            { "nmorph-tabs__label--disabled": e.disabled }
+          ]]),
+          custom: e.disabled,
+          onClick: (A) => C(e)
+        }, [
+          o(u).default ? b("", !0) : (t(), s("div", F, v(e.label), 1))
+        ], 10, z))), 128))
       ]),
-      r("div", k, [
-        r("div", g, [
-          (n(!0), s(
-            i,
-            null,
-            d(e.updatedPanes, (o) => h((n(), s("div", {
-              id: e.getTabContentId(e.tabsIdentifier, o.name),
-              key: o.name
-            }, [
-              e.slots.default ? _("v-if", !0) : (n(), s(
-                "div",
-                C,
-                l(o.content),
-                1
-                /* TEXT */
-              ))
-            ], 8, y)), [
-              [p, o.name === e.props.modelValue]
-            ])),
-            128
-            /* KEYED_FRAGMENT */
-          ))
+      a("div", M, [
+        a("div", P, [
+          (t(!0), s(h, null, f(m.value, (e) => B((t(), s("div", {
+            id: o($)(o(r), e.name),
+            key: e.name
+          }, [
+            o(u).default ? b("", !0) : (t(), s("div", q, v(e.content), 1))
+          ], 8, j)), [
+            [N, e.name === n.modelValue]
+          ])), 128))
         ])
       ])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const P = /* @__PURE__ */ f(m, [["render", T], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-tabs/NmorphTabs.vue"]]);
+    ], 2));
+  }
+});
 export {
-  P as default
+  O as default
 };

package/dist/components/navigation/nmorph-tabs/NmorphTabs.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphTabs.css';
+import o from "./NmorphTabs.vue.js";
+/* empty css                */
+export {
+  o as default
+};

package/dist/components/navigation/nmorph-tabs/components/nmorph-tab-pane/NmorphTabPane.vue.js

@@ -1,30 +1,41 @@
-import i from "./NmorphTabPane.vue2.js";
-import { openBlock as e, createElementBlock as s, normalizeClass as m, createBlock as a, Teleport as t, renderSlot as n, createCommentVNode as p } from "vue";
-import c from "../../../../../_virtual/_plugin-vue_export-helper.js";
-function d(r, l, f, o, b, _) {
-  return o.isMounted ? (e(), s(
-    "div",
-    {
+import { defineComponent as i, computed as u, inject as f, ref as b, onMounted as v, openBlock as a, createElementBlock as h, normalizeClass as k, createBlock as l, Teleport as p, unref as e, renderSlot as d, createCommentVNode as B } from "vue";
+import { useModifiers as C } from "../../../../../utils/create-modifiers.js";
+import { getTabLabelId as I, getTabContentId as T } from "../../utils.js";
+const y = /* @__PURE__ */ i({
+  __name: "NmorphTabPane",
+  props: {
+    label: { default: "" },
+    name: {},
+    disabled: { type: Boolean, default: !1 },
+    content: { default: "" }
+  },
+  setup(c) {
+    const t = c, m = u(
+      () => C({
+        "nmorph-tab-pane": []
+      })
+    ), o = f("nmorph-tabs-data"), n = b(!1);
+    v(() => {
+      n.value = !0;
+    }), o.tabsData.value.push(t);
+    const s = t;
+    return (r, _) => n.value ? (a(), h("div", {
       key: 0,
-      class: m(o.modifiers)
-    },
-    [
-      (e(), a(t, {
-        to: `#${o.getTabLabelId(o.providedData?.tabsIdentifier, o.props.name)}`
+      class: k(m.value)
+    }, [
+      (a(), l(p, {
+        to: `#${e(I)(e(o)?.tabsIdentifier, t.name)}`
       }, [
-        n(r.$slots, "label", { scope: o.scopeProperties })
+        d(r.$slots, "label", { scope: e(s) })
       ], 8, ["to"])),
-      (e(), a(t, {
-        to: `#${o.getTabContentId(o.providedData?.tabsIdentifier, o.props.name)}`
+      (a(), l(p, {
+        to: `#${e(T)(e(o)?.tabsIdentifier, t.name)}`
       }, [
-        n(r.$slots, "default", { scope: o.scopeProperties })
+        d(r.$slots, "default", { scope: e(s) })
       ], 8, ["to"]))
-    ],
-    2
-    /* CLASS */
-  )) : p("v-if", !0);
-}
-const T = /* @__PURE__ */ c(i, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-tabs/components/nmorph-tab-pane/NmorphTabPane.vue"]]);
+    ], 2)) : B("", !0);
+  }
+});
 export {
-  T as default
+  y as default
 };

package/dist/components/navigation/nmorph-tabs/components/nmorph-tab-pane/NmorphTabPane.vue2.js

@@ -1,32 +1,4 @@
-import { defineComponent as p, computed as u, inject as d, ref as i, onMounted as l } from "vue";
-import { useModifiers as f } from "../../../../../utils/create-modifiers.js";
-import { getTabLabelId as m, getTabContentId as c } from "../../utils.js";
-const S = /* @__PURE__ */ p({
-  __name: "NmorphTabPane",
-  props: {
-    label: { type: String, required: !1, default: "" },
-    name: { type: String, required: !0 },
-    disabled: { type: Boolean, required: !1, default: !1 },
-    content: { type: String, required: !1, default: "" }
-  },
-  setup(o, { expose: n }) {
-    n();
-    const e = o, s = u(
-      () => f({
-        "nmorph-tab-pane": []
-      })
-    ), t = d("nmorph-tabs-data"), r = i(!1);
-    l(() => {
-      r.value = !0;
-    }), t.tabsData.value.push(e);
-    const a = { props: e, modifiers: s, providedData: t, isMounted: r, scopeProperties: e, get getTabContentId() {
-      return c;
-    }, get getTabLabelId() {
-      return m;
-    } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
-  }
-});
+import f from "./NmorphTabPane.vue.js";
 export {
-  S as default
+  f as default
 };

package/dist/components/others/nmorph-divider/NmorphDivider.vue.js

@@ -1,20 +1,22 @@
 import './NmorphDivider.css';
-import o from "./NmorphDivider.vue2.js";
-import { openBlock as e, createElementBlock as i, normalizeClass as t } from "vue";
-/* empty css                   */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-function n(s, p, c, r, l, a) {
-  return e(), i(
-    "div",
-    {
-      class: t(r.modifiers)
-    },
-    null,
-    2
-    /* CLASS */
-  );
-}
-const u = /* @__PURE__ */ m(o, [["render", n], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-divider/NmorphDivider.vue"]]);
+import { defineComponent as i, computed as t, openBlock as n, createElementBlock as s, normalizeClass as c } from "vue";
+import { useModifiers as m } from "../../../utils/create-modifiers.js";
+const u = /* @__PURE__ */ i({
+  __name: "NmorphDivider",
+  props: {
+    direction: { default: "horizontal" }
+  },
+  setup(e) {
+    const o = e, r = t(
+      () => m({
+        "nmorph-divider": [o.direction]
+      })
+    );
+    return (p, a) => (n(), s("div", {
+      class: c(r.value)
+    }, null, 2));
+  }
+});
 export {
   u as default
 };

package/dist/components/others/nmorph-divider/NmorphDivider.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphDivider.css';
+import o from "./NmorphDivider.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js

@@ -1,59 +1,108 @@
 import './NmorphOverlay.css';
-import a from "./NmorphOverlay.vue2.js";
-import { openBlock as t, createElementBlock as c, withModifiers as r, normalizeStyle as i, normalizeClass as s, createElementVNode as n, renderSlot as d, createBlock as p, Teleport as m } from "vue";
-/* empty css                   */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["tabindex"], y = ["tabindex"];
-function k(l, e, _, o, h, x) {
-  return o.renderInline ? (t(), c(
-    "div",
-    {
+import { defineComponent as T, computed as l, ref as g, watch as I, onBeforeUnmount as A, openBlock as k, createElementBlock as D, withModifiers as s, normalizeStyle as b, unref as h, normalizeClass as w, createElementVNode as a, renderSlot as E, createBlock as K, Teleport as L, nextTick as S } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { useZIndex as R } from "../../../hooks/use-z-index.js";
+const H = ["tabindex"], M = ["tabindex"], q = /* @__PURE__ */ T({
+  __name: "NmorphOverlay",
+  props: {
+    show: { type: Boolean },
+    transparent: { type: Boolean, default: !1 },
+    zIndex: { default: void 0 },
+    teleportTo: { default: "body" },
+    disabledTeleport: { type: Boolean, default: !1 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    trapFocus: { type: Boolean, default: !1 },
+    restoreFocus: { type: Boolean, default: !0 }
+  },
+  emits: ["on-outside-click", "on-escape-keydown"],
+  setup(x, { emit: B }) {
+    const t = x, i = R(
+      l(() => t.show),
+      () => t.zIndex
+    ), d = l(
+      () => O({
+        "nmorph-overlay": [t.show && "show", t.transparent && "transparent"]
+      })
+    ), _ = l(() => t.disabledTeleport || !t.show || typeof document > "u"), u = () => {
+      c("on-outside-click");
+    }, c = B, n = g(null);
+    let r = null;
+    const F = [
+      "a[href]",
+      "button:not([disabled])",
+      "textarea:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(","), f = () => n.value ? Array.from(n.value.querySelectorAll(F)).filter(
+      (e) => e.getAttribute("aria-hidden") !== "true"
+    ) : [], z = async () => {
+      if (!t.trapFocus) return;
+      await S(), (f()[0] || n.value)?.focus();
+    }, p = (e) => {
+      if (!t.show) return;
+      if (e.key === "Escape" && t.closeOnEscape) {
+        e.preventDefault(), c("on-escape-keydown");
+        return;
+      }
+      if (e.key !== "Tab" || !t.trapFocus) return;
+      const o = f();
+      if (!o.length) {
+        e.preventDefault(), n.value?.focus();
+        return;
+      }
+      const y = o[0], v = o[o.length - 1];
+      e.shiftKey && document.activeElement === y ? (e.preventDefault(), v.focus()) : !e.shiftKey && document.activeElement === v && (e.preventDefault(), y.focus());
+    }, C = () => {
+      typeof document > "u" || document.addEventListener("keydown", p);
+    }, m = () => {
+      typeof document > "u" || document.removeEventListener("keydown", p);
+    };
+    return I(
+      () => t.show,
+      (e) => {
+        typeof document > "u" || (e ? (r = document.activeElement, C(), z()) : (m(), t.restoreFocus && r?.focus?.(), r = null));
+      },
+      { immediate: !0, flush: "post" }
+    ), A(m), (e, o) => _.value ? (k(), D("div", {
       key: 0,
-      class: s(o.modifiers),
-      style: i({ "--nmorph-overlay-z-index": o.zIndex }),
-      onClick: r(o.clickHandler, ["stop"])
-    },
-    [
-      n("div", {
-        ref: "contentRef",
+      class: w(d.value),
+      style: b({ "--nmorph-overlay-z-index": h(i) }),
+      onClick: s(u, ["stop"])
+    }, [
+      a("div", {
+        ref_key: "contentRef",
+        ref: n,
         class: "nmorph-overlay__slot",
-        tabindex: o.props.trapFocus ? -1 : void 0,
-        onClick: e[0] || (e[0] = r(() => {
+        tabindex: t.trapFocus ? -1 : void 0,
+        onClick: o[0] || (o[0] = s(() => {
         }, ["stop"]))
       }, [
-        d(l.$slots, "default")
-      ], 8, v)
-    ],
-    6
-    /* CLASS, STYLE */
-  )) : (t(), p(m, {
-    key: 1,
-    to: o.props.teleportTo
-  }, [
-    n(
-      "div",
-      {
-        class: s(o.modifiers),
-        style: i({ "--nmorph-overlay-z-index": o.zIndex }),
-        onClick: r(o.clickHandler, ["stop"])
-      },
-      [
-        n("div", {
-          ref: "contentRef",
+        E(e.$slots, "default")
+      ], 8, H)
+    ], 6)) : (k(), K(L, {
+      key: 1,
+      to: t.teleportTo
+    }, [
+      a("div", {
+        class: w(d.value),
+        style: b({ "--nmorph-overlay-z-index": h(i) }),
+        onClick: s(u, ["stop"])
+      }, [
+        a("div", {
+          ref_key: "contentRef",
+          ref: n,
           class: "nmorph-overlay__slot",
-          tabindex: o.props.trapFocus ? -1 : void 0,
-          onClick: e[1] || (e[1] = r(() => {
+          tabindex: t.trapFocus ? -1 : void 0,
+          onClick: o[1] || (o[1] = s(() => {
           }, ["stop"]))
         }, [
-          d(l.$slots, "default")
-        ], 8, y)
-      ],
-      6
-      /* CLASS, STYLE */
-    )
-  ], 8, ["to"]));
-}
-const I = /* @__PURE__ */ f(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
+          E(e.$slots, "default")
+        ], 8, M)
+      ], 6)
+    ], 8, ["to"]));
+  }
+});
 export {
-  I as default
+  q as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphOverlay.css';
+import o from "./NmorphOverlay.vue.js";
+/* empty css                   */
+export {
+  o as default
+};