vft 0.0.249 → 0.0.252

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

@@ -1,26 +1,26 @@
-import { defineComponent as X, useAttrs as ve, ref as u, computed as y, onMounted as pe, resolveDirective as ge, createBlock as z, openBlock as $, unref as s, withCtx as g, createElementVNode as G, normalizeStyle as j, normalizeClass as A, createVNode as me, mergeProps as he, withKeys as w, withModifiers as J, createSlots as be, renderSlot as E, withDirectives as ye, createElementBlock as N, Fragment as $e, renderList as we, createTextVNode as Ee, toDisplayString as ke, nextTick as Ae } from "vue";
-import { isObject as Se, isString as K, isArray as O } from "@vft/utils";
+import { defineComponent as X, useAttrs as pe, ref as c, computed as b, onMounted as ve, createBlock as me, openBlock as E, unref as s, withCtx as p, createElementVNode as z, normalizeStyle as G, normalizeClass as k, createVNode as j, mergeProps as ge, withKeys as y, withModifiers as J, createSlots as he, renderSlot as $, createElementBlock as F, Fragment as be, renderList as ye, createTextVNode as $e, toDisplayString as we, nextTick as Ee } from "vue";
+import { isObject as ke, isString as N, isArray as D } from "@vft/utils";
 import "../form/index.js";
-import { VftInput as Te } from "../input/index.js";
-import { VftScrollbar as Ve } from "../scrollbar/index.js";
-import { VftTooltip as Ce } from "../tooltip/index.js";
-import { CHANGE_EVENT as Q, INPUT_EVENT as R, UPDATE_MODEL_EVENT as S } from "../../constants/event.js";
-import { useAttrs as Ie } from "../../hooks/use-attrs/index.js";
-import { onClickOutside as Be } from "@vueuse/core";
-import { throwError as De } from "../../utils/error.js";
+import { VftInput as Ae } from "../input/index.js";
+import { VftScrollbar as Se } from "../scrollbar/index.js";
+import { VftTooltip as Te } from "../tooltip/index.js";
+import { CHANGE_EVENT as Q, INPUT_EVENT as K, UPDATE_MODEL_EVENT as A } from "../../constants/event.js";
+import { useAttrs as Ve } from "../../hooks/use-attrs/index.js";
+import { onClickOutside as Ce } from "@vueuse/core";
+import { throwError as Ie } from "../../utils/error.js";
 import "../../utils/ns-cover.js";
-import { debounce as Fe } from "lodash-es";
-import { useNamespace as Ne } from "../../hooks/use-namespace/index.js";
+import { debounce as Be } from "lodash-es";
+import { useNamespace as Fe } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { generateId as Ke } from "./types.js";
-import { useFormDisabled as Oe } from "../form/hooks/use-form-common-props.js";
-const Re = ["aria-expanded", "aria-owns"], Me = ["id", "aria-selected", "onClick"], Pe = "ElAutocomplete", We = X({
+import { generateId as Ne } from "./types.js";
+import { useFormDisabled as De } from "../form/hooks/use-form-common-props.js";
+const Ke = ["aria-expanded", "aria-owns"], Oe = ["id", "aria-selected", "onClick"], Re = "ElAutocomplete", Me = X({
   name: "vft-autocomplete",
   inheritAttrs: !1
-}), st = /* @__PURE__ */ X({
-  ...We,
+}), at = /* @__PURE__ */ X({
+  ...Me,
   props: {
     valueKey: { default: "value" },
     modelValue: { default: "" },
@@ -41,248 +41,243 @@ const Re = ["aria-expanded", "aria-owns"], Me = ["id", "aria-selected", "onClick
     name: {}
   },
   emits: {
-    [S]: (t) => K(t),
-    [R]: (t) => K(t),
-    [Q]: (t) => K(t),
+    [A]: (t) => N(t),
+    [K]: (t) => N(t),
+    [Q]: (t) => N(t),
     focus: (t) => t instanceof FocusEvent,
     blur: (t) => t instanceof FocusEvent,
     clear: () => !0,
-    select: (t) => Se(t)
+    select: (t) => ke(t)
   },
   setup(t, { expose: Y, emit: Z }) {
-    const n = Ne("autocomplete"), r = Z, x = Ie(), _ = ve(), M = Oe(), o = u(), P = u(), T = u(), W = u();
-    let L = !1, V = !1;
-    const i = u([]), l = u(-1), U = u(""), c = u(!1), k = u(!1), m = u(!1), h = y(() => n.b(String(Ke()))), ee = y(() => _.style), d = y(() => (i.value.length > 0 || m.value) && c.value), C = y(() => !t.hideLoading && m.value), te = y(() => o.value ? Array.from(
+    const r = Fe("autocomplete"), i = Z, x = Ve(), _ = pe(), O = De(), o = c(), R = c(), S = c(), M = c();
+    let P = !1, T = !1;
+    const u = c([]), l = c(-1), W = c(""), f = c(!1), w = c(!1), v = c(!1), g = b(() => r.b(String(Ne()))), ee = b(() => _.style), d = b(() => (u.value.length > 0 || v.value) && f.value), L = b(() => !t.hideLoading && v.value), te = b(() => o.value ? Array.from(
       o.value.$el.querySelectorAll("input")
     ) : []), le = async () => {
-      await Ae(), d.value && (U.value = `${o.value.$el.offsetWidth}px`);
+      await Ee(), d.value && (W.value = `${o.value.$el.offsetWidth}px`);
     }, ae = () => {
       l.value = -1;
-    }, H = Fe(async (e) => {
-      if (k.value) return;
-      const a = (f) => {
-        m.value = !1, !k.value && (O(f) ? (i.value = f, l.value = t.highlightFirstItem ? 0 : -1) : De(Pe, "autocomplete suggestions must be an array"));
+    }, U = Be(async (e) => {
+      if (w.value) return;
+      const a = (n) => {
+        v.value = !1, !w.value && (D(n) ? (u.value = n, l.value = t.highlightFirstItem ? 0 : -1) : Ie(Re, "autocomplete suggestions must be an array"));
       };
-      if (m.value = !0, O(t.fetchSuggestions))
+      if (v.value = !0, D(t.fetchSuggestions))
         a(t.fetchSuggestions);
       else {
-        const f = await t.fetchSuggestions(e, a);
-        O(f) && a(f);
+        const n = await t.fetchSuggestions(e, a);
+        D(n) && a(n);
       }
     }, t.debounce), oe = (e) => {
       const a = !!e;
-      if (r(R, e), r(S, e), k.value = !1, c.value ||= a, !t.triggerOnFocus && !e) {
-        k.value = !0, i.value = [];
+      if (i(K, e), i(A, e), w.value = !1, f.value ||= a, !t.triggerOnFocus && !e) {
+        w.value = !0, u.value = [];
         return;
       }
-      H(e);
+      U(e);
     }, se = (e) => {
-      M.value || (e.target?.tagName !== "INPUT" || te.value.includes(document.activeElement)) && (c.value = !0);
+      O.value || (e.target?.tagName !== "INPUT" || te.value.includes(document.activeElement)) && (f.value = !0);
     }, ne = (e) => {
-      r(Q, e);
+      i(Q, e);
     }, re = (e) => {
-      V ? V = !1 : (c.value = !0, r("focus", e), t.triggerOnFocus && !L && H(String(t.modelValue)));
+      T ? T = !1 : (f.value = !0, i("focus", e), t.triggerOnFocus && !P && U(String(t.modelValue)));
     }, ie = (e) => {
       setTimeout(() => {
-        if (T.value?.isFocusInsideContent()) {
-          V = !0;
+        if (S.value?.isFocusInsideContent()) {
+          T = !0;
           return;
         }
-        c.value && b(), r("blur", e);
+        f.value && h(), i("blur", e);
       });
     }, ue = () => {
-      c.value = !1, r(S, ""), r("clear");
-    }, q = async () => {
-      d.value && l.value >= 0 && l.value < i.value.length ? I(i.value[l.value]) : t.selectWhenUnmatched && (r("select", { value: t.modelValue }), i.value = [], l.value = -1);
+      f.value = !1, i(A, ""), i("clear");
+    }, H = async () => {
+      d.value && l.value >= 0 && l.value < u.value.length ? V(u.value[l.value]) : t.selectWhenUnmatched && (i("select", { value: t.modelValue }), u.value = [], l.value = -1);
     }, ce = (e) => {
-      d.value && (e.preventDefault(), e.stopPropagation(), b());
-    }, b = () => {
-      c.value = !1;
+      d.value && (e.preventDefault(), e.stopPropagation(), h());
+    }, h = () => {
+      f.value = !1;
     }, fe = () => {
       o.value?.focus();
     }, de = () => {
       o.value?.blur();
-    }, I = async (e) => {
-      r(R, e[t.valueKey]), r(S, e[t.valueKey]), r("select", e), i.value = [], l.value = -1;
-    }, B = (e) => {
-      if (!d.value || m.value) return;
+    }, V = async (e) => {
+      i(K, e[t.valueKey]), i(A, e[t.valueKey]), i("select", e), u.value = [], l.value = -1;
+    }, C = (e) => {
+      if (!d.value || v.value) return;
       if (e < 0) {
         l.value = -1;
         return;
       }
-      e >= i.value.length && (e = i.value.length - 1);
-      const a = P.value.querySelector(
-        `.${n.be("suggestion", "wrap")}`
-      ), v = a.querySelectorAll(
-        `.${n.be("suggestion", "list")} li`
-      )[e], p = a.scrollTop, { offsetTop: D, scrollHeight: F } = v;
-      D + F > p + a.clientHeight && (a.scrollTop += F), D < p && (a.scrollTop -= F), l.value = e, o.value.ref.setAttribute(
+      e >= u.value.length && (e = u.value.length - 1);
+      const a = R.value.querySelector(
+        `.${r.be("suggestion", "wrap")}`
+      ), m = a.querySelectorAll(
+        `.${r.be("suggestion", "list")} li`
+      )[e], I = a.scrollTop, { offsetTop: q, scrollHeight: B } = m;
+      q + B > I + a.clientHeight && (a.scrollTop += B), q < I && (a.scrollTop -= B), l.value = e, o.value.ref.setAttribute(
         "aria-activedescendant",
-        `${h.value}-item-${l.value}`
+        `${g.value}-item-${l.value}`
       );
     };
-    return Be(W, () => {
-      d.value && b();
-    }), pe(() => {
+    return Ce(M, () => {
+      d.value && h();
+    }), ve(() => {
       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",
-        `${h.value}-item-${l.value}`
-      ), L = o.value.ref.hasAttribute("readonly");
+        `${g.value}-item-${l.value}`
+      ), P = o.value.ref.hasAttribute("readonly");
     }), Y({
       /** @description the index of the currently highlighted item */
       highlightedIndex: l,
       /** @description autocomplete whether activated */
-      activated: c,
+      activated: f,
       /** @description remote search loading status */
-      loading: m,
+      loading: v,
       /** @description el-input component instance */
       inputRef: o,
       /** @description el-tooltip component instance */
-      popperRef: T,
+      popperRef: S,
       /** @description fetch suggestions result */
-      suggestions: i,
+      suggestions: u,
       /** @description triggers when a suggestion is clicked */
-      handleSelect: I,
+      handleSelect: V,
       /** @description handle keyboard enter event */
-      handleKeyEnter: q,
+      handleKeyEnter: H,
       /** @description focus the input element */
       focus: fe,
       /** @description blur the input element */
       blur: de,
       /** @description close suggestion */
-      close: b,
+      close: h,
       /** @description highlight an item in a suggestion */
-      highlight: B
-    }), (e, a) => {
-      const f = ge("loading");
-      return $(), z(s(Ce), {
-        ref_key: "popperRef",
-        ref: T,
-        visible: d.value,
-        placement: e.placement,
-        "fallback-placements": ["bottom-start", "top-start"],
-        "popper-class": [s(n).e("popper"), e.popperClass],
-        teleported: e.teleported,
-        "gpu-acceleration": !1,
-        pure: "",
-        "manual-mode": "",
-        effect: "light",
-        trigger: "click",
-        transition: `${s(n).namespace.value}-zoom-in-top`,
-        persistent: "",
-        onBeforeShow: le,
-        onHide: ae
-      }, {
-        content: g(() => [
-          G("div", {
-            ref_key: "regionRef",
-            ref: P,
-            class: A([s(n).b("suggestion"), s(n).is("loading", C.value)]),
-            style: j({
-              [e.fitInputWidth ? "width" : "minWidth"]: U.value,
-              outline: "none"
-            }),
-            role: "region"
-          }, [
-            ye(($(), z(s(Ve), {
-              id: h.value,
-              tag: "ul",
-              "wrap-class": s(n).be("suggestion", "wrap"),
-              "view-class": s(n).be("suggestion", "list"),
-              role: "listbox"
-            }, {
-              default: g(() => [
-                C.value ? ($(), N("li", {
-                  key: 0,
-                  class: A(s(n).is("loading"))
-                }, null, 2)) : ($(!0), N($e, { key: 1 }, we(i.value, (v, p) => ($(), N("li", {
-                  id: `${h.value}-item-${p}`,
-                  key: p,
-                  class: A({ highlighted: l.value === p }),
-                  role: "option",
-                  "aria-selected": l.value === p,
-                  onClick: (D) => I(v)
-                }, [
-                  E(e.$slots, "default", { item: v }, () => [
-                    Ee(ke(v[e.valueKey]), 1)
-                  ])
-                ], 10, Me))), 128))
+      highlight: C
+    }), (e, a) => (E(), me(s(Te), {
+      ref_key: "popperRef",
+      ref: S,
+      visible: d.value,
+      placement: e.placement,
+      "fallback-placements": ["bottom-start", "top-start"],
+      "popper-class": [s(r).e("popper"), e.popperClass],
+      teleported: e.teleported,
+      "gpu-acceleration": !1,
+      pure: "",
+      "manual-mode": "",
+      effect: "light",
+      trigger: "click",
+      transition: `${s(r).namespace.value}-zoom-in-top`,
+      persistent: "",
+      onBeforeShow: le,
+      onHide: ae
+    }, {
+      content: p(() => [
+        z("div", {
+          ref_key: "regionRef",
+          ref: R,
+          class: k([s(r).b("suggestion"), s(r).is("loading", L.value)]),
+          style: G({
+            [e.fitInputWidth ? "width" : "minWidth"]: W.value,
+            outline: "none"
+          }),
+          role: "region"
+        }, [
+          j(s(Se), {
+            id: g.value,
+            tag: "ul",
+            "wrap-class": s(r).be("suggestion", "wrap"),
+            "view-class": s(r).be("suggestion", "list"),
+            role: "listbox"
+          }, {
+            default: p(() => [
+              L.value ? (E(), F("li", {
+                key: 0,
+                class: k(s(r).is("loading"))
+              }, null, 2)) : (E(!0), F(be, { key: 1 }, ye(u.value, (n, m) => (E(), F("li", {
+                id: `${g.value}-item-${m}`,
+                key: m,
+                class: k({ highlighted: l.value === m }),
+                role: "option",
+                "aria-selected": l.value === m,
+                onClick: (I) => V(n)
+              }, [
+                $(e.$slots, "default", { item: n }, () => [
+                  $e(we(n[e.valueKey]), 1)
+                ])
+              ], 10, Oe))), 128))
+            ]),
+            _: 3
+          }, 8, ["id", "wrap-class", "view-class"])
+        ], 6)
+      ]),
+      default: p(() => [
+        z("div", {
+          ref_key: "listboxRef",
+          ref: M,
+          class: k([s(r).b(), e.$attrs.class]),
+          style: G(ee.value),
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": d.value,
+          "aria-owns": g.value
+        }, [
+          j(s(Ae), ge({
+            ref_key: "inputRef",
+            ref: o
+          }, s(x), {
+            clearable: e.clearable,
+            disabled: s(O),
+            name: e.name,
+            "model-value": e.modelValue,
+            onInput: oe,
+            onChange: ne,
+            onFocus: re,
+            onBlur: ie,
+            onClear: ue,
+            onKeydown: [
+              a[0] || (a[0] = y(J((n) => C(l.value - 1), ["prevent"]), ["up"])),
+              a[1] || (a[1] = y(J((n) => C(l.value + 1), ["prevent"]), ["down"])),
+              y(H, ["enter"]),
+              y(h, ["tab"]),
+              y(ce, ["esc"])
+            ],
+            onMousedown: se
+          }), he({ _: 2 }, [
+            e.$slots.prepend ? {
+              name: "prepend",
+              fn: p(() => [
+                $(e.$slots, "prepend")
               ]),
-              _: 3
-            }, 8, ["id", "wrap-class", "view-class"])), [
-              [f, C.value]
-            ])
-          ], 6)
-        ]),
-        default: g(() => [
-          G("div", {
-            ref_key: "listboxRef",
-            ref: W,
-            class: A([s(n).b(), e.$attrs.class]),
-            style: j(ee.value),
-            role: "combobox",
-            "aria-haspopup": "listbox",
-            "aria-expanded": d.value,
-            "aria-owns": h.value
-          }, [
-            me(s(Te), he({
-              ref_key: "inputRef",
-              ref: o
-            }, s(x), {
-              clearable: e.clearable,
-              disabled: s(M),
-              name: e.name,
-              "model-value": e.modelValue,
-              onInput: oe,
-              onChange: ne,
-              onFocus: re,
-              onBlur: ie,
-              onClear: ue,
-              onKeydown: [
-                a[0] || (a[0] = w(J((v) => B(l.value - 1), ["prevent"]), ["up"])),
-                a[1] || (a[1] = w(J((v) => B(l.value + 1), ["prevent"]), ["down"])),
-                w(q, ["enter"]),
-                w(b, ["tab"]),
-                w(ce, ["esc"])
-              ],
-              onMousedown: se
-            }), be({ _: 2 }, [
-              e.$slots.prepend ? {
-                name: "prepend",
-                fn: g(() => [
-                  E(e.$slots, "prepend")
-                ]),
-                key: "0"
-              } : void 0,
-              e.$slots.append ? {
-                name: "append",
-                fn: g(() => [
-                  E(e.$slots, "append")
-                ]),
-                key: "1"
-              } : void 0,
-              e.$slots.prefix ? {
-                name: "prefix",
-                fn: g(() => [
-                  E(e.$slots, "prefix")
-                ]),
-                key: "2"
-              } : void 0,
-              e.$slots.suffix ? {
-                name: "suffix",
-                fn: g(() => [
-                  E(e.$slots, "suffix")
-                ]),
-                key: "3"
-              } : void 0
-            ]), 1040, ["clearable", "disabled", "name", "model-value"])
-          ], 14, Re)
-        ]),
-        _: 3
-      }, 8, ["visible", "placement", "popper-class", "teleported", "transition"]);
-    };
+              key: "0"
+            } : void 0,
+            e.$slots.append ? {
+              name: "append",
+              fn: p(() => [
+                $(e.$slots, "append")
+              ]),
+              key: "1"
+            } : void 0,
+            e.$slots.prefix ? {
+              name: "prefix",
+              fn: p(() => [
+                $(e.$slots, "prefix")
+              ]),
+              key: "2"
+            } : void 0,
+            e.$slots.suffix ? {
+              name: "suffix",
+              fn: p(() => [
+                $(e.$slots, "suffix")
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1040, ["clearable", "disabled", "name", "model-value"])
+        ], 14, Ke)
+      ]),
+      _: 3
+    }, 8, ["visible", "placement", "popper-class", "teleported", "transition"]));
   }
 });
 export {
-  st as default
+  at as default
 };