hys-ui 0.1.1 → 0.2.0

package/dist/components/HysSelect/HysSelect2.vue.js

@@ -1,222 +1,896 @@
-import { defineComponent as Q, ref as p, useId as Y, computed as I, watch as m, nextTick as q, openBlock as s, createElementBlock as n, mergeProps as F, unref as i, createElementVNode as L, renderSlot as C, Fragment as D, renderList as K, toDisplayString as z, createBlock as E, withModifiers as Z, createVNode as _, createCommentVNode as V, Teleport as ee, withDirectives as le, vModelText as ae, createTextVNode as H, normalizeClass as te } from "vue";
-import { LoaderCircle as ie, ChevronDown as se, X as oe, Check as ue } from "lucide-vue-next";
-import { useHysRootAttrs as re } from "../../config.js";
-import { useFloating as ne } from "../../composables/useFloating.js";
-const de = ["aria-label", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant"], ce = { class: "hys-ui-select-label" }, ve = ["title"], ye = ["aria-controls", "aria-activedescendant"], fe = ["id", "aria-multiselectable"], he = {
+import { defineComponent as Va, useAttrs as za, inject as La, ref as w, useId as $a, shallowRef as pe, computed as r, watch as I, nextTick as z, onMounted as Ea, onUpdated as Fa, onActivated as Ha, onDeactivated as ja, onBeforeUnmount as Wa, openBlock as c, createElementBlock as v, mergeProps as qe, unref as s, createElementVNode as U, withModifiers as Ae, renderSlot as x, Fragment as le, renderList as Pe, toDisplayString as Q, createVNode as Oe, createCommentVNode as L, createTextVNode as J, normalizeClass as va, createBlock as Re, Teleport as Ka, normalizeStyle as he } from "vue";
+import { X as fa, LoaderCircle as qa, ChevronDown as Pa, Plus as Ra, Check as Da } from "lucide-vue-next";
+import { fieldKey as Na, useHysControlState as Ia, formValue as Ua } from "../../composables/formContext.js";
+import { useHysRootAttrs as Qa } from "../../config.js";
+import { useFloating as Ya } from "../../composables/useFloating.js";
+import { normalizeSelectOptions as Xa, selectKeyFactory as Ga } from "../../composables/selectOptions.js";
+const Ja = ["disabled"], Za = ["id", "tabindex", "aria-label", "aria-expanded", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "aria-describedby", "aria-controls", "aria-activedescendant"], _a = { class: "hys-ui-select-label" }, et = ["title"], at = ["disabled", "aria-label", "onClick"], tt = ["title"], lt = ["title"], ot = {
   key: 0,
-  class: "hys-ui-floating-empty"
-}, be = ["id", "data-active", "aria-selected", "disabled", "onPointerenter", "onClick"], pe = ["title"], me = {
+  class: "hys-ui-select-suffix"
+}, it = ["name", "value", "disabled"], ut = ["data-size", "data-placement"], st = {
+  key: 0,
+  class: "hys-ui-select-header"
+}, nt = ["value", "aria-controls", "aria-activedescendant"], rt = ["id", "aria-label", "aria-multiselectable", "aria-busy"], ct = {
   key: 0,
+  class: "hys-ui-floating-empty",
+  role: "status"
+}, dt = {
+  key: 1,
+  class: "hys-ui-floating-empty",
+  role: "status"
+}, vt = ["id", "data-active", "aria-label", "aria-description", "aria-selected", "aria-setsize", "aria-posinset", "disabled", "onPointerenter", "onClick"], ft = ["title"], pt = {
+  key: 0,
+  class: "hys-ui-select-create-label"
+}, ht = {
+  key: 3,
   class: "hys-ui-floating-empty"
-}, Ve = /* @__PURE__ */ Q({
+}, yt = {
+  key: 2,
+  class: "hys-ui-select-footer"
+}, Ct = /* @__PURE__ */ Va({
+  inheritAttrs: !1,
   __name: "HysSelect",
   props: {
     modelValue: {},
-    options: {},
+    defaultValue: {},
+    options: { default: () => [] },
+    fieldNames: { default: () => ({}) },
+    valueKey: { default: "value" },
     disabled: { type: Boolean },
+    readonly: { type: Boolean },
     ariaLabel: {},
     placeholder: { default: "请选择" },
     multiple: { type: Boolean },
     filterable: { type: Boolean },
     clearable: { type: Boolean },
+    emptyValues: { default: () => ["", null, void 0] },
+    clearValue: { type: [String, Number, Boolean, Object, null], default: "" },
+    fallbackOption: { type: [Boolean, Function] },
+    multipleLimit: { default: 0 },
+    maxTagCount: {},
+    maxTagTextLength: {},
+    removable: { type: Boolean, default: !0 },
+    clearSearchAfterSelect: { type: Boolean, default: !1 },
+    allowCreate: { type: Boolean },
+    createOption: {},
+    tokenSeparators: {},
+    clearCreatedOnClear: { type: Boolean, default: !0 },
     loading: { type: Boolean },
     remote: { type: Boolean },
-    popupMatchWidth: { type: Boolean },
+    remoteMethod: {},
+    debounce: { default: 0 },
+    searchValue: {},
     filterMethod: {},
+    filterSort: {},
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean },
+    showOnFocus: { type: Boolean },
+    retainSearch: { type: Boolean },
+    defaultActiveFirst: { type: Boolean, default: !0 },
+    keyboard: { type: Boolean, default: !0 },
+    popupMatchWidth: { type: Boolean },
+    popupWidth: {},
+    placement: { default: "bottom-start" },
+    appendTo: { type: [String, Boolean], default: "body" },
+    popupClass: {},
+    popupStyle: {},
+    listHeight: { default: 240 },
+    virtual: { type: Boolean, default: !0 },
+    itemHeight: {},
+    overscan: { default: 4 },
     emptyText: { default: "暂无选项" },
-    size: { default: "md" }
+    noMatchText: { default: "没有匹配选项" },
+    loadingText: { default: "加载中…" },
+    size: {},
+    status: {},
+    showArrow: { type: Boolean, default: !0 },
+    showCheckmark: { type: Boolean, default: !0 },
+    bordered: { type: Boolean, default: !0 },
+    autofocus: { type: Boolean },
+    name: {}
   },
-  emits: ["update:modelValue", "change", "clear", "search", "visibleChange"],
-  setup(d, { expose: R, emit: X }) {
-    const t = d, k = X, N = re(), g = p(), B = p(), P = p(), y = p(""), o = p(0), f = Y(), { open: v, style: j, show: G, close: h, update: J } = ne(g, B, { placement: "bottom-start", matchWidth: () => t.popupMatchWidth ? !0 : "min" }), x = I(() => t.multiple || Array.isArray(t.modelValue)), u = I(() => Array.isArray(t.modelValue) ? t.modelValue : [t.modelValue].filter(Boolean)), T = p(/* @__PURE__ */ new Map());
-    m(() => [t.options, u.value], () => {
-      const e = T.value, a = /* @__PURE__ */ new Map();
-      for (const l of t.options) a.set(l.value, l);
-      for (const l of u.value) !a.has(l) && e.has(l) && a.set(l, e.get(l));
-      T.value = a;
-    }, { immediate: !0, deep: !0 });
-    const w = I(() => u.value.map((e) => T.value.get(e) ?? { value: e, label: e })), r = I(() => t.remote ? t.options : t.options.filter((e) => !y.value || (t.filterMethod ? t.filterMethod(y.value, e) : e.label.toLocaleLowerCase().includes(y.value.toLocaleLowerCase()))));
-    function $(e) {
-      k("update:modelValue", e), k("change", e);
-    }
-    function S(e) {
-      const a = r.value[e];
-      !a || a.disabled || t.disabled || t.loading || (x.value ? $(u.value.includes(a.value) ? u.value.filter((l) => l !== a.value) : [...u.value, a.value]) : ($(a.value), h(!0)));
-    }
-    function O() {
-      var e;
-      t.disabled || ($(x.value ? [] : ""), k("clear"), (e = g.value) == null || e.focus());
+  emits: ["update:modelValue", "change", "clear", "update:open", "visibleChange", "update:searchValue", "search", "select", "deselect", "removeTag", "create", "reject", "searchError", "focus", "blur", "popupScroll", "reachEnd"],
+  setup(d, { expose: pa, emit: ha }) {
+    const l = d, f = ha, ya = za(), De = Qa(), $ = La(Na, void 0), {
+      disabled: m,
+      size: B,
+      label: Ne
+    } = Ia(l), b = w(), H = w(), A = w(), Z = w(), oe = $a(), Ve = w("");
+    function Ie() {
+      var o;
+      const e = (o = b.value) == null ? void 0 : o.closest("label");
+      if (!e) {
+        Ve.value = "";
+        return;
+      }
+      const a = e.cloneNode(!0);
+      a.querySelectorAll(".hys-ui-select-wrap").forEach((i) => i.remove()), Ve.value = (a.textContent ?? "").replace(/\s+/g, " ").trim();
     }
-    async function M() {
+    const Ue = pe(l.defaultValue ?? null), _ = r(
+      () => l.modelValue !== void 0 ? l.modelValue : Ue.value
+    ), j = r(() => l.multiple || Array.isArray(_.value)), n = Ga(() => l.valueKey), g = r(() => {
+      const e = Array.isArray(_.value) ? _.value.filter((o) => o != null) : _.value == null || l.emptyValues.some((o) => Object.is(o, _.value)) ? [] : [_.value], a = /* @__PURE__ */ new Set();
+      return e.filter((o) => {
+        const i = n(o);
+        return a.has(i) ? !1 : (a.add(i), !0);
+      });
+    }), W = r(() => new Set(g.value.map(n))), K = pe([]), q = pe(/* @__PURE__ */ new Map()), ye = pe(), me = w(!1), ie = pe(), Qe = w(""), be = w(l.searchValue ?? ""), ge = w(!1), k = r(() => l.searchValue ?? Qe.value), ue = r(() => l.filterable || l.allowCreate), Ye = r(
+      () => Xa(
+        ye.value ?? l.options,
+        l.fieldNames,
+        n
+      )
+    ), se = r(
+      () => Ye.value.flatMap((e) => e.option ? [e.option] : [])
+    );
+    I(
+      [se, g, K],
+      () => {
+        const e = q.value, a = /* @__PURE__ */ new Map();
+        for (const o of [...K.value, ...se.value])
+          a.set(n(o.value), o);
+        for (const o of g.value) {
+          const i = n(o);
+          !a.has(i) && e.has(i) && a.set(i, e.get(i));
+        }
+        q.value = a;
+      },
+      { immediate: !0 }
+    );
+    function Xe(e) {
+      if (l.fallbackOption !== !1)
+        return typeof l.fallbackOption == "function" ? l.fallbackOption(e) : {
+          value: e,
+          label: String(
+            typeof e == "object" ? e.label ?? e.name ?? e[l.valueKey] ?? "未命名选项" : e
+          )
+        };
+    }
+    const M = r(
+      () => g.value.flatMap((e) => {
+        const a = q.value.get(n(e)) ?? Xe(e);
+        return a ? [a] : [];
+      })
+    ), Ge = r(
+      () => M.value.slice(
+        0,
+        l.maxTagCount === void 0 ? void 0 : Math.max(0, l.maxTagCount)
+      )
+    ), ke = r(
+      () => M.value.slice(Ge.value.length)
+    ), P = r(() => l.loading || me.value), ze = r(
+      () => j.value && l.multipleLimit > 0 && g.value.length >= l.multipleLimit
+    ), xe = r(
+      () => {
+        var e, a;
+        return l.status ?? ((e = $ == null ? void 0 : $.invalid) != null && e.value ? "error" : (a = $ == null ? void 0 : $.status) == null ? void 0 : a.value);
+      }
+    ), ee = r(
+      () => B.value === "sm" ? 14 : B.value === "lg" ? 18 : 16
+    ), E = r(
+      () => Math.max(
+        24,
+        l.itemHeight ?? (B.value === "sm" ? 34 : B.value === "lg" ? 50 : 42)
+      )
+    ), Le = r(() => {
+      const e = k.value.trim();
+      if (!(!l.allowCreate || !e || [...se.value, ...K.value].some(
+        (a) => a.label === e || n(a.value) === n(e)
+      )))
+        return { value: e, label: e };
+    }), T = r(() => {
+      let e = Ye.value.filter((u) => u.option).concat(
+        K.value.filter(
+          (u) => !se.value.some(
+            (t) => n(t.value) === n(u.value)
+          )
+        ).map((u) => ({ key: n(u.value), option: u, index: -1 }))
+      );
+      !l.remote && !l.remoteMethod && (e = e.filter(
+        (u) => !k.value || (l.filterMethod ? l.filterMethod(k.value, u.option) : u.option.label.toLocaleLowerCase().includes(k.value.toLocaleLowerCase()))
+      )), l.filterSort && (e = [...e].sort(
+        (u, t) => l.filterSort(u.option, t.option)
+      )), Le.value && (e = [
+        {
+          key: "create:" + n(Le.value.value),
+          option: Le.value,
+          created: !0,
+          index: -1
+        },
+        ...e
+      ]);
+      const a = [];
+      let o, i = 0;
+      for (const u of e)
+        u.group !== o && (o = u.group, o && a.push({ key: "group:" + o + ":" + i, index: -1, group: o })), a.push({ ...u, index: i++ });
+      return a;
+    }), ma = r(
+      () => T.value.filter((e) => e.option).length
+    ), S = w(), Te = w(0), $e = w(0), O = r(
+      () => l.virtual && T.value.length > 100
+    ), ne = r(
+      () => Math.min(
+        800,
+        Math.max(80, Number.isFinite(l.listHeight) ? l.listHeight : 240)
+      )
+    ), Je = r(() => Math.max(1, Math.min(30, l.overscan))), Ee = r(
+      () => O.value ? Math.max(
+        0,
+        Math.min(
+          Math.max(0, T.value.length - 1),
+          Math.floor(Te.value / E.value) - Je.value
+        )
+      ) : 0
+    ), Ze = r(
+      () => O.value ? T.value.slice(
+        Ee.value,
+        Ee.value + Math.ceil(ne.value / E.value) + Je.value * 2
+      ) : T.value
+    ), re = r(
+      () => T.value.find((e) => e.key === S.value)
+    ), _e = r(
+      () => {
+        var e;
+        return !P.value && ((e = re.value) != null && e.option) && (!O.value || Ze.value.some((a) => a.key === S.value)) ? oe + "-" + re.value.index : void 0;
+      }
+    ), ba = r(() => {
+      var o;
+      if (!O.value || l.popupMatchWidth || l.popupWidth !== void 0)
+        return l.popupWidth;
+      const e = B.value === "sm" ? 12 : B.value === "lg" ? 15 : 14;
+      let a = 0;
+      for (const i of T.value) {
+        const u = ((o = i.option) == null ? void 0 : o.label) ?? i.group ?? "";
+        let t = 0;
+        for (const y of u) t += y.charCodeAt(0) > 255 ? 1 : 0.58;
+        a = Math.max(a, t * e);
+      }
+      return Math.max($e.value, a + 52);
+    });
+    let R = !0, ce = !1, de = 0, ae, Fe, Y, He = 0, Ce, Me = "";
+    const {
+      open: h,
+      style: ga,
+      placement: ka,
+      show: xa,
+      close: V,
+      update: Se,
+      restoringFocus: Ta
+    } = Ya(b, H, {
+      get placement() {
+        return l.placement;
+      },
+      matchWidth: () => l.popupMatchWidth ? !0 : "min",
+      width: () => ba.value,
+      requestOpen: (e) => (f("update:open", e), l.open === void 0 ? void 0 : !1)
+    }), Ca = r(() => ({
+      ...l.popupStyle,
+      ...ga.value,
+      maxHeight: "min(60dvh, calc(100dvh - 20px))",
+      overflowY: "hidden",
+      "--hys-ui-select-stride": E.value + "px",
+      "--hys-ui-select-list-height": ne.value + "px"
+    })), Ma = () => Object.fromEntries(
+      Object.entries(ya).filter(([e]) => !["class", "style"].includes(e))
+    ), X = (e) => !!e.disabled || l.readonly || P.value || m.value || ze.value && !W.value.has(n(e.value));
+    function ea() {
+      return T.value.filter((e) => e.option && !X(e.option));
+    }
+    function we(e = !1) {
+      var i;
+      const a = ea(), o = a.find(
+        (u) => W.value.has(n(u.option.value))
+      );
+      S.value = (i = o ?? (l.defaultActiveFirst ? e ? a.at(-1) : a[0] : void 0)) == null ? void 0 : i.key;
+    }
+    async function G() {
+      var a, o;
+      const e = T.value.findIndex(
+        (i) => i.key === S.value
+      );
+      if (!(e < 0)) {
+        if (O.value && A.value) {
+          const i = e * E.value, u = i + E.value, t = A.value.clientHeight || ne.value;
+          i < A.value.scrollTop ? A.value.scrollTop = i : u > A.value.scrollTop + t && (A.value.scrollTop = u - t), Te.value = A.value.scrollTop;
+        }
+        await z(), O.value || (o = (a = H.value) == null ? void 0 : a.querySelector('[data-active="true"]')) == null || o.scrollIntoView({ block: "nearest" });
+      }
+    }
+    function te(e) {
+      const a = Array.isArray(e) ? e : e == null || l.emptyValues.some((i) => Object.is(i, e)) ? [] : [e];
+      if (a.length === g.value.length && a.every((i, u) => n(i) === n(g.value[u])))
+        return;
+      l.modelValue === void 0 && (Ue.value = e);
+      const o = a.flatMap((i) => {
+        const u = q.value.get(n(i)) ?? Xe(i);
+        return u ? [u] : [];
+      });
+      f("update:modelValue", e), f("change", e, j.value ? o : o[0]);
+    }
+    function ve(e) {
+      be.value = e, l.searchValue === void 0 && (Qe.value = e), f("update:searchValue", e);
+    }
+    function aa(e) {
+      q.value.has(n(e.value)) || (K.value = [...K.value, e], q.value = new Map(q.value).set(
+        n(e.value),
+        e
+      ), f("create", e));
+    }
+    function ta(e) {
+      try {
+        const a = l.createOption ? l.createOption(e) : { label: e, value: e };
+        return a ? { ...a, label: String(a.label) } : void 0;
+      } catch {
+        f("reject", e, "create");
+        return;
+      }
+    }
+    async function la(e) {
+      var u;
+      if (!(e != null && e.option) || X(e.option)) return;
+      let a = e.option;
+      if (e.created) {
+        const t = ta(a.label);
+        if (!t) return;
+        if (a = q.value.get(n(t.value)) ?? t, ze.value && !W.value.has(n(a.value))) {
+          f("reject", a.value, "limit");
+          return;
+        }
+        aa(a);
+      }
+      const o = n(a.value), i = W.value.has(o);
+      if (j.value) {
+        if (i)
+          te(g.value.filter((t) => n(t) !== o)), f("deselect", a.value, a);
+        else {
+          if (ze.value) {
+            f("reject", a.value, "limit");
+            return;
+          }
+          te([...g.value, a.value]), f("select", a.value, a);
+        }
+        l.clearSearchAfterSelect && ve(""), await z(), h.value && ue.value && ((u = Z.value) == null || u.focus());
+      } else
+        te(a.value), f("select", a.value, a), V(!0);
+    }
+    function je(e) {
       var a;
-      if (t.disabled) return;
-      if (v.value) {
-        h();
+      m.value || l.readonly || e.disabled || !l.removable || (te(g.value.filter((o) => n(o) !== n(e.value))), f("removeTag", e.value, e), f("deselect", e.value, e), (a = b.value) == null || a.focus());
+    }
+    function Sa() {
+      var e, a;
+      m.value || l.readonly || (fe(), te(j.value ? [] : l.clearValue), l.clearCreatedOnClear && (K.value = []), ve(""), f("clear"), h.value && ue.value ? (e = Z.value) == null || e.focus() : (a = b.value) == null || a.focus());
+    }
+    async function F(e = !1, a = !1) {
+      var o;
+      !R || m.value || (!l.retainSearch && !l.searchValue && ve(""), we(e), await xa(a), await z(), h.value && (ue.value && ((o = Z.value) == null || o.focus()), await G()));
+    }
+    function oa() {
+      h.value ? V() : F();
+    }
+    function fe() {
+      de++, clearTimeout(Fe), Fe = void 0, ae == null || ae.abort(), ae = void 0, me.value = !1;
+    }
+    function Be(e, a = !1) {
+      if (fe(), !l.remoteMethod || !h.value || !R || m.value)
         return;
+      const o = de, i = new AbortController();
+      ae = i, me.value = !0, ie.value = void 0;
+      const u = async () => {
+        try {
+          const t = await l.remoteMethod(e, {
+            signal: i.signal
+          });
+          if (!R || i.signal.aborted || o !== de || !h.value)
+            return;
+          Array.isArray(t) && (ye.value = t);
+        } catch (t) {
+          if (i.signal.aborted || o !== de || !R) return;
+          ie.value = t, ye.value = [], f("searchError", t, e);
+        } finally {
+          o === de && (me.value = !1, ae = void 0, await z(), h.value && (we(), Se(), G()));
+        }
+      };
+      a || l.debounce <= 0 ? u() : Fe = setTimeout(u, l.debounce);
+    }
+    function We() {
+      Be(k.value, !0);
+    }
+    function wa(e) {
+      var p;
+      if (m.value || l.readonly || P.value || !j.value || !l.allowCreate || !((p = l.tokenSeparators) != null && p.length))
+        return !1;
+      let a = [e], o = !1;
+      for (const C of l.tokenSeparators)
+        C && (a.some((D) => D.includes(C)) && (o = !0), a = a.flatMap((D) => D.split(C)));
+      if (!o) return !1;
+      const i = a.pop() ?? "", u = [...g.value], t = new Set(u.map(n));
+      let y = !1;
+      for (const C of a.map((D) => D.trim()).filter(Boolean)) {
+        const D = [...se.value, ...K.value].find(
+          (da) => da.label === C || n(da.value) === n(C)
+        ), N = D ?? ta(C);
+        if (!N) continue;
+        const ca = n(N.value);
+        if (!(t.has(ca) || N.disabled)) {
+          if (l.multipleLimit > 0 && u.length >= l.multipleLimit) {
+            f("reject", N.value, "limit");
+            continue;
+          }
+          D || aa(N), t.add(ca), u.push(N.value), y = !0, f("select", N.value, N);
+        }
       }
-      y.value = "";
-      const e = r.value.findIndex((l) => u.value.includes(l.value) && !l.disabled);
-      o.value = e >= 0 ? e : r.value.findIndex((l) => !l.disabled), await G(), t.filterable && ((a = P.value) == null || a.focus());
-    }
-    async function W(e) {
-      var a, l, c;
-      if (!(t.disabled || e.isComposing || e.keyCode === 229))
-        if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
-          if (e.preventDefault(), !v.value) await M();
+      return y && te(u), ve(i), !0;
+    }
+    function ia(e) {
+      if (m.value) return;
+      const a = e.target.value;
+      be.value = a, !ge.value && (wa(a) || ve(a));
+    }
+    function Ba(e) {
+      ge.value = !1, ia(e);
+    }
+    async function ua(e) {
+      var i, u;
+      if (m.value || !l.keyboard || e.isComposing || ge.value || e.keyCode === 229 || e.target.closest(
+        ".hys-ui-select-tag button,.hys-ui-select-clear"
+      ))
+        return;
+      const a = e.target === Z.value, o = e.target;
+      if (!(o !== b.value && !a && !o.matches('[role="option"]') && o.closest(
+        'button,input,textarea,select,a,[role="button"],[contenteditable="true"]'
+      ))) {
+        if (["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(
+          e.key
+        )) {
+          if (e.preventDefault(), !h.value)
+            await F(e.key === "ArrowUp" || e.key === "End");
           else {
-            const b = e.key === "ArrowUp" ? -1 : 1;
-            let A = e.key === "Home" ? -1 : e.key === "End" ? r.value.length : o.value;
-            for (let U = 0; U < r.value.length; U++)
-              if (A = (A + (e.key === "End" ? -1 : b) + r.value.length) % r.value.length, !r.value[A].disabled) {
-                o.value = A;
+            const t = T.value, y = ["ArrowUp", "End", "PageUp"].includes(e.key) ? -1 : 1;
+            let p = e.key === "Home" ? -1 : e.key === "End" ? t.length : t.findIndex((C) => C.key === S.value);
+            e.key.startsWith("Page") && (p = Math.max(
+              -1,
+              Math.min(
+                t.length,
+                p + y * (Math.max(1, Math.floor(ne.value / E.value)) - 1)
+              )
+            ));
+            for (let C = 0; C < t.length; C++)
+              if (p = (p + y + t.length) % t.length, t[p].option && !X(t[p].option)) {
+                S.value = t[p].key;
                 break;
               }
           }
-          await q(), (l = (a = B.value) == null ? void 0 : a.querySelector('[data-active="true"]')) == null || l.scrollIntoView({ block: "nearest" });
-        } else e.key === "Enter" || e.key === " " && !t.filterable ? (e.preventDefault(), v.value ? S(o.value) : await M()) : e.key === "Tab" && h(!!((c = B.value) != null && c.contains(document.activeElement)));
-    }
-    return m(y, (e) => {
-      o.value = r.value.findIndex((a) => !a.disabled), k("search", e);
-    }), m(r, (e) => {
-      (!e[o.value] || e[o.value].disabled) && (o.value = e.findIndex((a) => !a.disabled)), v.value && q(J);
-    }, { deep: !0 }), m(() => t.popupMatchWidth, () => {
-      v.value && (h(), M());
-    }), m(v, (e) => k("visibleChange", e)), m(() => t.disabled, (e) => {
-      e && h();
-    }), R({ focus: () => {
-      var e;
-      return (e = g.value) == null ? void 0 : e.focus();
-    }, blur: () => {
+          await G();
+        } else if (e.key === "Enter" || e.key === " " && !a)
+          e.preventDefault(), h.value ? await la(re.value) : await F();
+        else if (e.key === "Tab")
+          V(!!((i = H.value) != null && i.contains(document.activeElement)));
+        else if (e.key === "Backspace" && j.value && !k.value) {
+          const t = [...M.value].reverse().find((y) => !y.disabled);
+          t && l.removable && (e.preventDefault(), je(t), a && (await z(), (u = Z.value) == null || u.focus()));
+        } else if (!ue.value && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          Me += e.key.toLocaleLowerCase(), clearTimeout(Ce), Ce = setTimeout(() => {
+            Me = "";
+          }, 600), h.value || await F();
+          const t = ea().find(
+            (y) => y.option.label.toLocaleLowerCase().startsWith(Me)
+          );
+          t && (S.value = t.key, await G());
+        }
+      }
+    }
+    function sa(e) {
+      ce || (ce = !0, f("focus", e)), l.showOnFocus && !h.value && !Ta.value && e.target === b.value && F();
+    }
+    function na(e) {
+      z(() => {
+        var o, i;
+        const a = document.activeElement;
+        ce && !((o = b.value) != null && o.contains(a)) && !((i = H.value) != null && i.contains(a)) && (ce = !1, f("blur", e));
+      });
+    }
+    function Aa(e) {
+      const a = e.target;
+      Te.value = a.scrollTop, f("popupScroll", e), a.scrollTop + a.clientHeight >= a.scrollHeight - 2 && f("reachEnd");
+    }
+    function Ke() {
+      Y == null || Y.disconnect(), Y = void 0, cancelAnimationFrame(He);
+    }
+    function Oa() {
+      if (Ke(), !h.value || !R) return;
+      const e = () => {
+        cancelAnimationFrame(He), He = requestAnimationFrame(() => {
+          var a;
+          $e.value = ((a = b.value) == null ? void 0 : a.clientWidth) ?? 0, Se();
+        });
+      };
+      typeof ResizeObserver < "u" && (Y = new ResizeObserver(e), b.value && Y.observe(b.value), H.value && Y.observe(H.value));
+    }
+    I(k, (e) => {
+      be.value = e, S.value = void 0, Te.value = 0, A.value && (A.value.scrollTop = 0), we(), f("search", e), Be(e), h.value && z(G);
+    }), I(T, () => {
+      var a;
+      const e = !((a = re.value) != null && a.option) || X(re.value.option);
+      e && we(), h.value && z(() => {
+        Se(), e && G();
+      });
+    }), I(
+      [
+        g,
+        B,
+        () => l.popupMatchWidth,
+        () => l.popupWidth,
+        () => l.placement
+      ],
+      () => {
+        h.value && z(Se);
+      }
+    ), I(h, (e) => {
+      var a;
+      f("visibleChange", e), e ? ($e.value = ((a = b.value) == null ? void 0 : a.clientWidth) ?? 0, z(Oa), Be(k.value)) : (Ke(), fe(), clearTimeout(Ce), Me = "");
+    }), I(
+      () => l.open,
+      (e) => {
+        R && (e ? F(!1, !0) : e === !1 && V(!1, !0));
+      }
+    ), I(
+      m,
+      (e) => {
+        e && (V(!1, !0), fe(), f("update:open", !1));
+      },
+      { flush: "sync" }
+    ), I(
+      () => l.remoteMethod,
+      () => {
+        ye.value = void 0, ie.value = void 0, h.value && Be(k.value);
+      }
+    );
+    function ra() {
+      R = !1, V(!1, !0), Ke(), fe(), clearTimeout(Ce), ce = !1;
+    }
+    return Ea(() => {
       var e;
-      return (e = g.value) == null ? void 0 : e.blur();
-    }, close: () => h() }), (e, a) => (s(), n("div", F(i(N), {
-      class: ["hys-ui-select-wrap", "hys-ui-select-" + d.size]
-    }), [
-      L("button", {
-        ref_key: "trigger",
-        ref: g,
-        type: "button",
-        class: "hys-ui-select",
-        "aria-label": d.ariaLabel,
-        disabled: d.disabled,
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-expanded": i(v),
-        "aria-controls": i(v) ? i(f) : void 0,
-        "aria-activedescendant": i(v) ? i(f) + "-" + o.value : void 0,
-        onClick: M,
-        onKeydown: W
-      }, [
-        L("span", ce, [
-          C(e.$slots, "label", { selected: w.value }, () => {
-            var l, c;
-            return [
-              x.value && w.value.length ? (s(!0), n(D, { key: 0 }, K(w.value, (b) => (s(), n("span", {
-                key: b.value,
-                class: "hys-ui-select-tag"
-              }, z(b.label), 1))), 128)) : (s(), n("span", {
+      Ie(), l.autofocus && !m.value && ((e = b.value) == null || e.focus()), (l.open ?? l.defaultOpen) && F(!1, !0);
+    }), Fa(Ie), Ha(() => {
+      R = !0, l.open && F(!1, !0);
+    }), ja(ra), Wa(ra), pa({
+      focus: () => {
+        var e;
+        m.value || (e = b.value) == null || e.focus();
+      },
+      blur: () => {
+        var a, o;
+        const e = document.activeElement;
+        e && ((a = b.value) != null && a.contains(e) || (o = H.value) != null && o.contains(e)) && e.blur(), V();
+      },
+      open: () => F(),
+      close: () => V(),
+      scrollTo: (e) => {
+        S.value = n(e), G();
+      },
+      retry: We,
+      selected: M,
+      query: k,
+      isOpen: h
+    }), (e, a) => {
+      var o, i, u;
+      return c(), v("div", qe(s(De), {
+        class: ["hys-ui-select-wrap", [e.$attrs.class, "hys-ui-select-" + s(B)]],
+        style: e.$attrs.style
+      }), [
+        U("button", {
+          hidden: "",
+          type: "button",
+          tabindex: "-1",
+          "aria-hidden": "true",
+          disabled: s(m),
+          onClick: a[0] || (a[0] = Ae((t) => {
+            var y;
+            (y = b.value) == null || y.focus(), oa();
+          }, ["prevent"]))
+        }, null, 8, Ja),
+        U("div", qe({
+          ref_key: "trigger",
+          ref: b
+        }, Ma(), {
+          class: ["hys-ui-select", {
+            "hys-ui-select-disabled": s(m),
+            "hys-ui-select-borderless": !d.bordered,
+            "hys-ui-select-error": xe.value === "error",
+            "hys-ui-select-warning": xe.value === "warning",
+            "hys-ui-select-success": xe.value === "success"
+          }],
+          id: e.$attrs.id || ((o = s($)) == null ? void 0 : o.id.value) || void 0,
+          "data-hys-ui-field-managed": "",
+          role: "combobox",
+          tabindex: s(m) ? -1 : 0,
+          "aria-label": d.ariaLabel || s(Ne) || Ve.value || M.value.map((t) => t.label).join("、") || d.placeholder,
+          "aria-haspopup": "listbox",
+          "aria-expanded": s(h),
+          "aria-disabled": s(m) || void 0,
+          "aria-readonly": d.readonly || void 0,
+          "aria-required": ((i = s($)) == null ? void 0 : i.required.value) || void 0,
+          "aria-invalid": xe.value === "error" || !1,
+          "aria-describedby": [e.$attrs["aria-describedby"], (u = s($)) == null ? void 0 : u.describedBy.value].filter(Boolean).join(" ") || void 0,
+          "aria-controls": s(h) ? s(oe) : void 0,
+          "aria-activedescendant": s(h) ? _e.value : void 0,
+          onClick: a[1] || (a[1] = Ae((t) => !t.target.closest("button") && oa(), ["prevent"])),
+          onKeydown: ua,
+          onFocusin: sa,
+          onFocusout: na
+        }), [
+          U("span", _a, [
+            x(e.$slots, "label", { selected: M.value }, () => {
+              var t, y;
+              return [
+                j.value && M.value.length ? (c(), v(le, { key: 0 }, [
+                  (c(!0), v(le, null, Pe(Ge.value, (p) => (c(), v("span", {
+                    key: s(n)(p.value),
+                    class: "hys-ui-select-tag"
+                  }, [
+                    x(e.$slots, "tag", {
+                      option: p,
+                      remove: () => je(p),
+                      disabled: s(m) || d.readonly || p.disabled
+                    }, () => [
+                      U("span", {
+                        class: "hys-ui-select-tag-text",
+                        title: p.label
+                      }, Q(d.maxTagTextLength && p.label.length > d.maxTagTextLength ? p.label.slice(0, d.maxTagTextLength) + "…" : p.label), 9, et),
+                      d.removable && !d.readonly && !p.disabled ? (c(), v("button", {
+                        key: 0,
+                        type: "button",
+                        disabled: s(m),
+                        "aria-label": "移除 " + p.label,
+                        onClick: Ae((C) => je(p), ["stop"])
+                      }, [
+                        x(e.$slots, "remove-icon", {}, () => [
+                          Oe(s(fa), {
+                            size: ee.value - 3
+                          }, null, 8, ["size"])
+                        ], !0)
+                      ], 8, at)) : L("", !0)
+                    ], !0)
+                  ]))), 128)),
+                  ke.value.length ? (c(), v("span", {
+                    key: 0,
+                    class: "hys-ui-select-tag hys-ui-select-more",
+                    title: ke.value.map((p) => p.label).join("、")
+                  }, [
+                    x(e.$slots, "max-tag", { omitted: ke.value }, () => [
+                      J("+" + Q(ke.value.length), 1)
+                    ], !0)
+                  ], 8, tt)) : L("", !0)
+                ], 64)) : (c(), v("span", {
+                  key: 1,
+                  class: va(["hys-ui-select-single-label", { "hys-ui-select-placeholder": !M.value.length }]),
+                  title: (t = M.value[0]) == null ? void 0 : t.label
+                }, Q(((y = M.value[0]) == null ? void 0 : y.label) ?? d.placeholder), 11, lt))
+              ];
+            }, !0)
+          ]),
+          d.showArrow || P.value ? (c(), v("span", ot, [
+            x(e.$slots, "suffix", {
+              open: s(h),
+              loading: P.value
+            }, () => [
+              P.value ? (c(), Re(s(qa), {
+                key: 0,
+                class: "hys-ui-icon-spin",
+                size: ee.value
+              }, null, 8, ["size"])) : (c(), Re(s(Pa), {
                 key: 1,
-                class: "hys-ui-select-single-label",
-                title: (l = w.value[0]) == null ? void 0 : l.label
-              }, z(((c = w.value[0]) == null ? void 0 : c.label) || d.placeholder), 9, ve))
-            ];
-          }, !0)
-        ]),
-        d.loading ? (s(), E(i(ie), {
-          key: 0,
-          class: "hys-ui-icon-spin",
-          size: 16
-        })) : (s(), E(i(se), {
-          key: 1,
-          class: "hys-ui-select-chevron",
-          size: 16,
-          "aria-hidden": "true"
-        }))
-      ], 40, de),
-      d.clearable && u.value.length && !d.disabled ? (s(), n("button", {
-        key: 0,
-        type: "button",
-        class: "hys-ui-select-clear",
-        "aria-label": "清空选择",
-        onClick: Z(O, ["stop"])
-      }, [
-        _(i(oe), { size: 13 })
-      ])) : V("", !0),
-      (s(), E(ee, { to: "body" }, [
-        i(v) ? (s(), n("div", F({
+                class: "hys-ui-select-chevron",
+                size: ee.value,
+                "aria-hidden": "true"
+              }, null, 8, ["size"]))
+            ], !0)
+          ])) : L("", !0)
+        ], 16, Za),
+        d.clearable && g.value.length && !s(m) && !d.readonly ? (c(), v("button", {
           key: 0,
-          ref_key: "panel",
-          ref: B
-        }, i(N), {
-          class: "hys-ui-select-options hys-ui-floating-surface",
-          style: i(j),
-          onKeydown: W
-        }), [
-          d.filterable ? le((s(), n("input", {
+          type: "button",
+          class: "hys-ui-select-clear",
+          "aria-label": "清空选择",
+          onClick: Ae(Sa, ["stop"])
+        }, [
+          x(e.$slots, "clear-icon", {}, () => [
+            Oe(s(fa), {
+              size: ee.value - 2
+            }, null, 8, ["size"])
+          ], !0)
+        ])) : L("", !0),
+        d.name ? (c(!0), v(le, { key: 1 }, Pe(g.value, (t, y) => (c(), v("input", {
+          key: y,
+          type: "hidden",
+          name: d.name,
+          value: String(typeof t == "object" ? s(Ua)(t, d.valueKey) ?? "" : t),
+          disabled: s(m)
+        }, null, 8, it))), 128)) : L("", !0),
+        (c(), Re(Ka, {
+          to: d.appendTo === !1 ? "body" : d.appendTo,
+          disabled: d.appendTo === !1
+        }, [
+          s(h) ? (c(), v("div", qe({
             key: 0,
-            ref_key: "searchInput",
-            ref: P,
-            "onUpdate:modelValue": a[0] || (a[0] = (l) => y.value = l),
-            class: "hys-ui-select-search",
-            placeholder: "搜索选项…",
-            "aria-label": "搜索选项",
-            "aria-controls": i(f),
-            "aria-activedescendant": i(f) + "-" + o.value
-          }, null, 8, ye)), [
-            [ae, y.value]
-          ]) : V("", !0),
-          L("div", {
-            id: i(f),
-            role: "listbox",
-            "aria-multiselectable": x.value || void 0
-          }, [
-            d.loading ? (s(), n("p", he, [
-              C(e.$slots, "loading", {}, () => [
-                a[1] || (a[1] = H("加载中…", -1))
-              ], !0)
-            ])) : (s(), n(D, { key: 1 }, [
-              (s(!0), n(D, null, K(r.value, (l, c) => (s(), n("button", {
-                id: i(f) + "-" + c,
-                key: l.value,
-                type: "button",
-                role: "option",
-                class: te(["hys-ui-select-option", { "hys-ui-selected": u.value.includes(l.value), "hys-ui-active": o.value === c && !l.disabled }]),
-                "data-active": o.value === c,
-                "aria-selected": u.value.includes(l.value),
-                disabled: l.disabled,
-                onPointerenter: (b) => !l.disabled && (o.value = c),
-                onClick: (b) => S(c)
+            ref_key: "panel",
+            ref: H
+          }, s(De), {
+            class: ["hys-ui-select-options hys-ui-floating-surface", ["hys-ui-select-popup-" + s(B), d.popupClass]],
+            "data-size": s(B),
+            "data-placement": s(ka),
+            style: Ca.value,
+            onKeydown: ua,
+            onFocusin: sa,
+            onFocusout: na
+          }), [
+            e.$slots.header ? (c(), v("div", st, [
+              x(e.$slots, "header", {
+                query: k.value,
+                selected: M.value,
+                close: () => s(V)()
+              }, void 0, !0)
+            ])) : L("", !0),
+            ue.value ? (c(), v("input", {
+              key: 1,
+              ref_key: "searchInput",
+              ref: Z,
+              value: be.value,
+              class: "hys-ui-select-search",
+              placeholder: "搜索选项…",
+              "aria-label": "搜索选项",
+              "aria-controls": s(oe),
+              "aria-activedescendant": _e.value,
+              "aria-autocomplete": "list",
+              onInput: ia,
+              onCompositionstart: a[2] || (a[2] = (t) => ge.value = !0),
+              onCompositionend: Ba
+            }, null, 40, nt)) : L("", !0),
+            U("div", {
+              id: s(oe),
+              ref_key: "viewport",
+              ref: A,
+              role: "listbox",
+              "aria-label": d.ariaLabel || s(Ne) || "可选项",
+              "aria-multiselectable": j.value || void 0,
+              "aria-busy": P.value || void 0,
+              class: "hys-ui-select-list",
+              style: he({
+                maxHeight: "min(" + ne.value + "px, 45dvh)"
+              }),
+              onScroll: Aa
+            }, [
+              P.value ? (c(), v("p", ct, [
+                x(e.$slots, "loading", {}, () => [
+                  J(Q(d.loadingText), 1)
+                ], !0)
+              ])) : ie.value ? (c(), v("div", dt, [
+                x(e.$slots, "error", {
+                  error: ie.value,
+                  retry: We
+                }, () => [
+                  a[3] || (a[3] = J("加载失败，", -1)),
+                  U("button", {
+                    type: "button",
+                    class: "hys-ui-select-retry",
+                    onClick: We
+                  }, " 重试 ")
+                ], !0)
+              ])) : T.value.length ? (c(), v("div", {
+                key: 2,
+                style: he(
+                  O.value ? {
+                    height: T.value.length * E.value + "px",
+                    position: "relative"
+                  } : void 0
+                ),
+                role: "presentation"
               }, [
-                L("span", {
-                  class: "hys-ui-select-option-label",
-                  title: l.label
+                U("div", {
+                  style: he(
+                    O.value ? {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      transform: "translateY(" + Ee.value * E.value + "px)"
+                    } : void 0
+                  ),
+                  role: "presentation"
                 }, [
-                  C(e.$slots, "option", {
-                    option: l,
-                    selected: u.value.includes(l.value)
-                  }, () => [
-                    H(z(l.label), 1)
-                  ], !0)
-                ], 8, pe),
-                u.value.includes(l.value) ? (s(), E(i(ue), {
-                  key: 0,
-                  size: 15,
-                  "aria-hidden": "true"
-                })) : V("", !0)
-              ], 42, be))), 128)),
-              r.value.length ? V("", !0) : (s(), n("p", me, [
-                C(e.$slots, "empty", {}, () => [
-                  H(z(d.emptyText), 1)
+                  (c(!0), v(le, null, Pe(Ze.value, (t) => (c(), v(le, {
+                    key: t.key
+                  }, [
+                    t.option ? (c(), v("button", {
+                      key: 1,
+                      id: s(oe) + "-" + t.index,
+                      type: "button",
+                      role: "option",
+                      tabindex: "-1",
+                      class: va(["hys-ui-select-option", {
+                        "hys-ui-selected": W.value.has(
+                          s(n)(t.option.value)
+                        ),
+                        "hys-ui-active": S.value === t.key && !X(t.option),
+                        "hys-ui-select-created": t.created
+                      }]),
+                      style: he(
+                        O.value ? {
+                          height: "calc(var(--hys-ui-select-stride) - var(--hys-ui-select-option-gap))",
+                          minHeight: 0
+                        } : void 0
+                      ),
+                      "data-active": S.value === t.key,
+                      "aria-label": t.created ? "创建 " + t.option.label : t.option.label,
+                      "aria-description": t.group,
+                      "aria-selected": W.value.has(s(n)(t.option.value)),
+                      "aria-setsize": ma.value,
+                      "aria-posinset": t.index + 1,
+                      disabled: X(t.option),
+                      onPointerenter: (y) => !X(t.option) && (S.value = t.key),
+                      onClick: (y) => la(t)
+                    }, [
+                      U("span", {
+                        class: "hys-ui-select-option-label",
+                        title: t.option.label
+                      }, [
+                        x(e.$slots, "option", {
+                          option: t.option,
+                          selected: W.value.has(s(n)(t.option.value)),
+                          created: !!t.created
+                        }, () => [
+                          t.created ? (c(), v("span", pt, [
+                            Oe(s(Ra), { size: ee.value }, null, 8, ["size"]),
+                            J("创建 " + Q(t.option.label), 1)
+                          ])) : (c(), v(le, { key: 1 }, [
+                            J(Q(t.option.label), 1)
+                          ], 64))
+                        ], !0)
+                      ], 8, ft),
+                      d.showCheckmark && W.value.has(s(n)(t.option.value)) ? x(e.$slots, "selected-icon", {
+                        option: t.option
+                      }, () => [
+                        Oe(s(Da), {
+                          size: ee.value - 1,
+                          "aria-hidden": "true"
+                        }, null, 8, ["size"])
+                      ], !0, 0) : L("", !0)
+                    ], 46, vt)) : (c(), v("div", {
+                      key: 0,
+                      class: "hys-ui-select-group",
+                      style: he(
+                        O.value ? { height: E.value + "px" } : void 0
+                      ),
+                      role: "presentation"
+                    }, [
+                      x(e.$slots, "group", {
+                        label: t.group
+                      }, () => [
+                        J(Q(t.group), 1)
+                      ], !0)
+                    ], 4))
+                  ], 64))), 128))
+                ], 4)
+              ], 4)) : (c(), v("p", ht, [
+                x(e.$slots, "empty", { query: k.value }, () => [
+                  J(Q(k.value ? d.noMatchText : d.emptyText), 1)
                 ], !0)
               ]))
-            ], 64))
-          ], 8, fe),
-          C(e.$slots, "footer", {}, void 0, !0)
-        ], 16)) : V("", !0)
-      ]))
-    ], 16));
+            ], 44, rt),
+            e.$slots.footer ? (c(), v("div", yt, [
+              x(e.$slots, "footer", {
+                query: k.value,
+                selected: M.value,
+                close: () => s(V)()
+              }, void 0, !0)
+            ])) : L("", !0)
+          ], 16, ut)) : L("", !0)
+        ], 8, ["to", "disabled"]))
+      ], 16);
+    };
   }
 });
 export {
-  Ve as default
+  Ct as default
 };