@nmorph/nmorph-ui-kit 2.2.16 → 2.2.18

package/dist/components/data/nmorph-badge/NmorphBadge.css

@@ -1 +1 @@
-.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular)}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}
+.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}

package/dist/components/form/nmorph-form/use-form-item-input.js

@@ -1,15 +1,14 @@
-import { inject as i, computed as e } from "vue";
-import { generateUUID as r } from "../../../utils/common.js";
-const d = "nmorph-form-item-input-data", p = (t) => {
-  const o = i(d, void 0), a = r(), n = e(() => t.id || o?.id.value || a), m = e(() => t.name || o?.name.value || n.value), c = e(() => t.autocomplete || o?.autocomplete.value || void 0), u = e(() => t.tabindex ?? 0);
+import { inject as d, useId as i, computed as e } from "vue";
+const l = "nmorph-form-item-input-data", I = (t) => {
+  const o = d(l, void 0), a = `nmorph-${i()}`, n = e(() => t.id || o?.id.value || a), m = e(() => t.name || o?.name.value || n.value), u = e(() => t.autocomplete || o?.autocomplete.value || void 0), c = e(() => t.tabindex ?? 0);
   return {
     id: n,
     name: m,
-    autocomplete: c,
-    tabindex: u
+    autocomplete: u,
+    tabindex: c
   };
 };
 export {
-  d as nmorphFormItemInputDataKey,
-  p as useFormItemInput
+  l as nmorphFormItemInputDataKey,
+  I as useFormItemInput
 };

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/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-accent-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-accent-color)) 12%,transparent)}

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

@@ -1,20 +1,25 @@
 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";
+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 p from "../../../_virtual/_plugin-vue_export-helper.js";
-function d(o, m, f, e, s, h) {
-  return n(), l(
+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",
       class: "nmorph-context-menu",
+      onClick: e.clickHandler,
       onContextmenu: e.contextMenuHandler,
       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,
@@ -30,21 +35,76 @@ function d(o, m, 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__ */ p(t, [["render", d], ["__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,12 +1,14 @@
 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({
+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, required: !1 },
+    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 },
@@ -16,19 +18,39 @@ const C = /* @__PURE__ */ O({
     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(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(
+  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 c = (e, t) => ({
+    const g = (e, t) => ({
       clientWidth: 0,
       getBoundingClientRect: () => ({
         x: e,
@@ -42,28 +64,50 @@ const C = /* @__PURE__ */ O({
         toJSON: () => ({})
       })
     }), u = (e) => {
-      const t = p.value;
-      n.value = e, o("update:model-value", e), t && !e && o("close");
-    }, r = () => {
+      const t = f.value;
+      a.value = e, r("update:model-value", e), t && !e && r("close");
+    }, n = () => {
       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) => {
+    }, 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 a = (e.target instanceof HTMLElement ? e.target : s.value)?.getBoundingClientRect();
-      a && (e.preventDefault(), d(a.left, a.bottom, e));
+      const t = e.target instanceof HTMLElement ? e.target : d.value;
+      t && (e.preventDefault(), p(t, e));
     }, _ = () => {
-      o("on-outside-click"), r();
+      r("on-outside-click"), n();
     }, N = () => {
-      o("on-escape-keydown"), r();
+      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();
     };
-    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;
+    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 {
-  C 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();