@nmorph/nmorph-ui-kit 2.2.15 → 2.2.16

package/dist/components/form/nmorph-select/NmorphSelect.vue2.js

@@ -1,17 +1,17 @@
 import './NmorphSelect.css';
-import { defineComponent as le, computed as a, ref as s, watch as f, nextTick as E, onMounted as ae, onUnmounted as re, provide as L } from "vue";
-import { NmorphComponentHeight as ne } from "../../../types/index.js";
-import { useModifiers as ue } from "../../../utils/create-modifiers.js";
-import { useI18n as oe } from "vue-i18n";
-import { useFormItemInput as ie } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as se } from "../../../hooks/use-virtual-list.js";
-import de from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import ve from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import ce from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import fe from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import pe from "../../../assets/icons/chevron-down.svg.js";
-import me from "../../../assets/icons/loader.svg.js";
-const _e = /* @__PURE__ */ le({
+import { defineComponent as ne, computed as a, ref as d, watch as f, nextTick as L, onMounted as ue, onUnmounted as oe, provide as R } from "vue";
+import { NmorphComponentHeight as ie } from "../../../types/index.js";
+import { useModifiers as se } from "../../../utils/create-modifiers.js";
+import { useI18n as de } from "vue-i18n";
+import { useFormItemInput as ve } from "../nmorph-form/use-form-item-input.js";
+import { useVirtualList as ce } from "../../../hooks/use-virtual-list.js";
+import fe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import pe from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import me from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import he from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import ge from "../../../assets/icons/chevron-down.svg.js";
+import ye from "../../../assets/icons/loader.svg.js";
+const Ce = /* @__PURE__ */ ne({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -28,6 +28,7 @@ const _e = /* @__PURE__ */ le({
     virtualItemHeight: { type: Number, required: !1, default: 0 },
     virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
     virtualOverscan: { type: Number, required: !1, default: 5 },
+    virtualDynamicHeight: { type: Boolean, required: !1, default: !1 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -36,39 +37,39 @@ const _e = /* @__PURE__ */ le({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(V, { expose: B, emit: T }) {
-    B();
-    const { t: O } = oe(), l = V, S = a(
-      () => l.noElementPlaceholder ? l.noElementPlaceholder : O("noElementPlaceholder")
-    ), m = T, t = s(l.modelValue), r = s(l.open), d = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = s(!0), { id: C, name: P, autocomplete: k, tabindex: R } = ie(l), y = (e) => {
-      if (!d.value) {
+  setup(T, { expose: C, emit: P }) {
+    C();
+    const { t: M } = de(), l = T, $ = a(
+      () => l.noElementPlaceholder ? l.noElementPlaceholder : M("noElementPlaceholder")
+    ), m = P, t = d(l.modelValue), r = d(l.open), v = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = ve(l), H = (e) => {
+      if (!v.value) {
         if (r.value = !1, typeof t.value == "string" && (!l.valueRequired && t.value === e ? t.value = "" : t.value = e, m("update:model-value", t.value)), Array.isArray(t.value)) {
-          const n = t.value.includes(e), ee = t.value.length === 1 && n;
-          if (l.valueRequired && ee) return;
-          n ? t.value = t.value.filter((te) => te !== e) : t.value = [...t.value, e];
+          const n = t.value.includes(e), S = t.value.length === 1 && n;
+          if (l.valueRequired && S) return;
+          n ? t.value = t.value.filter((re) => re !== e) : t.value = [...t.value, e];
         }
         m("update:model-value", t.value);
       }
-    }, p = s(!1), W = () => {
+    }, p = d(!1), z = () => {
       p.value = !0;
-    }, U = () => {
+    }, F = () => {
       p.value = !1;
-    }, z = a(
-      () => ue({
-        nmorph: [ne[l.height]],
+    }, j = a(
+      () => se({
+        nmorph: [ie[l.height]],
         "nmorph-select": [
           `${l.disabled && "disabled"}`,
           `${l.modelValue ? "on" : "off"}`,
           `${l.loading && "loading"}`,
-          `${r.value && !d.value && "open"}`,
+          `${r.value && !v.value && "open"}`,
           `${l.fill && "fill"}`,
           `${h.value && "options-auto-width"}`,
           `${g.value ? "selected-line-outset" : "selected-line-inset"}`,
           `${p.value && "focus"}`
         ]
       })
-    ), F = () => {
-      d.value || (r.value = !r.value);
+    ), Y = () => {
+      v.value || (r.value = !r.value);
     };
     f(
       r,
@@ -86,25 +87,26 @@ const _e = /* @__PURE__ */ le({
         e && (r.value = !1);
       }
     );
-    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), q = s(null), H = s([]), x = a(() => l.options), c = a(() => l.virtual && x.value.length > 0), M = a(() => ({
+    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), q = d(null), x = d([]), I = a(() => l.options), c = a(() => l.virtual && I.value.length > 0), w = a(() => ({
       basic: 30,
       thick: 38,
       thin: 22
-    })[l.height || "basic"]), w = a(() => l.virtualItemHeight || M.value), A = a(() => l.virtualOverscan), v = se(x, {
+    })[l.height || "basic"]), D = a(() => l.virtualItemHeight || w.value), A = a(() => l.virtualOverscan), E = a(() => l.virtualDynamicHeight), s = ce(I, {
       enabled: c,
-      itemHeight: w,
-      overscan: A
-    }), j = a(() => v.virtualItems.value), Y = a(() => ({
-      height: `${v.totalHeight.value}px`
-    })), G = a(() => ({
-      transform: `translateY(${v.offsetTop.value}px)`
-    })), $ = (e) => typeof e == "number" ? `${e}px` : e, J = a(() => $(l.virtualMaxHeight)), I = () => {
-      i.value.length > 0 || !q.value || (H.value = Array.from(q.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
+      itemHeight: D,
+      overscan: A,
+      dynamic: E
+    }), G = a(() => s.virtualItems.value), J = a(() => ({
+      height: `${s.totalHeight.value}px`
+    })), K = a(() => ({
+      transform: `translateY(${s.offsetTop.value}px)`
+    })), V = (e) => typeof e == "number" ? `${e}px` : e, Q = a(() => V(l.virtualMaxHeight)), O = () => {
+      i.value.length > 0 || !q.value || (x.value = Array.from(q.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
     }, o = a(
-      () => i.value.length > 0 ? i.value.map((e) => e.value) : H.value
-    ), K = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = s(0), N = a(() => o.value[u.value] || "");
+      () => i.value.length > 0 ? i.value.map((e) => e.value) : x.value
+    ), X = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = d(0), N = a(() => o.value[u.value] || ""), Z = a(() => `${y.value}-listbox`), ee = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
     f(u, (e) => {
-      r.value && c.value && v.scrollToIndex(e);
+      r.value && c.value && s.scrollToIndex(e);
     }), f(
       o,
       (e) => {
@@ -113,45 +115,54 @@ const _e = /* @__PURE__ */ le({
       { immediate: !0 }
     ), f(r, async (e) => {
       if (e) {
-        if (await E(), I(), typeof t.value == "string") {
+        if (await L(), O(), typeof t.value == "string") {
           const n = o.value.indexOf(t.value);
           n !== -1 && (u.value = n);
         }
-        v.refresh(), c.value && v.scrollToIndex(u.value);
+        s.refresh(), c.value && s.scrollToIndex(u.value);
       }
-    }), ae(async () => {
-      await E(), I(), document.addEventListener("click", b);
-    }), re(() => {
+    }), ue(async () => {
+      await L(), O(), document.addEventListener("click", b);
+    }), oe(() => {
       document.removeEventListener("click", b);
     });
-    const Q = a(() => typeof t.value == "string" ? t.value === "" ? S.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), X = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
-    L("select-selected-value", t), L("select-change-selected-value", y);
-    const D = s(null), Z = a(
-      () => h.value ? `${D.value?.clientWidth || 0}px` : void 0
-    ), _ = { t: O, props: l, computedNoElementPlaceholder: S, emit: m, initialValue: t, open: r, disabledInput: d, autoOptionsWidth: h, selectedLineOutset: g, id: C, name: P, autocomplete: k, tabindex: R, changeHandler: y, focus: p, focusHandler: W, blurHandler: U, modifiers: z, clickHandler: F, closeHandler: b, optionsMap: i, optionsDOMRef: q, slotDomOptions: H, renderedOptions: x, virtualEnabled: c, defaultOptionHeight: M, virtualItemHeight: w, virtualOverscan: A, virtualList: v, virtualOptions: j, virtualSpacerStyle: Y, virtualContentStyle: G, getCssSize: $, virtualMaxHeight: J, refreshDomOptions: I, domOptions: o, nativeOptions: K, currentIndex: u, currentFocusedEl: N, selectedValueTitle: Q, tags: X, nmorphSelectDOMRef: D, optionsMinWidth: Z, spaceHandler: () => {
-      d.value || (r.value = !r.value);
+    const te = a(() => typeof t.value == "string" ? t.value === "" ? $.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), le = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
+    R("select-selected-value", t), R("select-change-selected-value", H);
+    const _ = d(null), ae = a(
+      () => h.value ? `${_.value?.clientWidth || 0}px` : void 0
+    ), B = { t: M, props: l, computedNoElementPlaceholder: $, emit: m, initialValue: t, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: k, autocomplete: W, tabindex: U, changeHandler: H, focus: p, focusHandler: z, blurHandler: F, modifiers: j, clickHandler: Y, closeHandler: b, optionsMap: i, optionsDOMRef: q, slotDomOptions: x, renderedOptions: I, virtualEnabled: c, defaultOptionHeight: w, virtualItemHeight: D, virtualOverscan: A, virtualDynamicHeight: E, virtualList: s, virtualOptions: G, virtualSpacerStyle: J, virtualContentStyle: K, getCssSize: V, virtualMaxHeight: Q, refreshDomOptions: O, domOptions: o, nativeOptions: X, currentIndex: u, currentFocusedEl: N, listboxId: Z, getOptionId: ee, selectedValueTitle: te, tags: le, nmorphSelectDOMRef: _, optionsMinWidth: ae, spaceHandler: () => {
+      v.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
-      d.value || o.value.length !== 0 && (u.value = (u.value + 1) % o.value.length);
+      v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
     }, arrowUpHandler: () => {
-      d.value || o.value.length !== 0 && (u.value = (u.value - 1 + o.value.length) % o.value.length);
+      v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value - 1 + o.value.length) % o.value.length);
     }, enterHandler: () => {
-      r.value && N.value && y(N.value);
+      r.value && N.value && H(N.value);
+    }, setVirtualOptionRef: (e, n) => {
+      const S = e instanceof Element ? e : e?.$el;
+      s.measureElement(n, S);
+    }, escapeHandler: () => {
+      r.value = !1;
+    }, homeHandler: () => {
+      u.value = 0;
+    }, endHandler: () => {
+      u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return fe;
+      return he;
     }, get NmorphIcon() {
-      return ce;
+      return me;
     }, get NmorphSelectOption() {
-      return ve;
+      return pe;
     }, get NmorphDropdown() {
-      return de;
+      return fe;
     }, get NmorphIconLoader() {
-      return me;
+      return ye;
     }, get NmorphIconChevronDown() {
-      return pe;
+      return ge;
     } };
-    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
+    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
   }
 });
 export {
-  _e as default
+  Ce as default
 };

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.js

@@ -1,38 +1,41 @@
 import './NmorphSelectOption.css';
-import c from "./NmorphSelectOption.vue2.js";
-import { openBlock as o, createElementBlock as n, normalizeClass as l, createElementVNode as r, toDisplayString as s, renderSlot as i, createBlock as a, withCtx as m, createVNode as p, createCommentVNode as d } from "vue";
+import t from "./NmorphSelectOption.vue2.js";
+import { openBlock as o, createElementBlock as l, normalizeClass as n, createElementVNode as r, toDisplayString as a, renderSlot as i, createBlock as s, withCtx as d, createVNode as p, createCommentVNode as m } from "vue";
 /* empty css                        */
 import _ from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const h = ["value"], f = { class: "nmorph-select-option__content" };
-function k(t, u, v, e, N, S) {
-  return o(), n("div", {
-    class: l(e.modifiers),
+const h = ["value", "aria-selected", "aria-disabled"], f = { class: "nmorph-select-option__content" };
+function k(c, v, N, e, b, u) {
+  return o(), l("div", {
+    class: n(e.modifiers),
     value: e.props.value,
+    role: "option",
+    "aria-selected": e.checked,
+    "aria-disabled": e.props.disabled,
     onClick: e.clickHandler
   }, [
     r("div", f, [
       r(
         "span",
         null,
-        s(e.props.label),
+        a(e.props.label),
         1
         /* TEXT */
       ),
-      i(t.$slots, "default")
+      i(c.$slots, "default")
     ]),
-    e.checked ? (o(), a(e.NmorphIcon, {
+    e.checked ? (o(), s(e.NmorphIcon, {
       key: 0,
       class: "nmorph-select-option__checked"
     }, {
-      default: m(() => [
+      default: d(() => [
         p(e.NmorphIconSuccess)
       ]),
       _: 1
       /* STABLE */
-    })) : d("v-if", !0)
+    })) : m("v-if", !0)
   ], 10, h);
 }
-const B = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
+const B = /* @__PURE__ */ _(t, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
 export {
   B as default
 };

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

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

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

@@ -1,13 +1,13 @@
-import { defineComponent as E, useSlots as O, computed as n, ref as l } from "vue";
-import { NmorphComponentHeight as $ } from "../../../types/index.js";
-import { useModifiers as j } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as k } from "../nmorph-form/use-form-item-input.js";
+import { defineComponent as C, useSlots as E, computed as n, ref as l } from "vue";
+import { NmorphComponentHeight as O } from "../../../types/index.js";
+import { useModifiers as $ } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
 import F from "../../../assets/icons/eye-blocked.svg.js";
 import H from "../../../assets/icons/eye.svg.js";
 import M from "../../basic/nmorph-button/NmorphButton.vue.js";
 import A from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import D from "../../../assets/icons/error.svg.js";
-const U = /* @__PURE__ */ E({
+const U = /* @__PURE__ */ C({
   __name: "NmorphTextInput",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -23,24 +23,24 @@ const U = /* @__PURE__ */ E({
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
-  emits: ["update:model-value", "focus", "blur", "on-enter"],
+  emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
   setup(f, { expose: m, emit: h }) {
-    const s = O(), e = f, { id: y, name: b, autocomplete: v, tabindex: g } = k(e), q = n(
-      () => j({
-        nmorph: [$[e.height], `${a.value && "focused"}`],
+    const s = E(), e = f, { id: y, name: b, autocomplete: v, tabindex: g } = j(e), q = n(
+      () => $({
+        nmorph: [O[e.height], `${a.value && "focused"}`],
         "nmorph-text-input": [
           `${e.typePassword && "password"}`,
           `${(e.typePassword || e.clearable) && "with-action"}`
         ]
       })
-    ), x = (P) => {
-      const C = P.target;
-      r("update:model-value", C.value);
-    }, t = l(!1), I = () => {
+    ), w = (P) => {
+      const k = P.target;
+      r("update:model-value", k.value);
+    }, t = l(!1), x = () => {
       e.clearable ? r("update:model-value", "") : t.value = !t.value;
-    }, N = n(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = l(!1), _ = () => {
+    }, I = n(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = l(!1), N = () => {
       r("focus"), a.value = !0;
-    }, w = () => {
+    }, _ = () => {
       r("blur"), a.value = !1;
     }, o = l(null), u = () => {
       o.value?.focus();
@@ -50,7 +50,7 @@ const U = /* @__PURE__ */ E({
       o.value?.select();
     };
     m({ inputDOMRef: o, focus: u, blur: p, select: i });
-    const r = h, S = n(() => e.clearable ? D : t.value ? F : H), d = n(() => e.indentation || (s["prepend-icon"] ? "28px" : "8px")), B = n(() => ({ "--nmorph-text-input-indentation": d.value })), c = { slots: s, props: e, id: y, name: b, autocomplete: v, tabindex: g, modifiers: q, handleInput: x, showPassword: t, actionButtonClickHandler: I, type: N, focused: a, handleFocus: _, handleBlur: w, inputDOMRef: o, focus: u, blur: p, select: i, emit: r, actionIcon: S, indentation: d, styles: B, get NmorphIcon() {
+    const r = h, S = n(() => e.clearable ? D : t.value ? F : H), d = n(() => e.indentation || (s["prepend-icon"] ? "28px" : "8px")), B = n(() => ({ "--nmorph-text-input-indentation": d.value })), c = { slots: s, props: e, id: y, name: b, autocomplete: v, tabindex: g, modifiers: q, handleInput: w, showPassword: t, actionButtonClickHandler: x, type: I, focused: a, handleFocus: N, handleBlur: _, inputDOMRef: o, focus: u, blur: p, select: i, emit: r, actionIcon: S, indentation: d, styles: B, get NmorphIcon() {
       return A;
     }, get NmorphButton() {
       return M;

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

@@ -0,0 +1 @@
+.nmorph-context-menu{display:inline-block;max-width:100%}

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

@@ -0,0 +1,50 @@
+import './NmorphContextMenu.css';
+import t from "./NmorphContextMenu.vue2.js";
+import { openBlock as n, createElementBlock as l, renderSlot as r, createBlock as i, withCtx as a, createCommentVNode as c } from "vue";
+/* empty css                       */
+import p from "../../../_virtual/_plugin-vue_export-helper.js";
+function d(o, m, f, e, s, h) {
+  return n(), l(
+    "div",
+    {
+      ref: "triggerDOMRef",
+      class: "nmorph-context-menu",
+      onContextmenu: e.contextMenuHandler,
+      onKeydown: e.keydownHandler
+    },
+    [
+      r(o.$slots, "default"),
+      e.relativeElement ? (n(), i(e.NmorphDropdown, {
+        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,
+        onOnOutsideClick: e.outsideClickHandler,
+        onOnEscapeKeydown: e.escapeHandler
+      }, {
+        default: a(() => [
+          r(o.$slots, "menu", { close: e.close })
+        ]),
+        _: 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"])) : c("v-if", !0)
+    ],
+    544
+    /* NEED_HYDRATION, NEED_PATCH */
+  );
+}
+const v = /* @__PURE__ */ p(t, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue"]]);
+export {
+  v as default
+};

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

@@ -0,0 +1,69 @@
+import './NmorphContextMenu.css';
+import { defineComponent as O, ref as i, computed as S, watch as k } from "vue";
+import w from "../nmorph-dropdown/NmorphDropdown.vue.js";
+const C = /* @__PURE__ */ O({
+  __name: "NmorphContextMenu",
+  props: {
+    modelValue: { type: Boolean, required: !1 },
+    placement: { type: null, required: !1, default: "bottom-start" },
+    width: { type: [Number, String], required: !1, default: 160 },
+    minWidth: { type: [Number, String], required: !1, default: void 0 },
+    maxWidth: { type: [Number, String], required: !1, default: void 0 },
+    xOffset: { type: Number, required: !1, default: 0 },
+    yOffset: { type: Number, required: !1, default: 0 },
+    fillWidth: { type: Boolean, required: !1, default: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    trapFocus: { type: Boolean, required: !1, default: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    role: { type: String, required: !1, default: "menu" },
+    ariaLabel: { type: String, required: !1, default: "" }
+  },
+  emits: ["update:model-value", "open", "close", "on-outside-click", "on-escape-keydown"],
+  setup(y, { expose: b, emit: g }) {
+    const l = y, o = g, s = i(null), f = i(null), n = i(!!l.modelValue), p = S(() => typeof l.modelValue == "boolean" ? l.modelValue : n.value);
+    k(
+      () => l.modelValue,
+      (e) => {
+        typeof e == "boolean" && (n.value = e);
+      }
+    );
+    const c = (e, t) => ({
+      clientWidth: 0,
+      getBoundingClientRect: () => ({
+        x: e,
+        y: t,
+        width: 0,
+        height: 0,
+        top: t,
+        left: e,
+        right: e,
+        bottom: t,
+        toJSON: () => ({})
+      })
+    }), u = (e) => {
+      const t = p.value;
+      n.value = e, o("update:model-value", e), t && !e && o("close");
+    }, r = () => {
+      u(!1);
+    }, d = (e, t, a) => {
+      f.value = c(e, t), u(!0), o("open", a);
+    }, q = (e) => {
+      l.disabled || (e.preventDefault(), d(e.clientX, e.clientY, e));
+    }, h = (e) => {
+      if (l.disabled || e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10")) return;
+      const a = (e.target instanceof HTMLElement ? e.target : s.value)?.getBoundingClientRect();
+      a && (e.preventDefault(), d(a.left, a.bottom, e));
+    }, _ = () => {
+      o("on-outside-click"), r();
+    }, N = () => {
+      o("on-escape-keydown"), r();
+    };
+    b({ close: r });
+    const m = { props: l, emit: o, triggerDOMRef: s, relativeElement: f, openState: n, isOpen: p, createPointElement: c, setOpen: u, close: r, openAt: d, contextMenuHandler: q, keydownHandler: h, outsideClickHandler: _, escapeHandler: N, NmorphDropdown: w };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+});
+export {
+  C as default
+};

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.css

@@ -1 +1 @@
-.nmorph-dropdown{position:fixed;width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}
+.nmorph-dropdown{position:fixed;width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}

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

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