@transsionfe/semi-ui-vue 0.0.1

package/lib/es/components/select/Select.vue.js

@@ -0,0 +1,1156 @@
+import { defineComponent as xe, mergeModels as Le, useModel as wl, useSlots as Il, ref as f, computed as c, onMounted as kl, nextTick as $, watch as me, onUnmounted as $l, onUpdated as Tl, createBlock as g, openBlock as n, unref as i, withCtx as D, createElementVNode as O, createCommentVNode as w, normalizeStyle as T, normalizeClass as h, createElementBlock as p, resolveDynamicComponent as P, Fragment as I, renderSlot as G, createTextVNode as Z, toDisplayString as j, renderList as se, withModifiers as _l, createVNode as Me, h as H } from "vue";
+import N from "classnames";
+import { cssClasses as Sl, numbers as Be } from "@douyinfe/semi-foundation/select/constants";
+import xl from "@douyinfe/semi-foundation/select/foundation";
+import Ll from "@douyinfe/semi-foundation/utils/Event";
+import Oe from "../popover/Popover.vue.js";
+/* empty css                      */
+import { Input as ye } from "../input/index.js";
+import ne from "../tag/Tag.vue.js";
+import Ml from "../tag/TagGroup.vue.js";
+/* empty css              */
+import Bl from "../spin/Spin.vue.js";
+/* empty css                */
+import Ol from "../overflowList/OverflowList.vue.js";
+import "../space/index.js";
+import ee from "./Option.vue.js";
+import zl from "./OptionGroup.vue.js";
+import { getOptionsFromGroup as Vl } from "./utils.js";
+import Fl from "../icons/icons/IconClear.js";
+import Rl from "../icons/icons/IconSearch.js";
+import Pl from "../icons/icons/IconChevronDown.js";
+import Hl from "../space/Space.vue.js";
+const Nl = ["aria-multiselectable"], El = ["onClick"], Wl = ["onClick"], Al = ["id", "name", "aria-label", "aria-labelledby", "aria-describedby"], Dl = ["id"], vt = /* @__PURE__ */ xe({
+  __name: "Select",
+  props: /* @__PURE__ */ Le({
+    "aria-describedby": {},
+    "aria-errormessage": {},
+    "aria-invalid": { type: Boolean },
+    "aria-labelledby": {},
+    "aria-required": { type: Boolean },
+    id: {},
+    name: {},
+    autoFocus: { type: Boolean },
+    autoClearSearchValue: { type: Boolean, default: !0 },
+    arrowIcon: { default: () => Pl },
+    borderless: { type: Boolean, default: !1 },
+    clearIcon: {},
+    defaultValue: {},
+    value: {},
+    placeholder: { default: "" },
+    multiple: { type: Boolean, default: !1 },
+    filter: { type: [Boolean, Function], default: !1 },
+    max: {},
+    maxTagCount: {},
+    maxHeight: { default: Be.LIST_HEIGHT },
+    style: {},
+    className: {},
+    size: {},
+    disabled: { type: Boolean, default: !1 },
+    emptyContent: {},
+    expandRestTagsOnClick: { type: Boolean, default: !1 },
+    zIndex: { default: 1030 },
+    position: {},
+    dropdownClassName: {},
+    dropdownStyle: {},
+    dropdownMargin: {},
+    ellipsisTrigger: { type: Boolean, default: !1 },
+    optionList: {},
+    dropdownMatchSelectWidth: { type: Boolean, default: !0 },
+    loading: { type: Boolean },
+    defaultOpen: { type: Boolean, default: !1 },
+    validateStatus: {},
+    defaultActiveFirstOption: { type: Boolean, default: !0 },
+    onChangeWithObject: { type: Boolean, default: !1 },
+    searchPosition: { default: "trigger" },
+    searchPlaceholder: {},
+    insetLabel: {},
+    insetLabelId: {},
+    inputProps: {},
+    showClear: { type: Boolean, default: !1 },
+    showArrow: { type: Boolean, default: !0 },
+    renderSelectedItem: {},
+    renderCreateItem: {},
+    renderOptionItem: {},
+    clickToHide: { type: Boolean },
+    remote: { type: Boolean, default: !1 },
+    allowCreate: { type: Boolean, default: !1 },
+    triggerRender: {},
+    virtualize: {},
+    preventScroll: { type: Boolean },
+    showRestTagsPopover: { type: Boolean, default: !1 },
+    restTagsPopoverProps: {},
+    spacing: {},
+    getPopupContainer: {},
+    motion: { type: Boolean, default: !0 },
+    autoAdjustOverflow: { type: Boolean, default: !0 },
+    mouseLeaveDelay: {},
+    mouseEnterDelay: {},
+    stopPropagation: { type: Boolean, default: !0 },
+    children: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Le(["update:value", "change", "dropdownVisibleChange", "search", "mouseEnter", "mouseLeave", "exceed", "create", "deselect", "select", "clear", "focus", "blur", "listScroll"], ["update:modelValue"]),
+  setup(be, { expose: ze, emit: Ve }) {
+    const s = Sl.PREFIX, ue = wl(be, "modelValue"), l = be, Fe = xe({
+      name: "SlotCollector",
+      emits: ["collect"],
+      setup(e, { slots: o, emit: t }) {
+        return () => {
+          var u;
+          const r = ((u = o.default) == null ? void 0 : u.call(o)) || [];
+          return t("collect", r), null;
+        };
+      }
+    }), k = Ve, S = Il(), q = f([]), Re = (e) => {
+      q.value = e;
+    }, E = f(), U = f(), W = f(), Pe = f(), ie = f(), ce = f(), y = f(l.defaultOpen || !1), M = f(!1), B = f([]), _ = f(/* @__PURE__ */ new Map()), x = f(null), m = f(""), L = f(l.defaultActiveFirstOption ? 0 : -1), z = f(!1), J = f(!1), A = f(!1), le = f(!1), V = f(0), pe = f(0), te = new Ll(), ae = f(null), F = c(() => ue.value !== void 0 ? ue.value : l.value !== void 0 ? l.value : l.defaultValue), He = {
+      getState: (e) => ({
+        isOpen: y.value,
+        isFocus: M.value,
+        options: B.value,
+        selections: _.value,
+        dropdownMinWidth: x.value,
+        inputValue: m.value,
+        focusIndex: L.value,
+        isHovering: J.value,
+        showInput: A.value,
+        isFullTags: le.value,
+        overflowItemCount: V.value
+      })[e],
+      getStates: () => ({
+        isOpen: y.value,
+        isFocus: M.value,
+        options: B.value,
+        selections: _.value,
+        dropdownMinWidth: x.value,
+        inputValue: m.value,
+        focusIndex: L.value,
+        isHovering: J.value,
+        showInput: A.value,
+        isFullTags: le.value,
+        overflowItemCount: V.value
+      }),
+      getProp: (e) => e === "value" ? F.value : l[e],
+      getProps: () => l,
+      setState: (e, o) => {
+        e.isOpen !== void 0 && (y.value = e.isOpen), e.isFocus !== void 0 && (M.value = e.isFocus), e.options !== void 0 && (B.value = e.options), e.selections !== void 0 && (_.value = e.selections), e.inputValue !== void 0 && (m.value = e.inputValue), e.focusIndex !== void 0 && (L.value = e.focusIndex), e.isHovering !== void 0 && (J.value = e.isHovering), e.showInput !== void 0 && (A.value = e.showInput), e.isFullTags !== void 0 && (le.value = e.isFullTags), e.overflowItemCount !== void 0 && (V.value = e.overflowItemCount), o && $(o);
+      },
+      getContext: (e) => null,
+      getContexts: () => ({}),
+      getCache: (e) => null,
+      getCaches: () => ({}),
+      setCache: (e, o) => {
+      },
+      registerKeyDown: (e) => {
+        ae.value = e;
+      },
+      unregisterKeyDown: () => {
+        ae.value = null;
+      },
+      updateFocusIndex: (e) => {
+        z.value = !0, L.value = e;
+      },
+      updateInputValue: (e) => {
+        m.value = e;
+      },
+      toggleInputShow: (e, o) => {
+        A.value = e, $(() => o());
+      },
+      focusInput: () => {
+        $(() => {
+          U.value && typeof U.value.focus == "function" && U.value.focus();
+        });
+      },
+      focusDropdownInput: () => {
+        $(() => {
+          W.value && typeof W.value.focus == "function" && W.value.focus();
+        });
+      },
+      notifyMaxLimit: (e) => {
+        k("exceed", e);
+      },
+      getMaxLimit: () => l.max,
+      registerClickOutsideHandler: () => {
+      },
+      unregisterClickOutsideHandler: () => {
+      },
+      rePositionDropdown: () => {
+      },
+      notifyDeselect: (e, o) => {
+        delete o._parentGroup, k("deselect", e, o);
+      },
+      getOptionsFromChildren: () => {
+        const e = q.value, { optionList: o } = l;
+        return o && o.length ? o.map((t, r) => ({
+          _show: !0,
+          _selected: !1,
+          _scrollIndex: r,
+          ...t
+        })) : Vl(e).options;
+      },
+      updateOptions: (e) => {
+        if (B.value.length === e.length) {
+          let o = !0;
+          for (let t = 0; t < e.length; t++) {
+            const r = B.value[t], u = e[t];
+            if (r !== u && ((r == null ? void 0 : r.value) !== (u == null ? void 0 : u.value) || (r == null ? void 0 : r.label) !== (u == null ? void 0 : u.label) || (r == null ? void 0 : r._show) !== (u == null ? void 0 : u._show) || (r == null ? void 0 : r._selected) !== (u == null ? void 0 : u._selected))) {
+              o = !1;
+              break;
+            }
+          }
+          if (o)
+            return;
+        }
+        B.value = e;
+      },
+      openMenu: (e) => {
+        y.value = !0, $(() => {
+          requestAnimationFrame(() => {
+            e == null || e();
+          });
+        });
+      },
+      closeMenu: (e) => {
+        y.value = !1, e && $(() => e());
+      },
+      getTriggerWidth: () => {
+        var e;
+        return ((e = E.value) == null ? void 0 : e.getBoundingClientRect().width) || 0;
+      },
+      setOptionWrapperWidth: (e) => {
+        if (typeof e == "number" && e > 0)
+          x.value = e;
+        else if (typeof e == "string") {
+          const o = parseFloat(e);
+          !isNaN(o) && o > 0 ? x.value = o : x.value = e;
+        }
+        (typeof e == "number" && e === 0 || !e) && requestAnimationFrame(() => {
+          $(() => {
+            if (E.value && l.dropdownMatchSelectWidth) {
+              const o = E.value.getBoundingClientRect().width || 0;
+              o > 0 && (x.value = o);
+            }
+          });
+        });
+      },
+      updateSelection: (e) => {
+        _.value = new Map(e);
+      },
+      getSelections: () => new Map(_.value),
+      updateFocusState: (e) => {
+        M.value = e;
+      },
+      focusTrigger: () => {
+        var e;
+        (e = E.value) == null || e.focus();
+      },
+      notifyChange: (e) => {
+        ue.value = e, k("update:value", e), k("change", e);
+      },
+      notifySelect: (e, o) => {
+        delete o._parentGroup, k("select", e, o);
+      },
+      notifyDropdownVisibleChange: (e) => {
+        k("dropdownVisibleChange", e);
+      },
+      notifySearch: (e, o) => {
+        k("search", e, o);
+      },
+      notifyCreate: (e) => {
+        k("create", e);
+      },
+      notifyMouseEnter: (e) => {
+        k("mouseEnter", e);
+      },
+      notifyMouseLeave: (e) => {
+        k("mouseLeave", e);
+      },
+      notifyClear: () => {
+        k("clear");
+      },
+      notifyFocus: (e) => {
+        k("focus", e);
+      },
+      notifyBlur: (e) => {
+        k("blur", e);
+      },
+      notifyListScroll: (e) => {
+        k("listScroll", e);
+      },
+      updateHovering: (e) => {
+        J.value = e;
+      },
+      updateScrollTop: (e) => {
+        let o;
+        "renderOptionItem" in l ? (o = `.${s}-option-custom-selected`, e !== void 0 && (o = `.${s}-option-custom:nth-child(${e + 1})`)) : (o = `.${s}-option-selected`, e !== void 0 && (o = `.${s}-option:nth-child(${e + 1})`));
+        const t = ie.value;
+        if (!t) return;
+        const r = t.querySelector(o);
+        if (r) {
+          const u = r.parentNode;
+          u && (u.scrollTop = r.offsetTop - u.offsetTop - u.clientHeight / 2 + r.clientHeight / 2);
+        }
+      },
+      updateOverflowItemCount: (e) => {
+        V.value = e;
+      },
+      getContainer: () => ie.value,
+      getFocusableElements: (e) => {
+        if (!e) return [];
+        const o = [
+          "a[href]",
+          "area[href]",
+          'input:not([disabled]):not([type="hidden"])',
+          "select:not([disabled])",
+          "textarea:not([disabled])",
+          "button:not([disabled])",
+          "iframe",
+          "object",
+          "embed",
+          "[contenteditable]",
+          '[tabindex]:not([tabindex^="-"])'
+        ].join(",");
+        return Array.from(e.querySelectorAll(o));
+      },
+      getActiveElement: () => document.activeElement,
+      setIsFocusInContainer: (e) => {
+        M.value = e;
+      },
+      getIsFocusInContainer: () => M.value,
+      on: (e, o) => {
+        te.on(e, o);
+      },
+      off: (e) => {
+        te.off(e);
+      },
+      emit: (e) => {
+        te.emit(e);
+      },
+      once: (e, o) => {
+        te.once(e, o);
+      },
+      stopPropagation: () => {
+      },
+      persistEvent: () => {
+      }
+    }, a = new xl(He), oe = f(!1);
+    kl(() => {
+      l.optionList && l.optionList.length > 0 && (a.init(), oe.value = !0, $(() => {
+        F.value !== void 0 && (a == null || a.handleValueChange(F.value));
+      }));
+    }), me(
+      q,
+      () => {
+        !oe.value && q.value.length > 0 && $(() => {
+          a.init(), oe.value = !0, $(() => {
+            F.value !== void 0 && (a == null || a.handleValueChange(F.value));
+          });
+        });
+      },
+      { immediate: !0 }
+    ), $l(() => {
+      a == null || a.destroy();
+    }), me(
+      () => F.value,
+      (e, o) => {
+        oe.value && e !== o && (a == null || a.handleValueChange(e));
+      },
+      { deep: !0 }
+    ), me(
+      () => l.optionList,
+      () => {
+        a == null || a.handleOptionListChange(), $(() => {
+          "value" in l ? a == null || a.handleValueChange(l.value) : a == null || a.handleOptionListChangeHadDefaultValue();
+        });
+      },
+      { deep: !0 }
+    );
+    let ve = [];
+    const Ce = (e) => {
+      const o = [];
+      return e.forEach((t) => {
+        if (t)
+          if (t.type === I) {
+            const r = Array.isArray(t.children) ? t.children : [];
+            o.push(...Ce(r));
+          } else t.type && typeof t.type == "object" && o.push(t);
+      }), o;
+    };
+    Tl(() => {
+      if (!l.optionList || l.optionList.length === 0) {
+        const o = Ce(q.value).map((r) => {
+          var u;
+          return r.key || ((u = r.props) == null ? void 0 : u.value);
+        });
+        let t = o.length !== ve.length;
+        if (!t) {
+          for (let r = 0; r < o.length; r++)
+            if (o[r] !== ve[r]) {
+              t = !0;
+              break;
+            }
+        }
+        t && (ve = o, a == null || a.handleOptionListChange(), $(() => {
+          F.value !== void 0 ? a == null || a.handleValueChange(F.value) : a == null || a.handleOptionListChangeHadDefaultValue();
+        }));
+      }
+    });
+    const we = c(() => typeof l.triggerRender == "function"), Ne = c(() => we.value ? N(l.className) : N(s, l.className, {
+      [`${s}-borderless`]: l.borderless,
+      [`${s}-open`]: y.value,
+      [`${s}-focus`]: M.value,
+      [`${s}-disabled`]: l.disabled,
+      [`${s}-single`]: !l.multiple,
+      [`${s}-multiple`]: l.multiple,
+      [`${s}-filterable`]: !!l.filter,
+      [`${s}-small`]: l.size === "small",
+      [`${s}-large`]: l.size === "large",
+      [`${s}-error`]: l.validateStatus === "error",
+      [`${s}-warning`]: l.validateStatus === "warning",
+      [`${s}-no-arrow`]: !l.showArrow,
+      [`${s}-with-prefix`]: S.prefix || l.insetLabel,
+      [`${s}-with-suffix`]: S.suffix
+    })), Ee = c(() => {
+      const e = S.prefix || l.insetLabel, o = typeof e == "string";
+      return N({
+        [`${s}-prefix`]: !0,
+        [`${s}-inset-label`]: l.insetLabel,
+        [`${s}-prefix-text`]: e && o,
+        [`${s}-prefix-icon`]: e && !o
+      });
+    }), de = c(() => l.size === "small" ? "small" : "large"), b = c(() => Array.from(_.value.values())), v = c(() => B.value.filter((e) => e._show)), R = c(() => {
+      var e;
+      return ((e = l.virtualize) == null ? void 0 : e.itemSize) || 32;
+    }), fe = c(() => {
+      var e;
+      return ((e = l.virtualize) == null ? void 0 : e.height) || Be.LIST_HEIGHT;
+    }), We = c(() => {
+      var e;
+      return ((e = l.virtualize) == null ? void 0 : e.width) || "100%";
+    }), Ae = c(() => v.value.length * R.value), De = c(() => Math.ceil(fe.value / R.value) + 2), ge = c(() => {
+      const e = Math.floor(pe.value / R.value);
+      return Math.max(0, e - 1);
+    }), Ge = c(() => Math.min(v.value.length, ge.value + De.value)), Ke = c(() => {
+      const e = [];
+      for (let o = ge.value; o < Ge.value; o++)
+        e.push(o);
+      return e;
+    }), je = c(() => ge.value * R.value);
+    function Ie(e) {
+      return typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : `group-${JSON.stringify(e.label)}`;
+    }
+    const ke = c(() => {
+      const e = [], o = /* @__PURE__ */ new Set();
+      return v.value.forEach((t) => {
+        let r = !1, u;
+        if (t._parentGroup) {
+          const d = Ie(t._parentGroup);
+          if (!o.has(d)) {
+            r = !0;
+            const { key: C, ref: Q, ...Cl } = t._parentGroup;
+            u = Cl, o.add(d);
+          }
+        }
+        e.push({
+          option: t,
+          showGroupLabel: r,
+          groupLabel: u
+        });
+      }), e;
+    }), $e = c(() => l.allowCreate ? !0 : !l.filter || l.searchPosition !== "trigger" ? !1 : l.multiple ? !0 : A.value || y.value), Te = c(() => l.showClear && (_.value.size > 0 || m.value) && !l.disabled && (J.value || y.value)), qe = c(() => {
+      const e = l.searchPosition === "trigger", t = b.value.length > 0 ? b.value[0].label : "";
+      return N({
+        [`${s}-selection-text`]: !0,
+        [`${s}-selection-placeholder`]: !t && t !== 0,
+        [`${s}-selection-text-hide`]: m.value && A.value && e,
+        [`${s}-selection-text-inactive`]: !m.value && A.value && e
+      });
+    }), Ue = c(() => {
+      const e = {
+        ...l.dropdownStyle
+      };
+      if (x.value) {
+        const o = typeof x.value == "number" ? `${x.value}px` : x.value;
+        e.minWidth = o;
+      }
+      return e;
+    }), Je = c(() => {
+      const e = !B.value.length || !B.value.some((o) => o._show);
+      return N(
+        {
+          [`${s}-option-list-wrapper`]: !(e && l.emptyContent === null)
+        },
+        l.dropdownClassName
+      );
+    }), Ye = c(() => {
+      const e = {};
+      return l.maxHeight && (e.maxHeight = typeof l.maxHeight == "number" ? `${l.maxHeight}px` : l.maxHeight), e;
+    }), Xe = c(() => N({
+      [`${s}-option-list`]: !0,
+      [`${s}-option-list-chosen`]: _.value.size > 0
+    })), Qe = c(() => N(`${s}-dropdown-input`, {
+      [`${s}-dropdown-input-multiple`]: l.multiple,
+      [`${s}-dropdown-input-single`]: !l.multiple
+    })), Ze = c(() => N(`${s}-content-wrapper`, {
+      [`${s}-content-wrapper-one-line`]: l.maxTagCount && !y.value,
+      [`${s}-content-wrapper-empty`]: !b.value.length
+    })), el = c(() => !l.maxTagCount || l.showRestTagsPopover ? b.value : b.value.slice(0, l.maxTagCount)), _e = c(() => {
+      if (l.maxTagCount)
+        return l.maxTagCount;
+    }), ll = c(() => {
+      if (l.maxTagCount && !l.showRestTagsPopover)
+        return b.value.length - l.maxTagCount;
+    }), tl = c(() => {
+      if (!l.triggerRender || typeof l.triggerRender != "function")
+        return null;
+      const e = {
+        value: b.value,
+        inputValue: m.value,
+        onSearch: (t) => {
+          a == null || a.handleInputChange(t, {});
+        },
+        onChange: (t) => {
+          a == null || a.handleInputChange(t, {});
+        },
+        onRemove: (t) => {
+          a == null || a.removeTag({ label: t.label, value: t.value });
+        },
+        onClear: (t) => {
+          a == null || a.handleClearClick(t);
+        },
+        disabled: l.disabled,
+        placeholder: l.placeholder,
+        componentProps: { ...l }
+      };
+      return l.triggerRender(e);
+    });
+    function Y(e, o, t = !1) {
+      const r = e.disabled || l.disabled, u = (d, C) => {
+        C && typeof C.preventDefault == "function" && C.preventDefault(), a == null || a.removeTag({ label: e.label, value: e.value });
+      };
+      if (typeof l.renderSelectedItem == "function") {
+        const d = l.renderSelectedItem(e, {
+          index: o,
+          disabled: r,
+          onClose: u
+        });
+        if (d && typeof d == "object" && "isRenderInTag" in d) {
+          const { isRenderInTag: C, content: Q } = d;
+          return C ? H(
+            ne,
+            {
+              closable: !r,
+              disabled: r,
+              color: "white",
+              size: de.value,
+              onClose: u,
+              class: t ? `${s}-content-wrapper-collapse-tag` : void 0
+            },
+            {
+              default: () => Q
+            }
+          ) : Q;
+        }
+        return H(
+          ne,
+          {
+            closable: !r,
+            disabled: r,
+            color: "white",
+            size: de.value,
+            onClose: u,
+            class: t ? `${s}-content-wrapper-collapse-tag` : void 0
+          },
+          {
+            default: () => d
+          }
+        );
+      }
+      return H(
+        ne,
+        {
+          closable: !r,
+          disabled: r,
+          color: "white",
+          size: de.value,
+          onClose: u,
+          class: t ? `${s}-content-wrapper-collapse-tag` : void 0
+        },
+        {
+          default: () => e.label
+        }
+      );
+    }
+    function al(e, o) {
+      const t = H(
+        ne,
+        {
+          closable: !1,
+          size: l.size || "large",
+          color: "grey",
+          class: `${s}-content-wrapper-collapse-tag`,
+          key: `_+${e}`,
+          style: { marginRight: 0, flexShrink: 0 }
+        },
+        {
+          default: () => `+${e}`
+        }
+      );
+      return l.showRestTagsPopover ? H(
+        Oe,
+        {
+          showArrow: !0,
+          trigger: "hover",
+          position: "top",
+          autoAdjustOverflow: !0,
+          ...l.restTagsPopoverProps,
+          key: `_+${e}_Popover`
+        },
+        {
+          default: () => t,
+          content: () => H(
+            Hl,
+            {
+              spacing: 2,
+              wrap: !0,
+              style: { maxWidth: "400px" }
+            },
+            {
+              default: () => o.map((r, u) => Y(r, u))
+            }
+          )
+        }
+      ) : t;
+    }
+    function ol(e, o) {
+      return e.length && e[0] ? Y(e[0], o, !0) : null;
+    }
+    function rl(e) {
+      const { maxTagCount: o } = l, t = _.value.size - (o || 0) > 0 ? _.value.size - (o || 0) + e.length - 1 : e.length - 1;
+      V.value !== t && (a == null || a.updateOverflowItemCount(_.value.size, t));
+    }
+    function sl(e, o) {
+      const t = e.map((d) => ({
+        label: d.label,
+        option: d
+      })), r = typeof o == "number" ? t.slice(0, o) : t, u = [
+        H(Ol, {
+          items: r,
+          key: String(e.length),
+          itemKey: (d) => {
+            var C;
+            return ((C = d.option) == null ? void 0 : C.value) || d.label;
+          },
+          renderMode: "collapse",
+          collapseFrom: "end",
+          overflowRenderer: (d) => {
+            var C;
+            return d.length > 0 && ((C = d[0]) != null && C.option) ? ol([d[0].option], (o || 0) - 1) : null;
+          },
+          onOverflow: (d) => {
+            const C = d.map((Q) => Q.option).filter(Boolean);
+            rl(C);
+          },
+          visibleItemRenderer: (d, C) => Y(d.option, C),
+          style: {
+            display: "flex",
+            flexWrap: "nowrap",
+            alignItems: "center",
+            width: "100%",
+            minWidth: 0
+          }
+        })
+      ];
+      if (V.value > 0) {
+        const d = e.slice(e.length - V.value);
+        u.push(al(V.value, d));
+      }
+      return H(
+        "div",
+        {
+          class: `${s}-content-wrapper-collapse`,
+          style: {
+            display: "flex",
+            flexWrap: "nowrap",
+            alignItems: "center",
+            overflow: "hidden",
+            width: "100%",
+            minWidth: 0
+          }
+        },
+        u
+      );
+    }
+    function nl(e) {
+      l.disabled || a == null || a.handleClick(e);
+    }
+    function K(e, o) {
+      const t = B.value.findIndex((r) => r.value === e.value);
+      a == null || a.onSelect(e, t >= 0 ? t : 0, o);
+    }
+    function ul(e) {
+      e.stopPropagation(), a == null || a.handleClearClick(e);
+    }
+    function he(e) {
+      const t = e.target.value;
+      a == null || a.handleInputChange(t, e);
+    }
+    function X(e) {
+      ae.value && ae.value(e);
+    }
+    function il(e) {
+      M.value = !0, a == null || a.handleTriggerFocus(e);
+    }
+    function cl(e) {
+      M.value = !1, a == null || a.handleTriggerBlur(e);
+    }
+    function pl(e) {
+      l.multiple && l.filter && (M.value = !0), e.stopPropagation();
+    }
+    function Se(e) {
+      a == null || a.handleInputBlur(e);
+    }
+    function vl(e) {
+      a == null || a.handleMouseEnter(e);
+    }
+    function dl(e) {
+      a == null || a.handleMouseLeave(e);
+    }
+    function re(e) {
+      z.value = !0, L.value = e;
+    }
+    function fl(e) {
+      a == null || a.handleListScroll(e);
+    }
+    function gl(e) {
+      y.value = e, e ? (l.virtualize && (pe.value = 0), l.dropdownMatchSelectWidth && E.value && requestAnimationFrame(() => {
+        $(() => {
+          var t;
+          const o = ((t = E.value) == null ? void 0 : t.getBoundingClientRect().width) || 0;
+          o > 0 && (x.value = o);
+        });
+      }), l.searchPosition === "dropdown" && l.filter && $(() => {
+        W.value && typeof W.value.focus == "function" && W.value.focus();
+      }), l.virtualize && _.value.size > 0 && $(() => {
+        hl();
+      })) : (z.value = !1, le.value = !1, l.ellipsisTrigger || (V.value = 0)), k("dropdownVisibleChange", e);
+    }
+    function hl() {
+      if (!l.virtualize || !ce.value)
+        return;
+      let e = -1;
+      if (_.value.forEach((o) => {
+        const t = o._scrollIndex;
+        typeof t == "number" && t >= 0 && (e = e !== -1 && e < t ? e : t);
+      }), e !== -1) {
+        const o = e * R.value - fe.value / 2;
+        ce.value.scrollTop = Math.max(0, o);
+      }
+    }
+    function ml() {
+      a == null || a.handlePopoverClose();
+    }
+    function yl(e) {
+      y.value && !l.disabled && (a == null || a.close());
+    }
+    function bl(e) {
+      const o = e.target;
+      pe.value = o.scrollTop;
+    }
+    return ze({
+      clearInput: () => {
+        m.value = "";
+      },
+      selectAll: () => {
+        a == null || a.selectAll();
+      },
+      deselectAll: () => {
+        a == null || a.handleClearClick({});
+      },
+      focus: () => {
+        a == null || a.focus();
+      },
+      close: () => {
+        a == null || a.close();
+      },
+      open: () => {
+        a == null || a.open();
+      },
+      search: (e, o) => {
+        a == null || a.handleInputChange(e, o || {});
+      }
+    }), (e, o) => (n(), g(i(Oe), {
+      visible: y.value,
+      "onUpdate:visible": o[0] || (o[0] = (t) => y.value = t),
+      trigger: "custom",
+      position: l.position || "bottomLeft",
+      "z-index": l.zIndex,
+      "get-popup-container": l.getPopupContainer,
+      motion: l.motion,
+      "auto-adjust-overflow": l.autoAdjustOverflow,
+      spacing: l.spacing,
+      margin: l.dropdownMargin,
+      "stop-propagation": l.stopPropagation,
+      "mouse-enter-delay": l.mouseEnterDelay,
+      "mouse-leave-delay": l.mouseLeaveDelay,
+      "after-close": ml,
+      "wrapper-class-name": `${i(s)}-dropdown`,
+      "disable-focus-listener": !0,
+      onVisibleChange: gl,
+      onClickOutSide: yl
+    }, {
+      content: D(() => [
+        O("div", {
+          ref_key: "optionsContainerRef",
+          ref: Pe,
+          class: h(Je.value),
+          style: T(Ue.value),
+          onKeydown: X
+        }, [
+          i(S).outerTopSlot ? (n(), p("div", {
+            key: 0,
+            class: h(`${i(s)}-option-list-outer-top-slot`)
+          }, [
+            G(e.$slots, "outerTopSlot")
+          ], 2)) : w("", !0),
+          l.filter && l.searchPosition === "dropdown" ? (n(), p("div", {
+            key: 1,
+            class: h(`${i(s)}-dropdown-search-wrapper`)
+          }, [
+            Me(i(ye), {
+              ref_key: "dropdownInputRef",
+              ref: W,
+              value: m.value,
+              class: h(Qe.value),
+              placeholder: l.searchPlaceholder || "搜索",
+              "show-clear": "",
+              onInput: he,
+              onKeyDown: X
+            }, {
+              prefix: D(() => [
+                Me(i(Rl))
+              ]),
+              _: 1
+            }, 8, ["value", "class", "placeholder"])
+          ], 2)) : w("", !0),
+          O("div", {
+            ref_key: "optionsRef",
+            ref: ie,
+            class: h(Xe.value),
+            style: T(Ye.value),
+            role: "listbox",
+            "aria-multiselectable": l.multiple,
+            onScroll: fl
+          }, [
+            i(S).innerTopSlot ? (n(), p("div", {
+              key: 0,
+              class: h(`${i(s)}-option-list-inner-top-slot`)
+            }, [
+              G(e.$slots, "innerTopSlot")
+            ], 2)) : w("", !0),
+            l.loading ? (n(), g(i(Bl), { key: 1 })) : l.virtualize && v.value.length > 0 ? (n(), p("div", {
+              key: 2,
+              ref_key: "virtualContainerRef",
+              ref: ce,
+              style: T({
+                height: `${fe.value}px`,
+                width: We.value,
+                overflow: "auto",
+                position: "relative"
+              }),
+              onScroll: bl
+            }, [
+              O("div", {
+                style: T({ height: `${Ae.value}px`, position: "relative" })
+              }, [
+                O("div", {
+                  style: T({ transform: `translateY(${je.value}px)` })
+                }, [
+                  (n(!0), p(I, null, se(Ke.value, (t) => {
+                    var r;
+                    return n(), p(I, {
+                      key: ((r = v.value[t]) == null ? void 0 : r.value) || t
+                    }, [
+                      v.value[t] && v.value[t]._inputCreateOnly ? (n(), p(I, { key: 0 }, [
+                        l.renderCreateItem ? (n(), p("div", {
+                          key: 1,
+                          role: "button",
+                          "aria-label": "Use the input box to create an optional item",
+                          style: T({ height: `${R.value}px` }),
+                          onClick: (u) => K(v.value[t], u)
+                        }, [
+                          (n(), g(P(
+                            l.renderCreateItem(
+                              v.value[t].value,
+                              z.value && L.value === t,
+                              v.value[t].style
+                            )
+                          )))
+                        ], 12, El)) : (n(), g(ee, {
+                          key: 0,
+                          value: v.value[t].value,
+                          label: v.value[t].label,
+                          disabled: v.value[t].disabled,
+                          selected: v.value[t]._selected,
+                          focused: z.value && L.value === t,
+                          "show-tick": "",
+                          "class-name": v.value[t].className,
+                          style: T({
+                            height: `${R.value}px`,
+                            ...v.value[t].style
+                          }),
+                          onSelect: K,
+                          onMouseenter: () => re(t)
+                        }, {
+                          default: D(() => [
+                            O("span", {
+                              class: h(`${i(s)}-create-tips`)
+                            }, "创建", 2),
+                            Z(" " + j(v.value[t].value), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["value", "label", "disabled", "selected", "focused", "class-name", "style", "onMouseenter"]))
+                      ], 64)) : v.value[t] ? (n(), g(ee, {
+                        key: 1,
+                        value: v.value[t].value,
+                        label: v.value[t].label,
+                        disabled: v.value[t].disabled,
+                        children: v.value[t].children,
+                        selected: v.value[t]._selected,
+                        focused: z.value && L.value === t,
+                        "show-tick": "",
+                        "render-option-item": l.renderOptionItem,
+                        "input-value": m.value,
+                        "class-name": v.value[t].className,
+                        style: T({
+                          height: `${R.value}px`,
+                          ...v.value[t].style
+                        }),
+                        onSelect: K,
+                        onMouseenter: () => re(t)
+                      }, null, 8, ["value", "label", "disabled", "children", "selected", "focused", "render-option-item", "input-value", "class-name", "style", "onMouseenter"])) : w("", !0)
+                    ], 64);
+                  }), 128))
+                ], 4)
+              ], 4)
+            ], 36)) : ke.value.length > 0 ? (n(!0), p(I, { key: 3 }, se(ke.value, (t, r) => (n(), p(I, {
+              key: t.option._keyInJsx || t.option.value
+            }, [
+              t.showGroupLabel && t.groupLabel ? (n(), g(zl, {
+                key: Ie(t.groupLabel),
+                label: t.groupLabel.label,
+                "class-name": t.groupLabel.className,
+                style: T(t.groupLabel.style)
+              }, null, 8, ["label", "class-name", "style"])) : w("", !0),
+              t.option._inputCreateOnly ? (n(), p(I, { key: 1 }, [
+                l.renderCreateItem ? (n(), p("div", {
+                  key: 1,
+                  role: "button",
+                  "aria-label": "Use the input box to create an optional item",
+                  onClick: (u) => K(t.option, u)
+                }, [
+                  (n(), g(P(
+                    l.renderCreateItem(
+                      t.option.value,
+                      z.value && L.value === r,
+                      t.option.style
+                    )
+                  )))
+                ], 8, Wl)) : (n(), g(ee, {
+                  key: 0,
+                  value: t.option.value,
+                  label: t.option.label,
+                  disabled: t.option.disabled,
+                  selected: t.option._selected,
+                  focused: z.value && L.value === r,
+                  "show-tick": "",
+                  "class-name": t.option.className,
+                  style: T(t.option.style),
+                  onSelect: K,
+                  onMouseenter: () => re(r)
+                }, {
+                  default: D(() => [
+                    O("span", {
+                      class: h(`${i(s)}-create-tips`)
+                    }, "创建", 2),
+                    Z(" " + j(t.option.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value", "label", "disabled", "selected", "focused", "class-name", "style", "onMouseenter"]))
+              ], 64)) : (n(), g(ee, {
+                key: 2,
+                value: t.option.value,
+                label: t.option.label,
+                disabled: t.option.disabled,
+                children: t.option.children,
+                selected: t.option._selected,
+                focused: z.value && L.value === r,
+                "show-tick": "",
+                "render-option-item": l.renderOptionItem,
+                "input-value": m.value,
+                "class-name": t.option.className,
+                style: T(t.option.style),
+                onSelect: K,
+                onMouseenter: () => re(r)
+              }, null, 8, ["value", "label", "disabled", "children", "selected", "focused", "render-option-item", "input-value", "class-name", "style", "onMouseenter"]))
+            ], 64))), 128)) : (n(), g(ee, {
+              key: 4,
+              empty: "",
+              "empty-content": l.emptyContent
+            }, null, 8, ["empty-content"])),
+            i(S).innerBottomSlot ? (n(), p("div", {
+              key: 5,
+              class: h(`${i(s)}-option-list-inner-bottom-slot`)
+            }, [
+              G(e.$slots, "innerBottomSlot")
+            ], 2)) : w("", !0)
+          ], 46, Nl),
+          i(S).outerBottomSlot ? (n(), p("div", {
+            key: 2,
+            class: h(`${i(s)}-option-list-outer-bottom-slot`)
+          }, [
+            G(e.$slots, "outerBottomSlot")
+          ], 2)) : w("", !0)
+        ], 38)
+      ]),
+      default: D(() => [
+        O("div", {
+          id: l.id,
+          ref_key: "triggerRef",
+          ref: E,
+          name: l.name,
+          class: h(Ne.value),
+          style: T(l.style),
+          tabindex: "0",
+          "aria-label": e.$attrs["aria-label"] || void 0,
+          "aria-labelledby": l["aria-labelledby"],
+          "aria-describedby": l["aria-describedby"],
+          onClick: nl,
+          onKeydown: X,
+          onFocus: il,
+          onBlur: cl,
+          onMouseenter: vl,
+          onMouseleave: dl
+        }, [
+          we.value ? (n(), g(P(tl.value), { key: 0 })) : (n(), p(I, { key: 1 }, [
+            i(S).prefix || l.insetLabel ? (n(), p("div", {
+              key: 0,
+              id: l.insetLabelId,
+              class: h(Ee.value)
+            }, [
+              i(S).prefix ? G(e.$slots, "prefix", { key: 0 }) : l.insetLabel ? (n(), p(I, { key: 1 }, [
+                Z(j(l.insetLabel), 1)
+              ], 64)) : w("", !0)
+            ], 10, Dl)) : w("", !0),
+            O("div", {
+              class: h(`${i(s)}-selection`)
+            }, [
+              O("div", {
+                class: h(Ze.value),
+                style: T(l.ellipsisTrigger ? { width: "100%", minWidth: 0 } : void 0)
+              }, [
+                l.multiple ? (n(), p(I, { key: 1 }, [
+                  b.value.length > 0 && (!l.maxTagCount || l.expandRestTagsOnClick && y.value) ? (n(!0), p(I, { key: 0 }, se(b.value, (t, r) => (n(), g(P(Y(t, r)), {
+                    key: t.value
+                  }))), 128)) : b.value.length > 0 && l.ellipsisTrigger ? (n(), g(P(sl(b.value, _e.value)), { key: 1 })) : b.value.length > 0 && l.maxTagCount && !(l.expandRestTagsOnClick && y.value) && !l.ellipsisTrigger ? (n(), g(i(Ml), {
+                    key: 2,
+                    "max-tag-count": _e.value,
+                    "rest-count": ll.value,
+                    "show-popover": l.showRestTagsPopover,
+                    "popover-props": l.restTagsPopoverProps,
+                    size: "large"
+                  }, {
+                    default: D(() => [
+                      (n(!0), p(I, null, se(el.value, (t, r) => (n(), g(P(Y(t, r)), {
+                        key: t.value
+                      }))), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["max-tag-count", "rest-count", "show-popover", "popover-props"])) : m.value ? w("", !0) : (n(), p("span", {
+                    key: 3,
+                    class: h([`${i(s)}-selection-text`, `${i(s)}-selection-placeholder`])
+                  }, j(l.placeholder), 3)),
+                  $e.value ? (n(), g(i(ye), {
+                    key: 4,
+                    ref_key: "inputRef",
+                    ref: U,
+                    value: m.value,
+                    class: h(`${i(s)}-input ${i(s)}-input-multiple`),
+                    style: T(
+                      l.multiple && m.value ? { width: `${m.value.length * 16}px` } : l.multiple && l.allowCreate && !m.value ? { width: "100px" } : { width: "2px" }
+                    ),
+                    size: l.size,
+                    disabled: l.disabled,
+                    borderless: "",
+                    onInput: he,
+                    onKeyDown: X,
+                    onFocus: pl,
+                    onBlur: Se
+                  }, null, 8, ["value", "class", "style", "size", "disabled"])) : w("", !0)
+                ], 64)) : (n(), p(I, { key: 0 }, [
+                  O("span", {
+                    class: h(qe.value)
+                  }, [
+                    b.value.length > 0 ? (n(), p(I, { key: 0 }, [
+                      typeof l.renderSelectedItem == "function" ? (n(), g(P(l.renderSelectedItem(b.value[0])), { key: 0 })) : (n(), p(I, { key: 1 }, [
+                        Z(j(b.value[0].label), 1)
+                      ], 64))
+                    ], 64)) : (n(), p(I, { key: 1 }, [
+                      Z(j(l.placeholder), 1)
+                    ], 64))
+                  ], 2),
+                  $e.value ? (n(), g(i(ye), {
+                    key: 0,
+                    ref_key: "inputRef",
+                    ref: U,
+                    value: m.value,
+                    class: h(`${i(s)}-input ${i(s)}-input-single`),
+                    size: l.size,
+                    disabled: l.disabled,
+                    borderless: "",
+                    onInput: he,
+                    onKeyDown: X,
+                    onBlur: Se
+                  }, null, 8, ["value", "class", "size", "disabled"])) : w("", !0)
+                ], 64))
+              ], 6)
+            ], 2),
+            i(S).suffix || Te.value || l.showArrow ? (n(), p("div", {
+              key: 1,
+              class: h(`${i(s)}-suffix`)
+            }, [
+              i(S).suffix ? G(e.$slots, "suffix", { key: 0 }) : w("", !0),
+              Te.value ? (n(), g(i(Fl), {
+                key: 1,
+                class: h(`${i(s)}-clear`),
+                onClick: _l(ul, ["stop"])
+              }, null, 8, ["class"])) : l.showArrow ? (n(), p("div", {
+                key: 2,
+                class: h([`${i(s)}-arrow`, { [`${i(s)}-arrow-open`]: y.value }])
+              }, [
+                (n(), g(P(l.arrowIcon)))
+              ], 2)) : w("", !0)
+            ], 2)) : w("", !0)
+          ], 64))
+        ], 46, Al),
+        !l.optionList || l.optionList.length === 0 ? (n(), g(i(Fe), {
+          key: 0,
+          onCollect: Re
+        }, {
+          default: D(() => [
+            G(e.$slots, "default")
+          ]),
+          _: 3
+        })) : w("", !0)
+      ]),
+      _: 3
+    }, 8, ["visible", "position", "z-index", "get-popup-container", "motion", "auto-adjust-overflow", "spacing", "margin", "stop-propagation", "mouse-enter-delay", "mouse-leave-delay", "wrapper-class-name"]));
+  }
+});
+export {
+  vt as default
+};
+//# sourceMappingURL=Select.vue.js.map