@rhino-design/vue 0.2.2 → 0.2.3

package/dist/components/XSelect.vue.js

@@ -0,0 +1,858 @@
+import { defineComponent as $t, useSlots as Mt, ref as M, computed as u, watch as se, onBeforeUnmount as Nt, openBlock as s, createBlock as N, mergeProps as Ge, withCtx as W, resolveDynamicComponent as qe, createElementBlock as r, renderSlot as f, createCommentVNode as y, createVNode as Y, unref as B, Fragment as g, normalizeStyle as ke, renderList as re, normalizeClass as K, createElementVNode as S, createTextVNode as F, toDisplayString as _, withModifiers as Ue, Comment as Je, Text as Qe, nextTick as We } from "vue";
+import I from "./XIcon.js";
+import Ye from "./XCheckbox.vue.js";
+import Ft from "./XEmpty.vue.js";
+import Pt from "./XScrollbar.vue.js";
+import zt from "./XTrigger.vue.js";
+import { useXConfig as Et, sizeClass as It } from "../composables/config.js";
+import { useXConfigProviderSlotRender as Lt } from "../composables/config-provider.js";
+import { useXFormField as At } from "../composables/form.js";
+import { useXI18n as Ht } from "../composables/i18n.js";
+const jt = {
+  key: 1,
+  class: "x-select-group"
+}, Dt = {
+  key: 0,
+  class: "x-select-group__addon x-select-group__addon--prepend"
+}, Rt = ["tabindex"], Kt = {
+  key: 0,
+  class: "x-select__prefix"
+}, Xt = { class: "x-select__value" }, Gt = { class: "x-select__tag-label" }, qt = ["onClick"], Ut = {
+  key: 0,
+  class: "x-select__tag x-select__tag--rest"
+}, Jt = ["value", "disabled", "placeholder"], Qt = {
+  key: 2,
+  class: "x-select__placeholder"
+}, Wt = ["value", "disabled", "placeholder"], Yt = {
+  key: 1,
+  class: "x-select__single"
+}, Zt = {
+  key: 2,
+  class: "x-select__placeholder"
+}, el = { class: "x-select__suffix" }, tl = {
+  key: 1,
+  class: "x-select-group__addon x-select-group__addon--append"
+}, ll = {
+  key: 0,
+  class: "x-select__header"
+}, al = {
+  key: 1,
+  class: "x-select__state x-select__state--loading"
+}, ol = ["data-option-key", "onClick", "onMouseenter"], nl = { class: "x-select__option-checkbox-label" }, ul = { class: "x-select__option-label" }, sl = { class: "x-select__option-suffix" }, rl = {
+  key: 0,
+  class: "x-select__group-title"
+}, il = ["data-option-key", "onClick", "onMouseenter"], cl = { class: "x-select__option-checkbox-label" }, dl = { class: "x-select__option-label" }, pl = { class: "x-select__option-suffix" }, fl = {
+  key: 4,
+  class: "x-select__footer"
+}, Vl = /* @__PURE__ */ $t({
+  __name: "XSelect",
+  props: {
+    modelValue: { type: [String, Number, Boolean, Object, Array], default: void 0 },
+    defaultValue: { type: [String, Number, Boolean, Object, Array], default: void 0 },
+    options: { default: () => [] },
+    placeholder: { default: "请选择" },
+    prepend: { default: void 0 },
+    append: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    multiple: { type: Boolean, default: !1 },
+    allowClear: { type: Boolean, default: !1 },
+    allowSearch: { type: [Boolean, Object], default: void 0 },
+    filterable: { type: Boolean, default: void 0 },
+    allowCreate: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    size: { default: void 0 },
+    popupVisible: { type: Boolean, default: void 0 },
+    defaultPopupVisible: { type: Boolean, default: !1 },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: !1 },
+    inputValue: { default: void 0 },
+    defaultInputValue: { default: "" },
+    searchValue: { default: void 0 },
+    defaultSearchValue: { default: "" },
+    maxTagCount: { default: 0 },
+    popupContainer: { default: "body" },
+    bordered: { type: Boolean, default: !0 },
+    unmountOnClose: { type: Boolean, default: !1 },
+    filterOption: { type: [Boolean, Function], default: !0 },
+    formatLabel: { type: Function, default: void 0 },
+    fallbackOption: { type: [Boolean, Function], default: !0 },
+    showExtraOptions: { type: Boolean, default: !0 },
+    valueKey: { default: "value" },
+    searchDelay: { default: 500 },
+    limit: { default: 0 },
+    fieldNames: { default: () => ({}) },
+    virtualListProps: { default: void 0 },
+    scrollbar: { type: [Boolean, Object], default: !0 },
+    showHeaderOnEmpty: { type: Boolean, default: !1 },
+    showFooterOnEmpty: { type: Boolean, default: !1 },
+    tagNowrap: { type: Boolean, default: !1 },
+    triggerProps: { default: () => ({}) },
+    defaultActiveFirstOption: { type: Boolean, default: !0 },
+    remote: { type: Boolean, default: !1 },
+    emptyText: { default: "暂无数据" }
+  },
+  emits: ["update:modelValue", "update:inputValue", "update:searchValue", "update:popupVisible", "update:open", "change", "inputValueChange", "input-value-change", "popupVisibleChange", "popup-visible-change", "clear", "remove", "search", "dropdownScroll", "dropdown-scroll", "dropdownReachBottom", "dropdown-reach-bottom", "exceedLimit", "exceed-limit", "focus", "blur"],
+  setup(d, { expose: Ze, emit: et }) {
+    const a = d, i = et, tt = Et(), v = At(), { t: _e } = Ht(), X = Mt(), L = M(null), O = M(null), Z = M(0), we = M(a.defaultValue ?? (a.multiple ? [] : void 0)), xe = M(!!(a.defaultPopupVisible ?? a.defaultOpen)), Ve = M(a.defaultInputValue ?? a.defaultSearchValue ?? ""), p = M(""), ie = M(!1);
+    let A;
+    const lt = u(() => a.size ?? tt.size.value), V = u(() => !!(a.disabled || v != null && v.disabled.value)), at = u(() => !!X.prepend || a.prepend !== void 0), ot = u(() => !!X.append || a.append !== void 0), ee = u(() => a.placeholder === "请选择" ? _e("select.placeholder", void 0, "请选择") : a.placeholder), nt = u(() => a.emptyText === "暂无数据" ? _e("select.emptyText", void 0, "暂无数据") : a.emptyText), Ce = Lt(
+      "empty",
+      u(() => ({ component: "select" }))
+    ), H = u(() => ({
+      value: "value",
+      label: "label",
+      disabled: "disabled",
+      options: "options",
+      ...a.fieldNames ?? {}
+    }));
+    function P(e) {
+      const t = e.children;
+      if (Array.isArray(t)) return t;
+      if (t && typeof t == "object") {
+        const l = t.default;
+        if (typeof l == "function") {
+          const n = l();
+          if (Array.isArray(n))
+            return n;
+        }
+      }
+      return [];
+    }
+    function Be(e) {
+      const t = [];
+      return e.forEach((l) => {
+        if (typeof l.children == "string") {
+          t.push(l.children);
+          return;
+        }
+        t.push(Be(P(l)));
+      }), t.join("").trim();
+    }
+    function Se(e) {
+      if (typeof e == "string") return e;
+      if (!e || typeof e != "object" && typeof e != "function") return "";
+      const t = e;
+      return String(t.name ?? t.__name ?? "");
+    }
+    function Oe(e) {
+      const t = Se(e.type);
+      return t === "XOption" || t === "Option";
+    }
+    function ut(e) {
+      const t = Se(e.type);
+      return t === "XOptgroup" || t === "Optgroup";
+    }
+    function Te(e) {
+      const t = e.props ?? {}, l = P(e), n = Be(l), o = t.value ?? t.modelValue ?? t.label ?? n;
+      if (o == null || o === "") return null;
+      const c = t.label ?? n ?? String(o);
+      return {
+        ...t,
+        value: o,
+        label: c,
+        disabled: !!t.disabled
+      };
+    }
+    function ce(e) {
+      const t = [];
+      return e.forEach((l) => {
+        if (!l || l.type === Je || l.type === Qe) return;
+        if (l.type === g) {
+          t.push(...ce(P(l)));
+          return;
+        }
+        if (Oe(l)) {
+          const o = Te(l);
+          o && t.push(o);
+          return;
+        }
+        const n = ce(P(l));
+        n.length && t.push(...n);
+      }), t;
+    }
+    function de(e) {
+      const t = [];
+      return e.forEach((l) => {
+        if (!l || l.type === Je || l.type === Qe) return;
+        if (l.type === g) {
+          t.push(...de(P(l)));
+          return;
+        }
+        if (Oe(l)) {
+          const o = Te(l);
+          o && t.push(o);
+          return;
+        }
+        if (ut(l)) {
+          const c = (l.props ?? {}).label, C = P(l), h = ce(C);
+          h.length && t.push({
+            isGroup: !0,
+            label: c,
+            options: h
+          });
+          return;
+        }
+        const n = de(P(l));
+        n.length && t.push(...n);
+      }), t;
+    }
+    const pe = u(() => {
+      var t;
+      const e = ((t = X.default) == null ? void 0 : t.call(X)) ?? [];
+      return de(e);
+    }), st = u(() => {
+      const e = a.options ?? [];
+      return pe.value.length ? e.length ? [...e, ...pe.value] : pe.value : e;
+    }), rt = u(() => a.filterable !== void 0 ? a.filterable : a.allowSearch !== void 0 ? a.allowSearch !== !1 : a.multiple), fe = u(
+      () => typeof a.allowSearch == "object" && !!a.allowSearch.retainInputValue
+    ), G = u(() => rt.value || a.allowCreate), $e = u(() => a.modelValue !== void 0), it = u(() => $e.value ? a.modelValue : we.value), ct = u(() => a.popupVisible !== void 0 || a.open !== void 0), m = u(() => a.popupVisible !== void 0 ? !!a.popupVisible : a.open !== void 0 ? !!a.open : xe.value), dt = u(() => a.inputValue !== void 0 || a.searchValue !== void 0), z = u(() => a.inputValue !== void 0 ? String(a.inputValue ?? "") : a.searchValue !== void 0 ? String(a.searchValue ?? "") : Ve.value), k = u(() => {
+      const e = it.value;
+      return a.multiple ? Array.isArray(e) ? e : [] : e == null ? [] : [e];
+    });
+    function te(e) {
+      return typeof e == "object" && e !== null;
+    }
+    function w(e) {
+      if (te(e)) {
+        const t = e[a.valueKey];
+        if (t != null)
+          return `obj:${String(t)}`;
+        try {
+          return `obj:${JSON.stringify(e)}`;
+        } catch {
+          return `obj:${String(e)}`;
+        }
+      }
+      return `${typeof e}:${String(e)}`;
+    }
+    function q(e) {
+      if (te(e)) {
+        const t = e[a.valueKey];
+        return t != null ? String(t) : "";
+      }
+      return String(e);
+    }
+    function U(e, t, l = "base") {
+      const n = H.value;
+      if (!te(e))
+        return {
+          key: w(e),
+          value: e,
+          label: String(e),
+          disabled: !1,
+          raw: { value: e, label: String(e), disabled: !1 },
+          groupLabel: t,
+          origin: l
+        };
+      const o = n.value, c = n.label, C = n.disabled, h = e[o] ?? e.value;
+      if (h == null) return null;
+      const ue = String(e[c] ?? e.label ?? q(h)), R = !!(e[C] ?? e.disabled);
+      return {
+        key: w(h),
+        value: h,
+        label: ue,
+        disabled: R,
+        raw: {
+          ...e,
+          value: h,
+          label: ue,
+          disabled: R
+        },
+        groupLabel: t,
+        origin: l
+      };
+    }
+    function pt(e) {
+      if (!te(e)) return !1;
+      const t = H.value.options;
+      return e.isGroup === !0 ? !0 : Array.isArray(e[t]);
+    }
+    const le = u(() => {
+      const e = [], t = /* @__PURE__ */ new Map(), l = H.value;
+      return st.value.forEach((o) => {
+        if (pt(o)) {
+          const C = o[l.label] ?? o.label, h = C == null ? void 0 : String(C), ue = Array.isArray(o[l.options]) ? o[l.options] : [], R = { label: h, options: [] };
+          ue.forEach((Tt) => {
+            const Q = U(Tt, h, "base");
+            Q && (R.options.push(Q), t.has(Q.key) || t.set(Q.key, Q));
+          }), R.options.length > 0 && e.push(R);
+          return;
+        }
+        const c = U(o, void 0, "base");
+        c && (e.push({ options: [c] }), t.has(c.key) || t.set(c.key, c));
+      }), { groups: e, optionMap: t };
+    }), ae = u(() => {
+      if (a.fallbackOption === !1) return [];
+      const e = [], t = /* @__PURE__ */ new Set();
+      return k.value.forEach((l) => {
+        const n = w(l);
+        if (le.value.optionMap.has(n) || t.has(n)) return;
+        t.add(n);
+        const o = typeof a.fallbackOption == "function" ? a.fallbackOption(l) : {
+          [H.value.value]: l,
+          [H.value.label]: q(l),
+          [H.value.disabled]: !1
+        }, c = U(o, void 0, "fallback");
+        c && e.push(c);
+      }), e;
+    }), Me = u(() => {
+      if (!a.allowCreate) return null;
+      const e = z.value.trim();
+      if (!e) return null;
+      const t = w(e), l = le.value.optionMap.has(t), n = ae.value.some((o) => o.key === t);
+      return l || n ? null : U({ value: e, label: e }, void 0, "create");
+    });
+    function ft(e, t) {
+      if (a.filterOption === !1) return !0;
+      if (typeof a.filterOption == "function")
+        return a.filterOption(e, t.raw);
+      const l = e.trim().toLowerCase();
+      return l ? t.label.toLowerCase().includes(l) : !0;
+    }
+    const ve = u(() => {
+      const e = le.value.groups.map((n) => ({
+        label: n.label,
+        options: [...n.options]
+      }));
+      a.showExtraOptions && ae.value.length > 0 && e.push({ options: [...ae.value] }), a.showExtraOptions && Me.value && e.push({ options: [Me.value] });
+      const t = z.value;
+      return !!t.trim() && !a.remote && a.filterOption !== !1 ? e.map((n) => ({
+        label: n.label,
+        options: n.options.filter((o) => ft(t, o))
+      })).filter((n) => n.options.length > 0) : e;
+    }), b = u(() => ve.value.flatMap((e) => e.options)), Ne = u(() => new Set(k.value.map((e) => w(e)))), E = u(() => {
+      const e = new Map(ae.value.map((t) => [t.key, t]));
+      return k.value.map((t) => {
+        const l = w(t), n = le.value.optionMap.get(l);
+        if (n) return n;
+        const o = e.get(l);
+        return o || (U({ value: t, label: q(t) }, void 0, "fallback") ?? {
+          key: l,
+          value: t,
+          label: q(t),
+          disabled: !1,
+          raw: { value: t, label: q(t), disabled: !1 },
+          origin: "fallback"
+        });
+      });
+    }), oe = u(() => !a.maxTagCount || a.maxTagCount <= 0 ? E.value : E.value.slice(0, a.maxTagCount)), Fe = u(() => !a.maxTagCount || a.maxTagCount <= 0 ? 0 : Math.max(E.value.length - a.maxTagCount, 0)), vt = u(() => k.value.length > 0), Pe = u(() => b.value.length === 0), mt = u(() => a.allowClear && !V.value && vt.value && ie.value);
+    function me(e) {
+      return a.formatLabel ? a.formatLabel(e.raw) : e.label;
+    }
+    const ht = u(() => {
+      const e = E.value[0];
+      return e ? me(e) : "";
+    }), yt = u(() => m.value ? z.value : ht.value), bt = u(() => {
+      var e;
+      return ["x-select__panel", (e = a.triggerProps) == null ? void 0 : e.contentClass];
+    }), gt = u(() => ve.value.some((e) => !!e.label)), ze = u(() => {
+      var e;
+      return Math.max(Number(((e = a.virtualListProps) == null ? void 0 : e.threshold) ?? 0), 0);
+    }), T = u(() => {
+      var e;
+      return Math.max(Number(((e = a.virtualListProps) == null ? void 0 : e.estimatedSize) ?? 36), 24);
+    }), Ee = u(() => {
+      var e;
+      return Math.max(Number(((e = a.virtualListProps) == null ? void 0 : e.buffer) ?? 10), 0);
+    }), ne = u(() => {
+      var e;
+      return ((e = a.virtualListProps) == null ? void 0 : e.height) ?? 200;
+    }), kt = u(() => {
+      const e = ne.value;
+      if (typeof e == "number" && Number.isFinite(e)) return e;
+      const t = Number.parseFloat(String(e));
+      return Number.isFinite(t) ? t : 200;
+    }), x = u(() => !a.virtualListProps || gt.value || b.value.length === 0 ? !1 : ze.value <= 0 ? !0 : b.value.length >= ze.value), he = u(() => x.value ? Math.max(Math.floor(Z.value / T.value) - Ee.value, 0) : 0), _t = u(() => x.value ? Math.ceil(kt.value / T.value) + Ee.value * 2 : b.value.length), wt = u(() => x.value ? Math.min(he.value + _t.value, b.value.length) : b.value.length), Ie = u(() => x.value ? b.value.slice(he.value, wt.value) : b.value), ye = u(() => x.value ? he.value * T.value : 0), Le = u(() => {
+      if (!x.value) return 0;
+      const e = b.value.length * T.value, t = Ie.value.length * T.value;
+      return Math.max(e - ye.value - t, 0);
+    }), xt = u(() => x.value ? {
+      maxHeight: "none",
+      height: typeof ne.value == "number" ? `${ne.value}px` : String(ne.value)
+    } : void 0), Ae = u(() => a.scrollbar !== !1 && !x.value), Vt = u(() => Ae.value ? a.scrollbar && typeof a.scrollbar == "object" ? a.scrollbar : {} : {});
+    function Ct(e) {
+      if (!e) {
+        O.value = null;
+        return;
+      }
+      if (e instanceof HTMLElement) {
+        O.value = e;
+        return;
+      }
+      const t = e;
+      O.value = t.$el instanceof HTMLElement ? t.$el : null;
+    }
+    const He = u(() => b.value.filter((e) => !e.disabled));
+    se([m, He], ([e, t]) => {
+      var l;
+      if (!e) {
+        p.value = "";
+        return;
+      }
+      p.value && t.some((n) => n.key === p.value) || (a.defaultActiveFirstOption ? p.value = ((l = t[0]) == null ? void 0 : l.key) ?? "" : p.value = "");
+    }), se(
+      () => z.value,
+      () => {
+        x.value && (Z.value = 0, O.value && (O.value.scrollTop = 0));
+      }
+    ), se(
+      () => m.value,
+      (e) => {
+        if (!e) {
+          Z.value = 0;
+          return;
+        }
+        O.value && (O.value.scrollTop = 0);
+      }
+    ), se(
+      () => p.value,
+      () => {
+        if (!m.value || !p.value || !O.value) return;
+        const e = O.value;
+        if (x.value) {
+          const o = b.value.findIndex((h) => h.key === p.value);
+          if (o < 0) return;
+          const c = o * T.value, C = c + T.value;
+          c < e.scrollTop ? e.scrollTop = c : C > e.scrollTop + e.clientHeight && (e.scrollTop = C - e.clientHeight);
+          return;
+        }
+        const t = Array.from(e.querySelectorAll("[data-option-key]")).find((o) => o.getAttribute("data-option-key") === p.value);
+        if (!t) return;
+        const l = t.offsetTop, n = l + t.offsetHeight;
+        l < e.scrollTop ? e.scrollTop = l : n > e.scrollTop + e.clientHeight && (e.scrollTop = n - e.clientHeight);
+      }
+    );
+    function j(e) {
+      $e.value || (we.value = e), i("update:modelValue", e), i("change", e), v == null || v.notifyChange();
+    }
+    function J(e, t = !1) {
+      if (dt.value || (Ve.value = e), i("update:inputValue", e), i("update:searchValue", e), i("inputValueChange", e), i("input-value-change", e), t && (v == null || v.notifyInput()), !t) return;
+      if (typeof window > "u") {
+        i("search", e);
+        return;
+      }
+      A && window.clearTimeout(A);
+      const l = Math.max(Number(a.searchDelay) || 0, 0);
+      A = window.setTimeout(() => {
+        i("search", e), A = void 0;
+      }, l);
+    }
+    function $(e) {
+      if (!V.value) {
+        if (ct.value || (xe.value = e), i("update:popupVisible", e), i("update:open", e), i("popupVisibleChange", e), i("popup-visible-change", e), e && G.value) {
+          We(() => {
+            var t;
+            return (t = L.value) == null ? void 0 : t.focus();
+          });
+          return;
+        }
+        !e && !fe.value && z.value && J("", !1);
+      }
+    }
+    function D(e) {
+      return Ne.value.has(w(e));
+    }
+    function be(e, t) {
+      if (!e.disabled) {
+        if (a.multiple) {
+          const l = e.key, n = Ne.value.has(l);
+          if (!n && a.limit > 0 && k.value.length >= a.limit) {
+            i("exceedLimit", e.value, t), i("exceed-limit", e.value, t);
+            return;
+          }
+          if (n) {
+            const o = k.value.filter((c) => w(c) !== l);
+            j(o), i("remove", e.value);
+          } else
+            j([...k.value, e.value]);
+          fe.value || J("", !1), We(() => {
+            var o;
+            return (o = L.value) == null ? void 0 : o.focus();
+          });
+          return;
+        }
+        j(e.value), fe.value || J("", !1), $(!1);
+      }
+    }
+    function Bt(e, t) {
+      if (t.stopPropagation(), !a.multiple) return;
+      const l = e.key, n = k.value.filter((o) => w(o) !== l);
+      j(n), i("remove", e.value);
+    }
+    function St(e) {
+      e.stopPropagation(), j(a.multiple ? [] : void 0), J("", !1), i("clear", e);
+    }
+    function je(e) {
+      const t = e.target.value;
+      J(t, !0), m.value || $(!0);
+    }
+    function De(e) {
+      i("focus", e), v == null || v.notifyFocus(e), m.value || $(!0);
+    }
+    function Re(e) {
+      i("blur", e), v == null || v.notifyBlur(e);
+    }
+    function Ke(e) {
+      const t = He.value;
+      if (!t.length) return;
+      const l = t.findIndex((o) => o.key === p.value);
+      if (l < 0) {
+        p.value = e > 0 ? t[0].key : t[t.length - 1].key;
+        return;
+      }
+      const n = (l + e + t.length) % t.length;
+      p.value = t[n].key;
+    }
+    function ge(e) {
+      if (!V.value) {
+        if (e.key === "ArrowDown") {
+          if (e.preventDefault(), !m.value) {
+            $(!0);
+            return;
+          }
+          Ke(1);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          if (e.preventDefault(), !m.value) {
+            $(!0);
+            return;
+          }
+          Ke(-1);
+          return;
+        }
+        if (e.key === "Enter") {
+          if (!m.value) {
+            $(!0);
+            return;
+          }
+          if (!p.value) return;
+          const t = b.value.find((l) => l.key === p.value);
+          if (!t || t.disabled) return;
+          e.preventDefault(), be(t, e);
+          return;
+        }
+        if (e.key === "Escape" && m.value) {
+          e.preventDefault(), $(!1);
+          return;
+        }
+        if (e.key === "Backspace" && a.multiple && G.value && z.value.length === 0 && k.value.length > 0) {
+          const t = k.value[k.value.length - 1], l = w(t), n = k.value.filter((o) => w(o) !== l);
+          j(n), i("remove", t);
+        }
+      }
+    }
+    function Ot(e) {
+      i("dropdownScroll", e), i("dropdown-scroll", e);
+      const t = e.currentTarget || e.target;
+      if (!t) return;
+      Z.value = t.scrollTop, t.scrollHeight - (t.scrollTop + t.clientHeight) <= 1 && (i("dropdownReachBottom", e), i("dropdown-reach-bottom", e));
+    }
+    function Xe() {
+      V.value || $(!m.value);
+    }
+    return Nt(() => {
+      A && typeof window < "u" && window.clearTimeout(A);
+    }), Ze({
+      focus: () => {
+        var e;
+        return (e = L.value) == null ? void 0 : e.focus();
+      },
+      blur: () => {
+        var e;
+        return (e = L.value) == null ? void 0 : e.blur();
+      }
+    }), (e, t) => (s(), N(zt, Ge(d.triggerProps, {
+      class: "x-select__trigger",
+      "popup-visible": m.value,
+      "popup-container": d.popupContainer,
+      "unmount-on-close": d.unmountOnClose,
+      "auto-fit-popup-min-width": !0,
+      trigger: [],
+      position: "bottom-start",
+      "content-class": bt.value,
+      "onUpdate:popupVisible": $
+    }), {
+      default: W(() => [
+        e.$slots.trigger ? (s(), r("div", {
+          key: 0,
+          class: K(["x-select__custom-trigger", { "is-disabled": V.value }]),
+          onClick: Xe
+        }, [
+          f(e.$slots, "trigger", {
+            value: d.modelValue,
+            open: m.value
+          })
+        ], 2)) : (s(), r("div", jt, [
+          at.value ? (s(), r("span", Dt, [
+            f(e.$slots, "prepend", {}, () => [
+              F(_(d.prepend), 1)
+            ])
+          ])) : y("", !0),
+          S("div", {
+            class: K(["x-select", [B(It)(lt.value), { "is-disabled": V.value, "is-open": m.value, "is-multiple": d.multiple, "is-borderless": !d.bordered, "is-error": d.error }]]),
+            tabindex: V.value || G.value ? -1 : 0,
+            onClick: Xe,
+            onMouseenter: t[2] || (t[2] = (l) => ie.value = !0),
+            onMouseleave: t[3] || (t[3] = (l) => ie.value = !1),
+            onKeydown: ge
+          }, [
+            e.$slots.prefix ? (s(), r("span", Kt, [
+              f(e.$slots, "prefix")
+            ])) : y("", !0),
+            S("div", Xt, [
+              d.multiple ? (s(), r("div", {
+                key: 0,
+                class: K(["x-select__tags", { "is-nowrap": d.tagNowrap }])
+              }, [
+                oe.value.length ? (s(), r(g, { key: 0 }, [
+                  (s(!0), r(g, null, re(oe.value, (l) => (s(), r("span", {
+                    key: l.key,
+                    class: "x-select__tag"
+                  }, [
+                    S("span", Gt, [
+                      f(e.$slots, "label", {
+                        data: l.raw
+                      }, () => [
+                        F(_(me(l)), 1)
+                      ])
+                    ]),
+                    V.value ? y("", !0) : (s(), r("button", {
+                      key: 0,
+                      type: "button",
+                      class: "x-select__tag-remove",
+                      onClick: (n) => Bt(l, n)
+                    }, [
+                      Y(B(I), {
+                        name: "guanbi",
+                        size: 10
+                      })
+                    ], 8, qt))
+                  ]))), 128)),
+                  Fe.value > 0 ? (s(), r("span", Ut, "+" + _(Fe.value), 1)) : y("", !0)
+                ], 64)) : y("", !0),
+                G.value ? (s(), r("input", {
+                  key: 1,
+                  ref_key: "inputRef",
+                  ref: L,
+                  class: "x-select__input x-select__input--multiple",
+                  value: z.value,
+                  disabled: V.value,
+                  placeholder: oe.value.length ? "" : ee.value,
+                  onInput: je,
+                  onFocus: De,
+                  onBlur: Re,
+                  onKeydown: ge,
+                  onClick: t[0] || (t[0] = Ue(() => {
+                  }, ["stop"]))
+                }, null, 40, Jt)) : oe.value.length ? y("", !0) : (s(), r("span", Qt, _(ee.value), 1))
+              ], 2)) : (s(), r(g, { key: 1 }, [
+                G.value ? (s(), r("input", {
+                  key: 0,
+                  ref_key: "inputRef",
+                  ref: L,
+                  class: "x-select__input",
+                  value: yt.value,
+                  disabled: V.value,
+                  placeholder: ee.value,
+                  onInput: je,
+                  onFocus: De,
+                  onBlur: Re,
+                  onKeydown: ge,
+                  onClick: t[1] || (t[1] = Ue(() => {
+                  }, ["stop"]))
+                }, null, 40, Wt)) : E.value.length ? (s(), r("span", Yt, [
+                  f(e.$slots, "label", {
+                    data: E.value[0].raw
+                  }, () => [
+                    F(_(me(E.value[0])), 1)
+                  ])
+                ])) : (s(), r("span", Zt, _(ee.value), 1))
+              ], 64))
+            ]),
+            S("span", el, [
+              f(e.$slots, "suffix"),
+              mt.value ? (s(), r("button", {
+                key: 0,
+                type: "button",
+                class: "x-select__clear",
+                onClick: St
+              }, [
+                Y(B(I), {
+                  name: "guanbi",
+                  size: 12
+                })
+              ])) : (s(), r("span", {
+                key: 1,
+                class: K(["x-select__icon", { "is-open": m.value }])
+              }, [
+                d.loading ? f(e.$slots, "loading-icon", { key: 0 }, () => [
+                  Y(B(I), {
+                    name: "jiazai",
+                    size: 12,
+                    spin: ""
+                  })
+                ]) : f(e.$slots, "arrow-icon", { key: 1 }, () => [
+                  Y(B(I), {
+                    name: "xiangxia",
+                    size: 12
+                  })
+                ])
+              ], 2))
+            ])
+          ], 42, Rt),
+          ot.value ? (s(), r("span", tl, [
+            f(e.$slots, "append", {}, () => [
+              F(_(d.append), 1)
+            ])
+          ])) : y("", !0)
+        ]))
+      ]),
+      content: W(() => [
+        (s(), N(qe(Ae.value ? Pt : "div"), Ge({
+          ref: Ct,
+          class: "x-select__dropdown",
+          style: xt.value
+        }, Vt.value, { onScroll: Ot }), {
+          default: W(() => [
+            e.$slots.header && (!Pe.value || d.showHeaderOnEmpty) ? (s(), r("div", ll, [
+              f(e.$slots, "header")
+            ])) : y("", !0),
+            d.loading ? (s(), r("div", al, [
+              f(e.$slots, "loading-icon", {}, () => [
+                Y(B(I), {
+                  name: "jiazai",
+                  size: 14,
+                  spin: ""
+                })
+              ])
+            ])) : b.value.length ? (s(), r(g, { key: 2 }, [
+              x.value ? (s(), r(g, { key: 0 }, [
+                ye.value > 0 ? (s(), r("div", {
+                  key: 0,
+                  style: ke({ height: `${ye.value}px` })
+                }, null, 4)) : y("", !0),
+                (s(!0), r(g, null, re(Ie.value, (l) => (s(), r("button", {
+                  key: l.key,
+                  type: "button",
+                  class: K(["x-select__option", {
+                    "is-selected": D(l.value),
+                    "is-disabled": l.disabled,
+                    "is-active": p.value === l.key,
+                    "is-create": l.origin === "create"
+                  }]),
+                  style: ke({ minHeight: `${T.value}px`, lineHeight: `${T.value}px` }),
+                  "data-option-key": l.key,
+                  onClick: (n) => be(l, n),
+                  onMouseenter: (n) => p.value = l.key
+                }, [
+                  d.multiple ? (s(), N(Ye, {
+                    key: 0,
+                    class: "x-select__option-checkbox",
+                    "model-value": D(l.value),
+                    disabled: l.disabled
+                  }, {
+                    default: W(() => [
+                      S("span", nl, [
+                        f(e.$slots, "option", {
+                          data: l.raw
+                        }, () => [
+                          F(_(l.label), 1)
+                        ])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["model-value", "disabled"])) : (s(), r(g, { key: 1 }, [
+                    S("span", ul, [
+                      f(e.$slots, "option", {
+                        data: l.raw
+                      }, () => [
+                        F(_(l.label), 1)
+                      ])
+                    ]),
+                    S("span", sl, [
+                      D(l.value) ? (s(), N(B(I), {
+                        key: 0,
+                        name: "dui",
+                        size: 12
+                      })) : y("", !0)
+                    ])
+                  ], 64))
+                ], 46, ol))), 128)),
+                Le.value > 0 ? (s(), r("div", {
+                  key: 1,
+                  style: ke({ height: `${Le.value}px` })
+                }, null, 4)) : y("", !0)
+              ], 64)) : (s(!0), r(g, { key: 1 }, re(ve.value, (l, n) => (s(), r(g, {
+                key: l.label ?? `group-${n}`
+              }, [
+                l.label ? (s(), r("div", rl, _(l.label), 1)) : y("", !0),
+                (s(!0), r(g, null, re(l.options, (o) => (s(), r("button", {
+                  key: o.key,
+                  type: "button",
+                  class: K(["x-select__option", {
+                    "is-selected": D(o.value),
+                    "is-disabled": o.disabled,
+                    "is-active": p.value === o.key,
+                    "is-create": o.origin === "create"
+                  }]),
+                  "data-option-key": o.key,
+                  onClick: (c) => be(o, c),
+                  onMouseenter: (c) => p.value = o.key
+                }, [
+                  d.multiple ? (s(), N(Ye, {
+                    key: 0,
+                    class: "x-select__option-checkbox",
+                    "model-value": D(o.value),
+                    disabled: o.disabled
+                  }, {
+                    default: W(() => [
+                      S("span", cl, [
+                        f(e.$slots, "option", {
+                          data: o.raw
+                        }, () => [
+                          F(_(o.label), 1)
+                        ])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["model-value", "disabled"])) : (s(), r(g, { key: 1 }, [
+                    S("span", dl, [
+                      f(e.$slots, "option", {
+                        data: o.raw
+                      }, () => [
+                        F(_(o.label), 1)
+                      ])
+                    ]),
+                    S("span", pl, [
+                      D(o.value) ? (s(), N(B(I), {
+                        key: 0,
+                        name: "dui",
+                        size: 12
+                      })) : y("", !0)
+                    ])
+                  ], 64))
+                ], 42, il))), 128))
+              ], 64))), 128))
+            ], 64)) : f(e.$slots, "empty", { key: 3 }, () => [
+              B(Ce) ? (s(), N(qe(B(Ce)), { key: 0 })) : (s(), N(Ft, {
+                key: 1,
+                "in-config-provider": "",
+                description: nt.value
+              }, null, 8, ["description"]))
+            ]),
+            e.$slots.footer && (!Pe.value || d.showFooterOnEmpty) ? (s(), r("div", fl, [
+              f(e.$slots, "footer")
+            ])) : y("", !0)
+          ]),
+          _: 3
+        }, 16, ["style"]))
+      ]),
+      _: 3
+    }, 16, ["popup-visible", "popup-container", "unmount-on-close", "content-class"]));
+  }
+});
+export {
+  Vl as default
+};