@luis-angel-martin-dzul/vue-input-styles 0.0.44 → 0.0.45

package/dist/vue-input-styles.es.js

@@ -1,4 +1,4 @@
-import { createElementBlock as i, openBlock as a, normalizeClass as m, renderSlot as C, createElementVNode as o, createCommentVNode as h, toDisplayString as u, Fragment as p, renderList as w, withDirectives as f, createTextVNode as y, withModifiers as k, vModelText as v, mergeProps as x, vModelDynamic as _, vModelSelect as V, normalizeStyle as U } from "vue";
+import { createElementBlock as i, openBlock as o, normalizeClass as m, renderSlot as C, createElementVNode as d, createCommentVNode as c, toDisplayString as g, Fragment as x, renderList as p, withDirectives as y, createTextVNode as f, withModifiers as k, vModelText as v, mergeProps as w, vModelDynamic as _, vModelSelect as U, normalizeStyle as V } from "vue";
 class b {
   static type = {
     success: "success",
@@ -15,53 +15,53 @@ class b {
     info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z"/></svg>',
     neutral: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM272 272C272 254.3 257.7 240 240 240C222.3 240 208 254.3 208 272C208 289.7 222.3 304 240 304C257.7 304 272 289.7 272 272zM400 304C417.7 304 432 289.7 432 272C432 254.3 417.7 240 400 240C382.3 240 368 254.3 368 272C368 289.7 382.3 304 400 304z"/></svg>'
   };
-  static #e(l, t, n = b.type.info, d = 4e3) {
+  static #e(t, l, n = b.type.info, a = 4e3) {
     b.ensureContainer();
-    const s = b.container.querySelector(`.alert-${n}`);
-    s && s.remove();
-    const r = document.createElement("div");
-    r.className = `alert alert-${n}`;
-    const c = b.iconMap[n] || "";
-    r.innerHTML = `
-      <div class="alert-icon">${c}</div>
+    const r = b.container.querySelector(`.alert-${n}`);
+    r && r.remove();
+    const s = document.createElement("div");
+    s.className = `alert alert-${n}`;
+    const u = b.iconMap[n] || "";
+    s.innerHTML = `
+      <div class="alert-icon">${u}</div>
       <div class="alert-texts">
-          <div class="alert-title">${l}</div>
-          <div class="alert-message">${t}</div>
+          <div class="alert-title">${t}</div>
+          <div class="alert-message">${l}</div>
       </div>
       <div class="alert-close">&times;</div>
-    `, r.querySelector(".alert-close").addEventListener("click", () => {
-      b.remove(r);
-    }), b.container.appendChild(r), setTimeout(() => r.classList.add("show"), 10), d > 0 && setTimeout(() => b.remove(r), d);
+    `, s.querySelector(".alert-close").addEventListener("click", () => {
+      b.remove(s);
+    }), b.container.appendChild(s), setTimeout(() => s.classList.add("show"), 10), a > 0 && setTimeout(() => b.remove(s), a);
   }
   // Métodos públicos reutilizables
-  static success(l, t = "") {
-    this.#e(l, t, this.type.success);
+  static success(t, l = "") {
+    this.#e(t, l, this.type.success);
   }
-  static error(l, t = "") {
-    this.#e(l, t, this.type.error);
+  static error(t, l = "") {
+    this.#e(t, l, this.type.error);
   }
-  static warning(l, t = "") {
-    this.#e(l, t, this.type.warning);
+  static warning(t, l = "") {
+    this.#e(t, l, this.type.warning);
   }
-  static info(l, t = "") {
-    this.#e(l, t, this.type.info);
+  static info(t, l = "") {
+    this.#e(t, l, this.type.info);
   }
-  static neutral(l, t = "") {
-    this.#e(l, t, this.type.neutral);
+  static neutral(t, l = "") {
+    this.#e(t, l, this.type.neutral);
   }
   static ensureContainer() {
     this.container || (this.container = document.createElement("div"), this.container.className = "alert-container", document.body.appendChild(this.container));
   }
-  static remove(l) {
-    l.classList.add("hide"), setTimeout(() => l.remove(), 250);
+  static remove(t) {
+    t.classList.add("hide"), setTimeout(() => t.remove(), 250);
   }
 }
-const g = (e, l) => {
-  const t = e.__vccOpts || e;
-  for (const [n, d] of l)
-    t[n] = d;
-  return t;
-}, T = {
+const h = (e, t) => {
+  const l = e.__vccOpts || e;
+  for (const [n, a] of t)
+    l[n] = a;
+  return l;
+}, I = {
   name: "ButtonStyle",
   emits: ["click"],
   props: {
@@ -86,7 +86,7 @@ const g = (e, l) => {
         return `${this.class} cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed`;
       const e = [
         "h-min font-semibold items-center justify-center rounded px-3 py-1.5 gap-1 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
-      ], l = {
+      ], t = {
         solid: {
           gray: "text-white bg-slate-600 enabled:hover:bg-slate-700",
           green: "text-white bg-emerald-600 enabled:hover:bg-emerald-700",
@@ -102,7 +102,7 @@ const g = (e, l) => {
           yellow: "text-amber-700 enabled:hover:bg-amber-50 border border-amber-700"
         }
       };
-      return e.push(l[this.variant][this.color]), e;
+      return e.push(t[this.variant][this.color]), e;
     }
   },
   methods: {
@@ -112,18 +112,18 @@ const g = (e, l) => {
       }, 1e3 * Number(this.delay)));
     }
   }
-}, I = ["type", "disabled"];
-function B(e, l, t, n, d, s) {
-  return a(), i("button", {
-    type: t.type,
-    onClick: l[0] || (l[0] = (...r) => s.handleClick && s.handleClick(...r)),
-    disabled: s.isDisabled,
-    class: m(s.buttonClasses)
+}, B = ["type", "disabled"];
+function T(e, t, l, n, a, r) {
+  return o(), i("button", {
+    type: l.type,
+    onClick: t[0] || (t[0] = (...s) => r.handleClick && r.handleClick(...s)),
+    disabled: r.isDisabled,
+    class: m(r.buttonClasses)
   }, [
     C(e.$slots, "default")
-  ], 10, I);
+  ], 10, B);
 }
-const q = /* @__PURE__ */ g(T, [["render", B]]), L = {
+const q = /* @__PURE__ */ h(I, [["render", T]]), L = {
   name: "CheckStyle",
   props: {
     label: { type: String, default: "" },
@@ -161,8 +161,8 @@ const q = /* @__PURE__ */ g(T, [["render", B]]), L = {
       return this.returnType === "object" ? e : this.returnType === "text" ? e.name : e.id;
     },
     isChecked(e) {
-      const l = this.getValue(e);
-      return this.realSelection.includes(l);
+      const t = this.getValue(e);
+      return this.realSelection.includes(t);
     },
     emitExternal() {
       if (!this.returnAll && this.realSelection.length === this.list.length) {
@@ -175,60 +175,60 @@ const q = /* @__PURE__ */ g(T, [["render", B]]), L = {
       );
     },
     onChange(e) {
-      const l = this.getValue(e);
-      this.realSelection.includes(l) ? this.realSelection = this.realSelection.filter(
-        (t) => t !== l
-      ) : this.all ? this.realSelection.push(l) : this.realSelection = [l], this.emitExternal();
+      const t = this.getValue(e);
+      this.realSelection.includes(t) ? this.realSelection = this.realSelection.filter(
+        (l) => l !== t
+      ) : this.all ? this.realSelection.push(t) : this.realSelection = [t], this.emitExternal();
     },
     toggleSelectAll() {
       this.all && (this.isAllSelected ? this.realSelection = [] : this.realSelection = this.list.map((e) => this.getValue(e)), this.emitExternal());
     }
   }
-}, N = { class: "w-full" }, A = { class: "flex items-center justify-between" }, M = { class: "block text-sm font-medium text-gray-700" }, z = {
+}, N = { class: "w-full" }, M = { class: "flex items-center justify-between" }, A = { class: "block text-sm font-medium text-gray-700" }, z = {
   key: 0,
   class: "flex items-center gap-2 select-none"
-}, j = ["id", "checked"], E = ["for"], F = ["id", "checked", "onChange"], P = ["for"];
-function K(e, l, t, n, d, s) {
-  return a(), i("div", N, [
-    o("div", A, [
-      o("h3", M, u(t.label), 1),
-      t.all ? (a(), i("div", z, [
-        o("input", {
+}, F = ["id", "checked"], P = ["for"], E = ["id", "checked", "onChange"], j = ["for"];
+function K(e, t, l, n, a, r) {
+  return o(), i("div", N, [
+    d("div", M, [
+      d("h3", A, g(l.label), 1),
+      l.all ? (o(), i("div", z, [
+        d("input", {
           type: "checkbox",
-          id: "todos-" + s.getUUID,
-          checked: s.isAllSelected,
-          onChange: l[0] || (l[0] = (...r) => s.toggleSelectAll && s.toggleSelectAll(...r)),
+          id: "todos-" + r.getUUID,
+          checked: r.isAllSelected,
+          onChange: t[0] || (t[0] = (...s) => r.toggleSelectAll && r.toggleSelectAll(...s)),
           class: "w-4 h-4 accent-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
-        }, null, 40, j),
-        o("label", {
-          for: "todos-" + s.getUUID,
+        }, null, 40, F),
+        d("label", {
+          for: "todos-" + r.getUUID,
           class: "text-sm text-gray-600 uppercase truncate"
-        }, " Seleccionar todos ", 8, E)
-      ])) : h("", !0)
+        }, " Seleccionar todos ", 8, P)
+      ])) : c("", !0)
     ]),
-    o("div", {
-      class: m(["max-h-48 overflow-auto space-y-1", t.grid])
+    d("div", {
+      class: m(["max-h-48 overflow-auto space-y-1", l.grid])
     }, [
-      (a(!0), i(p, null, w(t.list, (r) => (a(), i("div", {
-        key: r.id,
+      (o(!0), i(x, null, p(l.list, (s) => (o(), i("div", {
+        key: s.id,
         class: "flex items-center gap-2 select-none"
       }, [
-        o("input", {
+        d("input", {
           type: "checkbox",
-          id: s.getUUID + "-" + r.id,
-          checked: s.isChecked(r),
-          onChange: (c) => s.onChange(r),
+          id: r.getUUID + "-" + s.id,
+          checked: r.isChecked(s),
+          onChange: (u) => r.onChange(s),
           class: "w-4 h-4 accent-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
-        }, null, 40, F),
-        o("label", {
-          for: s.getUUID + "-" + r.id,
+        }, null, 40, E),
+        d("label", {
+          for: r.getUUID + "-" + s.id,
           class: "truncate text-gray-700"
-        }, u(r.name), 9, P)
+        }, g(s.name), 9, j)
       ]))), 128))
     ], 2)
   ]);
 }
-const W = /* @__PURE__ */ g(L, [["render", K]]), O = {
+const W = /* @__PURE__ */ h(L, [["render", K]]), O = {
   name: "ComboBoxStyle",
   props: {
     modelValue: [String, Number, Object, null],
@@ -270,8 +270,8 @@ const W = /* @__PURE__ */ g(L, [["render", K]]), O = {
           this.search = "", this.searchCopy = "";
           return;
         }
-        const l = this.list.find((t) => t.id === e);
-        l && (this.search = l.name, this.searchCopy = l.name);
+        const t = this.list.find((l) => l.id === e);
+        t && (this.search = t.name, this.searchCopy = t.name);
       }
     }
   },
@@ -301,86 +301,94 @@ const W = /* @__PURE__ */ g(L, [["render", K]]), O = {
   key: 0,
   class: "px-3 py-2 text-gray-800"
 }, te = ["onMousedown"];
-function le(e, l, t, n, d, s) {
-  return a(), i("div", H, [
-    o("label", {
+function le(e, t, l, n, a, r) {
+  return o(), i("div", H, [
+    d("label", {
       class: "flex justify-between",
-      for: d.uuid
+      for: a.uuid
     }, [
-      o("div", G, [
-        y(u(t.label) + " ", 1),
-        t.required ? (a(), i("span", J, "*")) : h("", !0)
+      d("div", G, [
+        f(g(l.label) + " ", 1),
+        l.required ? (o(), i("span", J, "*")) : c("", !0)
       ]),
-      s.model ? (a(), i("span", {
+      r.model ? (o(), i("span", {
         key: 0,
         class: "text-xs px-2.5 rounded text-red-800 hover:bg-red-50 cursor-pointer",
-        onMousedown: l[0] || (l[0] = k(() => {
+        onMousedown: t[0] || (t[0] = k(() => {
         }, ["prevent"])),
-        onClick: l[1] || (l[1] = (...r) => s.clearItem && s.clearItem(...r))
-      }, "Limpiar ", 32)) : h("", !0)
+        onClick: t[1] || (t[1] = (...s) => r.clearItem && r.clearItem(...s))
+      }, "Limpiar ", 32)) : c("", !0)
     ], 8, R),
-    e.$slots.icon ? (a(), i("div", Q, [
-      o("div", X, [
+    e.$slots.icon ? (o(), i("div", Q, [
+      d("div", X, [
         C(e.$slots, "icon")
       ]),
-      f(o("input", {
-        id: d.uuid,
+      y(d("input", {
+        id: a.uuid,
         type: "text",
-        "onUpdate:modelValue": l[2] || (l[2] = (r) => d.search = r),
-        placeholder: t.placeholder,
-        disabled: t.disabled,
-        required: t.required,
-        onBlur: l[3] || (l[3] = (...r) => s.closeWithDelay && s.closeWithDelay(...r)),
-        onFocus: l[4] || (l[4] = (r) => d.open = !t.disabled),
-        onInput: l[5] || (l[5] = (r) => d.open = !t.disabled),
+        "onUpdate:modelValue": t[2] || (t[2] = (s) => a.search = s),
+        placeholder: l.placeholder,
+        disabled: l.disabled,
+        required: l.required,
+        onBlur: t[3] || (t[3] = (...s) => r.closeWithDelay && r.closeWithDelay(...s)),
+        onFocus: t[4] || (t[4] = (s) => a.open = !l.disabled),
+        onInput: t[5] || (t[5] = (s) => a.open = !l.disabled),
         class: "w-full pl-10 pr-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600"
       }, null, 40, Y), [
-        [v, d.search]
+        [v, a.search]
       ])
-    ])) : f((a(), i("input", {
+    ])) : y((o(), i("input", {
       key: 1,
-      id: d.uuid,
+      id: a.uuid,
       type: "text",
-      "onUpdate:modelValue": l[6] || (l[6] = (r) => d.search = r),
-      placeholder: t.placeholder,
-      disabled: t.disabled,
-      required: t.required,
-      onBlur: l[7] || (l[7] = (...r) => s.closeWithDelay && s.closeWithDelay(...r)),
-      onFocus: l[8] || (l[8] = (r) => d.open = !t.disabled),
-      onInput: l[9] || (l[9] = (r) => d.open = !t.disabled),
+      "onUpdate:modelValue": t[6] || (t[6] = (s) => a.search = s),
+      placeholder: l.placeholder,
+      disabled: l.disabled,
+      required: l.required,
+      onBlur: t[7] || (t[7] = (...s) => r.closeWithDelay && r.closeWithDelay(...s)),
+      onFocus: t[8] || (t[8] = (s) => a.open = !l.disabled),
+      onInput: t[9] || (t[9] = (s) => a.open = !l.disabled),
       class: "w-full px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600"
     }, null, 40, Z)), [
-      [v, d.search]
+      [v, a.search]
     ]),
-    d.open && !t.disabled ? (a(), i("div", $, [
-      s.filteredList.length === 0 ? (a(), i("div", ee, u(t.oEmpty), 1)) : h("", !0),
-      (a(!0), i(p, null, w(s.filteredList, (r) => (a(), i("div", {
-        key: r.id,
-        onMousedown: k((c) => s.selectItem(r), ["prevent"]),
+    a.open && !l.disabled ? (o(), i("div", $, [
+      r.filteredList.length === 0 ? (o(), i("div", ee, g(l.oEmpty), 1)) : c("", !0),
+      (o(!0), i(x, null, p(r.filteredList, (s) => (o(), i("div", {
+        key: s.id,
+        onMousedown: k((u) => r.selectItem(s), ["prevent"]),
         class: "px-3 py-2 cursor-pointer hover:bg-gray-100"
-      }, u(r.name), 41, te))), 128))
-    ])) : h("", !0)
+      }, g(s.name), 41, te))), 128))
+    ])) : c("", !0)
   ]);
 }
-const se = /* @__PURE__ */ g(O, [["render", le]]), re = {
+const re = /* @__PURE__ */ h(O, [["render", le]]), se = {
   name: "DateTimeStyle",
   props: {
     modelValue: String,
     disabled: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
-    /** "date", "time", "datetime", "datetime2" */
-    mode: { type: String, default: "datetime" },
-    label: { type: String, default: "Seleccionar fecha" },
-    /** segundos: "default"=01, "max"=59 */
+    mode: {
+      type: String,
+      default: "datetime",
+      validator(e) {
+        return ["date", "time", "datetime", "datetime2"].includes(e);
+      }
+    },
+    label: { type: String, default: "" },
     secondsMode: { type: String, default: "default" }
   },
   data() {
     return {
       localDate: "",
-      localTime: ""
+      localTime: "",
+      localDateTime: ""
     };
   },
   computed: {
+    getUUID() {
+      return crypto.randomUUID();
+    },
     model: {
       get() {
         return this.modelValue;
@@ -389,25 +397,8 @@ const se = /* @__PURE__ */ g(O, [["render", le]]), re = {
         this.$emit("update:modelValue", e);
       }
     },
-    showDate() {
-      return ["date", "datetime", "datetime2"].includes(this.mode);
-    },
-    showTime() {
-      return ["time", "datetime"].includes(this.mode);
-    },
     segundos() {
       return this.secondsMode === "max" ? "59" : "01";
-    },
-    dateInputClass() {
-      let e = "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed";
-      return this.showDate && this.showTime ? e + " rounded-l" : e + " rounded";
-    },
-    timeInputClass() {
-      let e = "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed";
-      return this.showDate && this.showTime ? e + " rounded-r" : e + " rounded";
-    },
-    gridClass() {
-      return this.showDate && this.showTime ? "grid grid-cols-2" : "";
     }
   },
   watch: {
@@ -415,110 +406,103 @@ const se = /* @__PURE__ */ g(O, [["render", le]]), re = {
       immediate: !0,
       handler(e) {
         if (!e) {
-          this.localDate = "", this.localTime = "";
+          this.localDate = "", this.localTime = "", this.localDateTime = "";
           return;
         }
-        if (this.mode === "date")
-          this.localDate = e;
-        else if (this.mode === "time")
-          this.localTime = e;
-        else if (this.mode === "datetime") {
-          const [l, t] = e.split("T");
-          this.localDate = l || "", this.localTime = t ? t.slice(0, 5) : "";
-        } else this.mode === "datetime2" && (this.localDate = e.split("T")[0] || "", this.localTime = "");
-      }
-    },
-    mode: {
-      immediate: !0,
-      handler() {
-        this.parseValue(this.modelValue);
+        this.mode === "date" ? this.localDate = e : this.mode === "time" ? this.localTime = e.slice(0, 5) : this.mode === "datetime" ? this.localDateTime = e.slice(0, 16) : this.mode === "datetime2" && (this.localDate = e.split("T")[0] || "");
       }
     }
   },
   methods: {
-    parseValue(e) {
-      if (!e) {
-        this.localDate = "", this.localTime = "";
-        return;
-      }
-      if (this.mode === "date")
-        this.localDate = e, this.localTime = "";
-      else if (this.mode === "time")
-        this.localDate = "", this.localTime = e;
-      else if (this.mode === "datetime") {
-        const [l, t] = e.split("T");
-        this.localDate = l || "", this.localTime = t ? t.slice(0, 5) : "";
-      } else this.mode === "datetime2" && (this.localDate = e.split("T")[0] || "", this.localTime = "");
-      this.emitValue();
-    },
     emitValue() {
       let e = "";
-      this.mode === "date" ? e = this.localDate || "" : this.mode === "time" ? e = this.localTime || "" : this.mode === "datetime" ? !this.localDate || !this.localTime ? e = "" : e = `${this.localDate}T${this.localTime}:${this.segundos}.000` : this.mode === "datetime2" && (this.localDate ? e = `${this.localDate}T${this.secondsMode === "max" ? "23:59:59.000" : "00:01:00.000"}` : e = ""), this.model = e;
+      this.mode === "date" ? e = this.localDate || "" : this.mode === "time" ? e = this.localTime || "" : this.mode === "datetime" ? this.localDateTime ? e = `${this.localDateTime}:${this.segundos}.000` : e = "" : this.mode === "datetime2" && (this.localDate ? e = this.secondsMode === "max" ? `${this.localDate}T23:59:59.000` : `${this.localDate}T00:01:00.000` : e = ""), this.model = e;
     }
   }
-}, ie = { class: "w-full" }, ae = { class: "block text-sm font-medium text-gray-700" }, oe = {
+}, ie = { class: "w-full" }, oe = ["for"], de = {
   key: 0,
   class: "text-red-800 ml-2"
-};
-function de(e, l, t, n, d, s) {
-  return a(), i("div", ie, [
-    o("label", ae, [
-      t.required ? (a(), i("span", oe, "*")) : h("", !0),
-      y(" " + u(t.label), 1)
-    ]),
-    o("div", {
-      class: m(s.gridClass)
+}, ae = ["id"], ne = ["id"], ue = ["id"];
+function ce(e, t, l, n, a, r) {
+  return o(), i("div", ie, [
+    d("label", {
+      for: r.getUUID,
+      class: "block text-sm font-medium text-gray-700"
     }, [
-      s.showDate ? f((a(), i("input", x({
+      l.required ? (o(), i("span", de, "*")) : c("", !0),
+      f(" " + g(l.label), 1)
+    ], 8, oe),
+    d("div", null, [
+      l.mode === "date" || l.mode === "datetime2" ? y((o(), i("input", w({
         key: 0,
+        id: r.getUUID,
         type: "date"
-      }, { disabled: t.disabled, required: t.required }, {
-        "onUpdate:modelValue": l[0] || (l[0] = (r) => d.localDate = r),
-        onInput: l[1] || (l[1] = (...r) => s.emitValue && s.emitValue(...r)),
-        class: s.dateInputClass
-      }), null, 16)), [
-        [v, d.localDate]
-      ]) : h("", !0),
-      s.showTime ? f((a(), i("input", x({
+      }, { disabled: l.disabled, required: l.required }, {
+        "onUpdate:modelValue": t[0] || (t[0] = (s) => a.localDate = s),
+        onInput: t[1] || (t[1] = (...s) => r.emitValue && r.emitValue(...s)),
+        class: "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed rounded"
+      }), null, 16, ae)), [
+        [v, a.localDate]
+      ]) : c("", !0),
+      l.mode === "time" ? y((o(), i("input", w({
         key: 1,
+        id: r.getUUID,
         type: "time"
-      }, { disabled: t.disabled, required: t.required }, {
-        "onUpdate:modelValue": l[2] || (l[2] = (r) => d.localTime = r),
-        onInput: l[3] || (l[3] = (...r) => s.emitValue && s.emitValue(...r)),
-        class: s.timeInputClass
-      }), null, 16)), [
-        [v, d.localTime]
-      ]) : h("", !0)
-    ], 2)
+      }, { disabled: l.disabled, required: l.required }, {
+        "onUpdate:modelValue": t[2] || (t[2] = (s) => a.localTime = s),
+        onInput: t[3] || (t[3] = (...s) => r.emitValue && r.emitValue(...s)),
+        class: "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed rounded"
+      }), null, 16, ne)), [
+        [v, a.localTime]
+      ]) : c("", !0),
+      l.mode === "datetime" ? y((o(), i("input", w({
+        key: 2,
+        id: r.getUUID,
+        type: "datetime-local"
+      }, { disabled: l.disabled, required: l.required }, {
+        "onUpdate:modelValue": t[4] || (t[4] = (s) => a.localDateTime = s),
+        onInput: t[5] || (t[5] = (...s) => r.emitValue && r.emitValue(...s)),
+        class: "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed rounded"
+      }), null, 16, ue)), [
+        [v, a.localDateTime]
+      ]) : c("", !0)
+    ])
   ]);
 }
-const ne = /* @__PURE__ */ g(re, [["render", de]]), ue = {
+const ge = /* @__PURE__ */ h(se, [["render", ce]]), me = {
   name: "InputDecimalStyle",
   props: {
     modelValue: { type: [String, Number], default: "" },
     label: { type: String, default: "" },
     placeholder: { type: String, default: "" },
+    digits: { type: String, default: "10" },
     decimals: { type: String, default: "2" },
-    maxlength: { type: String, default: "14" },
-    disabled: { type: Boolean, default: !1 },
-    required: { type: Boolean, default: !1 }
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  data() {
+    return {
+      isFocused: !1
+    };
   },
   computed: {
     getUUID() {
       return crypto.randomUUID();
     },
-    formattedValue() {
+    displayValue() {
+      if (this.isFocused)
+        return this.modelValue?.toString() ?? "";
       if (this.modelValue === "" || this.modelValue === null) return "";
-      const e = parseFloat(this.modelValue);
+      const e = Number(this.modelValue);
       return isNaN(e) ? "" : e.toLocaleString("en-US", {
-        minimumFractionDigits: 0,
+        minimumFractionDigits: Number(this.decimals),
         maximumFractionDigits: Number(this.decimals)
       });
     }
   },
   methods: {
     onKeyDown(e) {
-      const l = [
+      const t = [
         "Backspace",
         "Delete",
         "Tab",
@@ -531,83 +515,94 @@ const ne = /* @__PURE__ */ g(re, [["render", de]]), ue = {
         "Home",
         "End"
       ];
-      if (!((e.ctrlKey || e.metaKey) && ["a", "c", "v", "x", "z"].includes(e.key.toLowerCase())) && !l.includes(e.key)) {
-        if (e.key >= "0" && e.key <= "9") {
-          const t = e.target.value.replace(/,/g, ""), n = e.target.selectionStart, d = t.split(".");
-          if (d.length === 2) {
-            const s = d[1];
-            n > t.indexOf(".") && s.length >= Number(this.decimals) && e.preventDefault();
-          }
+      if ((e.ctrlKey || e.metaKey) && ["a", "c", "v", "x", "z"].includes(e.key.toLowerCase()) || t.includes(e.key)) return;
+      const l = e.target.value, n = e.target.selectionStart, a = e.target.selectionStart !== e.target.selectionEnd, [r = "", s = ""] = l.split("."), u = l.includes(".");
+      if (e.key >= "0" && e.key <= "9") {
+        if (!u || n <= r.length) {
+          !a && r.length >= Number(this.digits) && e.preventDefault();
+          return;
+        }
+        if (u && n > r.length) {
+          !a && s.length >= Number(this.decimals) && e.preventDefault();
           return;
         }
-        e.key === "." || e.key === "," ? (Number(this.decimals) === 0 || e.target.value.includes(".")) && e.preventDefault() : e.preventDefault();
       }
+      if (e.key === ".") {
+        (Number(this.decimals) === 0 || u) && e.preventDefault();
+        return;
+      }
+      e.preventDefault();
     },
     onInput(e) {
-      let l = e.target.value.replace(/[^0-9.]/g, "");
-      Number(this.decimals) === 0 && (l = l.replace(/\./g, ""));
-      const t = l.split(".");
-      t.length > 2 && (l = t[0] + "." + t.slice(1).join("")), t[1] && t[1].length > Number(this.decimals) && (l = t[0] + "." + t[1].slice(0, Number(this.decimals))), this.$emit("update:modelValue", l);
+      let t = e.target.value.replace(/[^0-9.]/g, "");
+      const [l, n = ""] = t.split(".");
+      this.$emit("update:modelValue", n ? `${l}.${n}` : l);
     },
     onPaste(e) {
-      let t = (e.clipboardData || window.clipboardData).getData("text").replace(/[^0-9.]/g, "");
-      Number(this.decimals) === 0 && (t = t.replace(/\./g, ""));
-      const n = t.split(".");
-      n.length > 2 && (t = n[0] + "." + n.slice(1).join("")), n[1] && n[1].length > Number(this.decimals) && (t = n[0] + "." + n[1].slice(0, Number(this.decimals))), t !== "" && this.$emit("update:modelValue", t);
+      let t = e.clipboardData.getData("text").replace(/[^0-9.]/g, ""), [l, n = ""] = t.split(".");
+      l.length > Number(this.digits) || n.length > Number(this.decimals) || this.$emit("update:modelValue", n ? `${l}.${n}` : l);
     },
     onBlur() {
-      let e = this.modelValue ? parseFloat(this.modelValue) : "";
-      !isNaN(e) && e !== "" && (e = e.toFixed(Number(this.decimals))), this.$emit("update:modelValue", e);
+      if (this.isFocused = !1, this.modelValue === "" || this.modelValue === ".") {
+        this.$emit("update:modelValue", "");
+        return;
+      }
+      const e = Number(this.modelValue);
+      isNaN(e) || this.$emit("update:modelValue", e.toFixed(Number(this.decimals)));
     }
   }
-}, ce = { class: "w-full" }, he = ["for"], me = {
+}, he = { class: "w-full" }, be = ["for"], ye = {
   key: 0,
   class: "text-red-800 ml-2"
-}, ge = {
+}, fe = {
   key: 0,
   class: "relative"
-}, be = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, ye = ["id", "value", "placeholder", "maxlength"], fe = ["id", "value", "placeholder", "maxlength"];
-function xe(e, l, t, n, d, s) {
-  return a(), i("div", ce, [
-    o("label", {
-      class: "block text-sm font-medium text-gray-700",
-      for: s.getUUID
+}, xe = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, pe = ["id", "value", "disabled", "placeholder"], we = ["id", "value", "disabled", "placeholder"];
+function ve(e, t, l, n, a, r) {
+  return o(), i("div", he, [
+    d("label", {
+      for: r.getUUID,
+      class: "block text-sm font-medium text-gray-700 mb-1"
     }, [
-      t.required ? (a(), i("span", me, "*")) : h("", !0),
-      y(" " + u(t.label), 1)
-    ], 8, he),
-    e.$slots.icon ? (a(), i("div", ge, [
-      o("div", be, [
+      l.required ? (o(), i("span", ye, "*")) : c("", !0),
+      f(" " + g(l.label), 1)
+    ], 8, be),
+    e.$slots.icon ? (o(), i("div", fe, [
+      d("div", xe, [
         C(e.$slots, "icon")
       ]),
-      o("input", x({
+      d("input", {
         type: "text",
-        id: s.getUUID,
-        value: s.formattedValue,
-        onInput: l[0] || (l[0] = (...r) => s.onInput && s.onInput(...r)),
-        onKeydown: l[1] || (l[1] = (...r) => s.onKeyDown && s.onKeyDown(...r)),
-        onBlur: l[2] || (l[2] = (...r) => s.onBlur && s.onBlur(...r)),
+        id: r.getUUID,
+        value: r.displayValue,
+        onFocus: t[0] || (t[0] = (s) => a.isFocused = !0),
+        onBlur: t[1] || (t[1] = (...s) => r.onBlur && r.onBlur(...s)),
+        onKeydown: t[2] || (t[2] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
+        onInput: t[3] || (t[3] = (...s) => r.onInput && r.onInput(...s)),
+        onPaste: t[4] || (t[4] = k((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
+        disabled: l.disabled,
         inputmode: "decimal",
-        placeholder: t.placeholder,
-        onPaste: l[3] || (l[3] = k((...r) => s.onPaste && s.onPaste(...r), ["prevent"])),
-        maxlength: t.maxlength ? Number(t.maxlength) : null
-      }, { disabled: t.disabled, required: t.required }, { class: "w-full text-gray-800 bg-white pl-8 pr-3 py-1.5 rounded border border-gray-200 text-right focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed" }), null, 16, ye)
-    ])) : (a(), i("input", x({
-      key: 1,
+        placeholder: l.placeholder,
+        class: "w-full text-gray-800 bg-white px-3 py-2 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed text-right"
+      }, null, 40, pe)
+    ])) : c("", !0),
+    d("input", {
       type: "text",
-      id: s.getUUID,
-      value: s.formattedValue,
-      onInput: l[4] || (l[4] = (...r) => s.onInput && s.onInput(...r)),
-      onKeydown: l[5] || (l[5] = (...r) => s.onKeyDown && s.onKeyDown(...r)),
-      onBlur: l[6] || (l[6] = (...r) => s.onBlur && s.onBlur(...r)),
+      id: r.getUUID,
+      value: r.displayValue,
+      onFocus: t[5] || (t[5] = (s) => a.isFocused = !0),
+      onBlur: t[6] || (t[6] = (...s) => r.onBlur && r.onBlur(...s)),
+      onKeydown: t[7] || (t[7] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
+      onInput: t[8] || (t[8] = (...s) => r.onInput && r.onInput(...s)),
+      onPaste: t[9] || (t[9] = k((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
+      disabled: l.disabled,
       inputmode: "decimal",
-      placeholder: t.placeholder,
-      onPaste: l[7] || (l[7] = k((...r) => s.onPaste && s.onPaste(...r), ["prevent"])),
-      maxlength: t.maxlength ? Number(t.maxlength) : null
-    }, { disabled: t.disabled, required: t.required }, { class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 text-right focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed" }), null, 16, fe))
+      placeholder: l.placeholder,
+      class: "w-full text-gray-800 bg-white px-3 py-2 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed text-right"
+    }, null, 40, we)
   ]);
 }
-const pe = /* @__PURE__ */ g(ue, [["render", xe]]), we = {
+const Ce = /* @__PURE__ */ h(me, [["render", ve]]), Se = {
   name: "InputStyle",
   props: {
     modelValue: { type: [String, Number], default: "" },
@@ -631,52 +626,52 @@ const pe = /* @__PURE__ */ g(ue, [["render", xe]]), we = {
       }
     }
   }
-}, ve = { class: "w-full" }, Ce = ["for"], Se = {
+}, ke = { class: "w-full" }, _e = ["for"], De = {
   key: 0,
   class: "text-red-800 ml-2"
-}, ke = {
+}, Ue = {
   key: 0,
   class: "relative"
-}, _e = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, De = ["id", "type", "maxlength", "placeholder"], Ve = ["id", "type", "maxlength", "placeholder"];
-function Ue(e, l, t, n, d, s) {
-  return a(), i("div", ve, [
-    o("label", {
+}, Ve = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, Ie = ["id", "type", "maxlength", "placeholder"], Be = ["id", "type", "maxlength", "placeholder"];
+function Te(e, t, l, n, a, r) {
+  return o(), i("div", ke, [
+    d("label", {
       class: "block text-sm font-medium text-gray-700",
-      for: s.getUUID
+      for: r.getUUID
     }, [
-      t.required ? (a(), i("span", Se, "*")) : h("", !0),
-      y(" " + u(t.label), 1)
-    ], 8, Ce),
-    e.$slots.icon ? (a(), i("div", ke, [
-      o("div", _e, [
+      l.required ? (o(), i("span", De, "*")) : c("", !0),
+      f(" " + g(l.label), 1)
+    ], 8, _e),
+    e.$slots.icon ? (o(), i("div", Ue, [
+      d("div", Ve, [
         C(e.$slots, "icon")
       ]),
-      f(o("input", x({
-        id: s.getUUID,
-        type: t.type,
-        maxlength: t.maxlength ? Number(t.maxlength) : null,
-        placeholder: t.placeholder
-      }, { disabled: t.disabled, required: t.required }, {
-        "onUpdate:modelValue": l[0] || (l[0] = (r) => s.model = r),
+      y(d("input", w({
+        id: r.getUUID,
+        type: l.type,
+        maxlength: l.maxlength ? Number(l.maxlength) : null,
+        placeholder: l.placeholder
+      }, { disabled: l.disabled, required: l.required }, {
+        "onUpdate:modelValue": t[0] || (t[0] = (s) => r.model = s),
         class: "w-full text-gray-800 bg-white pl-8 pr-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
-      }), null, 16, De), [
-        [_, s.model]
+      }), null, 16, Ie), [
+        [_, r.model]
       ])
-    ])) : f((a(), i("input", x({
+    ])) : y((o(), i("input", w({
       key: 1,
-      id: s.getUUID,
-      type: t.type,
-      maxlength: t.maxlength ? Number(t.maxlength) : null,
-      placeholder: t.placeholder
-    }, { disabled: t.disabled, required: t.required }, {
-      "onUpdate:modelValue": l[1] || (l[1] = (r) => s.model = r),
+      id: r.getUUID,
+      type: l.type,
+      maxlength: l.maxlength ? Number(l.maxlength) : null,
+      placeholder: l.placeholder
+    }, { disabled: l.disabled, required: l.required }, {
+      "onUpdate:modelValue": t[1] || (t[1] = (s) => r.model = s),
       class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
-    }), null, 16, Ve)), [
-      [_, s.model]
+    }), null, 16, Be)), [
+      [_, r.model]
     ])
   ]);
 }
-const Te = /* @__PURE__ */ g(we, [["render", Ue]]), Ie = {
+const qe = /* @__PURE__ */ h(Se, [["render", Te]]), Le = {
   name: "SelectStyle",
   props: {
     modelValue: [String, Number, Object, null],
@@ -702,39 +697,39 @@ const Te = /* @__PURE__ */ g(we, [["render", Ue]]), Ie = {
       }
     }
   }
-}, Be = { class: "w-full" }, qe = ["for"], Le = {
+}, Ne = { class: "w-full" }, Me = ["for"], Ae = {
   key: 0,
   class: "text-red-800 ml-2"
-}, Ne = ["id"], Ae = {
+}, ze = ["id"], Fe = {
   value: "",
   disabled: ""
-}, Me = ["value"];
-function ze(e, l, t, n, d, s) {
-  return a(), i("div", Be, [
-    o("label", {
+}, Pe = ["value"];
+function Ee(e, t, l, n, a, r) {
+  return o(), i("div", Ne, [
+    d("label", {
       class: "block text-sm font-medium text-gray-700",
-      for: s.getUUID
+      for: r.getUUID
     }, [
-      t.required ? (a(), i("span", Le, "*")) : h("", !0),
-      y(" " + u(t.label), 1)
-    ], 8, qe),
-    f(o("select", x({
-      "onUpdate:modelValue": l[0] || (l[0] = (r) => s.model = r)
-    }, { disabled: t.disabled, required: t.required }, {
-      id: s.getUUID,
+      l.required ? (o(), i("span", Ae, "*")) : c("", !0),
+      f(" " + g(l.label), 1)
+    ], 8, Me),
+    y(d("select", w({
+      "onUpdate:modelValue": t[0] || (t[0] = (s) => r.model = s)
+    }, { disabled: l.disabled, required: l.required }, {
+      id: r.getUUID,
       class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
     }), [
-      o("option", Ae, u(t.list.length > 0 ? t.option : t.oEmpty), 1),
-      (a(!0), i(p, null, w(t.list, (r, c) => (a(), i("option", {
-        key: c,
-        value: r.id
-      }, u(r.text), 9, Me))), 128))
-    ], 16, Ne), [
-      [V, s.model]
+      d("option", Fe, g(l.list.length > 0 ? l.option : l.oEmpty), 1),
+      (o(!0), i(x, null, p(l.list, (s, u) => (o(), i("option", {
+        key: u,
+        value: s.id
+      }, g(s.text), 9, Pe))), 128))
+    ], 16, ze), [
+      [U, r.model]
     ])
   ]);
 }
-const je = /* @__PURE__ */ g(Ie, [["render", ze]]), Ee = {
+const je = /* @__PURE__ */ h(Le, [["render", Ee]]), Ke = {
   props: {
     modelValue: { type: Number, default: 0 },
     steps: { type: Array, required: !0 },
@@ -799,129 +794,129 @@ const je = /* @__PURE__ */ g(Ie, [["render", ze]]), Ee = {
       this.$emit("submit");
     }
   }
-}, Fe = { class: "flex items-center gap-6 w-full" }, Pe = ["disabled"], Ke = { class: "flex-1" }, We = {
+}, We = { class: "flex items-center gap-6 w-full" }, Oe = ["disabled"], He = { class: "flex-1" }, Re = {
   key: 0,
   class: "flex items-center"
-}, Oe = ["onClick"], He = {
+}, Ge = ["onClick"], Je = {
   key: 0,
   class: "w-4 h-4",
   fill: "none",
   stroke: "currentColor",
   viewBox: "0 0 24 24"
-}, Re = {
+}, Qe = {
   key: 1,
   class: "text-sm"
-}, Ge = {
+}, Xe = {
   key: 1,
   class: "w-full"
-}, Je = {
+}, Ye = {
   key: 0,
   class: "text-xs mb-1 block"
-}, Qe = { class: "w-full h-3 rounded-full bg-gray-200 overflow-hidden relative" }, Xe = { key: 1 };
-function Ye(e, l, t, n, d, s) {
-  return a(), i("div", Fe, [
-    t.button ? (a(), i("button", {
+}, Ze = { class: "w-full h-3 rounded-full bg-gray-200 overflow-hidden relative" }, $e = { key: 1 };
+function et(e, t, l, n, a, r) {
+  return o(), i("div", We, [
+    l.button ? (o(), i("button", {
       key: 0,
       type: "button",
-      disabled: s.step === 0,
-      onClick: l[0] || (l[0] = (...r) => s.previous && s.previous(...r)),
-      class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", s.solid[t.color]])
+      disabled: r.step === 0,
+      onClick: t[0] || (t[0] = (...s) => r.previous && r.previous(...s)),
+      class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[l.color]])
     }, [
-      l[3] || (l[3] = o("svg", {
+      t[3] || (t[3] = d("svg", {
         class: "w-5 h-5",
         fill: "none",
         stroke: "currentColor",
         viewBox: "0 0 24 24"
       }, [
-        o("path", {
+        d("path", {
           "stroke-linecap": "round",
           "stroke-linejoin": "round",
           "stroke-width": "2",
           d: "M15 19l-7-7 7-7"
         })
       ], -1)),
-      y(" " + u(t.btnPrevious), 1)
-    ], 10, Pe)) : h("", !0),
-    o("div", Ke, [
-      t.type === "circle" ? (a(), i("div", We, [
-        (a(!0), i(p, null, w(t.steps, (r, c) => (a(), i("div", {
-          key: c,
-          class: m(["flex items-center", c < t.steps.length - 1 ? "flex-1" : ""])
+      f(" " + g(l.btnPrevious), 1)
+    ], 10, Oe)) : c("", !0),
+    d("div", He, [
+      l.type === "circle" ? (o(), i("div", Re, [
+        (o(!0), i(x, null, p(l.steps, (s, u) => (o(), i("div", {
+          key: u,
+          class: m(["flex items-center", u < l.steps.length - 1 ? "flex-1" : ""])
         }, [
-          o("div", {
-            class: m(["flex flex-col items-center relative", t.selected ? "cursor-pointer" : "pointer-events-none"]),
-            onClick: (S) => s.select(c)
+          d("div", {
+            class: m(["flex flex-col items-center relative", l.selected ? "cursor-pointer" : "pointer-events-none"]),
+            onClick: (S) => r.select(u)
           }, [
-            o("div", {
-              class: m(["w-9 h-9 rounded-full flex items-center justify-center border-2 font-semibold transition-colors duration-200", s.circleClass(c)])
+            d("div", {
+              class: m(["w-9 h-9 rounded-full flex items-center justify-center border-2 font-semibold transition-colors duration-200", r.circleClass(u)])
             }, [
-              s.step > c ? (a(), i("svg", He, [...l[4] || (l[4] = [
-                o("path", {
+              r.step > u ? (o(), i("svg", Je, [...t[4] || (t[4] = [
+                d("path", {
                   "stroke-linecap": "round",
                   "stroke-linejoin": "round",
                   "stroke-width": "3",
                   d: "M5 13l4 4L19 7"
                 }, null, -1)
-              ])])) : (a(), i("span", Re, u(c + 1), 1))
+              ])])) : (o(), i("span", Qe, g(u + 1), 1))
             ], 2),
-            t.text === "all" || t.text === "only" && s.step === c ? (a(), i("span", {
+            l.text === "all" || l.text === "only" && r.step === u ? (o(), i("span", {
               key: 0,
-              class: m(["absolute -top-5 text-xs font-medium whitespace-nowrap transition-colors duration-200", s.textClass(c)])
-            }, u(r), 3)) : h("", !0)
-          ], 10, Oe),
-          c < t.steps.length - 1 ? (a(), i("div", {
+              class: m(["absolute -top-5 text-xs font-medium whitespace-nowrap transition-colors duration-200", r.textClass(u)])
+            }, g(s), 3)) : c("", !0)
+          ], 10, Ge),
+          u < l.steps.length - 1 ? (o(), i("div", {
             key: 0,
-            class: m(["flex-1 h-2 mx-3 rounded transition-colors duration-200", s.step > c ? s.lineActive : "bg-gray-300"])
-          }, null, 2)) : h("", !0)
+            class: m(["flex-1 h-2 mx-3 rounded transition-colors duration-200", r.step > u ? r.lineActive : "bg-gray-300"])
+          }, null, 2)) : c("", !0)
         ], 2))), 128))
-      ])) : t.type === "linear" ? (a(), i("div", Ge, [
-        t.text === "all" ? (a(), i("span", Je, u(Math.round(s.progressWidth)) + "% ", 1)) : h("", !0),
-        o("div", Qe, [
-          l[6] || (l[6] = o("div", { class: "absolute inset-0" }, null, -1)),
-          o("div", {
-            class: m(["h-full rounded-full transition-all duration-300 relative shadow-md", s.barActive]),
-            style: U({ width: s.progressWidth + "%" })
-          }, [...l[5] || (l[5] = [
-            o("div", { class: "absolute inset-0 bg-white/20 mix-blend-overlay animate-pulse" }, null, -1)
+      ])) : l.type === "linear" ? (o(), i("div", Xe, [
+        l.text === "all" ? (o(), i("span", Ye, g(Math.round(r.progressWidth)) + "% ", 1)) : c("", !0),
+        d("div", Ze, [
+          t[6] || (t[6] = d("div", { class: "absolute inset-0" }, null, -1)),
+          d("div", {
+            class: m(["h-full rounded-full transition-all duration-300 relative shadow-md", r.barActive]),
+            style: V({ width: r.progressWidth + "%" })
+          }, [...t[5] || (t[5] = [
+            d("div", { class: "absolute inset-0 bg-white/20 mix-blend-overlay animate-pulse" }, null, -1)
           ])], 6)
         ])
-      ])) : h("", !0)
+      ])) : c("", !0)
     ]),
-    t.button ? (a(), i("div", Xe, [
-      s.step < t.steps.length - 1 ? (a(), i("button", {
+    l.button ? (o(), i("div", $e, [
+      r.step < l.steps.length - 1 ? (o(), i("button", {
         key: 0,
         type: "button",
-        onClick: l[1] || (l[1] = (...r) => s.next && s.next(...r)),
-        class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", s.solid[t.color]])
+        onClick: t[1] || (t[1] = (...s) => r.next && r.next(...s)),
+        class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[l.color]])
       }, [
-        y(u(t.btnNext) + " ", 1),
-        l[7] || (l[7] = o("svg", {
+        f(g(l.btnNext) + " ", 1),
+        t[7] || (t[7] = d("svg", {
           class: "w-5 h-5",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24"
         }, [
-          o("path", {
+          d("path", {
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "stroke-width": "2",
             d: "M9 5l7 7-7 7"
           })
         ], -1))
-      ], 2)) : (a(), i("button", {
+      ], 2)) : (o(), i("button", {
         key: 1,
         type: "button",
-        onClick: l[2] || (l[2] = (...r) => s.submitForm && s.submitForm(...r)),
-        class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", s.solid[t.color]])
+        onClick: t[2] || (t[2] = (...s) => r.submitForm && r.submitForm(...s)),
+        class: m(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[l.color]])
       }, [
-        y(u(t.btnFinish) + " ", 1),
-        l[8] || (l[8] = o("svg", {
+        f(g(l.btnFinish) + " ", 1),
+        t[8] || (t[8] = d("svg", {
           class: "w-5 h-5",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24"
         }, [
-          o("path", {
+          d("path", {
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "stroke-width": "2",
@@ -929,57 +924,57 @@ function Ye(e, l, t, n, d, s) {
           })
         ], -1))
       ], 2))
-    ])) : h("", !0)
+    ])) : c("", !0)
   ]);
 }
-const Ze = /* @__PURE__ */ g(Ee, [["render", Ye]]), $e = {
+const tt = /* @__PURE__ */ h(Ke, [["render", et]]), lt = {
   name: "TableStyle",
   props: {
     columns: { type: Array, required: !0 },
     rows: { type: Array, default: () => [] }
   }
-}, et = { class: "w-full overflow-x-auto bg-white border border-gray-300 rounded shadow-sm" }, tt = { class: "min-w-full" }, lt = { class: "bg-gray-800" }, st = { key: 1 }, rt = { key: 0 }, it = ["colspan"];
-function at(e, l, t, n, d, s) {
-  return a(), i("div", et, [
-    o("table", tt, [
-      o("thead", null, [
-        o("tr", lt, [
-          (a(!0), i(p, null, w(t.columns, (r, c) => (a(), i("th", {
-            key: c,
+}, rt = { class: "w-full overflow-x-auto bg-white border border-gray-300 rounded shadow-sm" }, st = { class: "min-w-full" }, it = { class: "bg-gray-800" }, ot = { key: 1 }, dt = { key: 0 }, at = ["colspan"];
+function nt(e, t, l, n, a, r) {
+  return o(), i("div", rt, [
+    d("table", st, [
+      d("thead", null, [
+        d("tr", it, [
+          (o(!0), i(x, null, p(l.columns, (s, u) => (o(), i("th", {
+            key: u,
             class: "px-4 py-1.5 text-left text-sm font-semibold text-white border-b border-gray-600"
-          }, u(r.label), 1))), 128))
+          }, g(s.label), 1))), 128))
         ])
       ]),
-      o("tbody", null, [
-        (a(!0), i(p, null, w(t.rows, (r, c) => (a(), i("tr", {
-          key: c,
+      d("tbody", null, [
+        (o(!0), i(x, null, p(l.rows, (s, u) => (o(), i("tr", {
+          key: u,
           class: "hover:bg-gray-100 transition-colors cursor-default"
         }, [
-          (a(!0), i(p, null, w(t.columns, (S, D) => (a(), i("td", {
+          (o(!0), i(x, null, p(l.columns, (S, D) => (o(), i("td", {
             key: D,
             class: "px-4 py-1.5 text-sm text-gray-700 border-b border-gray-200"
           }, [
             e.$slots[S.field] ? C(e.$slots, S.field, {
               key: 0,
-              row: r
-            }) : (a(), i("span", st, u(r[S.field]), 1))
+              row: s
+            }) : (o(), i("span", ot, g(s[S.field]), 1))
           ]))), 128))
         ]))), 128)),
-        t.rows.length === 0 ? (a(), i("tr", rt, [
-          o("td", {
-            colspan: t.columns.length,
+        l.rows.length === 0 ? (o(), i("tr", dt, [
+          d("td", {
+            colspan: l.columns.length,
             class: "px-4 py-10 text-center text-gray-500 text-sm bg-gray-50"
-          }, [...l[0] || (l[0] = [
-            o("div", { class: "flex flex-col items-center gap-3" }, [
-              o("span", { class: "text-gray-600 font-medium" }, "No hay datos para mostrar")
+          }, [...t[0] || (t[0] = [
+            d("div", { class: "flex flex-col items-center gap-3" }, [
+              d("span", { class: "text-gray-600 font-medium" }, "No hay datos para mostrar")
             ], -1)
-          ])], 8, it)
-        ])) : h("", !0)
+          ])], 8, at)
+        ])) : c("", !0)
       ])
     ])
   ]);
 }
-const ot = /* @__PURE__ */ g($e, [["render", at]]), dt = {
+const ut = /* @__PURE__ */ h(lt, [["render", nt]]), ct = {
   name: "TextAreaStyle",
   props: {
     modelValue: String,
@@ -1004,40 +999,40 @@ const ot = /* @__PURE__ */ g($e, [["render", at]]), dt = {
       }
     }
   }
-}, nt = { class: "w-full" }, ut = { class: "flex justify-between" }, ct = ["for"], ht = {
+}, gt = { class: "w-full" }, mt = { class: "flex justify-between" }, ht = ["for"], bt = {
   key: 0,
   class: "text-red-800 ml-2"
-}, mt = ["for"], gt = ["id", "placeholder", "maxlength", "rows"];
-function bt(e, l, t, n, d, s) {
-  return a(), i("div", nt, [
-    o("div", ut, [
-      o("label", {
+}, yt = ["for"], ft = ["id", "placeholder", "maxlength", "rows"];
+function xt(e, t, l, n, a, r) {
+  return o(), i("div", gt, [
+    d("div", mt, [
+      d("label", {
         class: "block text-sm font-medium text-gray-700",
-        for: s.getUUID
+        for: r.getUUID
       }, [
-        t.required ? (a(), i("span", ht, "*")) : h("", !0),
-        y(" " + u(t.label), 1)
-      ], 8, ct),
-      t.note ? (a(), i("label", {
+        l.required ? (o(), i("span", bt, "*")) : c("", !0),
+        f(" " + g(l.label), 1)
+      ], 8, ht),
+      l.note ? (o(), i("label", {
         key: 0,
         class: "block text-xs text-gray-700",
-        for: s.getUUID
-      }, u(t.note), 9, mt)) : h("", !0)
+        for: r.getUUID
+      }, g(l.note), 9, yt)) : c("", !0)
     ]),
-    f(o("textarea", x({
-      "onUpdate:modelValue": l[0] || (l[0] = (r) => s.model = r),
-      id: s.getUUID,
-      placeholder: t.placeholder
-    }, { disabled: t.disabled, required: t.required }, {
-      maxlength: t.maxlength ? Number(t.maxlength) : null,
-      rows: Number(t.row),
+    y(d("textarea", w({
+      "onUpdate:modelValue": t[0] || (t[0] = (s) => r.model = s),
+      id: r.getUUID,
+      placeholder: l.placeholder
+    }, { disabled: l.disabled, required: l.required }, {
+      maxlength: l.maxlength ? Number(l.maxlength) : null,
+      rows: Number(l.row),
       class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed resize-none"
-    }), null, 16, gt), [
-      [v, s.model]
+    }), null, 16, ft), [
+      [v, r.model]
     ])
   ]);
 }
-const yt = /* @__PURE__ */ g(dt, [["render", bt]]), ft = {
+const pt = /* @__PURE__ */ h(ct, [["render", xt]]), wt = {
   name: "ToggleStyle",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -1092,45 +1087,45 @@ const yt = /* @__PURE__ */ g(dt, [["render", bt]]), ft = {
       this.disabled || (this.model = !this.model);
     }
   }
-}, xt = { class: "block text-sm font-medium text-gray-700" };
-function pt(e, l, t, n, d, s) {
-  return a(), i("div", null, [
-    o("label", xt, u(t.label), 1),
-    o("div", {
+}, vt = { class: "block text-sm font-medium text-gray-700" };
+function Ct(e, t, l, n, a, r) {
+  return o(), i("div", null, [
+    d("label", vt, g(l.label), 1),
+    d("div", {
       class: m([
         "relative w-11 h-6 inline-flex items-center transition-colors duration-300 px-1",
-        s.shapeToggle,
-        t.disabled ? s.disabledClasses : s.computedClasses
+        r.shapeToggle,
+        l.disabled ? r.disabledClasses : r.computedClasses
       ]),
-      onClick: l[0] || (l[0] = (...r) => s.toggle && s.toggle(...r))
+      onClick: t[0] || (t[0] = (...s) => r.toggle && r.toggle(...s))
     }, [
-      o("div", {
+      d("div", {
         class: m([
           "absolute top-0.75 left-1 w-4 h-4 bg-white shadow transform transition-all duration-300",
-          s.shapeToggle,
-          s.model ? "translate-x-full" : "translate-x-0"
+          r.shapeToggle,
+          r.model ? "translate-x-full" : "translate-x-0"
         ])
       }, null, 2)
     ], 2)
   ]);
 }
-const wt = /* @__PURE__ */ g(ft, [["render", pt]]), Ct = {
+const St = /* @__PURE__ */ h(wt, [["render", Ct]]), _t = {
   install(e) {
-    e.component("AlertStyle", b), e.component("ButtonStyle", q), e.component("CheckStyle", W), e.component("ComboBoxStyle", se), e.component("DateTimeStyle", ne), e.component("InputDecimalStyle", pe), e.component("InputStyle", Te), e.component("SelectStyle", je), e.component("StepperStyle", Ze), e.component("TableStyle", ot), e.component("TextAreaStyle", yt), e.component("ToggleStyle", wt), e.config.globalProperties.$alertstyle = b;
+    e.component("AlertStyle", b), e.component("ButtonStyle", q), e.component("CheckStyle", W), e.component("ComboBoxStyle", re), e.component("DateTimeStyle", ge), e.component("InputDecimalStyle", Ce), e.component("InputStyle", qe), e.component("SelectStyle", je), e.component("StepperStyle", tt), e.component("TableStyle", ut), e.component("TextAreaStyle", pt), e.component("ToggleStyle", St), e.config.globalProperties.$alertstyle = b;
   }
 };
 export {
   b as AlertStyle,
   q as ButtonStyle,
   W as CheckStyle,
-  se as ComboBoxStyle,
-  ne as DateTimeStyle,
-  pe as InputDecimalStyle,
-  Te as InputStyle,
+  re as ComboBoxStyle,
+  ge as DateTimeStyle,
+  Ce as InputDecimalStyle,
+  qe as InputStyle,
   je as SelectStyle,
-  Ze as StepperStyle,
-  ot as TableStyle,
-  yt as TextAreaStyle,
-  wt as ToggleStyle,
-  Ct as default
+  tt as StepperStyle,
+  ut as TableStyle,
+  pt as TextAreaStyle,
+  St as ToggleStyle,
+  _t as default
 };