adverich-kun-ui 0.1.111 → 0.1.113

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

@@ -1,58 +1,60 @@
-import { mergeModels as $, useModel as A, onMounted as te, ref as oe, watch as ne, createBlock as d, openBlock as a, unref as l, withModifiers as F, isRef as R, createSlots as re, withCtx as i, createElementBlock as U, createCommentVNode as y, createVNode as s, Fragment as ie, renderList as ae, createElementVNode as se, createTextVNode as C, toDisplayString as b, normalizeClass as ue } from "vue";
+import { mergeModels as A, useModel as $, onMounted as oe, ref as ne, watch as ie, createBlock as d, openBlock as a, unref as l, isRef as B, createSlots as re, withCtx as r, createElementBlock as F, createCommentVNode as h, createVNode as s, Fragment as ae, renderList as se, createElementVNode as ue, createTextVNode as b, toDisplayString as V, normalizeClass as de, withModifiers as ce } from "vue";
 import { icons as m } from "../../../../icons/index.js";
-import { isNotEmpty as de, isArray as z } from "../../../../utils/utils.js";
-import ce from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
-import me from "../../../KunList/src/components/KunList.vue.js";
-import B from "../../../KunListItem/src/components/KunListItem.vue.js";
-import fe from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
-import pe from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
-import ve from "../../../kunMenu/src/components/kunMenu.vue.js";
-import { useAutocomplete as ke } from "../composables/useAutocomplete.js";
-import { KunAutocompleteProps as ye } from "../composables/KunAutocompleteProps.js";
-import he from "../../../KunTextField/src/components/KunTextField.vue.js";
-import ge from "../../../KunBtn/src/components/KunBtn.vue.js";
-import Ce from "../../../KunChip/src/components/KunChip.vue.js";
-import h from "../../../KunIcon/src/components/KunIcon.vue.js";
-const be = {
+import { isNotEmpty as me, isArray as R } from "../../../../utils/utils.js";
+import fe from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
+import pe from "../../../KunList/src/components/KunList.vue.js";
+import U from "../../../KunListItem/src/components/KunListItem.vue.js";
+import ve from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
+import ke from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
+import he from "../../../kunMenu/src/components/kunMenu.vue.js";
+import { useAutocomplete as ye } from "../composables/useAutocomplete.js";
+import { KunAutocompleteProps as ge } from "../composables/KunAutocompleteProps.js";
+import Ce from "../../../KunTextField/src/components/KunTextField.vue.js";
+import be from "../../../KunBtn/src/components/KunBtn.vue.js";
+import Ve from "../../../KunChip/src/components/KunChip.vue.js";
+import y from "../../../KunIcon/src/components/KunIcon.vue.js";
+const we = {
   key: 0,
   class: "flex justify-center align-center"
-}, Ve = { class: "flex justify-center align-center" }, Ee = {
+}, Ie = { class: "flex justify-center align-center" }, Te = {
   __name: "KunAutocomplete",
-  props: /* @__PURE__ */ $(ye, {
+  props: /* @__PURE__ */ A(ge, {
     modelValue: { default: null },
     modelModifiers: {},
     items: { default: [], type: Array, required: !0 },
     itemsModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["createItem", "validation", "search"], ["update:modelValue", "update:items"]),
-  setup(g, { emit: E }) {
-    const r = A(g, "modelValue"), V = A(g, "items"), n = g, f = E, {
+  emits: /* @__PURE__ */ A(["selectedItem", "createItem", "validation", "search"], ["update:modelValue", "update:items"]),
+  setup(g, { emit: z }) {
+    const i = $(g, "modelValue"), w = $(g, "items"), n = g, f = z, {
       textFieldRef: p,
-      listRef: w,
+      listRef: I,
       menuModel: u,
       search: c,
-      removeItem: L,
-      clearSelection: N,
-      lightReset: I,
-      openMenu: K,
-      toggleMenu: T,
+      removeItem: E,
+      clearSelection: L,
+      lightReset: K,
+      openMenu: C,
+      closeMenu: T,
+      toggleMenu: N,
       onMenuKeydown: H,
       getSelectedItem: O,
       textArr: j,
       getItemText: q,
-      createItem: P,
-      checkDisabled: W,
-      itemToString: _,
-      placeholder: M,
-      hasCreateItem: G
-    } = ke(n, f, r, V);
-    te(() => {
+      isAlphanumeric: P,
+      createItem: W,
+      checkDisabled: G,
+      itemToString: M,
+      placeholder: S,
+      hasCreateItem: J
+    } = ye(n, f, i, w);
+    oe(() => {
       n.focusOnRender && p.value.focus();
     });
-    function J(e) {
-      return r.value === null || r.value === void 0 ? n.bgItemListColor : n.multiple ? r.value.find((o) => o[n.itemValue] === e[n.itemValue]) ? n.selectedColor : n.bgItemListColor : M.value === e[n.itemTitle] ? n.selectedColor : n.bgItemListColor;
+    function Q(e) {
+      return i.value === null || i.value === void 0 ? n.bgItemListColor : n.multiple ? i.value.find((o) => o[n.itemValue] === e[n.itemValue]) ? n.selectedColor : n.bgItemListColor : S.value === e[n.itemTitle] ? n.selectedColor : n.bgItemListColor;
     }
-    const v = oe(""), S = (e) => {
+    const v = ne(""), _ = (e) => {
       for (const o of n.rules) {
         const t = o(e);
         if (t !== !0)
@@ -60,34 +62,38 @@ const be = {
       }
       return v.value = "", f("validation", !0), !0;
     };
-    ne(() => r.value, (e, o) => {
-      de(n.rules) && S(e);
+    ie(() => i.value, (e, o) => {
+      me(n.rules) && _(e);
     });
-    function Q() {
+    function X() {
       var e;
       u.value = !1, (e = p.value.inputField) == null || e.focus();
     }
-    function X(e) {
+    function Y(e) {
       var t, k;
       const o = e.key;
-      ["ArrowUp", "ArrowDown"].includes(o) && (u.value || K(), (k = (t = w.value) == null ? void 0 : t.focusWithKey) == null || k.call(t, o));
+      if (o === "Tab" || o === "Shift") {
+        T();
+        return;
+      }
+      (P(o) || o === "Backspace") && C(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), u.value || C(), (k = (t = I.value) == null ? void 0 : t.focusWithKey) == null || k.call(t, o));
     }
-    function Y(e) {
+    function Z(e) {
       f("search", c);
     }
-    function Z() {
-      S(r);
+    function ee() {
+      _(i);
     }
-    function ee(e) {
+    function le(e) {
       H(e);
     }
-    function le() {
+    function te() {
     }
-    return (e, o) => (a(), d(he, {
+    return (e, o) => (a(), d(Ce, {
       modelValue: l(c),
       "onUpdate:modelValue": [
-        o[2] || (o[2] = (t) => R(c) ? c.value = t : null),
-        Y
+        o[2] || (o[2] = (t) => B(c) ? c.value = t : null),
+        Z
       ],
       label: e.label,
       dirty: "",
@@ -96,75 +102,75 @@ const be = {
       ref_key: "textFieldRef",
       ref: p,
       autocomplete: "off",
-      onFocusInput: Z,
-      onHandleClick: l(T),
-      onBlur: le,
-      onKeyDown: F(X, ["prevent"]),
-      placeholder: n.multiple && l(z)(r.value) && r.value.length ? "" : l(M),
+      onFocusInput: ee,
+      onHandleClick: l(N),
+      onBlur: te,
+      onKeyDown: Y,
+      placeholder: n.multiple && l(R)(i.value) && i.value.length ? "" : l(S),
       error: !!v.value,
       "error-messages": v.value
     }, re({
-      default: i(() => [
-        l(z)(r.value) ? (a(), U("div", be, [
-          (a(!0), U(ie, null, ae(r.value, (t) => (a(), d(Ce, {
+      default: r(() => [
+        l(R)(i.value) ? (a(), F("div", we, [
+          (a(!0), F(ae, null, se(i.value, (t) => (a(), d(Ve, {
             key: t.id ?? t.name,
             size: "small",
             class: "ml-1"
           }, {
-            default: i(() => [
-              se("div", Ve, [
-                C(b(l(q)(t, e.itemTitle)) + " ", 1),
-                s(h, {
+            default: r(() => [
+              ue("div", Ie, [
+                b(V(l(q)(t, e.itemTitle)) + " ", 1),
+                s(y, {
                   color: "error",
                   icon: l(m).close,
                   size: "small",
                   class: "ml-1",
-                  onClick: (k) => l(L)(t)
+                  onClick: (k) => l(E)(t)
                 }, null, 8, ["icon", "onClick"])
               ])
             ]),
             _: 2
           }, 1024))), 128))
-        ])) : y("", !0),
-        s(ve, {
+        ])) : h("", !0),
+        s(he, {
           transition: "fade",
-          "onClick:outside": l(I),
+          "onClick:outside": l(K),
           modelValue: l(u),
-          "onUpdate:modelValue": o[1] || (o[1] = (t) => R(u) ? u.value = t : null),
+          "onUpdate:modelValue": o[1] || (o[1] = (t) => B(u) ? u.value = t : null),
           activator: "parent",
           "parent-ref": l(p),
-          onHandleEscape: Q,
+          onHandleEscape: X,
           "close-on-content-click": e.closeOnSelect,
           "max-height": e.maxHeight,
           "hide-details": e.hideDetails
         }, {
-          default: i(() => [
-            s(me, {
+          default: r(() => [
+            s(pe, {
               "onUpdate:selected": l(O),
-              "onClick:select": o[0] || (o[0] = (t) => l(I)()),
+              "onClick:select": o[0] || (o[0] = (t) => l(K)()),
               ref_key: "listRef",
-              ref: w,
-              onKeyDown: ee
+              ref: I,
+              onKeyDown: le
             }, {
-              default: i(() => [
-                l(G) ? (a(), d(B, { key: 0 }, {
-                  default: i(() => [
-                    s(ge, {
-                      onClick: l(P),
+              default: r(() => [
+                l(J) ? (a(), d(U, { key: 0 }, {
+                  default: r(() => [
+                    s(be, {
+                      onClick: l(W),
                       class: "w-full",
                       color: "bg-green-400"
                     }, {
-                      default: i(() => o[3] || (o[3] = [
-                        C(" Crear item ")
+                      default: r(() => o[3] || (o[3] = [
+                        b(" Crear item ")
                       ])),
                       _: 1,
                       __: [3]
                     }, 8, ["onClick"])
                   ]),
                   _: 1
-                })) : y("", !0),
-                s(ce, {
-                  items: V.value,
+                })) : h("", !0),
+                s(fe, {
+                  items: w.value,
                   search: l(c),
                   "searchable-keys": n.searchableKeys,
                   "items-per-intersection": 10,
@@ -172,26 +178,26 @@ const be = {
                   virtual: !1,
                   "item-height": 48
                 }, {
-                  default: i(({ item: t, index: k }) => {
+                  default: r(({ item: t, index: k }) => {
                     var D, x;
                     return [
-                      (a(), d(B, {
+                      (a(), d(U, {
                         value: t,
                         key: ((D = t.id) == null ? void 0 : D.toString()) ?? t.name,
-                        disabled: l(W)(t),
-                        class: ue(J(t)),
+                        disabled: l(G)(t),
+                        class: de(Q(t)),
                         density: e.density,
                         id: ((x = t.id) == null ? void 0 : x.toString()) ?? t.name
                       }, {
-                        default: i(() => [
-                          s(fe, { class: "text-wrap" }, {
-                            default: i(() => [
-                              C(b(l(_)(t, l(j), "hasDefault")), 1)
+                        default: r(() => [
+                          s(ve, { class: "text-wrap" }, {
+                            default: r(() => [
+                              b(V(l(M)(t, l(j), "hasDefault")), 1)
                             ]),
                             _: 2
                           }, 1024),
-                          s(pe, {
-                            textContent: b(e.itemSubtitle ? l(_)(t, e.itemSubtitle) : "")
+                          s(ke, {
+                            textContent: V(e.itemSubtitle ? l(M)(t, e.itemSubtitle) : "")
                           }, null, 8, ["textContent"])
                         ]),
                         _: 2
@@ -211,29 +217,29 @@ const be = {
     }, [
       e.hasIcons ? {
         name: "append-inner",
-        fn: i(() => [
-          e.clearable && r.value ? (a(), d(h, {
+        fn: r(() => [
+          e.clearable && i.value ? (a(), d(y, {
             key: 0,
-            onClick: l(N),
+            onClick: l(L),
             size: "small",
             color: "error",
             icon: l(m).close,
             class: "mr-1 mt-1"
-          }, null, 8, ["onClick", "icon"])) : y("", !0),
-          s(h, {
+          }, null, 8, ["onClick", "icon"])) : h("", !0),
+          s(y, {
             color: "teal-darken-1",
             size: "large",
             class: "cursor-pointer",
             icon: l(u) ? l(m).menuUpOutline : l(m).menuDownOutline,
-            onClick: F(l(K), ["stop"])
+            onClick: ce(l(C), ["stop"])
           }, null, 8, ["icon", "onClick"]),
-          e.required ? (a(), d(h, {
+          e.required ? (a(), d(y, {
             key: 1,
             color: "teal-darken-1",
             size: "x-small",
             class: "mb-4",
             icon: l(m).asterisk
-          }, null, 8, ["icon"])) : y("", !0)
+          }, null, 8, ["icon"])) : h("", !0)
         ]),
         key: "0"
       } : void 0
@@ -241,5 +247,5 @@ const be = {
   }
 };
 export {
-  Ee as default
+  Te as default
 };

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

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

package/package.json

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