@nmorph/nmorph-ui-kit 2.2.39 → 2.2.41

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue.js

@@ -1,21 +1,26 @@
+import './NmorphTagList.css';
 import n from "./NmorphTagList.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeClass as a, Fragment as l, renderList as s, createBlock as m, mergeProps as i } from "vue";
-import c from "../../../_virtual/_plugin-vue_export-helper.js";
-function p(f, _, d, r, u, g) {
-  return e(), t(
+import { openBlock as e, createElementBlock as l, normalizeClass as t, Fragment as a, renderList as i, createBlock as c, mergeProps as m } from "vue";
+/* empty css                   */
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
+function p(d, f, _, r, g, k) {
+  return e(), l(
     "div",
     {
-      class: a(r.modifiers)
+      class: t(r.modifiers)
     },
     [
-      (e(!0), t(
-        l,
+      (e(!0), l(
+        a,
         null,
-        s(r.tagList, (o) => (e(), m(
+        i(r.resolvedTagList, (o) => (e(), c(
           r.NmorphTagItem,
-          i({
+          m({
             key: o.value
-          }, { ref_for: !0 }, o, { onClose: r.closeTagHandler }),
+          }, { ref_for: !0 }, o, {
+            onClick: r.clickTagHandler,
+            onClose: r.closeTagHandler
+          }),
           null,
           16
           /* FULL_PROPS */
@@ -28,7 +33,7 @@ function p(f, _, d, r, u, g) {
     /* CLASS */
   );
 }
-const T = /* @__PURE__ */ c(n, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
+const L = /* @__PURE__ */ s(n, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
 export {
-  T as default
+  L as default
 };

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue2.js

@@ -1,32 +1,44 @@
-import { defineComponent as p, computed as n, ref as d } from "vue";
-import { useModifiers as c } from "../../../utils/create-modifiers.js";
+import './NmorphTagList.css';
+import { defineComponent as p, computed as s, ref as m } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
 import f from "./components/nmorph-tag-item/NmorphTagItem.vue.js";
-const h = /* @__PURE__ */ p({
+const L = /* @__PURE__ */ p({
   __name: "NmorphTagList",
   props: {
-    modelValue: { type: Array, required: !0 }
+    modelValue: { type: Array, required: !0 },
+    selectedValue: { type: [String, null], required: !1 },
+    design: { type: String, required: !1, default: "nmorph" },
+    color: { type: String, required: !1 }
   },
-  emits: ["close", "update:model-value"],
-  setup(a, { expose: m, emit: l }) {
-    m();
-    const o = a, r = l, u = n(
-      () => c({
-        "nmorph-list": []
+  emits: ["click", "close", "update:model-value", "update:selected-value", "update:selectedValue"],
+  setup(a, { expose: i, emit: d }) {
+    i();
+    const l = a, t = d, u = s(
+      () => g({
+        "nmorph-list": [l.design]
       })
     );
-    let e = d(o.modelValue);
-    const s = { props: o, emit: r, modifiers: u, get tagList() {
-      return e;
-    }, set tagList(t) {
-      e = t;
-    }, closeTagHandler: (t) => {
-      e.value = e.value.filter((i) => i.value !== t), r("close", t), r("update:model-value", e.value);
+    let r = m(l.modelValue);
+    const n = s(
+      () => r.value.map((e) => ({
+        ...e,
+        design: e.design ?? l.design,
+        color: e.color ?? l.color
+      }))
+    ), o = { props: l, emit: t, modifiers: u, get tagList() {
+      return r;
+    }, set tagList(e) {
+      r = e;
+    }, resolvedTagList: n, closeTagHandler: (e) => {
+      r.value = r.value.filter((c) => c.value !== e), t("close", e), t("update:model-value", r.value);
+    }, clickTagHandler: (e) => {
+      t("click", e), t("update:selected-value", e), t("update:selectedValue", e);
     }, get NmorphTagItem() {
       return f;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
   }
 });
 export {
-  h as default
+  L as default
 };

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.css

@@ -1 +1 @@
-.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);border:solid 2px var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px;cursor:pointer}.nmorph-tag-item.nmorph-tag-item--nmorph-design{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}
+.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);color:var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item span{color:inherit}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px;cursor:pointer;--color: currentColor}.nmorph-tag-item.nmorph-tag-item--nmorph{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--common{color:var(--tag-item-content-color);background:var(--tag-item-background-color);border:none;box-shadow:none}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js

@@ -1,42 +1,45 @@
 import './NmorphTagItem.css';
 import n from "./NmorphTagItem.vue2.js";
-import { openBlock as e, createElementBlock as m, normalizeClass as a, createElementVNode as t, toDisplayString as c, createBlock as i, withModifiers as s, withCtx as l, createVNode as p, createCommentVNode as _ } from "vue";
+import { openBlock as e, createElementBlock as a, normalizeStyle as c, normalizeClass as i, createElementVNode as t, toDisplayString as m, createBlock as l, withModifiers as s, withCtx as p, createVNode as d, createCommentVNode as _ } from "vue";
 /* empty css                   */
-import d from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const f = { class: "nmorph-tag-item__content" };
-function h(g, N, r, o, k, v) {
-  return e(), m(
+import f from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const h = { class: "nmorph-tag-item__content" };
+function g(k, N, r, o, y, v) {
+  return e(), a(
     "div",
     {
-      class: a(o.modifiers)
+      ref: "tagRef",
+      class: i(o.modifiers),
+      style: c(o.styles),
+      onClick: o.clickHandler
     },
     [
-      t("div", f, [
+      t("div", h, [
         t(
           "span",
           null,
-          c(r.text),
+          m(r.text),
           1
           /* TEXT */
         ),
-        o.props.removable ? (e(), i(o.NmorphIcon, {
+        o.props.removable ? (e(), l(o.NmorphIcon, {
           key: 0,
           class: "nmorph-tag-item__close-icon",
           onClick: s(o.closeHandler, ["stop"])
         }, {
-          default: l(() => [
-            p(o.NmorphIconError)
+          default: p(() => [
+            d(o.NmorphIconError)
           ]),
           _: 1
           /* STABLE */
         })) : _("v-if", !0)
       ])
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const b = /* @__PURE__ */ d(n, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue"]]);
+const B = /* @__PURE__ */ f(n, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue"]]);
 export {
-  b as default
+  B as default
 };

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue2.js

@@ -1,36 +1,99 @@
 import './NmorphTagItem.css';
-import { defineComponent as i, computed as s } from "vue";
-import { useModifiers as u } from "../../../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as a } from "../../../../../types/common.types.js";
-import l from "../../../../../assets/icons/error.svg.js";
-import d from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-const N = /* @__PURE__ */ i({
+import { defineComponent as x, ref as S, computed as h, onMounted as E, onBeforeUnmount as H, watch as B, nextTick as F } from "vue";
+import { useModifiers as P } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as U } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as $ } from "../../../../../types/common.types.js";
+import z from "../../../../../assets/icons/error.svg.js";
+import G from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+const w = "var(--nmorph-gray-color)", b = "var(--nmorph-black-color)", I = "var(--nmorph-white-color)", X = /* @__PURE__ */ x({
   __name: "NmorphTagItem",
   props: {
     value: { type: String, required: !0 },
     text: { type: String, required: !0 },
     removable: { type: Boolean, required: !1, default: !0 },
     height: { type: null, required: !1, default: "basic" },
-    design: { type: String, required: !1, default: "nmorph" }
+    design: { type: String, required: !1, default: "nmorph" },
+    color: { type: String, required: !1, default: w }
   },
-  emits: ["close"],
-  setup(o, { expose: n, emit: m }) {
-    n();
-    const e = o, p = s(
-      () => u({
-        nmorph: [a[e.height]],
-        "nmorph-tag-item": [`${e.design === "nmorph" ? "nmorph-design" : ""}`]
+  emits: ["click", "close"],
+  setup(L, { expose: T, emit: D }) {
+    T();
+    const C = { r: 201, g: 210, b: 222 }, s = L, i = S(null), p = S(b);
+    let u = null;
+    const V = h(
+      () => P({
+        nmorph: [$[s.height]],
+        "nmorph-tag-item": [s.design]
       })
-    ), r = m, t = { props: e, modifiers: p, emit: r, closeHandler: () => {
-      r("close", e.value);
-    }, get NmorphIcon() {
-      return d;
+    ), d = h(() => s.design === "common"), A = h(() => d.value ? U({
+      "--tag-item-background-color": s.color,
+      "--tag-item-content-color": p.value
+    }) : {}), g = D, M = () => {
+      g("close", s.value);
+    }, q = () => {
+      g("click", s.value);
+    }, v = (r) => {
+      const t = r.trim().replace("#", "");
+      if (![3, 4, 6, 8].includes(t.length)) return null;
+      const e = t.length <= 4 ? t.split("").map((o) => `${o}${o}`).join("") : t;
+      return {
+        r: parseInt(e.slice(0, 2), 16),
+        g: parseInt(e.slice(2, 4), 16),
+        b: parseInt(e.slice(4, 6), 16)
+      };
+    }, _ = (r) => {
+      const t = r.match(/^rgba?\((.+)\)$/);
+      if (!t) return null;
+      const e = t[1].split("/")[0], o = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = o.map((l) => Number.parseFloat(l));
+      return [n, a, c].some((l) => Number.isNaN(l)) ? null : { r: n, g: a, b: c };
+    }, O = (r, t) => {
+      const e = r.trim().match(/^var\(\s*(--[A-Za-z0-9-_]+)(?:\s*,\s*(.+))?\)$/);
+      if (!e) return r;
+      const [, o, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(o).trim(), l = getComputedStyle(a.documentElement).getPropertyValue(o).trim();
+      return c || l || n || r;
+    }, y = (r, t) => {
+      let e = r;
+      for (let o = 0; o < 4; o += 1) {
+        const n = O(e, t);
+        if (n === e) break;
+        e = n;
+      }
+      return v(e) || _(e) || C;
+    }, N = ({ r, g: t, b: e }) => {
+      const [o, n, a] = [r, t, e].map((c) => {
+        const l = c / 255;
+        return l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4;
+      });
+      return 0.2126 * o + 0.7152 * n + 0.0722 * a;
+    }, f = (r, t) => {
+      const [e, o] = [r, t].sort((n, a) => a - n);
+      return (e + 0.05) / (o + 0.05);
+    }, R = (r) => {
+      const t = N(r), e = f(t, 1), o = f(t, 0);
+      return e > o ? I : b;
+    }, m = async () => {
+      await F(), !(!d.value || !i.value) && (p.value = R(y(s.color, i.value)));
+    };
+    E(() => {
+      m(), !(typeof MutationObserver > "u" || !i.value) && (u = new MutationObserver(() => m()), u.observe(i.value.ownerDocument.documentElement, {
+        attributes: !0,
+        attributeFilter: ["nmorph-data-theme", "class", "style"]
+      }));
+    }), H(() => {
+      u?.disconnect();
+    }), B(() => [s.color, s.design], m, { flush: "post" });
+    const k = { DEFAULT_COMMON_BACKGROUND_COLOR: w, DARK_CONTRAST_COLOR: b, LIGHT_CONTRAST_COLOR: I, DEFAULT_RGB_COLOR: C, props: s, tagRef: i, commonContentColor: p, get themeObserver() {
+      return u;
+    }, set themeObserver(r) {
+      u = r;
+    }, modifiers: V, isCommonDesign: d, styles: A, emit: g, closeHandler: M, clickHandler: q, parseHexColor: v, parseRgbColor: _, resolveCssVariable: O, resolveColor: y, getLuminance: N, getContrastRatio: f, getReadableContentColor: R, updateCommonContentColor: m, get NmorphIcon() {
+      return G;
     }, get NmorphIconError() {
-      return l;
+      return z;
     } };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  N as default
+  X as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.css

@@ -1 +1 @@
-.nmorph-text-input{--prepend-icon-indent: 8px;--prepend-icon-size: 14px;display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--prepend-icon-size);min-width:var(--prepend-icon-size);height:var(--prepend-icon-size);min-height:var(--prepend-icon-size);margin-left:var(--prepend-icon-indent);pointer-events:none}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-text-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-text-color)}.nmorph-text-input input{width:100%;height:var(--height);text-indent:var(--nmorph-text-input-indentation);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon svg{fill:var(--nmorph-focus-text-color)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon path{stroke:var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn .nmorph-button__content{padding:var(--indentation-03)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--height: var(--thin-component)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}
+.nmorph-text-input{--prepend-icon-indent: 8px;--prepend-icon-size: 14px;--nmorph-text-input-prepend-icon-color: var(--nmorph-placeholder-text-color);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--prepend-icon-size);min-width:var(--prepend-icon-size);height:var(--prepend-icon-size);min-height:var(--prepend-icon-size);margin-left:var(--prepend-icon-indent);color:var(--nmorph-text-input-prepend-icon-color);pointer-events:none}.nmorph-text-input__prepend-icon .nmorph-icon{--color: var(--nmorph-text-input-prepend-icon-color)}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-text-input-prepend-icon-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-text-input-prepend-icon-color)}.nmorph-text-input input{width:100%;height:var(--height);text-indent:var(--nmorph-text-input-indentation);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused{--nmorph-text-input-prepend-icon-color: var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn .nmorph-button__content{padding:var(--indentation-03)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--height: var(--thin-component)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}

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

@@ -1,24 +1,29 @@
 import './NmorphContextMenu.css';
 import s from "./NmorphContextMenu.vue2.js";
-import { openBlock as o, createElementBlock as l, renderSlot as i, 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 x, mergeProps as k, createCommentVNode as w } from "vue";
+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 C = {
+const v = {
   key: 0,
   class: "nmorph-context-menu__options"
-}, v = ["disabled", "onClick"], O = { class: "nmorph-context-menu__item-label" }, g = ["tabindex", "aria-disabled", "onClick", "onKeydown"];
-function H(a, u, z, e, E, S) {
-  return o(), l(
+}, 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",
       class: "nmorph-context-menu",
       onClick: e.clickHandler,
       onContextmenu: e.contextMenuHandler,
-      onKeydown: e.keydownHandler
+      onKeydown: e.keydownHandler,
+      onPointerdown: e.pointerDownHandler,
+      onPointermove: e.pointerMoveHandler,
+      onPointerup: e.pointerEndHandler,
+      onPointercancel: e.pointerEndHandler,
+      onPointerleave: e.pointerEndHandler
     },
     [
-      i(a.$slots, "default"),
+      a(i.$slots, "default"),
       e.relativeElement ? (o(), d(e.NmorphDropdown, {
         key: 0,
         open: e.isOpen,
@@ -41,50 +46,50 @@ function H(a, u, z, e, E, S) {
         onOnEscapeKeydown: e.escapeHandler
       }, {
         default: p(() => [
-          e.hasOptions ? (o(), l("div", C, [
-            (o(!0), l(
+          e.hasOptions ? (o(), r("div", v, [
+            (o(!0), r(
               c,
               null,
-              h(e.normalizedOptions, (n, r) => (o(), l(
+              h(e.normalizedOptions, (n, l) => (o(), r(
                 c,
                 {
                   key: n.key
                 },
                 [
-                  n.component ? (o(), l("div", {
+                  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, r),
-                    onKeydown: (t) => e.optionKeydownHandler(t, n, r)
+                    onClick: (t) => e.optionClickHandler(n, l),
+                    onKeydown: (t) => e.optionKeydownHandler(t, n, l)
                   }, [
                     (o(), d(
-                      x(n.component),
-                      k({ ref_for: !0 }, n.componentProps),
+                      w(n.component),
+                      x({ ref_for: !0 }, n.componentProps),
                       null,
                       16
                       /* FULL_PROPS */
                     ))
-                  ], 46, g)) : (o(), l("button", {
+                  ], 46, O)) : (o(), r("button", {
                     key: 0,
                     type: "button",
                     class: "nmorph-context-menu__item",
                     role: "menuitem",
                     disabled: n.disabled,
                     style: m(e.getOptionStyle(n)),
-                    onClick: (t) => e.optionClickHandler(n, r)
+                    onClick: (t) => e.optionClickHandler(n, l)
                   }, [
                     f(
                       "span",
-                      O,
+                      H,
                       _(n.label),
                       1
                       /* TEXT */
                     )
-                  ], 12, v))
+                  ], 12, C))
                 ],
                 64
                 /* STABLE_FRAGMENT */
@@ -92,20 +97,20 @@ function H(a, u, z, e, E, S) {
               128
               /* KEYED_FRAGMENT */
             ))
-          ])) : i(a.$slots, "menu", {
+          ])) : a(i.$slots, "menu", {
             key: 1,
             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", "hide-shadow"])) : w("v-if", !0)
+      }, 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", H], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue"]]);
+const B = /* @__PURE__ */ b(s, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue"]]);
 export {
   B as default
 };

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

@@ -1,7 +1,7 @@
 import './NmorphContextMenu.css';
-import { defineComponent as L, ref as i, computed as y, markRaw as M, toRaw as D, watch as k, onBeforeUnmount as V } from "vue";
-import P from "../nmorph-dropdown/NmorphDropdown.vue.js";
-const $ = /* @__PURE__ */ L({
+import { defineComponent as J, ref as n, computed as m, markRaw as U, toRaw as Q, watch as H, onBeforeUnmount as Z } from "vue";
+import ee from "../nmorph-dropdown/NmorphDropdown.vue.js";
+const M = 600, _ = 8, re = /* @__PURE__ */ J({
   __name: "NmorphContextMenu",
   props: {
     modelValue: { type: [Boolean, null], required: !1, default: null },
@@ -24,8 +24,8 @@ const $ = /* @__PURE__ */ L({
     hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["update:model-value", "open", "close", "select", "on-outside-click", "on-escape-keydown"],
-  setup(q, { expose: O, emit: v }) {
-    const l = q, r = v, d = i(null), c = i(null), o = i("point"), a = i(!!l.modelValue), f = y(() => typeof l.modelValue == "boolean" ? l.modelValue : a.value), S = y(() => l.options.length > 0), B = y(
+  setup(B, { expose: D, emit: R }) {
+    const l = B, o = R, g = n(null), S = n(null), y = n("point"), b = n(!!l.modelValue), a = n(null), c = n(null), u = n(null), v = n(!1), d = n(null), w = m(() => typeof l.modelValue == "boolean" ? l.modelValue : b.value), I = m(() => l.options.length > 0), q = m(() => l.trigger === "longpress"), T = m(() => l.trigger === "contextmenu" || l.trigger === "both"), X = m(
       () => l.options.map((e, t) => typeof e == "string" || typeof e == "number" ? {
         key: `${e}-${t}`,
         label: e,
@@ -37,7 +37,7 @@ const $ = /* @__PURE__ */ L({
         key: `${String(e.value ?? e.label ?? t)}-${t}`,
         label: e.label,
         value: e.value ?? e.label ?? t,
-        component: e.component ? M(D(e.component)) : void 0,
+        component: e.component ? U(Q(e.component)) : void 0,
         componentProps: e.componentProps,
         disabled: !!e.disabled,
         color: e.color,
@@ -45,13 +45,13 @@ const $ = /* @__PURE__ */ L({
         raw: e
       })
     );
-    k(
+    H(
       () => l.modelValue,
       (e) => {
-        typeof e == "boolean" && (a.value = e);
+        typeof e == "boolean" && (b.value = e);
       }
     );
-    const g = (e, t) => ({
+    const x = (e, t) => ({
       clientWidth: 0,
       getBoundingClientRect: () => ({
         x: e,
@@ -64,51 +64,86 @@ const $ = /* @__PURE__ */ L({
         bottom: t,
         toJSON: () => ({})
       })
-    }), u = (e) => {
-      const t = f.value;
-      a.value = e, r("update:model-value", e), t && !e && r("close");
-    }, n = () => {
-      u(!1);
-    }, b = (e, t, m) => {
-      o.value = "point", c.value = g(e, t), u(!0), r("open", m);
-    }, p = (e, t) => {
-      o.value = "element", c.value = e, u(!0), r("open", t);
+    }), h = (e) => {
+      const t = w.value;
+      b.value = e, o("update:model-value", e), t && !e && o("close");
+    }, i = () => {
+      h(!1);
+    }, f = (e, t, r) => {
+      l.disabled || (y.value = "point", S.value = x(e, t), h(!0), o("open", r));
+    }, k = (e, t) => {
+      l.disabled || (y.value = "element", S.value = e, h(!0), o("open", t));
+    }, Y = (e) => {
+      if (!l.disabled) {
+        if (l.trigger === "longpress") {
+          e.preventDefault();
+          return;
+        }
+        T.value && (e.preventDefault(), f(e.clientX, e.clientY, e));
+      }
     }, C = (e) => {
-      l.disabled || l.trigger !== "contextmenu" && l.trigger !== "both" || (e.preventDefault(), b(e.clientX, e.clientY, e));
+      const t = g.value;
+      if (!t) return !1;
+      if (e.target instanceof Node && t.contains(e.target)) return !0;
+      const r = t.getBoundingClientRect();
+      return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
     }, E = (e) => {
+      !w.value || l.disabled || !T.value || C(e) && (e.preventDefault(), e.stopPropagation(), f(e.clientX, e.clientY, e));
+    }, V = (e) => {
+      if (v.value) {
+        p(), e.preventDefault();
+        return;
+      }
       if (l.disabled || l.trigger !== "click" && l.trigger !== "both" || e.button !== 0) return;
-      const t = e.currentTarget instanceof HTMLElement ? e.currentTarget : d.value;
-      t && p(t, e);
-    }, H = (e) => {
-      if (l.disabled || e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10")) return;
-      const t = e.target instanceof HTMLElement ? e.target : d.value;
-      t && (e.preventDefault(), p(t, e));
-    }, _ = () => {
-      r("on-outside-click"), n();
-    }, N = () => {
-      r("on-escape-keydown"), n();
-    }, w = (e, t) => {
-      e.disabled || (r("select", e.raw, t), e.closeOnClick && n());
-    }, x = (e, t, m) => {
-      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), w(t, m));
-    }, T = (e) => ({
+      const t = e.currentTarget instanceof HTMLElement ? e.currentTarget : g.value;
+      t && k(t, e);
+    }, A = (e) => {
+      if (l.disabled || l.trigger === "manual" || e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10"))
+        return;
+      const t = e.target instanceof HTMLElement ? e.target : g.value;
+      t && (e.preventDefault(), k(t, e));
+    }, W = () => {
+      o("on-outside-click"), i();
+    }, $ = () => {
+      o("on-escape-keydown"), i();
+    }, N = (e, t) => {
+      e.disabled || (o("select", e.raw, t), e.closeOnClick && i());
+    }, z = (e, t, r) => {
+      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), N(t, r));
+    }, s = () => {
+      a.value && clearTimeout(a.value), a.value = null, c.value = null, u.value = null;
+    }, p = () => {
+      d.value && clearTimeout(d.value), v.value = !1, d.value = null;
+    }, L = () => {
+      p(), v.value = !0, d.value = setTimeout(p, 700);
+    }, F = (e) => {
+      l.disabled || !q.value || e.pointerType !== "touch" && e.pointerType !== "pen" || (s(), c.value = e.pointerId, u.value = { x: e.clientX, y: e.clientY }, a.value = setTimeout(() => {
+        L(), s(), f(e.clientX, e.clientY, e);
+      }, M));
+    }, G = (e) => {
+      if (!a.value || c.value !== e.pointerId || !u.value) return;
+      const t = Math.abs(e.clientX - u.value.x), r = Math.abs(e.clientY - u.value.y);
+      (t > _ || r > _) && s();
+    }, K = (e) => {
+      c.value === e.pointerId && s();
+    }, j = (e) => ({
       "--nmorph-context-menu-item-color": e.color
-    }), s = () => {
-      l.closeOnScroll && o.value === "point" && n();
+    }), O = () => {
+      l.closeOnScroll && y.value === "point" && i();
     };
-    k(
-      f,
+    H(
+      w,
       (e) => {
-        typeof window > "u" || (e ? window.addEventListener("scroll", s, { passive: !0, capture: !0 }) : window.removeEventListener("scroll", s, !0));
+        typeof window > "u" || (e ? (window.addEventListener("scroll", O, { passive: !0, capture: !0 }), document.addEventListener("contextmenu", E, !0)) : (window.removeEventListener("scroll", O, !0), document.removeEventListener("contextmenu", E, !0)));
       },
       { immediate: !0 }
-    ), V(() => {
-      typeof window < "u" && window.removeEventListener("scroll", s, !0);
-    }), O({ close: n });
-    const h = { props: l, emit: r, triggerDOMRef: d, relativeElement: c, anchorType: o, openState: a, isOpen: f, hasOptions: S, normalizedOptions: B, createPointElement: g, setOpen: u, close: n, openAt: b, openAtElement: p, contextMenuHandler: C, clickHandler: E, keydownHandler: H, outsideClickHandler: _, escapeHandler: N, optionClickHandler: w, optionKeydownHandler: x, getOptionStyle: T, scrollHandler: s, NmorphDropdown: P };
-    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
+    ), Z(() => {
+      typeof window < "u" && window.removeEventListener("scroll", O, !0), typeof document < "u" && document.removeEventListener("contextmenu", E, !0), s(), p();
+    }), D({ close: i, openAt: f, openAtElement: k });
+    const P = { LONG_PRESS_DELAY_IN_MS: M, LONG_PRESS_MOVE_TOLERANCE_IN_PX: _, props: l, emit: o, triggerDOMRef: g, relativeElement: S, anchorType: y, openState: b, longPressTimer: a, longPressPointerId: c, longPressStartPoint: u, suppressNextClick: v, suppressNextClickTimer: d, isOpen: w, hasOptions: I, isLongPressTrigger: q, isContextMenuTrigger: T, normalizedOptions: X, createPointElement: x, setOpen: h, close: i, openAt: f, openAtElement: k, contextMenuHandler: Y, isEventInsideTrigger: C, documentContextMenuHandler: E, clickHandler: V, keydownHandler: A, outsideClickHandler: W, escapeHandler: $, optionClickHandler: N, optionKeydownHandler: z, clearLongPressTimer: s, clearClickSuppression: p, suppressNextClickTemporarily: L, pointerDownHandler: F, pointerMoveHandler: G, pointerEndHandler: K, getOptionStyle: j, scrollHandler: O, NmorphDropdown: ee };
+    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
   }
 });
 export {
-  $ as default
+  re as default
 };