@nmorph/nmorph-ui-kit 2.2.15 → 2.2.17

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-switch/NmorphSwitch.vue.js

@@ -1,44 +1,45 @@
 import './NmorphSwitch.css';
 import l from "./NmorphSwitch.vue2.js";
-import { openBlock as r, createElementBlock as t, normalizeClass as a, createElementVNode as e, renderSlot as i, createBlock as c, withCtx as d, createVNode as s } from "vue";
+import { openBlock as r, createElementBlock as t, normalizeClass as a, createElementVNode as n, renderSlot as i, createBlock as c, withCtx as d, createVNode as s } from "vue";
 /* empty css                  */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-const h = ["id", "name", "value", "disabled", "tabindex"], f = { class: "nmorph-switch-thumb" };
-function b(n, p, _, o, k, u) {
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = ["id", "name", "value", "checked", "disabled", "tabindex"], f = { class: "nmorph-switch-thumb" };
+function p(e, b, _, o, k, u) {
   return r(), t(
     "div",
     {
       class: a(o.modifiers)
     },
     [
-      e("div", {
+      n("div", {
         class: "nmorph-switch__content",
         onClick: o.changeHandler
       }, [
-        e("input", {
+        n("input", {
           id: o.id,
           ref: "inputDOMRef",
           name: o.name,
           type: "checkbox",
-          value: o.initialValue,
+          value: o.props.activeValue,
+          checked: o.initialValue,
           disabled: o.props.disabled,
           tabindex: o.tabindex,
           class: "nmorph-native-input",
           onFocus: o.focusHandler,
           onBlur: o.blurHandler
-        }, null, 40, h),
-        e(
+        }, null, 40, m),
+        n(
           "div",
           {
             class: a(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": o.initialValue }])
           },
           [
-            o.initialValue ? i(n.$slots, "bg-on", { key: 0 }) : i(n.$slots, "bg-off", { key: 1 })
+            o.initialValue ? i(e.$slots, "bg-on", { key: 0 }) : i(e.$slots, "bg-off", { key: 1 })
           ],
           2
           /* CLASS */
         ),
-        e("div", f, [
+        n("div", f, [
           o.props.loading ? (r(), c(o.NmorphIcon, {
             key: 0,
             width: "14px",
@@ -49,7 +50,7 @@ function b(n, p, _, o, k, u) {
             ]),
             _: 1
             /* STABLE */
-          })) : o.initialValue ? i(n.$slots, "thumb-on", { key: 1 }) : i(n.$slots, "thumb-off", { key: 2 })
+          })) : o.initialValue ? i(e.$slots, "thumb-on", { key: 1 }) : i(e.$slots, "thumb-off", { key: 2 })
         ])
       ])
     ],
@@ -57,7 +58,7 @@ function b(n, p, _, o, k, u) {
     /* CLASS */
   );
 }
-const x = /* @__PURE__ */ m(l, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
+const V = /* @__PURE__ */ h(l, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
 export {
-  x as default
+  V 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,51 @@
+import './NmorphContextMenu.css';
+import l from "./NmorphContextMenu.vue2.js";
+import { openBlock as n, createElementBlock as t, renderSlot as r, createBlock as i, withCtx as a, createCommentVNode as c } from "vue";
+/* empty css                       */
+import d from "../../../_virtual/_plugin-vue_export-helper.js";
+function m(o, p, f, e, s, h) {
+  return n(), t(
+    "div",
+    {
+      ref: "triggerDOMRef",
+      class: "nmorph-context-menu",
+      onClick: e.clickHandler,
+      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__ */ d(l, [["render", m], ["__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,72 @@
+import './NmorphContextMenu.css';
+import { defineComponent as N, ref as d, computed as O, watch as w } from "vue";
+import x from "../nmorph-dropdown/NmorphDropdown.vue.js";
+const H = /* @__PURE__ */ N({
+  __name: "NmorphContextMenu",
+  props: {
+    modelValue: { type: [Boolean, null], required: !1, default: null },
+    trigger: { type: String, required: !1, default: "contextmenu" },
+    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(g, { expose: y, emit: b }) {
+    const t = g, o = b, s = d(null), f = d(null), n = d(!!t.modelValue), c = O(() => typeof t.modelValue == "boolean" ? t.modelValue : n.value);
+    w(
+      () => t.modelValue,
+      (e) => {
+        typeof e == "boolean" && (n.value = e);
+      }
+    );
+    const p = (e, l) => ({
+      clientWidth: 0,
+      getBoundingClientRect: () => ({
+        x: e,
+        y: l,
+        width: 0,
+        height: 0,
+        top: l,
+        left: e,
+        right: e,
+        bottom: l,
+        toJSON: () => ({})
+      })
+    }), u = (e) => {
+      const l = c.value;
+      n.value = e, o("update:model-value", e), l && !e && o("close");
+    }, a = () => {
+      u(!1);
+    }, i = (e, l, r) => {
+      f.value = p(e, l), u(!0), o("open", r);
+    }, h = (e) => {
+      t.disabled || t.trigger !== "contextmenu" && t.trigger !== "both" || (e.preventDefault(), i(e.clientX, e.clientY, e));
+    }, q = (e) => {
+      t.disabled || t.trigger !== "click" && t.trigger !== "both" || e.button !== 0 || i(e.clientX, e.clientY, e);
+    }, k = (e) => {
+      if (t.disabled || e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10")) return;
+      const r = (e.target instanceof HTMLElement ? e.target : s.value)?.getBoundingClientRect();
+      r && (e.preventDefault(), i(r.left, r.bottom, e));
+    }, S = () => {
+      o("on-outside-click"), a();
+    }, _ = () => {
+      o("on-escape-keydown"), a();
+    };
+    y({ close: a });
+    const m = { props: t, emit: o, triggerDOMRef: s, relativeElement: f, openState: n, isOpen: c, createPointElement: p, setOpen: u, close: a, openAt: i, contextMenuHandler: h, clickHandler: q, keydownHandler: k, outsideClickHandler: S, escapeHandler: _, NmorphDropdown: x };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+});
+export {
+  H 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}