adverich-kun-ui 0.1.350 → 0.1.352

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

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

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

@@ -46,30 +46,15 @@ const e = {
     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
-  },
+  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 },
+  btnCreateClass: { type: String, default: "w-full" },
+  btnCreateBg: { typer: String, default: "bg-green-700" },
+  btnCreateText: { typer: String, default: "Crear item" },
+  multiple: { type: Boolean, default: !1 },
   required: {
     type: Boolean,
     default: !1

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

@@ -1,4 +1,4 @@
-import { mergeModels as g, ref as w, useModel as x, provide as p, computed as B, createElementBlock as M, openBlock as S, mergeProps as I, withModifiers as E, renderSlot as L } from "vue";
+import { mergeModels as g, ref as w, useModel as D, provide as p, computed as B, createElementBlock as M, openBlock as S, mergeProps as I, withModifiers as E, renderSlot as L } from "vue";
 const R = {
   __name: "KunList",
   props: /* @__PURE__ */ g({
@@ -21,8 +21,8 @@ const R = {
     selectedModifiers: {}
   }),
   emits: /* @__PURE__ */ g(["keyDown", "click:select", "update:selected"], ["update:selected"]),
-  setup(o, { expose: y, emit: b }) {
-    const u = o, a = b, f = w(null), c = w([]), s = x(o, "selected");
+  setup(o, { expose: b, emit: y }) {
+    const u = o, a = y, f = w(null), c = w([]), s = D(o, "selected");
     p("registerListItemRef", (e) => {
       e && !c.value.includes(e) && c.value.push(e);
     });
@@ -55,7 +55,7 @@ const R = {
         }
         if (t === "ArrowUp" || t === "ArrowDown") {
           e.preventDefault();
-          const l = n.findIndex((D) => D === document.activeElement);
+          const l = n.findIndex((x) => x === document.activeElement);
           let d = -1;
           l === -1 ? d = t === "ArrowDown" ? 0 : n.length - 1 : t === "ArrowDown" ? d = (l + 1) % n.length : t === "ArrowUp" && (d = (l - 1 + n.length) % n.length);
           const i = n[d];
@@ -71,7 +71,7 @@ const R = {
       const n = e === "ArrowDown" ? 0 : t.length - 1, r = t[n];
       (l = r == null ? void 0 : r.focus) == null || l.call(r);
     }
-    return y({ focusWithKey: h, focus: () => {
+    return b({ focusWithKey: h, focus: () => {
       var e, t;
       return (t = (e = f.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
     } }), (e, t) => (S(), M("ul", I({
@@ -88,6 +88,7 @@ const R = {
           "p-2 rounded-md": o.nav
         }
       ]],
+      tabindex: "-1",
       onKeydown: E(A, ["prevent"]),
       onSelect: t[0] || (t[0] = (n) => a("click:select", n.detail))
     }, e.$attrs), [

package/package.json

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