@koi-design/uxd-ui 14.0.39 → 14.0.41

package/uxd-ui.umd.js

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@4.0.39 */
+/*! @koi-design/uxd-ui@4.0.41 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lucide-vue-next')) :
@@ -597,7 +597,7 @@
       left: rect.left + scrollLeft - clientLeft
     };
   }
-  const _sfc_main$2h = vue.defineComponent({
+  const _sfc_main$2g = vue.defineComponent({
     name: "UAffix",
     props: affixProps,
     emits: affixEmits,
@@ -691,9 +691,9 @@
       };
     }
   });
-  const _hoisted_1$Y = { ref: "containerRef" };
-  function _sfc_render$2f(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y, [
+  const _hoisted_1$X = { ref: "containerRef" };
+  function _sfc_render$2e(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
       vue.createElementVNode("div", {
         ref: "pointRef",
         class: vue.normalizeClass(_ctx.classes),
@@ -708,7 +708,7 @@
       ])
     ], 512);
   }
-  var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["render", _sfc_render$2f], ["__file", "Affix.vue"]]);
+  var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$2e], ["__file", "Affix.vue"]]);
 
   const UAffix = withInstall(Affix);
 
@@ -732,7 +732,7 @@
     click: (ev) => ev instanceof Event
   };
 
-  const _sfc_main$2g = vue.defineComponent({
+  const _sfc_main$2f = vue.defineComponent({
     name: "UIcon",
     props: iconProps,
     emits: iconEmits,
@@ -774,7 +774,7 @@
       };
     }
   });
-  function _sfc_render$2e(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("i", {
       class: vue.normalizeClass([
         {
@@ -790,7 +790,7 @@
       ])
     ], 6);
   }
-  var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$2e], ["__file", "Icon.vue"]]);
+  var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$2d], ["__file", "Icon.vue"]]);
 
   const UIcon = withInstall(Icon);
 
@@ -1105,7 +1105,7 @@
     "update:visible": (v) => typeof v === "boolean"
   };
 
-  const _sfc_main$2f = vue.defineComponent({
+  const _sfc_main$2e = vue.defineComponent({
     name: "UAlert",
     components: {
       UIcon,
@@ -1157,7 +1157,7 @@
       };
     }
   });
-  function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$2c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UIcon = vue.resolveComponent("UIcon");
     const _component_X = vue.resolveComponent("X");
     return vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -1214,7 +1214,7 @@
       _: 3
     }, 8, ["onAfterLeave"]);
   }
-  var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$2d], ["__file", "Alert.vue"]]);
+  var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$2c], ["__file", "Alert.vue"]]);
 
   const UAlert = withInstall(Alert);
 
@@ -3490,7 +3490,7 @@
     }
   };
 
-  const _sfc_main$2e = vue.defineComponent({
+  const _sfc_main$2d = vue.defineComponent({
     name: "UForm",
     props: formProps,
     emits: formEmits,
@@ -3614,7 +3614,7 @@
       };
     }
   });
-  function _sfc_render$2c(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$2b(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("form", {
       class: vue.normalizeClass([
         _ctx.prefixCls,
@@ -3630,7 +3630,7 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 34);
   }
-  var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$2c], ["__file", "Form.vue"]]);
+  var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$2b], ["__file", "Form.vue"]]);
 
   var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
   var freeGlobal$1 = freeGlobal;
@@ -7552,7 +7552,7 @@
     }
   });
 
-  const _sfc_main$2d = vue.defineComponent({
+  const _sfc_main$2c = vue.defineComponent({
     name: "ListContent",
     components: {
       ResizeObserver: ResizeObserver$1
@@ -7610,7 +7610,7 @@
       };
     }
   });
-  function _sfc_render$2b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$2a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
     return vue.openBlock(), vue.createElementBlock("div", {
       ref: _ctx.contentRef,
@@ -7631,7 +7631,7 @@
       }, 8, ["onResize"])
     ], 4);
   }
-  var ListContent = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$2b], ["__file", "ListContent.vue"]]);
+  var ListContent = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$2a], ["__file", "ListContent.vue"]]);
 
   const ListItem$2 = ({
     itemRef
@@ -7756,7 +7756,7 @@
   function getPageY(e) {
     return "touches" in e ? e.touches[0].pageY : e.pageY;
   }
-  const _sfc_main$2c = vue.defineComponent({
+  const _sfc_main$2b = vue.defineComponent({
     name: "VirtualScrollBar",
     props: {
       prefixCls: {
@@ -7915,7 +7915,7 @@
       };
     }
   });
-  function _sfc_render$2a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$29(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       ref: "scrollBarRef",
       class: vue.normalizeClass(`${_ctx.prefixCls}-scrollbar`),
@@ -7959,7 +7959,7 @@
       }, null, 38)
     ], 38);
   }
-  var VirtualScrollBar = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$2a], ["__file", "VirtualScrollBar.vue"]]);
+  var VirtualScrollBar = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$29], ["__file", "VirtualScrollBar.vue"]]);
 
   function useHeight(getKey, useVirtual, props, state, contentRef) {
     const instance = /* @__PURE__ */ new Map();
@@ -8197,7 +8197,7 @@
     };
   }
 
-  const _sfc_main$2b = vue.defineComponent({
+  const _sfc_main$2a = vue.defineComponent({
     name: "UVirtualList",
     components: {
       ListContent,
@@ -8398,7 +8398,7 @@
       };
     }
   });
-  function _sfc_render$29(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$28(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ListItem = vue.resolveComponent("ListItem");
     const _component_ListContent = vue.resolveComponent("ListContent");
     const _component_VirtualScrollBar = vue.resolveComponent("VirtualScrollBar");
@@ -8449,7 +8449,7 @@
       }, null, 8, ["prefix-cls", "height", "count", "scroll-height", "scroll-top", "onScroll"])) : vue.createCommentVNode("v-if", true)
     ], 16);
   }
-  var VirtualList$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$29], ["__file", "VirtualList.vue"]]);
+  var VirtualList$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$28], ["__file", "VirtualList.vue"]]);
 
   var VirtualList = withInstall(VirtualList$1);
 
@@ -8808,7 +8808,7 @@
     return desdroyOnClose && animationEnd ? null : renderFunction == null ? void 0 : renderFunction();
   }
 
-  const _sfc_main$2a = vue.defineComponent({
+  const _sfc_main$29 = vue.defineComponent({
     name: "OptionList",
     components: {
       VirtualList,
@@ -9055,9 +9055,9 @@
       };
     }
   });
-  const _hoisted_1$X = ["title", "onMousemove", "onClick"];
-  const _hoisted_2$n = ["id"];
-  function _sfc_render$28(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$W = ["title", "onMousemove", "onClick"];
+  const _hoisted_2$m = ["id"];
+  function _sfc_render$27(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_u_checkbox = vue.resolveComponent("u-checkbox");
     const _component_Render = vue.resolveComponent("Render");
     const _component_Check = vue.resolveComponent("Check");
@@ -9163,7 +9163,7 @@
               ]),
               _: 1
             }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
-          ], 46, _hoisted_1$X))
+          ], 46, _hoisted_1$W))
         ]),
         _: 1
       }, 8, ["prefix-cls", "data", "height", "item-height", "virtual", "onScrollAtTop", "onScrollAtBottom"])
@@ -9176,9 +9176,9 @@
       }, ["prevent"]))
     }, [
       vue.renderSlot(_ctx.$slots, "empty")
-    ], 42, _hoisted_2$n));
+    ], 42, _hoisted_2$m));
   }
-  var DropdownMenu$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$28], ["__file", "DropdownMenu.vue"]]);
+  var DropdownMenu$1 = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$27], ["__file", "DropdownMenu.vue"]]);
 
   const getInnerText = (children) => {
     if (children && children.length > 0) {
@@ -9545,7 +9545,7 @@
     select: (val) => typeof val === "string"
   };
 
-  const _sfc_main$29 = vue.defineComponent({
+  const _sfc_main$28 = vue.defineComponent({
     name: "UAutoComplete",
     components: {
       Popup,
@@ -9672,7 +9672,7 @@
       };
     }
   });
-  function _sfc_render$27(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$26(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UInput = vue.resolveComponent("UInput");
     const _component_LoaderCircle = vue.resolveComponent("LoaderCircle");
     const _component_UIcon = vue.resolveComponent("UIcon");
@@ -9750,7 +9750,7 @@
       }, 8, ["prefix-cls", "visible", "popup-class", "popup-style", "click-outside"])
     ], 2);
   }
-  var AutoComplete = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$27], ["__file", "AutoComplete.vue"]]);
+  var AutoComplete = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["render", _sfc_render$26], ["__file", "AutoComplete.vue"]]);
 
   const selectProps = {
     modelValue: {
@@ -9819,7 +9819,7 @@
       type: Function
     },
     maxTagTextLength: {
-      type: Number
+      type: [Number, String]
     },
     tagRender: {
       type: Function
@@ -10093,7 +10093,7 @@
     change: (href, ev) => typeof href === "string" && ev instanceof Event
   };
 
-  const _sfc_main$28 = vue.defineComponent({
+  const _sfc_main$27 = vue.defineComponent({
     name: "UAnchor",
     props: anchorProps,
     emits: anchorEmits,
@@ -10293,7 +10293,7 @@
       };
     }
   });
-  function _sfc_render$26(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.wrapperComponent), {
       container: _ctx.container,
       "offset-top": _ctx.offsetTop,
@@ -10325,9 +10325,9 @@
       _: 3
     }, 40, ["container", "offset-top", "offset-bottom", "onOnChange"]);
   }
-  var Anchor = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["render", _sfc_render$26], ["__file", "Anchor.vue"]]);
+  var Anchor = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["render", _sfc_render$25], ["__file", "Anchor.vue"]]);
 
-  const _sfc_main$27 = vue.defineComponent({
+  const _sfc_main$26 = vue.defineComponent({
     name: "UAnchorLink",
     props: anchorLinkProps,
     emits: anchorLinkEmits,
@@ -10366,8 +10366,8 @@
       };
     }
   });
-  const _hoisted_1$W = ["href", "data-scroll-offset", "data-href", "title"];
-  function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$V = ["href", "data-scroll-offset", "data-href", "title"];
+  function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass([`${_ctx.prefixCls}`, { [`${_ctx.prefixCls}-active`]: !!_ctx.anchorLinkClasses }])
     }, [
@@ -10378,11 +10378,11 @@
         "data-href": _ctx.href,
         title: _ctx.title,
         onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.goAnchor && _ctx.goAnchor(...args), ["prevent"]))
-      }, vue.toDisplayString(_ctx.title), 11, _hoisted_1$W),
+      }, vue.toDisplayString(_ctx.title), 11, _hoisted_1$V),
       vue.renderSlot(_ctx.$slots, "default")
     ], 2);
   }
-  var AnchorLink = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["render", _sfc_render$25], ["__file", "AnchorLink.vue"]]);
+  var AnchorLink = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$24], ["__file", "AnchorLink.vue"]]);
 
   const UAnchor = withInstall(Anchor, { Link: AnchorLink });
 
@@ -10416,7 +10416,7 @@
   };
 
   const sizeList = ["small", "large", "default"];
-  const _sfc_main$26 = vue.defineComponent({
+  const _sfc_main$25 = vue.defineComponent({
     name: "UAvatar",
     components: {
       UIcon
@@ -10488,8 +10488,8 @@
       };
     }
   });
-  const _hoisted_1$V = ["src"];
-  function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$U = ["src"];
+  function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UIcon = vue.resolveComponent("UIcon");
     return vue.openBlock(), vue.createElementBlock("span", {
       ref: "avatar",
@@ -10508,7 +10508,7 @@
         key: 0,
         src: _ctx.src,
         onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-      }, null, 40, _hoisted_1$V)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_UIcon, { key: 1 }, {
+      }, null, 40, _hoisted_1$U)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_UIcon, { key: 1 }, {
         default: vue.withCtx(() => [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
         ]),
@@ -10523,7 +10523,7 @@
       ], 6))
     ], 6);
   }
-  var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$24], ["__file", "Avatar.vue"]]);
+  var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["render", _sfc_render$23], ["__file", "Avatar.vue"]]);
 
   const popoverTrigger = ["hover", "focus", "click", "contextmenu"];
   const popoverType = ["popover", "popConfirm"];
@@ -10594,7 +10594,7 @@
     "update:visible": (v) => typeof v === "boolean"
   };
 
-  const _sfc_main$25 = vue.defineComponent({
+  const _sfc_main$24 = vue.defineComponent({
     name: "UPopover",
     components: {
       Popup
@@ -10757,7 +10757,7 @@
       };
     }
   });
-  function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Popup = vue.resolveComponent("Popup");
     return _ctx.disabled ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : (vue.openBlock(), vue.createBlock(_component_Popup, {
       key: 1,
@@ -10822,7 +10822,7 @@
       _: 3
     }, 8, ["class", "style", "prefix-cls", "popup-class", "popup-style", "visible", "placement", "trigger", "mouse-enter-delay", "offset", "destroy-popup-on-hide", "onPopupVisibleChange"]));
   }
-  var Popover = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["render", _sfc_render$23], ["__file", "Popover.vue"]]);
+  var Popover = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["render", _sfc_render$22], ["__file", "Popover.vue"]]);
 
   var AvatarGroup = vue.defineComponent({
     name: "UAvatarGroup",
@@ -10897,7 +10897,7 @@
     }
   };
 
-  const _sfc_main$24 = vue.defineComponent({
+  const _sfc_main$23 = vue.defineComponent({
     name: "UBackTop",
     components: {
       UIcon,
@@ -10964,7 +10964,7 @@
       };
     }
   });
-  function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ChevronUp = vue.resolveComponent("ChevronUp");
     const _component_UIcon = vue.resolveComponent("UIcon");
     return vue.openBlock(), vue.createElementBlock("div", {
@@ -10986,7 +10986,7 @@
       ])
     ], 6);
   }
-  var BackTop = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["render", _sfc_render$22], ["__file", "BackTop.vue"]]);
+  var BackTop = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$21], ["__file", "BackTop.vue"]]);
 
   const UBackTop = withInstall(BackTop);
 
@@ -11035,7 +11035,7 @@
   };
 
   const initColorList = colorType.toString().split(",");
-  const _sfc_main$23 = vue.defineComponent({
+  const _sfc_main$22 = vue.defineComponent({
     name: "UBadge",
     props: badgeProps,
     setup(props) {
@@ -11125,10 +11125,10 @@
       };
     }
   });
-  const _hoisted_1$U = ["data-color"];
-  const _hoisted_2$m = { class: "uui-badge-status-text" };
-  const _hoisted_3$7 = ["data-color"];
-  function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$T = ["data-color"];
+  const _hoisted_2$l = { class: "uui-badge-status-text" };
+  const _hoisted_3$6 = ["data-color"];
+  function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
     return _ctx.dot ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 0,
       class: vue.normalizeClass(_ctx.prefixCls)
@@ -11154,8 +11154,8 @@
         ]),
         "data-color": _ctx.computedColor,
         style: vue.normalizeStyle(_ctx.statusStyles)
-      }, null, 14, _hoisted_1$U),
-      vue.createElementVNode("span", _hoisted_2$m, [
+      }, null, 14, _hoisted_1$T),
+      vue.createElementVNode("span", _hoisted_2$l, [
         vue.renderSlot(_ctx.$slots, "text", {}, () => [
           vue.createTextVNode(vue.toDisplayString(_ctx.text), 1)
         ])
@@ -11193,12 +11193,12 @@
         vue.renderSlot(_ctx.$slots, "text", {}, () => [
           vue.createTextVNode(vue.toDisplayString(_ctx.finalCount), 1)
         ])
-      ], 14, _hoisted_3$7)), [
+      ], 14, _hoisted_3$6)), [
         [vue.vShow, _ctx.badgeShow]
       ]) : vue.createCommentVNode("v-if", true)
     ], 2));
   }
-  var Badge = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$21], ["__file", "Badge.vue"]]);
+  var Badge = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["render", _sfc_render$20], ["__file", "Badge.vue"]]);
 
   const UBadge = withInstall(Badge);
 
@@ -11328,7 +11328,7 @@
   };
 
   let guid$1 = -1;
-  const _sfc_main$22 = vue.defineComponent({
+  const _sfc_main$21 = vue.defineComponent({
     name: "USubMenu",
     components: {
       Popup,
@@ -11458,11 +11458,11 @@
       };
     }
   });
-  const _hoisted_1$T = ["aria-expanded", "aria-owns"];
-  const _hoisted_2$l = ["id"];
-  const _hoisted_3$6 = ["data-color", "aria-owns"];
+  const _hoisted_1$S = ["aria-expanded", "aria-owns"];
+  const _hoisted_2$k = ["id"];
+  const _hoisted_3$5 = ["data-color", "aria-owns"];
   const _hoisted_4$2 = ["id"];
-  function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1$(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ChevronDown = vue.resolveComponent("ChevronDown");
     const _component_UIcon = vue.resolveComponent("UIcon");
     const _component_ChevronRight = vue.resolveComponent("ChevronRight");
@@ -11499,7 +11499,7 @@
             ]),
             _: 1
           }, 8, ["class"])
-        ], 14, _hoisted_1$T),
+        ], 14, _hoisted_1$S),
         vue.createCommentVNode(' <transition name="slide-up"> '),
         vue.createCommentVNode(" <CollapseTransition appear> "),
         vue.withDirectives(vue.createElementVNode("ul", {
@@ -11508,7 +11508,7 @@
           style: vue.normalizeStyle(_ctx.subMenuStyle)
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 14, _hoisted_2$l), [
+        ], 14, _hoisted_2$k), [
           [vue.vShow, _ctx.isOpen]
         ]),
         vue.createCommentVNode(" </CollapseTransition> "),
@@ -11558,13 +11558,13 @@
               ]),
               _: 1
             }, 8, ["class"])
-          ], 10, _hoisted_3$6)
+          ], 10, _hoisted_3$5)
         ]),
         _: 3
       }, 8, ["aria-owns", "popup-class", "prefix", "placement", "offset", "trigger", "mouse-enter-delay", "mouse-leave-delay", "transition-name", "get-popup-container", "onPopupVisibleChange", "onClick"]))
     ], 2);
   }
-  var SubMenu = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["render", _sfc_render$20], ["__file", "SubMenu.vue"]]);
+  var SubMenu = /* @__PURE__ */ _export_sfc(_sfc_main$21, [["render", _sfc_render$1$], ["__file", "SubMenu.vue"]]);
 
   const FLOAT_PRECISION_ADJUST = 0.5;
   const getWidth$1 = (elem) => {
@@ -11955,7 +11955,7 @@
     "update:visible": (v) => typeof v === "boolean"
   };
 
-  const _sfc_main$21 = vue.defineComponent({
+  const _sfc_main$20 = vue.defineComponent({
     name: "UTooltip",
     components: {
       Popup
@@ -12104,9 +12104,9 @@
       };
     }
   });
-  const _hoisted_1$S = ["data-color"];
-  const _hoisted_2$k = ["data-color"];
-  function _sfc_render$1$(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$R = ["data-color"];
+  const _hoisted_2$j = ["data-color"];
+  function _sfc_render$1_(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Popup = vue.resolveComponent("Popup");
     return _ctx.disabled ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : (vue.openBlock(), vue.createBlock(_component_Popup, vue.mergeProps({
       key: 1,
@@ -12128,7 +12128,7 @@
           class: vue.normalizeClass(`${_ctx.prefixCls}-arrow`),
           "data-color": _ctx.color,
           style: vue.normalizeStyle(_ctx.arrowStyle)
-        }, null, 14, _hoisted_1$S),
+        }, null, 14, _hoisted_1$R),
         vue.createElementVNode("div", {
           ref: "innerRef",
           class: vue.normalizeClass(`${_ctx.prefixCls}-inner`),
@@ -12138,7 +12138,7 @@
           vue.renderSlot(_ctx.$slots, "title", {}, () => [
             vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
           ])
-        ], 10, _hoisted_2$k)
+        ], 10, _hoisted_2$j)
       ]),
       default: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "default")
@@ -12146,12 +12146,12 @@
       _: 3
     }, 16, ["prefix-cls", "popup-class", "popup-style", "visible", "placement", "trigger", "offset", "mouse-enter-delay", "mouse-leave-delay", "destroy-popup-on-hide", "onPopupVisibleChange"]));
   }
-  var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$21, [["render", _sfc_render$1$], ["__file", "Tooltip.vue"]]);
+  var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$20, [["render", _sfc_render$1_], ["__file", "Tooltip.vue"]]);
 
   const UTooltip = withInstall(Tooltip);
 
   let guid = -1;
-  const _sfc_main$20 = vue.defineComponent({
+  const _sfc_main$1$ = vue.defineComponent({
     name: "UMenuItem",
     components: {
       UTooltip
@@ -12239,8 +12239,8 @@
       };
     }
   });
-  const _hoisted_1$R = ["data-color"];
-  function _sfc_render$1_(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$Q = ["data-color"];
+  function _sfc_render$1Z(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UTooltip = vue.resolveComponent("UTooltip");
     return vue.openBlock(), vue.createBlock(_component_UTooltip, {
       title: _ctx.title,
@@ -12266,14 +12266,14 @@
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
             vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
           ])
-        ], 16, _hoisted_1$R)
+        ], 16, _hoisted_1$Q)
       ]),
       _: 3
     }, 8, ["title", "disabled", "class"]);
   }
-  var MenuItem$2 = /* @__PURE__ */ _export_sfc(_sfc_main$20, [["render", _sfc_render$1_], ["__file", "MenuItem.vue"]]);
+  var MenuItem$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["render", _sfc_render$1Z], ["__file", "MenuItem.vue"]]);
 
-  const _sfc_main$1$ = vue.defineComponent({
+  const _sfc_main$1_ = vue.defineComponent({
     name: "UMenuItemGroup",
     props: menuItemGroupProps,
     setup() {
@@ -12283,7 +12283,7 @@
       };
     }
   });
-  function _sfc_render$1Z(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1Y(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("li", {
       class: vue.normalizeClass(`${_ctx.rootPrefixCls}-item-group`)
     }, [
@@ -12301,9 +12301,9 @@
       ], 2)
     ], 2);
   }
-  var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["render", _sfc_render$1Z], ["__file", "MenuItemGroup.vue"]]);
+  var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["render", _sfc_render$1Y], ["__file", "MenuItemGroup.vue"]]);
 
-  const _sfc_main$1_ = vue.defineComponent({
+  const _sfc_main$1Z = vue.defineComponent({
     name: "UMenuDivider",
     setup() {
       const { rootPrefixCls } = vue.inject("menuStore", {});
@@ -12312,12 +12312,12 @@
       };
     }
   });
-  function _sfc_render$1Y(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1X(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("li", {
       class: vue.normalizeClass([`${_ctx.rootPrefixCls}-item-divider`])
     }, null, 2);
   }
-  var MenuDivider = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["render", _sfc_render$1Y], ["__file", "MenuDivider.vue"]]);
+  var MenuDivider = /* @__PURE__ */ _export_sfc(_sfc_main$1Z, [["render", _sfc_render$1X], ["__file", "MenuDivider.vue"]]);
 
   const UMenu = withInstall(Menu, {
     Item: MenuItem$2,
@@ -12407,7 +12407,7 @@
     return option.group;
   };
 
-  const _sfc_main$1Z = vue.defineComponent({
+  const _sfc_main$1Y = vue.defineComponent({
     name: "UDropdown",
     components: {
       Popup
@@ -12456,7 +12456,7 @@
       };
     }
   });
-  function _sfc_render$1X(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1W(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Popup = vue.resolveComponent("Popup");
     return vue.openBlock(), vue.createBlock(_component_Popup, {
       placement: _ctx.placement,
@@ -12490,9 +12490,9 @@
       _: 3
     }, 8, ["placement", "prefix-cls", "class", "disabled", "style", "offset", "visible", "trigger", "popup-class", "popup-style", "mouse-enter-delay", "mouse-leave-delay", "transition-name", "destroy-popup-on-hide", "get-popup-container", "modifiers", "onPopupVisibleChange"]);
   }
-  var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$1Z, [["render", _sfc_render$1X], ["__file", "Dropdown.vue"]]);
+  var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$1Y, [["render", _sfc_render$1W], ["__file", "Dropdown.vue"]]);
 
-  function _isSlot$4(s) {
+  function _isSlot$5(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var DropdownMenu = vue.defineComponent({
@@ -12557,7 +12557,7 @@
           let _slot;
           return vue.createVNode(UMenu.ItemGroup, {
             "title": m.title
-          }, _isSlot$4(_slot = m.children.map(renderItem)) ? _slot : {
+          }, _isSlot$5(_slot = m.children.map(renderItem)) ? _slot : {
             default: () => [_slot]
           });
         }
@@ -12606,7 +12606,7 @@
           [`${prefixCls}-menu-with-icon`]: this.icon
         },
         "style": this.style
-      }, _isSlot$4(menus) ? menus : {
+      }, _isSlot$5(menus) ? menus : {
         default: () => [menus]
       })]);
     }
@@ -12695,7 +12695,7 @@
     }
   };
 
-  const _sfc_main$1Y = vue.defineComponent({
+  const _sfc_main$1X = vue.defineComponent({
     name: "UButton",
     components: {
       UIcon
@@ -12737,18 +12737,18 @@
       };
     }
   });
-  const _hoisted_1$Q = ["data-color", "type", "disabled"];
-  const _hoisted_2$j = {
+  const _hoisted_1$P = ["data-color", "type", "disabled"];
+  const _hoisted_2$i = {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_3$5 = { "clip-path": "url(#clip0_165_1518)" };
+  const _hoisted_3$4 = { "clip-path": "url(#clip0_165_1518)" };
   const _hoisted_4$1 = ["fill"];
   const _hoisted_5 = ["id"];
   const _hoisted_6 = { key: 2 };
-  function _sfc_render$1W(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1V(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UIcon = vue.resolveComponent("UIcon");
     return vue.openBlock(), vue.createElementBlock("button", {
       ref: "buttonRef",
@@ -12778,8 +12778,8 @@
         spin: ""
       }, {
         default: vue.withCtx(() => [
-          (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$j, [
-            vue.createElementVNode("g", _hoisted_3$5, [
+          (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$i, [
+            vue.createElementVNode("g", _hoisted_3$4, [
               vue.createElementVNode("path", {
                 "fill-rule": "evenodd",
                 "clip-rule": "evenodd",
@@ -12823,11 +12823,11 @@
       _ctx.showSlot ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
         vue.renderSlot(_ctx.$slots, "default")
       ])) : vue.createCommentVNode("v-if", true)
-    ], 10, _hoisted_1$Q);
+    ], 10, _hoisted_1$P);
   }
-  var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1Y, [["render", _sfc_render$1W], ["__file", "Button.vue"]]);
+  var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["render", _sfc_render$1V], ["__file", "Button.vue"]]);
 
-  const _sfc_main$1X = vue.defineComponent({
+  const _sfc_main$1W = vue.defineComponent({
     name: "UButtonGroup",
     props: buttonGroupProps,
     setup() {
@@ -12837,7 +12837,7 @@
       };
     }
   });
-  function _sfc_render$1V(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1U(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass([
         `${_ctx.prefixCls}`,
@@ -12851,7 +12851,7 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 2);
   }
-  var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["render", _sfc_render$1V], ["__file", "ButtonGroup.vue"]]);
+  var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["render", _sfc_render$1U], ["__file", "ButtonGroup.vue"]]);
 
   const UButton = withInstall(Button, {
     Group: ButtonGroup
@@ -13018,7 +13018,7 @@
     }
   });
 
-  function _isSlot$3(s) {
+  function _isSlot$4(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   const UMenuItem = UMenu.Item;
@@ -13088,11 +13088,11 @@
         if (routeChildren && !!routeChildren.length) {
           return () => {
             let _slot2;
-            return vue.createVNode(UMenu, null, _isSlot$3(_slot2 = routeChildren.map((routeChild, index) => {
+            return vue.createVNode(UMenu, null, _isSlot$4(_slot2 = routeChildren.map((routeChild, index) => {
               let _slot;
               return vue.createVNode(UMenuItem, {
                 "key": index
-              }, _isSlot$3(_slot = renderRouteItem(routeChild)) ? _slot : {
+              }, _isSlot$4(_slot = renderRouteItem(routeChild)) ? _slot : {
                 default: () => [_slot]
               });
             })) ? _slot2 : {
@@ -13494,7 +13494,7 @@
     change: (v) => Array.isArray(v) && v.every((x) => x === void 0 || typeof x === "number" || typeof x === "string")
   };
 
-  const _sfc_main$1W = vue.defineComponent({
+  const _sfc_main$1V = vue.defineComponent({
     name: "UCheckbox",
     components: {
       UIcon,
@@ -13592,8 +13592,8 @@
       };
     }
   });
-  const _hoisted_1$P = ["disabled", "checked", "name"];
-  function _sfc_render$1U(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$O = ["disabled", "checked", "name"];
+  function _sfc_render$1T(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Check = vue.resolveComponent("Check");
     const _component_Minus = vue.resolveComponent("Minus");
     const _component_UIcon = vue.resolveComponent("UIcon");
@@ -13639,7 +13639,7 @@
           onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
           onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
           onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args))
-        }, null, 42, _hoisted_1$P)
+        }, null, 42, _hoisted_1$O)
       ], 2),
       _ctx.showSlot ? (vue.openBlock(), vue.createElementBlock("span", {
         key: 0,
@@ -13651,9 +13651,9 @@
       ], 2)) : vue.createCommentVNode("v-if", true)
     ], 2);
   }
-  var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["render", _sfc_render$1U], ["__file", "Checkbox.vue"]]);
+  var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["render", _sfc_render$1T], ["__file", "Checkbox.vue"]]);
 
-  const _sfc_main$1V = vue.defineComponent({
+  const _sfc_main$1U = vue.defineComponent({
     name: "UCheckboxGroup",
     components: {
       UIcon,
@@ -13725,8 +13725,8 @@
       };
     }
   });
-  const _hoisted_1$O = { key: 0 };
-  function _sfc_render$1T(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$N = { key: 0 };
+  function _sfc_render$1S(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_LoaderCircle = vue.resolveComponent("LoaderCircle");
     const _component_UIcon = vue.resolveComponent("UIcon");
     const _component_UCheckbox = vue.resolveComponent("UCheckbox");
@@ -13742,7 +13742,7 @@
       ])
     }, [
       _ctx.hasSlot ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-        _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
+        _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
           vue.createVNode(_component_UIcon, { spin: "" }, {
             default: vue.withCtx(() => [
               vue.createVNode(_component_LoaderCircle)
@@ -13764,13 +13764,13 @@
       ], 64))
     ], 2);
   }
-  var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["render", _sfc_render$1T], ["__file", "CheckboxGroup.vue"]]);
+  var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["render", _sfc_render$1S], ["__file", "CheckboxGroup.vue"]]);
 
   const UCheckbox = withInstall(Checkbox, {
     Group: CheckboxGroup
   });
 
-  const _sfc_main$1U = vue.defineComponent({
+  const _sfc_main$1T = vue.defineComponent({
     name: "SelectInput",
     props: {
       inputRef: {
@@ -13853,8 +13853,8 @@
       };
     }
   });
-  const _hoisted_1$N = ["id", "aria-expanded", "aria-own", "aria-controls", "aria-activedescendant", "disabled", "tabindex", "autocomplete", "autofocus", "value", "readonly", "unselectable"];
-  function _sfc_render$1S(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$M = ["id", "aria-expanded", "aria-own", "aria-controls", "aria-activedescendant", "disabled", "tabindex", "autocomplete", "autofocus", "value", "readonly", "unselectable"];
+  function _sfc_render$1R(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("input", {
       id: _ctx.id,
       ref: _ctx.inputRef,
@@ -13882,11 +13882,11 @@
       onInput: _cache[5] || (_cache[5] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
       onCompositionstart: _cache[6] || (_cache[6] = (...args) => _ctx.onCompositionstart && _ctx.onCompositionstart(...args)),
       onCompositionend: _cache[7] || (_cache[7] = (...args) => _ctx.onCompositionend && _ctx.onCompositionend(...args))
-    }, null, 46, _hoisted_1$N);
+    }, null, 46, _hoisted_1$M);
   }
-  var SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["render", _sfc_render$1S], ["__file", "Input.vue"]]);
+  var SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["render", _sfc_render$1R], ["__file", "Input.vue"]]);
 
-  const _sfc_main$1T = vue.defineComponent({
+  const _sfc_main$1S = vue.defineComponent({
     name: "SingleSeletor",
     components: {
       Render,
@@ -13982,8 +13982,8 @@
       };
     }
   });
-  const _hoisted_1$M = ["title"];
-  function _sfc_render$1R(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$L = ["title"];
+  function _sfc_render$1Q(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_SelectInput = vue.resolveComponent("SelectInput");
     const _component_Render = vue.resolveComponent("Render");
     return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
@@ -14013,7 +14013,7 @@
         vue.createVNode(_component_Render, {
           render: _ctx.getRender(_ctx.selectedItem.displayLabel)
         }, null, 8, ["render"])
-      ], 10, _hoisted_1$M)) : vue.createCommentVNode("v-if", true),
+      ], 10, _hoisted_1$L)) : vue.createCommentVNode("v-if", true),
       vue.withDirectives(vue.createElementVNode("div", {
         class: vue.normalizeClass(`${_ctx.prefixCls}-selection-placeholder`)
       }, [
@@ -14023,362 +14023,529 @@
       ])
     ], 64);
   }
-  var SingleSelection = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["render", _sfc_render$1R], ["__file", "Single.vue"]]);
+  var SingleSelection = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["render", _sfc_render$1Q], ["__file", "Single.vue"]]);
 
   const UPopover = withInstall(Popover);
 
   const REST_TAG_KEY = "__UUI_SELECT_MAX_REST_COUNT__";
-  const defaultMaxTagPlaceholder = (ommittedValus) => `+ ${ommittedValus.length}`;
-  var _sfc_main$1S = vue.defineComponent({
-    name: "MutipleSelector",
-    components: {
-      SelectInput,
-      Render,
-      UPopover,
-      UIcon,
-      X: lucideVueNext.X
-    },
-    inheritAttrs: false,
-    props: {
-      prefixCls: {
-        type: String
-      },
-      values: {
-        type: Array,
-        default: () => []
-      },
-      searchValue: {
-        type: String
-      },
-      filterable: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: void 0
-      },
-      open: {
-        type: Boolean,
-        default: void 0
-      },
-      inputRef: {
-        type: Function
-      },
-      tagTransitionName: {
-        type: String
-      },
-      maxTagCount: {
-        type: Number
-      },
-      maxTagTextLength: {
-        type: Number
-      },
-      maxTagPlaceholder: {
-        type: Function,
-        default: defaultMaxTagPlaceholder
-      },
-      maxTagTooltip: {
-        type: Boolean,
-        default: false
-      },
-      maxTagTooltipWidth: {
-        type: Number,
-        default: 99900
-      },
-      tagRender: {
-        type: Function
-      },
-      removeIcon: {
-        type: [String, Object]
-      },
-      isShowTagTooltip: {
-        type: Boolean,
-        default: false
-      },
-      popoverProps: {
-        type: Object,
-        default: () => ({})
+  function useMultipleBase(props, emit) {
+    const motionAppear = vue.ref(false);
+    const measureRef = vue.ref();
+    const inputWidth = vue.ref(0);
+    const mergedContainerWidth = vue.computed(() => props.containerWrapperWidth || 0);
+    const itemWidths = vue.shallowRef(/* @__PURE__ */ new Map());
+    const suffixWidth = vue.shallowRef(0);
+    const prevRestWidth = vue.shallowRef(0);
+    const restWidth = vue.shallowRef(0);
+    const displayCount = vue.shallowRef(null);
+    const restReady = vue.shallowRef(false);
+    const inputValue = vue.computed(() => {
+      return props.searchValue;
+    });
+    const inputEditable = vue.computed(() => {
+      return props.filterable && props.open;
+    });
+    const showPlaceholder = vue.computed(() => {
+      return !props.values.length && !inputValue.value;
+    });
+    const isNotRender = vue.computed(() => {
+      return !props.tagRender;
+    });
+    const mergedDisplayCount = vue.computed(() => {
+      if (displayCount.value === null) {
+        return Number.MAX_SAFE_INTEGER;
       }
-    },
-    emits: ["select", "input-mousedown", "input-change", "input-keydown", "input-compositionstart", "input-compositionend", "input-paste"],
-    setup(props, {
-      emit
-    }) {
-      const motionAppear = vue.ref(false);
-      const measureRef = vue.ref();
-      const inputWidth = vue.ref(0);
-      const inputValue = vue.computed(() => {
-        return props.searchValue;
-      });
-      const inputEditable = vue.computed(() => {
-        return props.filterable && props.open;
-      });
-      const showPlaceholder = vue.computed(() => {
-        return !props.values.length && !inputValue.value;
-      });
-      vue.onMounted(() => {
-        motionAppear.value = true;
-        vue.watch(inputValue, () => {
-          inputWidth.value = measureRef.value.scrollWidth;
-        }, {
-          flush: "post"
-        });
-      });
-      const isNotRender = vue.computed(() => {
-        return !props.tagRender;
-      });
-      const displayValues = vue.computed(() => {
-        const {
-          values,
-          maxTagCount,
-          maxTagTextLength,
-          maxTagPlaceholder
-        } = props;
-        let restCount = 0;
-        let _display = values;
-        if (typeof maxTagCount === "number") {
-          restCount = values.length - maxTagCount;
-          _display = values.slice(0, maxTagCount);
-        }
-        if (typeof maxTagTextLength === "number") {
-          _display = _display.map(({
-            displayLabel,
-            ...rest
-          }) => {
-            let _label = displayLabel;
-            if (typeof displayLabel === "string" || typeof displayLabel === "number") {
-              const strLabel = String(_label);
-              if (strLabel.length > maxTagTextLength) {
-                _label = `${strLabel.slice(0, maxTagTextLength)}...`;
-              }
+      return displayCount.value || 0;
+    });
+    const mergedRestWidth = vue.computed(() => Math.max(prevRestWidth.value, restWidth.value));
+    const omittedItems = vue.computed(() => {
+      return props.values.slice(mergedDisplayCount.value + 1);
+    });
+    const displayRest = vue.computed(() => restReady.value && !!omittedItems.value.length);
+    const baseDisplayValues = vue.computed(() => {
+      const { values, maxTagCount, maxTagTextLength, maxTagPlaceholder } = props;
+      let restCount = 0;
+      let _display = values;
+      if (typeof maxTagCount === "number") {
+        restCount = values.length - maxTagCount;
+        _display = values.slice(0, maxTagCount);
+      }
+      if (typeof maxTagTextLength === "number") {
+        _display = _display.map(({ displayLabel, ...rest }) => {
+          let _label = displayLabel;
+          if (typeof displayLabel === "string" || typeof displayLabel === "number") {
+            const strLabel = String(_label);
+            if (strLabel.length > maxTagTextLength) {
+              _label = `${strLabel.slice(0, maxTagTextLength)}...`;
             }
-            return {
-              ...rest,
-              displayLabel: _label
-            };
-          });
-        }
-        if (restCount > 0) {
-          const rest = values.slice(maxTagCount);
-          _display.push({
-            key: REST_TAG_KEY,
-            value: REST_TAG_KEY,
-            displayLabel: maxTagPlaceholder(rest)
-          });
-        }
-        return _display;
-      });
-      const closable = (item) => {
-        return item.key !== REST_TAG_KEY && !item.disabled;
-      };
-      const onClose = (value, e) => {
-        if (e && e.stopPropagation) {
-          e.stopPropagation();
-        }
-        emit("select", value, {
-          selected: false
+          }
+          return {
+            ...rest,
+            displayLabel: _label
+          };
         });
-      };
-      return {
-        getRender,
-        REST_TAG_KEY,
-        motionAppear,
-        measureRef,
-        inputWidth,
-        inputValue,
-        inputEditable,
-        showPlaceholder,
-        isNotRender,
-        displayValues,
-        closable,
-        onClose,
-        onInputMouseDown: () => {
-          emit("input-mousedown");
-        },
-        onInputChange: (val) => {
-          emit("input-change", val);
-        },
-        onInputKeydown: (e) => {
-          emit("input-keydown", e);
-        },
-        onInputCompositionStart: (e) => {
-          emit("input-compositionstart", e);
-        },
-        onInputCompositionEnd: (e) => {
-          emit("input-compositionend", e);
-        },
-        onInputPaste: (e) => {
-          emit("input-paste", e);
+      }
+      if (restCount > 0) {
+        const rest = values.slice(maxTagCount);
+        _display.push({
+          key: REST_TAG_KEY,
+          value: REST_TAG_KEY,
+          displayLabel: maxTagPlaceholder(rest)
+        });
+      }
+      return _display;
+    });
+    const overflowDisplayValues = vue.computed(() => {
+      const { maxTagPlaceholder } = props;
+      let items = [];
+      if (props.containerWrapperWidth === null) {
+        items = props.values;
+      } else {
+        items = props.values.slice(0, Math.min(props.values.length, props.containerWrapperWidth / props.itemWidth));
+      }
+      items = [
+        ...items,
+        {
+          key: REST_TAG_KEY,
+          value: REST_TAG_KEY,
+          displayLabel: maxTagPlaceholder(omittedItems.value)
         }
-      };
-    }
-  });
+      ];
+      return items;
+    });
+    const displayValues = vue.computed(() => {
+      return props.enableOverflow ? overflowDisplayValues.value : baseDisplayValues.value;
+    });
+    const closable = (item) => {
+      return item.key !== REST_TAG_KEY && !item.disabled;
+    };
+    const onClose = (value, e) => {
+      if (e && e.stopPropagation) {
+        e.stopPropagation();
+      }
+      emit("select", value, { selected: false });
+    };
+    const getItemWidth = (index) => {
+      return itemWidths.value.get(displayValues.value[index].value || displayValues.value[index].key);
+    };
+    const updateDisplayCount = (count, notReady) => {
+      displayCount.value = count;
+      if (!notReady) {
+        restReady.value = count < props.values.length - 1;
+      }
+    };
+    const onOverflowItemResize = ({ width }, item) => {
+      const clone = new Map(itemWidths.value);
+      const key = item.value || item.key;
+      if (key === REST_TAG_KEY) {
+        prevRestWidth.value = restWidth.value;
+        restWidth.value = width;
+      }
+      if (width === null) {
+        clone.delete(key);
+      } else {
+        clone.set(key, width);
+      }
+      itemWidths.value = clone;
+    };
+    const onSuffixResize = ({ width }) => {
+      suffixWidth.value = width;
+    };
+    const onInputMouseDown = () => {
+      emit("input-mousedown");
+    };
+    const onInputChange = (val) => {
+      emit("input-change", val);
+    };
+    const onInputKeydown = (e) => {
+      emit("input-keydown", e);
+    };
+    const onInputCompositionStart = (e) => {
+      emit("input-compositionstart", e);
+    };
+    const onInputCompositionEnd = (e) => {
+      emit("input-compositionend", e);
+    };
+    const onInputPaste = (e) => {
+      emit("input-paste", e);
+    };
+    vue.onMounted(() => {
+      motionAppear.value = true;
+      vue.watch(
+        inputValue,
+        () => {
+          inputWidth.value = measureRef.value.scrollWidth;
+        },
+        { flush: "post" }
+      );
+    });
+    vue.watch([mergedContainerWidth, itemWidths, restWidth, suffixWidth, displayValues], () => {
+      if (!props.enableOverflow)
+        return;
+      if (mergedContainerWidth.value && mergedRestWidth.value && displayValues.value) {
+        let totalWidth = suffixWidth.value;
+        const len = displayValues.value.filter((item) => item.key !== REST_TAG_KEY).length;
+        const lastIndex = len - 1;
+        if (!len) {
+          updateDisplayCount(0);
+          return;
+        }
+        for (let i = 0; i < len; i += 1) {
+          const currentItemWidth = getItemWidth(i);
+          if (currentItemWidth === void 0) {
+            updateDisplayCount(i - 1, true);
+            break;
+          }
+          totalWidth += currentItemWidth;
+          if (lastIndex === 0 && totalWidth <= mergedContainerWidth.value || i === lastIndex - 1 && totalWidth + getItemWidth(lastIndex) <= mergedContainerWidth.value) {
+            updateDisplayCount(lastIndex);
+            break;
+          } else if (totalWidth + mergedRestWidth.value > mergedContainerWidth.value) {
+            updateDisplayCount(i - 1);
+            break;
+          }
+        }
+      }
+    });
+    return {
+      motionAppear,
+      measureRef,
+      inputWidth,
+      inputValue,
+      inputEditable,
+      showPlaceholder,
+      isNotRender,
+      displayValues,
+      displayRest,
+      mergedDisplayCount,
+      closable,
+      onClose,
+      onOverflowItemResize,
+      onSuffixResize,
+      onInputMouseDown,
+      onInputChange,
+      onInputKeydown,
+      onInputCompositionStart,
+      onInputCompositionEnd,
+      onInputPaste,
+      REST_TAG_KEY,
+      getRender
+    };
+  }
 
-  const _hoisted_1$L = ["title"];
-  const _hoisted_2$i = ["title"];
-  const _hoisted_3$4 = ["title"];
-  function _sfc_render$1Q(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_Render = vue.resolveComponent("Render");
-    const _component_X = vue.resolveComponent("X");
-    const _component_UIcon = vue.resolveComponent("UIcon");
-    const _component_UPopover = vue.resolveComponent("UPopover");
-    const _component_SelectInput = vue.resolveComponent("SelectInput");
-    return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-      vue.createCommentVNode(' <transition-group :appear="motionAppear" :name="tagTransitionName"> '),
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.displayValues, (item) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-          key: item.key
-        }, [
-          _ctx.isNotRender ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 0,
-            class: vue.normalizeClass({
-              [`${item.class}`]: item.class,
-              [`${_ctx.prefixCls}-selection-item`]: true,
-              [`${_ctx.prefixCls}-selection-item-disabled`]: item.disabled
-            })
-          }, [
-            item.key === _ctx.REST_TAG_KEY || _ctx.isShowTagTooltip ? (vue.openBlock(), vue.createBlock(_component_UPopover, vue.mergeProps({
-              key: 0,
-              disabled: !_ctx.maxTagTooltip,
-              trigger: "hover",
-              "dropdown-class": `${_ctx.prefixCls}-dropdown-tooltip`,
-              "show-arrow": true,
-              placement: "top",
-              ref_for: true
-            }, _ctx.popoverProps), {
-              content: vue.withCtx(() => [
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass(`${_ctx.prefixCls}-selection-tooltip`),
-                  style: vue.normalizeStyle({ maxWidth: `${_ctx.maxTagTooltipWidth}px` })
-                }, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.values, (tipItem) => {
-                    return vue.openBlock(), vue.createElementBlock("span", {
-                      key: tipItem.key,
-                      class: vue.normalizeClass({
-                        [`${_ctx.prefixCls}-selection-item`]: true
-                      })
-                    }, [
-                      vue.createElementVNode("span", {
-                        class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-content`),
-                        title: tipItem.title
-                      }, [
-                        vue.createVNode(_component_Render, {
-                          render: _ctx.getRender(tipItem.displayLabel)
-                        }, null, 8, ["render"])
-                      ], 10, _hoisted_2$i),
-                      _ctx.closable(tipItem) ? (vue.openBlock(), vue.createBlock(_component_UIcon, {
-                        key: 0,
-                        class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-remove`),
-                        onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-                        }, ["stop", "prevent"])),
-                        onClick: (e) => _ctx.onClose(tipItem.value, e)
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(_component_X)
-                        ]),
-                        _: 2
-                      }, 1032, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
-                    ], 2);
-                  }), 128))
-                ], 6)
-              ]),
-              default: vue.withCtx(() => [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-content`),
-                  title: item.title
-                }, [
-                  vue.createVNode(_component_Render, {
-                    render: _ctx.getRender(item.displayLabel)
-                  }, null, 8, ["render"])
-                ], 10, _hoisted_1$L)
-              ]),
-              _: 2
-            }, 1040, ["disabled", "dropdown-class"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-content`),
-                title: item.title
-              }, [
-                vue.createCommentVNode(" {{ item.displayLabel }} "),
-                vue.createVNode(_component_Render, {
-                  render: _ctx.getRender(item.displayLabel)
-                }, null, 8, ["render"])
-              ], 10, _hoisted_3$4),
-              _ctx.closable(item) ? (vue.openBlock(), vue.createBlock(_component_UIcon, {
-                key: 0,
-                class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-remove`),
-                onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-                }, ["stop", "prevent"])),
-                onClick: (e) => _ctx.onClose(item.value, e)
-              }, {
-                default: vue.withCtx(() => [
-                  _ctx.removeIcon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.removeIcon), { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_X, { key: 1 }))
-                ]),
-                _: 2
-              }, 1032, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
-            ], 64))
-          ], 2)) : (vue.openBlock(), vue.createElementBlock("span", {
-            key: 1,
-            class: vue.normalizeClass(item.class),
-            onMousedown: _cache[2] || (_cache[2] = vue.withModifiers(() => {
-            }, ["stop", "prevent"]))
-          }, [
-            vue.createVNode(_component_Render, {
-              render: () => {
-                var _a;
-                return (_a = _ctx.tagRender) == null ? void 0 : _a.call(_ctx, {
-                  ...item,
-                  closable: _ctx.closable(item),
-                  onClose: (e) => {
-                    _ctx.onClose(item.value, e);
-                  }
-                });
-              }
-            }, null, 8, ["render"])
-          ], 34))
-        ], 64);
-      }), 128)),
-      vue.createCommentVNode(" </transition-group> "),
-      vue.createElementVNode("span", {
-        class: vue.normalizeClass(`${_ctx.prefixCls}-selection-search`),
-        style: vue.normalizeStyle({ width: `${_ctx.inputWidth}px` })
-      }, [
-        vue.createVNode(_component_SelectInput, {
-          "input-ref": _ctx.inputRef,
-          "prefix-cls": _ctx.prefixCls,
-          autocomplete: "off",
-          disabled: _ctx.disabled,
-          editable: _ctx.inputEditable,
-          value: _ctx.inputValue,
-          onMousedown: _ctx.onInputMouseDown,
-          onChange: _ctx.onInputChange,
-          onKeydown: _ctx.onInputKeydown,
-          onCompositionstart: _ctx.onInputCompositionStart,
-          onCompositionend: _ctx.onInputCompositionEnd,
-          onPaste: _ctx.onInputPaste
-        }, null, 8, ["input-ref", "prefix-cls", "disabled", "editable", "value", "onMousedown", "onChange", "onKeydown", "onCompositionstart", "onCompositionend", "onPaste"]),
-        vue.createElementVNode("span", {
-          ref: "measureRef",
-          class: vue.normalizeClass(`${_ctx.prefixCls}-selection-search-mirror`),
-          "aria-hidden": ""
-        }, vue.toDisplayString(_ctx.inputValue) + "\xA0 ", 3)
-      ], 6),
-      vue.withDirectives(vue.createElementVNode("div", {
-        class: vue.normalizeClass(`${_ctx.prefixCls}-selection-placeholder`)
-      }, [
-        vue.renderSlot(_ctx.$slots, "placeholder")
-      ], 2), [
-        [vue.vShow, _ctx.showPlaceholder]
-      ])
-    ], 64);
+  function _isSlot$3(s) {
+    return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
-  var Multiple = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["render", _sfc_render$1Q], ["__file", "Multiple.vue"]]);
+  const defaultMaxTagPlaceholder = (ommittedValus) => `+ ${ommittedValus.length}...`;
+  const multipleBaseProps = {
+    prefixCls: {
+      type: String
+    },
+    values: {
+      type: Array,
+      default: () => []
+    },
+    searchValue: {
+      type: String
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    inputRef: {
+      type: Function
+    },
+    tagTransitionName: {
+      type: String
+    },
+    maxTagCount: {
+      type: Number
+    },
+    maxTagTextLength: {
+      type: [Number, String]
+    },
+    maxTagPlaceholder: {
+      type: Function,
+      default: defaultMaxTagPlaceholder
+    },
+    maxTagTooltip: {
+      type: Boolean,
+      default: false
+    },
+    maxTagTooltipWidth: {
+      type: Number,
+      default: 99900
+    },
+    tagRender: {
+      type: Function
+    },
+    removeIcon: {
+      type: [String, Object]
+    },
+    isShowTagTooltip: {
+      type: Boolean,
+      default: false
+    },
+    popoverProps: {
+      type: Object,
+      default: () => ({})
+    },
+    itemWidth: {
+      type: Number,
+      default: 10
+    },
+    containerWrapperWidth: {
+      type: [Number, null],
+      default: null
+    },
+    enableOverflow: {
+      type: Boolean,
+      default: false
+    }
+  };
+  const multipleBaseEmits = ["select", "input-mousedown", "input-change", "input-keydown", "input-compositionstart", "input-compositionend", "input-paste"];
+  function renderSelectionItem(item, props, {
+    prefixCls,
+    isNotRender,
+    closable,
+    onClose,
+    values
+  }) {
+    const {
+      tagRender,
+      removeIcon,
+      maxTagTooltip,
+      maxTagTooltipWidth,
+      popoverProps,
+      isShowTagTooltip
+    } = props;
+    if (isNotRender) {
+      const content = vue.createVNode("span", {
+        "class": {
+          [`${item.class}`]: item.class,
+          [`${prefixCls}-selection-item`]: true,
+          [`${prefixCls}-selection-item-disabled`]: item.disabled
+        }
+      }, [item.key === REST_TAG_KEY || isShowTagTooltip ? vue.createVNode(UPopover, vue.mergeProps({
+        "disabled": !maxTagTooltip,
+        "trigger": "hover",
+        "dropdown-class": `${prefixCls}-dropdown-tooltip`,
+        "show-arrow": true,
+        "placement": "top"
+      }, popoverProps), {
+        default: () => vue.createVNode("span", {
+          "class": `${prefixCls}-selection-item-content`,
+          "title": item.title
+        }, [getRender(item.displayLabel)()]),
+        content: () => vue.createVNode("div", {
+          "class": `${prefixCls}-selection-tooltip`,
+          "style": {
+            maxWidth: `${maxTagTooltipWidth}px`
+          }
+        }, [values.map((tipItem) => vue.createVNode("span", {
+          "key": tipItem.key,
+          "class": {
+            [`${prefixCls}-selection-item`]: true
+          }
+        }, [vue.createVNode("span", {
+          "class": `${prefixCls}-selection-item-content`,
+          "title": tipItem.title
+        }, [getRender(tipItem.displayLabel)()]), closable(tipItem) && vue.createVNode(UIcon, vue.mergeProps({
+          "class": `${prefixCls}-selection-item-remove`
+        }, {
+          onMousedown: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        }, {
+          "onClick": (e) => onClose(tipItem.value, e)
+        }), {
+          default: () => [vue.createVNode(lucideVueNext.X, null, null)]
+        })]))])
+      }) : vue.createVNode(vue.Fragment, null, [vue.createVNode("span", {
+        "class": `${prefixCls}-selection-item-content`,
+        "title": item.title
+      }, [getRender(item.displayLabel)()]), closable(item) && vue.createVNode(UIcon, vue.mergeProps({
+        "class": `${prefixCls}-selection-item-remove`
+      }, {
+        onMousedown: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }, {
+        "onClick": (e) => onClose(item.value, e)
+      }), {
+        default: () => [removeIcon ? vue.createVNode(vue.resolveComponent("component"), {
+          "is": removeIcon
+        }, null) : vue.createVNode(lucideVueNext.X, null, null)]
+      })])]);
+      return content;
+    }
+    return vue.createVNode("span", {
+      "class": item.class,
+      "onMousedown": (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }, [tagRender == null ? void 0 : tagRender({
+      ...item,
+      closable: closable(item),
+      onClose: (e) => {
+        onClose(item.value, e);
+      }
+    })]);
+  }
+  function renderSearchInput(props, {
+    prefixCls,
+    inputRef,
+    disabled,
+    inputEditable,
+    inputValue,
+    inputWidth,
+    measureRef,
+    onInputMouseDown,
+    onInputChange,
+    onInputKeydown,
+    onInputCompositionStart,
+    onInputCompositionEnd,
+    onInputPaste
+  }) {
+    return vue.createVNode("span", {
+      "class": `${prefixCls}-selection-search`,
+      "style": {
+        width: `${inputWidth}px`
+      }
+    }, [vue.createVNode(SelectInput, {
+      "input-ref": inputRef,
+      "prefix-cls": prefixCls,
+      "autocomplete": "off",
+      "disabled": disabled,
+      "editable": inputEditable,
+      "value": inputValue,
+      "onMousedown": onInputMouseDown,
+      "onChange": onInputChange,
+      "onKeydown": onInputKeydown,
+      "onCompositionstart": onInputCompositionStart,
+      "onCompositionend": onInputCompositionEnd,
+      "onPaste": onInputPaste
+    }, null), vue.createVNode("span", {
+      "ref": measureRef,
+      "class": `${prefixCls}-selection-search-mirror`,
+      "aria-hidden": true
+    }, [inputValue, vue.createTextVNode("\xA0")])]);
+  }
+  function renderPlaceholder(showPlaceholder, prefixCls, slots) {
+    var _a;
+    return showPlaceholder ? vue.createVNode("div", {
+      "class": `${prefixCls}-selection-placeholder`
+    }, [(_a = slots.placeholder) == null ? void 0 : _a.call(slots)]) : null;
+  }
+  var MultipleBase = vue.defineComponent({
+    name: "MultipleBase",
+    props: multipleBaseProps,
+    emits: multipleBaseEmits,
+    setup(props, {
+      emit,
+      slots
+    }) {
+      const baseState = useMultipleBase(props, emit);
+      return () => {
+        let _slot;
+        const {
+          displayValues,
+          isNotRender,
+          closable,
+          onClose,
+          inputValue,
+          inputWidth,
+          measureRef,
+          showPlaceholder,
+          onInputMouseDown,
+          onInputChange,
+          onInputKeydown,
+          onInputCompositionStart,
+          onInputCompositionEnd,
+          onInputPaste,
+          onOverflowItemResize,
+          onSuffixResize,
+          displayRest
+        } = baseState;
+        return vue.createVNode(vue.Fragment, null, [displayValues.value.map((item, index) => {
+          const content = renderSelectionItem(item, props, {
+            prefixCls: props.prefixCls,
+            isNotRender: isNotRender.value,
+            displayRest: displayRest.value,
+            closable,
+            onClose,
+            values: props.values
+          });
+          return props.enableOverflow ? vue.createVNode(ResizeObserver$1, {
+            "key": item.key,
+            "onResize": (e) => onOverflowItemResize(e, item)
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": `${props.prefixCls}-selection-item-wrapper`,
+              "style": {
+                opacity: index > baseState.mergedDisplayCount.value && item.key !== REST_TAG_KEY || !displayRest.value && item.key === REST_TAG_KEY ? 0 : 1,
+                height: index > baseState.mergedDisplayCount.value && item.key !== REST_TAG_KEY || !displayRest.value && item.key === REST_TAG_KEY ? 0 : void 0,
+                overflowY: index > baseState.mergedDisplayCount.value && item.key !== REST_TAG_KEY || !displayRest.value && item.key === REST_TAG_KEY ? "hidden" : void 0,
+                pointerEvents: index > baseState.mergedDisplayCount.value && item.key !== REST_TAG_KEY || !displayRest.value && item.key === REST_TAG_KEY ? "none" : void 0,
+                position: index > baseState.mergedDisplayCount.value && item.key !== REST_TAG_KEY || !displayRest.value && item.key === REST_TAG_KEY ? "absolute" : void 0
+              }
+            }, [content])]
+          }) : content;
+        }), props.enableOverflow ? vue.createVNode(ResizeObserver$1, {
+          "onResize": onSuffixResize
+        }, _isSlot$3(_slot = renderSearchInput(props, {
+          prefixCls: props.prefixCls,
+          inputRef: props.inputRef,
+          disabled: props.disabled,
+          inputEditable: baseState.inputEditable.value,
+          inputValue: inputValue.value,
+          inputWidth,
+          measureRef,
+          onInputMouseDown,
+          onInputChange,
+          onInputKeydown,
+          onInputCompositionStart,
+          onInputCompositionEnd,
+          onInputPaste
+        })) ? _slot : {
+          default: () => [_slot]
+        }) : renderSearchInput(props, {
+          prefixCls: props.prefixCls,
+          inputRef: props.inputRef,
+          disabled: props.disabled,
+          inputEditable: baseState.inputEditable.value,
+          inputValue: inputValue.value,
+          inputWidth,
+          measureRef,
+          onInputMouseDown,
+          onInputChange,
+          onInputKeydown,
+          onInputCompositionStart,
+          onInputCompositionEnd,
+          onInputPaste
+        }), renderPlaceholder(showPlaceholder.value, props.prefixCls, slots)]);
+      };
+    }
+  });
 
+  const RESPONSIVE = "responsive";
   const _sfc_main$1R = vue.defineComponent({
     name: "Selection",
     components: {
       SingleSelection,
-      Multiple
+      ResizeObserver: ResizeObserver$1,
+      MultipleBase
     },
     props: {
       prefixCls: {
@@ -14427,7 +14594,7 @@
         type: Function
       },
       maxTagTextLength: {
-        type: Number
+        type: [Number, String]
       },
       maxTagTooltip: {
         type: Boolean,
@@ -14463,10 +14630,17 @@
     setup(props, { emit }) {
       const inputRef = vue.ref(null);
       let compositionStatus = false;
+      const isResponsive = vue.computed(() => {
+        return props.maxTagTextLength === RESPONSIVE;
+      });
       const [getInputMouseDown, setInputMouseDown] = useLock(0);
       const onInputMouseDown = () => {
         setInputMouseDown(true);
       };
+      const containerWrapperWidth = vue.shallowRef(null);
+      const onOverflowResize = ({ width }) => {
+        containerWrapperWidth.value = width;
+      };
       let pastedText = null;
       const onInputPaste = (e) => {
         const { clipboardData } = e;
@@ -14533,74 +14707,87 @@
         onInputKeydown,
         onInputCompositionStart,
         onInputCompositionEnd,
-        onInputPaste
+        onInputPaste,
+        onOverflowResize,
+        containerWrapperWidth,
+        isResponsive
       };
     }
   });
   function _sfc_render$1P(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_SingleSelection = vue.resolveComponent("SingleSelection");
-    const _component_Multiple = vue.resolveComponent("Multiple");
-    return vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(`${_ctx.prefixCls}-selection`),
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
-      onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.onMousedown && _ctx.onMousedown(...args))
-    }, [
-      !_ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_SingleSelection, {
-        key: 0,
-        "prefix-cls": _ctx.prefixCls,
-        values: _ctx.values,
-        open: _ctx.open,
-        filterable: _ctx.filterable,
-        disabled: _ctx.disabled,
-        "input-ref": _ctx.getInputRef,
-        "search-value": _ctx.searchValue,
-        "allow-create": _ctx.allowCreate,
-        "title-key": _ctx.titleKey,
-        onInputMousedown: _ctx.onInputMouseDown,
-        onInputChange: _ctx.onInputChange,
-        onInputKeydown: _ctx.onInputKeydown,
-        onInputCompositionstart: _ctx.onInputCompositionStart,
-        onInputCompositionend: _ctx.onInputCompositionEnd,
-        onInputPaste: _ctx.onInputPaste
-      }, {
-        placeholder: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "placeholder")
-        ]),
-        _: 3
-      }, 8, ["prefix-cls", "values", "open", "filterable", "disabled", "input-ref", "search-value", "allow-create", "title-key", "onInputMousedown", "onInputChange", "onInputKeydown", "onInputCompositionstart", "onInputCompositionend", "onInputPaste"])) : _ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_Multiple, {
-        key: 1,
-        "prefix-cls": _ctx.prefixCls,
-        values: _ctx.values,
-        open: _ctx.open,
-        filterable: _ctx.filterable,
-        disabled: _ctx.disabled,
-        "input-ref": _ctx.getInputRef,
-        "search-value": _ctx.searchValue,
-        "max-tag-count": _ctx.maxTagCount,
-        "max-tag-text-length": _ctx.maxTagTextLength,
-        "max-tag-placeholder": _ctx.maxTagPlaceholder,
-        "max-tag-tooltip": _ctx.maxTagTooltip,
-        "max-tag-tooltip-width": _ctx.maxTagTooltipWidth,
-        "is-show-tag-tooltip": _ctx.isShowTagTooltip,
-        "popover-props": _ctx.popoverProps,
-        "tag-render": _ctx.tagRender,
-        "tag-transition-name": _ctx.tagTransitionName,
-        "allow-create": _ctx.allowCreate,
-        "remove-icon": _ctx.removeIcon,
-        onSelect: _ctx.onSelectionSelect,
-        onInputMousedown: _ctx.onInputMouseDown,
-        onInputChange: _ctx.onInputChange,
-        onInputKeydown: _ctx.onInputKeydown,
-        onInputCompositionstart: _ctx.onInputCompositionStart,
-        onInputCompositionend: _ctx.onInputCompositionEnd,
-        onInputPaste: _ctx.onInputPaste
-      }, {
-        placeholder: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "placeholder")
-        ]),
-        _: 3
-      }, 8, ["prefix-cls", "values", "open", "filterable", "disabled", "input-ref", "search-value", "max-tag-count", "max-tag-text-length", "max-tag-placeholder", "max-tag-tooltip", "max-tag-tooltip-width", "is-show-tag-tooltip", "popover-props", "tag-render", "tag-transition-name", "allow-create", "remove-icon", "onSelect", "onInputMousedown", "onInputChange", "onInputKeydown", "onInputCompositionstart", "onInputCompositionend", "onInputPaste"])) : vue.createCommentVNode("v-if", true)
-    ], 34);
+    const _component_MultipleBase = vue.resolveComponent("MultipleBase");
+    const _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
+    return vue.openBlock(), vue.createBlock(_component_ResizeObserver, { onResize: _ctx.onOverflowResize }, {
+      default: vue.withCtx(() => [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass({
+            [`${_ctx.prefixCls}-selection`]: true,
+            [`${_ctx.prefixCls}-selection-overflow`]: _ctx.multiple && _ctx.isResponsive
+          }),
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.onMousedown && _ctx.onMousedown(...args))
+        }, [
+          !_ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_SingleSelection, {
+            key: 0,
+            "prefix-cls": _ctx.prefixCls,
+            values: _ctx.values,
+            open: _ctx.open,
+            filterable: _ctx.filterable,
+            disabled: _ctx.disabled,
+            "input-ref": _ctx.getInputRef,
+            "search-value": _ctx.searchValue,
+            "allow-create": _ctx.allowCreate,
+            "title-key": _ctx.titleKey,
+            onInputMousedown: _ctx.onInputMouseDown,
+            onInputChange: _ctx.onInputChange,
+            onInputKeydown: _ctx.onInputKeydown,
+            onInputCompositionstart: _ctx.onInputCompositionStart,
+            onInputCompositionend: _ctx.onInputCompositionEnd,
+            onInputPaste: _ctx.onInputPaste
+          }, {
+            placeholder: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "placeholder")
+            ]),
+            _: 3
+          }, 8, ["prefix-cls", "values", "open", "filterable", "disabled", "input-ref", "search-value", "allow-create", "title-key", "onInputMousedown", "onInputChange", "onInputKeydown", "onInputCompositionstart", "onInputCompositionend", "onInputPaste"])) : (vue.openBlock(), vue.createBlock(_component_MultipleBase, {
+            key: 1,
+            "prefix-cls": _ctx.prefixCls,
+            values: _ctx.values,
+            open: _ctx.open,
+            "enable-overflow": _ctx.isResponsive,
+            filterable: _ctx.filterable,
+            disabled: _ctx.disabled,
+            "input-ref": _ctx.getInputRef,
+            "search-value": _ctx.searchValue,
+            "max-tag-count": _ctx.maxTagCount,
+            "max-tag-text-length": _ctx.maxTagTextLength,
+            "max-tag-placeholder": _ctx.maxTagPlaceholder,
+            "max-tag-tooltip": _ctx.maxTagTooltip,
+            "max-tag-tooltip-width": _ctx.maxTagTooltipWidth,
+            "is-show-tag-tooltip": _ctx.isShowTagTooltip,
+            "popover-props": _ctx.popoverProps,
+            "tag-render": _ctx.tagRender,
+            "tag-transition-name": _ctx.tagTransitionName,
+            "remove-icon": _ctx.removeIcon,
+            "container-wrapper-width": _ctx.containerWrapperWidth,
+            onSelect: _ctx.onSelectionSelect,
+            onInputMousedown: _ctx.onInputMouseDown,
+            onInputChange: _ctx.onInputChange,
+            onInputKeydown: _ctx.onInputKeydown,
+            onInputCompositionstart: _ctx.onInputCompositionStart,
+            onInputCompositionend: _ctx.onInputCompositionEnd,
+            onInputPaste: _ctx.onInputPaste
+          }, {
+            placeholder: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "placeholder")
+            ]),
+            _: 3
+          }, 8, ["prefix-cls", "values", "open", "enable-overflow", "filterable", "disabled", "input-ref", "search-value", "max-tag-count", "max-tag-text-length", "max-tag-placeholder", "max-tag-tooltip", "max-tag-tooltip-width", "is-show-tag-tooltip", "popover-props", "tag-render", "tag-transition-name", "remove-icon", "container-wrapper-width", "onSelect", "onInputMousedown", "onInputChange", "onInputKeydown", "onInputCompositionstart", "onInputCompositionend", "onInputPaste"]))
+        ], 34)
+      ]),
+      _: 3
+    }, 8, ["onResize"]);
   }
   var Selection = /* @__PURE__ */ _export_sfc(_sfc_main$1R, [["render", _sfc_render$1P], ["__file", "Selection.vue"]]);