vuux/dist/es/AutoComplete/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as E, useTemplateRef as T, createElementBlock as a, openBlock as o, createElementVNode as t, createVNode as b, createBlock as u, createCommentVNode as c, unref as e, withModifiers as L, Transition as N, withCtx as m, normalizeClass as h, Fragment as O, renderList as z } from "vue";
import { ScrollBar as A } from "../../ScrollBar/index.mjs";
import { useAutoComplete as H } from "./hook/useAutoComplete.mjs";
import { Icon as j } from "@vuux/icons";
const D = { class: "input-data" }, F = ["value"], R = {
  key: 0,
  class: "is-loading"
}, S = {
  key: 1,
  class: "no-data"
}, $ = ["onClick", "innerHTML"], U = /* @__PURE__ */ E({
  name: "AutoComplete",
  __name: "index",
  props: {
    modelValue: {},
    label: { default: "name" },
    value: { default: "id" },
    options: {},
    fetchOptions: {},
    maxVisible: { default: 10 },
    debounceTime: { default: 300 },
    shadow: { type: Boolean },
    clear: { type: Boolean }
  },
  emits: ["update:modelValue", "select"],
  setup(f, { emit: k }) {
    const i = f, v = k, s = T("wrapperEl"), { inputValue: r, loading: w, showDropdown: C, filteredOptions: _, highlightIndex: g, startIndex: x, visibleOptions: y, clearInput: I, selectItem: B, onInputBox: d, onInputClick: p, highlightMatch: M } = H(i, s, v);
    return (q, n) => (o(), a("div", {
      class: "app-auto-complete",
      ref_key: "wrapperEl",
      ref: s
    }, [
      t("div", D, [
        t("input", {
          value: e(r),
          onInput: n[0] || (n[0] = //@ts-ignore
          (...l) => e(d) && e(d)(...l)),
          onClick: n[1] || (n[1] = //@ts-ignore
          (...l) => e(p) && e(p)(...l)),
          placeholder: "请输入内容"
        }, null, 40, F),
        e(r) && i.clear ? (o(), u(e(j), {
          key: 0,
          name: "Icon9176904",
          size: 13,
          onClick: L(e(I), ["stop"])
        }, null, 8, ["onClick"])) : c("", !0)
      ]),
      b(N, { name: "ease-drop" }, {
        default: m(() => [
          e(C) ? (o(), a("div", {
            key: 0,
            class: h(["result-lists", { "is-shadow": i.shadow }])
          }, [
            e(w) ? (o(), a("div", R, [...n[2] || (n[2] = [
              t("svg", {
                xmlns: "http://www.w3.org/2000/svg",
                width: "14",
                height: "14",
                viewBox: "0 0 24 24",
                fill: "currentColor",
                stroke: "currentColor",
                "stroke-width": "2",
                "stroke-linecap": "round",
                "stroke-linejoin": "round"
              }, [
                t("path", { d: "M12 2v4" }),
                t("path", { d: "m16.2 7.8 2.9-2.9" }),
                t("path", { d: "M18 12h4" }),
                t("path", { d: "m16.2 16.2 2.9 2.9" }),
                t("path", { d: "M12 18v4" }),
                t("path", { d: "m4.9 19.1 2.9-2.9" }),
                t("path", { d: "M2 12h4" }),
                t("path", { d: "m4.9 4.9 2.9 2.9" })
              ], -1)
            ])])) : e(_).length === 0 ? (o(), a("div", S, "暂无数据")) : (o(), u(e(A), { key: 2 }, {
              default: m(() => [
                t("ul", null, [
                  (o(!0), a(O, null, z(e(y), (l, V) => (o(), a("li", {
                    key: l[i.value ?? "id"],
                    class: h({ active: V + e(x) === e(g) }),
                    onClick: (G) => e(B)(l),
                    innerHTML: e(M)(l)
                  }, null, 10, $))), 128))
                ])
              ]),
              _: 1
            }))
          ], 2)) : c("", !0)
        ]),
        _: 1
      })
    ], 512));
  }
});
export {
  U as default
};