@nmorph/nmorph-ui-kit 2.2.38 → 2.2.40

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

@@ -1,153 +1,124 @@
 import './NmorphFileUpload.css';
-import { defineComponent as X, computed as C, inject as Y, ref as q, watch as Z, onBeforeUnmount as ee } from "vue";
-import { useModifiers as te } from "../../../utils/create-modifiers.js";
-import { useI18n as oe } from "vue-i18n";
-import { useFormItemInput as re, useFormItemModel as ne } from "../nmorph-form/use-form-item-input.js";
-import { resolution as B, NmorphImageResolution as V, NmorphAudioResolution as se, NmorphVideoResolution as ae, NmorphArchiveResolution as ie } from "./types.js";
-import le from "../../../assets/icons/doc.svg.js";
-import ue from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
-import de from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import pe from "../../basic/nmorph-button/NmorphButton.vue.js";
-import me from "../../../assets/icons/audio.svg.js";
-import ce from "../../../assets/icons/video.svg.js";
-import fe from "../../../assets/icons/archive.svg.js";
-import ve from "../../../assets/icons/cross.svg.js";
-import ye from "../../../assets/icons/image.svg.js";
-const Pe = /* @__PURE__ */ X({
+import { defineComponent as K, computed as N, inject as z, ref as T, watch as G, onBeforeUnmount as H } from "vue";
+import { useModifiers as J } from "../../../utils/create-modifiers.js";
+import { getFileAcceptValue as Q, getFileTypeCandidates as U, isKnownFileType as p, isFileAllowedByTypes as X, getFileExtension as Y } from "../../../utils/file-types.js";
+import { useI18n as Z } from "vue-i18n";
+import { useFormItemInput as $, useFormItemModel as ee } from "../nmorph-form/use-form-item-input.js";
+import te from "../../../assets/icons/doc.svg.js";
+import oe from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
+import re from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ae from "../../basic/nmorph-button/NmorphButton.vue.js";
+import ie from "../../../assets/icons/audio.svg.js";
+import ne from "../../../assets/icons/video.svg.js";
+import se from "../../../assets/icons/archive.svg.js";
+import { NmorphImageResolution as V, NmorphAudioResolution as le, NmorphVideoResolution as ue, NmorphArchiveResolution as de } from "./types.js";
+import me from "../../../assets/icons/cross.svg.js";
+import pe from "../../../assets/icons/image.svg.js";
+const Ue = /* @__PURE__ */ K({
   __name: "NmorphFileUpload",
   props: {
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    tabindex: { type: Number, required: !1 },
     modelValue: { type: Array, required: !1, default: () => [] },
     disabled: { type: Boolean, required: !1, default: !1 },
     multiple: { type: Boolean, required: !1, default: !1 },
     allowedTypes: { type: Array, required: !1, default: () => [] },
     photoWithPreview: { type: Boolean, required: !1, default: !0 },
-    buttonText: { type: String, required: !1, default: "" },
-    id: { type: String, required: !1 },
-    name: { type: String, required: !1 },
-    autocomplete: { type: String, required: !1 },
-    tabindex: { type: Number, required: !1 }
+    buttonText: { type: String, required: !1, default: "" }
   },
   emits: ["update:model-value", "on-unsupported-file-type-error", "on-file-validation-error"],
-  setup(M, { expose: j, emit: O }) {
-    const { t: N } = oe(), r = M, c = O, k = C(() => r.buttonText ? r.buttonText : N("selectFile")), { id: f, name: E, autocomplete: W, tabindex: D } = re(r), { modelValue: F, updateModelValue: L } = ne(
+  setup(_, { expose: q, emit: C }) {
+    const { t: b } = Z(), r = _, c = C, P = N(() => r.buttonText ? r.buttonText : b("selectFile")), { id: f, name: S, autocomplete: B, tabindex: L } = $(r), { modelValue: g, updateModelValue: x } = ee(
       r,
       (e) => c("update:model-value", e),
       []
-    ), v = Y("form-data", void 0), R = Object.entries(B), T = {
-      "svg-xml": "svg",
-      "audio-ogg": "ogg",
-      "wideo-ogg": "ogg"
-    }, A = (e) => e.split("/")[1]?.toLowerCase() || "", I = (e) => {
-      const t = e.split(".").pop()?.toLowerCase();
-      return t && t !== e.toLowerCase() ? t : "";
-    }, S = (e) => R.find(([, t]) => t.toLowerCase() === e.toLowerCase())?.[0] || "", y = (e) => Array.from(
-      new Set(
-        [
-          e.type.toLowerCase(),
-          S(e.type),
-          I(e.name),
-          A(e.type)
-        ].filter(Boolean).map((t) => t.toLowerCase())
-      )
-    ), i = (e, t) => Object.prototype.hasOwnProperty.call(t, e), K = (e) => {
-      const t = y(e);
-      return e.type.toLowerCase().startsWith("image/") || t.some((o) => i(o, V));
-    }, P = (e) => {
-      if (r.allowedTypes.length === 0) return !0;
-      const t = y(e);
-      return r.allowedTypes.some((o) => t.includes(String(o).toLowerCase()));
-    }, $ = C(() => {
-      if (r.allowedTypes.length !== 0)
-        return Array.from(
-          new Set(
-            r.allowedTypes.flatMap((e) => {
-              const t = String(e).toLowerCase(), o = B[t], n = T[t] || t;
-              return t.includes("/") ? t : o ? [`.${n}`, o] : `.${n}`;
-            })
-          )
-        ).join(",");
-    }), z = (e) => {
-      const t = y(e);
-      let o = le;
-      return (e.type.toLowerCase().startsWith("image/") || t.some((n) => i(n, V))) && (o = ye), (e.type.toLowerCase().startsWith("audio/") || t.some((n) => i(n, se))) && (o = me), (e.type.toLowerCase().startsWith("video/") || t.some((n) => i(n, ae))) && (o = ce), t.some((n) => i(n, ie)) && (o = fe), o;
-    }, u = q(null), a = q([...F.value]), l = /* @__PURE__ */ new Set(), h = () => {
-      const e = u.value;
+    ), v = z("form-data", void 0), M = (e) => {
+      const t = U(e);
+      return e.type.toLowerCase().startsWith("image/") || t.some((o) => p(o, V));
+    }, W = N(() => Q(r.allowedTypes)), j = (e) => {
+      const t = U(e);
+      let o = te;
+      return (e.type.toLowerCase().startsWith("image/") || t.some((i) => p(i, V))) && (o = pe), (e.type.toLowerCase().startsWith("audio/") || t.some((i) => p(i, le))) && (o = ie), (e.type.toLowerCase().startsWith("video/") || t.some((i) => p(i, ue))) && (o = ne), t.some((i) => p(i, de)) && (o = se), o;
+    }, l = T(null), n = T([...g.value]), s = /* @__PURE__ */ new Set(), h = () => {
+      const e = l.value;
       e && (e.value = "");
-    }, g = (e) => {
-      l.has(e) && (URL.revokeObjectURL(e), l.delete(e));
-    }, x = (e) => {
+    }, y = (e) => {
+      s.has(e) && (URL.revokeObjectURL(e), s.delete(e));
+    }, I = (e) => {
       const t = new Set(e.map((o) => o.previewUrl));
-      Array.from(l).forEach((o) => {
-        t.has(o) || g(o);
+      Array.from(s).forEach((o) => {
+        t.has(o) || y(o);
       });
-    }, b = (e) => {
+    }, w = (e) => {
       const t = [...e];
-      a.value = t, L(t);
-    }, U = (e) => {
+      n.value = t, x(t);
+    }, R = (e) => {
       const t = v?.validateField(f.value, e);
       return {
         valid: t?.valid.value ?? !0,
         errors: t?.errors.value ?? []
       };
-    }, G = () => {
-      r.disabled || !u.value || u.value.click();
-    }, H = (e) => {
+    }, k = () => {
+      r.disabled || !l.value || l.value.click();
+    }, E = (e) => {
       if (r.disabled) return;
-      const t = e.target, o = Array.from(t.files || []), n = r.multiple ? o : o.slice(0, 1), d = [];
-      if (n.forEach((s) => {
-        if (!P(s)) {
-          c("on-unsupported-file-type-error", s.type || I(s.name) || s.name);
+      const t = e.target, o = Array.from(t.files || []), i = r.multiple ? o : o.slice(0, 1), u = [];
+      if (i.forEach((a) => {
+        if (!X(a, r.allowedTypes)) {
+          c("on-unsupported-file-type-error", a.type || Y(a.name) || a.name);
           return;
         }
-        const p = r.multiple ? [...a.value.map((w) => w.data), ...d, s] : [s], m = U(p);
+        const d = r.multiple ? [...n.value.map((F) => F.data), ...u, a] : [a], m = R(d);
         if (!m.valid) {
-          c("on-file-validation-error", { file: s, errors: m.errors });
+          c("on-file-validation-error", { file: a, errors: m.errors });
           return;
         }
-        d.push(s);
-      }), h(), d.length > 0) {
-        const s = d.map((m) => {
-          const w = URL.createObjectURL(m);
-          return l.add(w), { data: m, previewUrl: w };
-        }), p = r.multiple ? [...a.value, ...s] : s;
-        x(p), b(p), v?.validateField(f.value, p);
+        u.push(a);
+      }), h(), u.length > 0) {
+        const a = u.map((m) => {
+          const F = URL.createObjectURL(m);
+          return s.add(F), { data: m, previewUrl: F };
+        }), d = r.multiple ? [...n.value, ...a] : a;
+        I(d), w(d), v?.validateField(f.value, d);
       }
-    }, J = (e) => {
+    }, O = (e) => {
       if (r.disabled) return;
-      const t = a.value.findIndex((o) => o.data.name === e);
+      const t = n.value.findIndex((o) => o.data.name === e);
       if (t !== -1) {
-        const o = a.value[t];
-        g(o.previewUrl), h();
-        const n = a.value.filter((d, s) => s !== t);
-        b(n), v?.validateField(f.value, n);
+        const o = n.value[t];
+        y(o.previewUrl), h();
+        const i = n.value.filter((u, a) => a !== t);
+        w(i), v?.validateField(f.value, i);
       }
     };
-    Z(
-      F,
+    G(
+      g,
       (e) => {
         const t = [...e];
-        x(t), a.value = t, t.length === 0 && h();
+        I(t), n.value = t, t.length === 0 && h();
       },
       { deep: !0 }
-    ), ee(() => {
-      Array.from(l).forEach((e) => g(e));
-    }), j({ inputDOMRef: u });
-    const Q = C(
-      () => te({
+    ), H(() => {
+      Array.from(s).forEach((e) => y(e));
+    }), q({ inputDOMRef: l });
+    const D = N(
+      () => J({
         "nmorph-file-upload": [r.disabled && "disabled"]
       })
-    ), _ = { t: N, props: r, emit: c, computedButtonText: k, id: f, name: E, autocomplete: W, tabindex: D, modelValue: F, updateModelValue: L, formData: v, knownResolutionEntries: R, extensionByResolution: T, getPlainType: A, getFileExtension: I, getKnownResolutionByMime: S, getFileTypeCandidates: y, isKnownFileType: i, isImageFile: K, isFileAllowed: P, inputAccept: $, typeFileIconMap: z, inputDOMRef: u, files: a, createdPreviewUrls: l, resetInputValue: h, revokePreviewUrl: g, revokeRemovedPreviewUrls: x, filesChanged: b, getFormValidationResult: U, openFileSelector: G, handleFileUpload: H, removeFile: J, modifiers: Q, get NmorphButton() {
-      return pe;
+    ), A = { t: b, props: r, emit: c, computedButtonText: P, id: f, name: S, autocomplete: B, tabindex: L, modelValue: g, updateModelValue: x, formData: v, isImageFile: M, inputAccept: W, typeFileIconMap: j, inputDOMRef: l, files: n, createdPreviewUrls: s, resetInputValue: h, revokePreviewUrl: y, revokeRemovedPreviewUrls: I, filesChanged: w, getFormValidationResult: R, openFileSelector: k, handleFileUpload: E, removeFile: O, modifiers: D, get NmorphButton() {
+      return ae;
     }, get NmorphIcon() {
-      return de;
+      return re;
     }, get NmorphImagePreview() {
-      return ue;
+      return oe;
     }, get NmorphIconCross() {
-      return ve;
+      return me;
     } };
-    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
+    return Object.defineProperty(A, "__isScriptSetup", { enumerable: !1, value: !0 }), A;
   }
 });
 export {
-  Pe as default
+  Ue as default
 };

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.css

@@ -1 +1 @@
-.nmorph-form-item{margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-loose)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-text-color)}
+.nmorph-form-item{min-width:0;max-width:100%;margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-loose)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%;min-width:0;max-width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-text-color)}

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

@@ -1,7 +1,7 @@
 import './NmorphErrorBox.css';
 import { defineComponent as p, computed as s } from "vue";
-import { NmorphComponentHeight as u } from "../../../../../../../types/index.js";
-import { useModifiers as l } from "../../../../../../../utils/create-modifiers.js";
+import { useModifiers as u } from "../../../../../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as l } from "../../../../../../../types/common.types.js";
 const h = /* @__PURE__ */ p({
   __name: "NmorphErrorBox",
   props: {
@@ -15,8 +15,8 @@ const h = /* @__PURE__ */ p({
       const r = Array.isArray(e.errors) ? e.errors : e.errors.value;
       return r.length ? [r[r.length - 1]] : [];
     }), a = s(
-      () => l({
-        nmorph: [u[e.height]],
+      () => u({
+        nmorph: [l[e.height]],
         "nmorph-error-box": [e.staticHeight && "static-height", t.value.length === 0 && "empty"]
       })
     ), o = { props: e, currentError: t, modifiers: a };

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

@@ -1,8 +1,8 @@
 import './NmorphNumberInput.css';
 import { defineComponent as H, computed as n, ref as s, watch as p } from "vue";
-import { NmorphComponentHeight as R } from "../../../types/index.js";
-import { useModifiers as T } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as D, useFormItemModel as V } from "../nmorph-form/use-form-item-input.js";
+import { useModifiers as R } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as T, useFormItemModel as D } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as V } from "../../../types/common.types.js";
 import k from "../../../assets/icons/plus-thin.svg.js";
 import z from "../../../assets/icons/minus-thin.svg.js";
 import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
@@ -24,9 +24,9 @@ const L = /* @__PURE__ */ H({
   },
   emits: ["update:model-value"],
   setup(d, { expose: c, emit: f }) {
-    const e = d, { id: h, name: g, autocomplete: b, tabindex: x } = D(e), N = n(
-      () => T({
-        nmorph: [R[e.height]],
+    const e = d, { id: h, name: g, autocomplete: b, tabindex: x } = T(e), N = n(
+      () => R({
+        nmorph: [V[e.height]],
         "nmorph-number-input": [e.disabled && "disabled", e.actionBtnPositionRight && "action-btn-position-right"]
       })
     ), a = {
@@ -45,7 +45,7 @@ const L = /* @__PURE__ */ H({
     }, v = n(() => {
       const i = e.actionBtnPositionRight ? "right" : "default";
       return a[e.height][i];
-    }), u = f, { modelValue: o, updateModelValue: l } = V(
+    }), u = f, { modelValue: o, updateModelValue: l } = D(
       e,
       (i) => u("update:model-value", i),
       0

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

@@ -1,9 +1,9 @@
 import './NmorphOTPInput.css';
 import { defineComponent as le, ref as M, computed as c, watch as O, nextTick as R } from "vue";
 import { useModifiers as ue } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as oe } from "../../../types/index.js";
-import { useFormItemInput as re, useFormItemModel as ne } from "../nmorph-form/use-form-item-input.js";
-import se from "../nmorph-text-input/NmorphTextInput.vue.js";
+import { useFormItemInput as oe, useFormItemModel as re } from "../nmorph-form/use-form-item-input.js";
+import ne from "../nmorph-text-input/NmorphTextInput.vue.js";
+import { NmorphComponentHeight as se } from "../../../types/common.types.js";
 const pe = /* @__PURE__ */ le({
   __name: "NmorphOTPInput",
   props: {
@@ -21,7 +21,7 @@ const pe = /* @__PURE__ */ le({
   },
   emits: ["update:model-value", "focus", "blur", "complete"],
   setup(j, { expose: w, emit: N }) {
-    const l = j, f = N, { id: V, name: T, autocomplete: A, tabindex: p } = re(l), { modelValue: v, updateModelValue: F } = ne(
+    const l = j, f = N, { id: V, name: T, autocomplete: A, tabindex: p } = oe(l), { modelValue: v, updateModelValue: F } = re(
       l,
       (e) => f("update:model-value", e),
       ""
@@ -46,7 +46,7 @@ const pe = /* @__PURE__ */ le({
     );
     const E = c(
       () => ue({
-        nmorph: [oe[l.height], d.value && "focused"],
+        nmorph: [se[l.height], d.value && "focused"],
         "nmorph-otp-input": [l.disabled && "disabled"]
       })
     ), B = c(
@@ -142,7 +142,7 @@ const pe = /* @__PURE__ */ le({
       },
       { immediate: !0 }
     );
-    const I = { props: l, emit: f, id: V, name: T, autocomplete: A, tabindex: p, modelValue: v, updateModelValue: F, inputRefs: i, inputDOMRefs: n, focused: d, otpValue: o, normalizedLength: u, sanitizeValue: g, normalizeOtpValue: S, syncOtpValue: h, modifiers: E, fieldIds: B, inputMode: C, resolvedAutocomplete: P, inputPattern: $, syncInputDOMRef: y, setInputRef: x, selectField: _, focusField: r, blurFields: k, updateCharAt: m, insertValue: H, inputHandler: z, fieldModels: q, getFieldModel: L, backspaceHandler: D, deleteKeyHandler: Z, arrowLeftHandler: K, arrowRightHandler: G, homeHandler: J, endHandler: Q, keydownHandler: U, pasteHandler: W, focusHandler: X, blurHandler: Y, getFieldTabindex: ee, NmorphTextInput: se };
+    const I = { props: l, emit: f, id: V, name: T, autocomplete: A, tabindex: p, modelValue: v, updateModelValue: F, inputRefs: i, inputDOMRefs: n, focused: d, otpValue: o, normalizedLength: u, sanitizeValue: g, normalizeOtpValue: S, syncOtpValue: h, modifiers: E, fieldIds: B, inputMode: C, resolvedAutocomplete: P, inputPattern: $, syncInputDOMRef: y, setInputRef: x, selectField: _, focusField: r, blurFields: k, updateCharAt: m, insertValue: H, inputHandler: z, fieldModels: q, getFieldModel: L, backspaceHandler: D, deleteKeyHandler: Z, arrowLeftHandler: K, arrowRightHandler: G, homeHandler: J, endHandler: Q, keydownHandler: U, pasteHandler: W, focusHandler: X, blurHandler: Y, getFieldTabindex: ee, NmorphTextInput: ne };
     return Object.defineProperty(I, "__isScriptSetup", { enumerable: !1, value: !0 }), I;
   }
 });

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

@@ -1,7 +1,7 @@
 import './NmorphRadio.css';
 import { defineComponent as h, inject as r, computed as l, ref as m } from "vue";
 import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import { NmorphSelectionControlHeight as v } from "../../../types/index.js";
+import { NmorphSelectionControlHeight as v } from "../../../types/common.types.js";
 const q = /* @__PURE__ */ h({
   __name: "NmorphRadio",
   props: {

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

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

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

@@ -1,10 +1,11 @@
 import './NmorphSelectOption.css';
 import { defineComponent as g, inject as l, computed as t } from "vue";
-import { NmorphComponentHeight as y } from "../../../../../types/index.js";
-import { useModifiers as S } from "../../../../../utils/create-modifiers.js";
-import b from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import q from "../../../../../assets/icons/success.svg.js";
-const I = /* @__PURE__ */ g({
+import { useModifiers as y } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as b } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as S } from "../../../../../types/common.types.js";
+import q from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import _ from "../../../../../assets/icons/success.svg.js";
+const H = /* @__PURE__ */ g({
   __name: "NmorphSelectOption",
   props: {
     value: { type: String, required: !0 },
@@ -25,29 +26,31 @@ const I = /* @__PURE__ */ g({
     const r = l("select-selected-value"), o = l("select-change-selected-value"), a = l(
       "select-height",
       void 0
-    ), e = c, i = p, f = () => {
-      e.disabled || (i("change-value", e.value), o && o(e.value));
-    }, u = t(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((v) => v === e.value) : !1), s = t(() => e.height || a?.value || "basic"), h = t(
-      () => S({
-        nmorph: [y[s.value]],
+    ), e = c, s = p, f = () => {
+      e.disabled || (s("change-value", e.value), o && o(e.value));
+    }, i = t(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((v) => v === e.value) : !1), u = t(() => e.height || a?.value || "basic"), m = t(
+      () => y({
+        nmorph: [S[u.value]],
         "nmorph-select-option": [
           e.disabled && "disabled",
           e.label && "with-label",
-          u.value && "checked",
+          i.value && "checked",
           e.focused && "focused"
         ]
       })
-    ), m = t(() => ({
-      ...e.hoverBackground !== void 0 && { "--hover-bg": e.hoverBackground },
-      ...e.hoverColor !== void 0 && { "--hover-color": e.hoverColor }
-    })), n = { selectSelectedValue: r, selectChangeSelectedValue: o, selectHeight: a, props: e, emit: i, clickHandler: f, checked: u, height: s, modifiers: h, styles: m, get NmorphIcon() {
-      return b;
-    }, get NmorphIconSuccess() {
+    ), h = t(
+      () => b({
+        "--hover-bg": e.hoverBackground,
+        "--hover-color": e.hoverColor
+      })
+    ), n = { selectSelectedValue: r, selectChangeSelectedValue: o, selectHeight: a, props: e, emit: s, clickHandler: f, checked: i, height: u, modifiers: m, styles: h, get NmorphIcon() {
       return q;
+    }, get NmorphIconSuccess() {
+      return _;
     } };
     return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {
-  I as default
+  H as default
 };