dk-plus/es/dkautocomplete/src/index2.js

DK-PLUS

import { defineComponent as S, ref as p, reactive as O, watch as x, nextTick as d, toRefs as C } from "vue";
import { dkAutocompleteProps as H } from "./index3.js";
import { autocompleteEmits as K } from "./index4.js";
const B = S({
  name: "DkAutocomplete",
  props: H,
  emits: K,
  setup(o, { emit: r }) {
    const y = p(), I = p(), l = [], A = (e, n) => {
      if (!e) {
        l[n] = null;
        return;
      }
      if (e instanceof HTMLElement) {
        l[n] = e;
        return;
      }
      const s = e.$el;
      l[n] = s instanceof HTMLElement ? s : null;
    }, g = () => {
      if (!I.value || t.activeIndex < 0)
        return;
      const e = l[t.activeIndex];
      if (!!e)
        try {
          e.scrollIntoView({ block: "nearest" });
        } catch {
        }
    }, t = O({
      inputValue: o.modelValue,
      showDropdown: !1,
      loading: !1,
      activeIndex: -1,
      suggestions: []
    });
    let c = null, w = !1;
    const m = (e) => {
      if (typeof e == "string")
        return e;
      const n = o.valueKey || "value", s = e[n];
      return s == null ? "" : String(s);
    }, u = (e) => {
      t.suggestions = e, o.highlightFirstItem ? t.activeIndex = e.length > 0 ? 0 : -1 : t.activeIndex = -1, d(() => {
        g();
      });
    }, D = async (e) => {
      if (o.disabled)
        return;
      const n = !!o.fetchSuggestions, s = Array.isArray(o.options) && o.options.length > 0;
      if (!n && !s) {
        u([]);
        return;
      }
      if (!n) {
        const i = e.trim().toLowerCase(), v = (o.options || []).filter((L) => {
          const R = m(L).toLowerCase();
          return i ? R.includes(i) : !0;
        });
        u(v);
        return;
      }
      const b = (i) => {
        t.loading = !1, u(Array.isArray(i) ? i : []);
      };
      t.loading = !0;
      try {
        const i = o.fetchSuggestions(e, b);
        if (i && typeof i.then == "function") {
          const v = await i;
          b(v);
        }
      } catch {
        t.loading = !1, u([]);
      }
    }, f = (e) => {
      if (!o.fetchSuggestions) {
        c && window.clearTimeout(c), D(e);
        return;
      }
      const n = o.debounce || 0;
      c && window.clearTimeout(c), c = window.setTimeout(() => {
        D(e);
      }, n);
    }, h = () => {
      o.disabled || (t.showDropdown = !0, document.addEventListener("click", V));
    }, a = () => {
      t.showDropdown = !1, t.activeIndex = -1, document.removeEventListener("click", V);
    }, V = (e) => {
      const n = y.value;
      if (!n)
        return;
      const s = e.target;
      n.contains(s) || a();
    }, T = (e) => {
      h(), r("focus", e), o.triggerOnFocus && f(t.inputValue);
    }, E = (e) => {
      r("blur", e), window.setTimeout(() => {
        a();
      }, 120);
    }, k = (e) => {
      if (o.disabled)
        return;
      const n = m(e);
      t.inputValue = n, r("update:modelValue", n), r("select", e), a();
    }, F = (e) => {
      if (!!t.showDropdown && t.suggestions.length !== 0) {
        if (e.key === "ArrowDown") {
          e.preventDefault();
          const n = t.activeIndex + 1;
          t.activeIndex = n >= t.suggestions.length ? 0 : n, d(() => g());
          return;
        }
        if (e.key === "ArrowUp") {
          e.preventDefault();
          const n = t.activeIndex - 1;
          t.activeIndex = n < 0 ? t.suggestions.length - 1 : n, d(() => g());
          return;
        }
        if (e.key === "Enter") {
          if (t.activeIndex < 0)
            return;
          e.preventDefault(), k(t.suggestions[t.activeIndex]);
          return;
        }
        e.key === "Escape" && a();
      }
    };
    return x(
      () => o.modelValue,
      (e) => {
        w = !0, t.inputValue = e, d(() => {
          w = !1;
        });
      }
    ), x(
      () => t.inputValue,
      (e, n) => {
        if (w)
          return;
        const s = String(e != null ? e : "");
        if (r("update:modelValue", s), r("change", s), n !== "" && s === "") {
          r("clear"), o.triggerOnFocus ? (h(), f("")) : (u([]), a());
          return;
        }
        h(), f(s);
      }
    ), x(
      () => o.options,
      () => {
        !t.showDropdown || f(t.inputValue);
      }
    ), {
      rootRef: y,
      dropdownRef: I,
      ...C(t),
      getOptionText: m,
      onFocus: T,
      onBlur: E,
      onSelect: k,
      onKeydown: F,
      setItemRef: A
    };
  }
});
export {
  B as default
};