adverich-kun-ui/dist/components/KunAutocomplete/src/composables/useAutocomplete.js

Una librería de componentes Vue.js con Tailwind CSS

import { ref as d, computed as F, watch as P, nextTick as N } 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(() => {
    const e = t.itemText;
    return typeof e == "string" && e.includes(",") ? e.split(",") : e;
  });
  function s(e, n, u) {
    var i;
    if (v(e)) {
      if (n) {
        if (S(n))
          return n.map((r) => {
            if (r.includes(".")) {
              const o = r.split(".");
              let a = e;
              for (const j of o)
                a = a != null ? a[j] : "";
              return a ?? "No definido";
            }
            return e[r] ?? "No definido";
          }).join(" - ");
        if (n.includes(","))
          return n.split(",").map((r) => e[r]).join(" - ");
        if (n.includes(".")) {
          const r = n.split(".");
          let o = e;
          for (const a of r)
            o = o != null ? o[a] : "";
          return o;
        }
        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];
      }
      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],
    ([e]) => {
      const n = J(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(
      (u) => typeof u == "object" ? u[t.itemValue] === e : u === e
    ) ?? e;
  }
  function k(e) {
    if (!c.value || !e) return !1;
    const n = O(e);
    return c.value.some((u) => O(u) === n);
  }
  function O(e) {
    if (!v(e))
      return e;
    if (t.itemValue)
      return e[t.itemValue];
    if ("id" in e)
      return e.id;
    const n = Object.values(e);
    return n.length > 0 ? n[0] : e;
  }
  function A(e) {
    if (!c.value) return;
    const n = O(e);
    c.value = c.value.filter((u) => O(u) !== n);
  }
  function K(e) {
    t.clearSearchOnSelect && (b.value = ""), t.clearOnSelect && M(), t.focusOnSelect && x();
  }
  function w() {
    f.value || (f.value = !0);
  }
  function V() {
    f.value && (f.value = !1);
  }
  function $() {
    f.value = !f.value;
  }
  function E(e) {
    return e.length === 1 && e.match(/\w/);
  }
  function x() {
    h.value.inputField.focus();
  }
  function q() {
    f.value = !0, I.value && h.value.$el.focus();
  }
  function z(e) {
    const n = e.key;
    (E(n) || n === "Backspace") && (w(), x(), N(() => {
      var i;
      const u = (i = h.value) == null ? void 0 : i.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 }));
      }
    }));
  }
  function G() {
    f.value = !1, y("createItem");
  }
  function H(e) {
    let n = c.value.indexOf(e);
    c.value.splice(n, 1);
  }
  function M() {
    b.value !== "" && (b.value = ""), c.value !== null && (c.value = null), l.value !== null && (l.value = null), y("cleared");
  }
  function L(e) {
    return !!e.disabled;
  }
  return {
    selectedItem: l,
    textFieldRef: h,
    listRef: I,
    menuModel: f,
    search: b,
    getArrayText: R,
    placeholder: B,
    textArr: C,
    itemToString: s,
    getSelectedItem: D,
    checkIfValueExist: k,
    removeFromArray: A,
    lightReset: K,
    openMenu: w,
    closeMenu: V,
    toggleMenu: $,
    focusOnMenu: q,
    onMenuKeydown: z,
    createItem: G,
    removeItem: H,
    clearSelection: M,
    checkDisabled: L,
    isAlphanumeric: E
  };
}
export {
  W as useAutocomplete
};