@nmorph/nmorph-ui-kit 2.2.37 → 2.2.39

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue2.js

@@ -1,9 +1,10 @@
 import './NmorphTextarea.css';
-import { defineComponent as F, ref as h, computed as l, watch as B, onMounted as I, nextTick as T } from "vue";
-import { NmorphComponentHeight as O } from "../../../types/index.js";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
-const Y = /* @__PURE__ */ F({
+import { defineComponent as B, computed as n, watch as C, onMounted as T, nextTick as V } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as j } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as k, useFormItemModel as P } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as A } from "../../../types/common.types.js";
+const J = /* @__PURE__ */ B({
   __name: "NmorphTextarea",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -23,45 +24,50 @@ const Y = /* @__PURE__ */ F({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
-  setup(y, { expose: g, emit: x }) {
-    const e = y, n = x, { id: b, name: w, autocomplete: q, tabindex: v } = j(e), a = h(null), s = h(!1), S = l(
-      () => V({
-        nmorph: [O[e.height], s.value && "focused"],
+  setup(g, { expose: x, emit: b }) {
+    const e = g, r = b, { id: w, name: q, autocomplete: S, tabindex: v } = k(e), { modelValue: s, updateModelValue: l } = P(
+      e,
+      (t) => r("update:model-value", t),
+      ""
+    ), {
+      elementRef: i,
+      focused: u,
+      handleFocus: _,
+      handleBlur: z,
+      focus: d,
+      blur: p,
+      select: m
+    } = j({
+      onFocus: () => r("focus"),
+      onBlur: () => r("blur")
+    }), F = n(
+      () => O({
+        nmorph: [A[e.height], u.value && "focused"],
         "nmorph-textarea": [e.disabled && "disabled", e.autoSize && "auto-size"]
       })
-    ), i = (t) => {
+    ), f = (t) => {
       const o = window.getComputedStyle(t);
       return parseFloat(o.paddingTop) + parseFloat(o.paddingBottom);
-    }, r = async () => {
+    }, a = async () => {
       if (!e.autoSize) return;
-      await T();
-      const t = a.value;
+      await V();
+      const t = i.value;
       if (!t) return;
       t.style.height = "auto";
-      const o = window.getComputedStyle(t), N = parseFloat(o.lineHeight) || 20, c = e.maxRows ? e.maxRows * N + i(t) : 1 / 0, C = Math.min(t.scrollHeight, c);
-      t.style.height = `${C}px`, t.style.overflowY = t.scrollHeight > c ? "auto" : "hidden";
-    }, _ = (t) => {
+      const o = window.getComputedStyle(t), I = parseFloat(o.lineHeight) || 20, y = e.maxRows ? e.maxRows * I + f(t) : 1 / 0, N = Math.min(t.scrollHeight, y);
+      t.style.height = `${N}px`, t.style.overflowY = t.scrollHeight > y ? "auto" : "hidden";
+    }, M = (t) => {
       const o = t.target;
-      n("update:model-value", o.value), r();
-    }, z = () => {
-      n("focus"), s.value = !0;
-    }, H = () => {
-      n("blur"), s.value = !1;
-    }, u = () => {
-      a.value?.focus();
-    }, d = () => {
-      a.value?.blur();
-    }, p = () => {
-      a.value?.select();
+      l(o.value), a();
     };
-    B(() => e.modelValue, r), I(r), g({ textareaDOMRef: a, focus: u, blur: d, select: p, resizeToContent: r });
-    const f = l(() => Math.max(e.minRows, 1)), R = l(() => Math.max(e.rows, f.value)), M = l(() => ({
+    C(s, a), T(a), x({ textareaDOMRef: i, focus: d, blur: p, select: m, resizeToContent: a });
+    const c = n(() => Math.max(e.minRows, 1)), R = n(() => Math.max(e.rows, c.value)), H = n(() => ({
       "--nmorph-textarea-resize": e.autoSize ? "none" : e.resize,
       "--nmorph-textarea-indentation": e.indentation
-    })), m = { props: e, emit: n, id: b, name: w, autocomplete: q, tabindex: v, textareaDOMRef: a, focused: s, modifiers: S, getVerticalPadding: i, resizeToContent: r, handleInput: _, handleFocus: z, handleBlur: H, focus: u, blur: d, select: p, minRows: f, rows: R, styles: M };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    })), h = { props: e, emit: r, id: w, name: q, autocomplete: S, tabindex: v, modelValue: s, updateModelValue: l, textareaDOMRef: i, focused: u, handleFocus: _, handleBlur: z, focus: d, blur: p, select: m, modifiers: F, getVerticalPadding: f, resizeToContent: a, handleInput: M, minRows: c, rows: R, styles: H };
+    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });
 export {
-  Y as default
+  J as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -1,13 +1,13 @@
 import './NmorphTimePicker.css';
 import b from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as l, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
+import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as a, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
 /* empty css                      */
 import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], g = {
+const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], H = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, O = ["disabled", "onClick"], H = {
+}, g = ["disabled", "onClick"], O = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
@@ -16,11 +16,11 @@ const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id"
   role: "listbox",
   "aria-label": "Seconds"
 }, V = ["disabled", "onClick"];
-function I(S, a, z, e, B, D) {
+function I(S, l, z, e, B, D) {
   return i(), n(
     "div",
     {
-      class: l(e.modifiers),
+      class: a(e.modifiers),
       style: v(e.styles)
     },
     [
@@ -32,8 +32,8 @@ function I(S, a, z, e, B, D) {
         "aria-controls": `${e.id}-dropdown`,
         tabindex: e.props.disabled ? -1 : e.tabindex,
         onClick: e.toggleOpen,
-        onFocus: e.focusHandler,
-        onBlur: e.blurHandler,
+        onFocus: l[0] || (l[0] = (...o) => e.focusHandler && e.focusHandler(...o)),
+        onBlur: l[1] || (l[1] = (...o) => e.blurHandler && e.blurHandler(...o)),
         onKeydown: [
           m(t(e.toggleOpen, ["prevent"]), ["space"]),
           m(t(e.toggleOpen, ["prevent"]), ["enter"]),
@@ -47,7 +47,7 @@ function I(S, a, z, e, B, D) {
           autocomplete: e.autocomplete,
           type: "time",
           step: e.inputStep,
-          value: e.props.modelValue || "",
+          value: e.modelValue || "",
           disabled: e.props.disabled,
           onInput: e.nativeInputHandler
         }, null, 40, w),
@@ -98,41 +98,41 @@ function I(S, a, z, e, B, D) {
         default: p(() => [
           r("div", {
             id: `${e.id}-dropdown`,
-            class: l(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+            class: a(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            r("div", g, [
+            r("div", H, [
               (i(!0), n(
                 s,
                 null,
                 h(e.hourOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: l(["nmorph-time-picker__option", [
+                  class: a(["nmorph-time-picker__option", [
                     e.optionHeightModifiers,
                     { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }
                   ]]),
                   disabled: o.disabled,
                   onClick: (k) => e.selectUnit("hour", o.value)
-                }, c(o.label), 11, O))),
+                }, c(o.label), 11, g))),
                 128
                 /* KEYED_FRAGMENT */
               ))
             ]),
-            a[1] || (a[1] = r(
+            l[3] || (l[3] = r(
               "div",
               { class: "nmorph-time-picker__separator" },
               ":",
               -1
               /* CACHED */
             )),
-            r("div", H, [
+            r("div", O, [
               (i(!0), n(
                 s,
                 null,
                 h(e.minuteOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: l(["nmorph-time-picker__option", [
+                  class: a(["nmorph-time-picker__option", [
                     e.optionHeightModifiers,
                     { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
                   ]]),
@@ -147,7 +147,7 @@ function I(S, a, z, e, B, D) {
               s,
               { key: 0 },
               [
-                a[0] || (a[0] = r(
+                l[2] || (l[2] = r(
                   "div",
                   { class: "nmorph-time-picker__separator" },
                   ":",
@@ -161,7 +161,7 @@ function I(S, a, z, e, B, D) {
                     h(e.secondOptions, (o) => (i(), n("button", {
                       key: o.value,
                       type: "button",
-                      class: l(["nmorph-time-picker__option", [
+                      class: a(["nmorph-time-picker__option", [
                         e.optionHeightModifiers,
                         { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }
                       ]]),

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js

@@ -1,15 +1,16 @@
 import './NmorphTimePicker.css';
-import { defineComponent as Z, ref as v, computed as n, watch as ee } from "vue";
-import { NmorphComponentHeight as C } from "../../../types/index.js";
-import { useI18n as te } from "vue-i18n";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import { toCssSize as oe } from "../../../utils/common.js";
-import { useFormItemInput as re } from "../nmorph-form/use-form-item-input.js";
-import ne from "../../../assets/icons/clock.svg.js";
-import le from "../../../assets/icons/circle-close.svg.js";
-import ue from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ae from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const ve = /* @__PURE__ */ Z({
+import { defineComponent as te, ref as _, computed as n, watch as oe } from "vue";
+import { useI18n as re } from "vue-i18n";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ne } from "../../../utils/common.js";
+import { useFocusableInput as ue } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as le, useFormItemModel as se } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as B } from "../../../types/common.types.js";
+import ae from "../../../assets/icons/clock.svg.js";
+import ie from "../../../assets/icons/circle-close.svg.js";
+import de from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ce from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const Ie = /* @__PURE__ */ te({
   __name: "NmorphTimePicker",
   props: {
     modelValue: { type: [String, null], required: !1, default: null },
@@ -31,86 +32,93 @@ const ve = /* @__PURE__ */ Z({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(O, { expose: H, emit: k }) {
-    const t = O, a = k, { t: T } = te(), { id: B, name: M, autocomplete: P, tabindex: $ } = re(t), s = v(!1), c = v(!1), w = v(null), m = (e) => String(e).padStart(2, "0"), p = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
+  setup(H, { expose: M, emit: k }) {
+    const t = H, m = k, { t: I } = re(), { id: F, name: P, autocomplete: $, tabindex: z } = le(t), { modelValue: s, updateModelValue: p } = se(
+      t,
+      (e) => m("update:model-value", e),
+      null
+    ), a = _(!1), {
+      elementRef: T,
+      focused: w,
+      handleFocus: D,
+      handleBlur: R
+    } = ue({
+      onFocus: () => m("focus"),
+      onBlur: () => m("blur")
+    }), c = (e) => String(e).padStart(2, "0"), f = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
       if (!e) return null;
       const o = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
       if (!o) return null;
-      const r = Number(o[1]), b = Number(o[2]), d = Number(o[3] || 0);
-      return r > 23 || b > 59 || d > 59 ? null : { hour: r, minute: b, second: d };
+      const r = Number(o[1]), v = Number(o[2]), d = Number(o[3] || 0);
+      return r > 23 || v > 59 || d > 59 ? null : { hour: r, minute: v, second: d };
     }, g = (e) => {
-      const o = `${m(e.hour)}:${m(e.minute)}`;
-      return t.showSeconds ? `${o}:${m(e.second)}` : o;
-    }, f = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), V = n(() => i(t.modelValue)), u = v(V.value || { hour: 0, minute: 0, second: 0 }), x = n(() => t.placeholder || T("pickATime"));
-    ee(
-      () => t.modelValue,
-      (e) => {
-        const o = i(e);
-        o && (u.value = o);
-      }
-    );
-    const h = (e) => {
-      const o = f(e);
-      return !!(y.value && o < f(y.value) || N.value && o > f(N.value));
+      const o = `${c(e.hour)}:${c(e.minute)}`;
+      return t.showSeconds ? `${o}:${c(e.second)}` : o;
+    }, h = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), x = n(() => i(s.value)), l = _(x.value || { hour: 0, minute: 0, second: 0 }), C = n(() => t.placeholder || I("pickATime"));
+    oe(s, (e) => {
+      const o = i(e);
+      o && (l.value = o);
+    });
+    const b = (e) => {
+      const o = h(e);
+      return !!(y.value && o < h(y.value) || N.value && o > h(N.value));
     }, S = (e, o, r) => {
-      const b = p(r), d = /* @__PURE__ */ new Set();
-      for (let l = 0; l <= o; l += b) d.add(l);
-      return d.add(u.value[e]), Array.from(d).filter((l) => l >= 0 && l <= o).sort((l, q) => l - q).map((l) => {
-        const q = { ...u.value, [e]: l };
+      const v = f(r), d = /* @__PURE__ */ new Set();
+      for (let u = 0; u <= o; u += v) d.add(u);
+      return d.add(l.value[e]), Array.from(d).filter((u) => u >= 0 && u <= o).sort((u, q) => u - q).map((u) => {
+        const q = { ...l.value, [e]: u };
         return {
-          label: m(l),
-          value: l,
-          disabled: h(q)
+          label: c(u),
+          value: u,
+          disabled: b(q)
         };
       });
-    }, z = n(() => S("hour", 23, t.hourStep)), D = n(() => S("minute", 59, t.minuteStep)), A = n(() => S("second", 59, t.secondStep)), F = (e, o) => {
-      const r = { ...u.value, [e]: o };
-      h(r) || (u.value = r, a("update:model-value", g(r)));
-    }, R = () => {
-      a("update:model-value", null), s.value = !1;
-    }, U = () => {
-      s.value = !1;
-    }, j = () => {
-      t.disabled || (s.value = !s.value);
-    }, E = () => {
-      c.value = !0, a("focus");
+    }, A = n(() => S("hour", 23, t.hourStep)), U = n(() => S("minute", 59, t.minuteStep)), j = n(() => S("second", 59, t.secondStep)), E = (e, o) => {
+      const r = { ...l.value, [e]: o };
+      b(r) || (l.value = r, p(g(r)));
     }, G = () => {
-      c.value = !1, a("blur");
-    }, J = (e) => {
+      p(null), a.value = !1;
+    }, J = () => {
+      a.value = !1;
+    }, K = () => {
+      t.disabled || (a.value = !a.value);
+    }, L = (e) => {
       const o = e.target, r = i(o.value);
-      !r || h(r) || (u.value = r, a("update:model-value", g(r)));
-    }, K = n(() => t.modelValue || x.value), L = n(
-      () => t.showSeconds ? p(t.secondStep) : p(t.minuteStep) * 60
-    ), Q = n(() => t.clearable && !!t.modelValue && !t.disabled), W = n(
-      () => _({
-        nmorph: [C[t.height]],
+      !r || b(r) || (l.value = r, p(g(r)));
+    }, Q = n(() => s.value || C.value), W = n(
+      () => t.showSeconds ? f(t.secondStep) : f(t.minuteStep) * 60
+    ), X = n(() => t.clearable && !!s.value && !t.disabled), Y = n(
+      () => O({
+        nmorph: [B[t.height]],
         "nmorph-time-picker": [
           t.disabled && "disabled",
-          s.value && "open",
-          c.value && "focus",
-          !t.modelValue && "placeholder"
+          a.value && "open",
+          w.value && "focus",
+          !s.value && "placeholder"
         ]
       })
-    ), X = n(
-      () => _({
-        nmorph: [C[t.height]]
+    ), Z = n(
+      () => O({
+        nmorph: [B[t.height]]
       })
-    ), Y = n(() => ({
-      ...t.width !== void 0 && { "--width": oe(t.width) }
-    }));
-    H({ inputDOMRef: w });
-    const I = { props: t, emit: a, t: T, id: B, name: M, autocomplete: P, tabindex: $, open: s, focused: c, inputDOMRef: w, pad: m, normalizeStep: p, parseTime: i, formatTime: g, timeToSeconds: f, minTimeParts: y, maxTimeParts: N, modelTimeParts: V, pickerValue: u, placeholderText: x, isOutsideRange: h, getUnitOptions: S, hourOptions: z, minuteOptions: D, secondOptions: A, selectUnit: F, clearHandler: R, closeHandler: U, toggleOpen: j, focusHandler: E, blurHandler: G, nativeInputHandler: J, displayValue: K, inputStep: L, showClearButton: Q, modifiers: W, optionHeightModifiers: X, styles: Y, get NmorphDropdown() {
-      return ae;
+    ), ee = n(
+      () => ne({
+        "--width": t.width
+      })
+    );
+    M({ inputDOMRef: T });
+    const V = { props: t, emit: m, t: I, id: F, name: P, autocomplete: $, tabindex: z, modelValue: s, updateModelValue: p, open: a, inputDOMRef: T, focused: w, focusHandler: D, blurHandler: R, pad: c, normalizeStep: f, parseTime: i, formatTime: g, timeToSeconds: h, minTimeParts: y, maxTimeParts: N, modelTimeParts: x, pickerValue: l, placeholderText: C, isOutsideRange: b, getUnitOptions: S, hourOptions: A, minuteOptions: U, secondOptions: j, selectUnit: E, clearHandler: G, closeHandler: J, toggleOpen: K, nativeInputHandler: L, displayValue: Q, inputStep: W, showClearButton: X, modifiers: Y, optionHeightModifiers: Z, styles: ee, get NmorphDropdown() {
+      return ce;
     }, get NmorphIcon() {
-      return ue;
+      return de;
     }, get NmorphIconCircleClose() {
-      return le;
+      return ie;
     }, get NmorphIconClock() {
-      return ne;
+      return ae;
     } };
-    return Object.defineProperty(I, "__isScriptSetup", { enumerable: !1, value: !0 }), I;
+    return Object.defineProperty(V, "__isScriptSetup", { enumerable: !1, value: !0 }), V;
   }
 });
 export {
-  ve as default
+  Ie as default
 };

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

@@ -1,10 +1,10 @@
 import './NmorphDropdown.css';
-import { defineComponent as w, ref as q, toRef as t, computed as l, watch as v } from "vue";
-import { useModifiers as b } from "../../../utils/create-modifiers.js";
-import { toCssSize as d } from "../../../utils/common.js";
-import { usePlacement as x } from "../../../hooks/use-placement.js";
+import { defineComponent as y, ref as v, toRef as t, computed as i, watch as w } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { toCssSize as b, createCssSizeVariables as x } from "../../../utils/common.js";
+import { usePlacement as S } from "../../../hooks/use-placement.js";
 import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const B = /* @__PURE__ */ w({
+const B = /* @__PURE__ */ y({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -26,44 +26,46 @@ const B = /* @__PURE__ */ w({
     hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
-  setup(p, { expose: f, emit: m }) {
-    f();
-    const e = p, r = m, i = q(null), { placementCoords: o, placementReady: n, adjustPlacement: a } = x({
+  setup(u, { expose: p, emit: f }) {
+    p();
+    const e = u, r = f, l = v(null), { placementCoords: o, placementReady: d, adjustPlacement: a } = S({
       initialPlacement: t(e, "placement"),
-      contentDOMElement: i,
+      contentDOMElement: l,
       relativeElement: t(e, "relativeElement"),
       yOffset: t(e, "yOffset"),
       xOffset: t(e, "xOffset"),
       enabled: t(e, "open")
-    }), c = l(
-      () => b({
+    }), m = i(
+      () => q({
         "nmorph-dropdown": [!e.open && "closed", e.hideShadow && "hide-shadow"]
       })
-    ), s = l(
-      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : d(e.width)
-    ), h = l(() => ({
-      "--nmorph-dropdown-width": s.value,
-      "--nmorph-dropdown-min-width": d(e.minWidth) || "auto",
-      "--nmorph-dropdown-max-width": d(e.maxWidth) || "none",
+    ), n = i(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : b(e.width)
+    ), c = i(() => ({
+      "--nmorph-dropdown-width": n.value,
+      ...x({
+        "--nmorph-dropdown-min-width": e.minWidth === void 0 ? "auto" : e.minWidth,
+        "--nmorph-dropdown-max-width": e.maxWidth === void 0 ? "none" : e.maxWidth
+      }),
       left: o.value.x,
       top: o.value.y,
-      visibility: e.open && n.value ? "visible" : "hidden"
+      visibility: e.open && d.value ? "visible" : "hidden"
     }));
-    v(
+    w(
       () => e.open,
-      (y) => {
-        y && a();
+      (h) => {
+        h && a();
       },
       { flush: "post" }
     );
-    const u = { props: e, emit: r, dropdownDOMRef: i, placementCoords: o, placementReady: n, adjustPlacement: a, modifiers: c, width: s, dropdownStyle: h, outsideClickHandler: () => {
+    const s = { props: e, emit: r, dropdownDOMRef: l, placementCoords: o, placementReady: d, adjustPlacement: a, modifiers: m, width: n, dropdownStyle: c, outsideClickHandler: () => {
       r("on-outside-click");
     }, escapeHandler: () => {
       r("on-escape-keydown");
     }, get NmorphOverlay() {
       return O;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {

package/dist/hooks/use-field-validation.js

@@ -1,74 +1,87 @@
-import { ref as p } from "vue";
-const I = (b) => {
-  const { inputValue: h, rules: a } = b, c = p([]), f = p(!1), d = p(!1);
+import { isFileAllowedByTypes as z } from "../utils/file-types.js";
+import { ref as h } from "vue";
+const v = (n) => typeof File < "u" && n instanceof File, S = (n) => !!n && typeof n == "object" && "data" in n && v(n.data), I = (n) => {
+  if (v(n)) return [n];
+  if (!Array.isArray(n)) return null;
+  const u = n;
+  return u.length === 0 ? [] : u.every(v) ? u : u.every(S) ? u.map((l) => l.data) : null;
+}, D = (n) => {
+  const { inputValue: u, rules: l } = n, p = h([]), y = h(!1), m = h(!1);
   return {
-    touched: d,
-    valid: f,
-    errors: c,
+    touched: m,
+    valid: y,
+    errors: p,
     validate: () => {
-      const y = a?.length > 0;
-      if (!y) {
-        f.value = !0;
+      const F = l?.length > 0;
+      if (p.value = [], !F) {
+        y.value = !0;
         return;
       }
-      if (h === null) return;
-      const t = h, u = (n) => y && n in a[0], m = typeof t == "string" && u("pattern"), v = typeof t == "number" && u("numberCompareType"), g = (typeof t == "string" || typeof t == "boolean") && u("booleanCompareType"), T = Array.isArray(t) && u("arrayCompareType");
-      if (!v && !m && !g && !T) {
+      if (u === null) return;
+      const o = u, a = (s) => F && l.some((r) => s in r), T = typeof o == "string" && a("pattern"), g = typeof o == "number" && a("numberCompareType"), x = (typeof o == "string" || typeof o == "boolean") && a("booleanCompareType"), b = Array.isArray(o) && a("arrayCompareType"), w = a("fileMaxSize") || a("maxFileSize") || a("fileAllowedTypes") || a("allowedTypes") || a("fileMaxCount") || a("maxFiles"), A = w ? I(o) : null, C = w && A !== null;
+      if (!g && !T && !x && !b && !C) {
         console.warn("The input value and the provided rules do not match");
         return;
       }
-      if (d.value || (d.value = !0), m) {
-        const n = a;
-        c.value = n.reduce((o, r) => (t.match(r.pattern) || o.push(r.error), o), []);
+      if (m.value || (m.value = !0), T) {
+        const s = l;
+        p.value = s.reduce((r, t) => (o.match(t.pattern) || r.push(t.error), r), []);
       }
-      if (v) {
-        const n = (r, e, s) => {
-          switch (s) {
+      if (g) {
+        const s = (t, e, i) => {
+          switch (i) {
             case "eq":
-              return r === e;
+              return t === e;
             case "gt":
-              return r > e;
+              return t > e;
             case "lt":
-              return r < e;
+              return t < e;
             case "lte":
-              return r <= e;
+              return t <= e;
             case "gte":
-              return r >= e;
+              return t >= e;
           }
-        }, o = a;
-        c.value = o.reduce((r, e) => (n(t, e.compareValue, e.numberCompareType) && r.push(e.error), r), []);
+        }, r = l;
+        p.value = r.reduce((t, e) => (s(o, e.compareValue, e.numberCompareType) && t.push(e.error), t), []);
       }
-      if (g) {
-        const n = a;
-        c.value = n.reduce((o, r) => {
+      if (x) {
+        const s = l;
+        p.value = s.reduce((r, t) => {
           let e = !1;
-          const { compareValue: s, booleanCompareType: i } = r;
-          return i === "not-eq" && (e = t === s), i === "eq" && (e = t !== s), e || o.push(r.error), o;
+          const { compareValue: i, booleanCompareType: f } = t;
+          return f === "not-eq" && (e = o === i), f === "eq" && (e = o !== i), e || r.push(t.error), r;
         }, []);
       }
-      if (T) {
-        const n = a, o = (r, e, s) => {
-          switch (s) {
+      if (b) {
+        const s = l, r = (t, e, i) => {
+          switch (i) {
             case "contains-one":
-              return r.some((l) => e.includes(l));
+              return t.some((c) => e.includes(c));
             case "full-eq":
-              if (r.length !== e.length) return !1;
-              const i = [...r].sort(), C = [...e].sort();
-              return i.every((l, w) => l === C[w]);
+              if (t.length !== e.length) return !1;
+              const f = [...t].sort(), d = [...e].sort();
+              return f.every((c, R) => c === d[R]);
             case "not-contains":
-              return !r.some((l) => e.includes(l));
+              return !t.some((c) => e.includes(c));
           }
         };
-        c.value = n.reduce((r, e) => (o(
-          t.map((i) => String(i)),
+        p.value = s.reduce((t, e) => (r(
+          o.map((f) => String(f)),
           e.compareValue,
           e.arrayCompareType
-        ) || r.push(e.error), r), []);
+        ) || t.push(e.error), t), []);
+      }
+      if (C) {
+        const s = l, r = A || [];
+        p.value = s.reduce((t, e) => {
+          const i = e.fileMaxSize ?? e.maxFileSize, f = e.fileAllowedTypes ?? e.allowedTypes, d = e.fileMaxCount ?? e.maxFiles;
+          return typeof i == "number" && r.some((c) => c.size > i) && t.push(e.error), f && r.some((c) => !z(c, f)) && t.push(e.error), typeof d == "number" && r.length > d && t.push(e.error), t;
+        }, []);
       }
-      f.value = c.value.length === 0;
+      y.value = p.value.length === 0;
     }
   };
 };
 export {
-  I as useFieldValidation
+  D as useFieldValidation
 };