npm - @koi-design/uxd-ui - Versions diffs - 13.2.6 → 13.2.8 - Mend

@koi-design/uxd-ui 13.2.6 → 13.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (553) hide show

package/uxd-ui.umd.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@3.2.6 */
+/*! @koi-design/uxd-ui@3.2.8 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@koi-design/uxd-icon')) :
@@ -22,7 +22,7 @@
   );
   /*! #__NO_SIDE_EFFECTS__ */
   /**
-  * @vue/shared v3.5.13
+  * @vue/shared v3.5.18
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -596,7 +596,7 @@
       left: rect.left + scrollLeft - clientLeft
     };
   }
-  const _sfc_main$2g = vue.defineComponent({
+  const _sfc_main$2f = vue.defineComponent({
     name: "UAffix",
     props: affixProps,
     emits: affixEmits,
@@ -690,9 +690,9 @@
       };
     }
   });
-  const _hoisted_1$$ = { ref: "containerRef" };
-  function _sfc_render$2e(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
+  const _hoisted_1$_ = { ref: "containerRef" };
+  function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
       vue.createElementVNode("div", {
         ref: "pointRef",
         class: vue.normalizeClass(_ctx.classes),
@@ -707,7 +707,7 @@
       ])
     ], 512);
   }
-  var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$2e], ["__file", "Affix.vue"]]);
+  var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$2d], ["__file", "Affix.vue"]]);
   const UAffix = withInstall(Affix);
@@ -731,7 +731,7 @@
     click: (ev) => ev instanceof Event
   };
-  const _sfc_main$2f = vue.defineComponent({
+  const _sfc_main$2e = vue.defineComponent({
     name: "UIcon",
     props: iconProps,
     emits: iconEmits,
@@ -773,7 +773,7 @@
       };
     }
   });
-  function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$2c(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("i", {
       class: vue.normalizeClass([
         {
@@ -789,7 +789,7 @@
       ])
     ], 6);
   }
-  var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$2d], ["__file", "Icon.vue"]]);
+  var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$2c], ["__file", "Icon.vue"]]);
   const UIcon = withInstall(Icon);
@@ -1107,7 +1107,7 @@
     "update:visible": (v) => typeof v === "boolean"
   };
-  const _sfc_main$2e = vue.defineComponent({
+  const _sfc_main$2d = vue.defineComponent({
     name: "UAlert",
     components: {
       UIcon,
@@ -1170,8 +1170,8 @@
       };
     }
   });
-  const _hoisted_1$_ = ["data-color"];
-  function _sfc_render$2c(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$Z = ["data-color"];
+  function _sfc_render$2b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UIcon = vue.resolveComponent("UIcon");
     const _component_URoundClose = vue.resolveComponent("URoundClose");
     return vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -1225,12 +1225,12 @@
               })
             ])
           ], 2)) : vue.createCommentVNode("v-if", true)
-        ], 10, _hoisted_1$_)) : vue.createCommentVNode("v-if", true)
+        ], 10, _hoisted_1$Z)) : vue.createCommentVNode("v-if", true)
       ]),
       _: 3
     }, 8, ["onAfterLeave"]);
   }
-  var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$2c], ["__file", "Alert.vue"]]);
+  var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$2b], ["__file", "Alert.vue"]]);
   const UAlert = withInstall(Alert);
@@ -3506,7 +3506,7 @@
     }
   };
-  const _sfc_main$2d = vue.defineComponent({
+  const _sfc_main$2c = vue.defineComponent({
     name: "UForm",
     props: formProps,
     emits: formEmits,
@@ -3630,7 +3630,7 @@
       };
     }
   });
-  function _sfc_render$2b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$2a(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("form", {
       class: vue.normalizeClass([
         _ctx.prefixCls,
@@ -3646,7 +3646,7 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 34);
   }
-  var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$2b], ["__file", "Form.vue"]]);
+  var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$2a], ["__file", "Form.vue"]]);
   var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
   var freeGlobal$1 = freeGlobal;
@@ -7518,7 +7518,7 @@
         if (stateWidth !== _width || stateHeight !== _height) {
           stateWidth = _width;
           stateHeight = _height;
-          emit("resize", { widht: _width, height: _height });
+          emit("resize", { widht: _width, width: _width, height: _height });
         }
       };
       const destroyObserver = () => {
@@ -7565,7 +7565,7 @@
     }
   });
-  const _sfc_main$2c = vue.defineComponent({
+  const _sfc_main$2b = vue.defineComponent({
     name: "ListContent",
     components: {
       ResizeObserver: ResizeObserver$1
@@ -7623,7 +7623,7 @@
       };
     }
   });
-  function _sfc_render$2a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$29(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
     return vue.openBlock(), vue.createElementBlock("div", {
       ref: _ctx.contentRef,
@@ -7644,7 +7644,7 @@
       }, 8, ["onResize"])
     ], 4);
   }
-  var ListContent = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$2a], ["__file", "ListContent.vue"]]);
+  var ListContent = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$29], ["__file", "ListContent.vue"]]);
   const ListItem$2 = ({
     itemRef
@@ -7769,7 +7769,7 @@
   function getPageY(e) {
     return "touches" in e ? e.touches[0].pageY : e.pageY;
   }
-  const _sfc_main$2b = vue.defineComponent({
+  const _sfc_main$2a = vue.defineComponent({
     name: "VirtualScrollBar",
     props: {
       prefixCls: {
@@ -7917,7 +7917,7 @@
       };
     }
   });
-  function _sfc_render$29(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$28(_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$2b, [["render", _sfc_render$29], ["__file", "VirtualScrollBar.vue"]]);
+  var VirtualScrollBar = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$28], ["__file", "VirtualScrollBar.vue"]]);
   function useHeight(getKey, useVirtual, props, state, contentRef) {
     const instance = /* @__PURE__ */ new Map();
@@ -8197,7 +8197,7 @@
     };
   }
-  const _sfc_main$2a = vue.defineComponent({
+  const _sfc_main$29 = vue.defineComponent({
     name: "UVirtualList",
     components: {
       ListContent,
@@ -8398,7 +8398,7 @@
       };
     }
   });
-  function _sfc_render$28(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$27(_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$2a, [["render", _sfc_render$28], ["__file", "VirtualList.vue"]]);
+  var VirtualList$1 = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$27], ["__file", "VirtualList.vue"]]);
   var VirtualList = withInstall(VirtualList$1);
@@ -8808,7 +8808,7 @@
     return desdroyOnClose && animationEnd ? null : renderFunction == null ? void 0 : renderFunction();
   }
-  const _sfc_main$29 = vue.defineComponent({
+  const _sfc_main$28 = vue.defineComponent({
     name: "OptionList",
     components: {
       VirtualList,
@@ -9058,9 +9058,9 @@
       };
     }
   });
-  const _hoisted_1$Z = ["title", "onMousemove", "onClick"];
-  const _hoisted_2$q = ["id"];
-  function _sfc_render$27(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$Y = ["title", "onMousemove", "onClick"];
+  const _hoisted_2$p = ["id"];
+  function _sfc_render$26(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_u_checkbox = vue.resolveComponent("u-checkbox");
     const _component_URoundCheck = vue.resolveComponent("URoundCheck");
     const _component_UIcon = vue.resolveComponent("UIcon");
@@ -9087,6 +9087,7 @@
           _: 1
         }, 8, ["class", "model-value", "indeterminate", "disabled", "onChange"])
       ], 34)) : vue.createCommentVNode("v-if", true),
+      vue.renderSlot(_ctx.$slots, "top"),
       vue.createVNode(_component_VirtualList, {
         ref: "listRef",
         "prefix-cls": `${_ctx.prefixCls}-dropdown-list`,
@@ -9167,7 +9168,7 @@
               ]),
               _: 1
             }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
-          ], 46, _hoisted_1$Z))
+          ], 46, _hoisted_1$Y))
         ]),
         _: 1
       }, 8, ["prefix-cls", "data", "height", "item-height", "virtual", "data-color", "onScrollAtTop", "onScrollAtBottom"])
@@ -9180,9 +9181,9 @@
       }, ["prevent"]))
     }, [
       vue.renderSlot(_ctx.$slots, "empty")
-    ], 42, _hoisted_2$q));
+    ], 42, _hoisted_2$p));
   }
-  var DropdownMenu$1 = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$27], ["__file", "DropdownMenu.vue"]]);
+  var DropdownMenu$1 = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["render", _sfc_render$26], ["__file", "DropdownMenu.vue"]]);
   const getInnerText = (children) => {
     if (children && children.length > 0) {
@@ -9549,7 +9550,7 @@
     select: (val) => typeof val === "string"
   };
-  const _sfc_main$28 = vue.defineComponent({
+  const _sfc_main$27 = vue.defineComponent({
     name: "UAutoComplete",
     components: {
       Popup,
@@ -9676,7 +9677,7 @@
       };
     }
   });
-  function _sfc_render$26(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UInput = vue.resolveComponent("UInput");
     const _component_ULineLoading = vue.resolveComponent("ULineLoading");
     const _component_UIcon = vue.resolveComponent("UIcon");
@@ -9754,7 +9755,7 @@
       }, 8, ["prefix-cls", "visible", "popup-class", "popup-style", "click-outside"])
     ], 2);
   }
-  var AutoComplete = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["render", _sfc_render$26], ["__file", "AutoComplete.vue"]]);
+  var AutoComplete = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["render", _sfc_render$25], ["__file", "AutoComplete.vue"]]);
   const selectProps = {
     modelValue: {
@@ -9823,7 +9824,7 @@
       type: Function
     },
     maxTagTextLength: {
-      type: Number
+      type: [Number, String]
     },
     tagRender: {
       type: Function
@@ -10101,7 +10102,7 @@
     change: (href, ev) => typeof href === "string" && ev instanceof Event
   };
-  const _sfc_main$27 = vue.defineComponent({
+  const _sfc_main$26 = vue.defineComponent({
     name: "UAnchor",
     props: anchorProps,
     emits: anchorEmits,
@@ -10301,7 +10302,7 @@
       };
     }
   });
-  function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.wrapperComponent), {
       container: _ctx.container,
       "offset-top": _ctx.offsetTop,
@@ -10333,9 +10334,9 @@
       _: 3
     }, 40, ["container", "offset-top", "offset-bottom", "onOnChange"]);
   }
-  var Anchor = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["render", _sfc_render$25], ["__file", "Anchor.vue"]]);
+  var Anchor = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$24], ["__file", "Anchor.vue"]]);
-  const _sfc_main$26 = vue.defineComponent({
+  const _sfc_main$25 = vue.defineComponent({
     name: "UAnchorLink",
     props: anchorLinkProps,
     emits: anchorLinkEmits,
@@ -10374,8 +10375,8 @@
       };
     }
   });
-  const _hoisted_1$Y = ["href", "data-scroll-offset", "data-href", "title"];
-  function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$X = ["href", "data-scroll-offset", "data-href", "title"];
+  function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass([`${_ctx.prefixCls}`, { [`${_ctx.prefixCls}-active`]: !!_ctx.anchorLinkClasses }])
     }, [
@@ -10386,11 +10387,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$Y),
+      }, vue.toDisplayString(_ctx.title), 11, _hoisted_1$X),
       vue.renderSlot(_ctx.$slots, "default")
     ], 2);
   }
-  var AnchorLink = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$24], ["__file", "AnchorLink.vue"]]);
+  var AnchorLink = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["render", _sfc_render$23], ["__file", "AnchorLink.vue"]]);
   const UAnchor = withInstall(Anchor, { Link: AnchorLink });
@@ -10424,7 +10425,7 @@
   };
   const sizeList = ["small", "large", "default"];
-  const _sfc_main$25 = vue.defineComponent({
+  const _sfc_main$24 = vue.defineComponent({
     name: "UAvatar",
     components: {
       UIcon
@@ -10496,8 +10497,8 @@
       };
     }
   });
-  const _hoisted_1$X = ["src"];
-  function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$W = ["src"];
+  function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UIcon = vue.resolveComponent("UIcon");
     return vue.openBlock(), vue.createElementBlock("span", {
       ref: "avatar",
@@ -10516,7 +10517,7 @@
         key: 0,
         src: _ctx.src,
         onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-      }, null, 40, _hoisted_1$X)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_UIcon, { key: 1 }, {
+      }, null, 40, _hoisted_1$W)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_UIcon, { key: 1 }, {
         default: vue.withCtx(() => [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
         ]),
@@ -10531,7 +10532,7 @@
       ], 6))
     ], 6);
   }
-  var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["render", _sfc_render$23], ["__file", "Avatar.vue"]]);
+  var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["render", _sfc_render$22], ["__file", "Avatar.vue"]]);
   const popoverTrigger = ["hover", "focus", "click", "contextmenu"];
   const popoverType = ["popover", "popConfirm"];
@@ -10599,7 +10600,7 @@
     "update:visible": (v) => typeof v === "boolean"
   };
-  const _sfc_main$24 = vue.defineComponent({
+  const _sfc_main$23 = vue.defineComponent({
     name: "UPopover",
     components: {
       Popup
@@ -10682,7 +10683,7 @@
       };
     }
   });
-  function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$21(_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,
@@ -10739,7 +10740,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$24, [["render", _sfc_render$22], ["__file", "Popover.vue"]]);
+  var Popover = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$21], ["__file", "Popover.vue"]]);
   var AvatarGroup = vue.defineComponent({
     name: "UAvatarGroup",
@@ -10815,7 +10816,7 @@
     }
   };
-  const _sfc_main$23 = vue.defineComponent({
+  const _sfc_main$22 = vue.defineComponent({
     name: "UBackTop",
     components: {
       UIcon,
@@ -10882,7 +10883,7 @@
       };
     }
   });
-  function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ULineUp = vue.resolveComponent("ULineUp");
     const _component_UIcon = vue.resolveComponent("UIcon");
     return vue.openBlock(), vue.createElementBlock("div", {
@@ -10904,7 +10905,7 @@
       ])
     ], 6);
   }
-  var BackTop = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$21], ["__file", "BackTop.vue"]]);
+  var BackTop = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["render", _sfc_render$20], ["__file", "BackTop.vue"]]);
   const UBackTop = withInstall(BackTop);
@@ -10953,7 +10954,7 @@
   };
   const initColorList = colorType.toString().split(",");
-  const _sfc_main$22 = vue.defineComponent({
+  const _sfc_main$21 = vue.defineComponent({
     name: "UBadge",
     props: badgeProps,
     setup(props) {
@@ -11045,10 +11046,10 @@
       };
     }
   });
-  const _hoisted_1$W = ["data-color"];
-  const _hoisted_2$p = { class: "uui-badge-status-text" };
-  const _hoisted_3$7 = ["data-color"];
-  function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$V = ["data-color"];
+  const _hoisted_2$o = { class: "uui-badge-status-text" };
+  const _hoisted_3$6 = ["data-color"];
+  function _sfc_render$1$(_ctx, _cache, $props, $setup, $data, $options) {
     return _ctx.dot ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 0,
       class: vue.normalizeClass(_ctx.prefixCls)
@@ -11074,8 +11075,8 @@
         ]),
         "data-color": _ctx.computedColor,
         style: vue.normalizeStyle(_ctx.statusStyles)
-      }, null, 14, _hoisted_1$W),
-      vue.createElementVNode("span", _hoisted_2$p, [
+      }, null, 14, _hoisted_1$V),
+      vue.createElementVNode("span", _hoisted_2$o, [
         vue.renderSlot(_ctx.$slots, "text", {}, () => [
           vue.createTextVNode(vue.toDisplayString(_ctx.text), 1)
         ])
@@ -11113,12 +11114,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$22, [["render", _sfc_render$20], ["__file", "Badge.vue"]]);
+  var Badge = /* @__PURE__ */ _export_sfc(_sfc_main$21, [["render", _sfc_render$1$], ["__file", "Badge.vue"]]);
   const UBadge = withInstall(Badge);
@@ -11318,7 +11319,7 @@
   };
   let guid$1 = -1;
-  const _sfc_main$21 = vue.defineComponent({
+  const _sfc_main$20 = vue.defineComponent({
     name: "USubMenu",
     components: {
       Popup,
@@ -11451,11 +11452,11 @@
       };
     }
   });
-  const _hoisted_1$V = ["aria-expanded", "aria-owns"];
-  const _hoisted_2$o = ["id"];
-  const _hoisted_3$6 = ["data-color", "aria-owns"];
+  const _hoisted_1$U = ["aria-expanded", "aria-owns"];
+  const _hoisted_2$n = ["id"];
+  const _hoisted_3$5 = ["data-color", "aria-owns"];
   const _hoisted_4$2 = ["id"];
-  function _sfc_render$1$(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1_(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ULineDown = vue.resolveComponent("ULineDown");
     const _component_UIcon = vue.resolveComponent("UIcon");
     const _component_CollapseTransition = vue.resolveComponent("CollapseTransition");
@@ -11493,7 +11494,7 @@
             ]),
             _: 1
           }, 8, ["class"])
-        ], 14, _hoisted_1$V),
+        ], 14, _hoisted_1$U),
         vue.createCommentVNode(' <transition name="slide-up"> '),
         vue.createVNode(_component_CollapseTransition, { appear: "" }, {
           default: vue.withCtx(() => [
@@ -11503,7 +11504,7 @@
               style: vue.normalizeStyle(_ctx.subMenuStyle)
             }, [
               vue.renderSlot(_ctx.$slots, "default")
-            ], 14, _hoisted_2$o), [
+            ], 14, _hoisted_2$n), [
               [vue.vShow, _ctx.isOpen]
             ])
           ]),
@@ -11555,13 +11556,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$21, [["render", _sfc_render$1$], ["__file", "SubMenu.vue"]]);
+  var SubMenu = /* @__PURE__ */ _export_sfc(_sfc_main$20, [["render", _sfc_render$1_], ["__file", "SubMenu.vue"]]);
   const FLOAT_PRECISION_ADJUST = 0.5;
   const getWidth$1 = (elem) => {
@@ -11951,7 +11952,7 @@
     "update:visible": (v) => typeof v === "boolean"
   };
-  const _sfc_main$20 = vue.defineComponent({
+  const _sfc_main$1$ = vue.defineComponent({
     name: "UTooltip",
     components: {
       Popup
@@ -12024,9 +12025,9 @@
       };
     }
   });
-  const _hoisted_1$U = ["data-color"];
-  const _hoisted_2$n = ["data-color"];
-  function _sfc_render$1_(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$T = ["data-color"];
+  const _hoisted_2$m = ["data-color"];
+  function _sfc_render$1Z(_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,
@@ -12048,7 +12049,7 @@
           class: vue.normalizeClass(`${_ctx.prefixCls}-arrow`),
           "data-color": _ctx.color,
           style: vue.normalizeStyle(_ctx.arrowStyle)
-        }, null, 14, _hoisted_1$U),
+        }, null, 14, _hoisted_1$T),
         vue.createElementVNode("div", {
           ref: "innerRef",
           class: vue.normalizeClass(`${_ctx.prefixCls}-inner`),
@@ -12058,7 +12059,7 @@
           vue.renderSlot(_ctx.$slots, "title", {}, () => [
             vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
           ])
-        ], 10, _hoisted_2$n)
+        ], 10, _hoisted_2$m)
       ]),
       default: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "default")
@@ -12066,12 +12067,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$20, [["render", _sfc_render$1_], ["__file", "Tooltip.vue"]]);
+  var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["render", _sfc_render$1Z], ["__file", "Tooltip.vue"]]);
   const UTooltip = withInstall(Tooltip);
   let guid = -1;
-  const _sfc_main$1$ = vue.defineComponent({
+  const _sfc_main$1_ = vue.defineComponent({
     name: "UMenuItem",
     components: {
       UTooltip
@@ -12159,8 +12160,8 @@
       };
     }
   });
-  const _hoisted_1$T = ["data-color"];
-  function _sfc_render$1Z(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$S = ["data-color"];
+  function _sfc_render$1Y(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UTooltip = vue.resolveComponent("UTooltip");
     return vue.openBlock(), vue.createBlock(_component_UTooltip, {
       title: _ctx.title,
@@ -12186,14 +12187,14 @@
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
             vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
           ])
-        ], 16, _hoisted_1$T)
+        ], 16, _hoisted_1$S)
       ]),
       _: 3
     }, 8, ["title", "disabled", "class"]);
   }
-  var MenuItem$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["render", _sfc_render$1Z], ["__file", "MenuItem.vue"]]);
+  var MenuItem$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["render", _sfc_render$1Y], ["__file", "MenuItem.vue"]]);
-  const _sfc_main$1_ = vue.defineComponent({
+  const _sfc_main$1Z = vue.defineComponent({
     name: "UMenuItemGroup",
     props: menuItemGroupProps,
     setup() {
@@ -12203,7 +12204,7 @@
       };
     }
   });
-  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-group`)
     }, [
@@ -12221,9 +12222,9 @@
       ], 2)
     ], 2);
   }
-  var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["render", _sfc_render$1Y], ["__file", "MenuItemGroup.vue"]]);
+  var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1Z, [["render", _sfc_render$1X], ["__file", "MenuItemGroup.vue"]]);
-  const _sfc_main$1Z = vue.defineComponent({
+  const _sfc_main$1Y = vue.defineComponent({
     name: "UMenuDivider",
     setup() {
       const { rootPrefixCls } = vue.inject("menuStore", {});
@@ -12232,12 +12233,12 @@
       };
     }
   });
-  function _sfc_render$1X(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1W(_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$1Z, [["render", _sfc_render$1X], ["__file", "MenuDivider.vue"]]);
+  var MenuDivider = /* @__PURE__ */ _export_sfc(_sfc_main$1Y, [["render", _sfc_render$1W], ["__file", "MenuDivider.vue"]]);
   const UMenu = withInstall(Menu, {
     Item: MenuItem$2,
@@ -12318,7 +12319,7 @@
     "update:visible": (v) => typeof v === "boolean"
   };
-  const _sfc_main$1Y = vue.defineComponent({
+  const _sfc_main$1X = vue.defineComponent({
     name: "UDropdown",
     components: {
       Popup
@@ -12367,7 +12368,7 @@
       };
     }
   });
-  function _sfc_render$1W(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1V(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Popup = vue.resolveComponent("Popup");
     return vue.openBlock(), vue.createBlock(_component_Popup, {
       placement: _ctx.placement,
@@ -12401,9 +12402,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$1Y, [["render", _sfc_render$1W], ["__file", "Dropdown.vue"]]);
+  var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["render", _sfc_render$1V], ["__file", "Dropdown.vue"]]);
-  function _isSlot$5(s) {
+  function _isSlot$6(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var DropdownMenu = vue.defineComponent({
@@ -12467,7 +12468,7 @@
           let _slot;
           return vue.createVNode(UMenu.ItemGroup, {
             "title": m.title
-          }, _isSlot$5(_slot = m.children.map(renderItem)) ? _slot : {
+          }, _isSlot$6(_slot = m.children.map(renderItem)) ? _slot : {
             default: () => [_slot]
           });
         }
@@ -12514,7 +12515,7 @@
           [`${prefixCls}-menu-with-icon`]: this.icon
         },
         "style": this.style
-      }, _isSlot$5(menus) ? menus : {
+      }, _isSlot$6(menus) ? menus : {
         default: () => [menus]
       });
     }
@@ -12603,7 +12604,7 @@
     }
   };
-  const _sfc_main$1X = vue.defineComponent({
+  const _sfc_main$1W = vue.defineComponent({
     name: "UButton",
     components: {
       UIcon
@@ -12645,18 +12646,18 @@
       };
     }
   });
-  const _hoisted_1$S = ["data-color", "type", "disabled"];
-  const _hoisted_2$m = {
+  const _hoisted_1$R = ["data-color", "type", "disabled"];
+  const _hoisted_2$l = {
     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$1V(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1U(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UIcon = vue.resolveComponent("UIcon");
     return vue.openBlock(), vue.createElementBlock("button", {
       ref: "buttonRef",
@@ -12686,8 +12687,8 @@
         spin: ""
       }, {
         default: vue.withCtx(() => [
-          (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$m, [
-            vue.createElementVNode("g", _hoisted_3$5, [
+          (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$l, [
+            vue.createElementVNode("g", _hoisted_3$4, [
               vue.createElementVNode("path", {
                 "fill-rule": "evenodd",
                 "clip-rule": "evenodd",
@@ -12731,11 +12732,11 @@
       _ctx.showSlot ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
         vue.renderSlot(_ctx.$slots, "default")
       ])) : vue.createCommentVNode("v-if", true)
-    ], 10, _hoisted_1$S);
+    ], 10, _hoisted_1$R);
   }
-  var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["render", _sfc_render$1V], ["__file", "Button.vue"]]);
+  var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["render", _sfc_render$1U], ["__file", "Button.vue"]]);
-  const _sfc_main$1W = vue.defineComponent({
+  const _sfc_main$1V = vue.defineComponent({
     name: "UButtonGroup",
     props: buttonGroupProps,
     setup() {
@@ -12745,7 +12746,7 @@
       };
     }
   });
-  function _sfc_render$1U(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1T(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass([
         `${_ctx.prefixCls}`,
@@ -12759,7 +12760,7 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 2);
   }
-  var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["render", _sfc_render$1U], ["__file", "ButtonGroup.vue"]]);
+  var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["render", _sfc_render$1T], ["__file", "ButtonGroup.vue"]]);
   const UButton = withInstall(Button, {
     Group: ButtonGroup
@@ -12926,7 +12927,7 @@
     }
   });
-  function _isSlot$4(s) {
+  function _isSlot$5(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   const UMenuItem = UMenu.Item;
@@ -12996,11 +12997,11 @@
         if (routeChildren && !!routeChildren.length) {
           return () => {
             let _slot2;
-            return vue.createVNode(UMenu, null, _isSlot$4(_slot2 = routeChildren.map((routeChild, index) => {
+            return vue.createVNode(UMenu, null, _isSlot$5(_slot2 = routeChildren.map((routeChild, index) => {
               let _slot;
               return vue.createVNode(UMenuItem, {
                 "key": index
-              }, _isSlot$4(_slot = renderRouteItem(routeChild)) ? _slot : {
+              }, _isSlot$5(_slot = renderRouteItem(routeChild)) ? _slot : {
                 default: () => [_slot]
               });
             })) ? _slot2 : {
@@ -13417,7 +13418,7 @@
     change: (v) => Array.isArray(v) && v.every((x) => x === void 0 || typeof x === "number" || typeof x === "string")
   };
-  const _sfc_main$1V = vue.defineComponent({
+  const _sfc_main$1U = vue.defineComponent({
     name: "UCheckbox",
     components: {
       UIcon,
@@ -13528,9 +13529,9 @@
       };
     }
   });
-  const _hoisted_1$R = ["data-color"];
-  const _hoisted_2$l = ["disabled", "checked", "name"];
-  function _sfc_render$1T(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$Q = ["data-color"];
+  const _hoisted_2$k = ["disabled", "checked", "name"];
+  function _sfc_render$1S(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_USolidCheck = vue.resolveComponent("USolidCheck");
     const _component_USolidRemove = vue.resolveComponent("USolidRemove");
     const _component_UIcon = vue.resolveComponent("UIcon");
@@ -13579,7 +13580,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_2$l)
+        }, null, 42, _hoisted_2$k)
       ], 2),
       _ctx.showSlot ? (vue.openBlock(), vue.createElementBlock("span", {
         key: 0,
@@ -13589,11 +13590,11 @@
           vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
         ])
       ], 2)) : vue.createCommentVNode("v-if", true)
-    ], 10, _hoisted_1$R);
+    ], 10, _hoisted_1$Q);
   }
-  var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["render", _sfc_render$1T], ["__file", "Checkbox.vue"]]);
+  var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["render", _sfc_render$1S], ["__file", "Checkbox.vue"]]);
-  const _sfc_main$1U = vue.defineComponent({
+  const _sfc_main$1T = vue.defineComponent({
     name: "UCheckboxGroup",
     components: {
       UIcon,
@@ -13662,9 +13663,9 @@
       };
     }
   });
-  const _hoisted_1$Q = ["data-color"];
-  const _hoisted_2$k = { key: 0 };
-  function _sfc_render$1S(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$P = ["data-color"];
+  const _hoisted_2$j = { key: 0 };
+  function _sfc_render$1R(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ULineLoading = vue.resolveComponent("ULineLoading");
     const _component_UIcon = vue.resolveComponent("UIcon");
     const _component_UCheckbox = vue.resolveComponent("UCheckbox");
@@ -13676,7 +13677,7 @@
         "data-color": _ctx.color
       }, [
         _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_2$k, [
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$j, [
             vue.createVNode(_component_UIcon, { spin: "" }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_ULineLoading)
@@ -13685,10 +13686,7 @@
             }),
             vue.createTextVNode(" " + vue.toDisplayString(_ctx.loadingText || _ctx.computedLocale.loadingText), 1)
           ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.options, (item, index) => {
-            return vue.openBlock(), vue.createBlock(_component_UCheckbox, vue.mergeProps({
-              key: index,
-              ref_for: true
-            }, item), {
+            return vue.openBlock(), vue.createBlock(_component_UCheckbox, vue.mergeProps({ key: index }, { ref_for: true }, item), {
               default: vue.withCtx(() => [
                 vue.createTextVNode(vue.toDisplayString(item.label || item.value), 1)
               ]),
@@ -13696,16 +13694,16 @@
             }, 1040);
           }), 128))
         ], 64))
-      ], 10, _hoisted_1$Q)
+      ], 10, _hoisted_1$P)
     ], 2);
   }
-  var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["render", _sfc_render$1S], ["__file", "CheckboxGroup.vue"]]);
+  var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["render", _sfc_render$1R], ["__file", "CheckboxGroup.vue"]]);
   const UCheckbox = withInstall(Checkbox, {
     Group: CheckboxGroup
   });
-  const _sfc_main$1T = vue.defineComponent({
+  const _sfc_main$1S = vue.defineComponent({
     name: "SelectInput",
     props: {
       inputRef: {
@@ -13788,8 +13786,8 @@
       };
     }
   });
-  const _hoisted_1$P = ["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) {
+  const _hoisted_1$O = ["id", "aria-expanded", "aria-own", "aria-controls", "aria-activedescendant", "disabled", "tabindex", "autocomplete", "autofocus", "value", "readonly", "unselectable"];
+  function _sfc_render$1Q(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("input", {
       id: _ctx.id,
       ref: _ctx.inputRef,
@@ -13817,11 +13815,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$P);
+    }, null, 46, _hoisted_1$O);
   }
-  var SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["render", _sfc_render$1R], ["__file", "Input.vue"]]);
+  var SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["render", _sfc_render$1Q], ["__file", "Input.vue"]]);
-  const _sfc_main$1S = vue.defineComponent({
+  const _sfc_main$1R = vue.defineComponent({
     name: "SingleSeletor",
     components: {
       Render,
@@ -13917,8 +13915,8 @@
       };
     }
   });
-  const _hoisted_1$O = ["title"];
-  function _sfc_render$1Q(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$N = ["title"];
+  function _sfc_render$1P(_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, [
@@ -13948,7 +13946,7 @@
         vue.createVNode(_component_Render, {
           render: _ctx.getRender(_ctx.selectedItem.displayLabel)
         }, null, 8, ["render"])
-      ], 10, _hoisted_1$O)) : vue.createCommentVNode("v-if", true),
+      ], 10, _hoisted_1$N)) : vue.createCommentVNode("v-if", true),
       vue.withDirectives(vue.createElementVNode("div", {
         class: vue.normalizeClass(`${_ctx.prefixCls}-selection-placeholder`)
       }, [
@@ -13958,361 +13956,518 @@
       ])
     ], 64);
   }
-  var SingleSelection = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["render", _sfc_render$1Q], ["__file", "Single.vue"]]);
+  var SingleSelection = /* @__PURE__ */ _export_sfc(_sfc_main$1R, [["render", _sfc_render$1P], ["__file", "Single.vue"]]);
   const UPopover = withInstall(Popover);
   const REST_TAG_KEY = "__UUI_SELECT_MAX_REST_COUNT__";
+  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;
+      }
+      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 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
+    };
+  }
+  function _isSlot$4(s) {
+    return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+  }
   const defaultMaxTagPlaceholder = (ommittedValus) => `+ ${ommittedValus.length}...`;
-  var _sfc_main$1R = vue.defineComponent({
-    name: "MutipleSelector",
-    components: {
-      SelectInput,
-      Render,
-      UPopover,
-      UIcon,
-      URoundClose: uxdIcon.URoundClose
+  const multipleBaseProps = {
+    prefixCls: {
+      type: String
     },
-    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: () => ({})
-      }
+    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
     },
-    emits: ["select", "input-mousedown", "input-change", "input-keydown", "input-compositionstart", "input-compositionend", "input-paste"],
+    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,
+    displayRest
+  }) {
+    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 && (props.maxTagTextLength !== "responsive" || displayRest) || 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, {
+          "class": `${prefixCls}-selection-item-remove`,
+          "onClick": (e) => onClose(tipItem.value, e)
+        }, {
+          default: () => [vue.createVNode(uxdIcon.URoundClose, 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, {
+        "class": `${prefixCls}-selection-item-remove`,
+        "onClick": (e) => onClose(item.value, e)
+      }, {
+        default: () => [removeIcon ? vue.createVNode(vue.resolveComponent("component"), {
+          "is": removeIcon
+        }, null) : vue.createVNode(uxdIcon.URoundClose, 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
+      emit,
+      slots
     }) {
-      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 baseState = useMultipleBase(props, emit);
+      return () => {
+        let _slot;
         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)
+          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 _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 {
-        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);
-        }
+          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$4(_slot = renderSearchInput(props, {
+          prefixCls: props.prefixCls,
+          inputRef: props.inputRef,
+          disabled: props.disabled,
+          inputEditable: baseState.inputEditable.value,
+          inputValue: inputValue.value,
+          inputWidth: inputWidth.value,
+          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: inputWidth.value,
+          measureRef,
+          onInputMouseDown,
+          onInputChange,
+          onInputKeydown,
+          onInputCompositionStart,
+          onInputCompositionEnd,
+          onInputPaste
+        }), renderPlaceholder(showPlaceholder.value, props.prefixCls, slots)]);
       };
     }
   });
-  const _hoisted_1$N = ["title"];
-  const _hoisted_2$j = ["title"];
-  const _hoisted_3$4 = ["title"];
-  function _sfc_render$1P(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_Render = vue.resolveComponent("Render");
-    const _component_URoundClose = vue.resolveComponent("URoundClose");
-    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",
-              "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$j),
-                      _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_URoundClose)
-                        ]),
-                        _: 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$N)
-              ]),
-              _: 2
-            }, 1040, ["disabled"])) : (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_URoundClose, { 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);
-  }
-  var Multiple = /* @__PURE__ */ _export_sfc(_sfc_main$1R, [["render", _sfc_render$1P], ["__file", "Multiple.vue"]]);
+  const RESPONSIVE = "responsive";
   const _sfc_main$1Q = vue.defineComponent({
     name: "Selection",
     components: {
       SingleSelection,
-      Multiple
+      ResizeObserver: ResizeObserver$1,
+      MultipleBase
     },
     props: {
       prefixCls: {
@@ -14361,7 +14516,7 @@
         type: Function
       },
       maxTagTextLength: {
-        type: Number
+        type: [Number, String]
       },
       maxTagTooltip: {
         type: Boolean,
@@ -14397,10 +14552,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;
@@ -14467,74 +14629,87 @@
         onInputKeydown,
         onInputCompositionStart,
         onInputCompositionEnd,
-        onInputPaste
+        onInputPaste,
+        onOverflowResize,
+        containerWrapperWidth,
+        isResponsive
       };
     }
   });
   function _sfc_render$1O(_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$1Q, [["render", _sfc_render$1O], ["__file", "Selection.vue"]]);
@@ -15242,6 +15417,9 @@
               }, null, 8, ["text"])
             ])
           ]),
+          top: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "top")
+          ]),
           _: 3
         }, 8, ["id", "prefix-cls", "open", "width", "multiple", "multiple-limit", "options", "values", "search-value", "default-active-first", "height", "item-height", "size", "select-all", "color", "direction", "title-key", "onSelect", "onScrollAtTop", "onScrollAtBottom", "onCreateSubmit"])
       ]),
@@ -32834,7 +33012,7 @@
           key: index,
           ref_for: true,
           ref: _ctx.saveRef(`header-column-${cell._index}`)
-        }, _ctx.getCellProps(cell), {
+        }, { ref_for: true }, _ctx.getCellProps(cell), {
           style: _ctx.getCellStyle(cell),
           class: {
             [String(cell.className)]: !!cell.className,
@@ -33709,9 +33887,8 @@
         return vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
           key: column.key,
           class: { [`${column.className}`]: !!column.className },
-          style: _ctx.getCellStyle(column),
-          ref_for: true
-        }, _ctx.tdProps(column)), [
+          style: _ctx.getCellStyle(column)
+        }, { ref_for: true }, _ctx.tdProps(column)), [
           !!column.summaryRender ? (vue.openBlock(), vue.createBlock(_component_Render, {
             key: 0,
             render: () => {