@nmorph/nmorph-ui-kit 2.2.36 → 2.2.37

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js

@@ -1,16 +1,17 @@
 import './NmorphDatePicker.css';
 import { defineComponent as O, computed as a, ref as u } from "vue";
 import { useModifiers as k } from "../../../utils/create-modifiers.js";
+import { toCssSize as s } from "../../../utils/common.js";
 import { NmorphComponentHeight as B } from "../../../types/index.js";
 import P from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
 import V from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
-import { useI18n as $ } from "vue-i18n";
-import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
+import { useI18n as j } from "vue-i18n";
+import { useFormItemInput as z } from "../nmorph-form/use-form-item-input.js";
 import { formatDate as f } from "../../data/nmorph-calendar/utils.js";
-import z from "../../../assets/icons/calendar.svg.js";
-import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import M from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const Z = /* @__PURE__ */ O({
+import L from "../../../assets/icons/calendar.svg.js";
+import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import R from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const ee = /* @__PURE__ */ O({
   __name: "NmorphDatePicker",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -35,23 +36,23 @@ const Z = /* @__PURE__ */ O({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: c, emit: y }) {
+  setup(m, { expose: c, emit: v }) {
     c();
-    const { t: p } = $(), e = m, { id: h, name: v, autocomplete: g } = j(e), n = a(() => e.placeholder ? e.placeholder : p("pickADate")), t = u(e.modelValue), d = y, l = u(!1), q = () => {
+    const { t: i } = j(), e = m, { id: y, name: h, autocomplete: g } = z(e), n = a(() => e.placeholder ? e.placeholder : i("pickADate")), t = u(e.modelValue), d = v, l = u(!1), q = () => {
       l.value = !0;
     }, S = () => {
       l.value = !1;
     }, N = a(
       () => k({
         nmorph: [B[e.height]],
-        "nmorph-date-picker": [`${e.disabled && "disabled"}`, e.type, `${l.value && "focus"}`]
+        "nmorph-date-picker": [e.disabled && "disabled", e.type, l.value && "focus"]
       })
-    ), i = (r) => typeof r == "number" ? `${r}px` : r, b = a(() => ({
-      ...e.width !== void 0 && { "--width": i(e.width) },
+    ), D = a(() => ({
+      ...e.width !== void 0 && { "--width": s(e.width) },
       ...e.calendarCellHeight !== void 0 && {
-        "--date-picker-calendar-cell-height": i(e.calendarCellHeight)
+        "--date-picker-calendar-cell-height": s(e.calendarCellHeight)
       }
-    })), o = u(!1), D = u(null), C = () => {
+    })), o = u(!1), b = u(null), C = () => {
       o.value = !1;
     }, _ = () => {
       o.value = !o.value;
@@ -74,16 +75,16 @@ const Z = /* @__PURE__ */ O({
       t.value = r, d("update:model-value", t.value);
     }, I = (r) => {
       t.value = r, d("update:model-value", t.value);
-    }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), s = { t: p, props: e, id: h, name: v, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, getCssSize: i, styles: b, open: o, nmorphInputDOMRef: D, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
-      return M;
+    }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), p = { t: i, props: e, id: y, name: h, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, styles: D, open: o, nmorphInputDOMRef: b, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
+      return R;
     }, get NmorphIcon() {
-      return L;
+      return M;
     }, get NmorphIconCalendar() {
-      return z;
+      return L;
     }, NmorphClearButton: P, NmorphDatePickerContent: V };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  Z as default
+  ee as default
 };

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphFileUpload.css';
 import { defineComponent as M, computed as y, ref as F, watch as E, onBeforeUnmount as W } from "vue";
-import { useModifiers as $ } from "../../../utils/create-modifiers.js";
-import { useI18n as D } from "vue-i18n";
-import { resolution as T, NmorphImageResolution as A, NmorphAudioResolution as K, NmorphVideoResolution as z, NmorphArchiveResolution as G } from "./types.js";
+import { useModifiers as D } from "../../../utils/create-modifiers.js";
+import { useI18n as K } from "vue-i18n";
+import { resolution as T, NmorphImageResolution as A, NmorphAudioResolution as $, NmorphVideoResolution as z, NmorphArchiveResolution as G } from "./types.js";
 import H from "../../../assets/icons/doc.svg.js";
 import J from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
 import Q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
@@ -24,7 +24,7 @@ const ye = /* @__PURE__ */ M({
   },
   emits: ["update:model-value", "on-unsupported-file-type-error"],
   setup(R, { expose: U, emit: _ }) {
-    const { t: w } = D(), n = R, d = _, B = y(() => n.buttonText ? n.buttonText : w("selectFile")), g = Object.entries(T), v = {
+    const { t: w } = K(), n = R, d = _, B = y(() => n.buttonText ? n.buttonText : w("selectFile")), g = Object.entries(T), v = {
       "svg-xml": "svg",
       "audio-ogg": "ogg",
       "wideo-ogg": "ogg"
@@ -60,7 +60,7 @@ const ye = /* @__PURE__ */ M({
     }), V = (e) => {
       const o = u(e);
       let t = H;
-      return (e.type.toLowerCase().startsWith("image/") || o.some((r) => i(r, A))) && (t = te), (e.type.toLowerCase().startsWith("audio/") || o.some((r) => i(r, K))) && (t = Y), (e.type.toLowerCase().startsWith("video/") || o.some((r) => i(r, z))) && (t = Z), o.some((r) => i(r, G)) && (t = ee), t;
+      return (e.type.toLowerCase().startsWith("image/") || o.some((r) => i(r, A))) && (t = te), (e.type.toLowerCase().startsWith("audio/") || o.some((r) => i(r, $))) && (t = Y), (e.type.toLowerCase().startsWith("video/") || o.some((r) => i(r, z))) && (t = Z), o.some((r) => i(r, G)) && (t = ee), t;
     }, p = F(null), a = F([...n.modelValue]), l = /* @__PURE__ */ new Set(), m = () => {
       const e = p.value;
       e && (e.value = "");
@@ -106,8 +106,8 @@ const ye = /* @__PURE__ */ M({
       Array.from(l).forEach((e) => c(e));
     }), U({ inputDOMRef: p });
     const q = y(
-      () => $({
-        "nmorph-file-upload": [`${n.disabled && "disabled"}`]
+      () => D({
+        "nmorph-file-upload": [n.disabled && "disabled"]
       })
     ), x = { t: w, props: n, emit: d, computedButtonText: B, knownResolutionEntries: g, extensionByResolution: v, getPlainType: C, getFileExtension: f, getKnownResolutionByMime: I, getFileTypeCandidates: u, isKnownFileType: i, isImageFile: P, isFileAllowed: L, inputAccept: S, typeFileIconMap: V, inputDOMRef: p, files: a, createdPreviewUrls: l, resetInputValue: m, revokePreviewUrl: c, revokeRemovedPreviewUrls: N, filesChanged: h, openFileSelector: O, handleFileUpload: j, removeFile: k, modifiers: q, get NmorphButton() {
       return X;

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue2.js

@@ -28,8 +28,8 @@ const B = /* @__PURE__ */ p({
     const m = o(
       () => h({
         "nmorph-form-item": [
-          `${e.label && "labeled"}`,
-          `${i.value && (t.value?.valid ? "valid" : "invalid")}`
+          e.label && "labeled",
+          i.value && (t.value?.valid ? "valid" : "invalid")
         ]
       })
     ), l = { props: e, formData: r, validationData: t, ableToShowValidation: a, showStatusIcon: u, ableToAddValidationModifiers: i, modifiers: m, get NmorphValidationIcon() {

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue2.js

@@ -17,7 +17,7 @@ const h = /* @__PURE__ */ p({
     }), a = s(
       () => l({
         nmorph: [u[e.height]],
-        "nmorph-error-box": [`${e.staticHeight && "static-height"}`, `${t.value.length === 0 && "empty"}`]
+        "nmorph-error-box": [e.staticHeight && "static-height", t.value.length === 0 && "empty"]
       })
     ), o = { props: e, currentError: t, modifiers: a };
     return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue2.js

@@ -7,7 +7,7 @@ import T from "../../../assets/icons/plus-thin.svg.js";
 import D from "../../../assets/icons/minus-thin.svg.js";
 import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import z from "../../basic/nmorph-button/NmorphButton.vue.js";
-const K = /* @__PURE__ */ S({
+const E = /* @__PURE__ */ S({
   __name: "NmorphNumberInput",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
@@ -27,10 +27,7 @@ const K = /* @__PURE__ */ S({
     const e = m, { id: d, name: c, autocomplete: f, tabindex: h } = R(e), g = n(
       () => M({
         nmorph: [H[e.height]],
-        "nmorph-number-input": [
-          `${e.disabled && "disabled"}`,
-          `${e.actionBtnPositionRight && "action-btn-position-right"}`
-        ]
+        "nmorph-number-input": [e.disabled && "disabled", e.actionBtnPositionRight && "action-btn-position-right"]
       })
     ), t = l(e.modelValue), b = () => {
       t.value += e.step;
@@ -75,5 +72,5 @@ const K = /* @__PURE__ */ S({
   }
 });
 export {
-  K as default
+  E as default
 };

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue2.js

@@ -42,17 +42,17 @@ const de = /* @__PURE__ */ te({
     );
     const N = c(
       () => ae({
-        nmorph: [le[l.height], `${d.value && "focused"}`],
-        "nmorph-otp-input": [`${l.disabled && "disabled"}`]
+        nmorph: [le[l.height], d.value && "focused"],
+        "nmorph-otp-input": [l.disabled && "disabled"]
       })
     ), T = c(
       () => Array.from({ length: u.value }, (e, t) => t === 0 ? V.value : `${V.value}-${t + 1}`)
-    ), $ = c(() => l.mode === "numeric" ? "numeric" : "text"), E = c(() => q.value || "one-time-code"), B = c(() => {
+    ), E = c(() => l.mode === "numeric" ? "numeric" : "text"), B = c(() => q.value || "one-time-code"), C = c(() => {
       if (l.mode === "numeric") return "[0-9]*";
       if (l.mode === "alphanumeric") return "[A-Za-z0-9]*";
     }), h = (e) => {
       n.value[e] = i.value[e]?.inputDOMRef ?? null;
-    }, C = (e, t) => {
+    }, P = (e, t) => {
       i.value[t] = e, O(() => {
         h(t);
       });
@@ -90,7 +90,7 @@ const de = /* @__PURE__ */ te({
       y < u.value ? r(y) : r(u.value - 1);
     }, S = (e, t) => {
       H(e, t);
-    }, M = /* @__PURE__ */ new Map(), P = (e) => {
+    }, M = /* @__PURE__ */ new Map(), $ = (e) => {
       const t = M.get(e);
       if (t) return t;
       const a = c({
@@ -138,7 +138,7 @@ const de = /* @__PURE__ */ te({
       },
       { immediate: !0 }
     );
-    const z = { props: l, emit: f, id: V, name: w, autocomplete: q, tabindex: p, inputRefs: i, inputDOMRefs: n, focused: d, otpValue: o, normalizedLength: u, sanitizeValue: v, normalizeOtpValue: A, syncOtpValue: g, modifiers: N, fieldIds: T, inputMode: $, resolvedAutocomplete: E, inputPattern: B, syncInputDOMRef: h, setInputRef: C, selectField: _, focusField: r, blurFields: F, updateCharAt: m, insertValue: H, inputHandler: S, fieldModels: M, getFieldModel: P, backspaceHandler: k, deleteKeyHandler: x, arrowLeftHandler: L, arrowRightHandler: Z, homeHandler: K, endHandler: G, keydownHandler: J, pasteHandler: Q, focusHandler: U, blurHandler: W, getFieldTabindex: X, NmorphTextInput: oe };
+    const z = { props: l, emit: f, id: V, name: w, autocomplete: q, tabindex: p, inputRefs: i, inputDOMRefs: n, focused: d, otpValue: o, normalizedLength: u, sanitizeValue: v, normalizeOtpValue: A, syncOtpValue: g, modifiers: N, fieldIds: T, inputMode: E, resolvedAutocomplete: B, inputPattern: C, syncInputDOMRef: h, setInputRef: P, selectField: _, focusField: r, blurFields: F, updateCharAt: m, insertValue: H, inputHandler: S, fieldModels: M, getFieldModel: $, backspaceHandler: k, deleteKeyHandler: x, arrowLeftHandler: L, arrowRightHandler: Z, homeHandler: K, endHandler: G, keydownHandler: J, pasteHandler: Q, focusHandler: U, blurHandler: W, getFieldTabindex: X, NmorphTextInput: oe };
     return Object.defineProperty(z, "__isScriptSetup", { enumerable: !1, value: !0 }), z;
   }
 });

package/dist/components/form/nmorph-radio/NmorphRadio.vue2.js

@@ -25,7 +25,7 @@ const q = /* @__PURE__ */ h({
     }, d = l(() => o?.value === e.value || e.checked), i = l(() => e.height || a?.value || "thin"), f = l(
       () => g({
         nmorph: [v[i.value]],
-        "nmorph-radio": [`${e.disabled && "disabled"}`, `${d.value && "checked"}`, e.styleType]
+        "nmorph-radio": [e.disabled && "disabled", d.value && "checked", e.styleType]
       })
     ), u = m(null);
     p({ inputDOMRef: u });

package/dist/components/form/nmorph-select/NmorphSelect.vue2.js

@@ -1,17 +1,18 @@
 import './NmorphSelect.css';
-import { defineComponent as ue, computed as a, ref as d, watch as f, nextTick as R, onMounted as oe, onUnmounted as ie, provide as M, toRef as se } from "vue";
-import { NmorphComponentHeight as de } from "../../../types/index.js";
-import { useModifiers as ve } from "../../../utils/create-modifiers.js";
-import { useI18n as ce } from "vue-i18n";
-import { useFormItemInput as fe } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as pe } from "../../../hooks/use-virtual-list.js";
-import me from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import he from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import ge from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ye from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import He from "../../../assets/icons/chevron-down.svg.js";
-import be from "../../../assets/icons/loader.svg.js";
-const ke = /* @__PURE__ */ ue({
+import { defineComponent as ne, computed as a, ref as d, watch as f, nextTick as B, onMounted as ue, onUnmounted as oe, provide as S, toRef as ie } from "vue";
+import { NmorphComponentHeight as se } from "../../../types/index.js";
+import { useModifiers as de } from "../../../utils/create-modifiers.js";
+import { toCssSize as L, getNmorphOptionHeight as ve, resolveDomElement as ce } from "../../../utils/common.js";
+import { useI18n as fe } from "vue-i18n";
+import { useFormItemInput as pe } from "../nmorph-form/use-form-item-input.js";
+import { useVirtualList as me } from "../../../hooks/use-virtual-list.js";
+import he from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import ge from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import ye from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import He from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import be from "../../../assets/icons/chevron-down.svg.js";
+import qe from "../../../assets/icons/loader.svg.js";
+const Ue = /* @__PURE__ */ ne({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -38,40 +39,40 @@ const ke = /* @__PURE__ */ ue({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(T, { expose: C, emit: P }) {
+  setup(R, { expose: C, emit: P }) {
     C();
-    const { t: $ } = ce(), t = T, D = a(
-      () => t.noElementPlaceholder ? t.noElementPlaceholder : $("noElementPlaceholder")
-    ), m = P, l = d(t.modelValue), r = d(t.open), v = a(() => t.disabled || t.loading), h = a(() => t.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = fe(t), H = (e) => {
+    const { t: w } = fe(), t = R, D = a(
+      () => t.noElementPlaceholder ? t.noElementPlaceholder : w("noElementPlaceholder")
+    ), m = P, l = d(t.modelValue), r = d(t.open), v = a(() => t.disabled || t.loading), h = a(() => t.optionsWidth === "auto"), g = d(!0), { id: y, name: T, autocomplete: W, tabindex: k } = pe(t), H = (e) => {
       if (!v.value) {
         if (r.value = !1, typeof l.value == "string" && (!t.valueRequired && l.value === e ? l.value = "" : l.value = e, m("update:model-value", l.value)), Array.isArray(l.value)) {
-          const n = l.value.includes(e), w = l.value.length === 1 && n;
-          if (t.valueRequired && w) return;
-          n ? l.value = l.value.filter((ne) => ne !== e) : l.value = [...l.value, e];
+          const n = l.value.includes(e), ae = l.value.length === 1 && n;
+          if (t.valueRequired && ae) return;
+          n ? l.value = l.value.filter((re) => re !== e) : l.value = [...l.value, e];
         }
         m("update:model-value", l.value);
       }
-    }, p = d(!1), z = () => {
+    }, p = d(!1), $ = () => {
       p.value = !0;
-    }, F = () => {
+    }, U = () => {
       p.value = !1;
-    }, j = a(
-      () => ve({
-        nmorph: [de[t.height]],
+    }, z = a(
+      () => de({
+        nmorph: [se[t.height]],
         "nmorph-select": [
-          `${t.disabled && "disabled"}`,
-          `${t.modelValue ? "on" : "off"}`,
-          `${t.loading && "loading"}`,
-          `${r.value && !v.value && "open"}`,
-          `${t.fill && "fill"}`,
-          `${h.value && "options-auto-width"}`,
-          `${g.value ? "selected-line-outset" : "selected-line-inset"}`,
-          `${p.value && "focus"}`
+          t.disabled && "disabled",
+          t.modelValue ? "on" : "off",
+          t.loading && "loading",
+          r.value && !v.value && "open",
+          t.fill && "fill",
+          h.value && "options-auto-width",
+          g.value ? "selected-line-outset" : "selected-line-inset",
+          p.value && "focus"
         ]
       })
-    ), b = (e) => typeof e == "number" ? `${e}px` : e, Y = a(() => ({
-      ...t.width !== void 0 && { "--base-width": b(t.width) }
-    })), G = () => {
+    ), F = a(() => ({
+      ...t.width !== void 0 && { "--base-width": L(t.width) }
+    })), j = () => {
       v.value || (r.value = !r.value);
     };
     f(
@@ -81,7 +82,7 @@ const ke = /* @__PURE__ */ ue({
       },
       { immediate: !0 }
     );
-    const q = () => {
+    const b = () => {
       r.value = !1;
     };
     f(
@@ -90,24 +91,16 @@ const ke = /* @__PURE__ */ ue({
         e && (r.value = !1);
       }
     );
-    const i = a(() => t.options.length > 0 ? t.options : t.optionsMap), x = d(null), I = d([]), N = a(() => t.options), c = a(() => t.virtual && N.value.length > 0), A = a(() => ({
-      basic: 30,
-      thick: 38,
-      thin: 22
-    })[t.height || "basic"]), E = a(() => t.virtualItemHeight || A.value), V = a(() => t.virtualOverscan), _ = a(() => t.virtualDynamicHeight), s = pe(N, {
+    const i = a(() => t.options.length > 0 ? t.options : t.optionsMap), q = d(null), I = d([]), x = a(() => t.options), c = a(() => t.virtual && x.value.length > 0), M = a(() => t.virtualItemHeight || ve(t.height)), A = a(() => t.virtualOverscan), E = a(() => t.virtualDynamicHeight), s = me(x, {
       enabled: c,
-      itemHeight: E,
-      overscan: V,
-      dynamic: _
-    }), J = a(() => s.virtualItems.value), K = a(() => ({
-      height: `${s.totalHeight.value}px`
-    })), Q = a(() => ({
-      transform: `translateY(${s.offsetTop.value}px)`
-    })), X = a(() => b(t.virtualMaxHeight)), O = () => {
-      i.value.length > 0 || !x.value || (I.value = Array.from(x.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
+      itemHeight: M,
+      overscan: A,
+      dynamic: E
+    }), G = a(() => s.virtualItems.value), J = s.spacerStyle, K = s.contentStyle, Q = a(() => L(t.virtualMaxHeight)), N = () => {
+      i.value.length > 0 || !q.value || (I.value = Array.from(q.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
     }, o = a(
       () => i.value.length > 0 ? i.value.map((e) => e.value) : I.value
-    ), Z = a(() => c.value ? Array.isArray(l.value) ? l.value : l.value ? [l.value] : [] : o.value), u = d(0), S = a(() => o.value[u.value] || ""), ee = a(() => `${y.value}-listbox`), te = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
+    ), X = a(() => c.value ? Array.isArray(l.value) ? l.value : l.value ? [l.value] : [] : o.value), u = d(0), O = a(() => o.value[u.value] || ""), Y = a(() => `${y.value}-listbox`), Z = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
     f(u, (e) => {
       r.value && c.value && s.scrollToIndex(e);
     }), f(
@@ -118,32 +111,31 @@ const ke = /* @__PURE__ */ ue({
       { immediate: !0 }
     ), f(r, async (e) => {
       if (e) {
-        if (await R(), O(), typeof l.value == "string") {
+        if (await B(), N(), typeof l.value == "string") {
           const n = o.value.indexOf(l.value);
           n !== -1 && (u.value = n);
         }
         s.refresh(), c.value && s.scrollToIndex(u.value);
       }
-    }), oe(async () => {
-      await R(), O(), document.addEventListener("click", q);
-    }), ie(() => {
-      document.removeEventListener("click", q);
+    }), ue(async () => {
+      await B(), N(), document.addEventListener("click", b);
+    }), oe(() => {
+      document.removeEventListener("click", b);
     });
-    const le = a(() => typeof l.value == "string" ? l.value === "" ? D.value : i.value.find((e) => e.value === l.value)?.label : i.value.find((e) => e.value === l.value)?.label), ae = a(() => i.value.length > 0 ? i.value.filter((n) => l.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(l.value) ? l.value.map((n) => ({ text: n, value: n })) : [{ text: l.value, value: l.value }]);
-    M("select-selected-value", l), M("select-change-selected-value", H), M("select-height", se(t, "height"));
-    const B = d(null), re = a(
-      () => h.value ? `${B.value?.clientWidth || 0}px` : void 0
-    ), L = { t: $, props: t, computedNoElementPlaceholder: D, emit: m, initialValue: l, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: k, autocomplete: W, tabindex: U, changeHandler: H, focus: p, focusHandler: z, blurHandler: F, modifiers: j, getCssSize: b, styles: Y, clickHandler: G, closeHandler: q, optionsMap: i, optionsDOMRef: x, slotDomOptions: I, renderedOptions: N, virtualEnabled: c, defaultOptionHeight: A, virtualItemHeight: E, virtualOverscan: V, virtualDynamicHeight: _, virtualList: s, virtualOptions: J, virtualSpacerStyle: K, virtualContentStyle: Q, virtualMaxHeight: X, refreshDomOptions: O, domOptions: o, nativeOptions: Z, currentIndex: u, currentFocusedEl: S, listboxId: ee, getOptionId: te, selectedValueTitle: le, tags: ae, nmorphSelectDOMRef: B, optionsMinWidth: re, spaceHandler: () => {
+    const ee = a(() => typeof l.value == "string" ? l.value === "" ? D.value : i.value.find((e) => e.value === l.value)?.label : i.value.find((e) => e.value === l.value)?.label), te = a(() => i.value.length > 0 ? i.value.filter((n) => l.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(l.value) ? l.value.map((n) => ({ text: n, value: n })) : [{ text: l.value, value: l.value }]);
+    S("select-selected-value", l), S("select-change-selected-value", H), S("select-height", ie(t, "height"));
+    const V = d(null), le = a(
+      () => h.value ? `${V.value?.clientWidth || 0}px` : void 0
+    ), _ = { t: w, props: t, computedNoElementPlaceholder: D, emit: m, initialValue: l, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: T, autocomplete: W, tabindex: k, changeHandler: H, focus: p, focusHandler: $, blurHandler: U, modifiers: z, styles: F, clickHandler: j, closeHandler: b, optionsMap: i, optionsDOMRef: q, slotDomOptions: I, renderedOptions: x, virtualEnabled: c, virtualItemHeight: M, virtualOverscan: A, virtualDynamicHeight: E, virtualList: s, virtualOptions: G, virtualSpacerStyle: J, virtualContentStyle: K, virtualMaxHeight: Q, refreshDomOptions: N, domOptions: o, nativeOptions: X, currentIndex: u, currentFocusedEl: O, listboxId: Y, getOptionId: Z, selectedValueTitle: ee, tags: te, nmorphSelectDOMRef: V, optionsMinWidth: le, spaceHandler: () => {
       v.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
       v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
     }, arrowUpHandler: () => {
       v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value - 1 + o.value.length) % o.value.length);
     }, enterHandler: () => {
-      r.value && S.value && H(S.value);
+      r.value && O.value && H(O.value);
     }, setVirtualOptionRef: (e, n) => {
-      const w = e instanceof Element ? e : e?.$el;
-      s.measureElement(n, w);
+      s.measureElement(n, ce(e));
     }, escapeHandler: () => {
       r.value = !1;
     }, homeHandler: () => {
@@ -151,21 +143,21 @@ const ke = /* @__PURE__ */ ue({
     }, endHandler: () => {
       u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return ye;
+      return He;
     }, get NmorphIcon() {
-      return ge;
+      return ye;
     }, get NmorphSelectOption() {
-      return he;
+      return ge;
     }, get NmorphDropdown() {
-      return me;
+      return he;
     }, get NmorphIconLoaderDots() {
-      return be;
+      return qe;
     }, get NmorphIconChevronDown() {
-      return He;
+      return be;
     } };
-    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  ke as default
+  Ue as default
 };

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue2.js

@@ -31,10 +31,10 @@ const I = /* @__PURE__ */ g({
       () => S({
         nmorph: [y[s.value]],
         "nmorph-select-option": [
-          `${e.disabled && "disabled"}`,
-          `${e.label && "with-label"}`,
-          `${u.value && "checked"}`,
-          `${e.focused && "focused"}`
+          e.disabled && "disabled",
+          e.label && "with-label",
+          u.value && "checked",
+          e.focused && "focused"
         ]
       })
     ), m = t(() => ({

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue2.js

@@ -1,8 +1,9 @@
 import './NmorphSelectButton.css';
-import { defineComponent as c, ref as S, watch as g, computed as o, provide as n } from "vue";
+import { defineComponent as c, ref as S, watch as g, computed as d, provide as o } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { toCssSize as u } from "../../../utils/common.js";
 import b from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
-const _ = /* @__PURE__ */ c({
+const z = /* @__PURE__ */ c({
   __name: "NmorphSelectButton",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -19,33 +20,33 @@ const _ = /* @__PURE__ */ c({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(u, { expose: s, emit: m }) {
+  setup(n, { expose: s, emit: m }) {
     s();
-    const e = u, l = m, i = S(e.modelValue);
+    const e = n, r = m, t = S(e.modelValue);
     g(
       () => e.modelValue,
-      (t) => {
-        i.value = t;
+      (i) => {
+        t.value = i;
       }
     );
-    const f = o(
+    const f = d(
       () => y({
-        "nmorph-select-button": [`${e.disabled && "disabled"}`, `${e.fill && "fill"}`, e.height]
+        "nmorph-select-button": [e.disabled && "disabled", e.fill && "fill", e.height]
       })
-    ), r = (t) => typeof t == "number" ? `${t}px` : t, p = o(() => ({
-      ...e.trackPadding !== void 0 && { "--track-padding": r(e.trackPadding) },
-      ...e.itemSize !== void 0 && { "--item-size": r(e.itemSize) },
+    ), p = d(() => ({
+      ...e.trackPadding !== void 0 && { "--track-padding": u(e.trackPadding) },
+      ...e.itemSize !== void 0 && { "--item-size": u(e.itemSize) },
       ...e.itemFontSize !== void 0 && { "--item-font-size": e.itemFontSize }
-    })), a = (t) => {
-      e.disabled || (i.value = t, l("update:model-value", t));
+    })), l = (i) => {
+      e.disabled || (t.value = i, r("update:model-value", i));
     };
-    n("select-button-selected-value", i), n("select-button-change-handler", a);
-    const d = { props: e, emit: l, initialValue: i, modifiers: f, getCssSize: r, styles: p, changeHandler: a, get NmorphSelectButtonItem() {
+    o("select-button-selected-value", t), o("select-button-change-handler", l);
+    const a = { props: e, emit: r, initialValue: t, modifiers: f, styles: p, changeHandler: l, get NmorphSelectButtonItem() {
       return b;
     } };
-    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  _ as default
+  z as default
 };

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue2.js

@@ -22,7 +22,7 @@ const v = /* @__PURE__ */ c({
     s({ inputDOMRef: n });
     const l = d(() => r?.value === e.value), u = d(
       () => f({
-        "nmorph-select-button-item": [`${l.value && "checked"}`, `${e.disabled && "disabled"}`]
+        "nmorph-select-button-item": [l.value && "checked", e.disabled && "disabled"]
       })
     ), a = { selectedValue: r, changeHandler: t, props: e, inputDOMRef: n, checked: l, modifiers: u, clickHandler: () => {
       e.disabled || t && t(e.value);

package/dist/components/form/nmorph-slider/NmorphSlider.vue2.js

@@ -1,6 +1,7 @@
 import './NmorphSlider.css';
-import { defineComponent as k, computed as m, ref as o, watch as I, onMounted as A, onUnmounted as G } from "vue";
+import { defineComponent as k, computed as m, ref as o, watch as E, onMounted as A, onUnmounted as G } from "vue";
 import { useModifiers as J } from "../../../utils/create-modifiers.js";
+import { toCssSize as I } from "../../../utils/common.js";
 import { useFormItemInput as K } from "../nmorph-form/use-form-item-input.js";
 import Q from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
 const se = /* @__PURE__ */ k({
@@ -27,32 +28,32 @@ const se = /* @__PURE__ */ k({
     const e = H, { id: N, name: T, tabindex: S } = K(e), _ = m(
       () => J({
         nmorph: [],
-        "nmorph-slider": [`${e.disabled && "disabled"}`]
+        "nmorph-slider": [e.disabled && "disabled"]
       })
-    ), g = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), x = M, n = o(e.modelValue), c = o(null);
-    I(n, () => {
-      x("update:model-value", n.value);
-    }), I(
+    ), w = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), g = M, n = o(e.modelValue), c = o(null);
+    E(n, () => {
+      g("update:model-value", n.value);
+    }), E(
       () => e.modelValue,
       (t) => {
         n.value = t;
       }
     );
-    const y = o(null), C = m(() => {
-      const t = s.value - s.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = c.value?.clientWidth || 0, d = e.thumbWidth / a * 100, R = d / 2;
-      let D = u - R;
-      const W = `${Math.max(0, Math.min(100 - d, D))}%`, q = a / 100, X = e.thumbWidth / 2 / q, E = (y.value?.tooltipBody.clientWidth ?? 24) / 2 / q, j = E === 1 / 0 ? 1.714 : E, U = `${parseFloat(W) + X - j}%`;
+    const x = o(null), C = m(() => {
+      const t = l.value - l.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = c.value?.clientWidth || 0, d = e.thumbWidth / a * 100, D = d / 2;
+      let X = u - D;
+      const P = `${Math.max(0, Math.min(100 - d, X))}%`, W = a / 100, $ = e.thumbWidth / 2 / W, q = (x.value?.tooltipBody.clientWidth ?? 24) / 2 / W, j = q === 1 / 0 ? 1.714 : q, U = `${parseFloat(P) + $ - j}%`;
       return {
-        thumb: W,
+        thumb: P,
         tooltip: U
       };
-    }), s = o(0), f = o(0), h = () => {
-      s.value = window.innerWidth, f.value = window.innerHeight;
+    }), l = o(0), f = o(0), h = () => {
+      l.value = window.innerWidth, f.value = window.innerHeight;
     };
     A(() => {
-      typeof window < "u" && (s.value = window.innerWidth, f.value = window.innerHeight, window.addEventListener("resize", h));
+      typeof window < "u" && (l.value = window.innerWidth, f.value = window.innerHeight, window.addEventListener("resize", h));
     }), G(() => {
-      typeof window < "u" && (document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", h));
+      typeof window < "u" && (document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", h));
     });
     const v = (t) => {
       b.value = !1;
@@ -63,12 +64,12 @@ const se = /* @__PURE__ */ k({
         u = Math.max(0, Math.min(1, a / d)), n.value = e.min + u * (e.max - e.min);
       }
       n.value = Math.round(n.value / e.step) * e.step, n.value = Math.max(e.min, Math.min(e.max, n.value));
-    }, l = (t) => {
+    }, s = (t) => {
       t.preventDefault(), v(t.clientX);
     }, i = () => {
-      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
+      document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
     }, z = (t) => {
-      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", l), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", s), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
     }, F = o(null), O = () => {
       e.showTooltip && (p.value = !0);
     }, V = () => {
@@ -76,16 +77,16 @@ const se = /* @__PURE__ */ k({
     }, B = (t) => {
       const r = t.target;
       n.value = Number(r.value);
-    }, b = o(!0), w = (t) => typeof t == "number" ? `${t}px` : t, $ = m(() => ({
-      "--nmorph-slider-thumb-width": g.value,
-      ...e.sliderHeight !== void 0 && { "--slider-height": w(e.sliderHeight) },
+    }, b = o(!0), R = m(() => ({
+      "--nmorph-slider-thumb-width": w.value,
+      ...e.sliderHeight !== void 0 && { "--slider-height": I(e.sliderHeight) },
       ...e.valueFixedContainerHeight !== void 0 && {
-        "--value-fixed-container-height": w(e.valueFixedContainerHeight)
+        "--value-fixed-container-height": I(e.valueFixedContainerHeight)
       }
-    })), P = { props: e, id: N, name: T, tabindex: S, modifiers: _, thumbWidthCss: g, tooltipVisible: p, emit: x, thumbValue: n, sliderContainer: c, tooltipRootRef: y, thumbXPercentPosition: C, windowWidth: s, windowHeight: f, resizeWindowHandler: h, updateThumbValue: v, pointerMove: l, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: V, nativeInputHandler: B, transitionEnabled: b, getCssSize: w, styles: $, get NmorphTooltip() {
+    })), y = { props: e, id: N, name: T, tabindex: S, modifiers: _, thumbWidthCss: w, tooltipVisible: p, emit: g, thumbValue: n, sliderContainer: c, tooltipRootRef: x, thumbXPercentPosition: C, windowWidth: l, windowHeight: f, resizeWindowHandler: h, updateThumbValue: v, pointerMove: s, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: V, nativeInputHandler: B, transitionEnabled: b, styles: R, get NmorphTooltip() {
       return Q;
     } };
-    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
+    return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
   }
 });
 export {