@nmorph/nmorph-ui-kit 2.2.36 → 2.2.38

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

@@ -1,10 +1,11 @@
 import './NmorphEmpty.css';
-import { defineComponent as f, useSlots as c, computed as t } from "vue";
-import { NmorphShadowType as h } from "../../../types/index.js";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { defineComponent as u, useSlots as f, computed as t } from "vue";
+import { NmorphShadowType as c } from "../../../types/index.js";
+import { useModifiers as h } from "../../../utils/create-modifiers.js";
+import { toCssSize as r } from "../../../utils/common.js";
 import g from "../../../assets/icons/folder-opened.svg.js";
-import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const z = /* @__PURE__ */ f({
+import y from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const z = /* @__PURE__ */ u({
   __name: "NmorphEmpty",
   props: {
     title: { type: String, required: !1, default: "No data" },
@@ -19,23 +20,25 @@ const z = /* @__PURE__ */ f({
     ariaLabel: { type: String, required: !1, default: void 0 },
     ariaOrientation: { type: String, required: !1, default: void 0 }
   },
-  setup(p, { expose: s }) {
-    s();
-    const e = p, o = c(), r = (i) => typeof i == "number" ? `${i}px` : i, a = t(() => !e.hideIcon || !!o.icon), d = t(() => !!(e.description || o.description)), l = t(() => e.ariaLabel || e.title), m = t(
-      () => y({
-        nmorph: [e.design === "nmorph" ? h[e.shadowType] : ""],
+  setup(n, { expose: p }) {
+    p();
+    const e = n, o = f(), s = t(() => !e.hideIcon || !!o.icon), a = t(() => !!(e.description || o.description)), d = t(() => e.ariaLabel || e.title), l = t(
+      () => h({
+        nmorph: [e.design === "nmorph" ? c[e.shadowType] : ""],
         "nmorph-empty": [e.design]
       })
-    ), u = t(() => ({
+    ), m = t(() => ({
       "--nmorph-empty-icon-size": r(e.iconSize),
       "--nmorph-empty-min-height": r(e.minHeight),
       "--nmorph-empty-padding": r(e.padding)
-    })), n = { props: e, slots: o, getCssSize: r, hasIcon: a, hasDescription: d, label: l, modifiers: m, styles: u, get NmorphIcon() {
-      return S;
+    })), i = { props: e, slots: o, hasIcon: s, hasDescription: a, label: d, modifiers: l, styles: m, get NmorphIcon() {
+      return y;
     }, get NmorphIconFolderOpened() {
       return g;
+    }, get toCssSize() {
+      return r;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {

package/dist/components/data/nmorph-image/NmorphImage.css

@@ -0,0 +1 @@
+.nmorph-image{--width: auto;--height: 100%;display:flex;justify-content:center;align-items:center;width:var(--width);height:var(--height)}.nmorph-image.nmorph--shadow-combined{border:var(--nmorph-image-frame-border) solid var(--nmorph-main-color)}.nmorph-image img{width:100%;height:100%;object-fit:var(--nmorph-image-fit)}.nmorph-image__loading,.nmorph-image__load-failed{padding:1rem}.nmorph-image--hide img{width:0;height:0;opacity:0}

package/dist/components/data/nmorph-image/NmorphImage.vue.js

@@ -1,5 +1,7 @@
+import './NmorphImage.css';
 import l from "./NmorphImage.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeStyle as d, normalizeClass as m, createElementVNode as c, renderSlot as i, createTextVNode as s, toDisplayString as t, createCommentVNode as n } from "vue";
+import { openBlock as r, createElementBlock as e, normalizeStyle as m, normalizeClass as d, createElementVNode as c, renderSlot as i, createTextVNode as t, toDisplayString as s, createCommentVNode as n } from "vue";
+/* empty css                 */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
 const p = ["src", "alt", "srcset"], g = {
   key: 0,
@@ -9,12 +11,12 @@ const p = ["src", "alt", "srcset"], g = {
   class: "nmorph-image__loading"
 };
 function h(a, y, k, o, v, L) {
-  return o.props.src ? (e(), r(
+  return o.props.src ? (r(), e(
     "div",
     {
       key: 0,
-      class: m(o.modifiers),
-      style: d(o.styles)
+      class: d(o.modifiers),
+      style: m(o.styles)
     },
     [
       c("img", {
@@ -24,18 +26,18 @@ function h(a, y, k, o, v, L) {
         onLoad: o.onImageLoad,
         onError: o.onImageError
       }, null, 40, p),
-      o.loadingFailed ? (e(), r("div", g, [
+      o.loadingFailed ? (r(), e("div", g, [
         i(a.$slots, "error", {}, () => [
-          s(
-            t(o.computedLoadFailedText),
+          t(
+            s(o.computedLoadFailedText),
             1
             /* TEXT */
           )
         ])
-      ])) : o.imageLoadFinished ? n("v-if", !0) : (e(), r("div", f, [
+      ])) : o.imageLoadFinished ? n("v-if", !0) : (r(), e("div", f, [
         i(a.$slots, "loading", {}, () => [
-          s(
-            t(o.computedLoadingText),
+          t(
+            s(o.computedLoadingText),
             1
             /* TEXT */
           )
@@ -46,7 +48,7 @@ function h(a, y, k, o, v, L) {
     /* CLASS, STYLE */
   )) : n("v-if", !0);
 }
-const I = /* @__PURE__ */ _(l, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image/NmorphImage.vue"]]);
+const S = /* @__PURE__ */ _(l, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image/NmorphImage.vue"]]);
 export {
-  I as default
+  S as default
 };

package/dist/components/data/nmorph-image/NmorphImage.vue2.js

@@ -1,3 +1,4 @@
+import './NmorphImage.css';
 import { defineComponent as _, computed as t, ref as s } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
 import { useI18n as h } from "vue-i18n";
@@ -21,8 +22,8 @@ const b = /* @__PURE__ */ _({
       r.value = !0, a.value = !0, d("error", i);
     }, l = t(() => r.value && a.value), v = t(
       () => y({
-        nmorph: [`${e.frameBorder > 0 && "shadow-combined"}`],
-        "nmorph-image": [`${(l.value || !r.value) && "hide"}`]
+        nmorph: [e.frameBorder > 0 && "shadow-combined"],
+        "nmorph-image": [(l.value || !r.value) && "hide"]
       })
     ), T = t(() => ({
       "--nmorph-image-fit": e.fit || "cover",

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue2.js

@@ -1,18 +1,19 @@
 import './NmorphImagePreview.css';
-import { defineComponent as z, ref as s, watch as F, computed as n } from "vue";
+import { defineComponent as z, ref as u, watch as F, computed as n } from "vue";
 import { useModifiers as H } from "../../../utils/create-modifiers.js";
+import { toCssSize as m } from "../../../utils/common.js";
 import R from "../../../assets/icons/shrink.svg.js";
 import T from "../../../assets/icons/rotate-right.svg.js";
 import D from "../../../assets/icons/rotate-left.svg.js";
 import V from "../../../assets/icons/zoom-in.svg.js";
 import P from "../../../assets/icons/zoom-out.svg.js";
 import Z from "../../../assets/icons/enlarge.svg.js";
-import $ from "../../../assets/icons/chevron-down.svg.js";
-import j from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import E from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import G from "../../basic/nmorph-button/NmorphButton.vue.js";
-import J from "../nmorph-image/NmorphImage.vue.js";
-const ie = /* @__PURE__ */ z({
+import j from "../../../assets/icons/chevron-down.svg.js";
+import E from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import J from "../../basic/nmorph-button/NmorphButton.vue.js";
+import K from "../nmorph-image/NmorphImage.vue.js";
+const ue = /* @__PURE__ */ z({
   __name: "NmorphImagePreview",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -33,23 +34,23 @@ const ie = /* @__PURE__ */ z({
   emits: ["update:model-value"],
   setup(S, { expose: I, emit: w }) {
     I();
-    const e = S, l = s(e.modelValue);
+    const e = S, l = u(e.modelValue);
     F(
       () => e.modelValue,
-      (r) => l.value = r
+      (a) => l.value = a
     );
     const q = n(
       () => H({
-        "nmorph-image-preview": [`${l.value && "opened"}`]
+        "nmorph-image-preview": [l.value && "opened"]
       })
-    ), a = s(e.initialIndex), b = n(() => typeof e.src == "string" ? e.src : e.src[a.value]), t = s(1), x = () => {
-      l.value = !0, m("update:model-value", l.value);
-    }, B = () => {
-      l.value = !1, m("update:model-value", l.value);
+    ), o = u(e.initialIndex), B = n(() => typeof e.src == "string" ? e.src : e.src[o.value]), t = u(1), b = () => {
+      l.value = !0, s("update:model-value", l.value);
+    }, x = () => {
+      l.value = !1, s("update:model-value", l.value);
     }, c = () => {
-      o.value = o.value + 90, o.value >= 360 && (o.value = 0);
+      r.value = r.value + 90, r.value >= 360 && (r.value = 0);
     }, p = () => {
-      o.value = o.value - 90, o.value <= -360 && (o.value = 0);
+      r.value = r.value - 90, r.value <= -360 && (r.value = 0);
     }, d = () => {
       t.value < e.maxScaleLevel && (t.value += e.scaleStep), t.value = parseFloat(t.value.toFixed(3));
     }, v = () => {
@@ -58,21 +59,21 @@ const ie = /* @__PURE__ */ z({
       t.value = 1;
     }, g = () => {
       t.value = 1;
-    }, o = s(0), _ = () => {
-      const r = e.src.length - 1, i = a.value - 1;
-      i < 0 ? a.value = r : a.value = i;
+    }, r = u(0), _ = () => {
+      const a = e.src.length - 1, i = o.value - 1;
+      i < 0 ? o.value = a : o.value = i;
     }, L = () => {
-      const r = e.src.length - 1, i = a.value + 1;
-      i > r ? a.value = 0 : a.value = i;
+      const a = e.src.length - 1, i = o.value + 1;
+      i > a ? o.value = 0 : o.value = i;
     }, A = n(() => {
-      let r = {
+      let a = {
         icon: R,
         handler: g
       };
-      return f.value && (r = {
+      return f.value && (a = {
         icon: Z,
         handler: h
-      }), r;
+      }), a;
     }), C = [
       {
         icon: T,
@@ -90,27 +91,27 @@ const ie = /* @__PURE__ */ z({
         icon: P,
         handler: v
       }
-    ], m = w, N = n(() => Array.isArray(e.src) && e.src.length > 0), M = n(() => e.showNavigationButtons && N.value), u = (r) => typeof r == "number" ? `${r}px` : r, O = n(() => ({
-      ...e.width !== void 0 && { "--width": u(e.width) },
-      ...e.height !== void 0 && { "--height": u(e.height) }
+    ], s = w, N = n(() => Array.isArray(e.src) && e.src.length > 0), M = n(() => e.showNavigationButtons && N.value), O = n(() => ({
+      ...e.width !== void 0 && { "--width": m(e.width) },
+      ...e.height !== void 0 && { "--height": m(e.height) }
     })), k = n(() => ({
       ...e.navigationButtonMargin !== void 0 && {
-        "--nmorph-image-preview-btn-margin": u(e.navigationButtonMargin)
+        "--nmorph-image-preview-btn-margin": m(e.navigationButtonMargin)
       }
-    })), y = { props: e, open: l, modifiers: q, currentIndex: a, triggerSource: b, scaleLevel: t, clickHandler: x, closeHandler: B, rotateRight: c, rotateLeft: p, zoomIn: d, zoomOut: v, isLevelChangedToMin: f, enlargeToNormal: h, shrinkToNormal: g, rotateLevel: o, previousHandler: _, nextHandler: L, enlargeShrinkActionData: A, actions: C, emit: m, multipleSources: N, showNavigation: M, getCssSize: u, triggerStyle: O, portalStyle: k, get NmorphImage() {
-      return J;
+    })), y = { props: e, open: l, modifiers: q, currentIndex: o, triggerSource: B, scaleLevel: t, clickHandler: b, closeHandler: x, rotateRight: c, rotateLeft: p, zoomIn: d, zoomOut: v, isLevelChangedToMin: f, enlargeToNormal: h, shrinkToNormal: g, rotateLevel: r, previousHandler: _, nextHandler: L, enlargeShrinkActionData: A, actions: C, emit: s, multipleSources: N, showNavigation: M, triggerStyle: O, portalStyle: k, get NmorphImage() {
+      return K;
     }, get NmorphButton() {
-      return G;
+      return J;
     }, get NmorphIcon() {
-      return E;
+      return G;
     }, get NmorphOverlay() {
-      return j;
+      return E;
     }, get NmorphIconChevronDown() {
-      return $;
+      return j;
     } };
     return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
   }
 });
 export {
-  ie as default
+  ue as default
 };

package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js

@@ -23,7 +23,7 @@ const U = /* @__PURE__ */ _({
     d();
     const t = c, i = f, g = o(
       () => k({
-        "nmorph-pagination": [`${t.disabled && "disabled"}`]
+        "nmorph-pagination": [t.disabled && "disabled"]
       })
     ), s = {
       thick: "var(--thick-component)",

package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js

@@ -1,7 +1,8 @@
 import './NmorphProgress.css';
-import { defineComponent as y, computed as r, ref as p, onMounted as S } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-const A = /* @__PURE__ */ y({
+import { defineComponent as v, computed as r, ref as u, onMounted as y } from "vue";
+import { useModifiers as S } from "../../../utils/create-modifiers.js";
+import { toCssSize as q } from "../../../utils/common.js";
+const z = /* @__PURE__ */ v({
   __name: "NmorphProgress",
   props: {
     type: { type: String, required: !1, default: "linear" },
@@ -15,28 +16,28 @@ const A = /* @__PURE__ */ y({
     widthTransition: { type: String, required: !1, default: void 0 },
     indeterminateAnimation: { type: String, required: !1, default: void 0 }
   },
-  setup(d, { expose: f }) {
-    f();
-    const e = d, m = r(
-      () => q({
+  setup(c, { expose: p }) {
+    p();
+    const e = c, d = r(
+      () => S({
         "nmorph-progress": []
       })
-    ), o = r(() => Array.isArray(e.color) ? e.color.find((n) => n.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), a = r(() => e.indeterminate ? "var(--animation)" : "none"), i = p(null), t = p(1), g = r(() => `${t.value} ${t.value}`), h = r(() => t.value - e.percentage / 100 * t.value);
-    S(() => {
+    ), n = r(() => Array.isArray(e.color) ? e.color.find((h) => h.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), o = r(() => e.indeterminate ? "var(--animation)" : "none"), i = u(null), t = u(1), f = r(() => `${t.value} ${t.value}`), m = r(() => t.value - e.percentage / 100 * t.value);
+    y(() => {
       i.value && (t.value = 2 * Math.PI * i.value.r.baseVal.value);
     });
-    const s = r(() => `${e.circleSize}px`), l = r(() => `${e.percentage}%`), u = (n) => typeof n == "number" ? `${n}px` : n, v = r(() => ({
-      "--nmorph-progress-percentage": l.value,
-      "--nmorph-progress-color": o.value,
-      "--nmorph-progress-animation": a.value,
-      "--nmorph-progress-circle-size": s.value,
-      ...e.height !== void 0 && { "--height": u(e.height) },
+    const a = r(() => `${e.circleSize}px`), s = r(() => `${e.percentage}%`), g = r(() => ({
+      "--nmorph-progress-percentage": s.value,
+      "--nmorph-progress-color": n.value,
+      "--nmorph-progress-animation": o.value,
+      "--nmorph-progress-circle-size": a.value,
+      ...e.height !== void 0 && { "--height": q(e.height) },
       ...e.widthTransition !== void 0 && { "--width-transition": e.widthTransition },
       ...e.indeterminateAnimation !== void 0 && { "--animation": e.indeterminateAnimation }
-    })), c = { props: e, modifiers: m, color: o, animation: a, circle: i, circumference: t, strokeDasharray: g, strokeDashoffset: h, circleContainerSize: s, displayPercentage: l, getCssSize: u, styles: v };
-    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+    })), l = { props: e, modifiers: d, color: n, animation: o, circle: i, circumference: t, strokeDasharray: f, strokeDashoffset: m, circleContainerSize: a, displayPercentage: s, styles: g };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
 });
 export {
-  A as default
+  z as default
 };

package/dist/components/data/nmorph-qr-code/NmorphQRCode.vue2.js

@@ -1,8 +1,9 @@
 import './NmorphQRCode.css';
-import { defineComponent as q, computed as o } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { createNmorphQRCode as s } from "./qr-code.js";
-const x = /* @__PURE__ */ q({
+import { defineComponent as g, computed as r } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { toCssSize as h } from "../../../utils/common.js";
+import { createNmorphQRCode as a } from "./qr-code.js";
+const _ = /* @__PURE__ */ g({
   __name: "NmorphQRCode",
   props: {
     value: { type: [String, Number], required: !1, default: "" },
@@ -17,34 +18,34 @@ const x = /* @__PURE__ */ q({
   },
   setup(u, { expose: l }) {
     l();
-    const e = u, n = o(() => {
+    const e = u, n = r(() => {
       try {
-        return s(String(e.value), {
+        return a(String(e.value), {
           errorCorrectionLevel: e.level,
           minVersion: e.minVersion,
           maxVersion: e.maxVersion
         }), "";
-      } catch (r) {
-        return r instanceof Error ? r.message : "Unable to create QR code.";
+      } catch (t) {
+        return t instanceof Error ? t.message : "Unable to create QR code.";
       }
-    }), t = o(() => n.value ? null : s(String(e.value), {
+    }), o = r(() => n.value ? null : a(String(e.value), {
       errorCorrectionLevel: e.level,
       minVersion: e.minVersion,
       maxVersion: e.maxVersion
-    })), m = o(() => t.value ? t.value.size + e.margin * 2 : 1), d = o(() => t.value ? t.value.modules.flatMap(
-      (r, f) => r.map((g, v) => g ? `M${v + e.margin} ${f + e.margin}h1v1h-1z` : "").filter(Boolean)
-    ).join("") : ""), i = (r) => typeof r == "number" ? `${r}px` : r, p = o(() => ({
-      "--nmorph-qr-code-size": i(e.size),
+    })), s = r(() => o.value ? o.value.size + e.margin * 2 : 1), m = r(() => o.value ? o.value.modules.flatMap(
+      (t, f) => t.map((c, v) => c ? `M${v + e.margin} ${f + e.margin}h1v1h-1z` : "").filter(Boolean)
+    ).join("") : ""), d = r(() => ({
+      "--nmorph-qr-code-size": h(e.size),
       "--nmorph-qr-code-color": e.color,
       "--nmorph-qr-code-background": e.background
-    })), c = o(
-      () => y({
-        "nmorph-qr-code": [`${n.value && "error"}`]
+    })), p = r(
+      () => q({
+        "nmorph-qr-code": [n.value && "error"]
       })
-    ), a = { props: e, errorMessage: n, qrCode: t, viewBoxSize: m, path: d, getCssSize: i, styles: p, modifiers: c };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    ), i = { props: e, errorMessage: n, qrCode: o, viewBoxSize: s, path: m, styles: d, modifiers: p };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  x as default
+  _ as default
 };

package/dist/components/data/nmorph-skeleton/NmorphSkeleton.vue2.js

@@ -14,7 +14,7 @@ const f = /* @__PURE__ */ d({
     n();
     const e = r, a = o(
       () => l({
-        "nmorph-skeleton": [`${e.animated && e.loading && "loading"}`]
+        "nmorph-skeleton": [e.animated && e.loading && "loading"]
       })
     ), i = o(() => ({
       ...e.loadingGradient !== void 0 && { "--loading-gradient": e.loadingGradient }

package/dist/components/data/nmorph-table/NmorphTable.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphTable.css';
-import { defineComponent as P, computed as a, ref as n, provide as M, watch as K, nextTick as Q } from "vue";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
-import { generateUUID as Y } from "../../../utils/common.js";
-import z from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
-import { useVirtualList as F } from "../../../hooks/use-virtual-list.js";
-const re = /* @__PURE__ */ P({
+import { defineComponent as K, computed as a, ref as n, provide as B, watch as Q, nextTick as V } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { generateUUID as Y, toCssSize as M, resolveDomElement as $ } from "../../../utils/common.js";
+import F from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
+import { useVirtualList as G } from "../../../hooks/use-virtual-list.js";
+const le = /* @__PURE__ */ K({
   __name: "NmorphTable",
   props: {
     data: { type: Array, required: !1, default: () => [] },
@@ -21,37 +21,37 @@ const re = /* @__PURE__ */ P({
     cellHeight: { type: [Number, String], required: !1, default: void 0 },
     rowHoverBackground: { type: String, required: !1, default: void 0 }
   },
-  setup(T, { expose: _ }) {
-    _();
-    const t = T, I = a(
-      () => V({
-        "nmorph-table": [`${t.design}`]
+  setup(_, { expose: T }) {
+    T();
+    const t = _, I = a(
+      () => z({
+        "nmorph-table": [t.design]
       })
-    ), o = n([...t.data]), u = a(() => t.virtual), H = a(() => t.virtualRowHeight), x = a(() => t.virtualOverscan), S = a(() => t.virtualDynamicHeight), r = F(o, {
+    ), o = n([...t.data]), u = a(() => t.virtual), b = a(() => t.virtualRowHeight), H = a(() => t.virtualOverscan), S = a(() => t.virtualDynamicHeight), r = G(o, {
       enabled: u,
-      itemHeight: H,
-      overscan: x,
+      itemHeight: b,
+      overscan: H,
       dynamic: S
-    }), C = a(
+    }), x = a(
       () => u.value ? r.virtualItems.value : o.value.map((e, l) => ({ item: e, index: l }))
-    ), R = a(() => C.value.map((e) => e.item)), s = n(-1), h = n(0), d = n(t.sort), W = (e, l) => {
-      d.value && (d.value[l] = e, o.value.sort((y, w) => {
-        const b = String(y[l]).toLowerCase(), i = String(w[l]).toLowerCase();
+    ), C = a(() => x.value.map((e) => e.item)), s = n(-1), h = n(0), d = n(t.sort), W = (e, l) => {
+      d.value && (d.value[l] = e, o.value.sort((g, y) => {
+        const w = String(g[l]).toLowerCase(), i = String(y[l]).toLowerCase();
         if (!d.value)
           return 0;
         const f = d.value[l];
-        return f === "ascending" ? b.localeCompare(i) : f === "descending" ? i.localeCompare(b) : 0;
+        return f === "ascending" ? w.localeCompare(i) : f === "descending" ? i.localeCompare(w) : 0;
       }));
-    }, p = n(null), c = n([]);
-    M("table-data", { rows: R, columns: c });
+    }, m = n(null), c = n([]);
+    B("table-data", { rows: C, columns: c });
     const D = a(() => {
-      const e = c.value.map((i) => i.width).filter((i) => !!i), l = e.length, y = e.reduce((i, f) => (i += Number(f), i), 0), w = c.value.length - l;
-      return p.value?.clientWidth ? (p.value?.clientWidth - y) / w : 0;
-    }), N = (e) => e !== "" ? e : D.value, m = n(0);
-    K(
+      const e = c.value.map((i) => i.width).filter((i) => !!i), l = e.length, g = e.reduce((i, f) => (i += Number(f), i), 0), y = c.value.length - l;
+      return m.value?.clientWidth ? (m.value?.clientWidth - g) / y : 0;
+    }), N = (e) => e !== "" ? e : D.value, p = n(0);
+    Q(
       () => t.data,
       async () => {
-        m.value = m.value + 1, o.value = [...t.data], c.value = [], await Q();
+        p.value = p.value + 1, o.value = [...t.data], c.value = [], await V();
         const e = r.containerRef.value;
         e && (e.scrollTop = Math.min(
           h.value,
@@ -62,38 +62,34 @@ const re = /* @__PURE__ */ P({
         immediate: !0
       }
     );
-    const O = (e) => typeof e == "object" ? "" : e, q = Y();
-    M("table-identifier", q);
-    const g = (e) => typeof e == "number" ? `${e}px` : e, k = a(() => g(t.virtualHeight)), $ = a(() => ({
+    const O = (e) => typeof e == "object" ? "" : e, R = Y();
+    B("table-identifier", R);
+    const q = a(() => M(t.virtualHeight)), A = a(() => ({
       ...t.borderColor !== void 0 && { "--border-color": t.borderColor },
-      ...t.cellHeight !== void 0 && { "--table-cell-height": g(t.cellHeight) },
+      ...t.cellHeight !== void 0 && { "--table-cell-height": M(t.cellHeight) },
       ...t.rowHoverBackground !== void 0 && { "--table-background-row-hover": t.rowHoverBackground }
-    })), A = a(() => ({
+    })), E = a(() => ({
       "--table-virtual-row-height": `${t.virtualRowHeight}px`,
-      height: u.value ? k.value : void 0,
+      height: u.value ? q.value : void 0,
       overflowY: u.value ? "auto" : void 0
-    })), L = a(() => ({
-      height: `${r.totalHeight.value}px`
-    })), U = a(() => ({
-      transform: `translateY(${r.offsetTop.value}px)`
-    })), j = (e, l) => {
-      r.measureElement(l, e);
-    }, E = () => {
+    })), L = r.spacerStyle, U = r.contentStyle, j = (e, l) => {
+      r.measureElement(l, $(e));
+    }, P = () => {
       r.scrollHandler(), h.value = r.containerRef.value?.scrollTop || 0;
     }, v = (e) => {
       if (!o.value.length) return;
       const l = s.value < 0 ? 0 : Math.min(Math.max(s.value + e, 0), o.value.length - 1);
       s.value = l, r.scrollToIndex(l);
-    }, B = { props: t, modifiers: I, rows: o, virtualEnabled: u, virtualRowHeight: H, virtualOverscan: x, virtualDynamicHeight: S, virtualList: r, renderedRows: C, tableRows: R, activeRowIndex: s, lastScrollTop: h, sortData: d, onSort: W, nmorphDOMTable: p, columns: c, defaultColWidth: D, getWidth: N, key: m, tableData: O, tableIdentifier: q, getCssSize: g, virtualHeight: k, tableStyle: $, tableBodyStyle: A, virtualSpacerStyle: L, virtualContentStyle: U, setVirtualRowRef: j, scrollHandler: E, moveActiveRow: v, tableKeydownHandler: (e) => {
+    }, k = { props: t, modifiers: I, rows: o, virtualEnabled: u, virtualRowHeight: b, virtualOverscan: H, virtualDynamicHeight: S, virtualList: r, renderedRows: x, tableRows: C, activeRowIndex: s, lastScrollTop: h, sortData: d, onSort: W, nmorphDOMTable: m, columns: c, defaultColWidth: D, getWidth: N, key: p, tableData: O, tableIdentifier: R, virtualHeight: q, tableStyle: A, tableBodyStyle: E, virtualSpacerStyle: L, virtualContentStyle: U, setVirtualRowRef: j, scrollHandler: P, moveActiveRow: v, tableKeydownHandler: (e) => {
       u.value && (e.key === "ArrowDown" ? (e.preventDefault(), v(1)) : e.key === "ArrowUp" ? (e.preventDefault(), v(-1)) : e.key === "Home" ? (e.preventDefault(), s.value = 0, r.scrollToIndex(0)) : e.key === "End" ? (e.preventDefault(), s.value = o.value.length - 1, r.scrollToIndex(o.value.length - 1)) : e.key === "PageDown" ? (e.preventDefault(), v(
         Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )) : e.key === "PageUp" && (e.preventDefault(), v(
         -Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )));
-    }, NmorphSortButton: z };
-    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
+    }, NmorphSortButton: F };
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  re as default
+  le as default
 };

package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue2.js

@@ -1,8 +1,9 @@
 import './NmorphVirtualList.css';
-import { defineComponent as K, computed as r } from "vue";
-import { useModifiers as $ } from "../../../utils/create-modifiers.js";
-import { useVirtualList as N } from "../../../hooks/use-virtual-list.js";
-const j = /* @__PURE__ */ K({
+import { defineComponent as K, computed as t } from "vue";
+import { useModifiers as N } from "../../../utils/create-modifiers.js";
+import { toCssSize as p } from "../../../utils/common.js";
+import { useVirtualList as T } from "../../../hooks/use-virtual-list.js";
+const B = /* @__PURE__ */ K({
   __name: "NmorphVirtualList",
   props: {
     items: { type: Array, required: !1, default: () => [] },
@@ -17,44 +18,44 @@ const j = /* @__PURE__ */ K({
   },
   emits: ["on-scroll"],
   setup(y, { expose: h, emit: g }) {
-    const e = y, a = g, l = r(() => e.items), o = r(() => !e.disabled), u = r(() => e.itemHeight), m = r(() => e.overscan), d = r(() => e.dynamic), i = N(l, {
+    const e = y, n = g, a = t(() => e.items), o = t(() => !e.disabled), l = t(() => e.itemHeight), u = t(() => e.overscan), m = t(() => e.dynamic), r = T(a, {
       enabled: o,
-      itemHeight: u,
-      overscan: m,
-      dynamic: d
-    }), c = i.containerRef, v = r(
-      () => $({
-        "nmorph-virtual-list": [`${e.disabled && "disabled"}`, `${e.dynamic && "dynamic"}`]
+      itemHeight: l,
+      overscan: u,
+      dynamic: m
+    }), d = r.containerRef, v = t(
+      () => N({
+        "nmorph-virtual-list": [e.disabled && "disabled", e.dynamic && "dynamic"]
       })
-    ), n = (t) => typeof t == "number" ? `${t}px` : t, b = r(() => ({
-      "--nmorph-virtual-list-height": n(e.height),
-      "--nmorph-virtual-list-max-height": n(e.maxHeight),
+    ), b = t(() => ({
+      "--nmorph-virtual-list-height": p(e.height),
+      "--nmorph-virtual-list-max-height": p(e.maxHeight),
       "--nmorph-virtual-list-item-height": `${e.itemHeight}px`
-    })), x = r(() => ({
-      transform: o.value ? `translateY(${i.offsetTop.value}px)` : void 0
-    })), S = r(() => ({
-      height: o.value ? `${i.totalHeight.value}px` : void 0
-    })), _ = r(() => i.virtualItems.value), q = (t, s) => {
-      if (typeof e.itemKey == "function") return e.itemKey(t, s);
-      if (typeof e.itemKey == "string" && t && typeof t == "object") {
-        const p = t[e.itemKey];
-        return p === void 0 ? s : String(p);
+    })), S = t(() => ({
+      transform: o.value ? `translateY(${r.offsetTop.value}px)` : void 0
+    })), _ = t(() => ({
+      height: o.value ? `${r.totalHeight.value}px` : void 0
+    })), q = t(() => r.virtualItems.value), x = (i, s) => {
+      if (typeof e.itemKey == "function") return e.itemKey(i, s);
+      if (typeof e.itemKey == "string" && i && typeof i == "object") {
+        const f = i[e.itemKey];
+        return f === void 0 ? s : String(f);
       }
       return s;
-    }, H = (t) => {
-      i.scrollHandler(), a("on-scroll", t);
-    }, I = (t, s) => {
-      i.measureElement(s, t);
+    }, H = (i) => {
+      r.scrollHandler(), n("on-scroll", i);
+    }, I = (i, s) => {
+      r.measureElement(s, i);
     };
     h({
-      containerRef: c,
-      refresh: i.refresh,
-      scrollToIndex: i.scrollToIndex
+      containerRef: d,
+      refresh: r.refresh,
+      scrollToIndex: r.scrollToIndex
     });
-    const f = { props: e, emit: a, items: l, enabled: o, itemHeight: u, overscan: m, dynamic: d, virtualList: i, containerRef: c, modifiers: v, getCssSize: n, styles: b, contentStyle: x, spacerStyle: S, renderedItems: _, getItemKey: q, scrollHandler: H, setItemRef: I };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+    const c = { props: e, emit: n, items: a, enabled: o, itemHeight: l, overscan: u, dynamic: m, virtualList: r, containerRef: d, modifiers: v, styles: b, contentStyle: S, spacerStyle: _, renderedItems: q, getItemKey: x, scrollHandler: H, setItemRef: I };
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  j as default
+  B as default
 };