adverich-kun-ui 0.1.124 → 0.1.126

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

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

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

@@ -75,19 +75,13 @@ const e = {
     default: !1
   },
   // ***** STYLE ***** //
-  height: {
-    default: 500
-  },
-  maxHeight: {
-    default: 500
-  },
-  density: {
-    type: String,
-    default: "comfortable"
-  },
+  height: { default: 500 },
+  maxHeight: { default: 500 },
+  density: { type: String, default: "comfortable" },
+  zIndex: { type: String, default: "z-50" },
   hideDetails: {
     type: Boolean,
-    default: !1
+    default: !0
   },
   hasIcons: {
     type: Boolean,