@nmorph/nmorph-ui-kit 2.2.18 → 2.2.20

package/dist/components/form/nmorph-switch/NmorphSwitch.vue.js

@@ -1,14 +1,15 @@
 import './NmorphSwitch.css';
-import l from "./NmorphSwitch.vue2.js";
-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";
+import a from "./NmorphSwitch.vue2.js";
+import { openBlock as l, createElementBlock as t, normalizeStyle as c, normalizeClass as r, createElementVNode as n, renderSlot as i, createBlock as d, withCtx as s, createVNode as h } from "vue";
 /* empty css                  */
-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(
+import m from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = ["id", "name", "value", "checked", "disabled", "tabindex"], b = { class: "nmorph-switch-thumb" };
+function p(e, _, k, o, y, v) {
+  return l(), t(
     "div",
     {
-      class: a(o.modifiers)
+      class: r(o.modifiers),
+      style: c(o.styles)
     },
     [
       n("div", {
@@ -27,11 +28,11 @@ function p(e, b, _, o, k, u) {
           class: "nmorph-native-input",
           onFocus: o.focusHandler,
           onBlur: o.blurHandler
-        }, null, 40, m),
+        }, null, 40, f),
         n(
           "div",
           {
-            class: a(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": o.initialValue }])
+            class: r(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": o.initialValue }])
           },
           [
             o.initialValue ? i(e.$slots, "bg-on", { key: 0 }) : i(e.$slots, "bg-off", { key: 1 })
@@ -39,14 +40,14 @@ function p(e, b, _, o, k, u) {
           2
           /* CLASS */
         ),
-        n("div", f, [
-          o.props.loading ? (r(), c(o.NmorphIcon, {
+        n("div", b, [
+          o.props.loading ? (l(), d(o.NmorphIcon, {
             key: 0,
             width: "14px",
             height: "14px"
           }, {
-            default: d(() => [
-              s(o.NmorphIconLoader)
+            default: s(() => [
+              h(o.NmorphIconLoader)
             ]),
             _: 1
             /* STABLE */
@@ -54,11 +55,11 @@ function p(e, b, _, o, k, u) {
         ])
       ])
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const V = /* @__PURE__ */ h(l, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
+const x = /* @__PURE__ */ m(a, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
 export {
-  V as default
+  x as default
 };

package/dist/components/form/nmorph-switch/NmorphSwitch.vue2.js

@@ -1,16 +1,20 @@
 import './NmorphSwitch.css';
-import { defineComponent as h, ref as o, computed as y, watch as V } from "vue";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as q } from "../nmorph-form/use-form-item-input.js";
-import N from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import S from "../../../assets/icons/loader.svg.js";
-const H = /* @__PURE__ */ h({
+import { defineComponent as q, ref as o, computed as n, watch as N } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as _ } from "../nmorph-form/use-form-item-input.js";
+import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import H from "../../../assets/icons/loader.svg.js";
+const L = /* @__PURE__ */ q({
   __name: "NmorphSwitch",
   props: {
     modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
     loading: { type: Boolean, required: !1, default: !1 },
     activeValue: { type: [Boolean, String, Number], required: !1, default: !0 },
     inactiveValue: { type: [Boolean, String, Number], required: !1, default: !1 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 },
+    offset: { type: [Number, String], required: !1, default: void 0 },
+    thumbHeight: { type: [Number, String], required: !1, default: void 0 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -18,40 +22,47 @@ const H = /* @__PURE__ */ h({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(i, { expose: s, emit: d }) {
-    const e = i, { id: f, name: m, tabindex: p } = q(e), l = d, t = o(!1), c = () => {
-      t.value = !0;
+  setup(s, { expose: f, emit: m }) {
+    const e = s, { id: p, name: c, tabindex: h } = _(e), u = m, i = o(!1), g = () => {
+      i.value = !0;
     }, v = () => {
-      t.value = !1;
-    }, b = y(
-      () => _({
+      i.value = !1;
+    }, b = n(
+      () => V({
         "nmorph-switch": [
           `${e.disabled && "disabled"}`,
-          `${a.value ? "on" : "off"}`,
+          `${r.value ? "on" : "off"}`,
           `${e.loading && "loading"}`,
-          `${t.value && "focus"}`
+          `${i.value && "focus"}`
         ]
       })
-    ), a = o(e.modelValue === e.activeValue), g = () => {
+    ), r = o(e.modelValue === e.activeValue), y = () => {
       if (e.disabled) return;
-      a.value = !a.value;
-      const r = a.value ? e.activeValue : e.inactiveValue;
-      l("update:model-value", r);
-    }, u = o(null);
-    s({ inputDOMRef: u }), V(
+      r.value = !r.value;
+      const t = r.value ? e.activeValue : e.inactiveValue;
+      u("update:model-value", t);
+    }, l = o(null);
+    f({ inputDOMRef: l });
+    const a = (t) => typeof t == "number" ? `${t}px` : t, S = n(() => ({
+      ...e.width !== void 0 && { "--width": a(e.width) },
+      ...e.height !== void 0 && { "--height": a(e.height) },
+      ...e.offset !== void 0 && { "--offset": a(e.offset) },
+      ...e.thumbHeight !== void 0 && { "--thumb-height": a(e.thumbHeight) }
+    }));
+    N(
       () => e.modelValue,
-      (r) => {
-        a.value = r === e.activeValue;
+      (t) => {
+        r.value = t === e.activeValue;
       }
     );
-    const n = { props: e, id: f, name: m, tabindex: p, emit: l, focus: t, focusHandler: c, blurHandler: v, modifiers: b, initialValue: a, changeHandler: g, inputDOMRef: u, get NmorphIcon() {
-      return N;
+    const d = { props: e, id: p, name: c, tabindex: h, emit: u, focus: i, focusHandler: g, blurHandler: v, modifiers: b, initialValue: r, changeHandler: y, inputDOMRef: l, getCssSize: a, styles: S, get NmorphIcon() {
+      return w;
     }, get NmorphIconLoader() {
-      return S;
+      return H;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {
-  H as default
+  L as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.css

@@ -0,0 +1 @@
+.nmorph-time-picker{--width: 160px;position:relative;width:var(--width);height:var(--height)}.nmorph-time-picker .nmorph-time-picker__input{display:flex;align-items:center;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto;margin-right:6px}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);gap:4px;padding:8px}.nmorph-time-picker .nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr) auto minmax(48px,1fr)}.nmorph-time-picker .nmorph-time-picker__column{display:grid;max-height:220px;overflow-y:auto}.nmorph-time-picker .nmorph-time-picker__separator{display:flex;justify-content:center;align-items:center;color:var(--nmorph-semi-contrast-text-color);font-weight:700}.nmorph-time-picker .nmorph-time-picker__option{min-height:28px;padding:0 8px;color:var(--nmorph-text-color);background:transparent;border:0;border-radius:4px;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__option:hover,.nmorph-time-picker .nmorph-time-picker__option--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-time-picker .nmorph-time-picker__option:disabled{cursor:not-allowed;opacity:.35}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -0,0 +1,183 @@
+import './NmorphTimePicker.css';
+import b from "./NmorphTimePicker.vue2.js";
+import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as r, createElementVNode as l, withKeys as m, withModifiers as t, createVNode as c, withCtx as p, toDisplayString as d, createCommentVNode as _, createBlock as u, Fragment as s, renderList as h } from "vue";
+/* empty css                      */
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], O = {
+  class: "nmorph-time-picker__column",
+  role: "listbox",
+  "aria-label": "Hours"
+}, N = ["disabled", "onClick"], g = {
+  class: "nmorph-time-picker__column",
+  role: "listbox",
+  "aria-label": "Minutes"
+}, H = ["disabled", "onClick"], V = {
+  class: "nmorph-time-picker__column",
+  role: "listbox",
+  "aria-label": "Seconds"
+}, I = ["disabled", "onClick"];
+function S(z, a, B, e, D, M) {
+  return i(), n(
+    "div",
+    {
+      class: r(e.modifiers),
+      style: v(e.styles)
+    },
+    [
+      l("div", {
+        ref: "inputDOMRef",
+        class: "nmorph-time-picker__input",
+        role: "combobox",
+        "aria-expanded": e.open,
+        "aria-controls": `${e.id}-dropdown`,
+        tabindex: e.props.disabled ? -1 : e.tabindex,
+        onClick: e.toggleOpen,
+        onFocus: e.focusHandler,
+        onBlur: e.blurHandler,
+        onKeydown: [
+          m(t(e.toggleOpen, ["prevent"]), ["space"]),
+          m(t(e.toggleOpen, ["prevent"]), ["enter"]),
+          m(t(e.closeHandler, ["prevent"]), ["escape"])
+        ]
+      }, [
+        l("input", {
+          id: e.id,
+          class: "nmorph-time-picker__native",
+          name: e.name,
+          autocomplete: e.autocomplete,
+          type: "time",
+          step: e.inputStep,
+          value: e.props.modelValue || "",
+          disabled: e.props.disabled,
+          onInput: e.nativeInputHandler
+        }, null, 40, w),
+        c(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
+          default: p(() => [
+            c(e.NmorphIconClock)
+          ]),
+          _: 1
+          /* STABLE */
+        }),
+        l(
+          "div",
+          x,
+          d(e.displayValue),
+          1
+          /* TEXT */
+        ),
+        e.showClearButton ? (i(), n("button", {
+          key: 0,
+          class: "nmorph-time-picker__clear",
+          type: "button",
+          "aria-label": "Clear time",
+          onClick: t(e.clearHandler, ["stop"])
+        }, [
+          c(e.NmorphIcon, {
+            width: "14px",
+            height: "14px"
+          }, {
+            default: p(() => [
+              c(e.NmorphIconCircleClose)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ])) : _("v-if", !0)
+      ], 40, y),
+      e.inputDOMRef && !e.props.disabled ? (i(), u(e.NmorphDropdown, {
+        key: 0,
+        open: e.open,
+        "relative-element": e.inputDOMRef,
+        width: e.props.showSeconds ? 216 : 152,
+        "fill-width": !1,
+        "z-index": e.props.zIndex,
+        "aria-label": e.name,
+        onOnOutsideClick: e.closeHandler,
+        onOnEscapeKeydown: e.closeHandler
+      }, {
+        default: p(() => [
+          l("div", {
+            id: `${e.id}-dropdown`,
+            class: r(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+          }, [
+            l("div", O, [
+              (i(!0), n(
+                s,
+                null,
+                h(e.hourOptions, (o) => (i(), n("button", {
+                  key: o.value,
+                  type: "button",
+                  class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }]),
+                  disabled: o.disabled,
+                  onClick: (k) => e.selectUnit("hour", o.value)
+                }, d(o.label), 11, N))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            a[1] || (a[1] = l(
+              "div",
+              { class: "nmorph-time-picker__separator" },
+              ":",
+              -1
+              /* CACHED */
+            )),
+            l("div", g, [
+              (i(!0), n(
+                s,
+                null,
+                h(e.minuteOptions, (o) => (i(), n("button", {
+                  key: o.value,
+                  type: "button",
+                  class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }]),
+                  disabled: o.disabled,
+                  onClick: (k) => e.selectUnit("minute", o.value)
+                }, d(o.label), 11, H))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            e.props.showSeconds ? (i(), n(
+              s,
+              { key: 0 },
+              [
+                a[0] || (a[0] = l(
+                  "div",
+                  { class: "nmorph-time-picker__separator" },
+                  ":",
+                  -1
+                  /* CACHED */
+                )),
+                l("div", V, [
+                  (i(!0), n(
+                    s,
+                    null,
+                    h(e.secondOptions, (o) => (i(), n("button", {
+                      key: o.value,
+                      type: "button",
+                      class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }]),
+                      disabled: o.disabled,
+                      onClick: (k) => e.selectUnit("second", o.value)
+                    }, d(o.label), 11, I))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )) : _("v-if", !0)
+          ], 10, C)
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : _("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const F = /* @__PURE__ */ f(b, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
+export {
+  F as default
+};

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js

@@ -0,0 +1,111 @@
+import './NmorphTimePicker.css';
+import { defineComponent as X, ref as v, computed as l, watch as Y } from "vue";
+import { NmorphComponentHeight as Z } from "../../../types/index.js";
+import { useI18n as ee } from "vue-i18n";
+import { useModifiers as te } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as oe } from "../nmorph-form/use-form-item-input.js";
+import re from "../../../assets/icons/clock.svg.js";
+import ne from "../../../assets/icons/circle-close.svg.js";
+import le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ue from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const be = /* @__PURE__ */ X({
+  __name: "NmorphTimePicker",
+  props: {
+    modelValue: { type: [String, null], required: !1, default: null },
+    placeholder: { type: String, required: !1, default: "" },
+    hourStep: { type: Number, required: !1, default: 1 },
+    minuteStep: { type: Number, required: !1, default: 5 },
+    secondStep: { type: Number, required: !1, default: 1 },
+    showSeconds: { type: Boolean, required: !1, default: !1 },
+    minTime: { type: String, required: !1, default: "" },
+    maxTime: { type: String, required: !1, default: "" },
+    clearable: { type: Boolean, required: !1, default: !0 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value", "focus", "blur"],
+  setup(_, { expose: $, emit: O }) {
+    const t = _, s = O, { t: T } = ee(), { id: k, name: H, autocomplete: B, tabindex: P } = oe(t), a = v(!1), c = v(!1), w = v(null), m = (e) => String(e).padStart(2, "0"), p = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
+      if (!e) return null;
+      const o = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+      if (!o) return null;
+      const r = Number(o[1]), S = Number(o[2]), d = Number(o[3] || 0);
+      return r > 23 || S > 59 || d > 59 ? null : { hour: r, minute: S, second: d };
+    }, g = (e) => {
+      const o = `${m(e.hour)}:${m(e.minute)}`;
+      return t.showSeconds ? `${o}:${m(e.second)}` : o;
+    }, f = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = l(() => i(t.minTime)), N = l(() => i(t.maxTime)), x = l(() => i(t.modelValue)), u = v(x.value || { hour: 0, minute: 0, second: 0 }), V = l(() => t.placeholder || T("pickATime"));
+    Y(
+      () => t.modelValue,
+      (e) => {
+        const o = i(e);
+        o && (u.value = o);
+      }
+    );
+    const h = (e) => {
+      const o = f(e);
+      return !!(y.value && o < f(y.value) || N.value && o > f(N.value));
+    }, b = (e, o, r) => {
+      const S = p(r), d = /* @__PURE__ */ new Set();
+      for (let n = 0; n <= o; n += S) d.add(n);
+      return d.add(u.value[e]), Array.from(d).filter((n) => n >= 0 && n <= o).sort((n, q) => n - q).map((n) => {
+        const q = { ...u.value, [e]: n };
+        return {
+          label: m(n),
+          value: n,
+          disabled: h(q)
+        };
+      });
+    }, z = l(() => b("hour", 23, t.hourStep)), M = l(() => b("minute", 59, t.minuteStep)), D = l(() => b("second", 59, t.secondStep)), A = (e, o) => {
+      const r = { ...u.value, [e]: o };
+      h(r) || (u.value = r, s("update:model-value", g(r)));
+    }, F = () => {
+      s("update:model-value", null), a.value = !1;
+    }, R = () => {
+      a.value = !1;
+    }, U = () => {
+      t.disabled || (a.value = !a.value);
+    }, j = () => {
+      c.value = !0, s("focus");
+    }, E = () => {
+      c.value = !1, s("blur");
+    }, G = (e) => {
+      const o = e.target, r = i(o.value);
+      !r || h(r) || (u.value = r, s("update:model-value", g(r)));
+    }, J = l(() => t.modelValue || V.value), K = l(
+      () => t.showSeconds ? p(t.secondStep) : p(t.minuteStep) * 60
+    ), L = l(() => t.clearable && !!t.modelValue && !t.disabled), Q = l(
+      () => te({
+        nmorph: [Z[t.height]],
+        "nmorph-time-picker": [
+          `${t.disabled && "disabled"}`,
+          `${a.value && "open"}`,
+          `${c.value && "focus"}`,
+          `${!t.modelValue && "placeholder"}`
+        ]
+      })
+    ), I = (e) => typeof e == "number" ? `${e}px` : e, W = l(() => ({
+      ...t.width !== void 0 && { "--width": I(t.width) }
+    }));
+    $({ inputDOMRef: w });
+    const C = { props: t, emit: s, t: T, id: k, name: H, autocomplete: B, tabindex: P, open: a, focused: c, inputDOMRef: w, pad: m, normalizeStep: p, parseTime: i, formatTime: g, timeToSeconds: f, minTimeParts: y, maxTimeParts: N, modelTimeParts: x, pickerValue: u, placeholderText: V, isOutsideRange: h, getUnitOptions: b, hourOptions: z, minuteOptions: M, secondOptions: D, selectUnit: A, clearHandler: F, closeHandler: R, toggleOpen: U, focusHandler: j, blurHandler: E, nativeInputHandler: G, displayValue: J, inputStep: K, showClearButton: L, modifiers: Q, getCssSize: I, styles: W, get NmorphDropdown() {
+      return ue;
+    }, get NmorphIcon() {
+      return le;
+    }, get NmorphIconCircleClose() {
+      return ne;
+    }, get NmorphIconClock() {
+      return re;
+    } };
+    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
+  }
+});
+export {
+  be 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__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)}
+.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,.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/providers/nmorph-notification-provider/NmorphNotificationProvider.vue.js

@@ -1,6 +1,6 @@
 import './NmorphNotificationProvider.css';
-import c from "./NmorphNotificationProvider.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as a, Fragment as t, renderList as l, createBlock as s, TransitionGroup as d, normalizeClass as m, withCtx as p, mergeProps as f } from "vue";
+import s from "./NmorphNotificationProvider.vue2.js";
+import { openBlock as i, createElementBlock as n, normalizeStyle as c, Fragment as t, renderList as l, createBlock as a, TransitionGroup as p, normalizeClass as d, withCtx as m, mergeProps as f } from "vue";
 /* empty css                                */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
 function h(v, u, y, o, k, x) {
@@ -8,23 +8,24 @@ function h(v, u, y, o, k, x) {
     "div",
     {
       class: "nmorph-notification-provider",
-      style: a({ zIndex: o.zIndex })
+      style: c({ zIndex: o.zIndex })
     },
     [
       (i(!0), n(
         t,
         null,
-        l(o.notificationGroups, (e) => (i(), s(d, {
+        l(o.notificationGroups, (e) => (i(), a(p, {
           key: e.placement,
+          appear: "",
           name: "nmorph-notification",
           tag: "div",
-          class: m(`nmorph-notification-provider__list nmorph-notification-provider__list--${e.placement}`)
+          class: d(`nmorph-notification-provider__list nmorph-notification-provider__list--${e.placement}`)
         }, {
-          default: p(() => [
+          default: m(() => [
             (i(!0), n(
               t,
               null,
-              l(e.notifications, (r) => (i(), s(o.NmorphAlert, f({
+              l(e.notifications, (r) => (i(), a(o.NmorphAlert, f({
                 key: r.id,
                 style: { width: r.width },
                 class: [
@@ -49,7 +50,7 @@ function h(v, u, y, o, k, x) {
     /* STYLE */
   );
 }
-const w = /* @__PURE__ */ _(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
+const w = /* @__PURE__ */ _(s, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
 export {
   w as default
 };

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphNotificationProvider.css';
-import { defineComponent as g, ref as u, computed as v, watch as x } from "vue";
+import { defineComponent as x, ref as u, computed as v, watch as g } from "vue";
 import { NmorphNotificationPlacement as q } from "./types.js";
 import A from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
-const h = 500, z = /* @__PURE__ */ g({
+const N = 500, z = /* @__PURE__ */ x({
   __name: "NmorphNotificationProvider",
   props: {
     notifications: { type: Array, required: !0 },
@@ -10,41 +10,41 @@ const h = 500, z = /* @__PURE__ */ g({
     zIndex: { type: Number, required: !1, default: 1e3 },
     quantity: { type: Number, required: !1, default: 100 }
   },
-  setup(N, { expose: _ }) {
+  setup(h, { expose: _ }) {
     _();
-    const c = (e) => typeof e.id == "string" && e.id.length > 0, a = u([]), o = u([]), r = u([]), d = Object.values(q), f = (e) => {
-      r.value = r.value.filter((i) => i.id !== e), o.value = o.value.filter((i) => i !== e);
+    const c = (e) => typeof e.id == "string" && e.id.length > 0, a = u([]), n = u([]), r = u([]), d = Object.values(q), f = (e) => {
+      r.value = r.value.filter((i) => i.id !== e), n.value = n.value.filter((i) => i !== e);
     }, p = (e, i = !0) => {
-      o.value.includes(e) || (i && !a.value.includes(e) && (a.value = [...a.value, e]), o.value = [...o.value, e], setTimeout(() => f(e), h));
-    }, s = N, y = v(
+      n.value.includes(e) || (i && !a.value.includes(e) && (a.value = [...a.value, e]), n.value = [...n.value, e], setTimeout(() => f(e), N));
+    }, s = h, y = v(
       () => d.map((e) => {
         const i = r.value.filter(
-          (n) => (n.placement ?? s.placement) === e
+          (o) => (o.placement ?? s.placement) === e
         ), t = Math.max(i.length - s.quantity, 0);
         return {
           placement: e,
           notifications: i.slice(t)
         };
-      }).filter((e) => e.notifications.length > 0)
+      })
     );
-    x(
+    g(
       () => s.notifications,
       (e) => {
         const i = e.filter(c).filter((t) => !a.value.includes(t.id));
         r.value = r.value.map((t) => {
-          const n = i.find((l) => l.id === t.id);
-          return n ? { ...t, ...n } : t;
+          const o = i.find((l) => l.id === t.id);
+          return o ? { ...t, ...o } : t;
         }), i.forEach((t) => {
           r.value.some(
             (l) => l.id === t.id
           ) || r.value.push(t);
         }), r.value.filter(
-          (t) => !i.some((n) => n.id === t.id)
+          (t) => !i.some((o) => o.id === t.id)
         ).forEach((t) => p(t.id, !1));
       },
       { deep: !0, immediate: !0 }
     );
-    const I = v(() => s.zIndex), m = { ANIMATION_DURATION: h, hasNotificationId: c, removedIds: a, closingIds: o, renderedNotifications: r, placementList: d, removeRenderedNotification: f, closeHandler: p, props: s, notificationGroups: y, zIndex: I, get NmorphAlert() {
+    const I = v(() => s.zIndex), m = { ANIMATION_DURATION: N, hasNotificationId: c, removedIds: a, closingIds: n, renderedNotifications: r, placementList: d, removeRenderedNotification: f, closeHandler: p, props: s, notificationGroups: y, zIndex: I, get NmorphAlert() {
       return A;
     } };
     return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;