vft 0.0.239 → 0.0.240

package/es/components/autocomplete/autocomplete.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as X, useAttrs as ve, ref as f, computed as $, onMounted as pe, resolveDirective as ge, createBlock as q, openBlock as w, unref as s, withCtx as g, createElementVNode as G, normalizeStyle as j, normalizeClass as S, createVNode as me, mergeProps as he, withKeys as A, withModifiers as J, createSlots as be, renderSlot as E, withDirectives as ye, createElementBlock as K, Fragment as $e, renderList as we, createTextVNode as Ae, toDisplayString as Ee, nextTick as ke } from "vue";
+import { defineComponent as X, useAttrs as ve, ref as c, computed as $, onMounted as pe, resolveDirective as ge, createBlock as q, openBlock as w, unref as s, withCtx as g, createElementVNode as G, normalizeStyle as j, normalizeClass as S, createVNode as me, mergeProps as he, withKeys as A, withModifiers as J, createSlots as be, renderSlot as E, withDirectives as ye, createElementBlock as K, Fragment as $e, renderList as we, createTextVNode as Ae, toDisplayString as Ee, nextTick as ke } from "vue";
 import { isObject as Se, isString as O, isArray as k } from "@vft/utils";
 import "../form/index.js";
 import { VftInput as Te } from "../input/index.js";
@@ -50,84 +50,80 @@ const Re = ["aria-expanded", "aria-owns"], Me = ["id", "aria-selected", "onClick
     select: (t) => Se(t)
   },
   setup(t, { expose: Y, emit: Z }) {
-    const r = Ne("autocomplete"), i = Z, x = Ie(), _ = ve(), M = Oe(), o = f(), P = f(), V = f(), W = f();
+    const r = Ne("autocomplete"), i = Z, x = Ie(), _ = ve(), M = Oe(), o = c(), P = c(), V = c(), W = c();
     let U = !1, C = !1;
-    const u = f([]), a = f(-1), H = f(""), c = f(!1), h = f(!1), m = f(!1), b = $(() => r.b(String(Ke()))), ee = $(() => _.style), d = $(() => (u.value.length > 0 || m.value) && c.value), I = $(() => !t.hideLoading && m.value), te = $(() => o.value ? Array.from(
+    const u = c([]), l = c(-1), H = c(""), f = c(!1), h = c(!1), m = c(!1), b = $(() => r.b(String(Ke()))), ee = $(() => _.style), d = $(() => (u.value.length > 0 || m.value) && f.value), I = $(() => !t.hideLoading && m.value), te = $(() => o.value ? Array.from(
       o.value.$el.querySelectorAll("input")
     ) : []), le = async () => {
       await ke(), d.value && (H.value = `${o.value.$el.offsetWidth}px`);
     }, ae = () => {
-      a.value = -1;
+      l.value = -1;
     }, L = Fe(async (e) => {
       if (h.value) return;
-      const l = (n) => {
+      const a = (n) => {
         m.value = !1, console.log(
           "cb---",
           n,
           h.value,
           k(n)
-        ), !h.value && (k(n) ? (u.value = n, a.value = t.highlightFirstItem ? 0 : -1) : De(Pe, "autocomplete suggestions must be an array"));
+        ), !h.value && (k(n) ? (u.value = n, l.value = t.highlightFirstItem ? 0 : -1) : De(Pe, "autocomplete suggestions must be an array"));
       };
       if (m.value = !0, console.log(t.fetchSuggestions, e, 8989), k(t.fetchSuggestions))
-        console.log("isArray----"), l(t.fetchSuggestions);
+        console.log("isArray----"), a(t.fetchSuggestions);
       else {
-        const n = await t.fetchSuggestions(e, l);
-        k(n) && l(n), console.log("await----", k(n), n);
+        const n = await t.fetchSuggestions(e, a);
+        k(n) && a(n), console.log("await----", k(n), n);
       }
     }, t.debounce), oe = (e) => {
-      const l = !!e;
-      if (i(R, e), i(T, e), h.value = !1, c.value || (c.value = l), !t.triggerOnFocus && !e) {
+      const a = !!e;
+      if (i(R, e), i(T, e), h.value = !1, f.value ||= a, !t.triggerOnFocus && !e) {
         h.value = !0, u.value = [];
         return;
       }
       L(e);
     }, se = (e) => {
-      var l;
-      M.value || (((l = e.target) == null ? void 0 : l.tagName) !== "INPUT" || te.value.includes(document.activeElement)) && (c.value = !0);
+      M.value || (e.target?.tagName !== "INPUT" || te.value.includes(document.activeElement)) && (f.value = !0);
     }, ne = (e) => {
       i(Q, e);
     }, re = (e) => {
-      C ? C = !1 : (c.value = !0, i("focus", e), t.triggerOnFocus && !U && L(String(t.modelValue)));
+      C ? C = !1 : (f.value = !0, i("focus", e), t.triggerOnFocus && !U && L(String(t.modelValue)));
     }, ie = (e) => {
       setTimeout(() => {
-        var l;
-        if ((l = V.value) != null && l.isFocusInsideContent()) {
+        if (V.value?.isFocusInsideContent()) {
           C = !0;
           return;
         }
-        c.value && y(), i("blur", e);
+        f.value && y(), i("blur", e);
       });
     }, ue = () => {
-      c.value = !1, i(T, ""), i("clear");
+      f.value = !1, i(T, ""), i("clear");
     }, z = async () => {
-      d.value && a.value >= 0 && a.value < u.value.length ? B(u.value[a.value]) : t.selectWhenUnmatched && (i("select", { value: t.modelValue }), u.value = [], a.value = -1);
+      d.value && l.value >= 0 && l.value < u.value.length ? B(u.value[l.value]) : t.selectWhenUnmatched && (i("select", { value: t.modelValue }), u.value = [], l.value = -1);
     }, ce = (e) => {
       d.value && (e.preventDefault(), e.stopPropagation(), y());
     }, y = () => {
-      c.value = !1;
+      f.value = !1;
     }, fe = () => {
-      var e;
-      (e = o.value) == null || e.focus();
+      o.value?.focus();
     }, de = () => {
-      var e;
-      (e = o.value) == null || e.blur();
+      o.value?.blur();
     }, B = async (e) => {
-      i(R, e[t.valueKey]), i(T, e[t.valueKey]), i("select", e), u.value = [], a.value = -1;
+      i(R, e[t.valueKey]), i(T, e[t.valueKey]), i("select", e), u.value = [], l.value = -1;
     }, D = (e) => {
       if (!d.value || m.value) return;
       if (e < 0) {
-        a.value = -1;
+        l.value = -1;
         return;
       }
       e >= u.value.length && (e = u.value.length - 1);
-      const l = P.value.querySelector(
+      const a = P.value.querySelector(
         `.${r.be("suggestion", "wrap")}`
-      ), v = l.querySelectorAll(
+      ), v = a.querySelectorAll(
         `.${r.be("suggestion", "list")} li`
-      )[e], p = l.scrollTop, { offsetTop: F, scrollHeight: N } = v;
-      F + N > p + l.clientHeight && (l.scrollTop += N), F < p && (l.scrollTop -= N), a.value = e, o.value.ref.setAttribute(
+      )[e], p = a.scrollTop, { offsetTop: F, scrollHeight: N } = v;
+      F + N > p + a.clientHeight && (a.scrollTop += N), F < p && (a.scrollTop -= N), l.value = e, o.value.ref.setAttribute(
         "aria-activedescendant",
-        `${b.value}-item-${a.value}`
+        `${b.value}-item-${l.value}`
       );
     };
     return Be(W, () => {
@@ -135,13 +131,13 @@ const Re = ["aria-expanded", "aria-owns"], Me = ["id", "aria-selected", "onClick
     }), pe(() => {
       o.value.ref.setAttribute("role", "textbox"), o.value.ref.setAttribute("aria-autocomplete", "list"), o.value.ref.setAttribute("aria-controls", "id"), o.value.ref.setAttribute(
         "aria-activedescendant",
-        `${b.value}-item-${a.value}`
+        `${b.value}-item-${l.value}`
       ), U = o.value.ref.hasAttribute("readonly");
     }), Y({
       /** @description the index of the currently highlighted item */
-      highlightedIndex: a,
+      highlightedIndex: l,
       /** @description autocomplete whether activated */
-      activated: c,
+      activated: f,
       /** @description remote search loading status */
       loading: m,
       /** @description el-input component instance */
@@ -162,7 +158,7 @@ const Re = ["aria-expanded", "aria-owns"], Me = ["id", "aria-selected", "onClick
       close: y,
       /** @description highlight an item in a suggestion */
       highlight: D
-    }), (e, l) => {
+    }), (e, a) => {
       const n = ge("loading");
       return w(), q(s(Ce), {
         ref_key: "popperRef",
@@ -207,9 +203,9 @@ const Re = ["aria-expanded", "aria-owns"], Me = ["id", "aria-selected", "onClick
                 }, null, 2)) : (w(!0), K($e, { key: 1 }, we(u.value, (v, p) => (w(), K("li", {
                   id: `${b.value}-item-${p}`,
                   key: p,
-                  class: S({ highlighted: a.value === p }),
+                  class: S({ highlighted: l.value === p }),
                   role: "option",
-                  "aria-selected": a.value === p,
+                  "aria-selected": l.value === p,
                   onClick: (F) => B(v)
                 }, [
                   E(e.$slots, "default", { item: v }, () => [
@@ -248,8 +244,8 @@ const Re = ["aria-expanded", "aria-owns"], Me = ["id", "aria-selected", "onClick
               onBlur: ie,
               onClear: ue,
               onKeydown: [
-                l[0] || (l[0] = A(J((v) => D(a.value - 1), ["prevent"]), ["up"])),
-                l[1] || (l[1] = A(J((v) => D(a.value + 1), ["prevent"]), ["down"])),
+                a[0] || (a[0] = A(J((v) => D(l.value - 1), ["prevent"]), ["up"])),
+                a[1] || (a[1] = A(J((v) => D(l.value + 1), ["prevent"]), ["down"])),
                 A(z, ["enter"]),
                 A(y, ["tab"]),
                 A(ce, ["esc"])