@nmorph/nmorph-ui-kit 2.2.17 → 2.2.19

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

@@ -1 +1 @@
-.nmorph-context-menu{display:inline-block;max-width:100%}
+.nmorph-context-menu{display:inline-block;max-width:100%}.nmorph-context-menu__dropdown{text-align:left}.nmorph-context-menu__options{display:grid;gap:4px;padding:4px}.nmorph-context-menu__item{display:flex;gap:var(--indentation-02);justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;min-width:120px;padding:var(--indentation-02) var(--indentation-04);color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));font:inherit;line-height:var(--line-height-regular);text-align:left;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-context-menu__item-label{color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));text-align:left}.nmorph-context-menu__item:not(:disabled):not(.nmorph-context-menu__item--disabled):hover{background:color-mix(in srgb,var(--nmorph-context-menu-item-color, var(--nmorph-text-color)) 12%,transparent)}.nmorph-context-menu__item:disabled,.nmorph-context-menu__item--disabled{cursor:default;opacity:.56;pointer-events:none}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content{justify-content:flex-start;text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content span{text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-button-hover-color, var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))) 12%,transparent)}

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

@@ -1,10 +1,14 @@
 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";
+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 f, normalizeStyle as m, createElementVNode as h, toDisplayString as _, normalizeClass as y, resolveDynamicComponent as x, mergeProps as k, createCommentVNode as b } from "vue";
 /* empty css                       */
-import d from "../../../_virtual/_plugin-vue_export-helper.js";
-function m(o, p, f, e, s, h) {
-  return n(), t(
+import w from "../../../_virtual/_plugin-vue_export-helper.js";
+const C = {
+  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, K) {
+  return o(), l(
     "div",
     {
       ref: "triggerDOMRef",
@@ -14,8 +18,8 @@ function m(o, p, f, e, s, h) {
       onKeydown: e.keydownHandler
     },
     [
-      r(o.$slots, "default"),
-      e.relativeElement ? (n(), i(e.NmorphDropdown, {
+      i(a.$slots, "default"),
+      e.relativeElement ? (o(), d(e.NmorphDropdown, {
         key: 0,
         open: e.isOpen,
         "relative-element": e.relativeElement,
@@ -31,21 +35,76 @@ function m(o, p, f, e, s, h) {
         "trap-focus": e.props.trapFocus,
         role: e.props.role,
         "aria-label": e.props.ariaLabel,
+        "content-class": "nmorph-context-menu__dropdown",
         onOnOutsideClick: e.outsideClickHandler,
         onOnEscapeKeydown: e.escapeHandler
       }, {
-        default: a(() => [
-          r(o.$slots, "menu", { close: e.close })
+        default: p(() => [
+          e.hasOptions ? (o(), l("div", C, [
+            (o(!0), l(
+              c,
+              null,
+              f(e.normalizedOptions, (n, t) => (o(), l(
+                c,
+                {
+                  key: n.key
+                },
+                [
+                  n.component ? (o(), l("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: (r) => e.optionClickHandler(n, t),
+                    onKeydown: (r) => e.optionKeydownHandler(r, n, t)
+                  }, [
+                    (o(), d(
+                      x(n.component),
+                      k({ ref_for: !0 }, n.componentProps),
+                      null,
+                      16
+                      /* FULL_PROPS */
+                    ))
+                  ], 46, g)) : (o(), l("button", {
+                    key: 0,
+                    type: "button",
+                    class: "nmorph-context-menu__item",
+                    role: "menuitem",
+                    disabled: n.disabled,
+                    style: m(e.getOptionStyle(n)),
+                    onClick: (r) => e.optionClickHandler(n, t)
+                  }, [
+                    h(
+                      "span",
+                      O,
+                      _(n.label),
+                      1
+                      /* TEXT */
+                    )
+                  ], 12, v))
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              ))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])) : i(a.$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"])) : c("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"])) : b("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"]]);
+const B = /* @__PURE__ */ w(s, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue"]]);
 export {
-  v as default
+  B as default
 };

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

@@ -1,13 +1,14 @@
 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({
+import { defineComponent as L, ref as i, computed as y, markRaw as M, toRaw as D, watch as h, onBeforeUnmount as V } from "vue";
+import P from "../nmorph-dropdown/NmorphDropdown.vue.js";
+const $ = /* @__PURE__ */ L({
   __name: "NmorphContextMenu",
   props: {
     modelValue: { type: [Boolean, null], required: !1, default: null },
+    options: { type: Array, required: !1, default: () => [] },
     trigger: { type: String, required: !1, default: "contextmenu" },
     placement: { type: null, required: !1, default: "bottom-start" },
-    width: { type: [Number, String], required: !1, default: 160 },
+    width: { type: [Number, String], required: !1, default: "max-content" },
     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 },
@@ -17,56 +18,96 @@ const H = /* @__PURE__ */ N({
     closeOnEscape: { type: Boolean, required: !1, default: !0 },
     trapFocus: { type: Boolean, required: !1, default: !1 },
     disabled: { type: Boolean, required: !1, default: !1 },
+    closeOnScroll: { type: Boolean, required: !1, default: !0 },
     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,
+  emits: ["update:model-value", "open", "close", "select", "on-outside-click", "on-escape-keydown"],
+  setup(O, { expose: q, emit: v }) {
+    const l = O, 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(
+      () => l.options.map((e, t) => typeof e == "string" || typeof e == "number" ? {
+        key: `${e}-${t}`,
+        label: e,
+        value: e,
+        disabled: !1,
+        closeOnClick: !0,
+        raw: e
+      } : {
+        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,
+        componentProps: e.componentProps,
+        disabled: !!e.disabled,
+        color: e.color,
+        closeOnClick: e.closeOnClick ?? !0,
+        raw: e
+      })
+    );
+    h(
+      () => l.modelValue,
       (e) => {
-        typeof e == "boolean" && (n.value = e);
+        typeof e == "boolean" && (a.value = e);
       }
     );
-    const p = (e, l) => ({
+    const g = (e, t) => ({
       clientWidth: 0,
       getBoundingClientRect: () => ({
         x: e,
-        y: l,
+        y: t,
         width: 0,
         height: 0,
-        top: l,
+        top: t,
         left: e,
         right: e,
-        bottom: l,
+        bottom: t,
         toJSON: () => ({})
       })
     }), u = (e) => {
-      const l = c.value;
-      n.value = e, o("update:model-value", e), l && !e && o("close");
-    }, a = () => {
+      const t = f.value;
+      a.value = e, r("update:model-value", e), t && !e && r("close");
+    }, n = () => {
       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();
+    }, 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);
+    }, C = (e) => {
+      l.disabled || l.trigger !== "contextmenu" && l.trigger !== "both" || (e.preventDefault(), b(e.clientX, e.clientY, e));
+    }, E = (e) => {
+      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));
     }, _ = () => {
-      o("on-escape-keydown"), a();
+      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) => ({
+      "--nmorph-context-menu-item-color": e.color
+    }), s = () => {
+      l.closeOnScroll && o.value === "point" && n();
     };
-    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;
+    h(
+      f,
+      (e) => {
+        typeof window > "u" || (e ? window.addEventListener("scroll", s, { passive: !0, capture: !0 }) : window.removeEventListener("scroll", s, !0));
+      },
+      { immediate: !0 }
+    ), V(() => {
+      typeof window < "u" && window.removeEventListener("scroll", s, !0);
+    }), q({ close: n });
+    const k = { 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(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  H as default
+  $ as default
 };

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

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

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

@@ -1,6 +1,6 @@
 import './NmorphDropdown.css';
-import { defineComponent as w, ref as b, toRef as r, computed as i, watch as v } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { defineComponent as w, ref as b, toRef as r, computed as i, watch as q } from "vue";
+import { useModifiers as v } from "../../../utils/create-modifiers.js";
 import { usePlacement as x } from "../../../hooks/use-placement.js";
 import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 const k = /* @__PURE__ */ w({
@@ -19,7 +19,8 @@ const k = /* @__PURE__ */ w({
     closeOnEscape: { type: Boolean, required: !1, default: !0 },
     trapFocus: { type: Boolean, required: !1, default: !1 },
     role: { type: String, required: !1, default: "listbox" },
-    ariaLabel: { type: String, required: !1, default: "" }
+    ariaLabel: { type: String, required: !1, default: "" },
+    contentClass: { type: String, required: !1, default: "" }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
   setup(f, { expose: m, emit: c }) {
@@ -32,7 +33,7 @@ const k = /* @__PURE__ */ w({
       xOffset: r(e, "xOffset"),
       enabled: r(e, "open")
     }), y = i(
-      () => q({
+      () => v({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
     ), o = (t) => typeof t == "number" ? `${t}px` : t, p = i(
@@ -45,7 +46,7 @@ const k = /* @__PURE__ */ w({
       top: l.value.y,
       visibility: e.open && a.value ? "visible" : "hidden"
     }));
-    v(
+    q(
       () => e.open,
       (t) => {
         t && s();