@nmorph/nmorph-ui-kit 2.2.36 → 2.2.38

package/dist/components/basic/nmorph-button/NmorphButton.vue2.js

@@ -4,7 +4,7 @@ import { NmorphComponentHeight as y } from "../../../types/index.js";
 import { useModifiers as b } from "../../../utils/create-modifiers.js";
 import g from "../../../assets/icons/loading.svg.js";
 import q from "../nmorph-icon/NmorphIcon.vue.js";
-const $ = /* @__PURE__ */ c({
+const x = /* @__PURE__ */ c({
   __name: "NmorphButton",
   props: {
     styleType: { type: null, required: !1, default: "default" },
@@ -26,15 +26,15 @@ const $ = /* @__PURE__ */ c({
   setup(i, { expose: u }) {
     const e = i, t = m(), s = o(() => !!t.icon), r = o(() => !!t["icon-only"]), p = o(
       () => b({
-        nmorph: [y[e.height], `${e.fill && "fill"}`],
+        nmorph: [y[e.height], e.fill && "fill"],
         "nmorph-button": [
           e.styleType,
           e.shape,
-          `${e.disabled && "disabled"}`,
-          `${e.accentBgOnHover && "accent-bg-on-hover"}`,
-          `${e.ripple && "ripple"}`,
-          `${r.value && "icon-only"}`,
-          `${e.color && "custom-color"}`
+          e.disabled && "disabled",
+          e.accentBgOnHover && "accent-bg-on-hover",
+          e.ripple && "ripple",
+          r.value && "icon-only",
+          e.color && "custom-color"
         ]
       })
     ), l = h(null), n = {
@@ -56,5 +56,5 @@ const $ = /* @__PURE__ */ c({
   }
 });
 export {
-  $ as default
+  x as default
 };

package/dist/components/basic/nmorph-icon/NmorphIcon.vue2.js

@@ -14,9 +14,9 @@ const p = /* @__PURE__ */ h({
     const e = r, d = i(
       () => l({
         "nmorph-icon": [
-          `${!e.width && !e.height && e.size}`,
-          `${e.width && "custom-width"}`,
-          `${e.height && "custom-height"}`
+          !e.width && !e.height && e.size,
+          e.width && "custom-width",
+          e.height && "custom-height"
         ]
       })
     ), n = i(() => {

package/dist/components/basic/nmorph-layout/NmorphLayout.vue2.js

@@ -1,7 +1,8 @@
 import './NmorphLayout.css';
-import { defineComponent as l, useSlots as d, computed as r } from "vue";
-import { useModifiers as f } from "../../../utils/create-modifiers.js";
-const g = /* @__PURE__ */ l({
+import { defineComponent as p, useSlots as d, computed as o } from "vue";
+import { useModifiers as n } from "../../../utils/create-modifiers.js";
+import { toCssSize as r } from "../../../utils/common.js";
+const g = /* @__PURE__ */ p({
   __name: "NmorphLayout",
   props: {
     tag: { type: String, required: !1, default: "section" },
@@ -10,17 +11,17 @@ const g = /* @__PURE__ */ l({
     asidePosition: { type: String, required: !1, default: "left" },
     fullHeight: { type: Boolean, required: !1, default: !1 }
   },
-  setup(i, { expose: a }) {
-    a();
-    const e = i, p = d(), u = r(
-      () => f({
-        "nmorph-layout": [`aside-${e.asidePosition}`, `${e.fullHeight && "full-height"}`]
+  setup(s, { expose: i }) {
+    i();
+    const e = s, a = d(), u = o(
+      () => n({
+        "nmorph-layout": [`aside-${e.asidePosition}`, e.fullHeight && "full-height"]
       })
-    ), t = (s) => typeof s == "number" ? `${s}px` : s, n = r(() => ({
-      "--nmorph-layout-gap": t(e.gap),
-      "--nmorph-layout-aside-width": t(e.asideWidth)
-    })), o = { props: e, slots: p, modifiers: u, getCssSize: t, styles: n };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    ), l = o(() => ({
+      "--nmorph-layout-gap": r(e.gap),
+      "--nmorph-layout-aside-width": r(e.asideWidth)
+    })), t = { props: e, slots: a, modifiers: u, styles: l };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {

package/dist/components/basic/nmorph-link/NmorphLink.vue2.js

@@ -23,7 +23,7 @@ const b = /* @__PURE__ */ c({
         return e.iconName in o ? o[e.iconName] : o[`NmorphIcon${t(e.iconName)}`];
     }), d = r(
       () => y({
-        "nmorph-link": [e.type, `${e.underline && "underline"}`, `${e.disabled && "disabled"}`]
+        "nmorph-link": [e.type, e.underline && "underline", e.disabled && "disabled"]
       })
     ), u = r(() => ({
       ...e.color !== void 0 && { "--link-color": e.color }

package/dist/components/basic/nmorph-scroll/NmorphScroll.css

@@ -0,0 +1 @@
+.nmorph-scroll{--thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));color-scheme:var(--nmorph-scroll-color-scheme, light);scrollbar-color:var(--thumb-color) transparent;scrollbar-width:thin}.nmorph-scroll::-webkit-scrollbar{width:var(--bar-width);height:var(--bar-height);background-color:transparent;cursor:pointer;transition:width ease-in-out .2s}.nmorph-scroll::-webkit-scrollbar-button,.nmorph-scroll::-webkit-scrollbar-button:single-button,.nmorph-scroll::-webkit-scrollbar-button:double-button,.nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,.nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;min-width:0!important;max-width:0!important;height:0!important;min-height:0!important;max-height:0!important;background:transparent!important;background-image:none!important;border:0!important;appearance:none}.nmorph-scroll::-webkit-scrollbar-track{background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset)}.nmorph-scroll::-webkit-scrollbar-thumb{background-color:var(--thumb-color);border-radius:var(--border-radius-40)}.nmorph-scroll::-webkit-scrollbar-corner{background-color:transparent}

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js

@@ -1,7 +1,9 @@
+import './NmorphScroll.css';
 import e from "./NmorphScroll.vue2.js";
 import { openBlock as l, createElementBlock as i, normalizeStyle as n, normalizeClass as a, renderSlot as t } from "vue";
-import d from "../../../_virtual/_plugin-vue_export-helper.js";
-function m(r, c, h, o, s, f) {
+/* empty css                  */
+import m from "../../../_virtual/_plugin-vue_export-helper.js";
+function d(r, c, h, o, s, f) {
   return l(), i(
     "div",
     {
@@ -32,7 +34,7 @@ function m(r, c, h, o, s, f) {
     /* CLASS, STYLE, NEED_HYDRATION */
   );
 }
-const _ = /* @__PURE__ */ d(e, [["render", m], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-scroll/NmorphScroll.vue"]]);
+const H = /* @__PURE__ */ m(e, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-scroll/NmorphScroll.vue"]]);
 export {
-  _ as default
+  H as default
 };

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue2.js

@@ -1,3 +1,4 @@
+import './NmorphScroll.css';
 import { defineComponent as C, ref as d, computed as t, inject as G, onUnmounted as X, onMounted as Y, nextTick as P, watch as S } from "vue";
 import { useModifiers as $ } from "../../../utils/create-modifiers.js";
 const k = /* @__PURE__ */ C({

package/dist/components/basic/nmorph-space/NmorphSpace.vue2.js

@@ -1,7 +1,8 @@
 import './NmorphSpace.css';
-import { defineComponent as d, computed as r } from "vue";
+import { defineComponent as d, computed as t } from "vue";
 import { useModifiers as m } from "../../../utils/create-modifiers.js";
-const g = /* @__PURE__ */ d({
+import { toCssSize as c } from "../../../utils/common.js";
+const _ = /* @__PURE__ */ d({
   __name: "NmorphSpace",
   props: {
     tag: { type: String, required: !1, default: "div" },
@@ -13,33 +14,28 @@ const g = /* @__PURE__ */ d({
     inline: { type: Boolean, required: !1, default: !1 },
     fill: { type: Boolean, required: !1, default: !1 }
   },
-  setup(f, { expose: p }) {
+  setup(o, { expose: p }) {
     p();
-    const e = f, i = {
+    const e = o, r = {
       small: "4px",
       medium: "8px",
       large: "16px"
-    }, o = r(
+    }, f = t(
       () => m({
-        "nmorph-space": [
-          e.direction,
-          `${e.wrap && "wrap"}`,
-          `${e.inline && "inline"}`,
-          `${e.fill && "fill"}`
-        ]
+        "nmorph-space": [e.direction, e.wrap && "wrap", e.inline && "inline", e.fill && "fill"]
       })
-    ), s = (t) => typeof t == "number" ? `${t}px` : i[t] || t, a = r(
+    ), i = (n) => c(r[n] || n), s = t(
       () => e.align === "start" || e.align === "end" ? `flex-${e.align}` : e.align
-    ), n = r(
+    ), a = t(
       () => e.justify === "start" || e.justify === "end" ? `flex-${e.justify}` : e.justify
-    ), u = r(() => ({
-      "--nmorph-space-gap": s(e.size),
-      "--nmorph-space-align": a.value,
-      "--nmorph-space-justify": n.value
-    })), l = { props: e, sizeMap: i, modifiers: o, getCssSize: s, alignItems: a, justifyContent: n, styles: u };
+    ), u = t(() => ({
+      "--nmorph-space-gap": i(e.size),
+      "--nmorph-space-align": s.value,
+      "--nmorph-space-justify": a.value
+    })), l = { props: e, sizeMap: r, modifiers: f, resolveSpaceSize: i, alignItems: s, justifyContent: a, styles: u };
     return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
 });
 export {
-  g as default
+  _ as default
 };

package/dist/components/data/nmorph-avatar/NmorphAvatar.css

@@ -1 +1 @@
-.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}
+.nmorph-avatar{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.nmorph-avatar--circle{border-radius:var(--border-radius-circular)}.nmorph-avatar--square{border-radius:var(--default-border-radius)}.nmorph-avatar>.nmorph-image{--width: var(--nmorph-avatar-size);--height: var(--nmorph-avatar-size);position:absolute;padding:var(--nmorph-avatar-image-padding);border-radius:var(--nmorph-avatar-radius)}.nmorph-avatar.nmorph--shadow-combined{background:var(--nmorph-main-color);border:var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-combined-dark)}.nmorph-avatar>.nmorph-image>img{border-radius:var(--nmorph-avatar-image-radius)}.nmorph-avatar__initials{color:var(--nmorph-text-color);font-weight:600;line-height:1}.nmorph-avatar--preview{cursor:pointer}.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}

package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js

@@ -1,12 +1,12 @@
 import './NmorphAvatar.css';
-import { defineComponent as $, ref as z, computed as a } from "vue";
+import { defineComponent as z, ref as $, computed as a } from "vue";
 import { useModifiers as B } from "../../../utils/create-modifiers.js";
 import L from "../nmorph-image-preview/NmorphImagePreview.vue.js";
 import v from "../../../assets/icons/avatar.svg.js";
 import M from "../../../assets/icons/loader.svg.js";
 import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import C from "../nmorph-image/NmorphImage.vue.js";
-const J = /* @__PURE__ */ $({
+const J = /* @__PURE__ */ z({
   __name: "NmorphAvatar",
   props: {
     src: { type: [String, Array], required: !1, default: void 0 },
@@ -33,7 +33,7 @@ const J = /* @__PURE__ */ $({
       o("error", e);
     }, w = (e) => {
       o("load", e);
-    }, l = z(!1), p = (e, t = 0) => Array.isArray(e) ? e[t] : e, u = a(() => `${r.imagePadding}px`), i = a(() => `${r.size}px`), b = a(() => p(r.src)), n = a(() => r.previewSrc || r.src), m = a(() => {
+    }, l = $(!1), p = (e, t = 0) => Array.isArray(e) ? e[t] : e, u = a(() => `${r.imagePadding}px`), i = a(() => `${r.size}px`), b = a(() => p(r.src)), n = a(() => r.previewSrc || r.src), m = a(() => {
       const e = n.value;
       return Array.isArray(e) ? e.length > 0 : !!e;
     }), q = a(() => {
@@ -41,8 +41,8 @@ const J = /* @__PURE__ */ $({
       return Array.isArray(e) ? e : e || "";
     }), s = a(() => r.preview && m.value), N = a(
       () => B({
-        nmorph: [`${r.frameBorder > 0 && "shadow-combined"}`],
-        "nmorph-avatar": [r.shape, `${s.value && "preview"}`]
+        nmorph: [r.frameBorder > 0 && "shadow-combined"],
+        "nmorph-avatar": [r.shape, s.value && "preview"]
       })
     ), I = a(() => `${r.size / 100 * 60}px`), x = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), d = a(() => r.shape === "circle" ? "50%" : "2px"), A = a(() => ({
       width: i.value,

package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js

@@ -1,7 +1,8 @@
 import './NmorphBadge.css';
-import { defineComponent as C, computed as t, ref as b, onMounted as N, watch as I, nextTick as V } from "vue";
-import { useModifiers as p } from "../../../utils/create-modifiers.js";
-const F = /* @__PURE__ */ C({
+import { defineComponent as N, computed as t, ref as d, onMounted as I, watch as V, nextTick as M } from "vue";
+import { useModifiers as f } from "../../../utils/create-modifiers.js";
+import { toCssSize as y } from "../../../utils/common.js";
+const $ = /* @__PURE__ */ N({
   __name: "NmorphBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 },
@@ -22,66 +23,66 @@ const F = /* @__PURE__ */ C({
   },
   setup(m, { expose: g }) {
     g();
-    const e = m, o = t(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), c = t(() => o.value === "dot"), n = t(() => o.value === "tag"), r = t(() => o.value === "ribbon"), h = t(
-      () => p({
+    const e = m, r = t(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), b = t(() => r.value === "dot"), o = t(() => r.value === "tag"), a = t(() => r.value === "ribbon"), h = t(
+      () => f({
         "nmorph-badge": [
-          `${e.hidden && "hidden"}`,
-          `${n.value && "tag"}`,
-          `${r.value && "ribbon"}`,
-          `${r.value && `ribbon-${e.ribbonCorner}`}`,
+          e.hidden && "hidden",
+          o.value && "tag",
+          a.value && "ribbon",
+          a.value && `ribbon-${e.ribbonCorner}`,
           e.size
         ]
       })
     ), x = t(
-      () => p({
+      () => f({
         "nmorph-badge__container": [
-          `${e.hidden && "hidden"}`,
-          `${n.value && "tag"}`,
-          `${r.value && "ribbon"}`,
-          `${r.value && `ribbon-${e.ribbonCorner}`}`
+          e.hidden && "hidden",
+          o.value && "tag",
+          a.value && "ribbon",
+          a.value && `ribbon-${e.ribbonCorner}`
         ]
       })
-    ), $ = t(
-      () => p({
-        "nmorph-badge__ribbon-corner": [`${e.ribbonCorner}`, `${!e.ribbonTilt && "flat"}`]
+    ), q = t(
+      () => f({
+        "nmorph-badge__ribbon-corner": [e.ribbonCorner, !e.ribbonTilt && "flat"]
       })
-    ), q = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), v = t(() => e.hideOnFalsyValue && !e.value), _ = t(() => (c.value || e.value !== void 0) && !v.value), u = t(() => {
-      const a = `${(s?.value / 2 + e.offsetX) * -1}px`, B = `${(d?.value / 2 + e.offsetY) * -1}px`;
+    ), _ = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), p = t(() => e.hideOnFalsyValue && !e.value), z = t(() => (b.value || e.value !== void 0) && !p.value), l = t(() => {
+      const v = `${(u?.value / 2 + e.offsetX) * -1}px`, C = `${(i?.value / 2 + e.offsetY) * -1}px`;
       return {
-        x: a,
-        y: B
+        x: v,
+        y: C
       };
-    }), z = t(() => n.value || r.value ? {
+    }), S = t(() => o.value || a.value ? {
       zIndex: e.zIndex
     } : {
-      right: u.value.x,
-      top: u.value.y,
+      right: l.value.x,
+      top: l.value.y,
       zIndex: e.zIndex
-    }), i = (a) => typeof a == "number" ? `${a}px` : a, l = b(null), s = b(0), d = b(0), S = t(() => ({
+    }), n = d(null), u = d(0), i = d(0), T = t(() => ({
       "--nmorph-badge-color": e.color,
-      ...e.offsetX !== 0 && { "--nmorph-badge-ribbon-offset-x": i(e.offsetX) },
-      ...e.offsetY !== 0 && { "--nmorph-badge-ribbon-offset-y": i(e.offsetY) }
-    })), f = async () => {
-      await V(), !(!l.value || n.value || r.value) && (s.value = l.value.clientWidth, d.value = l.value.clientHeight);
-    }, T = t(() => ({
+      ...e.offsetX !== 0 && { "--nmorph-badge-ribbon-offset-x": y(e.offsetX) },
+      ...e.offsetY !== 0 && { "--nmorph-badge-ribbon-offset-y": y(e.offsetY) }
+    })), s = async () => {
+      await M(), !(!n.value || o.value || a.value) && (u.value = n.value.clientWidth, i.value = n.value.clientHeight);
+    }, B = t(() => ({
       zIndex: e.zIndex
     }));
-    N(f), I(
+    I(s), V(
       () => [
         e.value,
         e.max,
-        o.value,
+        r.value,
         e.ribbonCorner,
         e.ribbonTilt,
         e.size,
         e.hideOnFalsyValue
       ],
-      f
+      s
     );
-    const y = { props: e, resolvedType: o, isDotType: c, isTagType: n, isRibbon: r, modifiers: h, containerModifiers: x, ribbonCornerModifiers: $, displayValue: q, shouldHideOnFalsyValue: v, shouldShowBadge: _, appliedOffset: u, containerStyle: z, getCssSize: i, badge: l, badgeWidth: s, badgeHeight: d, styles: S, updateBadgeSize: f, ribbonFrameStyle: T };
-    return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
+    const c = { props: e, resolvedType: r, isDotType: b, isTagType: o, isRibbon: a, modifiers: h, containerModifiers: x, ribbonCornerModifiers: q, displayValue: _, shouldHideOnFalsyValue: p, shouldShowBadge: z, appliedOffset: l, containerStyle: S, badge: n, badgeWidth: u, badgeHeight: i, styles: T, updateBadgeSize: s, ribbonFrameStyle: B };
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  F as default
+  $ as default
 };

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue2.js

@@ -1,13 +1,14 @@
 import './NmorphCalendar.css';
-import { defineComponent as O, ref as N, onMounted as k, reactive as j, watch as h, computed as i } from "vue";
-import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { defineComponent as R, ref as x, onMounted as O, reactive as k, watch as v, computed as s } from "vue";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { toCssSize as z } from "../../../utils/common.js";
 import W from "./inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js";
 import { useCalendarTexts as Z } from "./hooks/use-calendar-texts.js";
-import { hasAnyRangeDateInPrevMonth as $, hasAnyRangeDateInNextMonth as F, isTodayInMonthRange as G, resetTimeToZero as d, getMonthDaysByWeek as J } from "./utils.js";
-import K from "../nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue.js";
-import L from "../nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js";
-import Q from "../nmorph-table/NmorphTable.vue.js";
-const le = /* @__PURE__ */ O({
+import { hasAnyRangeDateInPrevMonth as F, hasAnyRangeDateInNextMonth as G, isTodayInMonthRange as J, resetTimeToZero as d, getMonthDaysByWeek as K } from "./utils.js";
+import L from "../nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue.js";
+import Q from "../nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js";
+import U from "../nmorph-table/NmorphTable.vue.js";
+const ue = /* @__PURE__ */ R({
   __name: "NmorphCalendar",
   props: {
     markToday: { type: Boolean, required: !1, default: !0 },
@@ -18,11 +19,11 @@ const le = /* @__PURE__ */ O({
     cellHeight: { type: [Number, String], required: !1, default: void 0 }
   },
   emits: ["update:model-value", "update-initial-date"],
-  setup(b, { expose: _, emit: C }) {
-    _();
-    const a = b, s = C, { days: v } = Z(), y = () => {
+  setup(N, { expose: b, emit: _ }) {
+    b();
+    const a = N, i = _, { days: h } = Z(), y = () => {
       o.value = M.value;
-    }, B = () => {
+    }, C = () => {
       o.value = /* @__PURE__ */ new Date();
     }, g = () => {
       o.value = A.value;
@@ -46,25 +47,25 @@ const le = /* @__PURE__ */ O({
           return e.map((r) => d(r)).slice(0, 2);
         u();
       }
-    }, q = (e) => {
+    }, B = (e) => {
       if (t.value === null) return;
       const { monthType: l, hidden: r } = e;
       if (r) return;
       l === "next" && g(), l === "previous" && y();
       const { date: n } = e;
-      if (a.type === "date" && (t.value = n, s("update:model-value", t.value)), a.type === "dates") {
+      if (a.type === "date" && (t.value = n, i("update:model-value", t.value)), a.type === "dates") {
         if (!Array.isArray(t.value)) return u();
-        const m = n.toDateString(), w = t.value.map((R) => R.toDateString()).indexOf(m);
-        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), s("update:model-value", t.value);
+        const m = n.toDateString(), w = t.value.map((P) => P.toDateString()).indexOf(m);
+        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), i("update:model-value", t.value);
       }
       if (a.type === "daterange") {
         if (!Array.isArray(t.value)) return u();
-        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], s("update:model-value", t.value.slice(0, 2));
+        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], i("update:model-value", t.value.slice(0, 2));
       }
     }, D = (e, l) => {
       const [r, n] = l;
       return l.length === 1 ? e.toDateString() === r.toDateString() : r && n ? e >= d(r) && e <= d(n) : !1;
-    }, V = (e) => {
+    }, q = (e) => {
       if (t.value === null) return !1;
       if (a.type === "date")
         return Array.isArray(t.value) ? u() : t.value.toDateString() === e.toDateString();
@@ -72,21 +73,21 @@ const le = /* @__PURE__ */ O({
         return Array.isArray(t.value) ? !!t.value.find((r) => r.toDateString() === e.toDateString()) : u();
       if (a.type === "daterange")
         return Array.isArray(t.value) ? D(e, t.value) : u();
-    }, o = N(a.initialDate), t = N(c(a.modelValue));
-    k(() => {
-      s("update:model-value", t.value);
+    }, o = x(a.initialDate), t = x(c(a.modelValue));
+    O(() => {
+      i("update:model-value", t.value);
     });
-    let p = j([]);
+    let p = k([]);
     const f = () => {
-      p = [], J(o, a.range).forEach((l) => {
+      p = [], K(o, a.range).forEach((l) => {
         const r = {};
         l.forEach((n, m) => {
-          const T = v[m];
+          const T = h[m];
           r[T] = n;
         }), p.push(r);
       });
     };
-    h(
+    v(
       () => a.initialDate,
       (e) => {
         o.value = e;
@@ -94,43 +95,43 @@ const le = /* @__PURE__ */ O({
       {
         deep: !0
       }
-    ), h(o, () => {
-      f(), s("update-initial-date", o.value);
-    }), h(
+    ), v(o, () => {
+      f(), i("update-initial-date", o.value);
+    }), v(
       () => a.modelValue,
       (e) => {
         t.value = c(e);
       }
     );
-    const M = i(() => new Date(o.value.setMonth(o.value.getMonth() - 1))), A = i(() => new Date(o.value.setMonth(o.value.getMonth() + 1))), E = i(() => {
-      const { range: e } = a, l = e ? $(o.value, e[0]) : !0, r = e ? F(o.value, e[1]) : !0, n = G(e);
+    const M = s(() => new Date(o.value.setMonth(o.value.getMonth() - 1))), A = s(() => new Date(o.value.setMonth(o.value.getMonth() + 1))), V = s(() => {
+      const { range: e } = a, l = e ? F(o.value, e[0]) : !0, r = e ? G(o.value, e[1]) : !0, n = J(e);
       return {
         showPreviousMonthButton: l,
         showNextMonthButton: r,
         showTodayButton: n
       };
-    }), H = i(
-      () => z({
+    }), E = s(
+      () => j({
         "nmorph-calendar": []
       })
-    ), x = (e) => typeof e == "number" ? `${e}px` : e, I = i(() => ({
-      ...a.cellHeight !== void 0 && { "--table-data-cell-height": x(a.cellHeight) }
-    })), P = (e) => e;
+    ), H = s(() => ({
+      ...a.cellHeight !== void 0 && { "--table-data-cell-height": z(a.cellHeight) }
+    })), I = (e) => e;
     f();
-    const S = { props: a, emit: s, days: v, setPreviousMonth: y, setTodayMonth: B, setNextMonth: g, wrongType: u, convertValue: c, clickDate: q, isDateInRange: D, isValueSelected: V, initialDate: o, selectedValue: t, get calendar() {
+    const S = { props: a, emit: i, days: h, setPreviousMonth: y, setTodayMonth: C, setNextMonth: g, wrongType: u, convertValue: c, clickDate: B, isDateInRange: D, isValueSelected: q, initialDate: o, selectedValue: t, get calendar() {
       return p;
     }, set calendar(e) {
       p = e;
-    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: E, modifiers: H, getCssSize: x, styles: I, dateData: P, get NmorphTable() {
-      return Q;
+    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: V, modifiers: E, styles: H, dateData: I, get NmorphTable() {
+      return U;
     }, get NmorphTableColumn() {
-      return L;
+      return Q;
     }, get NmorphTableCell() {
-      return K;
+      return L;
     }, NmorphCalendarHeader: W };
     return Object.defineProperty(S, "__isScriptSetup", { enumerable: !1, value: !0 }), S;
   }
 });
 export {
-  le as default
+  ue as default
 };

package/dist/components/data/nmorph-card/NmorphCard.vue2.js

@@ -1,8 +1,9 @@
 import './NmorphCard.css';
-import { defineComponent as f, useSlots as l, computed as o } from "vue";
+import { defineComponent as p, useSlots as l, computed as o } from "vue";
 import { NmorphShadowType as u } from "../../../types/index.js";
-import { useModifiers as m } from "../../../utils/create-modifiers.js";
-const b = /* @__PURE__ */ f({
+import { useModifiers as f } from "../../../utils/create-modifiers.js";
+import { toCssSize as m } from "../../../utils/common.js";
+const S = /* @__PURE__ */ p({
   __name: "NmorphCard",
   props: {
     shadowType: { type: null, required: !1, default: "outset" },
@@ -12,22 +13,25 @@ const b = /* @__PURE__ */ f({
     fill: { type: Boolean, required: !1, default: !0 },
     tag: { type: String, required: !1, default: "div" }
   },
-  setup(i, { expose: s }) {
-    s();
-    const e = i, a = l(), n = o(
-      () => m({
+  setup(t, { expose: i }) {
+    i();
+    const e = t, a = l(), n = o(
+      () => f({
         nmorph: [u[e.shadowType]],
         "nmorph-card": [e.shadowType, e.fill ? "fill" : "fit-content"]
       })
-    ), d = (r) => typeof r == "number" ? `${r}px` : r, p = o(() => ({
-      ...e.shadowType === "combined" && {
-        "--nmorph-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
-      },
-      ...e.cardPadding !== void 0 && { "--card-padding": d(e.cardPadding) }
-    })), t = { props: e, slots: a, modifiers: n, getCssSize: d, styles: p };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+    ), s = o(() => {
+      const d = e.cardPadding !== void 0 ? m(e.cardPadding) : void 0;
+      return {
+        ...e.shadowType === "combined" && {
+          "--nmorph-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
+        },
+        ...d !== void 0 && { "--card-padding": d, padding: d }
+      };
+    }), r = { props: e, slots: a, modifiers: n, styles: s };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
 });
 export {
-  b as default
+  S as default
 };

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphCollapseItem.css';
 import { defineComponent as H, ref as u, computed as d, inject as b, onMounted as z, onBeforeUnmount as M, watch as h, nextTick as w } from "vue";
 import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as $ } from "../../../../../types/index.js";
-const D = /* @__PURE__ */ H({
+import { NmorphComponentHeight as x } from "../../../../../types/index.js";
+const N = /* @__PURE__ */ H({
   __name: "NmorphCollapseItem",
   props: {
     height: { type: null, required: !1, default: "basic" },
@@ -17,15 +17,11 @@ const D = /* @__PURE__ */ H({
     O();
     const e = y, p = _, n = u(!1), k = d(
       () => g({
-        "nmorph-collapse-item": [
-          `${e.disabled && "disabled"}`,
-          `${e.block && "block"}`,
-          `${n.value && "is-open"}`
-        ]
+        "nmorph-collapse-item": [e.disabled && "disabled", e.block && "block", n.value && "is-open"]
       })
     ), S = d(
       () => g({
-        nmorph: [$[e.height]]
+        nmorph: [x[e.height]]
       })
     ), c = (t) => typeof t == "number" ? `${t}ms` : t, C = d(() => ({
       ...e.transitionSpeed !== void 0 && { "--transition-speed": c(e.transitionSpeed) }
@@ -56,5 +52,5 @@ const D = /* @__PURE__ */ H({
   }
 });
 export {
-  D as default
+  N as default
 };

package/dist/components/data/nmorph-empty/NmorphEmpty.vue.js

@@ -14,7 +14,7 @@ const y = ["role", "aria-label"], f = {
   key: 2,
   class: "nmorph-empty__action"
 };
-function k(e, z, b, o, g, C) {
+function k(e, z, b, o, C, E) {
   return t(), i("div", {
     class: d(o.modifiers),
     style: m(o.styles),
@@ -24,8 +24,8 @@ function k(e, z, b, o, g, C) {
     o.hasIcon ? (t(), i("div", f, [
       r(e.$slots, "icon", {}, () => [
         n(o.NmorphIcon, {
-          width: o.getCssSize(o.props.iconSize),
-          height: o.getCssSize(o.props.iconSize)
+          width: o.toCssSize(o.props.iconSize),
+          height: o.toCssSize(o.props.iconSize)
         }, {
           default: p(() => [
             n(o.NmorphIconFolderOpened)