vft 0.0.362 → 0.0.363

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

@@ -1,26 +1,25 @@
-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 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 "../config-provider/hooks/use-global-config.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 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({
+import { defineComponent, useAttrs as useAttrs$1, ref, computed, onMounted, createBlock, openBlock, unref, withCtx, createElementVNode, normalizeStyle, normalizeClass, createVNode, mergeProps, withKeys, withModifiers, createSlots, renderSlot, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, nextTick } from "vue";
+import { isObject, isString, isArray } from "@vft/utils";
+import { VftInput } from "../input/index.js";
+import { VftScrollbar } from "../scrollbar/index.js";
+import { VftTooltip } from "../tooltip/index.js";
+import { onClickOutside } from "@vueuse/core";
+import { debounce } from "lodash-es";
+import { generateId } from "./types.js";
+import { useAttrs } from "../../hooks/use-attrs/index.js";
+import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from "../../constants/event.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { useFormDisabled } from "../form/hooks/use-form-common-props.js";
+import { throwError } from "../../utils/error.js";
+const _hoisted_1 = ["aria-expanded", "aria-owns"];
+const _hoisted_2 = ["id", "aria-selected", "onClick"];
+const COMPONENT_NAME = "ElAutocomplete";
+const __default__ = defineComponent({
   name: "vft-autocomplete",
-  inheritAttrs: !1
-}), at = /* @__PURE__ */ X({
-  ...Me,
+  inheritAttrs: false
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     valueKey: { default: "value" },
     modelValue: { default: "" },
@@ -29,255 +28,367 @@ const Ke = ["aria-expanded", "aria-owns"], Oe = ["id", "aria-selected", "onClick
     fetchSuggestions: { type: [Function, Array], default: () => {
     } },
     popperClass: { default: "" },
-    triggerOnFocus: { type: Boolean, default: !0 },
-    selectWhenUnmatched: { type: Boolean, default: !1 },
-    hideLoading: { type: Boolean, default: !1 },
+    triggerOnFocus: { type: Boolean, default: true },
+    selectWhenUnmatched: { type: Boolean, default: false },
+    hideLoading: { type: Boolean, default: false },
     label: {},
-    teleported: { type: Boolean, default: !1 },
-    highlightFirstItem: { type: Boolean, default: !1 },
-    fitInputWidth: { type: Boolean, default: !1 },
-    clearable: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
+    teleported: { type: Boolean, default: false },
+    highlightFirstItem: { type: Boolean, default: false },
+    fitInputWidth: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
     name: {}
   },
   emits: {
-    [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) => ke(t)
+    [UPDATE_MODEL_EVENT]: (value) => isString(value),
+    [INPUT_EVENT]: (value) => isString(value),
+    [CHANGE_EVENT]: (value) => isString(value),
+    focus: (evt) => evt instanceof FocusEvent,
+    blur: (evt) => evt instanceof FocusEvent,
+    clear: () => true,
+    select: (item) => isObject(item)
   },
-  setup(t, { expose: Y, emit: Z }) {
-    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 Ee(), d.value && (W.value = `${o.value.$el.offsetWidth}px`);
-    }, ae = () => {
-      l.value = -1;
-    }, 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"));
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = useNamespace("autocomplete");
+    const emit = __emit;
+    const attrs = useAttrs();
+    const rawAttrs = useAttrs$1();
+    const _disabled = useFormDisabled();
+    const inputRef = ref();
+    const regionRef = ref();
+    const popperRef = ref();
+    const listboxRef = ref();
+    let readonly = false;
+    let ignoreFocusEvent = false;
+    const suggestions = ref([]);
+    const highlightedIndex = ref(-1);
+    const dropdownWidth = ref("");
+    const activated = ref(false);
+    const suggestionDisabled = ref(false);
+    const loading = ref(false);
+    const listboxId = computed(() => ns.b(String(generateId())));
+    const styles = computed(() => rawAttrs.style);
+    const suggestionVisible = computed(() => {
+      const isValidData = suggestions.value.length > 0;
+      return (isValidData || loading.value) && activated.value;
+    });
+    const suggestionLoading = computed(() => !__props.hideLoading && loading.value);
+    const refInput = computed(() => {
+      if (inputRef.value) {
+        return Array.from(
+          inputRef.value.$el.querySelectorAll("input")
+        );
+      }
+      return [];
+    });
+    const onSuggestionShow = async () => {
+      await nextTick();
+      if (suggestionVisible.value) {
+        dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`;
+      }
+    };
+    const onHide = () => {
+      highlightedIndex.value = -1;
+    };
+    const getData = async (queryString) => {
+      if (suggestionDisabled.value) return;
+      const cb = (suggestionList) => {
+        loading.value = false;
+        if (suggestionDisabled.value) return;
+        if (isArray(suggestionList)) {
+          suggestions.value = suggestionList;
+          highlightedIndex.value = __props.highlightFirstItem ? 0 : -1;
+        } else {
+          throwError(COMPONENT_NAME, "autocomplete suggestions must be an array");
+        }
       };
-      if (v.value = !0, D(t.fetchSuggestions))
-        a(t.fetchSuggestions);
-      else {
-        const n = await t.fetchSuggestions(e, a);
-        D(n) && a(n);
+      loading.value = true;
+      if (isArray(__props.fetchSuggestions)) {
+        cb(__props.fetchSuggestions);
+      } else {
+        const result = await __props.fetchSuggestions(queryString, cb);
+        if (isArray(result)) cb(result);
       }
-    }, t.debounce), oe = (e) => {
-      const a = !!e;
-      if (i(K, e), i(A, e), w.value = !1, f.value ||= a, !t.triggerOnFocus && !e) {
-        w.value = !0, u.value = [];
+    };
+    const debouncedGetData = debounce(getData, __props.debounce);
+    const handleInput = (value) => {
+      const valuePresented = !!value;
+      emit(INPUT_EVENT, value);
+      emit(UPDATE_MODEL_EVENT, value);
+      suggestionDisabled.value = false;
+      activated.value ||= valuePresented;
+      if (!__props.triggerOnFocus && !value) {
+        suggestionDisabled.value = true;
+        suggestions.value = [];
         return;
       }
-      U(e);
-    }, se = (e) => {
-      O.value || (e.target?.tagName !== "INPUT" || te.value.includes(document.activeElement)) && (f.value = !0);
-    }, ne = (e) => {
-      i(Q, e);
-    }, re = (e) => {
-      T ? T = !1 : (f.value = !0, i("focus", e), t.triggerOnFocus && !P && U(String(t.modelValue)));
-    }, ie = (e) => {
+      debouncedGetData(value);
+    };
+    const handleMouseDown = (event) => {
+      if (_disabled.value) return;
+      if (event.target?.tagName !== "INPUT" || refInput.value.includes(document.activeElement)) {
+        activated.value = true;
+      }
+    };
+    const handleChange = (value) => {
+      emit(CHANGE_EVENT, value);
+    };
+    const handleFocus = (evt) => {
+      if (!ignoreFocusEvent) {
+        activated.value = true;
+        emit("focus", evt);
+        if (__props.triggerOnFocus && !readonly) {
+          debouncedGetData(String(__props.modelValue));
+        }
+      } else {
+        ignoreFocusEvent = false;
+      }
+    };
+    const handleBlur = (evt) => {
       setTimeout(() => {
-        if (S.value?.isFocusInsideContent()) {
-          T = !0;
+        if (popperRef.value?.isFocusInsideContent()) {
+          ignoreFocusEvent = true;
           return;
         }
-        f.value && h(), i("blur", e);
+        activated.value && close();
+        emit("blur", evt);
       });
-    }, ue = () => {
-      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(), h());
-    }, h = () => {
-      f.value = !1;
-    }, fe = () => {
-      o.value?.focus();
-    }, de = () => {
-      o.value?.blur();
-    }, 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;
+    };
+    const handleClear = () => {
+      activated.value = false;
+      emit(UPDATE_MODEL_EVENT, "");
+      emit("clear");
+    };
+    const handleKeyEnter = async () => {
+      if (suggestionVisible.value && highlightedIndex.value >= 0 && highlightedIndex.value < suggestions.value.length) {
+        handleSelect(suggestions.value[highlightedIndex.value]);
+      } else if (__props.selectWhenUnmatched) {
+        emit("select", { value: __props.modelValue });
+        suggestions.value = [];
+        highlightedIndex.value = -1;
+      }
+    };
+    const handleKeyEscape = (evt) => {
+      if (suggestionVisible.value) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        close();
+      }
+    };
+    const close = () => {
+      activated.value = false;
+    };
+    const focus = () => {
+      inputRef.value?.focus();
+    };
+    const blur = () => {
+      inputRef.value?.blur();
+    };
+    const handleSelect = async (item) => {
+      emit(INPUT_EVENT, item[__props.valueKey]);
+      emit(UPDATE_MODEL_EVENT, item[__props.valueKey]);
+      emit("select", item);
+      suggestions.value = [];
+      highlightedIndex.value = -1;
+    };
+    const highlight = (index) => {
+      if (!suggestionVisible.value || loading.value) return;
+      if (index < 0) {
+        highlightedIndex.value = -1;
         return;
       }
-      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(
+      if (index >= suggestions.value.length) {
+        index = suggestions.value.length - 1;
+      }
+      const suggestion = regionRef.value.querySelector(
+        `.${ns.be("suggestion", "wrap")}`
+      );
+      const suggestionList = suggestion.querySelectorAll(
+        `.${ns.be("suggestion", "list")} li`
+      );
+      const highlightItem = suggestionList[index];
+      const scrollTop = suggestion.scrollTop;
+      const { offsetTop, scrollHeight } = highlightItem;
+      if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {
+        suggestion.scrollTop += scrollHeight;
+      }
+      if (offsetTop < scrollTop) {
+        suggestion.scrollTop -= scrollHeight;
+      }
+      highlightedIndex.value = index;
+      inputRef.value.ref.setAttribute(
         "aria-activedescendant",
-        `${g.value}-item-${l.value}`
+        `${listboxId.value}-item-${highlightedIndex.value}`
       );
     };
-    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(
+    onClickOutside(listboxRef, () => {
+      suggestionVisible.value && close();
+    });
+    onMounted(() => {
+      inputRef.value.ref.setAttribute("role", "textbox");
+      inputRef.value.ref.setAttribute("aria-autocomplete", "list");
+      inputRef.value.ref.setAttribute("aria-controls", "id");
+      inputRef.value.ref.setAttribute(
         "aria-activedescendant",
-        `${g.value}-item-${l.value}`
-      ), P = o.value.ref.hasAttribute("readonly");
-    }), Y({
+        `${listboxId.value}-item-${highlightedIndex.value}`
+      );
+      readonly = inputRef.value.ref.hasAttribute("readonly");
+    });
+    __expose({
       /** @description the index of the currently highlighted item */
-      highlightedIndex: l,
+      highlightedIndex,
       /** @description autocomplete whether activated */
-      activated: f,
+      activated,
       /** @description remote search loading status */
-      loading: v,
+      loading,
       /** @description el-input component instance */
-      inputRef: o,
+      inputRef,
       /** @description el-tooltip component instance */
-      popperRef: S,
+      popperRef,
       /** @description fetch suggestions result */
-      suggestions: u,
+      suggestions,
       /** @description triggers when a suggestion is clicked */
-      handleSelect: V,
+      handleSelect,
       /** @description handle keyboard enter event */
-      handleKeyEnter: H,
+      handleKeyEnter,
       /** @description focus the input element */
-      focus: fe,
+      focus,
       /** @description blur the input element */
-      blur: de,
+      blur,
       /** @description close suggestion */
-      close: h,
+      close,
       /** @description highlight an item in a suggestion */
-      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")
+      highlight
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(VftTooltip), {
+        ref_key: "popperRef",
+        ref: popperRef,
+        visible: suggestionVisible.value,
+        placement: _ctx.placement,
+        "fallback-placements": ["bottom-start", "top-start"],
+        "popper-class": [unref(ns).e("popper"), _ctx.popperClass],
+        teleported: _ctx.teleported,
+        "gpu-acceleration": false,
+        pure: "",
+        "manual-mode": "",
+        effect: "light",
+        trigger: "click",
+        transition: `${unref(ns).namespace.value}-zoom-in-top`,
+        persistent: "",
+        onBeforeShow: onSuggestionShow,
+        onHide
+      }, {
+        content: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "regionRef",
+            ref: regionRef,
+            class: normalizeClass([unref(ns).b("suggestion"), unref(ns).is("loading", suggestionLoading.value)]),
+            style: normalizeStyle({
+              [_ctx.fitInputWidth ? "width" : "minWidth"]: dropdownWidth.value,
+              outline: "none"
+            }),
+            role: "region"
+          }, [
+            createVNode(unref(VftScrollbar), {
+              id: listboxId.value,
+              tag: "ul",
+              "wrap-class": unref(ns).be("suggestion", "wrap"),
+              "view-class": unref(ns).be("suggestion", "list"),
+              role: "listbox"
+            }, {
+              default: withCtx(() => [
+                suggestionLoading.value ? (openBlock(), createElementBlock("li", {
+                  key: 0,
+                  class: normalizeClass(unref(ns).is("loading"))
+                }, null, 2)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(suggestions.value, (item, index) => {
+                  return openBlock(), createElementBlock("li", {
+                    id: `${listboxId.value}-item-${index}`,
+                    key: index,
+                    class: normalizeClass({ highlighted: highlightedIndex.value === index }),
+                    role: "option",
+                    "aria-selected": highlightedIndex.value === index,
+                    onClick: ($event) => handleSelect(item)
+                  }, [
+                    renderSlot(_ctx.$slots, "default", { item }, () => [
+                      createTextVNode(toDisplayString(item[_ctx.valueKey]), 1)
+                    ])
+                  ], 10, _hoisted_2);
+                }), 128))
               ]),
-              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"]));
+              _: 3
+            }, 8, ["id", "wrap-class", "view-class"])
+          ], 6)
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "listboxRef",
+            ref: listboxRef,
+            class: normalizeClass([unref(ns).b(), _ctx.$attrs.class]),
+            style: normalizeStyle(styles.value),
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": suggestionVisible.value,
+            "aria-owns": listboxId.value
+          }, [
+            createVNode(unref(VftInput), mergeProps({
+              ref_key: "inputRef",
+              ref: inputRef
+            }, unref(attrs), {
+              clearable: _ctx.clearable,
+              disabled: unref(_disabled),
+              name: _ctx.name,
+              "model-value": _ctx.modelValue,
+              onInput: handleInput,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onClear: handleClear,
+              onKeydown: [
+                _cache[0] || (_cache[0] = withKeys(withModifiers(($event) => highlight(highlightedIndex.value - 1), ["prevent"]), ["up"])),
+                _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => highlight(highlightedIndex.value + 1), ["prevent"]), ["down"])),
+                withKeys(handleKeyEnter, ["enter"]),
+                withKeys(close, ["tab"]),
+                withKeys(handleKeyEscape, ["esc"])
+              ],
+              onMousedown: handleMouseDown
+            }), createSlots({ _: 2 }, [
+              _ctx.$slots.prepend ? {
+                name: "prepend",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "prepend")
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.append ? {
+                name: "append",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "append")
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.prefix ? {
+                name: "prefix",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "prefix")
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots.suffix ? {
+                name: "suffix",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "suffix")
+                ]),
+                key: "3"
+              } : void 0
+            ]), 1040, ["clearable", "disabled", "name", "model-value"])
+          ], 14, _hoisted_1)
+        ]),
+        _: 3
+      }, 8, ["visible", "placement", "popper-class", "teleported", "transition"]);
+    };
   }
 });
 export {
-  at as default
+  _sfc_main as default
 };