@opentinyvue/vue-base-select 3.27.0 → 3.28.0

package/lib/pc.js

@@ -6,15 +6,14 @@ import Option from '@opentinyvue/vue-option';
 import Scrollbar from '@opentinyvue/vue-scrollbar';
 import SelectDropdown from '@opentinyvue/vue-select-dropdown';
 import Button from '@opentinyvue/vue-button';
-import { Clickoutside } from '@opentinyvue/vue-directive';
-import { IconClose, IconCopy, iconAddCircle, iconLoadingShadow, IconHalfselect, IconCheck, IconCheckedSur, IconSearch, IconDeltaDown, IconEllipsis, IconChevronUp } from '@opentinyvue/vue-icon';
+import { Clickoutside, AutoTip } from '@opentinyvue/vue-directive';
+import { iconClose, iconCopy, iconAddCircle, iconLoadingShadow, iconHalfselect, iconCheck, iconCheckedSur, iconSearch, iconDownWard, iconEllipsis, iconChevronUp } from '@opentinyvue/vue-icon';
 import Tooltip from '@opentinyvue/vue-tooltip';
 import FilterBox from '@opentinyvue/vue-filter-box';
 import RecycleScroller from '@opentinyvue/vue-recycle-scroller';
-import Checkbox from '@opentinyvue/vue-checkbox';
 import '@opentinyvue/vue-theme/select/index.css';
 import '@opentinyvue/vue-theme/base-select/index.css';
-import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, withModifiers, createElementVNode, normalizeStyle, normalizeClass, renderSlot, createBlock, createCommentVNode, withCtx, createVNode, createTextVNode, toDisplayString, Fragment, renderList, createSlots, withKeys, vShow, vModelText, resolveDynamicComponent, Transition } from 'vue';
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, withModifiers, normalizeStyle, normalizeClass, renderSlot, createBlock, createCommentVNode, withCtx, createVNode, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createSlots, withKeys, vShow, vModelText, resolveDynamicComponent, Transition } from 'vue';
 
 function _createForOfIteratorHelperLoose(r, e) {
   var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
@@ -65,6 +64,7 @@ var _sfc_main = defineComponent({
   emits: ["update:modelValue", "change", "focus", "blur", "clear", "remove-tag", "visible-change", "handleDropdownClick", "dropdown-click", "top-create-click"],
   directives: directive({
     Clickoutside,
+    AutoTip,
     popover: {
       bind: function bind(el, binding, vnode) {
         getReference(el, binding, vnode);
@@ -79,25 +79,24 @@ var _sfc_main = defineComponent({
     TinyInput: Input,
     TinyOption: Option,
     TinyButton: Button,
-    IconClose: IconClose(),
+    IconClose: iconClose(),
     TinyScrollbar: Scrollbar,
-    IconCopy: IconCopy(),
+    IconCopy: iconCopy(),
     IconAddCircle: iconAddCircle(),
     IconLoadingShadow: iconLoadingShadow(),
     TinySelectDropdown: SelectDropdown,
-    IconHalfselect: IconHalfselect(),
-    IconCheck: IconCheck(),
-    IconCheckedSur: IconCheckedSur(),
+    IconHalfselect: iconHalfselect(),
+    IconCheck: iconCheck(),
+    IconCheckedSur: iconCheckedSur(),
     TinyFilterBox: FilterBox,
     TinyTooltip: Tooltip,
     TinyRecycleScroller: RecycleScroller,
     // tiny 新增，
-    IconSearch: IconSearch(),
-    IconDeltaDown: IconDeltaDown(),
+    IconSearch: iconSearch(),
+    IconDownWard: iconDownWard(),
     // 默认下拉图标
-    TinyCheckbox: Checkbox,
-    IconEllipsis: IconEllipsis(),
-    IconChevronUp: IconChevronUp()
+    IconEllipsis: iconEllipsis(),
+    IconChevronUp: iconChevronUp()
   },
   props: [].concat(props, [
     "id",
@@ -170,7 +169,11 @@ var _sfc_main = defineComponent({
     "topCreate",
     "topCreateText",
     "keepFocus",
+    "initLabel",
     "blank",
+    "tooltipConfig",
+    "showEmptyValue",
+    "stopPropagation",
     // 以下为 tiny 新增
     "searchable",
     "showEmptyImage",
@@ -182,7 +185,8 @@ var _sfc_main = defineComponent({
     "clickExpand",
     "maxVisibleRows",
     "showAllTextTag",
-    "allText"
+    "allText",
+    "maxTagWidth"
   ]),
   setup: function setup$1(props2, context) {
     return setup({
@@ -226,80 +230,65 @@ var _hoisted_9 = {
 var _hoisted_10 = {
   key: 1
 };
-var _hoisted_11 = {
-  key: 1,
-  class: "tiny-base-select__tags-text is-disabled"
-};
+var _hoisted_11 = ["disabled", "autocomplete"];
 var _hoisted_12 = {
-  key: 0
-};
-var _hoisted_13 = {
-  key: 1
-};
-var _hoisted_14 = ["disabled", "autocomplete"];
-var _hoisted_15 = {
   key: 0,
   class: "tiny-base-select__limit-txt"
 };
-var _hoisted_16 = {
+var _hoisted_13 = {
   key: 1,
   class: "tiny-base-select__proportion-txt"
 };
-var _hoisted_17 = {
+var _hoisted_14 = {
   key: 1,
   class: "tiny-select__top-create"
 };
-var _hoisted_18 = {
+var _hoisted_15 = {
   class: "tiny-icon-close"
 };
+var _hoisted_16 = {
+  class: "tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox"
+};
+var _hoisted_17 = {
+  class: "tiny-option-wrapper calc-width"
+};
+var _hoisted_18 = {
+  class: "tiny-option-label"
+};
 var _hoisted_19 = {
-  key: 0,
-  class: "tiny-select-dropdown__empty-wrap"
+  class: "tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox"
 };
 var _hoisted_20 = {
-  key: 1,
-  class: "tiny-select-dropdown__empty-images"
+  class: "tiny-option-wrapper calc-width"
 };
 var _hoisted_21 = {
-  key: 2,
-  class: "tiny-select-dropdown__empty"
+  class: "tiny-option-label"
 };
 var _hoisted_22 = {
-  key: 1,
-  class: "tiny-select-dropdown__loading"
+  key: 0,
+  class: "tiny-select-dropdown__empty-wrap"
 };
 var _hoisted_23 = {
-  key: 0,
+  key: 1,
   class: "tiny-select-dropdown__empty-images"
 };
 var _hoisted_24 = {
-  key: 1,
+  key: 2,
   class: "tiny-select-dropdown__empty"
 };
 var _hoisted_25 = {
+  key: 0,
+  class: "tiny-select-dropdown__empty-images"
+};
+var _hoisted_26 = {
   key: 1,
-  class: "circular",
-  viewBox: "25 25 50 50"
+  class: "tiny-select-dropdown__empty"
 };
-var _hoisted_26 = /* @__PURE__ */ createElementVNode(
-  "circle",
-  {
-    class: "path",
-    cx: "50",
-    cy: "50",
-    r: "24",
-    fill: "none"
-  },
-  null,
-  -1
-  /* HOISTED */
-);
-var _hoisted_27 = [_hoisted_26];
-var _hoisted_28 = {
+var _hoisted_27 = {
   key: 0,
   class: "tiny-base-select__placeholder"
 };
-var _hoisted_29 = /* @__PURE__ */ createElementVNode(
+var _hoisted_28 = /* @__PURE__ */ createElementVNode(
   "input",
   {
     class: "tiny-input__inner",
@@ -309,7 +298,7 @@ var _hoisted_29 = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-var _hoisted_30 = [_hoisted_29];
+var _hoisted_29 = [_hoisted_28];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_tiny_filter_box = resolveComponent("tiny-filter-box");
   var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
@@ -324,26 +313,26 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_tiny_recycle_scroller = resolveComponent("tiny-recycle-scroller");
   var _component_tiny_scrollbar = resolveComponent("tiny-scrollbar");
   var _component_tiny_select_dropdown = resolveComponent("tiny-select-dropdown");
+  var _directive_auto_tip = resolveDirective("auto-tip");
   var _directive_popover = resolveDirective("popover");
   var _directive_clickoutside = resolveDirective("clickoutside");
   return withDirectives((openBlock(), createElementBlock(
     "div",
     mergeProps({
       ref: "select",
-      class: ["tiny-base-select", [_ctx.state.selectSize ? "tiny-base-select--" + _ctx.state.selectSize : "", _ctx.state.collapseTags ? "tiny-base-select__collapse-tags" : "", _ctx.filterable ? "tiny-base-select__filterable" : "", _ctx.multiple ? "tiny-base-select__multiple" : "", (_ctx.state.inputHovering || _ctx.state.visible) && !_ctx.clickExpand ? "is-hover" : "", _ctx.state.isDisplayOnly ? "is-display-only" : "", _ctx.hoverExpand ? "is-hover-expand" : "", _ctx.clickExpand ? "is-click-expand" : "", _ctx.state.showCollapseTag ? "collapse-tag-clicked" : "", _ctx.state.selectDisabled ? "is-disabled" : "", _ctx.$parent.$attrs.class]],
+      class: ["tiny-base-select", [_ctx.state.selectSize ? "tiny-base-select--" + _ctx.state.selectSize : "", _ctx.state.collapseTags ? "tiny-base-select__collapse-tags" : "", _ctx.filterable ? "tiny-base-select__filterable" : "", _ctx.multiple ? "tiny-base-select__multiple" : "", (_ctx.state.inputHovering || _ctx.state.visible) && !_ctx.clickExpand ? "is-hover" : "", _ctx.state.isDisplayOnly ? "is-display-only" : "", _ctx.hoverExpand ? "is-hover-expand" : "", _ctx.clickExpand ? "is-click-expand" : "", _ctx.state.showCollapseTag ? "collapse-tag-clicked" : "", _ctx.state.isDisabled ? "is-disabled" : "", _ctx.$parent.$attrs.class]],
       onMouseleave: _cache[40] || (_cache[40] = withModifiers(function() {
         _ctx.state.selectHover = false;
         _ctx.state.inputHovering = false;
       }, ["self"])),
       onMouseenter: _cache[41] || (_cache[41] = withModifiers(function() {
-        _ctx.state.selectHover = true;
-        _ctx.state.inputHovering = true;
+        return _ctx.onMouseenterSelf && _ctx.onMouseenterSelf.apply(_ctx, arguments);
       }, ["self"])),
       onClick: _cache[42] || (_cache[42] = function() {
         return _ctx.toggleMenu && _ctx.toggleMenu.apply(_ctx, arguments);
       })
     }, _ctx.a(_ctx.$attrs, ["class", "style"], true)),
-    [createElementVNode(
+    [withDirectives((openBlock(), createElementBlock(
       "div",
       {
         ref: "tagsGroup",
@@ -381,20 +370,26 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             style: normalizeStyle(_ctx.state.tagsStyle)
           },
           [!_ctx.state.isShowTagText ? (openBlock(), createElementBlock("span", _hoisted_1, [_ctx.collapseTags && _ctx.state.selected.length ? (openBlock(), createElementBlock("span", _hoisted_2, [(openBlock(), createBlock(_component_tiny_tag, {
-            closable: !_ctx.state.selectDisabled,
+            class: normalizeClass({
+              "is-required": _ctx.state.selected[0].required
+            }),
+            closable: _ctx.isTagClosable(_ctx.state.selected[0]),
             size: _ctx.state.collapseTagSize,
             hit: _ctx.state.selected[0].state ? _ctx.state.selected[0].state.hitState : _ctx.state.selected[0].hitState,
             key: _ctx.state.key,
+            disabled: _ctx.state.selected[0].disabled || _ctx.state.isDisabled,
             type: _ctx.state.getTagType,
             onClose: _cache[1] || (_cache[1] = function($event) {
               return _ctx.deleteTag($event, _ctx.state.selected[0]);
             }),
-            "disable-transitions": ""
+            "disable-transitions": "",
+            maxWidth: _ctx.maxTagWidth
           }, {
             default: withCtx(function() {
               return [createVNode(_component_tiny_tooltip, {
-                effect: "light",
-                placement: "top",
+                effect: _ctx.tooltipConfig.effect || "light",
+                placement: _ctx.tooltipConfig.placement || "top",
+                "popper-class": _ctx.tooltipConfig.popperClass || "",
                 onMouseenter: _cache[0] || (_cache[0] = function($event) {
                   return _ctx.handleEnterTag($event, _ctx.getValueKey(_ctx.state.selected[0]));
                 })
@@ -423,17 +418,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 }),
                 _: 3
                 /* FORWARDED */
-              })];
+              }, 8, ["effect", "placement", "popper-class"])];
             }),
             _: 3
             /* FORWARDED */
-          }, 8, ["closable", "size", "hit", "type"])), _ctx.state.selected.length > 1 ? (openBlock(), createBlock(_component_tiny_tag, {
+          }, 8, ["class", "closable", "size", "hit", "disabled", "type", "maxWidth"])), _ctx.state.selected.length > 1 ? (openBlock(), createBlock(_component_tiny_tag, {
             key: 0,
             closable: false,
             size: _ctx.state.collapseTagSize,
             type: _ctx.state.getTagType,
+            disabled: _ctx.state.isDisabled,
             "disable-transitions": "",
-            class: "tiny-base-select__tags-number"
+            class: "tiny-base-select__tags-number",
+            maxWidth: _ctx.maxTagWidth
           }, {
             default: withCtx(function() {
               return [createElementVNode(
@@ -446,7 +443,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             _: 1
             /* STABLE */
-          }, 8, ["size", "type"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !_ctx.collapseTags ? (openBlock(), createElementBlock(
+          }, 8, ["size", "type", "disabled", "maxWidth"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !_ctx.collapseTags ? (openBlock(), createElementBlock(
             "span",
             _hoisted_6,
             [_ctx.showAllTextTag && _ctx.state.selectCls === "checked-sur" ? (openBlock(), createBlock(_component_tiny_tag, {
@@ -458,7 +455,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               size: _ctx.state.collapseTagSize,
               onClose: _cache[2] || (_cache[2] = function($event) {
                 return _ctx.toggleCheckAll(false);
-              })
+              }),
+              maxWidth: _ctx.maxTagWidth
             }, {
               default: withCtx(function() {
                 return [createTextVNode(
@@ -469,24 +467,25 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               _: 1
               /* STABLE */
-            }, 8, ["type", "disabled", "size"])) : (openBlock(), createElementBlock(
+            }, 8, ["type", "disabled", "size", "maxWidth"])) : (openBlock(), createElementBlock(
               Fragment,
               {
                 key: 1
               },
-              [_ctx.hoverExpand || _ctx.clickExpand ? (openBlock(), createBlock(_component_tiny_tag, {
-                class: normalizeClass(["tiny-base-select__tags-collapse", {
+              [_ctx.hoverExpand || _ctx.clickExpand && !_ctx.state.showCollapseTag ? (openBlock(), createBlock(_component_tiny_tag, {
+                class: normalizeClass(["tiny-base-select__tags-collapse", "cursor-pointer", {
                   "is-hidden": _ctx.state.isHidden || _ctx.state.isDisabled
                 }]),
                 type: _ctx.state.getTagType,
                 key: "tags-collapse",
                 "data-tag": "tags-collapse",
-                "only-icon": "",
+                "only-icon": !_ctx.hoverExpand,
                 closable: false,
                 size: _ctx.state.collapseTagSize,
                 onClick: _cache[3] || (_cache[3] = function($event) {
                   return _ctx.onClickCollapseTag($event);
-                })
+                }),
+                maxWidth: _ctx.maxTagWidth
               }, {
                 default: withCtx(function() {
                   return [_ctx.hoverExpand ? (openBlock(), createElementBlock(
@@ -507,7 +506,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 }),
                 _: 1
                 /* STABLE */
-              }, 8, ["class", "type", "size"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(
+              }, 8, ["class", "type", "only-icon", "size", "maxWidth"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(
                 Fragment,
                 null,
                 renderList(_ctx.state.selected, function(item, index) {
@@ -525,12 +524,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     onClose: function onClose($event) {
                       return _ctx.deleteTag($event, item);
                     },
-                    "disable-transitions": ""
+                    "disable-transitions": "",
+                    maxWidth: _ctx.maxTagWidth
                   }, {
                     default: withCtx(function() {
                       return [createVNode(_component_tiny_tooltip, {
-                        effect: "light",
-                        placement: "top",
+                        effect: _ctx.tooltipConfig.effect || "light",
+                        placement: _ctx.tooltipConfig.placement || "top",
+                        "popper-class": _ctx.tooltipConfig.popperClass || "",
                         onMouseenter: function onMouseenter($event) {
                           return _ctx.handleEnterTag($event, _ctx.getValueKey(item));
                         }
@@ -574,11 +575,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                           })]))];
                         }),
                         key: "0"
-                      } : void 0]), 1032, ["onMouseenter"])];
+                      } : void 0]), 1032, ["effect", "placement", "popper-class", "onMouseenter"])];
                     }),
                     _: 2
                     /* DYNAMIC */
-                  }, 1032, ["class", "closable", "disabled", "size", "hit", "type", "onClose"]);
+                  }, 1032, ["class", "closable", "disabled", "size", "hit", "type", "onClose", "maxWidth"]);
                 }),
                 128
                 /* KEYED_FRAGMENT */
@@ -598,64 +599,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ))],
             512
             /* NEED_PATCH */
-          )) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock("span", _hoisted_11, [createVNode(_component_tiny_tooltip, {
-            effect: "light",
-            placement: "top",
-            disabled: !_ctx.showTips
-          }, {
-            content: withCtx(function() {
-              return [createElementVNode(
-                "div",
-                {
-                  class: normalizeClass([_ctx.state.showTips && "tiny-base-select__show-tips", "tiny-base-select__show-common"])
-                },
-                [_ctx.slots.label ? (openBlock(), createElementBlock("span", _hoisted_12, [(openBlock(true), createElementBlock(
-                  Fragment,
-                  null,
-                  renderList(_ctx.state.selected, function(item) {
-                    return openBlock(), createElementBlock("span", {
-                      key: _ctx.getValueKey(item)
-                    }, [renderSlot(_ctx.$slots, "label", {
-                      item
-                    })]);
-                  }),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))])) : (openBlock(), createElementBlock(
-                  "span",
-                  _hoisted_13,
-                  toDisplayString(_ctx.disabledTooltipContent || _ctx.state.disabledTooltipContent),
-                  1
-                  /* TEXT */
-                ))],
-                2
-                /* CLASS */
-              )];
-            }),
-            default: withCtx(function() {
-              return [createElementVNode("span", null, [(openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(_ctx.state.selected, function(item) {
-                  return openBlock(), createElementBlock("span", {
-                    key: item.value
-                  }, [renderSlot(_ctx.$slots, "label", {
-                    item
-                  }, function() {
-                    return [createTextVNode(
-                      toDisplayString(item.state ? item.state.currentLabel : item.currentLabel),
-                      1
-                      /* TEXT */
-                    )];
-                  }), createTextVNode("; ")]);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))])];
-            }),
-            _: 3
-            /* FORWARDED */
-          }, 8, ["disabled"])])), withDirectives(createElementVNode("input", {
+          )) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(
+            "span",
+            {
+              key: 1,
+              class: normalizeClass(["tiny-base-select__tags-text", "is-display-only", {
+                "is-disabled": _ctx.state.isDisabled
+              }])
+            },
+            [createElementVNode("span", null, [(openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.state.selected, function(item) {
+                return openBlock(), createElementBlock("span", {
+                  key: item.value
+                }, [renderSlot(_ctx.$slots, "label", {
+                  item
+                }, function() {
+                  return [createTextVNode(
+                    toDisplayString(item.state ? item.state.currentLabel : item.currentLabel),
+                    1
+                    /* TEXT */
+                  )];
+                }), createTextVNode("; ")]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))])],
+            2
+            /* CLASS */
+          )), withDirectives(createElementVNode("input", {
             ref: "input",
             "onUpdate:modelValue": _cache[5] || (_cache[5] = function($event) {
               return _ctx.state.query = $event;
@@ -702,11 +675,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             style: normalizeStyle({
               "flex-grow": "1",
-              width: _ctx.state.inputLength / (_ctx.state.inputWidth - 32) + "%",
-              "max-width": _ctx.state.inputWidth - 42 + "px",
+              width: _ctx.state.inputWidth > 0 ? _ctx.state.inputLength / (_ctx.state.inputWidth - 32) + "%" : "auto",
+              "max-width": _ctx.state.inputWidth > 0 ? _ctx.state.inputWidth - 42 + "px" : "none",
               height: "auto"
             })
-          }, null, 46, _hoisted_14), [[vShow, _ctx.filterable && !_ctx.searchable && !_ctx.state.selectDisabled], [vModelText, _ctx.state.query]])],
+          }, null, 46, _hoisted_11), [[vShow, _ctx.filterable && !_ctx.searchable && !_ctx.state.selectDisabled], [vModelText, _ctx.state.query]])],
           6
           /* CLASS, STYLE */
         )) : createCommentVNode("v-if", true), !_ctx.shape ? (openBlock(), createBlock(_component_tiny_input, {
@@ -723,17 +696,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           id: _ctx.id,
           autocomplete: _ctx.autocomplete,
           size: _ctx.state.selectSize,
+          showTooltip: false,
           disabled: _ctx.state.selectDisabled,
           readonly: _ctx.state.readonly,
           "display-only": _ctx.state.isDisplayOnly,
           "display-only-content": _ctx.state.displayOnlyContent,
           unselectable: _ctx.state.readonly ? "on" : "off",
           "validate-event": false,
+          "show-empty-value": _ctx.showEmptyValue,
           "input-box-type": _ctx.inputBoxType,
           class: normalizeClass({
             "is-focus": _ctx.state.visible,
             overflow: _ctx.state.overflow,
-            "is-show-close": _ctx.state.showClose
+            "is-show-close": _ctx.state.showClose,
+            "show-copy": _ctx.copyable,
+            "show-clear": _ctx.clearable
           }),
           tabindex: _ctx.multiple && _ctx.filterable ? "-1" : _ctx.tabindex,
           onFocus: _ctx.handleFocus,
@@ -754,15 +731,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onCompositionend: _ctx.handleComposition
         }, createSlots({
           suffix: withCtx(function() {
-            return [renderSlot(_ctx.$slots, "suffix"), _ctx.showLimitText && _ctx.multiple && _ctx.multipleLimit ? (openBlock(), createElementBlock(
+            return [renderSlot(_ctx.$slots, "suffix"), _ctx.showLimitText && _ctx.multiple && _ctx.multipleLimit && !_ctx.state.showCopy ? (openBlock(), createElementBlock(
               "span",
-              _hoisted_15,
+              _hoisted_12,
               toDisplayString(_ctx.state.selected.length) + "/" + toDisplayString(_ctx.multipleLimit),
               1
               /* TEXT */
             )) : _ctx.showProportion && _ctx.state.selected.length > 0 && _ctx.state.options.length > 1 ? (openBlock(), createElementBlock(
               "span",
-              _hoisted_16,
+              _hoisted_13,
               toDisplayString(_ctx.state.selected.length + "/" + _ctx.state.options.length),
               1
               /* TEXT */
@@ -798,7 +775,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             return [renderSlot(_ctx.$slots, "prefix")];
           }),
           key: "0"
-        } : void 0]), 1032, ["modelValue", "placeholder", "name", "id", "autocomplete", "size", "disabled", "readonly", "display-only", "display-only-content", "unselectable", "input-box-type", "class", "tabindex", "onFocus", "onBlur", "onKeyup", "onKeydown", "onPaste", "onMouseenter", "onMouseleave", "onCompositionend"])) : createCommentVNode("v-if", true)];
+        } : void 0]), 1032, ["modelValue", "placeholder", "name", "id", "autocomplete", "size", "disabled", "readonly", "display-only", "display-only-content", "unselectable", "show-empty-value", "input-box-type", "class", "tabindex", "onFocus", "onBlur", "onKeyup", "onKeydown", "onPaste", "onMouseenter", "onMouseleave", "onCompositionend"])) : createCommentVNode("v-if", true)];
       }), createVNode(Transition, {
         name: "tiny-zoom-in-top",
         onBeforeEnter: _ctx.handleMenuEnter,
@@ -824,7 +801,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 },
                 [createVNode(_component_tiny_input, {
                   ref: "input",
-                  type: "text",
                   modelValue: _ctx.state.query,
                   "onUpdate:modelValue": _cache[27] || (_cache[27] = function($event) {
                     return _ctx.state.query = $event;
@@ -836,7 +812,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, null, 8, ["modelValue", "placeholder", "onInput", "onFocus"])],
                 2
                 /* CLASS */
-              )) : createCommentVNode("v-if", true), _ctx.topCreate ? (openBlock(), createElementBlock("div", _hoisted_17, [createElementVNode("div", {
+              )) : createCommentVNode("v-if", true), _ctx.topCreate ? (openBlock(), createElementBlock("div", _hoisted_14, [createElementVNode("div", {
                 onClick: _cache[28] || (_cache[28] = function($event) {
                   return _ctx.$emit("top-create-click", $event);
                 })
@@ -858,7 +834,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 "onUpdate:modelValue": [_cache[29] || (_cache[29] = function($event) {
                   return _ctx.state.query = $event;
                 }), _cache[30] || (_cache[30] = function($event) {
-                  return _ctx.handleQueryChange(_ctx.state.query);
+                  return _ctx.handleQueryChange(_ctx.state.query, false, true);
                 })],
                 placeholder: _ctx.t("ui.search.placeholder"),
                 class: "tiny-select-dropdown__search"
@@ -871,7 +847,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 suffix: withCtx(function() {
                   return [withDirectives(createElementVNode(
                     "span",
-                    _hoisted_18,
+                    _hoisted_15,
                     [createVNode(_component_icon_close, {
                       onClick: _ctx.clearSearchText
                     }, null, 8, ["onClick"])],
@@ -891,12 +867,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     height: _ctx.state.optimizeStore.recycleScrollerHeight + "px"
                   })
                 },
-                [withDirectives((openBlock(), createBlock(_component_tiny_recycle_scroller, {
+                [withDirectives(createVNode(_component_tiny_recycle_scroller, {
                   ref: "scrollbar",
                   style: {
                     "height": "100%"
                   },
-                  key: _ctx.state.magicKey,
                   "key-field": _ctx.valueField,
                   "list-class": ["tiny-select-dropdown__wrap"],
                   "item-class": ["tiny-select-dropdown__item-view"],
@@ -931,10 +906,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   }),
                   _: 3
                   /* FORWARDED */
-                }, 8, ["key-field", "items", "item-size"])), [[vShow, !_ctx.state.emptyFlag && !_ctx.loading]])],
+                }, 8, ["key-field", "items", "item-size"]), [[vShow, !_ctx.state.emptyFlag && !_ctx.loading]])],
                 4
                 /* STYLE */
-              )) : createCommentVNode("v-if", true), !_ctx.optimization ? withDirectives((openBlock(), createBlock(_component_tiny_scrollbar, {
+              )) : createCommentVNode("v-if", true), !_ctx.optimization && !(_ctx.state.isDisplayOnly && _ctx.options) ? withDirectives((openBlock(), createBlock(_component_tiny_scrollbar, {
                 key: 4,
                 ref: "scrollbar",
                 show: "",
@@ -967,15 +942,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         return _ctx.state.hoverIndex = -9;
                       })
                     },
-                    [(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.selectCls), {
+                    [createElementVNode("span", _hoisted_16, [(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.selectCls), {
                       class: normalizeClass(["tiny-svg-size", _ctx.state.selectCls])
-                    }, null, 8, ["class"])), createElementVNode(
+                    }, null, 8, ["class"]))]), createElementVNode("div", _hoisted_17, [createElementVNode(
                       "span",
-                      null,
+                      _hoisted_18,
                       toDisplayString(_ctx.allText || _ctx.t("ui.base.all")),
                       1
                       /* TEXT */
-                    )],
+                    )])],
                     34
                     /* CLASS, NEED_HYDRATION */
                   )) : createCommentVNode("v-if", true), _ctx.multiple && _ctx.showCheck && _ctx.showAlloption && !_ctx.state.multipleLimit && _ctx.state.query && !_ctx.state.emptyText && !_ctx.remote ? (openBlock(), createElementBlock(
@@ -997,15 +972,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         return _ctx.state.hoverIndex = -9;
                       })
                     },
-                    [(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.filteredSelectCls), {
+                    [createElementVNode("span", _hoisted_19, [(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.filteredSelectCls), {
                       class: normalizeClass(["tiny-svg-size", _ctx.state.filteredSelectCls])
-                    }, null, 8, ["class"])), createElementVNode(
+                    }, null, 8, ["class"]))]), createElementVNode("div", _hoisted_20, [createElementVNode(
                       "span",
-                      null,
+                      _hoisted_21,
                       toDisplayString(_ctx.allText || _ctx.t("ui.base.all")),
                       1
                       /* TEXT */
-                    )],
+                    )])],
                     34
                     /* CLASS, NEED_HYDRATION */
                   )) : createCommentVNode("v-if", true), _ctx.state.showNewOption ? (openBlock(), createBlock(_component_tiny_option, {
@@ -1042,43 +1017,57 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 {
                   key: 5
                 },
-                [_ctx.loadingText || _ctx.slots.empty ? (openBlock(), createElementBlock("div", _hoisted_19, [_ctx.slots.empty ? renderSlot(_ctx.$slots, "empty", {
+                [_ctx.loadingText || _ctx.slots.empty ? (openBlock(), createElementBlock("div", _hoisted_22, [_ctx.slots.empty ? renderSlot(_ctx.$slots, "empty", {
                   key: 0
-                }) : _ctx.showEmptyImage ? (openBlock(), createElementBlock("span", _hoisted_20)) : (openBlock(), createElementBlock(
+                }) : _ctx.showEmptyImage ? (openBlock(), createElementBlock("span", _hoisted_23)) : (openBlock(), createElementBlock(
                   "p",
-                  _hoisted_21,
+                  _hoisted_24,
                   toDisplayString(_ctx.state.emptyText),
                   1
                   /* TEXT */
-                ))])) : (openBlock(), createElementBlock("div", _hoisted_22, [!_ctx.loading ? (openBlock(), createElementBlock(
-                  Fragment,
+                ))])) : (openBlock(), createElementBlock(
+                  "div",
                   {
-                    key: 0
+                    key: 1,
+                    class: normalizeClass(["tiny-select-dropdown__loading", {
+                      "show-loading-icon": _ctx.loading
+                    }])
                   },
-                  [_ctx.showEmptyImage ? (openBlock(), createElementBlock("span", _hoisted_23)) : (openBlock(), createElementBlock(
-                    "span",
-                    _hoisted_24,
-                    toDisplayString(_ctx.state.emptyText),
-                    1
-                    /* TEXT */
-                  ))],
-                  64
-                  /* STABLE_FRAGMENT */
-                )) : (openBlock(), createElementBlock("svg", _hoisted_25, _hoisted_27))]))],
+                  [!_ctx.loading ? (openBlock(), createElementBlock(
+                    Fragment,
+                    {
+                      key: 0
+                    },
+                    [_ctx.showEmptyImage ? (openBlock(), createElementBlock("span", _hoisted_25)) : (openBlock(), createElementBlock(
+                      "span",
+                      _hoisted_26,
+                      toDisplayString(_ctx.state.emptyText),
+                      1
+                      /* TEXT */
+                    ))],
+                    64
+                    /* STABLE_FRAGMENT */
+                  )) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.designConfig && _ctx.state.designConfig.icons && _ctx.state.designConfig.icons.loadingIcon || "icon-loading-shadow"), {
+                    key: 1,
+                    class: "circular"
+                  }))],
+                  2
+                  /* CLASS */
+                ))],
                 64
                 /* STABLE_FRAGMENT */
               )) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "footer")];
             }),
             _: 3
             /* FORWARDED */
-          }, 8, ["is-drop-inherit-width", "placement", "append-to-body", "style", "popper-options"]), [[vShow, !_ctx.onCopying() && !_ctx.hideDrop && _ctx.state.visible && _ctx.state.emptyText !== false]])];
+          }, 8, ["is-drop-inherit-width", "placement", "append-to-body", "style", "popper-options"]), [[vShow, !_ctx.onCopying() && !_ctx.hideDrop && _ctx.state.visible && (_ctx.slots.panel || _ctx.state.emptyText !== false)]])];
         }),
         _: 3
         /* FORWARDED */
       }, 8, ["onBeforeEnter", "onAfterLeave"])],
       6
       /* CLASS, STYLE */
-    ), _ctx.hoverExpand && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock("div", _hoisted_28, _hoisted_30)) : createCommentVNode("v-if", true)],
+    )), [[_directive_auto_tip, _ctx.state.rootAutoTipConfig]]), _ctx.hoverExpand && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock("div", _hoisted_27, _hoisted_29)) : createCommentVNode("v-if", true)],
     16
     /* FULL_PROPS */
   )), [[_directive_popover, void 0, "popover"], [_directive_clickoutside, _ctx.handleClose]]);