adverich-kun-ui 0.1.7 → 0.1.9

package/dist/adverich-kun-ui.css

@@ -0,0 +1 @@
+[data-v-c3a2b846]::-webkit-scrollbar-track{border-radius:0 0 10px}#txt,#hide{font:inherit;margin:0;padding:0}#txt{padding:0 2px;text-align:center;min-width:50px;max-width:100%;overflow:hidden;text-overflow:ellipsis}#txt:focus-visible{outline:none}#hide{position:absolute;height:0;overflow:hidden;white-space:pre}

package/dist/kun-ui.es.js

@@ -1,18 +1,499 @@
-import { computed as n, createElementBlock as o, openBlock as s, normalizeClass as i, renderSlot as u, createTextVNode as r, toDisplayString as c } from "vue";
-const d = ["aria-label", "disabled"], f = {
+import { resolveComponent as A, createElementBlock as p, openBlock as s, createElementVNode as v, createVNode as V, createCommentVNode as b, toDisplayString as $, normalizeClass as O, createBlock as P, renderSlot as h, ref as R, computed as I, mergeModels as H, useModel as U, watchEffect as ue, Fragment as ae, unref as c, withDirectives as ie, withKeys as ee, isRef as oe, createSlots as X, withCtx as q, createTextVNode as te, vShow as se, resolveDynamicComponent as re, normalizeStyle as ce } from "vue";
+const de = {
+  class: "h-svh top-0 left-0 bg-grey-900 w-full overflow-y-auto opacity-90",
+  style: { position: "fixed", "z-index": "2500" }
+}, fe = { class: "rounded-lg px-16 py-14" }, ye = { class: "flex justify-center py-4" }, pe = { class: "rounded-full bg-red-200 p-6" }, me = { class: "text-center flex flex-col justify-center items-center bg-red-500 rounded-lg p-4" }, ge = {
+  key: 0,
+  class: "my-4 text-center text-3xl font-semibold"
+}, ve = { class: "text-xl font-normal" }, he = {
+  __name: "KunAlert",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: "Congratulation !!"
+    },
+    message: {
+      type: String,
+      default: "Your order have been taken and is being attended to"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    return (t, a) => {
+      const n = A("KunIcon");
+      return s(), p("div", de, [
+        v("div", fe, [
+          v("div", ye, [
+            v("div", pe, [
+              V(n, {
+                icon: "exclamation",
+                size: "text-9xl"
+              })
+            ])
+          ]),
+          v("div", me, [
+            e.title ? (s(), p("div", ge, $(e.title), 1)) : b("", !0),
+            v("div", ve, $(e.message), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+}, xe = { class: "flex-1" }, be = { class: "flex items-center" }, Se = { class: "flex-1" }, Ce = { class: "w-full flex justify-end" }, Ke = {
+  __name: "KunAppbar",
+  props: {
+    density: {
+      type: String,
+      default: ""
+    },
+    bgColor: {
+      type: String,
+      default: "bg-appbar"
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    return (o, t) => {
+      const a = A("KunAppbarTitle");
+      return s(), p("div", {
+        class: O(["flex py-1 px-2 h-14 items-center", [e.bgColor]])
+      }, [
+        v("div", xe, [
+          v("div", be, [
+            h(o.$slots, "appbarButton"),
+            h(o.$slots, "prepend")
+          ])
+        ]),
+        e.title ? (s(), P(a, {
+          key: 0,
+          title: e.title
+        }, null, 8, ["title"])) : b("", !0),
+        v("div", Se, [
+          v("div", Ce, [
+            h(o.$slots, "append")
+          ])
+        ])
+      ], 2);
+    };
+  }
+}, _e = {
+  label: {
+    type: String
+  },
+  itemValue: {
+    type: String,
+    default: ""
+  },
+  itemTitle: {
+    type: String,
+    default: ""
+  },
+  itemText: {
+    type: String,
+    default: ""
+  },
+  itemSubtitle: {
+    type: String,
+    default: ""
+  },
+  returnObject: {
+    type: Boolean,
+    default: !1
+  },
+  searchableKeys: {
+    type: Array,
+    default: []
+  },
+  focusOnSelect: {
+    type: Boolean,
+    default: !1
+  },
+  clearable: {
+    type: Boolean,
+    default: !1
+  },
+  clearOnSelect: {
+    type: Boolean,
+    default: !1
+  },
+  clearSearchOnSelect: {
+    type: Boolean,
+    default: !0
+  },
+  closeOnSelect: {
+    type: Boolean,
+    default: !0
+  },
+  startEmtpy: {
+    type: Boolean,
+    default: !1
+  },
+  placeholderText: {
+    type: String,
+    default: "Seleccionar"
+  },
+  textNoItems: {
+    type: String,
+    default: "No hay elementos"
+  },
+  hasCreateItem: {
+    type: Boolean,
+    default: !1
+  },
+  multiple: {
+    type: Boolean,
+    default: !1
+  },
+  required: {
+    type: Boolean,
+    default: !1
+  },
+  // ***** STYLE ***** //
+  maxHeight: {
+    default: 500
+  },
+  density: {
+    type: String,
+    default: "comfortable"
+  },
+  hideDetails: {
+    type: Boolean,
+    default: !0
+  },
+  hasIcons: {
+    type: Boolean,
+    default: !0
+  },
+  bgItemListColor: {
+    type: String,
+    default: "bg-transparent"
+  },
+  selectedColor: {
+    type: String,
+    default: "bg-primary"
+  },
+  attach: {
+    type: Boolean,
+    default: !1
+  }
+};
+function _(e) {
+  return e !== null && typeof e == "object" && !Array.isArray(e);
+}
+function M(e) {
+  return Array.isArray(e);
+}
+function $e(e, o, t, a) {
+  const n = R(null), d = R(null), m = R(null), f = R(!1), g = R(""), x = I(() => !e.searchableKeys.length), k = I(() => e.clearOnSelect);
+  I(() => e.clearSearchOnSelect), I(() => e.focusOnSelect);
+  const F = I(() => e.closeOnSelect);
+  function E() {
+    M(t.value) && (t.value.length ? n.value = a.value.filter(
+      (l) => _(l) ? t.value.some(
+        (u) => u[e.itemTitle].includes(l[e.itemTitle])
+      ) : t.value.some((u) => u.includes(l))
+    ) : n.value = []), (_(t.value) && Object.keys(t.value).length || typeof t.value == "number" && t.value || typeof t.value == "string" && t.value || typeof t.value == "boolean") && (n.value = a.value.find(
+      (l) => _(l) ? e.returnObject ? e.itemValue ? l[e.itemValue] === t.value[e.itemValue] : l[e.itemTitle] === t.value[e.itemTitle] : l[e.itemValue] === t.value : l === t.value
+    ));
+  }
+  const j = I(() => n.value ? M(n.value) ? n.value.length ? r(n.value, e.itemTitle, "hasDefault") : e.placeholderText : _(n.value) ? r(n.value, e.itemTitle, "hasDefault") : n.value.toString() : a.value.length ? e.placeholderText : e.textNoItems), w = I(() => e.startEmtpy && g.value.length < 3 ? [] : a.value.filter((u) => {
+    if (_(u)) {
+      const z = Object.values(u).filter((N) => {
+        if (!_(N) && !M(N))
+          return N;
+      }), K = [u].reduce((N, ne) => e.searchableKeys.map((le) => ne[le]), []), Q = x.value ? z : K;
+      return Q ? Q.some(
+        (N) => N ? N.toString().toLowerCase().includes(g.value.toLowerCase()) : ""
+      ) : g.value ? u == g.value : u;
+    }
+    return u.toString().toLowerCase().includes(g.value.toLowerCase());
+  }).slice(0, currentBatchStep.value)), i = I(() => e.itemText.includes(",") ? e.itemText.split(",") : e.itemText);
+  function r(l, u, z) {
+    if (_(l)) {
+      if (u)
+        return M(u) ? u.map((K) => l[K] ?? "No definido").join(" - ") : u.includes(",") ? u.split(",").map((K) => l[K]).join(" - ") : !e.returnObject && typeof l[u] == "number" || l[u] ? l[u].toString() : "";
+      if (z)
+        return Object.values(l)[0];
+    }
+    return M(l) ? e.returnObject ? l.map((K) => K[u]).join(" - ") : l.map((K) => K).join(" - ") : z && typeof l != "number" && l.includes(",") ? l.split(",") : l;
+  }
+  function y(l) {
+    let u = l[0];
+    if (!e.multiple)
+      n.value = l[0], e.returnObject && (t.value = u), !e.returnObject && _(u) && (e.itemValue ? t.value = u[e.itemValue] : t.value = Object.values(u)[0]), _(u) || (t.value = u), f.value = !1;
+    else if (n.value || (n.value = []), B(u))
+      S(u), t.value = n.value;
+    else {
+      if (e.returnObject && n.value.push(u), !e.returnObject && _(u))
+        if (e.itemValue)
+          n.value.push(u[e.itemValue]);
+        else {
+          t.value = n.value.push(Object.values(u)[0]);
+          return;
+        }
+      t.value = n.value;
+    }
+    k.value && W(), d.value.focus();
+  }
+  function B(l) {
+    return n.value === null ? !1 : n.value.some(
+      (u) => e.returnObject ? u[e.itemValue] === l[e.itemValue] : u === l[e.itemValue]
+    );
+  }
+  function S(l) {
+    if (e.returnObject) {
+      let u = n.value.find(
+        (K) => K[e.itemValue] === l[e.itemValue]
+      ), z = n.value.indexOf(u);
+      n.value.splice(z, 1);
+    } else {
+      let u = n.value.indexOf(l[e.itemValue]);
+      n.value.splice(u, 1);
+    }
+  }
+  function C(l) {
+    l.key !== "Tab" && (f.value = !0);
+  }
+  function L(l) {
+    k.value && (f.value = !1);
+  }
+  function Y() {
+    f.value = !0, m.value && m.value.focus();
+  }
+  function G() {
+    f.value = !1, o("createItem");
+  }
+  function J(l) {
+    let u = n.value.indexOf(l);
+    n.value.splice(u, 1), t.value = n.value;
+  }
+  function W() {
+    g.value = "", M(t.value) && (n.value = []), _(t.value) && (n.value = {}), typeof t.value == "number" && t.value && (n.value = 0), typeof t.value == "string" && t.value && (n.value = ""), typeof t.value == "boolean" && (n.value = !1), t.value = n.value;
+  }
+  function T(l) {
+    if (!l.disabledItem) return !1;
+    if (l.disabledItem) return !0;
+  }
+  return {
+    selectedItem: n,
+    textFieldRef: d,
+    listRef: m,
+    menuModel: f,
+    search: g,
+    isCloseOnSelect: F,
+    isClearOnSelect: k,
+    setSelectedItemValue: E,
+    placeholder: j,
+    filteredItems: w,
+    textArr: i,
+    itemToString: r,
+    getSelectedItem: y,
+    openMenu: C,
+    closeMenu: L,
+    focusOnMenu: Y,
+    createItem: G,
+    removeItem: J,
+    clearSelection: W,
+    isDisabled: T
+  };
+}
+const D = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [a, n] of o)
+    t[a] = n;
+  return t;
+}, Ie = { class: "relative" }, ke = ["close-on-content-click", "max-height"], we = { class: "w-full px-2 py-1" }, Be = {
+  __name: "KunAutocomplete",
+  props: /* @__PURE__ */ H(_e, {
+    modelValue: { default: null },
+    modelModifiers: {},
+    items: { default: [], type: Array },
+    itemsModifiers: {}
+  }),
+  emits: /* @__PURE__ */ H(["createItem"], ["update:modelValue", "update:items"]),
+  setup(e, { emit: o }) {
+    const t = e;
+    R(0);
+    const a = U(e, "modelValue"), n = U(e, "items"), d = o, {
+      selectedItem: m,
+      textFieldRef: f,
+      menuModel: g,
+      search: x,
+      isCloseOnSelect: k,
+      setSelectedItemValue: F,
+      placeholder: E,
+      openMenu: j,
+      closeMenu: w,
+      focusOnMenu: i,
+      createItem: r,
+      clearSelection: y
+    } = $e(t, d, a, n);
+    ue(() => {
+      isObject(a.value) && !isNotEmpty(a.value) && (m.value = {}), isArray(a.value) && !isNotEmpty(a.value) && (m.value = []), a.value === null && (m.value = null), F();
+    });
+    function B(S) {
+      x.value = "", a.value = S, w();
+    }
+    return (S, C) => {
+      const L = A("KunIcon"), Y = A("KunTextField"), G = A("KunBtn"), J = A("KunListItem"), W = A("KunVirtualScroller");
+      return s(), p(ae, null, [
+        c(g) ? (s(), p("div", {
+          key: 0,
+          class: "fixed opacity-10 w-svw inset-0 h-svh",
+          onClick: C[0] || (C[0] = (T) => g.value = !1)
+        })) : b("", !0),
+        v("div", Ie, [
+          V(Y, {
+            modelValue: c(x),
+            "onUpdate:modelValue": C[2] || (C[2] = (T) => oe(x) ? x.value = T : null),
+            ref_key: "textFieldRef",
+            ref: f,
+            placeholder: S.isArray(c(m)) && c(m).length ? "" : c(E),
+            onKeyup: ee(c(i), ["down"]),
+            onClickInput: c(j),
+            onPressEsc: c(w),
+            onChange: C[3] || (C[3] = (T) => console.log("change")),
+            onFocusInput: c(i)
+          }, X({ _: 2 }, [
+            S.hasIcons ? {
+              name: "append-inner",
+              fn: q(() => [
+                S.clearable && c(m) ? (s(), P(L, {
+                  key: 0,
+                  onClick: c(y),
+                  size: "text-xl",
+                  color: "text-error",
+                  icon: "close",
+                  class: O(["mr-1", S.isNotEmpty(c(m)) ? "cursor-pointer" : "cursor-default"]),
+                  disabled: !S.isNotEmpty(c(m))
+                }, null, 8, ["onClick", "class", "disabled"])) : b("", !0),
+                V(L, {
+                  color: "text-accent-button",
+                  size: "text-xl",
+                  class: "cursor-pointer",
+                  icon: c(g) ? "menuUp" : "menuDown",
+                  onClick: C[1] || (C[1] = (T) => g.value = !c(g))
+                }, null, 8, ["icon"]),
+                S.required ? (s(), P(L, {
+                  key: 1,
+                  color: "text-red-900",
+                  size: "text-lg",
+                  class: "mb-3",
+                  icon: "asterisk"
+                })) : b("", !0)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "placeholder", "onKeyup", "onClickInput", "onPressEsc", "onFocusInput"]),
+          ie(v("div", {
+            class: "absolute h-fit left-0 w-full z-50 bg-surface rounded-b border border-field-border-focus ring-1 focus:ring-field-ring-focus",
+            "close-on-content-click": c(k),
+            "max-height": S.maxHeight
+          }, [
+            V(W, {
+              items: n.value,
+              search: c(x),
+              searchBy: "name",
+              maxHeight: 250
+            }, X({
+              default: q(({ item: T, itemKey: l }) => [
+                V(J, {
+                  item: T,
+                  itemKey: l,
+                  title: "name",
+                  cursor: "cursor-pointer",
+                  onSelect: B
+                }, null, 8, ["item", "itemKey"])
+              ]),
+              _: 2
+            }, [
+              S.hasCreateItem ? {
+                name: "topButton",
+                fn: q(() => [
+                  v("div", we, [
+                    V(G, {
+                      onClick: c(r),
+                      class: "w-full rounded-md bg-accent-button",
+                      size: "xs"
+                    }, {
+                      default: q(() => C[4] || (C[4] = [
+                        te("Crear item")
+                      ])),
+                      _: 1
+                    }, 8, ["onClick"])
+                  ])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["items", "search"])
+          ], 8, ke), [
+            [se, c(g)]
+          ])
+        ])
+      ], 64);
+    };
+  }
+}, Oe = /* @__PURE__ */ D(Be, [["__scopeId", "data-v-c3a2b846"]]), je = ["disabled"], Te = "px-1 py-1 text-xs", Ae = "px-2 py-2 text-xs", Fe = "px-1 py-1 text-sm", Ee = "px-2 py-2 text-sm", Ne = "px-3 py-3 text-sm", ze = "px-3 py-3 text-base", Me = "px-4 py-4 text-base", Ve = {
   __name: "KunBtn",
   props: {
+    size: {
+      type: String,
+      default: "md"
+    },
+    width: {
+      type: String,
+      default: "w-24"
+    },
+    textColor: {
+      type: String,
+      default: "text-white"
+    },
     text: {
       type: String,
       default: null
     },
-    class: {
+    fontWeight: {
       type: String,
-      default: "px-4 py-2 text-sm font-medium bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-blue-300"
+      default: "font-medium"
     },
-    ariaLabel: {
+    bgColor: {
       type: String,
-      default: null
+      default: "bg-button"
+    },
+    bgColorHover: {
+      type: String,
+      default: "hover:opacity-90"
+    },
+    bgColorFocus: {
+      type: String,
+      default: "focus:opacity-100"
+    },
+    focusRing: {
+      type: String,
+      default: "focus:ring-1"
+    },
+    focusOutline: {
+      type: String,
+      default: "focus:outline-none"
+    },
+    focusRingColor: {
+      type: String,
+      default: "focus:ring-blue-300"
+    },
+    rounded: {
+      type: String,
+      default: "rounded-lg"
+    },
+    textAlign: {
+      type: String,
+      default: "text-center"
     },
     disabled: {
       type: Boolean,
@@ -20,24 +501,510 @@ const d = ["aria-label", "disabled"], f = {
     }
   },
   setup(e) {
-    const t = e, a = n(() => t.class);
-    return (l, b) => (s(), o("button", {
+    const o = (t) => {
+      switch (t) {
+        case "xxs":
+          return Te;
+        case "xs":
+          return Ae;
+        case "sm":
+          return Fe;
+        case "md":
+          return Ee;
+        case "lg":
+          return Ne;
+        case "xl":
+          return ze;
+        case "xxl":
+          return Me;
+      }
+    };
+    return (t, a) => (s(), p("button", {
       type: "button",
-      class: i(["flex justify-center items-center transition-all duration-200", [a.value, e.disabled ? "opacity-50 cursor-not-allowed" : "hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2"]]),
-      "aria-label": e.ariaLabel,
+      class: O(["flex justify-center align-center items-center", [
+        e.width,
+        o(e.size),
+        e.textColor,
+        e.fontWeight,
+        e.bgColor,
+        e.bgColorHover,
+        e.bgColorFocus,
+        e.focusRing,
+        e.focusOutline,
+        e.focusRingColor,
+        e.rounded,
+        e.textAlign,
+        e.disabled ? "opacity-50 cursor-not-allowed" : "hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2"
+      ]]),
       disabled: e.disabled
     }, [
-      u(l.$slots, "default", {}, () => [
-        r(c(e.text), 1)
+      h(t.$slots, "default", {}, () => [
+        te($(e.text), 1)
       ])
-    ], 10, d));
+    ], 10, je));
   }
-}, p = {
-  install(e) {
-    e.component("KunBtn", f);
+}, Re = {
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    bgColor: {
+      type: String,
+      default: "bg-button"
+    },
+    textColor: {
+      type: String,
+      default: "text-on-color"
+    },
+    textSize: {
+      type: String,
+      default: "text-xs"
+    },
+    fontWeight: {
+      type: String,
+      default: "font-medium"
+    },
+    rounded: {
+      type: String,
+      default: "rounded-2xl"
+    },
+    cursor: {
+      type: String,
+      default: "cursor-default"
+    }
+  }
+};
+function De(e, o, t, a, n, d) {
+  return s(), p("div", {
+    class: O(["flex px-2.5 py-1.5", [t.bgColor, t.textColor, t.textSize, t.fontWeight, t.rounded, t.cursor]])
+  }, $(t.text), 3);
+}
+const Le = /* @__PURE__ */ D(Re, [["render", De]]), Pe = {
+  props: {
+    title: {
+      type: String
+    },
+    subtitle: {
+      type: String
+    },
+    text: {
+      type: String
+    },
+    bgColor: {
+      type: String,
+      default: "bg-surface"
+    },
+    rounded: {
+      type: [String | Number | Boolean],
+      default: void 0
+    },
+    variant: {
+      type: String,
+      default: "elevated"
+    },
+    height: {
+      type: [Number, String],
+      default: "h-full"
+      // Valor por defecto de la altura en píxeles
+    },
+    width: {
+      type: [Number, String],
+      default: "w-full"
+      // Valor por defecto del ancho
+    },
+    to: {
+      type: String,
+      default: void 0
+    }
+  }
+}, We = ["to"];
+function qe(e, o, t, a, n, d) {
+  return s(), p("div", {
+    class: O(["flex flex-col", [t.rounded, t.variant, t.height, t.width, t.bgColor]]),
+    to: t.to
+  }, [
+    h(e.$slots, "default")
+  ], 10, We);
+}
+const He = /* @__PURE__ */ D(Pe, [["render", qe]]), Ue = {
+  props: {
+    title: {
+      type: String
+    },
+    subtitle: {
+      type: String
+    },
+    text: {
+      type: String
+    },
+    bgColor: {
+      type: String,
+      default: "bg-appbar"
+    },
+    variant: {
+      type: String,
+      default: "elevated"
+    },
+    height: {
+      type: [Number, String],
+      default: "h-fit"
+      // Valor por defecto de la altura en píxeles
+    },
+    width: {
+      type: [Number, String],
+      default: "w-full"
+      // Valor por defecto del ancho
+    },
+    classBase: {
+      type: String,
+      default: "text-center rounded-t-lg"
+    }
+  }
+}, Ye = {
+  key: 0,
+  class: "flex flex-row uppercase w-full py-2"
+}, Ge = { class: "w-full" }, Je = { key: 1 }, Qe = { key: 2 };
+function Xe(e, o, t, a, n, d) {
+  return h(e.$slots, "default", {}, () => [
+    v("div", {
+      class: O([t.classBase, t.variant, t.height, t.width, t.bgColor])
+    }, [
+      t.title ? (s(), p("div", Ye, [
+        h(e.$slots, "prepend-title"),
+        v("span", Ge, $(t.title), 1),
+        h(e.$slots, "append-title")
+      ])) : b("", !0),
+      t.subtitle ? (s(), p("span", Je, $(t.subtitle), 1)) : b("", !0),
+      t.text ? (s(), p("span", Qe, $(t.text), 1)) : b("", !0)
+    ], 2)
+  ]);
+}
+const Ze = /* @__PURE__ */ D(Ue, [["render", Xe]]), et = {
+  class: "flex flex-row items-center",
+  style: { padding: "2px 2px", "max-width": "200px" }
+}, tt = {
+  key: 0,
+  class: "mr-1"
+}, nt = ["placeholder", "value"], lt = { key: 1 }, ut = {
+  __name: "KunCurrency",
+  props: {
+    currency: {
+      type: Object,
+      default: () => ({
+        name: "Peso Argentino",
+        name: "ARS",
+        simbol: "$"
+      })
+    },
+    hideCurrency: {
+      type: Boolean,
+      default: !1
+    },
+    locale: {
+      type: String,
+      default: "ar-ES"
+    },
+    precision: {
+      type: Number,
+      default: 2
+    },
+    modelValue: {
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: "0.00"
+    },
+    prefix: {
+      type: String,
+      default: "$"
+    },
+    suffix: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const t = e, a = o;
+    function n(r) {
+      d.value = r, a("update:modelValue", r);
+    }
+    const d = ref(t.modelValue);
+    let m = null, f = null;
+    onMounted(() => {
+      m = document.getElementById("hide"), f = document.getElementById("txt"), f.addEventListener("input", g), g();
+    });
+    function g() {
+      m.textContent = f.value, f.style.width = 6 + m.offsetWidth + "px";
+    }
+    const x = (r) => {
+      const y = r.target.querySelector("input");
+      y && y.focus();
+    }, k = ref(null), F = (r) => {
+      const y = r.target, B = y.value;
+      y.value = B.replace(/\D/g, ""), n(y.value);
+    };
+    let E = t.placeholder;
+    const j = () => {
+      i("");
+    }, w = () => {
+      i(t.placeholder);
+    }, i = (r) => {
+      document.getElementById("txt").setAttribute("placeholder", r);
+    };
+    return (r, y) => (s(), p("div", {
+      class: "w-full h-full flex justify-center",
+      style: { cursor: "text" },
+      onClick: y[1] || (y[1] = (B) => x(B))
+    }, [
+      v("div", et, [
+        e.prefix ? (s(), p("div", tt, $(e.prefix), 1)) : b("", !0),
+        y[2] || (y[2] = v("span", { id: "hide" }, null, -1)),
+        v("input", {
+          id: "txt",
+          ref_key: "inputField",
+          ref: k,
+          type: "number",
+          class: "text-field-style",
+          onFocus: j,
+          onBlur: w,
+          placeholder: c(E),
+          onInput: y[0] || (y[0] = (B) => F(B)),
+          value: c(d),
+          autocomplete: "off"
+        }, null, 40, nt),
+        e.suffix ? (s(), p("div", lt, $(e.suffix), 1)) : b("", !0)
+      ])
+    ]));
+  }
+}, at = {
+  __name: "KunIcon",
+  props: {
+    icon: {
+      type: [String, Object, Function],
+      required: !0
+    },
+    aliases: {
+      type: Object,
+      default: () => ({})
+    },
+    size: {
+      type: String,
+      default: "text-xs"
+    },
+    color: {
+      type: String,
+      default: "text-font-color"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: o }) {
+    const t = e, a = o;
+    function n(f) {
+      t.disabled || a("click", f);
+    }
+    const d = I(() => {
+      if (typeof t.icon == "string" && t.icon.startsWith("$")) {
+        const f = t.icon.slice(1);
+        return t.aliases[f] || "";
+      }
+      return t.icon;
+    }), m = I(
+      () => typeof d.value == "function" || typeof d.value == "object" && d.value !== null
+    );
+    return (f, g) => (s(), p("span", {
+      class: O([e.color, e.size, e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"]),
+      onClick: n
+    }, [
+      f.$slots.default ? h(f.$slots, "default", { key: 0 }) : m.value ? (s(), P(re(d.value), { key: 1 })) : (s(), p("span", {
+        key: 2,
+        class: O(d.value)
+      }, null, 2))
+    ], 2));
+  }
+}, it = {};
+function ot(e, o) {
+  return null;
+}
+const st = /* @__PURE__ */ D(it, [["render", ot]]), rt = {
+  props: {
+    height: {
+      type: [Number, String],
+      default: "100%"
+      // Valor por defecto de la altura en píxeles
+    },
+    width: {
+      type: [Number, String],
+      default: "100%"
+      // Valor por defecto del ancho
+    }
+  }
+};
+function ct(e, o, t, a, n, d) {
+  return s(), p("div", {
+    style: ce({ height: t.height, width: t.width })
+  }, null, 4);
+}
+const dt = /* @__PURE__ */ D(rt, [["render", ct]]), ft = {
+  type: {
+    type: String,
+    default: "text"
+  },
+  locale: {
+    type: String,
+    default: "ar-ES"
+  },
+  precision: {
+    type: Number,
+    default: 2
+  },
+  prefix: {
+    type: String,
+    default: ""
+  },
+  suffix: {
+    type: String,
+    default: ""
+  },
+  resize: {
+    type: Boolean,
+    default: !1
+  },
+  rounded: {
+    type: String,
+    default: "rounded"
+  }
+}, yt = { key: 0 }, pt = ["type", "value", "placeholder"], mt = { key: 1 }, gt = {
+  __name: "KunTextField",
+  props: /* @__PURE__ */ H(ft, {
+    modelValue: {},
+    modelModifiers: {},
+    placeholder: {},
+    placeholderModifiers: {}
+  }),
+  emits: /* @__PURE__ */ H(["update:modelValue", "focusInput", "blurInput", "pressEsc", "clickInput"], ["update:modelValue", "update:placeholder"]),
+  setup(e, { emit: o }) {
+    const t = o, a = U(e, "modelValue"), n = U(e, "placeholder"), d = ref(null);
+    function m(i) {
+      a.value = i;
+    }
+    const f = (i) => {
+      const r = i.target.querySelector("input");
+      r && r.focus();
+    }, g = (i) => {
+      const r = i.target;
+      m(r.value);
+    };
+    watch(n, (i) => {
+      x = i;
+    });
+    let x = n.value;
+    const k = () => {
+      w("rounded-b-none"), x = "", t("focusInput");
+    }, F = () => {
+      x = n.value, w("");
+    }, E = () => {
+      d.value, d.value && d.value.blur(), t("pressEsc");
+    }, j = ref("");
+    function w(i) {
+      j.value = i;
+    }
+    return (i, r) => (s(), p("div", {
+      class: "w-full h-full flex justify-center my-2",
+      style: { cursor: "text" },
+      onClick: r[1] || (r[1] = (y) => f(y))
+    }, [
+      h(i.$slots, "prepend"),
+      v("div", {
+        class: O([c(j), i.rounded, "w-full h-full text-field-style flex flex-row items-center"]),
+        style: { padding: "0px 2px" }
+      }, [
+        i.prefix ? (s(), p("div", yt, $(i.prefix), 1)) : b("", !0),
+        h(i.$slots, "prepend-inner"),
+        h(i.$slots, "default", {}, () => [
+          v("input", {
+            ref_key: "inputField",
+            ref: d,
+            type: i.type,
+            value: a.value,
+            autocomplete: "off",
+            class: "h-full text-center w-full bg-transparent focus:border-none focus:outline-none input-opacity",
+            style: { padding: "4px 0px" },
+            placeholder: c(x),
+            onInput: r[0] || (r[0] = (y) => g(y)),
+            onKeydown: ee(E, ["escape"]),
+            onFocus: k,
+            onBlur: F
+          }, null, 40, pt)
+        ]),
+        h(i.$slots, "append-inner"),
+        i.suffix ? (s(), p("div", mt, $(i.suffix), 1)) : b("", !0)
+      ], 2),
+      h(i.$slots, "append")
+    ]));
+  }
+}, vt = { class: "bg-appbar h-10 flex flex-row items-center py-2 px-2" }, ht = {
+  __name: "KunToolbar",
+  props: {
+    density: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    return (o, t) => {
+      const a = A("KunToolbarTitle");
+      return s(), p("div", vt, [
+        e.title ? (s(), P(a, {
+          key: 0,
+          title: e.title
+        }, null, 8, ["title"])) : b("", !0),
+        h(o.$slots, "default", { density: e.density })
+      ]);
+    };
   }
+}, Z = {
+  KunAlert: he,
+  KunAppbar: Ke,
+  KunAutocomplete: Oe,
+  KunBtn: Ve,
+  KunBudge: Le,
+  KunCard: He,
+  KunCardText: Ze,
+  KunCurrency: ut,
+  KunIcon: at,
+  KunList: st,
+  KunSpacer: dt,
+  KunTextField: gt,
+  KunToolbar: ht
 };
+function St(e) {
+  for (const o in Z)
+    e.component(o, Z[o]);
+}
 export {
-  f as KunBtn,
-  p as default
+  he as KunAlert,
+  Ke as KunAppbar,
+  Oe as KunAutocomplete,
+  Ve as KunBtn,
+  Le as KunBudge,
+  He as KunCard,
+  Ze as KunCardText,
+  ut as KunCurrency,
+  at as KunIcon,
+  st as KunList,
+  dt as KunSpacer,
+  gt as KunTextField,
+  ht as KunToolbar,
+  St as install
 };

package/dist/kun-ui.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.KunUI={},t.Vue))})(this,function(t,e){"use strict";const o=["aria-label","disabled"],l={__name:"KunBtn",props:{text:{type:String,default:null},class:{type:String,default:"px-4 py-2 text-sm font-medium bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-blue-300"},ariaLabel:{type:String,default:null},disabled:{type:Boolean,default:!1}},setup(n){const a=n,s=e.computed(()=>a.class);return(u,d)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(["flex justify-center items-center transition-all duration-200",[s.value,n.disabled?"opacity-50 cursor-not-allowed":"hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2"]]),"aria-label":n.ariaLabel,disabled:n.disabled},[e.renderSlot(u.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.text),1)])],10,o))}},i={install(n){n.component("KunBtn",l)}};t.KunBtn=l,t.default=i,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.KunUI={},m.Vue))})(this,function(m,e){"use strict";const Z={class:"h-svh top-0 left-0 bg-grey-900 w-full overflow-y-auto opacity-90",style:{position:"fixed","z-index":"2500"}},v={class:"rounded-lg px-16 py-14"},ee={class:"flex justify-center py-4"},te={class:"rounded-full bg-red-200 p-6"},ne={class:"text-center flex flex-col justify-center items-center bg-red-500 rounded-lg p-4"},le={key:0,class:"my-4 text-center text-3xl font-semibold"},oe={class:"text-xl font-normal"},F={__name:"KunAlert",props:{modelValue:{type:Boolean,default:!1},title:{type:String,default:"Congratulation !!"},message:{type:String,default:"Your order have been taken and is being attended to"}},emits:["update:modelValue"],setup(t,{emit:c}){return(n,a)=>{const l=e.resolveComponent("KunIcon");return e.openBlock(),e.createElementBlock("div",Z,[e.createElementVNode("div",v,[e.createElementVNode("div",ee,[e.createElementVNode("div",te,[e.createVNode(l,{icon:"exclamation",size:"text-9xl"})])]),e.createElementVNode("div",ne,[t.title?(e.openBlock(),e.createElementBlock("div",le,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",oe,e.toDisplayString(t.message),1)])])])}}},re={class:"flex-1"},ae={class:"flex items-center"},ie={class:"flex-1"},ce={class:"w-full flex justify-end"},M={__name:"KunAppbar",props:{density:{type:String,default:""},bgColor:{type:String,default:"bg-appbar"},title:{type:String,default:""}},setup(t){return(c,n)=>{const a=e.resolveComponent("KunAppbarTitle");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex py-1 px-2 h-14 items-center",[t.bgColor]])},[e.createElementVNode("div",re,[e.createElementVNode("div",ae,[e.renderSlot(c.$slots,"appbarButton"),e.renderSlot(c.$slots,"prepend")])]),t.title?(e.openBlock(),e.createBlock(a,{key:0,title:t.title},null,8,["title"])):e.createCommentVNode("",!0),e.createElementVNode("div",ie,[e.createElementVNode("div",ce,[e.renderSlot(c.$slots,"append")])])],2)}}},se={label:{type:String},itemValue:{type:String,default:""},itemTitle:{type:String,default:""},itemText:{type:String,default:""},itemSubtitle:{type:String,default:""},returnObject:{type:Boolean,default:!1},searchableKeys:{type:Array,default:[]},focusOnSelect:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},clearOnSelect:{type:Boolean,default:!1},clearSearchOnSelect:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!0},startEmtpy:{type:Boolean,default:!1},placeholderText:{type:String,default:"Seleccionar"},textNoItems:{type:String,default:"No hay elementos"},hasCreateItem:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxHeight:{default:500},density:{type:String,default:"comfortable"},hideDetails:{type:Boolean,default:!0},hasIcons:{type:Boolean,default:!0},bgItemListColor:{type:String,default:"bg-transparent"},selectedColor:{type:String,default:"bg-primary"},attach:{type:Boolean,default:!1}};function S(t){return t!==null&&typeof t=="object"&&!Array.isArray(t)}function V(t){return Array.isArray(t)}function ue(t,c,n,a){const l=e.ref(null),u=e.ref(null),p=e.ref(null),d=e.ref(!1),y=e.ref(""),g=e.computed(()=>!t.searchableKeys.length),k=e.computed(()=>t.clearOnSelect);e.computed(()=>t.clearSearchOnSelect),e.computed(()=>t.focusOnSelect);const N=e.computed(()=>t.closeOnSelect);function _(){V(n.value)&&(n.value.length?l.value=a.value.filter(o=>S(o)?n.value.some(r=>r[t.itemTitle].includes(o[t.itemTitle])):n.value.some(r=>r.includes(o))):l.value=[]),(S(n.value)&&Object.keys(n.value).length||typeof n.value=="number"&&n.value||typeof n.value=="string"&&n.value||typeof n.value=="boolean")&&(l.value=a.value.find(o=>S(o)?t.returnObject?t.itemValue?o[t.itemValue]===n.value[t.itemValue]:o[t.itemTitle]===n.value[t.itemTitle]:o[t.itemValue]===n.value:o===n.value))}const K=e.computed(()=>l.value?V(l.value)?l.value.length?s(l.value,t.itemTitle,"hasDefault"):t.placeholderText:S(l.value)?s(l.value,t.itemTitle,"hasDefault"):l.value.toString():a.value.length?t.placeholderText:t.textNoItems),C=e.computed(()=>t.startEmtpy&&y.value.length<3?[]:a.value.filter(r=>{if(S(r)){const I=Object.values(r).filter(w=>{if(!S(w)&&!V(w))return w}),b=[r].reduce((w,Ye)=>t.searchableKeys.map(Ge=>Ye[Ge]),[]),X=g.value?I:b;return X?X.some(w=>w?w.toString().toLowerCase().includes(y.value.toLowerCase()):""):y.value?r==y.value:r}return r.toString().toLowerCase().includes(y.value.toLowerCase())}).slice(0,currentBatchStep.value)),i=e.computed(()=>t.itemText.includes(",")?t.itemText.split(","):t.itemText);function s(o,r,I){if(S(o)){if(r)return V(r)?r.map(b=>o[b]??"No definido").join(" - "):r.includes(",")?r.split(",").map(b=>o[b]).join(" - "):!t.returnObject&&typeof o[r]=="number"||o[r]?o[r].toString():"";if(I)return Object.values(o)[0]}return V(o)?t.returnObject?o.map(b=>b[r]).join(" - "):o.map(b=>b).join(" - "):I&&typeof o!="number"&&o.includes(",")?o.split(","):o}function f(o){let r=o[0];if(!t.multiple)l.value=o[0],t.returnObject&&(n.value=r),!t.returnObject&&S(r)&&(t.itemValue?n.value=r[t.itemValue]:n.value=Object.values(r)[0]),S(r)||(n.value=r),d.value=!1;else if(l.value||(l.value=[]),B(r))h(r),n.value=l.value;else{if(t.returnObject&&l.value.push(r),!t.returnObject&&S(r))if(t.itemValue)l.value.push(r[t.itemValue]);else{n.value=l.value.push(Object.values(r)[0]);return}n.value=l.value}k.value&&T(),u.value.focus()}function B(o){return l.value===null?!1:l.value.some(r=>t.returnObject?r[t.itemValue]===o[t.itemValue]:r===o[t.itemValue])}function h(o){if(t.returnObject){let r=l.value.find(b=>b[t.itemValue]===o[t.itemValue]),I=l.value.indexOf(r);l.value.splice(I,1)}else{let r=l.value.indexOf(o[t.itemValue]);l.value.splice(r,1)}}function x(o){o.key!=="Tab"&&(d.value=!0)}function O(o){k.value&&(d.value=!1)}function j(){d.value=!0,p.value&&p.value.focus()}function A(){d.value=!1,c("createItem")}function z(o){let r=l.value.indexOf(o);l.value.splice(r,1),n.value=l.value}function T(){y.value="",V(n.value)&&(l.value=[]),S(n.value)&&(l.value={}),typeof n.value=="number"&&n.value&&(l.value=0),typeof n.value=="string"&&n.value&&(l.value=""),typeof n.value=="boolean"&&(l.value=!1),n.value=l.value}function E(o){if(!o.disabledItem)return!1;if(o.disabledItem)return!0}return{selectedItem:l,textFieldRef:u,listRef:p,menuModel:d,search:y,isCloseOnSelect:N,isClearOnSelect:k,setSelectedItemValue:_,placeholder:K,filteredItems:C,textArr:i,itemToString:s,getSelectedItem:f,openMenu:x,closeMenu:O,focusOnMenu:j,createItem:A,removeItem:z,clearSelection:T,isDisabled:E}}const $=(t,c)=>{const n=t.__vccOpts||t;for(const[a,l]of c)n[a]=l;return n},de={class:"relative"},fe=["close-on-content-click","max-height"],me={class:"w-full px-2 py-1"},D=$({__name:"KunAutocomplete",props:e.mergeModels(se,{modelValue:{default:null},modelModifiers:{},items:{default:[],type:Array},itemsModifiers:{}}),emits:e.mergeModels(["createItem"],["update:modelValue","update:items"]),setup(t,{emit:c}){const n=t;e.ref(0);const a=e.useModel(t,"modelValue"),l=e.useModel(t,"items"),u=c,{selectedItem:p,textFieldRef:d,menuModel:y,search:g,isCloseOnSelect:k,setSelectedItemValue:N,placeholder:_,openMenu:K,closeMenu:C,focusOnMenu:i,createItem:s,clearSelection:f}=ue(n,u,a,l);e.watchEffect(()=>{isObject(a.value)&&!isNotEmpty(a.value)&&(p.value={}),isArray(a.value)&&!isNotEmpty(a.value)&&(p.value=[]),a.value===null&&(p.value=null),N()});function B(h){g.value="",a.value=h,C()}return(h,x)=>{const O=e.resolveComponent("KunIcon"),j=e.resolveComponent("KunTextField"),A=e.resolveComponent("KunBtn"),z=e.resolveComponent("KunListItem"),T=e.resolveComponent("KunVirtualScroller");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(y)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fixed opacity-10 w-svw inset-0 h-svh",onClick:x[0]||(x[0]=E=>y.value=!1)})):e.createCommentVNode("",!0),e.createElementVNode("div",de,[e.createVNode(j,{modelValue:e.unref(g),"onUpdate:modelValue":x[2]||(x[2]=E=>e.isRef(g)?g.value=E:null),ref_key:"textFieldRef",ref:d,placeholder:h.isArray(e.unref(p))&&e.unref(p).length?"":e.unref(_),onKeyup:e.withKeys(e.unref(i),["down"]),onClickInput:e.unref(K),onPressEsc:e.unref(C),onChange:x[3]||(x[3]=E=>console.log("change")),onFocusInput:e.unref(i)},e.createSlots({_:2},[h.hasIcons?{name:"append-inner",fn:e.withCtx(()=>[h.clearable&&e.unref(p)?(e.openBlock(),e.createBlock(O,{key:0,onClick:e.unref(f),size:"text-xl",color:"text-error",icon:"close",class:e.normalizeClass(["mr-1",h.isNotEmpty(e.unref(p))?"cursor-pointer":"cursor-default"]),disabled:!h.isNotEmpty(e.unref(p))},null,8,["onClick","class","disabled"])):e.createCommentVNode("",!0),e.createVNode(O,{color:"text-accent-button",size:"text-xl",class:"cursor-pointer",icon:e.unref(y)?"menuUp":"menuDown",onClick:x[1]||(x[1]=E=>y.value=!e.unref(y))},null,8,["icon"]),h.required?(e.openBlock(),e.createBlock(O,{key:1,color:"text-red-900",size:"text-lg",class:"mb-3",icon:"asterisk"})):e.createCommentVNode("",!0)]),key:"0"}:void 0]),1032,["modelValue","placeholder","onKeyup","onClickInput","onPressEsc","onFocusInput"]),e.withDirectives(e.createElementVNode("div",{class:"absolute h-fit left-0 w-full z-50 bg-surface rounded-b border border-field-border-focus ring-1 focus:ring-field-ring-focus","close-on-content-click":e.unref(k),"max-height":h.maxHeight},[e.createVNode(T,{items:l.value,search:e.unref(g),searchBy:"name",maxHeight:250},e.createSlots({default:e.withCtx(({item:E,itemKey:o})=>[e.createVNode(z,{item:E,itemKey:o,title:"name",cursor:"cursor-pointer",onSelect:B},null,8,["item","itemKey"])]),_:2},[h.hasCreateItem?{name:"topButton",fn:e.withCtx(()=>[e.createElementVNode("div",me,[e.createVNode(A,{onClick:e.unref(s),class:"w-full rounded-md bg-accent-button",size:"xs"},{default:e.withCtx(()=>x[4]||(x[4]=[e.createTextVNode("Crear item")])),_:1},8,["onClick"])])]),key:"0"}:void 0]),1032,["items","search"])],8,fe),[[e.vShow,e.unref(y)]])])],64)}}},[["__scopeId","data-v-c3a2b846"]]),pe=["disabled"],ye="px-1 py-1 text-xs",ge="px-2 py-2 text-xs",he="px-1 py-1 text-sm",xe="px-2 py-2 text-sm",Se="px-3 py-3 text-sm",be="px-3 py-3 text-base",ke="px-4 py-4 text-base",R={__name:"KunBtn",props:{size:{type:String,default:"md"},width:{type:String,default:"w-24"},textColor:{type:String,default:"text-white"},text:{type:String,default:null},fontWeight:{type:String,default:"font-medium"},bgColor:{type:String,default:"bg-button"},bgColorHover:{type:String,default:"hover:opacity-90"},bgColorFocus:{type:String,default:"focus:opacity-100"},focusRing:{type:String,default:"focus:ring-1"},focusOutline:{type:String,default:"focus:outline-none"},focusRingColor:{type:String,default:"focus:ring-blue-300"},rounded:{type:String,default:"rounded-lg"},textAlign:{type:String,default:"text-center"},disabled:{type:Boolean,default:!1}},setup(t){const c=n=>{switch(n){case"xxs":return ye;case"xs":return ge;case"sm":return he;case"md":return xe;case"lg":return Se;case"xl":return be;case"xxl":return ke}};return(n,a)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(["flex justify-center align-center items-center",[t.width,c(t.size),t.textColor,t.fontWeight,t.bgColor,t.bgColorHover,t.bgColorFocus,t.focusRing,t.focusOutline,t.focusRingColor,t.rounded,t.textAlign,t.disabled?"opacity-50 cursor-not-allowed":"hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2"]]),disabled:t.disabled},[e.renderSlot(n.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])],10,pe))}},Ce={props:{text:{type:String,default:""},bgColor:{type:String,default:"bg-button"},textColor:{type:String,default:"text-on-color"},textSize:{type:String,default:"text-xs"},fontWeight:{type:String,default:"font-medium"},rounded:{type:String,default:"rounded-2xl"},cursor:{type:String,default:"cursor-default"}}};function Be(t,c,n,a,l,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex px-2.5 py-1.5",[n.bgColor,n.textColor,n.textSize,n.fontWeight,n.rounded,n.cursor]])},e.toDisplayString(n.text),3)}const L=$(Ce,[["render",Be]]),Ke={props:{title:{type:String},subtitle:{type:String},text:{type:String},bgColor:{type:String,default:"bg-surface"},rounded:{type:[String|Number|Boolean],default:void 0},variant:{type:String,default:"elevated"},height:{type:[Number,String],default:"h-full"},width:{type:[Number,String],default:"w-full"},to:{type:String,default:void 0}}},Ee=["to"];function Ne(t,c,n,a,l,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col",[n.rounded,n.variant,n.height,n.width,n.bgColor]]),to:n.to},[e.renderSlot(t.$slots,"default")],10,Ee)}const P=$(Ke,[["render",Ne]]),_e={props:{title:{type:String},subtitle:{type:String},text:{type:String},bgColor:{type:String,default:"bg-appbar"},variant:{type:String,default:"elevated"},height:{type:[Number,String],default:"h-fit"},width:{type:[Number,String],default:"w-full"},classBase:{type:String,default:"text-center rounded-t-lg"}}},we={key:0,class:"flex flex-row uppercase w-full py-2"},Ve={class:"w-full"},$e={key:1},Ie={key:2};function Oe(t,c,n,a,l,u){return e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("div",{class:e.normalizeClass([n.classBase,n.variant,n.height,n.width,n.bgColor])},[n.title?(e.openBlock(),e.createElementBlock("div",we,[e.renderSlot(t.$slots,"prepend-title"),e.createElementVNode("span",Ve,e.toDisplayString(n.title),1),e.renderSlot(t.$slots,"append-title")])):e.createCommentVNode("",!0),n.subtitle?(e.openBlock(),e.createElementBlock("span",$e,e.toDisplayString(n.subtitle),1)):e.createCommentVNode("",!0),n.text?(e.openBlock(),e.createElementBlock("span",Ie,e.toDisplayString(n.text),1)):e.createCommentVNode("",!0)],2)])}const q=$(_e,[["render",Oe]]),Te={class:"flex flex-row items-center",style:{padding:"2px 2px","max-width":"200px"}},je={key:0,class:"mr-1"},Ae=["placeholder","value"],ze={key:1},W={__name:"KunCurrency",props:{currency:{type:Object,default:()=>({name:"Peso Argentino",name:"ARS",simbol:"$"})},hideCurrency:{type:Boolean,default:!1},locale:{type:String,default:"ar-ES"},precision:{type:Number,default:2},modelValue:{default:null},placeholder:{type:String,default:"0.00"},prefix:{type:String,default:"$"},suffix:{type:String,default:""}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t,a=c;function l(s){u.value=s,a("update:modelValue",s)}const u=ref(n.modelValue);let p=null,d=null;onMounted(()=>{p=document.getElementById("hide"),d=document.getElementById("txt"),d.addEventListener("input",y),y()});function y(){p.textContent=d.value,d.style.width=6+p.offsetWidth+"px"}const g=s=>{const f=s.target.querySelector("input");f&&f.focus()},k=ref(null),N=s=>{const f=s.target,B=f.value;f.value=B.replace(/\D/g,""),l(f.value)};let _=n.placeholder;const K=()=>{i("")},C=()=>{i(n.placeholder)},i=s=>{document.getElementById("txt").setAttribute("placeholder",s)};return(s,f)=>(e.openBlock(),e.createElementBlock("div",{class:"w-full h-full flex justify-center",style:{cursor:"text"},onClick:f[1]||(f[1]=B=>g(B))},[e.createElementVNode("div",Te,[t.prefix?(e.openBlock(),e.createElementBlock("div",je,e.toDisplayString(t.prefix),1)):e.createCommentVNode("",!0),f[2]||(f[2]=e.createElementVNode("span",{id:"hide"},null,-1)),e.createElementVNode("input",{id:"txt",ref_key:"inputField",ref:k,type:"number",class:"text-field-style",onFocus:K,onBlur:C,placeholder:e.unref(_),onInput:f[0]||(f[0]=B=>N(B)),value:e.unref(u),autocomplete:"off"},null,40,Ae),t.suffix?(e.openBlock(),e.createElementBlock("div",ze,e.toDisplayString(t.suffix),1)):e.createCommentVNode("",!0)])]))}},H={__name:"KunIcon",props:{icon:{type:[String,Object,Function],required:!0},aliases:{type:Object,default:()=>({})},size:{type:String,default:"text-xs"},color:{type:String,default:"text-font-color"},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:c}){const n=t,a=c;function l(d){n.disabled||a("click",d)}const u=e.computed(()=>{if(typeof n.icon=="string"&&n.icon.startsWith("$")){const d=n.icon.slice(1);return n.aliases[d]||""}return n.icon}),p=e.computed(()=>typeof u.value=="function"||typeof u.value=="object"&&u.value!==null);return(d,y)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass([t.color,t.size,t.disabled?"opacity-50 cursor-not-allowed":"cursor-pointer"]),onClick:l},[d.$slots.default?e.renderSlot(d.$slots,"default",{key:0}):p.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value),{key:1})):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(u.value)},null,2))],2))}},Fe={};function Me(t,c){return null}const U=$(Fe,[["render",Me]]),De={props:{height:{type:[Number,String],default:"100%"},width:{type:[Number,String],default:"100%"}}};function Re(t,c,n,a,l,u){return e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({height:n.height,width:n.width})},null,4)}const Y=$(De,[["render",Re]]),Le={type:{type:String,default:"text"},locale:{type:String,default:"ar-ES"},precision:{type:Number,default:2},prefix:{type:String,default:""},suffix:{type:String,default:""},resize:{type:Boolean,default:!1},rounded:{type:String,default:"rounded"}},Pe={key:0},qe=["type","value","placeholder"],We={key:1},G={__name:"KunTextField",props:e.mergeModels(Le,{modelValue:{},modelModifiers:{},placeholder:{},placeholderModifiers:{}}),emits:e.mergeModels(["update:modelValue","focusInput","blurInput","pressEsc","clickInput"],["update:modelValue","update:placeholder"]),setup(t,{emit:c}){const n=c,a=e.useModel(t,"modelValue"),l=e.useModel(t,"placeholder"),u=ref(null);function p(i){a.value=i}const d=i=>{const s=i.target.querySelector("input");s&&s.focus()},y=i=>{const s=i.target;p(s.value)};watch(l,i=>{g=i});let g=l.value;const k=()=>{C("rounded-b-none"),g="",n("focusInput")},N=()=>{g=l.value,C("")},_=()=>{u.value,u.value&&u.value.blur(),n("pressEsc")},K=ref("");function C(i){K.value=i}return(i,s)=>(e.openBlock(),e.createElementBlock("div",{class:"w-full h-full flex justify-center my-2",style:{cursor:"text"},onClick:s[1]||(s[1]=f=>d(f))},[e.renderSlot(i.$slots,"prepend"),e.createElementVNode("div",{class:e.normalizeClass([e.unref(K),i.rounded,"w-full h-full text-field-style flex flex-row items-center"]),style:{padding:"0px 2px"}},[i.prefix?(e.openBlock(),e.createElementBlock("div",Pe,e.toDisplayString(i.prefix),1)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"prepend-inner"),e.renderSlot(i.$slots,"default",{},()=>[e.createElementVNode("input",{ref_key:"inputField",ref:u,type:i.type,value:a.value,autocomplete:"off",class:"h-full text-center w-full bg-transparent focus:border-none focus:outline-none input-opacity",style:{padding:"4px 0px"},placeholder:e.unref(g),onInput:s[0]||(s[0]=f=>y(f)),onKeydown:e.withKeys(_,["escape"]),onFocus:k,onBlur:N},null,40,qe)]),e.renderSlot(i.$slots,"append-inner"),i.suffix?(e.openBlock(),e.createElementBlock("div",We,e.toDisplayString(i.suffix),1)):e.createCommentVNode("",!0)],2),e.renderSlot(i.$slots,"append")]))}},He={class:"bg-appbar h-10 flex flex-row items-center py-2 px-2"},J={__name:"KunToolbar",props:{density:{type:String,default:""},title:{type:String,default:""}},setup(t){return(c,n)=>{const a=e.resolveComponent("KunToolbarTitle");return e.openBlock(),e.createElementBlock("div",He,[t.title?(e.openBlock(),e.createBlock(a,{key:0,title:t.title},null,8,["title"])):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default",{density:t.density})])}}},Q={KunAlert:F,KunAppbar:M,KunAutocomplete:D,KunBtn:R,KunBudge:L,KunCard:P,KunCardText:q,KunCurrency:W,KunIcon:H,KunList:U,KunSpacer:Y,KunTextField:G,KunToolbar:J};function Ue(t){for(const c in Q)t.component(c,Q[c])}m.KunAlert=F,m.KunAppbar=M,m.KunAutocomplete=D,m.KunBtn=R,m.KunBudge=L,m.KunCard=P,m.KunCardText=q,m.KunCurrency=W,m.KunIcon=H,m.KunList=U,m.KunSpacer=Y,m.KunTextField=G,m.KunToolbar=J,m.install=Ue,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/kun-ui.umd.js",