@nmorph/nmorph-ui-kit 2.2.34 → 2.2.35

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js

@@ -1,21 +1,15 @@
 import './NmorphBacktop.css';
-import l from "./NmorphBacktop.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeStyle as c, createBlock as i, Teleport as d, createElementVNode as t, normalizeClass as m, withModifiers as s, renderSlot as h, createVNode as r, withCtx as p } from "vue";
+import a from "./NmorphBacktop.vue2.js";
+import { openBlock as e, createElementBlock as p, createBlock as c, Teleport as i, createElementVNode as t, normalizeStyle as s, normalizeClass as d, withModifiers as m, renderSlot as f, createVNode as r, withCtx as l } from "vue";
 /* empty css                   */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-function _(n, b, k, o, v, x) {
-  return e(), a(
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { ref: "placeholderDOMEl" };
+function k(n, v, y, o, b, N) {
+  return e(), p(
     "div",
-    {
-      ref: "placeholderDOMEl",
-      style: c({
-        "--nmorph-backtop-right": `${o.props.right}px`,
-        "--nmorph-backtop-bottom": `${o.props.bottom}px`,
-        "--nmorph-backtop-z-index": o.props.zIndex
-      })
-    },
+    _,
     [
-      (e(), i(d, {
+      (e(), c(i, {
         to: o.props.teleportTo,
         disabled: !o.isMounted || o.props.teleportDisabled
       }, [
@@ -23,22 +17,23 @@ function _(n, b, k, o, v, x) {
           "div",
           {
             ref: "selfDOMEl",
-            class: m(o.modifiers)
+            class: d(o.modifiers),
+            style: s(o.styles)
           },
           [
             t("div", {
-              onClick: s(o.scrollToTopHandler, ["stop"])
+              onClick: m(o.scrollToTopHandler, ["stop"])
             }, [
-              h(n.$slots, "default", {}, () => [
+              f(n.$slots, "default", {}, () => [
                 r(o.NmorphButton, {
                   "style-type": o.props.design === "nmorph" ? "default" : "transparent"
                 }, {
-                  default: p(() => [
+                  default: l(() => [
                     r(o.NmorphIcon, {
                       class: "nmorph-backtop__up-icon",
                       color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: p(() => [
+                      default: l(() => [
                         r(o.NmorphIconChevronDown)
                       ]),
                       _: 1
@@ -51,16 +46,16 @@ function _(n, b, k, o, v, x) {
               ])
             ])
           ],
-          2
-          /* CLASS */
+          6
+          /* CLASS, STYLE */
         )
       ], 8, ["to", "disabled"]))
     ],
-    4
-    /* STYLE */
+    512
+    /* NEED_PATCH */
   );
 }
-const z = /* @__PURE__ */ f(l, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+const E = /* @__PURE__ */ h(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
 export {
-  z as default
+  E as default
 };

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphBacktop.css';
-import { defineComponent as b, computed as g, ref as t, onMounted as y, onUnmounted as N } from "vue";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { defineComponent as y, computed as m, ref as o, onMounted as N, onUnmounted as _ } from "vue";
+import { useModifiers as k } from "../../../utils/create-modifiers.js";
 import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import E from "../../basic/nmorph-button/NmorphButton.vue.js";
-import T from "../../../assets/icons/chevron-down.svg.js";
-const k = /* @__PURE__ */ b({
+import x from "../../basic/nmorph-button/NmorphButton.vue.js";
+import E from "../../../assets/icons/chevron-down.svg.js";
+const M = /* @__PURE__ */ y({
   __name: "NmorphBacktop",
   props: {
     right: { type: Number, required: !1, default: 40 },
@@ -16,38 +16,42 @@ const k = /* @__PURE__ */ b({
     teleportDisabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["click"],
-  setup(m, { expose: c, emit: f }) {
-    c();
-    const r = m, n = f, d = g(
-      () => _({
-        "nmorph-backtop": [`${o.value && "show"}`, r.design]
+  setup(c, { expose: d, emit: f }) {
+    d();
+    const t = c, n = f, h = m(
+      () => k({
+        "nmorph-backtop": [`${r.value && "show"}`, t.design]
       })
-    ), e = t(null), u = t(null), i = t(null), o = t(!1), s = t(!1), l = (p) => {
+    ), v = m(() => ({
+      "--nmorph-backtop-right": `${t.right}px`,
+      "--nmorph-backtop-bottom": `${t.bottom}px`,
+      "--nmorph-backtop-z-index": t.zIndex
+    })), e = o(null), i = o(null), s = o(null), r = o(!1), u = o(!1), l = (p) => {
       if (!p) return;
-      const h = p.target;
-      o.value = h.scrollTop > r.visibilityHeight;
-    }, v = () => {
+      const g = p.target;
+      r.value = g.scrollTop > t.visibilityHeight;
+    }, b = () => {
       n("click"), e.value && e.value.scrollTo({
         top: 0,
         left: 0,
         behavior: "smooth"
       });
     };
-    y(() => {
-      e.value = u.value?.parentElement ?? i.value?.parentElement?.parentElement ?? null, e.value?.addEventListener("scroll", l), o.value = (e.value?.scrollTop ?? 0) > r.visibilityHeight, s.value = !0;
-    }), N(() => {
+    N(() => {
+      e.value = i.value?.parentElement ?? s.value?.parentElement?.parentElement ?? null, e.value?.addEventListener("scroll", l), r.value = (e.value?.scrollTop ?? 0) > t.visibilityHeight, u.value = !0;
+    }), _(() => {
       e.value && e.value?.removeEventListener("scroll", l);
     });
-    const a = { props: r, emit: n, modifiers: d, container: e, placeholderDOMEl: u, selfDOMEl: i, showButton: o, isMounted: s, scrollHandler: l, scrollToTopHandler: v, get NmorphButton() {
-      return E;
+    const a = { props: t, emit: n, modifiers: h, styles: v, container: e, placeholderDOMEl: i, selfDOMEl: s, showButton: r, isMounted: u, scrollHandler: l, scrollToTopHandler: b, get NmorphButton() {
+      return x;
     }, get NmorphIcon() {
       return q;
     }, get NmorphIconChevronDown() {
-      return T;
+      return E;
     } };
     return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  k as default
+  M as default
 };

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

@@ -1,13 +1,13 @@
 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 f, normalizeStyle as m, createElementVNode as h, toDisplayString as _, normalizeClass as y, resolveDynamicComponent as x, mergeProps as k, createCommentVNode as b } from "vue";
+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";
 /* empty css                       */
-import w from "../../../_virtual/_plugin-vue_export-helper.js";
+import b 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) {
+function H(a, u, z, e, E, S) {
   return o(), l(
     "div",
     {
@@ -35,6 +35,7 @@ function H(a, u, z, e, E, K) {
         "trap-focus": e.props.trapFocus,
         role: e.props.role,
         "aria-label": e.props.ariaLabel,
+        "hide-shadow": e.props.hideShadow,
         "content-class": "nmorph-context-menu__dropdown",
         onOnOutsideClick: e.outsideClickHandler,
         onOnEscapeKeydown: e.escapeHandler
@@ -44,7 +45,7 @@ function H(a, u, z, e, E, K) {
             (o(!0), l(
               c,
               null,
-              f(e.normalizedOptions, (n, t) => (o(), l(
+              h(e.normalizedOptions, (n, r) => (o(), l(
                 c,
                 {
                   key: n.key
@@ -57,8 +58,8 @@ function H(a, u, z, e, E, K) {
                     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)
+                    onClick: (t) => e.optionClickHandler(n, r),
+                    onKeydown: (t) => e.optionKeydownHandler(t, n, r)
                   }, [
                     (o(), d(
                       x(n.component),
@@ -74,9 +75,9 @@ function H(a, u, z, e, E, K) {
                     role: "menuitem",
                     disabled: n.disabled,
                     style: m(e.getOptionStyle(n)),
-                    onClick: (r) => e.optionClickHandler(n, t)
+                    onClick: (t) => e.optionClickHandler(n, r)
                   }, [
-                    h(
+                    f(
                       "span",
                       O,
                       _(n.label),
@@ -98,13 +99,13 @@ function H(a, u, z, e, E, K) {
         ]),
         _: 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"])) : b("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"])) : w("v-if", !0)
     ],
     544
     /* NEED_HYDRATION, NEED_PATCH */
   );
 }
-const B = /* @__PURE__ */ w(s, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue"]]);
+const B = /* @__PURE__ */ b(s, [["render", H], ["__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,5 +1,5 @@
 import './NmorphContextMenu.css';
-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 { 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({
   __name: "NmorphContextMenu",
@@ -20,11 +20,12 @@ const $ = /* @__PURE__ */ L({
     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: "" }
+    ariaLabel: { type: String, required: !1, default: "" },
+    hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   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(
+  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(
       () => l.options.map((e, t) => typeof e == "string" || typeof e == "number" ? {
         key: `${e}-${t}`,
         label: e,
@@ -44,7 +45,7 @@ const $ = /* @__PURE__ */ L({
         raw: e
       })
     );
-    h(
+    k(
       () => l.modelValue,
       (e) => {
         typeof e == "boolean" && (a.value = e);
@@ -95,7 +96,7 @@ const $ = /* @__PURE__ */ L({
     }), s = () => {
       l.closeOnScroll && o.value === "point" && n();
     };
-    h(
+    k(
       f,
       (e) => {
         typeof window > "u" || (e ? window.addEventListener("scroll", s, { passive: !0, capture: !0 }) : window.removeEventListener("scroll", s, !0));
@@ -103,9 +104,9 @@ const $ = /* @__PURE__ */ L({
       { 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;
+    }), 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;
   }
 });
 export {

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.css

@@ -1 +1 @@
-.nmorph-dropdown{position:fixed;width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}
+.nmorph-dropdown{position:fixed;width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}.nmorph-dropdown--hide-shadow{box-shadow:none}

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

@@ -1,9 +1,9 @@
 import './NmorphDropdown.css';
-import { defineComponent as q, ref as w, toRef as r, computed as i, watch as b } from "vue";
+import { defineComponent as w, ref as q, toRef as r, computed as n, watch as b } 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__ */ q({
+const k = /* @__PURE__ */ w({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -21,30 +21,31 @@ const k = /* @__PURE__ */ q({
     restoreFocus: { type: Boolean, required: !1, default: !0 },
     role: { type: String, required: !1, default: "listbox" },
     ariaLabel: { type: String, required: !1, default: "" },
-    contentClass: { type: String, required: !1, default: "" }
+    contentClass: { type: String, required: !1, default: "" },
+    hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
   setup(f, { expose: m, emit: c }) {
     m();
-    const e = f, l = c, d = w(null), { placementCoords: n, placementReady: a, adjustPlacement: s } = x({
+    const e = f, l = c, i = q(null), { placementCoords: d, placementReady: a, adjustPlacement: s } = x({
       initialPlacement: r(e, "placement"),
-      contentDOMElement: d,
+      contentDOMElement: i,
       relativeElement: r(e, "relativeElement"),
       yOffset: r(e, "yOffset"),
       xOffset: r(e, "xOffset"),
       enabled: r(e, "open")
-    }), y = i(
+    }), y = n(
       () => v({
-        "nmorph-dropdown": [`${!e.open && "closed"}`]
+        "nmorph-dropdown": [`${!e.open && "closed"}`, `${e.hideShadow && "hide-shadow"}`]
       })
-    ), o = (t) => typeof t == "number" ? `${t}px` : t, u = i(
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, u = n(
       () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
-    ), h = i(() => ({
+    ), h = n(() => ({
       "--nmorph-dropdown-width": u.value,
       "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
       "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
-      left: n.value.x,
-      top: n.value.y,
+      left: d.value.x,
+      top: d.value.y,
       visibility: e.open && a.value ? "visible" : "hidden"
     }));
     b(
@@ -54,7 +55,7 @@ const k = /* @__PURE__ */ q({
       },
       { flush: "post" }
     );
-    const p = { props: e, emit: l, dropdownDOMRef: d, placementCoords: n, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: u, dropdownStyle: h, outsideClickHandler: () => {
+    const p = { props: e, emit: l, dropdownDOMRef: i, placementCoords: d, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: u, dropdownStyle: h, outsideClickHandler: () => {
       l("on-outside-click");
     }, escapeHandler: () => {
       l("on-escape-keydown");

package/dist/hooks/use-common-styles.js

@@ -52,6 +52,7 @@ const u = {
       --indentation-02: 4px;
       --indentation-03: 8px;
       --indentation-04: 16px;
+      --indentation-05: 24px;
 
       --base-shadow-blur: calc(var(--base-shadow-width) * var(--base-shadow-blur-coefficient));
       --nmorph-shadow-outset:
@@ -350,7 +351,7 @@ const u = {
     }
 
     .nmorph-avatar__initials {
-      color: var(--nmorph-accent-color);
+      color: var(--nmorph-text-color);
       font-weight: 600;
       line-height: 1;
     }