adverich-kun-ui 0.1.618 → 0.1.620

package/AGENTS.md

@@ -145,6 +145,7 @@ Selector con autocompletado y búsqueda.
 | itemSubtitle | String/Array | null | Campo(s) para subtítulo |
 | returnObject | Boolean | false | Retorna objeto completo |
 | multiple | Boolean | false | Selección múltiple |
+| disabled | Boolean | false | Deshabilita el campo y sus acciones |
 | clearable | Boolean | false | Botón de limpiar |
 | searchableKeys | Array | [] | Campos para búsqueda |
 | hasCreateItem | Boolean | false | Muestra botón de crear |

package/dist/AGENTS.md

@@ -145,6 +145,7 @@ Selector con autocompletado y búsqueda.
 | itemSubtitle | String/Array | null | Campo(s) para subtítulo |
 | returnObject | Boolean | false | Retorna objeto completo |
 | multiple | Boolean | false | Selección múltiple |
+| disabled | Boolean | false | Deshabilita el campo y sus acciones |
 | clearable | Boolean | false | Botón de limpiar |
 | searchableKeys | Array | [] | Campos para búsqueda |
 | hasCreateItem | Boolean | false | Muestra botón de crear |

package/dist/components/KunAutocomplete/src/components/KunAutocomplete.vue.js

@@ -1,246 +1,250 @@
-import { useModel as z, onMounted as se, ref as A, watch as ue, nextTick as E, openBlock as c, createElementBlock as h, createVNode as s, unref as t, withKeys as de, withModifiers as F, isRef as x, createSlots as ce, withCtx as r, normalizeClass as fe, createTextVNode as g, toDisplayString as D, createCommentVNode as C, createBlock as p, Fragment as me, renderList as pe, createElementVNode as ve, mergeModels as O } from "vue";
+import { useModel as E, onMounted as ue, ref as F, watch as O, nextTick as R, openBlock as c, createElementBlock as y, createVNode as s, unref as t, withKeys as de, withModifiers as V, isRef as x, createSlots as ce, withCtx as a, normalizeClass as fe, createTextVNode as h, toDisplayString as D, createCommentVNode as g, createBlock as p, Fragment as me, renderList as pe, createElementVNode as ve, mergeModels as B } from "vue";
 import { icons as v } from "../../../../icons/index.js";
-import { isNotEmpty as R, isArray as B } from "../../../../utils/utils.js";
-import ke from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
-import ye from "../../../KunList/src/components/KunList.vue.js";
-import N from "../../../KunListItem/src/components/KunListItem.vue.js";
-import T from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
-import he from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
-import ge from "../../../KunMenu/src/components/KunMenu.vue.js";
-import { useAutocomplete as Ce } from "../composables/useAutocomplete.js";
-import { KunAutocompleteProps as be } from "../composables/KunAutocompleteProps.js";
+import { isNotEmpty as N, isArray as T } from "../../../../utils/utils.js";
+import be from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
+import ke from "../../../KunList/src/components/KunList.vue.js";
+import U from "../../../KunListItem/src/components/KunListItem.vue.js";
+import j from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
+import ye from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
+import he from "../../../KunMenu/src/components/KunMenu.vue.js";
+import { useAutocomplete as ge } from "../composables/useAutocomplete.js";
+import { KunAutocompleteProps as Ce } from "../composables/KunAutocompleteProps.js";
 import we from "../../../KunTextField/src/components/KunTextField.vue.js";
 import Se from "../../../KunBtn/src/components/KunBtn.vue.js";
 import Ve from "../../../KunChip/src/components/KunChip.vue.js";
-import b from "../../../KunIcon/src/components/KunIcon.vue.js";
+import C from "../../../KunIcon/src/components/KunIcon.vue.js";
 const De = { class: "flex items-center" }, Ie = {
   key: 0,
   class: "sticky top-0 z-10 p-2 border-b bg-select-background"
 }, je = {
   __name: "KunAutocomplete",
-  props: /* @__PURE__ */ O(be, {
+  props: /* @__PURE__ */ B(Ce, {
     modelValue: { default: null },
     modelModifiers: {},
     items: { default: [], type: Array, required: !0 },
     itemsModifiers: {}
   }),
-  emits: /* @__PURE__ */ O(["update:modelValue", "selectedItem", "createItem", "validation", "search", "keyDown", "keyDownEnter", "notFound", "cleared"], ["update:modelValue", "update:items"]),
-  setup(w, { expose: U, emit: j }) {
-    const u = z(w, "modelValue"), m = z(w, "items"), a = w, f = j, {
-      textFieldRef: k,
+  emits: /* @__PURE__ */ B(["update:modelValue", "selectedItem", "createItem", "validation", "search", "keyDown", "keyDownEnter", "notFound", "cleared"], ["update:modelValue", "update:items"]),
+  setup(w, { expose: H, emit: q }) {
+    const u = E(w, "modelValue"), m = E(w, "items"), n = w, f = q, {
+      textFieldRef: b,
       listRef: I,
       menuModel: d,
-      search: n,
-      removeItem: H,
-      clearSelection: _,
-      lightReset: q,
+      search: r,
+      removeItem: _,
+      clearSelection: P,
+      lightReset: W,
       openMenu: S,
-      closeMenu: P,
-      toggleMenu: V,
-      onMenuKeydown: W,
-      getSelectedItem: K,
-      textArr: G,
-      getArrayText: J,
-      isAlphanumeric: Q,
-      createItem: X,
-      checkDisabled: Y,
-      itemToString: L,
-      placeholder: Z
-    } = Ce(a, f, u, m);
-    se(() => {
-      a.focusOnRender && k.value.focus();
+      closeMenu: K,
+      toggleMenu: L,
+      onMenuKeydown: G,
+      getSelectedItem: M,
+      textArr: J,
+      getArrayText: Q,
+      isAlphanumeric: X,
+      createItem: Y,
+      checkDisabled: Z,
+      itemToString: $,
+      placeholder: ee
+    } = ge(n, f, u, m);
+    ue(() => {
+      n.focusOnRender && b.value.focus();
     });
-    const M = A(null), y = A(""), $ = (e) => {
-      for (const o of a.rules) {
+    const z = F(null), k = F(""), A = (e) => {
+      for (const o of n.rules) {
         const l = o(e);
         if (l !== !0)
-          return y.value = l, f("validation", !1), !1;
+          return k.value = l, f("validation", !1), !1;
       }
-      return y.value = "", f("validation", !0), !0;
+      return k.value = "", f("validation", !0), !0;
     };
-    ue(() => u.value, (e, o) => {
-      R(a.rules) && $(e);
+    O(() => u.value, (e, o) => {
+      N(n.rules) && A(e);
+    }), O(() => n.disabled, (e) => {
+      e && K();
     });
-    function ee() {
+    function le() {
       var e;
-      d.value = !1, (e = k.value.inputField) == null || e.focus();
+      d.value = !1, (e = b.value.inputField) == null || e.focus();
     }
-    function le(e) {
+    function te(e) {
       var l, i;
+      if (n.disabled) return;
       const o = e.key;
       if (o === "Tab" || o === "Shift" || o === "Escape") {
-        P(), f("keyDown", o);
+        K(), f("keyDown", o);
         return;
       }
-      (Q(o) || o === "Backspace") && S(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), d.value || S(), (i = (l = I.value) == null ? void 0 : l.focusWithKey) == null || i.call(l, o));
+      (X(o) || o === "Backspace") && S(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), d.value || S(), (i = (l = I.value) == null ? void 0 : l.focusWithKey) == null || i.call(l, o));
     }
-    function te(e) {
-      f("search", n);
+    function oe(e) {
+      f("search", r);
     }
-    function oe() {
-      $(u);
+    function ne() {
+      n.disabled || A(u);
     }
-    function ne(e) {
-      W(e);
+    function re(e) {
+      G(e);
     }
-    function re() {
+    function ae() {
     }
-    function ae(e) {
-      if (!n.value) return;
+    function ie(e) {
+      if (n.disabled || !r.value) return;
       let o = null;
-      a.returnObject ? o = m.value.find(
+      n.returnObject ? o = m.value.find(
         (l) => Object.values(l).some(
-          (i) => String(i).toLowerCase() === String(n.value).toLowerCase()
+          (i) => String(i).toLowerCase() === String(r.value).toLowerCase()
         )
-      ) : a.itemValue ? o = m.value.find(
-        (l) => String(l[a.itemValue]).toLowerCase() === String(n.value).toLowerCase()
+      ) : n.itemValue ? o = m.value.find(
+        (l) => String(l[n.itemValue]).toLowerCase() === String(r.value).toLowerCase()
       ) : o = m.value.find(
-        (l) => typeof l == "object" ? Object.values(l).some((i) => String(i).toLowerCase() === String(n.value).toLowerCase()) : String(l).toLowerCase() === String(n.value).toLowerCase()
-      ), o ? K(o) : (f("notFound", n.value), a.clearOnNotFound && (n.value = "", d.value = !1)), E(() => {
+        (l) => typeof l == "object" ? Object.values(l).some((i) => String(i).toLowerCase() === String(r.value).toLowerCase()) : String(l).toLowerCase() === String(r.value).toLowerCase()
+      ), o ? M(o) : (f("notFound", r.value), n.clearOnNotFound && (r.value = "", d.value = !1)), R(() => {
         f("keyDownEnter", e);
       });
     }
-    return U({
-      focus: () => E(() => {
+    return H({
+      focus: () => !n.disabled && R(() => {
         var e;
-        return (e = k.value) == null ? void 0 : e.focus();
+        return (e = b.value) == null ? void 0 : e.focus();
       })
-    }), (e, o) => (c(), h("div", {
+    }), (e, o) => (c(), y("div", {
       class: "w-full h-fit",
       ref_key: "parentRef",
-      ref: M
+      ref: z
     }, [
       s(we, {
-        modelValue: t(n),
+        modelValue: t(r),
         "onUpdate:modelValue": [
-          o[2] || (o[2] = (l) => x(n) ? n.value = l : null),
-          te
+          o[2] || (o[2] = (l) => x(r) ? r.value = l : null),
+          oe
         ],
         label: e.label,
+        disabled: e.disabled,
         dirty: "",
         "hide-details": e.hideDetails,
         density: e.density,
         ref_key: "textFieldRef",
-        ref: k,
+        ref: b,
         autocomplete: "off",
-        onFocusInput: oe,
-        onHandleClick: t(V),
+        onFocusInput: ne,
+        onHandleClick: t(L),
         rounded: t(d) ? "rounded-t" : "rounded",
-        onBlur: re,
+        onBlur: ae,
         onKeyDown: [
-          le,
-          de(F(ae, ["prevent"]), ["enter"])
+          te,
+          de(V(ie, ["prevent"]), ["enter"])
         ],
-        placeholder: a.multiple && t(B)(u.value) && u.value.length ? "" : t(Z),
-        error: !!y.value,
-        "error-messages": y.value
+        placeholder: n.multiple && t(T)(u.value) && u.value.length ? "" : t(ee),
+        error: !!k.value,
+        "error-messages": k.value
       }, ce({
-        "prepend-input-content": r(() => [
-          t(B)(u.value) && t(R)(u.value) ? (c(), h("div", {
+        "prepend-input-content": a(() => [
+          t(T)(u.value) && t(N)(u.value) ? (c(), y("div", {
             key: 0,
             class: "flex flex-nowrap items-center space-x-1 min-w-[calc(100%-56px)] overflow-x-auto overflow-y-hidden",
-            onClick: o[0] || (o[0] = (...l) => t(V) && t(V)(...l))
+            onClick: o[0] || (o[0] = (l) => !e.disabled && t(L)())
           }, [
-            (c(!0), h(me, null, pe(u.value, (l) => (c(), p(Ve, {
+            (c(!0), y(me, null, pe(u.value, (l) => (c(), p(Ve, {
               key: l.id ?? l.name,
               size: "small",
               variant: "pill"
             }, {
-              default: r(() => [
+              default: a(() => [
                 ve("div", De, [
-                  g(D(t(J)(l)) + " ", 1),
-                  s(b, {
+                  h(D(t(Q)(l)) + " ", 1),
+                  s(C, {
                     color: "error",
                     icon: t(v).close,
                     size: "small",
                     class: "ml-1",
-                    onClick: (i) => t(H)(l)
+                    onClick: V((i) => t(_)(l), ["stop"])
                   }, null, 8, ["icon", "onClick"])
                 ])
               ]),
               _: 2
             }, 1024))), 128))
-          ])) : C("", !0)
+          ])) : g("", !0)
         ]),
-        default: r(() => [
-          s(ge, {
+        default: a(() => [
+          s(he, {
             transition: "fade",
-            "onClick:outside": t(q),
+            "onClick:outside": t(W),
             modelValue: t(d),
             "onUpdate:modelValue": o[1] || (o[1] = (l) => x(d) ? d.value = l : null),
             activator: "parent",
             "z-index": e.zIndex,
-            "parent-ref": M.value,
+            "parent-ref": z.value,
             origin: e.menuOrigin,
-            onHandleEscape: ee,
+            onHandleEscape: le,
             bgColor: e.bgMenuColor,
             "close-on-content-click": e.closeOnSelect,
             width: "w-full",
             "max-height": e.maxHeight,
             "hide-details": e.hideDetails
           }, {
-            default: r(() => [
-              e.hasCreateItem ? (c(), h("div", Ie, [
+            default: a(() => [
+              e.hasCreateItem ? (c(), y("div", Ie, [
                 s(Se, {
-                  onClick: t(X),
+                  onClick: t(Y),
                   bgColor: e.btnCreateBg,
                   class: fe(e.btnCreateClass)
                 }, {
-                  default: r(() => [
-                    g(D(e.btnCreateText), 1)
+                  default: a(() => [
+                    h(D(e.btnCreateText), 1)
                   ]),
                   _: 1
                 }, 8, ["onClick", "bgColor", "class"])
-              ])) : C("", !0),
-              s(ye, {
-                "onClick:select": t(K),
+              ])) : g("", !0),
+              s(ke, {
+                "onClick:select": t(M),
                 ref_key: "listRef",
                 ref: I,
-                onKeyDown: ne,
+                onKeyDown: re,
                 selectable: !0
               }, {
-                default: r(() => [
-                  s(ke, {
+                default: a(() => [
+                  s(be, {
                     items: m.value,
-                    search: t(n),
-                    "searchable-keys": a.searchableKeys,
+                    search: t(r),
+                    "searchable-keys": n.searchableKeys,
                     virtual: !1,
                     "items-per-intersection": 10,
                     enabled: t(d),
                     "item-height": 48
                   }, {
-                    default: r(({ item: l, index: i, empty: ie }) => [
-                      !ie && l != null ? (c(), p(N, {
+                    default: a(({ item: l, index: i, empty: se }) => [
+                      !se && l != null ? (c(), p(U, {
                         value: l,
                         key: `kun-list-${i + 1}`,
                         id: `kun-item-${i + 1}`,
-                        disabled: t(Y)(l),
+                        disabled: t(Z)(l),
                         "bg-items": e.bgItemListColor,
                         "hover-bg": e.hoverItemListColor,
                         activeClass: e.selectedItemListColor,
                         density: e.density,
                         selectable: !0
                       }, {
-                        default: r(() => [
-                          s(T, { class: "text-wrap" }, {
-                            default: r(() => [
-                              g(D(t(L)(l, e.itemTitle ?? t(G), "hasDefault")), 1)
+                        default: a(() => [
+                          s(j, { class: "text-wrap" }, {
+                            default: a(() => [
+                              h(D(t($)(l, e.itemTitle ?? t(J), "hasDefault")), 1)
                             ]),
                             _: 2
                           }, 1024),
-                          s(he, {
-                            text: e.itemSubtitle ? t(L)(l, e.itemSubtitle) : ""
+                          s(ye, {
+                            text: e.itemSubtitle ? t($)(l, e.itemSubtitle) : ""
                           }, null, 8, ["text"])
                         ]),
                         _: 2
-                      }, 1032, ["value", "id", "disabled", "bg-items", "hover-bg", "activeClass", "density"])) : (c(), p(N, {
+                      }, 1032, ["value", "id", "disabled", "bg-items", "hover-bg", "activeClass", "density"])) : (c(), p(U, {
                         key: 1,
                         disabled: ""
                       }, {
-                        default: r(() => [
-                          s(T, { class: "text-center w-full text-gray-500" }, {
-                            default: r(() => [...o[3] || (o[3] = [
-                              g(" No hay elementos disponibles ", -1)
+                        default: a(() => [
+                          s(j, { class: "text-center w-full text-gray-500" }, {
+                            default: a(() => [...o[3] || (o[3] = [
+                              h(" No hay elementos disponibles ", -1)
                             ])]),
                             _: 1
                           })
@@ -261,33 +265,33 @@ const De = { class: "flex items-center" }, Ie = {
       }, [
         e.hasIcons ? {
           name: "append-inner",
-          fn: r(() => [
-            e.clearable && u.value ? (c(), p(b, {
+          fn: a(() => [
+            e.clearable && u.value ? (c(), p(C, {
               key: 0,
-              onClick: t(_),
+              onClick: t(P),
               size: "small",
               color: "error",
               icon: t(v).close,
               class: "mr-1 mt-1"
-            }, null, 8, ["onClick", "icon"])) : C("", !0),
-            s(b, {
+            }, null, 8, ["onClick", "icon"])) : g("", !0),
+            s(C, {
               color: "teal-darken-1",
               size: "large",
               class: "cursor-pointer",
               icon: t(d) ? t(v).menuUpOutline : t(v).menuDownOutline,
-              onClick: F(t(S), ["stop"])
+              onClick: V(t(S), ["stop"])
             }, null, 8, ["icon", "onClick"]),
-            e.required ? (c(), p(b, {
+            e.required ? (c(), p(C, {
               key: 1,
               color: "teal-darken-1",
               size: "x-small",
               class: "mb-4",
               icon: t(v).asterisk
-            }, null, 8, ["icon"])) : C("", !0)
+            }, null, 8, ["icon"])) : g("", !0)
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["modelValue", "label", "hide-details", "density", "onHandleClick", "rounded", "onKeyDown", "placeholder", "error", "error-messages"])
+      ]), 1032, ["modelValue", "label", "disabled", "hide-details", "density", "onHandleClick", "rounded", "onKeyDown", "placeholder", "error", "error-messages"])
     ], 512));
   }
 };

package/dist/components/KunAutocomplete/src/composables/KunAutocompleteProps.js

@@ -61,6 +61,10 @@ const e = {
     type: Boolean,
     default: !1
   },
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
   // ***** STYLE ***** //
   height: { default: "h-[500px]" },
   maxHeight: { default: void 0 },

package/dist/components/KunAutocomplete/src/composables/useAutocomplete.js

@@ -1,24 +1,24 @@
-import { ref as d, computed as F, watch as P, nextTick as N } from "vue";
+import { ref as d, computed as N, watch as P, nextTick as R } from "vue";
 import { isArray as S, isObject as v, fullCopy as T } from "../../../../utils/utils.js";
-function W(t, y, c, g) {
-  const l = d(null), h = d(null), I = d(null), f = d(!1), b = d(""), R = (e, n) => {
-    if (t.returnObject) return s(e, t.itemTitle);
-    const u = l.value.find((i) => i[t.itemValue] === e);
-    return s(u, t.itemTitle);
-  }, B = F(() => l.value !== null && l.value !== void 0 ? S(l.value) ? l.value.length ? s(l.value, t.itemTitle, "hasDefault") : t.placeholderText : v(l.value) ? s(l.value, t.itemTitle, "hasDefault") : l.value.toString() : g.value.length ? t.placeholderText : t.textNoItems), C = F(() => {
+function W(t, b, i, y) {
+  const l = d(null), g = d(null), I = d(null), f = d(!1), h = d(""), B = (e, n) => {
+    if (t.returnObject) return o(e, t.itemTitle);
+    const u = l.value.find((c) => c[t.itemValue] === e);
+    return o(u, t.itemTitle);
+  }, C = N(() => l.value !== null && l.value !== void 0 ? S(l.value) ? l.value.length ? o(l.value, t.itemTitle, "hasDefault") : t.placeholderText : v(l.value) ? o(l.value, t.itemTitle, "hasDefault") : l.value.toString() : y.value.length ? t.placeholderText : t.textNoItems), D = N(() => {
     const e = t.itemText;
     return typeof e == "string" && e.includes(",") ? e.split(",") : e;
   });
-  function s(e, n, u) {
-    var i;
+  function o(e, n, u) {
+    var c;
     if (v(e)) {
       if (n) {
         if (S(n))
           return n.map((r) => {
             if (r.includes(".")) {
-              const o = r.split(".");
+              const s = r.split(".");
               let a = e;
-              for (const j of o)
+              for (const j of s)
                 a = a != null ? a[j] : "";
               return a ?? "No definido";
             }
@@ -28,56 +28,57 @@ function W(t, y, c, g) {
           return n.split(",").map((r) => e[r]).join(" - ");
         if (n.includes(".")) {
           const r = n.split(".");
-          let o = e;
+          let s = e;
           for (const a of r)
-            o = o != null ? o[a] : "";
-          return o;
+            s = s != null ? s[a] : "";
+          return s;
         }
         return !t.returnObject && typeof e[n] == "number" || e[n] !== void 0 && e[n] !== null ? e[n].toString() : "";
       }
       if (u)
         return Object.values(e)[0];
     }
-    return S(e) ? t.returnObject ? e.map((r) => r[n]).join(" - ") : e.map((r) => r).join(" - ") : u && typeof e != "number" ? e.includes(",") ? e.split(",") : e : ((i = e == null ? void 0 : e.toString) == null ? void 0 : i.call(e)) ?? "";
-  }
-  function D(e) {
-    try {
-      let n = null;
-      if (l.value = T(e), !t.multiple)
-        t.returnObject ? n = T(e) : v(e) ? t.itemValue ? n = e[t.itemValue] : n = Object.values(e)[0] : n = e, f.value = !1, x();
-      else if (k(e)) {
-        e && A(e);
-        return;
-      } else {
-        const u = t.returnObject ? T(e) : v(e) ? t.itemValue ? e[t.itemValue] : Object.values(e)[0] : e;
-        n = [...c.value || [], u];
+    return S(e) ? t.returnObject ? e.map((r) => r[n]).join(" - ") : e.map((r) => r).join(" - ") : u && typeof e != "number" ? e.includes(",") ? e.split(",") : e : ((c = e == null ? void 0 : e.toString) == null ? void 0 : c.call(e)) ?? "";
+  }
+  function J(e) {
+    if (!(t.disabled || F(e)))
+      try {
+        let n = null;
+        if (l.value = T(e), !t.multiple)
+          t.returnObject ? n = T(e) : v(e) ? t.itemValue ? n = e[t.itemValue] : n = Object.values(e)[0] : n = e, f.value = !1, x();
+        else if (k(e)) {
+          e && A(e);
+          return;
+        } else {
+          const u = t.returnObject ? T(e) : v(e) ? t.itemValue ? e[t.itemValue] : Object.values(e)[0] : e;
+          n = [...i.value || [], u];
+        }
+        i.value === n ? b("update:modelValue", n) : i.value = n, b("selectedItem", l.value);
+      } catch (n) {
+        console.log(n);
+      } finally {
+        R(() => {
+          K();
+        });
       }
-      c.value === n ? y("update:modelValue", n) : c.value = n, y("selectedItem", l.value);
-    } catch (n) {
-      console.log(n);
-    } finally {
-      N(() => {
-        K();
-      });
-    }
   }
   P(
-    [() => c.value, () => g.value],
+    [() => i.value, () => y.value],
     ([e]) => {
-      const n = J(e);
+      const n = V(e);
       JSON.stringify(l.value) !== JSON.stringify(n) && (l.value = n);
     },
     { immediate: !0 }
   );
-  function J(e) {
-    return e == null ? null : t.multiple && Array.isArray(e) ? t.returnObject ? e : e.map((u) => g.value.find((i) => i[t.itemValue] === u)).filter(Boolean) : t.returnObject ? e : g.value.find(
+  function V(e) {
+    return e == null ? null : t.multiple && Array.isArray(e) ? t.returnObject ? e : e.map((u) => y.value.find((c) => c[t.itemValue] === u)).filter(Boolean) : t.returnObject ? e : y.value.find(
       (u) => typeof u == "object" ? u[t.itemValue] === e : u === e
     ) ?? e;
   }
   function k(e) {
-    if (!c.value || !e) return !1;
+    if (!i.value || !e) return !1;
     const n = O(e);
-    return c.value.some((u) => O(u) === n);
+    return i.value.some((u) => O(u) === n);
   }
   function O(e) {
     if (!v(e))
@@ -90,78 +91,80 @@ function W(t, y, c, g) {
     return n.length > 0 ? n[0] : e;
   }
   function A(e) {
-    if (!c.value) return;
+    if (!i.value) return;
     const n = O(e);
-    c.value = c.value.filter((u) => O(u) !== n);
+    i.value = i.value.filter((u) => O(u) !== n);
   }
   function K(e) {
-    t.clearSearchOnSelect && (b.value = ""), t.clearOnSelect && M(), t.focusOnSelect && x();
+    t.clearSearchOnSelect && (h.value = ""), t.clearOnSelect && M(), t.focusOnSelect && x();
   }
   function w() {
-    f.value || (f.value = !0);
+    t.disabled || f.value || (f.value = !0);
   }
-  function V() {
+  function $() {
     f.value && (f.value = !1);
   }
-  function $() {
-    f.value = !f.value;
+  function q() {
+    t.disabled || (f.value = !f.value);
   }
   function E(e) {
     return e.length === 1 && e.match(/\w/);
   }
   function x() {
-    h.value.inputField.focus();
+    g.value.inputField.focus();
   }
-  function q() {
-    f.value = !0, I.value && h.value.$el.focus();
+  function z() {
+    f.value = !0, I.value && g.value.$el.focus();
   }
-  function z(e) {
+  function G(e) {
+    if (t.disabled) return;
     const n = e.key;
-    (E(n) || n === "Backspace") && (w(), x(), N(() => {
-      var i;
-      const u = (i = h.value) == null ? void 0 : i.inputField;
+    (E(n) || n === "Backspace") && (w(), x(), R(() => {
+      var c;
+      const u = (c = g.value) == null ? void 0 : c.inputField;
       if (u) {
-        const r = u.selectionStart, o = u.selectionEnd, a = u.value, j = e.key.length === 1 ? e.key : "";
-        u.value = a.slice(0, r) + j + a.slice(o), u.selectionStart = u.selectionEnd = r + j.length, u.dispatchEvent(new Event("input", { bubbles: !0 }));
+        const r = u.selectionStart, s = u.selectionEnd, a = u.value, j = e.key.length === 1 ? e.key : "";
+        u.value = a.slice(0, r) + j + a.slice(s), u.selectionStart = u.selectionEnd = r + j.length, u.dispatchEvent(new Event("input", { bubbles: !0 }));
       }
     }));
   }
-  function G() {
-    f.value = !1, y("createItem");
+  function H() {
+    t.disabled || (f.value = !1, b("createItem"));
   }
-  function H(e) {
-    let n = c.value.indexOf(e);
-    c.value.splice(n, 1);
+  function L(e) {
+    if (t.disabled) return;
+    let n = i.value.indexOf(e);
+    i.value.splice(n, 1);
   }
   function M() {
-    b.value !== "" && (b.value = ""), c.value !== null && (c.value = null), l.value !== null && (l.value = null), y("cleared");
+    t.disabled || (h.value !== "" && (h.value = ""), i.value !== null && (i.value = null), l.value !== null && (l.value = null), b("cleared"));
   }
-  function L(e) {
+  function F(e) {
     return !!e.disabled;
   }
   return {
     selectedItem: l,
-    textFieldRef: h,
+    textFieldRef: g,
     listRef: I,
     menuModel: f,
-    search: b,
-    getArrayText: R,
-    placeholder: B,
-    textArr: C,
-    itemToString: s,
-    getSelectedItem: D,
+    search: h,
+    getArrayText: B,
+    placeholder: C,
+    textArr: D,
+    itemToString: o,
+    getSelectedItem: J,
     checkIfValueExist: k,
     removeFromArray: A,
     lightReset: K,
     openMenu: w,
-    closeMenu: V,
-    toggleMenu: $,
-    focusOnMenu: q,
-    onMenuKeydown: z,
-    createItem: G,
-    removeItem: H,
+    closeMenu: $,
+    toggleMenu: q,
+    focusOnMenu: z,
+    onMenuKeydown: G,
+    createItem: H,
+    removeItem: L,
     clearSelection: M,
-    checkDisabled: L,
+    checkDisabled: F,
     isAlphanumeric: E
   };
 }

package/dist/components/KunTooltip/src/components/KunTooltip.vue.js

@@ -1,85 +1,78 @@
-import { ref as m, computed as T, onMounted as N, onBeforeUnmount as P, openBlock as $, createElementBlock as _, Fragment as D, createElementVNode as E, mergeProps as F, renderSlot as S, createBlock as I, Teleport as K, createVNode as U, Transition as X, withCtx as Y, withDirectives as j, normalizeStyle as q, normalizeClass as A, createTextVNode as G, toDisplayString as H, vShow as J, createCommentVNode as Q, nextTick as W } from "vue";
-import { kunTooltipProps as Z } from "../composables/kunTooltipProps.js";
-const ee = "absolute px-3 py-2 shadow", ne = {
+import { ref as c, computed as m, onBeforeUnmount as x, openBlock as d, createElementBlock as V, Fragment as B, createElementVNode as T, mergeProps as M, renderSlot as v, createBlock as P, Teleport as z, createVNode as N, Transition as R, withCtx as _, withDirectives as D, normalizeStyle as E, unref as O, normalizeClass as F, createTextVNode as $, toDisplayString as I, vShow as K, createCommentVNode as L, nextTick as U } from "vue";
+import { kunTooltipProps as j } from "../composables/kunTooltipProps.js";
+import { useTooltipPosition as q } from "../composables/useTooltipPosition.js";
+const A = "fixed px-3 py-2 shadow", W = {
   __name: "KunTooltip",
-  props: Z,
-  setup(z) {
-    const t = z, B = "tooltip-" + Math.random().toString(36).slice(2, 11), o = m(!1), v = m(null), w = m(null), g = m({});
-    let a = null, l = null, i = null, r = !1;
-    function h() {
-      t.disabled || o.value || r || (clearTimeout(a), clearTimeout(l), clearTimeout(i), r = !0, a = setTimeout(async () => {
-        r = !1, v.value && (o.value = !0, await W(), x(), i = setTimeout(() => {
-          s();
+  props: j,
+  setup(y) {
+    const e = y, h = "tooltip-" + Math.random().toString(36).slice(2, 11), t = c(!1), s = c(null), f = c(null), { tooltipStyle: k, updatePosition: g } = q(
+      s,
+      f,
+      t,
+      () => ({
+        location: e.location,
+        flip: e.flip,
+        dist: e.dist
+      })
+    );
+    let a = null, l = null, i = null, n = !1;
+    function u() {
+      e.disabled || t.value || n || (clearTimeout(a), clearTimeout(l), clearTimeout(i), n = !0, a = setTimeout(async () => {
+        n = !1, s.value && (t.value = !0, await U(), g(), i = setTimeout(() => {
+          r();
         }, 5e3));
-      }, +t.delay));
+      }, +e.delay));
     }
-    function s() {
-      clearTimeout(a), clearTimeout(l), clearTimeout(i), !(!o.value && !r) && (l = setTimeout(() => {
-        o.value = !1, r = !1;
-      }, +t.closeDelay));
+    function r() {
+      clearTimeout(a), clearTimeout(l), clearTimeout(i), !(!t.value && !n) && (l = setTimeout(() => {
+        t.value = !1, n = !1;
+      }, +e.closeDelay));
     }
-    function L() {
-      o.value ? s() : h();
+    function b() {
+      t.value ? r() : u();
     }
-    function R() {
+    function C() {
       clearTimeout(l), clearTimeout(i);
     }
-    function M() {
-      s();
+    function S() {
+      r();
     }
-    const y = T(() => {
-      if (t.disabled) return {};
-      const e = {};
-      return t.openOn === "hover" && (e.onMouseenter = h, e.onMouseleave = s), t.openOn === "click" && (e.onClick = L), t.openOn === "focus" && (e.onFocus = h, e.onBlur = s), e;
-    }), O = T(() => [ee, t.textColor, t.bgColor, t.textSize, t.rounded, t.class]), V = T(() => typeof t.dist == "number" ? { x: 0, y: t.dist } : { x: t.dist.x ?? 0, y: t.dist.y ?? 0 });
-    function x() {
-      var k, C;
-      const e = (k = v.value) == null ? void 0 : k.getBoundingClientRect(), n = (C = w.value) == null ? void 0 : C.getBoundingClientRect();
-      if (!e || !n) return;
-      const c = window.pageYOffset || document.documentElement.scrollTop, p = window.pageXOffset || document.documentElement.scrollLeft, { x: d, y: f } = V.value, b = {
-        top: { top: `${e.top + c - n.height - f}px`, left: `${e.left + p + e.width / 2 - n.width / 2 + d}px` },
-        bottom: { top: `${e.bottom + c + f}px`, left: `${e.left + p + e.width / 2 - n.width / 2 + d}px` },
-        left: { top: `${e.top + c + e.height / 2 - n.height / 2 + f}px`, left: `${e.left + p - n.width - d}px` },
-        right: { top: `${e.top + c + e.height / 2 - n.height / 2 + f}px`, left: `${e.right + p + d}px` }
-      };
-      g.value = b[t.location] || b.top;
-    }
-    const u = () => {
-      o.value && x();
-    };
-    return N(() => {
-      window.addEventListener("scroll", u), window.addEventListener("resize", u);
-    }), P(() => {
-      clearTimeout(a), clearTimeout(l), clearTimeout(i), o.value = !1, window.removeEventListener("scroll", u), window.removeEventListener("resize", u);
-    }), (e, n) => ($(), _(D, null, [
-      E("span", F({
+    const p = m(() => {
+      if (e.disabled) return {};
+      const o = {};
+      return e.openOn === "hover" && (o.onMouseenter = u, o.onMouseleave = r), e.openOn === "click" && (o.onClick = b), e.openOn === "focus" && (o.onFocus = u, o.onBlur = r), o;
+    }), w = m(() => [A, e.textColor, e.bgColor, e.textSize, e.rounded, e.class]);
+    return x(() => {
+      clearTimeout(a), clearTimeout(l), clearTimeout(i), t.value = !1;
+    }), (o, G) => (d(), V(B, null, [
+      T("span", M({
         ref_key: "activatorRef",
-        ref: v
-      }, y.value), [
-        S(e.$slots, "activator", { props: y.value })
+        ref: s
+      }, p.value), [
+        v(o.$slots, "activator", { props: p.value })
       ], 16),
-      e.disabled ? Q("", !0) : ($(), I(K, {
+      o.disabled ? L("", !0) : (d(), P(z, {
         key: 0,
         to: "body"
       }, [
-        U(X, { name: e.transition }, {
-          default: Y(() => [
-            j(E("div", {
-              id: B,
+        N(R, { name: o.transition }, {
+          default: _(() => [
+            D(T("div", {
+              id: h,
               ref_key: "tooltipRef",
-              ref: w,
-              class: A(O.value),
-              style: q([g.value, { "z-index": "9999" }]),
+              ref: f,
+              class: F(w.value),
+              style: E([O(k), { "z-index": "9999" }]),
               role: "tooltip",
               "aria-hidden": "!isVisible",
-              onMouseenter: R,
-              onMouseleave: M
+              onMouseenter: C,
+              onMouseleave: S
             }, [
-              S(e.$slots, "default", {}, () => [
-                G(H(e.text), 1)
+              v(o.$slots, "default", {}, () => [
+                $(I(o.text), 1)
               ])
             ], 38), [
-              [J, o.value]
+              [K, t.value]
             ])
           ]),
           _: 3
@@ -89,5 +82,5 @@ const ee = "absolute px-3 py-2 shadow", ne = {
   }
 };
 export {
-  ne as default
+  W as default
 };

package/dist/components/KunTooltip/src/composables/kunTooltipProps.js

@@ -11,7 +11,8 @@ const t = {
   bgColor: { type: String, default: "bg-gray-600/75 dark:bg-gray-700/75" },
   rounded: { type: String, default: "rounded" },
   textSize: { type: String, default: "text-sm" },
-  dist: { type: [Number, Object], default: () => ({ x: 0, y: 8 }) }
+  dist: { type: [Number, Object], default: () => ({ x: 0, y: 8 }) },
+  flip: { type: Boolean, default: !0 }
 };
 export {
   t as kunTooltipProps

package/dist/components/KunTooltip/src/composables/useTooltipPosition.js

@@ -0,0 +1,102 @@
+import { ref as C, onMounted as T, onBeforeUnmount as z } from "vue";
+const s = 8;
+function H(n) {
+  const o = [];
+  let t = n == null ? void 0 : n.parentElement;
+  for (; t; ) {
+    const { overflowY: u, overflowX: i, overflow: e } = window.getComputedStyle(t);
+    (["auto", "scroll", "overlay"].includes(u) || ["auto", "scroll", "overlay"].includes(i) || ["auto", "scroll", "overlay"].includes(e)) && o.push(t), t = t.parentElement;
+  }
+  return o;
+}
+function O(n) {
+  return typeof n == "number" ? { x: 0, y: n } : { x: (n == null ? void 0 : n.x) ?? 0, y: (n == null ? void 0 : n.y) ?? 0 };
+}
+function y(n, o, t) {
+  return Math.min(Math.max(n, o), t);
+}
+function W(n, o, t, u, i) {
+  const { x: e, y: r } = i, g = window.innerWidth, h = window.innerHeight;
+  if (!o) return n;
+  if (n === "top") {
+    const l = t.top - r - s, f = h - t.bottom - r - s;
+    if (l < u.height && f > l) return "bottom";
+  } else if (n === "bottom") {
+    const l = h - t.bottom - r - s, f = t.top - r - s;
+    if (l < u.height && f > l) return "top";
+  } else if (n === "left") {
+    const l = t.left - e - s, f = g - t.right - e - s;
+    if (l < u.width && f > l) return "right";
+  } else if (n === "right") {
+    const l = g - t.right - e - s, f = t.left - e - s;
+    if (l < u.width && f > l) return "left";
+  }
+  return n;
+}
+function $(n, o, t, u) {
+  const { x: i, y: e } = u;
+  switch (n) {
+    case "bottom":
+      return {
+        top: o.bottom + e,
+        left: o.left + o.width / 2 - t.width / 2 + i
+      };
+    case "left":
+      return {
+        top: o.top + o.height / 2 - t.height / 2 + e,
+        left: o.left - t.width - i
+      };
+    case "right":
+      return {
+        top: o.top + o.height / 2 - t.height / 2 + e,
+        left: o.right + i
+      };
+    case "top":
+    default:
+      return {
+        top: o.top - t.height - e,
+        left: o.left + o.width / 2 - t.width / 2 + i
+      };
+  }
+}
+function F(n, o, t, u) {
+  const i = C({});
+  let e = [], r = null;
+  function g() {
+    const w = n.value, c = o.value;
+    if (!w || !c) return;
+    const a = w.getBoundingClientRect(), p = c.getBoundingClientRect(), { location: b, flip: L, dist: E } = u(), x = O(E), v = window.innerWidth, A = window.innerHeight, M = W(b, L, a, p, x);
+    let { top: d, left: m } = $(M, a, p, x);
+    const S = Math.max(s, v - p.width - s), B = Math.max(s, A - p.height - s);
+    m = y(m, s, S), d = y(d, s, B), i.value = {
+      position: "fixed",
+      top: `${d}px`,
+      left: `${m}px`,
+      maxWidth: `${v - s * 2}px`
+    };
+  }
+  function h() {
+    t.value && (r || (r = requestAnimationFrame(() => {
+      r = null, g();
+    })));
+  }
+  function l() {
+    f();
+    const w = n.value;
+    if (!w) return;
+    const c = { capture: !0, passive: !0 };
+    window.addEventListener("scroll", h, c), e.push({ target: window, event: "scroll", handler: h, options: c }), window.addEventListener("resize", h, c), e.push({ target: window, event: "resize", handler: h, options: c }), H(w).forEach((a) => {
+      const p = { passive: !0 };
+      a.addEventListener("scroll", h, p), e.push({ target: a, event: "scroll", handler: h, options: p });
+    });
+  }
+  function f() {
+    r && (cancelAnimationFrame(r), r = null), e.forEach(({ target: w, event: c, handler: a, options: p }) => {
+      w.removeEventListener(c, a, p);
+    }), e = [];
+  }
+  return T(() => l()), z(() => f()), { tooltipStyle: i, updatePosition: g, startScrollTracking: l };
+}
+export {
+  F as useTooltipPosition
+};

package/package.json

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