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

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

@@ -1,4 +1,4 @@
-import { createElementBlock as i, openBlock as a, normalizeClass as g, renderSlot as _, createElementVNode as o, createCommentVNode as h, toDisplayString as u, Fragment as x, renderList as p, createTextVNode as f, withDirectives as w, mergeProps as y, vModelText as C, withModifiers as S, vModelDynamic as k, vModelSelect as U, normalizeStyle as V } from "vue";
+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";
 class b {
   static type = {
     success: "success",
@@ -15,39 +15,39 @@ 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, e, n = b.type.info, d = 4e3) {
+  static #e(l, t, n = b.type.info, d = 4e3) {
     b.ensureContainer();
-    const r = b.container.querySelector(`.alert-${n}`);
-    r && r.remove();
-    const s = document.createElement("div");
-    s.className = `alert alert-${n}`;
+    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] || "";
-    s.innerHTML = `
+    r.innerHTML = `
       <div class="alert-icon">${c}</div>
       <div class="alert-texts">
           <div class="alert-title">${l}</div>
-          <div class="alert-message">${e}</div>
+          <div class="alert-message">${t}</div>
       </div>
       <div class="alert-close">&times;</div>
-    `, s.querySelector(".alert-close").addEventListener("click", () => {
-      b.remove(s);
-    }), b.container.appendChild(s), setTimeout(() => s.classList.add("show"), 10), d > 0 && setTimeout(() => b.remove(s), d);
+    `, 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);
   }
   // Métodos públicos reutilizables
-  static success(l, e = "") {
-    this.#e(l, e, this.type.success);
+  static success(l, t = "") {
+    this.#e(l, t, this.type.success);
   }
-  static error(l, e = "") {
-    this.#e(l, e, this.type.error);
+  static error(l, t = "") {
+    this.#e(l, t, this.type.error);
   }
-  static warning(l, e = "") {
-    this.#e(l, e, this.type.warning);
+  static warning(l, t = "") {
+    this.#e(l, t, this.type.warning);
   }
-  static info(l, e = "") {
-    this.#e(l, e, this.type.info);
+  static info(l, t = "") {
+    this.#e(l, t, this.type.info);
   }
-  static neutral(l, e = "") {
-    this.#e(l, e, this.type.neutral);
+  static neutral(l, t = "") {
+    this.#e(l, t, this.type.neutral);
   }
   static ensureContainer() {
     this.container || (this.container = document.createElement("div"), this.container.className = "alert-container", document.body.appendChild(this.container));
@@ -56,21 +56,21 @@ class b {
     l.classList.add("hide"), setTimeout(() => l.remove(), 250);
   }
 }
-const m = (t, l) => {
-  const e = t.__vccOpts || t;
+const g = (e, l) => {
+  const t = e.__vccOpts || e;
   for (const [n, d] of l)
-    e[n] = d;
-  return e;
+    t[n] = d;
+  return t;
 }, T = {
   name: "ButtonStyle",
   emits: ["click"],
   props: {
+    type: { type: String, default: "button", validator: (e) => ["button", "submit"].includes(e) },
     class: { type: String, default: "" },
     variant: { type: String, default: "solid" },
     color: { type: String, default: "gray" },
     disabled: { type: Boolean, default: !1 },
-    delay: { type: String, default: "1.5" },
-    full: { type: Boolean, default: !1 }
+    delay: { type: String, default: "1.5" }
   },
   data() {
     return {
@@ -83,49 +83,47 @@ const m = (t, l) => {
     },
     buttonClasses() {
       if (this.class)
-        return `${this.class} disabled:opacity-60 disabled:cursor-not-allowed`;
-      const t = [
-        "h-min font-semibold items-center justify-center rounded px-3 py-1.5 gap-1"
-      ];
-      t.push(this.full ? "w-full flex" : "inline-flex");
-      const 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 = {
         solid: {
-          gray: "text-white bg-slate-600 enabled:hover:bg-slate-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          green: "text-white bg-emerald-600 enabled:hover:bg-emerald-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          blue: "text-white bg-sky-600 enabled:hover:bg-sky-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          red: "text-white bg-rose-600 enabled:hover:bg-rose-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          yellow: "text-white bg-amber-600 enabled:hover:bg-amber-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+          gray: "text-white bg-slate-600 enabled:hover:bg-slate-700",
+          green: "text-white bg-emerald-600 enabled:hover:bg-emerald-700",
+          blue: "text-white bg-sky-600 enabled:hover:bg-sky-700",
+          red: "text-white bg-rose-600 enabled:hover:bg-rose-700",
+          yellow: "text-white bg-amber-600 enabled:hover:bg-amber-700"
         },
         outline: {
-          gray: "text-slate-700 enabled:hover:bg-slate-50 border border-slate-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          green: "text-emerald-700 enabled:hover:bg-emerald-50 border border-emerald-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          blue: "text-sky-700 enabled:hover:bg-sky-50 border border-sky-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          red: "text-rose-700 enabled:hover:bg-rose-50 border border-rose-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
-          yellow: "text-amber-700 enabled:hover:bg-amber-50 border border-amber-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+          gray: "text-slate-700 enabled:hover:bg-slate-50 border border-slate-700",
+          green: "text-emerald-700 enabled:hover:bg-emerald-50 border border-emerald-700",
+          blue: "text-sky-700 enabled:hover:bg-sky-50 border border-sky-700",
+          red: "text-rose-700 enabled:hover:bg-rose-50 border border-rose-700",
+          yellow: "text-amber-700 enabled:hover:bg-amber-50 border border-amber-700"
         }
       };
-      return t.push(l[this.variant][this.color]), t;
+      return e.push(l[this.variant][this.color]), e;
     }
   },
   methods: {
-    handleClick(t) {
-      this.isDisabled || (this.$emit("click", t), this.internalDisabled = !0, setTimeout(() => {
+    handleClick(e) {
+      this.isDisabled || (this.$emit("click", e), this.internalDisabled = !0, setTimeout(() => {
         this.internalDisabled = !1;
       }, 1e3 * Number(this.delay)));
     }
   }
-}, I = ["disabled"];
-function B(t, l, e, n, d, r) {
+}, I = ["type", "disabled"];
+function B(e, l, t, n, d, s) {
   return a(), i("button", {
-    disabled: r.isDisabled,
-    type: "button",
-    onClick: l[0] || (l[0] = (...s) => r.handleClick && r.handleClick(...s)),
-    class: g(r.buttonClasses)
+    type: t.type,
+    onClick: l[0] || (l[0] = (...r) => s.handleClick && s.handleClick(...r)),
+    disabled: s.isDisabled,
+    class: m(s.buttonClasses)
   }, [
-    _(t.$slots, "default")
+    C(e.$slots, "default")
   ], 10, I);
 }
-const L = /* @__PURE__ */ m(T, [["render", B]]), q = {
+const q = /* @__PURE__ */ g(T, [["render", B]]), L = {
   name: "CheckStyle",
   props: {
     label: { type: String, default: "" },
@@ -153,17 +151,17 @@ const L = /* @__PURE__ */ m(T, [["render", B]]), q = {
   watch: {
     modelValue: {
       immediate: !0,
-      handler(t) {
-        Array.isArray(t) ? this.realSelection = [...t] : t ? this.realSelection = [t] : this.realSelection = [];
+      handler(e) {
+        Array.isArray(e) ? this.realSelection = [...e] : e ? this.realSelection = [e] : this.realSelection = [];
       }
     }
   },
   methods: {
-    getValue(t) {
-      return this.returnType === "object" ? t : this.returnType === "text" ? t.name : t.id;
+    getValue(e) {
+      return this.returnType === "object" ? e : this.returnType === "text" ? e.name : e.id;
     },
-    isChecked(t) {
-      const l = this.getValue(t);
+    isChecked(e) {
+      const l = this.getValue(e);
       return this.realSelection.includes(l);
     },
     emitExternal() {
@@ -176,61 +174,61 @@ const L = /* @__PURE__ */ m(T, [["render", B]]), q = {
         this.realSelection.length ? [...this.realSelection] : ""
       );
     },
-    onChange(t) {
-      const l = this.getValue(t);
+    onChange(e) {
+      const l = this.getValue(e);
       this.realSelection.includes(l) ? this.realSelection = this.realSelection.filter(
-        (e) => e !== l
+        (t) => t !== l
       ) : this.all ? this.realSelection.push(l) : this.realSelection = [l], this.emitExternal();
     },
     toggleSelectAll() {
-      this.all && (this.isAllSelected ? this.realSelection = [] : this.realSelection = this.list.map((t) => this.getValue(t)), this.emitExternal());
+      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 = {
   key: 0,
   class: "flex items-center gap-2 select-none"
-}, E = ["id", "checked"], j = ["for"], F = ["id", "checked", "onChange"], P = ["for"];
-function K(t, l, e, n, d, r) {
+}, 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(e.label), 1),
-      e.all ? (a(), i("div", z, [
+      o("h3", M, u(t.label), 1),
+      t.all ? (a(), i("div", z, [
         o("input", {
           type: "checkbox",
-          id: "todos-" + r.getUUID,
-          checked: r.isAllSelected,
-          onChange: l[0] || (l[0] = (...s) => r.toggleSelectAll && r.toggleSelectAll(...s)),
-          class: "w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
-        }, null, 40, E),
+          id: "todos-" + s.getUUID,
+          checked: s.isAllSelected,
+          onChange: l[0] || (l[0] = (...r) => s.toggleSelectAll && s.toggleSelectAll(...r)),
+          class: "w-4 h-4 accent-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
+        }, null, 40, j),
         o("label", {
-          for: "todos-" + r.getUUID,
+          for: "todos-" + s.getUUID,
           class: "text-sm text-gray-600 uppercase truncate"
-        }, " Seleccionar todos ", 8, j)
+        }, " Seleccionar todos ", 8, E)
       ])) : h("", !0)
     ]),
     o("div", {
-      class: g(["max-h-48 overflow-auto space-y-1", e.grid])
+      class: m(["max-h-48 overflow-auto space-y-1", t.grid])
     }, [
-      (a(!0), i(x, null, p(e.list, (s) => (a(), i("div", {
-        key: s.id,
+      (a(!0), i(p, null, w(t.list, (r) => (a(), i("div", {
+        key: r.id,
         class: "flex items-center gap-2 select-none"
       }, [
         o("input", {
           type: "checkbox",
-          id: r.getUUID + "-" + s.id,
-          checked: r.isChecked(s),
-          onChange: (c) => r.onChange(s),
-          class: "w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
+          id: s.getUUID + "-" + r.id,
+          checked: s.isChecked(r),
+          onChange: (c) => s.onChange(r),
+          class: "w-4 h-4 accent-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
         }, null, 40, F),
         o("label", {
-          for: r.getUUID + "-" + s.id,
+          for: s.getUUID + "-" + r.id,
           class: "truncate text-gray-700"
-        }, u(s.name), 9, P)
+        }, u(r.name), 9, P)
       ]))), 128))
     ], 2)
   ]);
 }
-const W = /* @__PURE__ */ m(q, [["render", K]]), O = {
+const W = /* @__PURE__ */ g(L, [["render", K]]), O = {
   name: "ComboBoxStyle",
   props: {
     modelValue: [String, Number, Object, null],
@@ -243,128 +241,128 @@ const W = /* @__PURE__ */ m(q, [["render", K]]), O = {
   },
   data() {
     return {
+      uuid: crypto.randomUUID(),
       search: "",
+      searchCopy: "",
       open: !1
     };
   },
-  watch: {
-    modelValue(t) {
-      const l = this.list.find((e) => e.id === t);
-      l && (this.search = l.name);
-    }
-  },
   computed: {
-    getUUID() {
-      return crypto.randomUUID();
-    },
     filteredList() {
       return this.search ? this.list.filter(
-        (t) => t.name.toLowerCase().includes(this.search.toLowerCase())
+        (e) => e.name.toLowerCase().includes(this.search.toLowerCase())
       ) : this.list;
     },
     model: {
       get() {
         return this.modelValue;
       },
-      set(t) {
-        this.$emit("update:modelValue", t);
+      set(e) {
+        this.$emit("update:modelValue", e);
+      }
+    }
+  },
+  watch: {
+    modelValue: {
+      immediate: !0,
+      handler(e) {
+        if (e === null || e === "") {
+          this.search = "", this.searchCopy = "";
+          return;
+        }
+        const l = this.list.find((t) => t.id === e);
+        l && (this.search = l.name, this.searchCopy = l.name);
       }
     }
   },
   methods: {
-    selectItem(t) {
-      this.model = t.id, this.search = t.name, this.open = !1;
+    selectItem(e) {
+      this.model = e.id, this.search = e.name, this.searchCopy = e.name, this.open = !1;
+    },
+    clearItem() {
+      this.disabled || (this.model = null, this.search = "", this.searchCopy = "", this.open = !1);
     },
     closeWithDelay() {
       setTimeout(() => {
-        this.open = !1;
-      }, 150);
+        this.model ? this.search.trim() !== this.searchCopy && (this.search = this.searchCopy) : this.search = "", this.open = !1;
+      }, 120);
     }
   }
-}, H = { class: "w-full" }, R = ["for"], G = {
+}, H = { class: "w-full relative" }, R = ["for"], G = { class: "text-sm font-medium text-gray-700" }, J = {
   key: 0,
-  class: "text-red-800 ml-2"
-}, J = {
+  class: "text-red-800 ml-1"
+}, Q = {
   key: 0,
   class: "relative"
-}, Q = { class: "z-2 absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-7 h-7" }, X = { class: "relative w-full" }, Y = ["id", "placeholder"], Z = {
-  key: 0,
-  class: "absolute z-10 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded shadow max-h-48 overflow-auto"
-}, $ = {
-  key: 0,
-  class: "w-full text-gray-800 bg-white px-3 py-2"
-}, ee = ["onClick"], te = {
-  key: 1,
-  class: "relative w-full"
-}, le = ["id", "placeholder"], re = {
-  key: 0,
+}, X = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, Y = ["id", "placeholder", "disabled", "required"], Z = ["id", "placeholder", "disabled", "required"], $ = {
+  key: 2,
   class: "absolute z-10 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded shadow max-h-48 overflow-auto"
-}, se = {
+}, ee = {
   key: 0,
-  class: "w-full text-gray-800 bg-white px-3 py-2"
-}, ie = ["onClick"];
-function ae(t, l, e, n, d, r) {
+  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", {
-      class: "block text-sm font-medium text-gray-700",
-      for: r.getUUID
+      class: "flex justify-between",
+      for: d.uuid
     }, [
-      e.required ? (a(), i("span", G, "*")) : h("", !0),
-      f(" " + u(e.label), 1)
-    ], 8, R),
-    t.$slots.icon ? (a(), i("div", J, [
-      o("div", Q, [
-        _(t.$slots, "icon")
+      o("div", G, [
+        y(u(t.label) + " ", 1),
+        t.required ? (a(), i("span", J, "*")) : h("", !0)
       ]),
+      s.model ? (a(), 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(() => {
+        }, ["prevent"])),
+        onClick: l[1] || (l[1] = (...r) => s.clearItem && s.clearItem(...r))
+      }, "Limpiar ", 32)) : h("", !0)
+    ], 8, R),
+    e.$slots.icon ? (a(), i("div", Q, [
       o("div", X, [
-        w(o("input", y({
-          id: r.getUUID,
-          type: "text",
-          "onUpdate:modelValue": l[0] || (l[0] = (s) => d.search = s),
-          placeholder: e.placeholder
-        }, { disabled: e.disabled, required: e.required }, {
-          class: "w-full text-gray-800 bg-white 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 disabled:cursor-not-allowed",
-          onFocus: l[1] || (l[1] = (s) => !e.disabled && (d.open = !0)),
-          onInput: l[2] || (l[2] = (s) => !e.disabled && (d.open = !0)),
-          onBlur: l[3] || (l[3] = (...s) => r.closeWithDelay && r.closeWithDelay(...s))
-        }), null, 16, Y), [
-          [C, d.search]
-        ]),
-        d.open && !e.disabled ? (a(), i("div", Z, [
-          r.filteredList.length === 0 ? (a(), i("div", $, u(e.oEmpty), 1)) : h("", !0),
-          (a(!0), i(x, null, p(r.filteredList, (s, c) => (a(), i("div", {
-            key: c,
-            onClick: (v) => r.selectItem(s),
-            class: "w-full text-gray-800 bg-white hover:bg-gray-100 px-3 py-2"
-          }, u(s.name), 9, ee))), 128))
-        ])) : h("", !0)
-      ])
-    ])) : (a(), i("div", te, [
-      w(o("input", y({
-        id: r.getUUID,
-        type: "text",
-        "onUpdate:modelValue": l[4] || (l[4] = (s) => d.search = s),
-        placeholder: e.placeholder
-      }, { disabled: e.disabled, required: e.required }, {
-        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",
-        onFocus: l[5] || (l[5] = (s) => !e.disabled && (d.open = !0)),
-        onInput: l[6] || (l[6] = (s) => !e.disabled && (d.open = !0)),
-        onBlur: l[7] || (l[7] = (...s) => r.closeWithDelay && r.closeWithDelay(...s))
-      }), null, 16, le), [
-        [C, d.search]
+        C(e.$slots, "icon")
       ]),
-      d.open && !e.disabled ? (a(), i("div", re, [
-        r.filteredList.length === 0 ? (a(), i("div", se, u(e.oEmpty), 1)) : h("", !0),
-        (a(!0), i(x, null, p(r.filteredList, (s, c) => (a(), i("div", {
-          key: c,
-          onClick: (v) => r.selectItem(s),
-          class: "w-full text-gray-800 bg-white hover:bg-gray-100 px-3 py-2"
-        }, u(s.name), 9, ie))), 128))
-      ])) : h("", !0)
-    ]))
+      f(o("input", {
+        id: d.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),
+        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]
+      ])
+    ])) : f((a(), i("input", {
+      key: 1,
+      id: d.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),
+      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]
+    ]),
+    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"]),
+        class: "px-3 py-2 cursor-pointer hover:bg-gray-100"
+      }, u(r.name), 41, te))), 128))
+    ])) : h("", !0)
   ]);
 }
-const oe = /* @__PURE__ */ m(O, [["render", ae]]), de = {
+const se = /* @__PURE__ */ g(O, [["render", le]]), re = {
   name: "DateTimeStyle",
   props: {
     modelValue: String,
@@ -387,8 +385,8 @@ const oe = /* @__PURE__ */ m(O, [["render", ae]]), de = {
       get() {
         return this.modelValue;
       },
-      set(t) {
-        this.$emit("update:modelValue", t);
+      set(e) {
+        this.$emit("update:modelValue", e);
       }
     },
     showDate() {
@@ -401,12 +399,12 @@ const oe = /* @__PURE__ */ m(O, [["render", ae]]), de = {
       return this.secondsMode === "max" ? "59" : "01";
     },
     dateInputClass() {
-      let t = "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 ? t + " rounded-l" : t + " rounded";
+      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 t = "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 ? t + " rounded-r" : t + " rounded";
+      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" : "";
@@ -415,19 +413,19 @@ const oe = /* @__PURE__ */ m(O, [["render", ae]]), de = {
   watch: {
     modelValue: {
       immediate: !0,
-      handler(t) {
-        if (!t) {
+      handler(e) {
+        if (!e) {
           this.localDate = "", this.localTime = "";
           return;
         }
         if (this.mode === "date")
-          this.localDate = t;
+          this.localDate = e;
         else if (this.mode === "time")
-          this.localTime = t;
+          this.localTime = e;
         else if (this.mode === "datetime") {
-          const [l, e] = t.split("T");
-          this.localDate = l || "", this.localTime = e ? e.slice(0, 5) : "";
-        } else this.mode === "datetime2" && (this.localDate = t.split("T")[0] || "", this.localTime = "");
+          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: {
@@ -438,63 +436,63 @@ const oe = /* @__PURE__ */ m(O, [["render", ae]]), de = {
     }
   },
   methods: {
-    parseValue(t) {
-      if (!t) {
+    parseValue(e) {
+      if (!e) {
         this.localDate = "", this.localTime = "";
         return;
       }
       if (this.mode === "date")
-        this.localDate = t, this.localTime = "";
+        this.localDate = e, this.localTime = "";
       else if (this.mode === "time")
-        this.localDate = "", this.localTime = t;
+        this.localDate = "", this.localTime = e;
       else if (this.mode === "datetime") {
-        const [l, e] = t.split("T");
-        this.localDate = l || "", this.localTime = e ? e.slice(0, 5) : "";
-      } else this.mode === "datetime2" && (this.localDate = t.split("T")[0] || "", this.localTime = "");
+        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 t = "";
-      this.mode === "date" ? t = this.localDate || "" : this.mode === "time" ? t = this.localTime || "" : this.mode === "datetime" ? !this.localDate || !this.localTime ? t = "" : t = `${this.localDate}T${this.localTime}:${this.segundos}.000` : this.mode === "datetime2" && (this.localDate ? t = `${this.localDate}T${this.secondsMode === "max" ? "23:59:59.000" : "00:01:00.000"}` : t = ""), this.model = t;
+      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;
     }
   }
-}, ne = { class: "w-full" }, ue = { class: "block text-sm font-medium text-gray-700" }, ce = {
+}, ie = { class: "w-full" }, ae = { class: "block text-sm font-medium text-gray-700" }, oe = {
   key: 0,
   class: "text-red-800 ml-2"
 };
-function he(t, l, e, n, d, r) {
-  return a(), i("div", ne, [
-    o("label", ue, [
-      e.required ? (a(), i("span", ce, "*")) : h("", !0),
-      f(" " + u(e.label), 1)
+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: g(r.gridClass)
+      class: m(s.gridClass)
     }, [
-      r.showDate ? w((a(), i("input", y({
+      s.showDate ? f((a(), i("input", x({
         key: 0,
         type: "date"
-      }, { disabled: e.disabled, required: e.required }, {
-        "onUpdate:modelValue": l[0] || (l[0] = (s) => d.localDate = s),
-        onInput: l[1] || (l[1] = (...s) => r.emitValue && r.emitValue(...s)),
-        class: r.dateInputClass
+      }, { 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)), [
-        [C, d.localDate]
+        [v, d.localDate]
       ]) : h("", !0),
-      r.showTime ? w((a(), i("input", y({
+      s.showTime ? f((a(), i("input", x({
         key: 1,
         type: "time"
-      }, { disabled: e.disabled, required: e.required }, {
-        "onUpdate:modelValue": l[2] || (l[2] = (s) => d.localTime = s),
-        onInput: l[3] || (l[3] = (...s) => r.emitValue && r.emitValue(...s)),
-        class: r.timeInputClass
+      }, { 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)), [
-        [C, d.localTime]
+        [v, d.localTime]
       ]) : h("", !0)
     ], 2)
   ]);
 }
-const ge = /* @__PURE__ */ m(de, [["render", he]]), me = {
+const ne = /* @__PURE__ */ g(re, [["render", de]]), ue = {
   name: "InputDecimalStyle",
   props: {
     modelValue: { type: [String, Number], default: "" },
@@ -511,15 +509,15 @@ const ge = /* @__PURE__ */ m(de, [["render", he]]), me = {
     },
     formattedValue() {
       if (this.modelValue === "" || this.modelValue === null) return "";
-      const t = parseFloat(this.modelValue);
-      return isNaN(t) ? "" : t.toLocaleString("en-US", {
+      const e = parseFloat(this.modelValue);
+      return isNaN(e) ? "" : e.toLocaleString("en-US", {
         minimumFractionDigits: 0,
         maximumFractionDigits: Number(this.decimals)
       });
     }
   },
   methods: {
-    onKeyDown(t) {
+    onKeyDown(e) {
       const l = [
         "Backspace",
         "Delete",
@@ -533,83 +531,83 @@ const ge = /* @__PURE__ */ m(de, [["render", he]]), me = {
         "Home",
         "End"
       ];
-      if (!((t.ctrlKey || t.metaKey) && ["a", "c", "v", "x", "z"].includes(t.key.toLowerCase())) && !l.includes(t.key)) {
-        if (t.key >= "0" && t.key <= "9") {
-          const e = t.target.value.replace(/,/g, ""), n = t.target.selectionStart, d = e.split(".");
+      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 r = d[1];
-            n > e.indexOf(".") && r.length >= Number(this.decimals) && t.preventDefault();
+            const s = d[1];
+            n > t.indexOf(".") && s.length >= Number(this.decimals) && e.preventDefault();
           }
           return;
         }
-        t.key === "." || t.key === "," ? (Number(this.decimals) === 0 || t.target.value.includes(".")) && t.preventDefault() : t.preventDefault();
+        e.key === "." || e.key === "," ? (Number(this.decimals) === 0 || e.target.value.includes(".")) && e.preventDefault() : e.preventDefault();
       }
     },
-    onInput(t) {
-      let l = t.target.value.replace(/[^0-9.]/g, "");
+    onInput(e) {
+      let l = e.target.value.replace(/[^0-9.]/g, "");
       Number(this.decimals) === 0 && (l = l.replace(/\./g, ""));
-      const e = l.split(".");
-      e.length > 2 && (l = e[0] + "." + e.slice(1).join("")), e[1] && e[1].length > Number(this.decimals) && (l = e[0] + "." + e[1].slice(0, Number(this.decimals))), this.$emit("update:modelValue", l);
+      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);
     },
-    onPaste(t) {
-      let e = (t.clipboardData || window.clipboardData).getData("text").replace(/[^0-9.]/g, "");
-      Number(this.decimals) === 0 && (e = e.replace(/\./g, ""));
-      const n = e.split(".");
-      n.length > 2 && (e = n[0] + "." + n.slice(1).join("")), n[1] && n[1].length > Number(this.decimals) && (e = n[0] + "." + n[1].slice(0, Number(this.decimals))), e !== "" && this.$emit("update:modelValue", e);
+    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);
     },
     onBlur() {
-      let t = this.modelValue ? parseFloat(this.modelValue) : "";
-      !isNaN(t) && t !== "" && (t = t.toFixed(Number(this.decimals))), this.$emit("update:modelValue", t);
+      let e = this.modelValue ? parseFloat(this.modelValue) : "";
+      !isNaN(e) && e !== "" && (e = e.toFixed(Number(this.decimals))), this.$emit("update:modelValue", e);
     }
   }
-}, be = { class: "w-full" }, ye = ["for"], fe = {
+}, ce = { class: "w-full" }, he = ["for"], me = {
   key: 0,
   class: "text-red-800 ml-2"
-}, xe = {
+}, ge = {
   key: 0,
   class: "relative"
-}, pe = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, we = ["id", "value", "placeholder", "maxlength"], ve = ["id", "value", "placeholder", "maxlength"];
-function Ce(t, l, e, n, d, r) {
-  return a(), i("div", be, [
+}, 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: r.getUUID
+      for: s.getUUID
     }, [
-      e.required ? (a(), i("span", fe, "*")) : h("", !0),
-      f(" " + u(e.label), 1)
-    ], 8, ye),
-    t.$slots.icon ? (a(), i("div", xe, [
-      o("div", pe, [
-        _(t.$slots, "icon")
+      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, [
+        C(e.$slots, "icon")
       ]),
-      o("input", y({
+      o("input", x({
         type: "text",
-        id: r.getUUID,
-        value: r.formattedValue,
-        onInput: l[0] || (l[0] = (...s) => r.onInput && r.onInput(...s)),
-        onKeydown: l[1] || (l[1] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
-        onBlur: l[2] || (l[2] = (...s) => r.onBlur && r.onBlur(...s)),
+        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)),
         inputmode: "decimal",
-        placeholder: e.placeholder,
-        onPaste: l[3] || (l[3] = S((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
-        maxlength: e.maxlength ? Number(e.maxlength) : null
-      }, { disabled: e.disabled, required: e.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, we)
-    ])) : (a(), i("input", y({
+        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,
       type: "text",
-      id: r.getUUID,
-      value: r.formattedValue,
-      onInput: l[4] || (l[4] = (...s) => r.onInput && r.onInput(...s)),
-      onKeydown: l[5] || (l[5] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
-      onBlur: l[6] || (l[6] = (...s) => r.onBlur && r.onBlur(...s)),
+      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)),
       inputmode: "decimal",
-      placeholder: e.placeholder,
-      onPaste: l[7] || (l[7] = S((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
-      maxlength: e.maxlength ? Number(e.maxlength) : null
-    }, { disabled: e.disabled, required: e.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, ve))
+      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))
   ]);
 }
-const _e = /* @__PURE__ */ m(me, [["render", Ce]]), Se = {
+const pe = /* @__PURE__ */ g(ue, [["render", xe]]), we = {
   name: "InputStyle",
   props: {
     modelValue: { type: [String, Number], default: "" },
@@ -628,57 +626,57 @@ const _e = /* @__PURE__ */ m(me, [["render", Ce]]), Se = {
       get() {
         return this.modelValue;
       },
-      set(t) {
-        this.$emit("update:modelValue", t);
+      set(e) {
+        this.$emit("update:modelValue", e);
       }
     }
   }
-}, ke = { class: "w-full" }, De = ["for"], Ue = {
+}, ve = { class: "w-full" }, Ce = ["for"], Se = {
   key: 0,
   class: "text-red-800 ml-2"
-}, Ve = {
+}, ke = {
   key: 0,
   class: "relative"
-}, Te = { 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 Le(t, l, e, n, d, r) {
-  return a(), i("div", ke, [
+}, _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", {
       class: "block text-sm font-medium text-gray-700",
-      for: r.getUUID
+      for: s.getUUID
     }, [
-      e.required ? (a(), i("span", Ue, "*")) : h("", !0),
-      f(" " + u(e.label), 1)
-    ], 8, De),
-    t.$slots.icon ? (a(), i("div", Ve, [
-      o("div", Te, [
-        _(t.$slots, "icon")
+      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, [
+        C(e.$slots, "icon")
       ]),
-      w(o("input", y({
-        id: r.getUUID,
-        type: e.type,
-        maxlength: e.maxlength ? Number(e.maxlength) : null,
-        placeholder: e.placeholder
-      }, { disabled: e.disabled, required: e.required }, {
-        "onUpdate:modelValue": l[0] || (l[0] = (s) => r.model = s),
+      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),
         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, Ie), [
-        [k, r.model]
+      }), null, 16, De), [
+        [_, s.model]
       ])
-    ])) : w((a(), i("input", y({
+    ])) : f((a(), i("input", x({
       key: 1,
-      id: r.getUUID,
-      type: e.type,
-      maxlength: e.maxlength ? Number(e.maxlength) : null,
-      placeholder: e.placeholder
-    }, { disabled: e.disabled, required: e.required }, {
-      "onUpdate:modelValue": l[1] || (l[1] = (s) => r.model = s),
+      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),
       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, Be)), [
-      [k, r.model]
+    }), null, 16, Ve)), [
+      [_, s.model]
     ])
   ]);
 }
-const qe = /* @__PURE__ */ m(Se, [["render", Le]]), Ne = {
+const Te = /* @__PURE__ */ g(we, [["render", Ue]]), Ie = {
   name: "SelectStyle",
   props: {
     modelValue: [String, Number, Object, null],
@@ -699,44 +697,44 @@ const qe = /* @__PURE__ */ m(Se, [["render", Le]]), Ne = {
       get() {
         return this.modelValue;
       },
-      set(t) {
-        this.$emit("update:modelValue", t);
+      set(e) {
+        this.$emit("update:modelValue", e);
       }
     }
   }
-}, Ae = { class: "w-full" }, Me = ["for"], ze = {
+}, Be = { class: "w-full" }, qe = ["for"], Le = {
   key: 0,
   class: "text-red-800 ml-2"
-}, Ee = ["id"], je = {
+}, Ne = ["id"], Ae = {
   value: "",
   disabled: ""
-}, Fe = ["value"];
-function Pe(t, l, e, n, d, r) {
-  return a(), i("div", Ae, [
+}, Me = ["value"];
+function ze(e, l, t, n, d, s) {
+  return a(), i("div", Be, [
     o("label", {
       class: "block text-sm font-medium text-gray-700",
-      for: r.getUUID
+      for: s.getUUID
     }, [
-      e.required ? (a(), i("span", ze, "*")) : h("", !0),
-      f(" " + u(e.label), 1)
-    ], 8, Me),
-    w(o("select", y({
-      "onUpdate:modelValue": l[0] || (l[0] = (s) => r.model = s)
-    }, { disabled: e.disabled, required: e.required }, {
-      id: 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,
       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", je, u(e.list.length > 0 ? e.option : e.oEmpty), 1),
-      (a(!0), i(x, null, p(e.list, (s, c) => (a(), i("option", {
+      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: s.id
-      }, u(s.text), 9, Fe))), 128))
-    ], 16, Ee), [
-      [U, r.model]
+        value: r.id
+      }, u(r.text), 9, Me))), 128))
+    ], 16, Ne), [
+      [V, s.model]
     ])
   ]);
 }
-const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
+const je = /* @__PURE__ */ g(Ie, [["render", ze]]), Ee = {
   props: {
     modelValue: { type: Number, default: 0 },
     steps: { type: Array, required: !0 },
@@ -757,8 +755,8 @@ const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
       get() {
         return this.modelValue;
       },
-      set(t) {
-        this.$emit("update:modelValue", t);
+      set(e) {
+        this.$emit("update:modelValue", e);
       }
     },
     solid() {
@@ -771,22 +769,22 @@ const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
       };
     },
     barActive() {
-      return this.solid[this.color].split(" ").find((t) => t.startsWith("bg-"));
+      return this.solid[this.color].split(" ").find((e) => e.startsWith("bg-"));
     },
     lineActive() {
       return this.barActive;
     },
     progressWidth() {
-      const t = this.steps.length;
-      return this.step === 0 ? 10 : this.step / (t - 1) * 100;
+      const e = this.steps.length;
+      return this.step === 0 ? 10 : this.step / (e - 1) * 100;
     }
   },
   methods: {
-    circleClass(t) {
-      return this.step === t ? `${this.barActive} text-white` : this.step > t ? `${this.barActive} text-white opacity-90` : "bg-white text-gray-400 border-gray-300";
+    circleClass(e) {
+      return this.step === e ? `${this.barActive} text-white` : this.step > e ? `${this.barActive} text-white opacity-90` : "bg-white text-gray-400 border-gray-300";
     },
-    textClass(t) {
-      return this.step >= t ? this.barActive.replace("bg-", "text-") : "text-gray-400";
+    textClass(e) {
+      return this.step >= e ? this.barActive.replace("bg-", "text-") : "text-gray-400";
     },
     next() {
       this.step < this.steps.length - 1 && this.step++;
@@ -794,40 +792,40 @@ const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
     previous() {
       this.step > 0 && this.step--;
     },
-    select(t) {
-      this.step = t;
+    select(e) {
+      this.step = e;
     },
     submitForm() {
       this.$emit("submit");
     }
   }
-}, Oe = { class: "flex items-center gap-6 w-full" }, He = ["disabled"], Re = { class: "flex-1" }, Ge = {
+}, Fe = { class: "flex items-center gap-6 w-full" }, Pe = ["disabled"], Ke = { class: "flex-1" }, We = {
   key: 0,
   class: "flex items-center"
-}, Je = ["onClick"], Qe = {
+}, Oe = ["onClick"], He = {
   key: 0,
   class: "w-4 h-4",
   fill: "none",
   stroke: "currentColor",
   viewBox: "0 0 24 24"
-}, Xe = {
+}, Re = {
   key: 1,
   class: "text-sm"
-}, Ye = {
+}, Ge = {
   key: 1,
   class: "w-full"
-}, Ze = {
+}, Je = {
   key: 0,
   class: "text-xs mb-1 block"
-}, $e = { class: "w-full h-3 rounded-full bg-gray-200 overflow-hidden relative" }, et = { key: 1 };
-function tt(t, l, e, n, d, r) {
-  return a(), i("div", Oe, [
-    e.button ? (a(), i("button", {
+}, 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", {
       key: 0,
       type: "button",
-      disabled: r.step === 0,
-      onClick: l[0] || (l[0] = (...s) => r.previous && r.previous(...s)),
-      class: g(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[e.color]])
+      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]])
     }, [
       l[3] || (l[3] = o("svg", {
         class: "w-5 h-5",
@@ -842,61 +840,61 @@ function tt(t, l, e, n, d, r) {
           d: "M15 19l-7-7 7-7"
         })
       ], -1)),
-      f(" " + u(e.btnPrevious), 1)
-    ], 10, He)) : h("", !0),
-    o("div", Re, [
-      e.type === "circle" ? (a(), i("div", Ge, [
-        (a(!0), i(x, null, p(e.steps, (s, c) => (a(), i("div", {
+      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: g(["flex items-center", c < e.steps.length - 1 ? "flex-1" : ""])
+          class: m(["flex items-center", c < t.steps.length - 1 ? "flex-1" : ""])
         }, [
           o("div", {
-            class: g(["flex flex-col items-center relative", e.selected ? "cursor-pointer" : "pointer-events-none"]),
-            onClick: (v) => r.select(c)
+            class: m(["flex flex-col items-center relative", t.selected ? "cursor-pointer" : "pointer-events-none"]),
+            onClick: (S) => s.select(c)
           }, [
             o("div", {
-              class: g(["w-9 h-9 rounded-full flex items-center justify-center border-2 font-semibold transition-colors duration-200", r.circleClass(c)])
+              class: m(["w-9 h-9 rounded-full flex items-center justify-center border-2 font-semibold transition-colors duration-200", s.circleClass(c)])
             }, [
-              r.step > c ? (a(), i("svg", Qe, [...l[4] || (l[4] = [
+              s.step > c ? (a(), i("svg", He, [...l[4] || (l[4] = [
                 o("path", {
                   "stroke-linecap": "round",
                   "stroke-linejoin": "round",
                   "stroke-width": "3",
                   d: "M5 13l4 4L19 7"
                 }, null, -1)
-              ])])) : (a(), i("span", Xe, u(c + 1), 1))
+              ])])) : (a(), i("span", Re, u(c + 1), 1))
             ], 2),
-            e.text === "all" || e.text === "only" && r.step === c ? (a(), i("span", {
+            t.text === "all" || t.text === "only" && s.step === c ? (a(), i("span", {
               key: 0,
-              class: g(["absolute -top-5 text-xs font-medium whitespace-nowrap transition-colors duration-200", r.textClass(c)])
-            }, u(s), 3)) : h("", !0)
-          ], 10, Je),
-          c < e.steps.length - 1 ? (a(), i("div", {
+              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", {
             key: 0,
-            class: g(["flex-1 h-2 mx-3 rounded transition-colors duration-200", r.step > c ? r.lineActive : "bg-gray-300"])
+            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)
         ], 2))), 128))
-      ])) : e.type === "linear" ? (a(), i("div", Ye, [
-        e.text === "all" ? (a(), i("span", Ze, u(Math.round(r.progressWidth)) + "% ", 1)) : h("", !0),
-        o("div", $e, [
+      ])) : 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: g(["h-full rounded-full transition-all duration-300 relative shadow-md", r.barActive]),
-            style: V({ width: r.progressWidth + "%" })
+            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)
           ])], 6)
         ])
       ])) : h("", !0)
     ]),
-    e.button ? (a(), i("div", et, [
-      r.step < e.steps.length - 1 ? (a(), i("button", {
+    t.button ? (a(), i("div", Xe, [
+      s.step < t.steps.length - 1 ? (a(), i("button", {
         key: 0,
         type: "button",
-        onClick: l[1] || (l[1] = (...s) => r.next && r.next(...s)),
-        class: g(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[e.color]])
+        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]])
       }, [
-        f(u(e.btnNext) + " ", 1),
+        y(u(t.btnNext) + " ", 1),
         l[7] || (l[7] = o("svg", {
           class: "w-5 h-5",
           fill: "none",
@@ -913,10 +911,10 @@ function tt(t, l, e, n, d, r) {
       ], 2)) : (a(), i("button", {
         key: 1,
         type: "button",
-        onClick: l[2] || (l[2] = (...s) => r.submitForm && r.submitForm(...s)),
-        class: g(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[e.color]])
+        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]])
       }, [
-        f(u(e.btnFinish) + " ", 1),
+        y(u(t.btnFinish) + " ", 1),
         l[8] || (l[8] = o("svg", {
           class: "w-5 h-5",
           fill: "none",
@@ -934,54 +932,54 @@ function tt(t, l, e, n, d, r) {
     ])) : h("", !0)
   ]);
 }
-const lt = /* @__PURE__ */ m(We, [["render", tt]]), rt = {
+const Ze = /* @__PURE__ */ g(Ee, [["render", Ye]]), $e = {
   name: "TableStyle",
   props: {
     columns: { type: Array, required: !0 },
     rows: { type: Array, default: () => [] }
   }
-}, st = { class: "w-full overflow-x-auto bg-white border border-gray-300 rounded shadow-sm" }, it = { class: "min-w-full" }, at = { class: "bg-gray-800" }, ot = { key: 1 }, dt = { key: 0 }, nt = ["colspan"];
-function ut(t, l, e, n, d, r) {
-  return a(), i("div", st, [
-    o("table", it, [
+}, 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", at, [
-          (a(!0), i(x, null, p(e.columns, (s, c) => (a(), i("th", {
+        o("tr", lt, [
+          (a(!0), i(p, null, w(t.columns, (r, c) => (a(), i("th", {
             key: c,
             class: "px-4 py-1.5 text-left text-sm font-semibold text-white border-b border-gray-600"
-          }, u(s.label), 1))), 128))
+          }, u(r.label), 1))), 128))
         ])
       ]),
       o("tbody", null, [
-        (a(!0), i(x, null, p(e.rows, (s, c) => (a(), i("tr", {
+        (a(!0), i(p, null, w(t.rows, (r, c) => (a(), i("tr", {
           key: c,
           class: "hover:bg-gray-100 transition-colors cursor-default"
         }, [
-          (a(!0), i(x, null, p(e.columns, (v, D) => (a(), i("td", {
+          (a(!0), i(p, null, w(t.columns, (S, D) => (a(), i("td", {
             key: D,
             class: "px-4 py-1.5 text-sm text-gray-700 border-b border-gray-200"
           }, [
-            t.$slots[v.field] ? _(t.$slots, v.field, {
+            e.$slots[S.field] ? C(e.$slots, S.field, {
               key: 0,
-              row: s
-            }) : (a(), i("span", ot, u(s[v.field]), 1))
+              row: r
+            }) : (a(), i("span", st, u(r[S.field]), 1))
           ]))), 128))
         ]))), 128)),
-        e.rows.length === 0 ? (a(), i("tr", dt, [
+        t.rows.length === 0 ? (a(), i("tr", rt, [
           o("td", {
-            colspan: e.columns.length,
+            colspan: t.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")
             ], -1)
-          ])], 8, nt)
+          ])], 8, it)
         ])) : h("", !0)
       ])
     ])
   ]);
 }
-const ct = /* @__PURE__ */ m(rt, [["render", ut]]), ht = {
+const ot = /* @__PURE__ */ g($e, [["render", at]]), dt = {
   name: "TextAreaStyle",
   props: {
     modelValue: String,
@@ -1001,45 +999,45 @@ const ct = /* @__PURE__ */ m(rt, [["render", ut]]), ht = {
       get() {
         return this.modelValue;
       },
-      set(t) {
-        this.$emit("update:modelValue", t);
+      set(e) {
+        this.$emit("update:modelValue", e);
       }
     }
   }
-}, gt = { class: "w-full" }, mt = { class: "flex justify-between" }, bt = ["for"], yt = {
+}, nt = { class: "w-full" }, ut = { class: "flex justify-between" }, ct = ["for"], ht = {
   key: 0,
   class: "text-red-800 ml-2"
-}, ft = ["for"], xt = ["id", "placeholder", "maxlength", "rows"];
-function pt(t, l, e, n, d, r) {
-  return a(), i("div", gt, [
-    o("div", mt, [
+}, 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", {
         class: "block text-sm font-medium text-gray-700",
-        for: r.getUUID
+        for: s.getUUID
       }, [
-        e.required ? (a(), i("span", yt, "*")) : h("", !0),
-        f(" " + u(e.label), 1)
-      ], 8, bt),
-      e.note ? (a(), i("label", {
+        t.required ? (a(), i("span", ht, "*")) : h("", !0),
+        y(" " + u(t.label), 1)
+      ], 8, ct),
+      t.note ? (a(), i("label", {
         key: 0,
         class: "block text-xs text-gray-700",
-        for: r.getUUID
-      }, u(e.note), 9, ft)) : h("", !0)
+        for: s.getUUID
+      }, u(t.note), 9, mt)) : h("", !0)
     ]),
-    w(o("textarea", y({
-      "onUpdate:modelValue": l[0] || (l[0] = (s) => r.model = s),
-      id: r.getUUID,
-      placeholder: e.placeholder
-    }, { disabled: e.disabled, required: e.required }, {
-      maxlength: e.maxlength ? Number(e.maxlength) : null,
-      rows: Number(e.row),
+    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),
       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, xt), [
-      [C, r.model]
+    }), null, 16, gt), [
+      [v, s.model]
     ])
   ]);
 }
-const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
+const yt = /* @__PURE__ */ g(dt, [["render", bt]]), ft = {
   name: "ToggleStyle",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -1055,8 +1053,8 @@ const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
       get() {
         return this.modelValue;
       },
-      set(t) {
-        this.$emit("update:modelValue", t);
+      set(e) {
+        this.$emit("update:modelValue", e);
       }
     },
     shapeToggle() {
@@ -1066,24 +1064,24 @@ const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
       }[this.shape];
     },
     computedClasses() {
-      const t = {
+      const e = {
         gray: "bg-slate-600 hover:bg-slate-700 border border-gray-800 cursor-pointer",
         green: "bg-emerald-600 hover:bg-emerald-700 border border-green-700 cursor-pointer",
         blue: "bg-sky-600 hover:bg-sky-700 border border-blue-700 cursor-pointer",
         red: "bg-rose-600 hover:bg-rose-700 border border-red-700 cursor-pointer",
         yellow: "bg-amber-600 hover:bg-amber-700 border border-yellow-600 cursor-pointer"
       };
-      return this.model ? t[this.color] : "bg-gray-200 border border-gray-300";
+      return this.model ? e[this.color] : "bg-gray-200 border border-gray-300";
     },
     disabledColorClasses() {
-      const t = {
+      const e = {
         gray: "bg-slate-600 border border-slate-300 cursor-not-allowed opacity-60",
         green: "bg-emerald-600 border border-emerald-300 cursor-not-allowed opacity-60",
         blue: "bg-sky-600 border border-sky-300 cursor-not-allowed opacity-60",
         red: "bg-rose-600 border border-rose-300 cursor-not-allowed opacity-60",
         yellow: "bg-amber-600 border border-amber-300 cursor-not-allowed opacity-60"
       };
-      return this.modelValue ? t[this.color] : "bg-gray-200 border border-gray-300 cursor-not-allowed";
+      return this.modelValue ? e[this.color] : "bg-gray-200 border border-gray-300 cursor-not-allowed";
     },
     disabledClasses() {
       return this.disabledColorClasses;
@@ -1094,45 +1092,45 @@ const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
       this.disabled || (this.model = !this.model);
     }
   }
-}, Ct = { class: "block text-sm font-medium text-gray-700" };
-function _t(t, l, e, n, d, r) {
+}, 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", Ct, u(e.label), 1),
+    o("label", xt, u(t.label), 1),
     o("div", {
-      class: g([
+      class: m([
         "relative w-11 h-6 inline-flex items-center transition-colors duration-300 px-1",
-        r.shapeToggle,
-        e.disabled ? r.disabledClasses : r.computedClasses
+        s.shapeToggle,
+        t.disabled ? s.disabledClasses : s.computedClasses
       ]),
-      onClick: l[0] || (l[0] = (...s) => r.toggle && r.toggle(...s))
+      onClick: l[0] || (l[0] = (...r) => s.toggle && s.toggle(...r))
     }, [
       o("div", {
-        class: g([
+        class: m([
           "absolute top-0.75 left-1 w-4 h-4 bg-white shadow transform transition-all duration-300",
-          r.shapeToggle,
-          r.model ? "translate-x-full" : "translate-x-0"
+          s.shapeToggle,
+          s.model ? "translate-x-full" : "translate-x-0"
         ])
       }, null, 2)
     ], 2)
   ]);
 }
-const St = /* @__PURE__ */ m(vt, [["render", _t]]), Dt = {
-  install(t) {
-    t.component("AlertStyle", b), t.component("ButtonStyle", L), t.component("CheckStyle", W), t.component("ComboBoxStyle", oe), t.component("DateTimeStyle", ge), t.component("InputDecimalStyle", _e), t.component("InputStyle", qe), t.component("SelectStyle", Ke), t.component("StepperStyle", lt), t.component("TableStyle", ct), t.component("TextAreaStyle", wt), t.component("ToggleStyle", St), t.config.globalProperties.$alertstyle = b;
+const wt = /* @__PURE__ */ g(ft, [["render", pt]]), Ct = {
+  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;
   }
 };
 export {
   b as AlertStyle,
-  L as ButtonStyle,
+  q as ButtonStyle,
   W as CheckStyle,
-  oe as ComboBoxStyle,
-  ge as DateTimeStyle,
-  _e as InputDecimalStyle,
-  qe as InputStyle,
-  Ke as SelectStyle,
-  lt as StepperStyle,
-  ct as TableStyle,
-  wt as TextAreaStyle,
-  St as ToggleStyle,
-  Dt as default
+  se as ComboBoxStyle,
+  ne as DateTimeStyle,
+  pe as InputDecimalStyle,
+  Te as InputStyle,
+  je as SelectStyle,
+  Ze as StepperStyle,
+  ot as TableStyle,
+  yt as TextAreaStyle,
+  wt as ToggleStyle,
+  Ct as default
 };