adverich-kun-ui 0.1.403 → 0.1.404

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

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

package/package.json

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