@nmorph/nmorph-ui-kit 2.2.41 → 2.2.43

package/dist/components/navigation/nmorph-breadcrumb/NmorphBreadcrumb.vue3.js

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

package/dist/components/navigation/nmorph-breadcrumb/components/nmorph-breadcrumb-item/NmorphBreadcrumbItem.vue.js

@@ -1,36 +1,44 @@
-import n from "./NmorphBreadcrumbItem.vue2.js";
-import { resolveComponent as a, openBlock as o, createElementBlock as c, normalizeClass as l, createBlock as i, Teleport as d, createVNode as s, withCtx as p, renderSlot as b, createCommentVNode as f } from "vue";
-import u from "../../../../../_virtual/_plugin-vue_export-helper.js";
-function _(t, h, r, e, k, v) {
-  const m = a("router-link");
-  return e.isMounted && e.itemId ? (o(), c(
-    "div",
-    {
-      key: 0,
-      class: l(e.modifiers)
-    },
-    [
-      (o(), i(d, {
-        to: `#nmorph-breadcrumb-${e.breadcrumbData?.breadcrumbId}-${e.itemId}-element`
+import { defineComponent as s, computed as d, inject as i, ref as p, onMounted as f, resolveComponent as b, unref as r, openBlock as n, createElementBlock as h, normalizeClass as k, createBlock as v, Teleport as B, createVNode as C, withCtx as _, renderSlot as I, createCommentVNode as M } from "vue";
+import { useModifiers as N } from "../../../../../utils/create-modifiers.js";
+import { generateUUID as $ } from "../../../../../utils/common.js";
+const U = /* @__PURE__ */ s({
+  __name: "NmorphBreadcrumbItem",
+  props: {
+    to: { default: "" },
+    replace: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const c = e, l = d(
+      () => N({
+        "nmorph-breadcrumb-item": []
+      })
+    ), o = i("breadcrumb-data"), a = p(!1), t = $();
+    return f(() => {
+      a.value = !0;
+    }), o.breadcrumbs.value.push({ ...c, itemId: t }), (m, g) => {
+      const u = b("router-link");
+      return a.value && r(t) ? (n(), h("div", {
+        key: 0,
+        class: k(l.value)
       }, [
-        s(m, {
-          to: r.to,
-          replace: r.replace,
-          class: "fill-height"
-        }, {
-          default: p(() => [
-            b(t.$slots, "default")
-          ]),
-          _: 3
-          /* FORWARDED */
-        }, 8, ["to", "replace"])
-      ], 8, ["to"]))
-    ],
-    2
-    /* CLASS */
-  )) : f("v-if", !0);
-}
-const N = /* @__PURE__ */ u(n, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-breadcrumb/components/nmorph-breadcrumb-item/NmorphBreadcrumbItem.vue"]]);
+        (n(), v(B, {
+          to: `#nmorph-breadcrumb-${r(o)?.breadcrumbId}-${r(t)}-element`
+        }, [
+          C(u, {
+            to: e.to,
+            replace: e.replace,
+            class: "fill-height"
+          }, {
+            default: _(() => [
+              I(m.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["to", "replace"])
+        ], 8, ["to"]))
+      ], 2)) : M("", !0);
+    };
+  }
+});
 export {
-  N as default
+  U as default
 };

package/dist/components/navigation/nmorph-breadcrumb/components/nmorph-breadcrumb-item/NmorphBreadcrumbItem.vue2.js

@@ -1,26 +1,4 @@
-import { defineComponent as m, computed as p, inject as d, ref as c, onMounted as i } from "vue";
-import { useModifiers as f } from "../../../../../utils/create-modifiers.js";
-import { generateUUID as l } from "../../../../../utils/common.js";
-const j = /* @__PURE__ */ m({
-  __name: "NmorphBreadcrumbItem",
-  props: {
-    to: { type: [String, Object], required: !1, default: "" },
-    replace: { type: Boolean, required: !1, default: !1 }
-  },
-  setup(s, { expose: u }) {
-    u();
-    const e = s, n = p(
-      () => f({
-        "nmorph-breadcrumb-item": []
-      })
-    ), r = d("breadcrumb-data"), t = c(!1), o = l();
-    i(() => {
-      t.value = !0;
-    }), r.breadcrumbs.value.push({ ...e, itemId: o });
-    const a = { props: e, modifiers: n, breadcrumbData: r, isMounted: t, itemId: o };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
-  }
-});
+import f from "./NmorphBreadcrumbItem.vue.js";
 export {
-  j as default
+  f as default
 };

package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.css

@@ -1 +1 @@
-.nmorph-context-menu{display:inline-block;max-width:100%}.nmorph-context-menu__dropdown{text-align:left}.nmorph-context-menu__options{display:grid;gap:4px;padding:4px}.nmorph-context-menu__item{display:flex;gap:var(--indentation-02);justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;min-width:120px;padding:var(--indentation-02) var(--indentation-04);color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));font:inherit;line-height:var(--line-height-regular);text-align:left;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-context-menu__item-label{color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));text-align:left}.nmorph-context-menu__item:not(:disabled,.nmorph-context-menu__item--disabled):hover{background:color-mix(in srgb,var(--nmorph-context-menu-item-color, var(--nmorph-text-color)) 12%,transparent)}.nmorph-context-menu__item:disabled,.nmorph-context-menu__item--disabled{cursor:default;opacity:.56;pointer-events:none}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content{justify-content:flex-start;text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content span{text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-button-hover-color, var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))) 12%,transparent)}
+.nmorph-context-menu{display:inline-block;max-width:100%}.nmorph-context-menu__dropdown{text-align:left}.nmorph-context-menu__dropdown--bottom-sheet{position:fixed!important;inset:auto var(--indentation-03) var(--indentation-03) var(--indentation-03)!important;width:auto!important;max-width:none!important;border-radius:var(--default-border-radius) var(--default-border-radius) 0 0}.nmorph-context-menu__options{display:grid;gap:4px;padding:4px}.nmorph-context-menu__item{display:flex;gap:var(--indentation-02);justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;min-width:120px;padding:var(--indentation-02) var(--indentation-04);color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));font:inherit;line-height:var(--line-height-regular);text-align:left;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-context-menu__item-icon,.nmorph-context-menu__item-shortcut{flex:0 0 auto}.nmorph-context-menu__item-copy{display:grid;flex:1 1 auto;min-width:0}.nmorph-context-menu__item-label{color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));text-align:left}.nmorph-context-menu__item-description,.nmorph-context-menu__item-shortcut{color:var(--nmorph-semi-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-context-menu__divider{height:1px;margin:2px var(--indentation-02);background:color-mix(in srgb,var(--nmorph-text-color) 16%,transparent)}.nmorph-context-menu__section{padding:var(--indentation-02) var(--indentation-04) var(--indentation-01);color:var(--nmorph-semi-contrast-text-color);font-weight:600;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);text-transform:uppercase}.nmorph-context-menu__item:not(:disabled,.nmorph-context-menu__item--disabled):hover{background:color-mix(in srgb,var(--nmorph-context-menu-item-color, var(--nmorph-text-color)) 12%,transparent)}.nmorph-context-menu__item:disabled,.nmorph-context-menu__item--disabled{cursor:default;opacity:.56;pointer-events:none}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content{justify-content:flex-start;text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content span{text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-button-hover-color, var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))) 12%,transparent)}

package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.js

@@ -1,116 +1,274 @@
 import './NmorphContextMenu.css';
-import s from "./NmorphContextMenu.vue2.js";
-import { openBlock as o, createElementBlock as r, renderSlot as a, createBlock as d, withCtx as p, Fragment as c, renderList as h, normalizeStyle as m, createElementVNode as f, toDisplayString as _, normalizeClass as y, resolveDynamicComponent as w, mergeProps as x, createCommentVNode as k } from "vue";
-/* empty css                       */
-import b from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = {
+import { defineComponent as de, ref as s, computed as c, markRaw as R, toRaw as I, watch as V, onBeforeUnmount as me, openBlock as o, createElementBlock as r, renderSlot as v, createBlock as w, withCtx as X, Fragment as Y, renderList as fe, normalizeStyle as z, unref as pe, resolveDynamicComponent as W, mergeProps as K, createCommentVNode as k, createElementVNode as A, toDisplayString as x, normalizeClass as he } from "vue";
+import ye from "../nmorph-dropdown/NmorphDropdown.vue.js";
+/* empty css                                     */
+import _e from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+const ge = {
   key: 0,
   class: "nmorph-context-menu__options"
-}, C = ["disabled", "onClick"], H = { class: "nmorph-context-menu__item-label" }, O = ["tabindex", "aria-disabled", "onClick", "onKeydown"];
-function E(i, g, P, e, z, S) {
-  return o(), r(
-    "div",
-    {
-      ref: "triggerDOMRef",
+}, be = ["disabled", "onClick"], ve = { class: "nmorph-context-menu__item-copy" }, we = { class: "nmorph-context-menu__item-label" }, ke = {
+  key: 0,
+  class: "nmorph-context-menu__item-description"
+}, xe = {
+  key: 1,
+  class: "nmorph-context-menu__item-shortcut"
+}, Ce = ["tabindex", "aria-disabled", "onClick", "onKeydown"], Oe = {
+  key: 2,
+  class: "nmorph-context-menu__divider",
+  role: "separator"
+}, Ee = {
+  key: 3,
+  class: "nmorph-context-menu__section",
+  role: "presentation"
+}, Pe = 600, F = 8, De = /* @__PURE__ */ de({
+  __name: "NmorphContextMenu",
+  props: {
+    modelValue: { type: [Boolean, null], default: null },
+    options: { default: () => [] },
+    trigger: { default: "contextmenu" },
+    placement: { default: "bottom-start" },
+    width: { default: "max-content" },
+    minWidth: { default: void 0 },
+    maxWidth: { default: void 0 },
+    xOffset: { default: 0 },
+    yOffset: { default: 0 },
+    fillWidth: { type: Boolean, default: !1 },
+    zIndex: { default: void 0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    trapFocus: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    closeOnScroll: { type: Boolean, default: !0 },
+    role: { default: "menu" },
+    ariaLabel: { default: "" },
+    hideShadow: { type: Boolean, default: !1 },
+    mobileMode: { default: "dropdown" }
+  },
+  emits: ["update:model-value", "open", "close", "select", "on-outside-click", "on-escape-keydown"],
+  setup(G, { expose: j, emit: J }) {
+    const n = G, a = J, f = s(null), p = s(null), C = s("point"), O = s(!!n.modelValue), u = s(null), h = s(null), d = s(null), E = s(!1), y = s(null), _ = c(() => typeof n.modelValue == "boolean" ? n.modelValue : O.value), U = c(() => n.options.length > 0), q = c(() => n.trigger === "longpress"), N = c(() => n.trigger === "contextmenu" || n.trigger === "both"), Q = c(
+      () => n.options.map((e, l) => typeof e == "string" || typeof e == "number" ? {
+        key: `${e}-${l}`,
+        type: "item",
+        label: e,
+        value: e,
+        disabled: !1,
+        closeOnClick: !0,
+        raw: e
+      } : {
+        key: `${String(e.value ?? e.label ?? l)}-${l}`,
+        type: e.type ?? "item",
+        label: e.label,
+        value: e.value ?? e.label ?? l,
+        icon: e.icon ? R(I(e.icon)) : void 0,
+        iconProps: e.iconProps,
+        shortcut: e.shortcut,
+        description: e.description,
+        component: e.component ? R(I(e.component)) : void 0,
+        componentProps: e.componentProps,
+        disabled: !!e.disabled,
+        color: e.color,
+        closeOnClick: e.closeOnClick ?? !0,
+        raw: e
+      })
+    ), Z = c(
+      () => [
+        "nmorph-context-menu__dropdown",
+        n.mobileMode === "bottom-sheet" && "nmorph-context-menu__dropdown--bottom-sheet"
+      ].filter(Boolean).join(" ")
+    );
+    V(
+      () => n.modelValue,
+      (e) => {
+        typeof e == "boolean" && (O.value = e);
+      }
+    );
+    const ee = (e, l) => ({
+      clientWidth: 0,
+      getBoundingClientRect: () => ({
+        x: e,
+        y: l,
+        width: 0,
+        height: 0,
+        top: l,
+        left: e,
+        right: e,
+        bottom: l,
+        toJSON: () => ({})
+      })
+    }), P = (e) => {
+      const l = _.value;
+      O.value = e, a("update:model-value", e), l && !e && a("close");
+    }, i = () => {
+      P(!1);
+    }, g = (e, l, t) => {
+      n.disabled || (C.value = "point", p.value = ee(e, l), P(!0), a("open", t));
+    }, T = (e, l) => {
+      n.disabled || (C.value = "element", p.value = e, P(!0), a("open", l));
+    }, te = (e) => {
+      if (!n.disabled) {
+        if (n.trigger === "longpress") {
+          e.preventDefault();
+          return;
+        }
+        N.value && (e.preventDefault(), g(e.clientX, e.clientY, e));
+      }
+    }, ne = (e) => {
+      const l = f.value;
+      if (!l) return !1;
+      if (e.target instanceof Node && l.contains(e.target)) return !0;
+      const t = l.getBoundingClientRect();
+      return e.clientX >= t.left && e.clientX <= t.right && e.clientY >= t.top && e.clientY <= t.bottom;
+    }, S = (e) => {
+      !_.value || n.disabled || !N.value || ne(e) && (e.preventDefault(), e.stopPropagation(), g(e.clientX, e.clientY, e));
+    }, le = (e) => {
+      if (E.value) {
+        b(), e.preventDefault();
+        return;
+      }
+      if (n.disabled || n.trigger !== "click" && n.trigger !== "both" || e.button !== 0) return;
+      const l = e.currentTarget instanceof HTMLElement ? e.currentTarget : f.value;
+      l && T(l, e);
+    }, oe = (e) => {
+      if (n.disabled || n.trigger === "manual" || e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10"))
+        return;
+      const l = e.target instanceof HTMLElement ? e.target : f.value;
+      l && (e.preventDefault(), T(l, e));
+    }, re = () => {
+      a("on-outside-click"), i();
+    }, se = () => {
+      a("on-escape-keydown"), i();
+    }, L = (e, l) => {
+      e.disabled || (a("select", e.raw, l), e.closeOnClick && i());
+    }, ae = (e, l, t) => {
+      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), L(l, t));
+    }, m = () => {
+      u.value && clearTimeout(u.value), u.value = null, h.value = null, d.value = null;
+    }, b = () => {
+      y.value && clearTimeout(y.value), E.value = !1, y.value = null;
+    }, ie = () => {
+      b(), E.value = !0, y.value = setTimeout(b, 700);
+    }, ce = (e) => {
+      n.disabled || !q.value || e.pointerType !== "touch" && e.pointerType !== "pen" || (m(), h.value = e.pointerId, d.value = { x: e.clientX, y: e.clientY }, u.value = setTimeout(() => {
+        ie(), m(), g(e.clientX, e.clientY, e);
+      }, Pe));
+    }, ue = (e) => {
+      if (!u.value || h.value !== e.pointerId || !d.value) return;
+      const l = Math.abs(e.clientX - d.value.x), t = Math.abs(e.clientY - d.value.y);
+      (l > F || t > F) && m();
+    }, B = (e) => {
+      h.value === e.pointerId && m();
+    }, $ = (e) => ({
+      "--nmorph-context-menu-item-color": e.color
+    }), M = () => {
+      n.closeOnScroll && C.value === "point" && i();
+    };
+    return V(
+      _,
+      (e) => {
+        typeof window > "u" || (e ? (window.addEventListener("scroll", M, { passive: !0, capture: !0 }), document.addEventListener("contextmenu", S, !0)) : (window.removeEventListener("scroll", M, !0), document.removeEventListener("contextmenu", S, !0)));
+      },
+      { immediate: !0 }
+    ), me(() => {
+      typeof window < "u" && window.removeEventListener("scroll", M, !0), typeof document < "u" && document.removeEventListener("contextmenu", S, !0), m(), b();
+    }), j({ close: i, openAt: g, openAtElement: T }), (e, l) => (o(), r("div", {
+      ref_key: "triggerDOMRef",
+      ref: f,
       class: "nmorph-context-menu",
-      onClick: e.clickHandler,
-      onContextmenu: e.contextMenuHandler,
-      onKeydown: e.keydownHandler,
-      onPointerdown: e.pointerDownHandler,
-      onPointermove: e.pointerMoveHandler,
-      onPointerup: e.pointerEndHandler,
-      onPointercancel: e.pointerEndHandler,
-      onPointerleave: e.pointerEndHandler
-    },
-    [
-      a(i.$slots, "default"),
-      e.relativeElement ? (o(), d(e.NmorphDropdown, {
+      onClick: le,
+      onContextmenu: te,
+      onKeydown: oe,
+      onPointerdown: ce,
+      onPointermove: ue,
+      onPointerup: B,
+      onPointercancel: B,
+      onPointerleave: B
+    }, [
+      v(e.$slots, "default"),
+      p.value ? (o(), w(ye, {
         key: 0,
-        open: e.isOpen,
-        "relative-element": e.relativeElement,
-        placement: e.props.placement,
-        width: e.props.width,
-        "min-width": e.props.minWidth,
-        "max-width": e.props.maxWidth,
-        "x-offset": e.props.xOffset,
-        "y-offset": e.props.yOffset,
-        "fill-width": e.props.fillWidth,
-        "z-index": e.props.zIndex,
-        "close-on-escape": e.props.closeOnEscape,
-        "trap-focus": e.props.trapFocus,
-        role: e.props.role,
-        "aria-label": e.props.ariaLabel,
-        "hide-shadow": e.props.hideShadow,
-        "content-class": "nmorph-context-menu__dropdown",
-        onOnOutsideClick: e.outsideClickHandler,
-        onOnEscapeKeydown: e.escapeHandler
+        open: _.value,
+        "relative-element": p.value,
+        placement: n.placement,
+        width: n.width,
+        "min-width": n.minWidth,
+        "max-width": n.maxWidth,
+        "x-offset": n.xOffset,
+        "y-offset": n.yOffset,
+        "fill-width": n.fillWidth,
+        "z-index": n.zIndex,
+        "close-on-escape": n.closeOnEscape,
+        "trap-focus": n.trapFocus,
+        role: n.role,
+        "aria-label": n.ariaLabel,
+        "hide-shadow": n.hideShadow,
+        "content-class": Z.value,
+        onOnOutsideClick: re,
+        onOnEscapeKeydown: se
       }, {
-        default: p(() => [
-          e.hasOptions ? (o(), r("div", v, [
-            (o(!0), r(
-              c,
-              null,
-              h(e.normalizedOptions, (n, l) => (o(), r(
-                c,
-                {
-                  key: n.key
-                },
-                [
-                  n.component ? (o(), r("div", {
-                    key: 1,
-                    class: y(["nmorph-context-menu__item", { "nmorph-context-menu__item--disabled": n.disabled }]),
-                    role: "menuitem",
-                    tabindex: n.disabled ? -1 : 0,
-                    "aria-disabled": n.disabled,
-                    style: m(e.getOptionStyle(n)),
-                    onClick: (t) => e.optionClickHandler(n, l),
-                    onKeydown: (t) => e.optionKeydownHandler(t, n, l)
-                  }, [
-                    (o(), d(
-                      w(n.component),
-                      x({ ref_for: !0 }, n.componentProps),
-                      null,
-                      16
-                      /* FULL_PROPS */
-                    ))
-                  ], 46, O)) : (o(), r("button", {
+        default: X(() => [
+          U.value ? (o(), r("div", ge, [
+            (o(!0), r(Y, null, fe(Q.value, (t, D) => (o(), r(Y, {
+              key: t.key
+            }, [
+              t.type === "item" && !t.component ? (o(), r("button", {
+                key: 0,
+                type: "button",
+                class: "nmorph-context-menu__item",
+                role: "menuitem",
+                disabled: t.disabled,
+                style: z($(t)),
+                onClick: (H) => L(t, D)
+              }, [
+                v(e.$slots, "item", {
+                  option: t,
+                  active: !1,
+                  disabled: t.disabled
+                }, () => [
+                  t.icon ? (o(), w(pe(_e), {
                     key: 0,
-                    type: "button",
-                    class: "nmorph-context-menu__item",
-                    role: "menuitem",
-                    disabled: n.disabled,
-                    style: m(e.getOptionStyle(n)),
-                    onClick: (t) => e.optionClickHandler(n, l)
-                  }, [
-                    f(
-                      "span",
-                      H,
-                      _(n.label),
-                      1
-                      /* TEXT */
-                    )
-                  ], 12, C))
-                ],
-                64
-                /* STABLE_FRAGMENT */
-              ))),
-              128
-              /* KEYED_FRAGMENT */
-            ))
-          ])) : a(i.$slots, "menu", {
+                    class: "nmorph-context-menu__item-icon"
+                  }, {
+                    default: X(() => [
+                      (o(), w(W(t.icon), K({ ref_for: !0 }, t.iconProps), null, 16))
+                    ]),
+                    _: 2
+                  }, 1024)) : k("", !0),
+                  A("span", ve, [
+                    A("span", we, x(t.label), 1),
+                    t.description ? (o(), r("span", ke, x(t.description), 1)) : k("", !0)
+                  ]),
+                  t.shortcut ? (o(), r("span", xe, x(t.shortcut), 1)) : k("", !0)
+                ])
+              ], 12, be)) : t.type === "item" ? (o(), r("div", {
+                key: 1,
+                class: he(["nmorph-context-menu__item", { "nmorph-context-menu__item--disabled": t.disabled }]),
+                role: "menuitem",
+                tabindex: t.disabled ? -1 : 0,
+                "aria-disabled": t.disabled,
+                style: z($(t)),
+                onClick: (H) => L(t, D),
+                onKeydown: (H) => ae(H, t, D)
+              }, [
+                v(e.$slots, "item", {
+                  option: t,
+                  active: !1,
+                  disabled: t.disabled
+                }, () => [
+                  (o(), w(W(t.component), K({ ref_for: !0 }, t.componentProps), null, 16))
+                ])
+              ], 46, Ce)) : t.type === "divider" ? (o(), r("div", Oe)) : (o(), r("div", Ee, x(t.label), 1))
+            ], 64))), 128))
+          ])) : v(e.$slots, "menu", {
             key: 1,
-            close: e.close
+            close: i
           })
         ]),
         _: 3
-        /* FORWARDED */
-      }, 8, ["open", "relative-element", "placement", "width", "min-width", "max-width", "x-offset", "y-offset", "fill-width", "z-index", "close-on-escape", "trap-focus", "role", "aria-label", "hide-shadow"])) : k("v-if", !0)
-    ],
-    544
-    /* NEED_HYDRATION, NEED_PATCH */
-  );
-}
-const B = /* @__PURE__ */ b(s, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue"]]);
+      }, 8, ["open", "relative-element", "placement", "width", "min-width", "max-width", "x-offset", "y-offset", "fill-width", "z-index", "close-on-escape", "trap-focus", "role", "aria-label", "hide-shadow", "content-class"])) : k("", !0)
+    ], 544));
+  }
+});
 export {
-  B as default
+  De as default
 };

package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue3.js

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

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
 };