@webilio-xyz/webilio-vue 1.1.0 → 1.1.2

package/dist/Input.js

@@ -1,4 +1,4 @@
-import { computed as b, withDirectives as O, openBlock as h, createElementBlock as S, vModelCheckbox as J, ref as I, onMounted as T, renderSlot as v, createCommentVNode as N, createElementVNode as U, unref as z, Fragment as se, createBlock as $, createVNode as L, normalizeClass as w, normalizeStyle as ue, createSlots as q, withCtx as g, createTextVNode as M, toDisplayString as A } from "vue";
+import { computed as y, withDirectives as U, openBlock as b, createElementBlock as S, vModelCheckbox as J, ref as I, onMounted as T, renderSlot as v, createCommentVNode as N, createElementVNode as D, normalizeClass as V, unref as z, Fragment as se, createBlock as C, createVNode as L, normalizeStyle as ue, createSlots as q, withCtx as h, createTextVNode as A, toDisplayString as M } from "vue";
 import { trans as oe, isLoaded as ie, getActiveLanguage as re } from "laravel-vue-i18n";
 import de from "@vuepic/vue-datepicker";
 import { s as me, u as H, _ as K, E as Q } from "./LabelComponent-CfsH2P2a.js";
@@ -17,7 +17,7 @@ const Y = {
   },
   emits: ["update:checked", "update:modelValue"],
   setup(e, { emit: a }) {
-    const l = a, t = e, s = b({
+    const l = a, t = e, s = y({
       get() {
         return t.checked;
       },
@@ -25,7 +25,7 @@ const Y = {
         l("update:checked", u), l("update:modelValue", u);
       }
     });
-    return (u, i) => O((h(), S("input", {
+    return (u, i) => U((b(), S("input", {
       "onUpdate:modelValue": i[0] || (i[0] = (o) => s.value = o),
       type: "checkbox",
       class: "wv-input wv-checkbox-input rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
@@ -34,42 +34,42 @@ const Y = {
     ]);
   }
 };
-var be = Object.defineProperty, ve = (e, a, l) => a in e ? be(e, a, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[a] = l, R = (e, a, l) => ve(e, typeof a != "symbol" ? a + "" : a, l);
-const Z = {
+var be = Object.defineProperty, ye = (e, a, l) => a in e ? be(e, a, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[a] = l, R = (e, a, l) => ye(e, typeof a != "symbol" ? a + "" : a, l);
+const j = {
   "#": { pattern: /[0-9]/ },
   "@": { pattern: /[a-zA-Z]/ },
   "*": { pattern: /[a-zA-Z0-9]/ }
-}, j = (e, a, l) => e.replaceAll(a, "").replace(l, ".").replace("..", ".").replace(/[^.\d]/g, ""), G = (e, a, l) => {
+}, Z = (e, a, l) => e.replaceAll(a, "").replace(l, ".").replace("..", ".").replace(/[^.\d]/g, ""), G = (e, a, l) => {
   var t;
   return new Intl.NumberFormat(((t = l.number) == null ? void 0 : t.locale) ?? "en", {
     minimumFractionDigits: e,
     maximumFractionDigits: a,
     roundingMode: "trunc"
   });
-}, ye = (e, a = !0, l) => {
+}, ve = (e, a = !0, l) => {
   var t, s, u, i;
   const o = ((t = l.number) == null ? void 0 : t.unsigned) == null && e.startsWith("-") ? "-" : "", n = ((s = l.number) == null ? void 0 : s.fraction) ?? 0;
   let d = G(0, n, l);
-  const c = d.formatToParts(1000.12), p = ((u = c.find((r) => r.type === "group")) == null ? void 0 : u.value) ?? " ", f = ((i = c.find((r) => r.type === "decimal")) == null ? void 0 : i.value) ?? ".", k = j(e, p, f);
-  if (k === "" || Number.isNaN(k)) return o;
-  const x = k.split(".");
+  const f = d.formatToParts(1000.12), g = ((u = f.find((r) => r.type === "group")) == null ? void 0 : u.value) ?? " ", m = ((i = f.find((r) => r.type === "decimal")) == null ? void 0 : i.value) ?? ".", p = Z(e, g, m);
+  if (p === "" || Number.isNaN(p)) return o;
+  const x = p.split(".");
   if (x[1] != null && x[1].length >= 1) {
     const r = x[1].length <= n ? x[1].length : n;
     d = G(r, n, l);
   }
-  let m = d.format(parseFloat(k));
-  return a ? n > 0 && k.endsWith(".") && !k.slice(0, -1).includes(".") && (m += f) : m = j(m, p, f), o + m;
+  let c = d.format(parseFloat(p));
+  return a ? n > 0 && p.endsWith(".") && !p.slice(0, -1).includes(".") && (c += m) : c = Z(c, g, m), o + c;
 };
 class ke {
   constructor(a = {}) {
     R(this, "opts", {}), R(this, "memo", /* @__PURE__ */ new Map());
     const l = { ...a };
     if (l.tokens != null) {
-      l.tokens = l.tokensReplace ? { ...l.tokens } : { ...Z, ...l.tokens };
+      l.tokens = l.tokensReplace ? { ...l.tokens } : { ...j, ...l.tokens };
       for (const t of Object.values(l.tokens))
         typeof t.pattern == "string" && (t.pattern = new RegExp(t.pattern));
     } else
-      l.tokens = Z;
+      l.tokens = j;
     Array.isArray(l.mask) && (l.mask.length > 1 ? l.mask = [...l.mask].sort((t, s) => t.length - s.length) : l.mask = l.mask[0] ?? ""), l.mask === "" && (l.mask = null), this.opts = l;
   }
   masked(a) {
@@ -108,22 +108,22 @@ class ke {
     }), { mask: l.join(""), escaped: t };
   }
   process(a, l, t = !0) {
-    if (this.opts.number != null) return ye(a, t, this.opts);
+    if (this.opts.number != null) return ve(a, t, this.opts);
     if (l == null) return a;
     const s = `v=${a},mr=${l},m=${t ? 1 : 0}`;
     if (this.memo.has(s)) return this.memo.get(s);
-    const { mask: u, escaped: i } = this.escapeMask(l), o = [], n = this.opts.tokens != null ? this.opts.tokens : {}, d = this.isReversed() ? -1 : 1, c = this.isReversed() ? "unshift" : "push", p = this.isReversed() ? 0 : u.length - 1, f = this.isReversed() ? () => r > -1 && y > -1 : () => r < u.length && y < a.length, k = (C) => !this.isReversed() && C <= p || this.isReversed() && C >= p;
-    let x, m = -1, r = this.isReversed() ? u.length - 1 : 0, y = this.isReversed() ? a.length - 1 : 0, P = !1;
-    for (; f(); ) {
-      const C = u.charAt(r), V = n[C], E = (V == null ? void 0 : V.transform) != null ? V.transform(a.charAt(y)) : a.charAt(y);
-      if (!i.includes(r) && V != null ? (E.match(V.pattern) != null ? (o[c](E), V.repeated ? (m === -1 ? m = r : r === p && r !== m && (r = m - d), p === m && (r -= d)) : V.multiple && (P = !0, r -= d), r += d) : V.multiple ? P && (r += d, y -= d, P = !1) : E === x ? x = void 0 : V.optional && (r += d, y -= d), y += d) : (t && !this.isEager() && o[c](C), E === C && !this.isEager() ? y += d : x = C, this.isEager() || (r += d)), this.isEager())
-        for (; k(r) && (n[u.charAt(r)] == null || i.includes(r)); ) {
+    const { mask: u, escaped: i } = this.escapeMask(l), o = [], n = this.opts.tokens != null ? this.opts.tokens : {}, d = this.isReversed() ? -1 : 1, f = this.isReversed() ? "unshift" : "push", g = this.isReversed() ? 0 : u.length - 1, m = this.isReversed() ? () => r > -1 && k > -1 : () => r < u.length && k < a.length, p = ($) => !this.isReversed() && $ <= g || this.isReversed() && $ >= g;
+    let x, c = -1, r = this.isReversed() ? u.length - 1 : 0, k = this.isReversed() ? a.length - 1 : 0, F = !1;
+    for (; m(); ) {
+      const $ = u.charAt(r), w = n[$], E = (w == null ? void 0 : w.transform) != null ? w.transform(a.charAt(k)) : a.charAt(k);
+      if (!i.includes(r) && w != null ? (E.match(w.pattern) != null ? (o[f](E), w.repeated ? (c === -1 ? c = r : r === g && r !== c && (r = c - d), g === c && (r -= d)) : w.multiple && (F = !0, r -= d), r += d) : w.multiple ? F && (r += d, k -= d, F = !1) : E === x ? x = void 0 : w.optional && (r += d, k -= d), k += d) : (t && !this.isEager() && o[f]($), E === $ && !this.isEager() ? k += d : x = $, this.isEager() || (r += d)), this.isEager())
+        for (; p(r) && (n[u.charAt(r)] == null || i.includes(r)); ) {
           if (t) {
-            if (o[c](u.charAt(r)), a.charAt(y) === u.charAt(r)) {
-              r += d, y += d;
+            if (o[f](u.charAt(r)), a.charAt(k) === u.charAt(r)) {
+              r += d, k += d;
               continue;
             }
-          } else u.charAt(r) === a.charAt(y) && (y += d);
+          } else u.charAt(r) === a.charAt(k) && (k += d);
           r += d;
         }
     }
@@ -187,9 +187,9 @@ class Se {
   fixCursor(a, l, t) {
     const s = a.selectionStart, u = a.value;
     if (t(), s === null || s === u.length && !l) return;
-    const i = a.value, o = u.slice(0, s), n = i.slice(0, s), d = this.processInput(a, o).unmasked, c = this.processInput(a, n).unmasked;
-    let p = s;
-    o !== n && (p += l ? i.length - u.length : d.length - c.length), a.setSelectionRange(p, p);
+    const i = a.value, o = u.slice(0, s), n = i.slice(0, s), d = this.processInput(a, o).unmasked, f = this.processInput(a, n).unmasked;
+    let g = s;
+    o !== n && (g += l ? i.length - u.length : d.length - f.length), a.setSelectionRange(g, g);
   }
   setValue(a, l) {
     const t = this.processInput(a, l);
@@ -207,11 +207,11 @@ class Se {
     };
   }
 }
-const D = /* @__PURE__ */ new WeakMap(), $e = (e, a) => {
+const O = /* @__PURE__ */ new WeakMap(), Ce = (e, a) => {
   if (e.arg == null || e.instance == null) return;
   const l = "setup" in e.instance.$.type;
   e.arg in e.instance ? e.instance[e.arg] = a : l && console.warn("Maska: please expose `%s` using defineExpose", e.arg);
-}, Ce = (e, a) => {
+}, $e = (e, a) => {
   var l;
   const t = e instanceof HTMLInputElement ? e : e.querySelector("input");
   if (t == null || (t == null ? void 0 : t.type) === "file") return;
@@ -219,12 +219,12 @@ const D = /* @__PURE__ */ new WeakMap(), $e = (e, a) => {
   if (a.value != null && (s = typeof a.value == "string" ? { mask: a.value } : { ...a.value }), a.arg != null) {
     const u = (i) => {
       const o = a.modifiers.unmasked ? i.unmasked : a.modifiers.completed ? i.completed : i.masked;
-      $e(a, o);
+      Ce(a, o);
     };
     s.onMaska = s.onMaska == null ? u : Array.isArray(s.onMaska) ? [...s.onMaska, u] : [s.onMaska, u];
   }
-  D.has(t) ? (l = D.get(t)) == null || l.update(s) : D.set(t, new Se(t, s));
-}, Me = { class: "wv-text-input-wrapper flex items-center border border-gray-300 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500 rounded-md shadow-sm" }, Ae = {
+  O.has(t) ? (l = O.get(t)) == null || l.update(s) : O.set(t, new Se(t, s));
+}, Ae = { class: "wv-text-input-wrapper flex items-center border border-gray-300 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500 rounded-md shadow-sm" }, Me = {
   key: 0,
   class: "wv-text-input-prefix flex items-center pl-2"
 }, Ie = ["type", "inputmode", "value", "min", "max", "step"], Te = {
@@ -251,43 +251,51 @@ const D = /* @__PURE__ */ new WeakMap(), $e = (e, a) => {
     step: {
       type: [String, Number],
       default: null
+    },
+    inputClass: {
+      type: [String, Array, Object],
+      default: null
     }
   },
   emits: ["update:modelValue"],
   setup(e, { expose: a, emit: l }) {
-    const t = e, s = l, u = b(() => t.type === "number"), i = b(() => u.value && t.precision !== null ? "text" : t.type), o = b(() => u.value && t.precision !== null ? "decimal" : null), n = b(() => t.step ? t.step : t.precision !== null ? Math.pow(10, -t.precision).toFixed(t.precision) : null), d = (p) => {
-      let f = p.target.value;
+    const t = e, s = l, u = y(() => t.type === "number"), i = y(() => u.value && t.precision !== null ? "text" : t.type), o = y(() => u.value && t.precision !== null ? "decimal" : null), n = y(() => t.step ? t.step : t.precision !== null ? Math.pow(10, -t.precision).toFixed(t.precision) : null), d = (m) => {
+      if (!u.value || m === "" || m === "-" || m === "." || m === "-.") return m;
+      const p = parseFloat(m);
+      return isNaN(p) ? m : t.min !== null && p < parseFloat(t.min) ? t.min : t.max !== null && p > parseFloat(t.max) ? t.max : m;
+    }, f = (m) => {
+      let p = m.target.value;
       if (u.value && t.precision !== null) {
-        const k = new RegExp(`^-?\\d*\\.?\\d{0,${t.precision}}$`);
-        if (f !== "" && f !== "-" && f !== "." && f !== "-." && !k.test(f)) {
-          p.target.value = t.modelValue || "";
+        const x = new RegExp(`^-?\\d*\\.?\\d{0,${t.precision}}$`);
+        if (p !== "" && p !== "-" && p !== "." && p !== "-." && !x.test(p)) {
+          m.target.value = t.modelValue || "";
           return;
         }
       }
-      s("update:modelValue", f);
-    }, c = I(null);
+      p = d(p), m.target.value = p, s("update:modelValue", p);
+    }, g = I(null);
     return T(() => {
-      c.value.hasAttribute("autofocus") && c.value.focus();
-    }), a({ focus: () => c.value.focus() }), (p, f) => (h(), S("div", Me, [
-      p.$slots.prefix ? (h(), S("div", Ae, [
-        v(p.$slots, "prefix")
+      g.value.hasAttribute("autofocus") && g.value.focus();
+    }), a({ focus: () => g.value.focus() }), (m, p) => (b(), S("div", Ae, [
+      m.$slots.prefix ? (b(), S("div", Me, [
+        v(m.$slots, "prefix")
       ])) : N("", !0),
-      O(U("input", {
+      U(D("input", {
         ref_key: "input",
-        ref: c,
+        ref: g,
         type: i.value,
         inputmode: o.value,
-        class: "wv-input wv-text-input flex-1 border-0 focus:ring-0 disabled:bg-gray-200 px-1",
+        class: V(["wv-input wv-text-input flex-1 border-0 focus:ring-0 disabled:bg-gray-200 px-1", e.inputClass]),
         value: e.modelValue,
         min: e.min,
         max: e.max,
         step: n.value,
-        onInput: d
-      }, null, 40, Ie), [
-        [z(Ce), e.mask]
+        onInput: f
+      }, null, 42, Ie), [
+        [z($e), e.mask]
       ]),
-      p.$slots.suffix ? (h(), S("div", Te, [
-        v(p.$slots, "suffix")
+      m.$slots.suffix ? (b(), S("div", Te, [
+        v(m.$slots, "suffix")
       ])) : N("", !0)
     ]));
   }
@@ -322,39 +330,39 @@ const D = /* @__PURE__ */ new WeakMap(), $e = (e, a) => {
         import("date-fns"),
         import("date-fns-tz")
       ]));
-    }, u = b(() => {
-      let m = "yyyy/MM/dd";
+    }, u = y(() => {
+      let c = "yyyy/MM/dd";
       if (i.value && l)
         try {
-          const r = oe("date.format").toString(), y = l.parse("29/10/1989", "P", /* @__PURE__ */ new Date());
-          l.format(y, r), m = r;
+          const r = oe("date.format").toString(), k = l.parse("29/10/1989", "P", /* @__PURE__ */ new Date());
+          l.format(k, r), c = r;
         } catch {
         }
-      return m;
+      return c;
     }), i = I(!1);
     T(async () => {
       await s();
-      const m = setInterval(() => {
-        ie() && (i.value = !0, clearInterval(m));
+      const c = setInterval(() => {
+        ie() && (i.value = !0, clearInterval(c));
       }, 50);
     });
-    const o = b(() => re()), n = e, d = a, c = (m) => !m || !t ? null : Array.isArray(m) ? m.map((r) => t.fromZonedTime(r, Intl.DateTimeFormat().resolvedOptions().timeZone)) : t.fromZonedTime(m, Intl.DateTimeFormat().resolvedOptions().timeZone), p = b(() => c(n.modelValue)), f = b(() => c(n.min)), k = b(() => c(n.max)), x = (m) => {
-      d("update:modelValue", m);
+    const o = y(() => re()), n = e, d = a, f = (c) => !c || !t ? null : Array.isArray(c) ? c.map((r) => t.fromZonedTime(r, Intl.DateTimeFormat().resolvedOptions().timeZone)) : t.fromZonedTime(c, Intl.DateTimeFormat().resolvedOptions().timeZone), g = y(() => f(n.modelValue)), m = y(() => f(n.min)), p = y(() => f(n.max)), x = (c) => {
+      d("update:modelValue", c);
     };
-    return (m, r) => (h(), S(se, null, [
-      u.value ? (h(), $(z(de), {
+    return (c, r) => (b(), S(se, null, [
+      u.value ? (b(), C(z(de), {
         key: 0,
         class: "print:hidden wv-input wv-date-input",
-        "model-value": p.value,
-        "min-date": f.value,
-        "max-date": k.value,
+        "model-value": g.value,
+        "min-date": m.value,
+        "max-date": p.value,
         "enable-time-picker": e.enableTimePicker,
         format: u.value,
         locale: o.value,
         range: e.range,
-        "select-text": m.$t("Select"),
-        "cancel-text-text": m.$t("Cancel"),
-        "now-button-label": m.$t("Now"),
+        "select-text": c.$t("Select"),
+        "cancel-text-text": c.$t("Cancel"),
+        "now-button-label": c.$t("Now"),
         "time-picker": !1,
         "auto-apply": !0,
         "partial-flow": !0,
@@ -385,9 +393,9 @@ const D = /* @__PURE__ */ new WeakMap(), $e = (e, a) => {
   },
   emits: ["update:checked", "update:modelValue"],
   setup(e, { emit: a }) {
-    const l = a, t = e, s = b(() => ({
+    const l = a, t = e, s = y(() => ({
       "--size": `${t.size}rem`
-    })), u = b({
+    })), u = y({
       get() {
         return !!t.modelValue;
       },
@@ -395,10 +403,10 @@ const D = /* @__PURE__ */ new WeakMap(), $e = (e, a) => {
         t.disabled || (l("update:modelValue", i), l("update:checked", i));
       }
     });
-    return (i, o) => (h(), S("label", {
-      class: w(["inline-flex items-center", { "cursor-pointer": !e.disabled }])
+    return (i, o) => (b(), S("label", {
+      class: V(["inline-flex items-center", { "cursor-pointer": !e.disabled }])
     }, [
-      O(U("input", {
+      U(D("input", {
         "onUpdate:modelValue": o[0] || (o[0] = (n) => u.value = n),
         type: "checkbox",
         value: "",
@@ -407,9 +415,9 @@ const D = /* @__PURE__ */ new WeakMap(), $e = (e, a) => {
       }, null, 8, Be), [
         [J, u.value]
       ]),
-      U("div", {
+      D("div", {
         style: ue(s.value),
-        class: w(["wv-input wv-toggle-input relative bg-gray-700 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600", {
+        class: V(["wv-input wv-toggle-input relative bg-gray-700 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600", {
           "after:bg-gray-300": e.disabled,
           "bg-gray-400": e.disabled,
           "peer-checked:bg-blue-400": e.disabled
@@ -424,7 +432,7 @@ function Le(e, a) {
     t[++l] = a(s, u, i);
   }), t;
 }
-function F(e, a) {
+function P(e, a) {
   var l = he(e) ? ce : Le;
   return l(e, pe(a));
 }
@@ -483,7 +491,7 @@ const ae = {
   },
   emits: ["update:modelValue", "tag"],
   setup(e, { emit: a }) {
-    const l = a, t = e, s = b({
+    const l = a, t = e, s = y({
       get() {
         return Array.isArray(t.modelValue) ? u.value.filter((n) => t.modelValue.includes(n == null ? void 0 : n.value)) : u.value.find((n) => (n == null ? void 0 : n.value) === t.modelValue);
       },
@@ -492,29 +500,29 @@ const ae = {
           if (!t.multiple)
             l("update:modelValue", n == null ? void 0 : n.value);
           else {
-            const d = F(n, (c) => c == null ? void 0 : c.value);
+            const d = P(n, (f) => f == null ? void 0 : f.value);
             l("update:modelValue", d);
           }
       }
-    }), u = b(() => F(t == null ? void 0 : t.options, (n) => typeof n == "string" ? {
+    }), u = y(() => P(t == null ? void 0 : t.options, (n) => typeof n == "string" ? {
       label: n,
       value: n
     } : n) ?? []), i = (n) => {
       if (t.deselectable) {
         let d;
         if (t.multiple) {
-          const c = n == null ? void 0 : n.value;
-          d = F(s.value ?? [], (f) => f == null ? void 0 : f.value).filter((f) => f !== c);
+          const f = n == null ? void 0 : n.value;
+          d = P(s.value ?? [], (m) => m == null ? void 0 : m.value).filter((m) => m !== f);
         }
         l("update:modelValue", d);
       }
     }, o = (n) => {
       l("tag", n);
     };
-    return (n, d) => (h(), $(z(me), {
+    return (n, d) => (b(), C(z(me), {
       id: "value",
       modelValue: s.value,
-      "onUpdate:modelValue": d[0] || (d[0] = (c) => s.value = c),
+      "onUpdate:modelValue": d[0] || (d[0] = (f) => s.value = f),
       class: "wv-input wv-select-input border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm",
       options: u.value,
       placeholder: e.placeholder ?? n.$t("select.placeholder"),
@@ -532,79 +540,79 @@ const ae = {
       onTag: o,
       onRemove: i
     }, q({
-      maxElements: g(() => [
-        M(A(n.$tChoice("select.maxElements", e.max)), 1)
+      maxElements: h(() => [
+        A(M(n.$tChoice("select.maxElements", e.max)), 1)
       ]),
-      noResult: g(() => [
-        M(A(n.$t("select.noResult")), 1)
+      noResult: h(() => [
+        A(M(n.$t("select.noResult")), 1)
       ]),
-      noOptions: g(() => [
-        M(A(n.$t("select.noOptions")), 1)
+      noOptions: h(() => [
+        A(M(n.$t("select.noOptions")), 1)
       ]),
-      tag: g(() => [
-        M(A(n.$t("select.tag")), 1)
+      tag: h(() => [
+        A(M(n.$t("select.tag")), 1)
       ]),
       _: 2
     }, [
       n.$slots.beforeList ? {
         name: "beforeList",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "beforeList")
         ]),
         key: "0"
       } : void 0,
       n.$slots.afterList ? {
         name: "afterList",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "afterList")
         ]),
         key: "1"
       } : void 0,
       n.$slots.caret ? {
         name: "caret",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "caret")
         ]),
         key: "2"
       } : void 0,
       n.$slots.singleLabel ? {
         name: "singleLabel",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "singleLabel")
         ]),
         key: "3"
       } : void 0,
       n.$slots.placeholder ? {
         name: "placeholder",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "placeholder")
         ]),
         key: "4"
       } : void 0,
       n.$slots.limit ? {
         name: "limit",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "limit")
         ]),
         key: "5"
       } : void 0,
       n.$slots.clear ? {
         name: "clear",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "clear")
         ]),
         key: "6"
       } : void 0,
       n.$slots.tag ? {
         name: "tag",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "tag")
         ]),
         key: "7"
       } : void 0,
       n.$slots.selection ? {
         name: "selection",
-        fn: g(() => [
+        fn: h(() => [
           v(n.$slots, "selection")
         ]),
         key: "8"
@@ -622,7 +630,7 @@ const ae = {
     const l = I(null);
     return T(() => {
       l.value.hasAttribute("autofocus") && l.value.focus();
-    }), a({ focus: () => l.value.focus() }), (t, s) => (h(), S("textarea", {
+    }), a({ focus: () => l.value.focus() }), (t, s) => (b(), S("textarea", {
       ref_key: "input",
       ref: l,
       class: "wv-input wv-textarea-input border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-200",
@@ -631,7 +639,7 @@ const ae = {
       onInput: s[0] || (s[0] = (u) => t.$emit("update:modelValue", u.target.value))
     }, null, 40, Re));
   }
-}, Pe = {
+}, Fe = {
   key: 1,
   class: "h-10 flex items-center"
 }, ne = {
@@ -696,6 +704,10 @@ const ae = {
     step: {
       type: [String, Number],
       default: null
+    },
+    inputClass: {
+      type: [String, Array, Object],
+      default: null
     }
   },
   emits: ["update:modelValue", "tag"],
@@ -704,31 +716,31 @@ const ae = {
     T(() => {
       s.value = H("input_group_");
     });
-    const u = b(() => l.type === "tel" ? "(###) ###-####" : null);
-    return (i, o) => e.type === "checkbox" ? (h(), $(Y, {
+    const u = y(() => l.type === "tel" ? "(###) ###-####" : null);
+    return (i, o) => e.type === "checkbox" ? (b(), C(Y, {
       key: 0,
       id: s.value,
       name: e.name,
       "model-value": e.modelValue,
-      class: w("size-10 " + e.customClass),
+      class: V("size-10 " + e.customClass),
       disabled: e.disabled,
       "onUpdate:modelValue": o[0] || (o[0] = (n) => t("update:modelValue", n))
-    }, null, 8, ["id", "name", "model-value", "class", "disabled"])) : e.type === "toggle" ? (h(), S("div", Pe, [
+    }, null, 8, ["id", "name", "model-value", "class", "disabled"])) : e.type === "toggle" ? (b(), S("div", Fe, [
       L(te, {
         id: s.value,
         name: e.name,
         "model-value": !!e.modelValue,
         size: "15",
-        class: w(e.customClass),
+        class: V(e.customClass),
         disabled: e.disabled,
         "onUpdate:modelValue": o[1] || (o[1] = (n) => t("update:modelValue", n))
       }, null, 8, ["id", "name", "model-value", "class", "disabled"])
-    ])) : e.type === "select" ? (h(), $(ae, {
+    ])) : e.type === "select" ? (b(), C(ae, {
       key: 2,
       id: s.value,
       name: e.name,
       "model-value": e.modelValue,
-      class: w("w-full " + e.customClass),
+      class: V("w-full " + e.customClass),
       options: e.options,
       disabled: e.disabled,
       multiple: e.multiple,
@@ -737,28 +749,28 @@ const ae = {
       deselectable: e.deselectable,
       "onUpdate:modelValue": o[2] || (o[2] = (n) => t("update:modelValue", n)),
       onTag: o[3] || (o[3] = (n) => t("tag", n))
-    }, null, 8, ["id", "name", "model-value", "class", "options", "disabled", "multiple", "searchable", "taggable", "deselectable"])) : e.type === "textarea" ? (h(), $(le, {
+    }, null, 8, ["id", "name", "model-value", "class", "options", "disabled", "multiple", "searchable", "taggable", "deselectable"])) : e.type === "textarea" ? (b(), C(le, {
       key: 3,
       id: s.value,
       name: e.name,
       "model-value": e.modelValue,
-      class: w("w-full " + e.customClass),
+      class: V("w-full " + e.customClass),
       placeholder: e.placeholder,
       disabled: e.disabled,
       "onUpdate:modelValue": o[4] || (o[4] = (n) => t("update:modelValue", n))
-    }, null, 8, ["id", "name", "model-value", "class", "placeholder", "disabled"])) : e.type === "date" ? (h(), $(ee, {
+    }, null, 8, ["id", "name", "model-value", "class", "placeholder", "disabled"])) : e.type === "date" ? (b(), C(ee, {
       key: 4,
       id: s.value,
       name: e.name,
       "model-value": e.modelValue,
-      class: w("w-full " + e.customClass),
+      class: V("w-full " + e.customClass),
       max: e.max,
       min: e.min,
       range: e.range,
       "enable-time-picker": e.enableTimePicker,
       disabled: e.disabled,
       "onUpdate:modelValue": o[5] || (o[5] = (n) => t("update:modelValue", n))
-    }, null, 8, ["id", "name", "model-value", "class", "max", "min", "range", "enable-time-picker", "disabled"])) : (h(), $(W, {
+    }, null, 8, ["id", "name", "model-value", "class", "max", "min", "range", "enable-time-picker", "disabled"])) : (b(), C(W, {
       key: 5,
       id: s.value,
       type: e.type,
@@ -771,26 +783,27 @@ const ae = {
       mask: u.value,
       precision: e.precision,
       step: e.step,
-      class: w("w-full " + e.customClass),
+      class: V("w-full " + e.customClass),
+      "input-class": e.inputClass,
       "onUpdate:modelValue": o[6] || (o[6] = (n) => t("update:modelValue", n))
     }, q({ _: 2 }, [
       i.$slots.prefix ? {
         name: "prefix",
-        fn: g(() => [
+        fn: h(() => [
           v(i.$slots, "prefix")
         ]),
         key: "0"
       } : void 0,
       i.$slots.suffix ? {
         name: "suffix",
-        fn: g(() => [
+        fn: h(() => [
           v(i.$slots, "suffix")
         ]),
         key: "1"
       } : void 0
-    ]), 1032, ["id", "type", "name", "placeholder", "model-value", "disabled", "min", "max", "mask", "precision", "step", "class"]));
+    ]), 1032, ["id", "type", "name", "placeholder", "model-value", "disabled", "min", "max", "mask", "precision", "step", "class", "input-class"]));
   }
-}, De = {
+}, Oe = {
   __name: "InputGroupComponent",
   props: {
     modelValue: String,
@@ -861,6 +874,10 @@ const ae = {
     step: {
       type: [String, Number],
       default: null
+    },
+    inputClass: {
+      type: [String, Array, Object],
+      default: null
     }
   },
   emits: ["update:modelValue", "tag"],
@@ -869,9 +886,9 @@ const ae = {
     T(() => {
       s.value = H("input_group_");
     });
-    const u = b(() => l.type === "tel" ? "(###) ###-####" : null);
-    return (i, o) => (h(), S("div", {
-      class: w(["w-full", { error: e.errors !== null && e.errors !== "" }])
+    const u = y(() => l.type === "tel" ? "(###) ###-####" : null);
+    return (i, o) => (b(), S("div", {
+      class: V(["w-full", { error: e.errors !== null && e.errors !== "" }])
     }, [
       L(K, {
         for: s.value,
@@ -879,8 +896,8 @@ const ae = {
         required: e.required,
         class: "w-full mb-2"
       }, {
-        default: g(() => [
-          M(A(e.label), 1)
+        default: h(() => [
+          A(M(e.label), 1)
         ]),
         _: 1
       }, 8, ["for", "value", "required"]),
@@ -904,25 +921,26 @@ const ae = {
         "custom-class": e.customClass,
         precision: e.precision,
         step: e.step,
+        "input-class": e.inputClass,
         "onUpdate:modelValue": o[0] || (o[0] = (n) => t("update:modelValue", n)),
         onTag: o[1] || (o[1] = (n) => t("tag", n))
       }, q({ _: 2 }, [
         i.$slots.prefix ? {
           name: "prefix",
-          fn: g(() => [
+          fn: h(() => [
             v(i.$slots, "prefix")
           ]),
           key: "0"
         } : void 0,
         i.$slots.suffix ? {
           name: "suffix",
-          fn: g(() => [
+          fn: h(() => [
             v(i.$slots, "suffix")
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["id", "name", "type", "model-value", "disabled", "multiple", "options", "max", "min", "range", "mask", "searchable", "placeholder", "taggable", "deselectable", "enable-time-picker", "custom-class", "precision", "step"]),
-      e.errors ? (h(), $(Q, {
+      ]), 1032, ["id", "name", "type", "model-value", "disabled", "multiple", "options", "max", "min", "range", "mask", "searchable", "placeholder", "taggable", "deselectable", "enable-time-picker", "custom-class", "precision", "step", "input-class"]),
+      e.errors ? (b(), C(Q, {
         key: 0,
         class: "mt-2",
         message: e.errors
@@ -934,7 +952,7 @@ const ae = {
   DateComponent: ee,
   ErrorComponent: Q,
   InputComponent: ne,
-  InputGroupComponent: De,
+  InputGroupComponent: Oe,
   LabelComponent: K,
   SelectComponent: ae,
   TextareaComponent: le,
@@ -946,7 +964,7 @@ export {
   ee as DateComponent,
   Q as ErrorComponent,
   ne as InputComponent,
-  De as InputGroupComponent,
+  Oe as InputGroupComponent,
   K as LabelComponent,
   ae as SelectComponent,
   W as TextInputComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webilio-xyz/webilio-vue",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",