@opentinyvue/vue-base-select 2.27.0 → 2.28.0

package/lib/index.js

@@ -11,7 +11,6 @@ import { defineComponent, $props, $setup, $prefix } from "@opentinyvue/vue-commo
 import { t } from "@opentinyvue/vue-locale";
 import PcTemplate from "./pc.js";
 import MobileFirstTemplate from "./mobile-first.js";
-import { IconChevronDown } from "@opentinyvue/vue-icon";
 var template = function template2(mode) {
   var _process$env;
   var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
@@ -265,11 +264,7 @@ var BaseSelect = defineComponent({
     },
     dropdownIcon: {
       type: [Object, String],
-      default: function _default10() {
-        var defaultDropdownIcon = IconChevronDown();
-        defaultDropdownIcon.isDefault = true;
-        return defaultDropdownIcon;
-      }
+      default: ""
     },
     disabledTooltipContent: String,
     hoverExpand: {
@@ -304,7 +299,7 @@ var BaseSelect = defineComponent({
     },
     popperOptions: {
       type: Object,
-      default: function _default11() {
+      default: function _default10() {
         return {
           gpuAcceleration: false,
           boundariesPadding: 0
@@ -321,14 +316,33 @@ var BaseSelect = defineComponent({
     },
     topCreateText: {
       type: String,
-      default: function _default12() {
+      default: function _default11() {
         return t("ui.select.add");
       }
     },
+    initLabel: {
+      type: String,
+      default: ""
+    },
     blank: {
       type: Boolean,
       default: false
     },
+    tooltipConfig: {
+      type: Object,
+      default: function _default12() {
+        return {};
+      }
+    },
+    showEmptyValue: Boolean,
+    dropdownHeight: {
+      type: String,
+      default: "initial"
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: void 0
+    },
     // 以下为 tiny 新增
     searchable: {
       type: Boolean,
@@ -376,6 +390,15 @@ var BaseSelect = defineComponent({
     showAllTextTag: {
       type: Boolean,
       default: false
+    },
+    // 配置多选时，Tag的最大宽度
+    maxTagWidth: {
+      type: [String, Number],
+      default: null
+    },
+    autoSelect: {
+      type: Boolean,
+      default: false
     }
   }),
   setup: function setup(props, context) {

package/lib/mobile-first.js

@@ -1,13 +1,13 @@
-import { renderless, api } from '@opentinyvue/vue-renderless/select/vue';
+import { renderless, api } from '@opentinyvue/vue-renderless/base-select/vue';
 import { defineComponent, directive, props, setup } from '@opentinyvue/vue-common';
 import Tag from '@opentinyvue/vue-tag';
 import Input from '@opentinyvue/vue-input';
 import Option from '@opentinyvue/vue-option';
 import Scrollbar from '@opentinyvue/vue-scrollbar';
 import SelectDropdown from '@opentinyvue/vue-select-dropdown';
-import { Clickoutside } from '@opentinyvue/vue-directive';
-import { iconClose, iconCopy, iconHalfselect, iconCheck, iconCheckedSur, iconLoading, iconChevronRight } from '@opentinyvue/vue-icon';
-import Tree from '@opentinyvue/vue-tree';
+import Button from '@opentinyvue/vue-button';
+import { Clickoutside, AutoTip } from '@opentinyvue/vue-directive';
+import { iconClose, iconCopy, iconHalfselect, iconCheck, iconCheckedSur, iconLoading, iconChevronRight, iconDownWard, iconSearch, iconEllipsis, iconChevronUp, iconAddCircle, iconLoadingShadow } from '@opentinyvue/vue-icon';
 import Tooltip from '@opentinyvue/vue-tooltip';
 import FilterBox from '@opentinyvue/vue-filter-box';
 import RecycleScroller from '@opentinyvue/vue-recycle-scroller';
@@ -46,7 +46,7 @@ var classes = {
   "caret": "text-base rotate-0 transition-transform duration-300 fill-color-text-placeholder cursor-pointer ",
   "select-tags": "absolute leading-normal whitespace-normal sm:pl-3 pr-2 z-[1] top-1/2 -translate-y-2/4 flex items-center flex-wrap [&_[data-tag=tiny-tag]]:my-0.5 [&_[data-tag=tiny-tag]]:h-7 [&_[data-tag=tiny-tag]]:sm:h-5 [&_[data-tag=tiny-tag]_svg]:shrink-0",
   "tags-text": "inline-block w-full whitespace-nowrap text-ellipsis overflow-hidden align-bottom",
-  "tag-info": "whitespace-nowrap text-ellipsis overflow-hidden inline-flex justify-start items-center border-transparent text-color-text-primary"
+  "tag-info": "whitespace-nowrap text-ellipsis overflow-hidden inline-flex justify-start items-center border-transparent text-color-text-primary h-5 cursor-pointer"
 };
 var render = function render2() {
   var _vm = this;
@@ -65,7 +65,10 @@ var render = function render2() {
     }],
     ref: "select",
     staticClass: "inline-block relative w-full outline-0 group [&_[data-tag=tiny-tag]]:max-w-[144px]",
-    class: [_vm.hoverExpand ? "align-top" : "", _vm.$parent.$attrs.class],
+    class: [_vm.hoverExpand ? "align-top is-hover-expand" : "", _vm.clickExpand ? "is-click-expand" : "", (_vm.state.inputHovering || _vm.state.visible) && !_vm.clickExpand ? "is-hover" : "", _vm.state.showCollapseTag ? "collapse-tag-clicked" : "", _vm.$parent.$attrs.class],
+    attrs: {
+      "data-tag": "tiny-base-select"
+    },
     on: {
       "mouseleave": function mouseleave($event) {
         if ($event.target !== $event.currentTarget) return null;
@@ -117,11 +120,13 @@ var render = function render2() {
     }, {
       "overflow-y-hidden": (_vm.state.inputHovering || _vm.state.visible) && !_vm.state.selected.length
     }, {
-      "h-6 overflow-hidden": _vm.hoverExpand
+      "h-6 overflow-hidden": _vm.hoverExpand || _vm.clickExpand
     }, {
       "pr-6": _vm.state.selectDisabled
     }, {
-      "overflow-y-auto max-h-28 h-auto": _vm.hoverExpand && (_vm.state.inputHovering || _vm.state.visible)
+      "overflow-y-auto max-h-28 h-auto": _vm.hoverExpand && (_vm.state.inputHovering || _vm.state.visible) || _vm.clickExpand && _vm.state.showCollapseTag
+    }, {
+      "overflow-x-hidden": !(_vm.hoverExpand && (_vm.state.inputHovering || _vm.state.visible) || _vm.clickExpand && _vm.state.showCollapseTag)
     }),
     style: _vm.state.tagsStyle
   }, [!_vm.state.selectDisabled ? _c("span", {
@@ -135,8 +140,9 @@ var render = function render2() {
       "closable": !_vm.state.selectDisabled && _vm.state.device !== "mb",
       "size": _vm.state.collapseTagSize,
       "hit": _vm.state.selectedVal[0].state ? _vm.state.selectedVal[0].state.hitState : _vm.state.selectedVal[0].hitState,
-      "type": "info",
-      "disable-transitions": ""
+      "type": _vm.state.getTagType,
+      "disable-transitions": "",
+      "maxWidth": _vm.maxTagWidth
     },
     on: {
       "close": function close($event) {
@@ -178,28 +184,52 @@ var render = function render2() {
     attrs: {
       "closable": false,
       "size": _vm.state.collapseTagSize,
-      "type": "info",
-      "disable-transitions": ""
+      "type": _vm.state.getTagType,
+      "disable-transitions": "",
+      "maxWidth": _vm.maxTagWidth
     }
   }, [_c("span", {
     class: _vm.gcls("tags-text")
   }, [_vm._v("+ " + _vm._s(_vm.state.selectedVal.length - 1))])]) : _vm._e()], 1) : _vm._e(), !_vm.collapseTags ? _c("span", {
     ref: "tags-content",
     staticClass: "sm:contents hidden"
-  }, [_vm.hoverExpand ? _c("tiny-tag", {
+  }, [_vm.showAllTextTag && _vm.state.selectCls === "checked-sur" ? _c("tiny-tag", {
+    key: "tags-all-text-tag",
+    attrs: {
+      "type": _vm.state.getTagType,
+      "data-tag": "tags-all-text-tag",
+      "disabled": _vm.state.isDisabled,
+      "closable": true,
+      "size": _vm.state.collapseTagSize,
+      "maxWidth": _vm.maxTagWidth
+    },
+    on: {
+      "close": function close($event) {
+        return _vm.toggleCheckAll(false);
+      }
+    }
+  }, [_vm._v(" " + _vm._s(_vm.allText || _vm.t("ui.base.all")) + " ")]) : [(_vm.hoverExpand || _vm.clickExpand && !_vm.state.showCollapseTag) && _vm.state.selected.length > 1 ? _c("tiny-tag", {
     key: "tags-collapse",
     class: _vm.m(_vm.gcls("tag-info"), {
-      "visible static": _vm.hoverExpand
+      "visible static": _vm.hoverExpand || _vm.clickExpand && !_vm.state.showCollapseTag
     }, {
       "invisible absolute": _vm.hoverExpand && (_vm.state.inputHovering || _vm.state.visible || _vm.state.isHidden)
+    }, {
+      "is-hidden": _vm.clickExpand && _vm.state.isHidden || _vm.state.isDisabled
     }),
     attrs: {
-      "type": "info",
+      "type": _vm.state.getTagType,
       "data-tag": "tags-collapse",
       "closable": false,
-      "size": _vm.state.collapseTagSize
+      "size": _vm.state.collapseTagSize,
+      "maxWidth": _vm.maxTagWidth
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.onClickCollapseTag($event);
+      }
     }
-  }, [_vm._v("+ " + _vm._s(_vm.state.collapseTagsLength))]) : _vm._e(), _vm._l(_vm.state.selected, function(item, index) {
+  }, [_vm.hoverExpand ? [_vm._v("+ " + _vm._s(_vm.state.collapseTagsLength))] : _c("icon-ellipsis")], 2) : _vm._e(), _vm._l(_vm.state.selected, function(item, index) {
     return _c("tiny-tag", {
       key: _vm.getValueKey(item),
       class: _vm.gcls("tag-info"),
@@ -207,8 +237,9 @@ var render = function render2() {
         "closable": !item.selectDisabled && !item.required && _vm.state.device !== "mb",
         "size": _vm.state.collapseTagSize,
         "hit": item.state ? item.state.hitState : item.hitState,
-        "type": "info",
-        "disable-transitions": ""
+        "type": _vm.state.getTagType,
+        "disable-transitions": "",
+        "maxWidth": _vm.maxTagWidth
       },
       on: {
         "close": function close($event) {
@@ -249,7 +280,14 @@ var render = function render2() {
     }, {
       "item": _vm.getLabelSlotValue(item)
     })], 2)])], 1);
-  })], 2) : _vm._e()]) : _c("span", {
+  }), _vm.clickExpand && _vm.state.showCollapseTag ? _c("span", {
+    staticClass: "text-xs text-color-brand cursor-pointer flex items-center",
+    on: {
+      "click": function click($event) {
+        return _vm.onClickCollapseTag($event);
+      }
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.select.collapse")) + " "), _c("icon-chevron-up")], 1) : _vm._e()]], 2) : _vm._e()]) : _c("span", {
     class: [_vm.gcls("tags-text"), "flex"]
   }, [_c("tiny-tooltip", {
     attrs: {
@@ -345,6 +383,7 @@ var render = function render2() {
   }) : _vm._e()]) : _vm._e(), !_vm.shape ? _c("tiny-input", {
     ref: "reference",
     attrs: {
+      "tiny_mode": "mobile-first",
       "type": "text",
       "placeholder": _vm.state.currentPlaceholder,
       "name": _vm.name,
@@ -357,6 +396,8 @@ var render = function render2() {
       "display-only-content": _vm.state.displayOnlyContent,
       "unselectable": _vm.state.readonly ? "on" : "off",
       "validate-event": false,
+      "show-empty-value": _vm.showEmptyValue,
+      "input-box-type": _vm.inputBoxType,
       "tabindex": _vm.multiple && _vm.filterable ? "-1" : _vm.tabindex
     },
     on: {
@@ -426,7 +467,7 @@ var render = function render2() {
               _vm.state.inputHovering = true;
             }
           }
-        }) : _vm._e(), _c(_vm.dropdownIcon, {
+        }) : _vm._e(), _c(_vm.state.getIcon.icon, {
           directives: [{
             name: "show",
             rawName: "v-show",
@@ -468,8 +509,8 @@ var render = function render2() {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !_vm.onCopying() && !_vm.hideDrop && _vm.state.visible && _vm.state.emptyText !== false,
-      expression: "!onCopying() && !hideDrop && state.visible && state.emptyText !== false"
+      value: !_vm.onCopying() && !_vm.hideDrop && _vm.state.visible && (_vm.slots.panel || _vm.state.emptyText !== false),
+      expression: "!onCopying() && !hideDrop && state.visible && (slots.panel || state.emptyText !== false)"
     }],
     ref: "popper",
     class: _vm.m("duration-300"),
@@ -504,33 +545,12 @@ var render = function render2() {
       },
       expression: "state.query"
     }
-  })], 1) : _vm._e(), _vm.renderType === "tree" ? _c("tiny-tree", _vm._b({
-    ref: "selectTree",
-    staticClass: "[&_[data-tag=tiny-checkbox]_>span_>span]:p-1.5 sm:[&_[data-tag=tiny-checkbox]_>span_>span]:p-0",
-    attrs: {
-      "filter-node-method": _vm.filterMethod,
-      "props": Object.assign({
-        label: _vm.textField,
-        isLeaf: "isLeaf"
-      }, _vm.treeOp.props),
-      "expand-on-click-node": false,
-      "icon-trigger-click-node": false,
-      "node-key": _vm.valueField,
-      "default-expand-all": _vm.state.isExpandAll,
-      "check-strictly": _vm.treeOp.checkStrictly,
-      "default-checked-keys": _vm.multiple ? _vm.state.defaultCheckedKeys : [],
-      "current-node-key": !_vm.multiple ? _vm.state.currentKey : "",
-      "show-checkbox": _vm.multiple,
-      "show-checked-mark": _vm.state.device === "mb"
-    },
-    on: {
-      "load-data": _vm.loadTreeData,
-      "node-collapse": _vm.nodeCollapse,
-      "node-expand": _vm.nodeExpand,
-      "check": _vm.nodeCheckClick,
-      "node-click": _vm.treeNodeClick
+  })], 1) : _vm._e(), _vm._t("header"), _vm._t("panel", null, {
+    "methods": {
+      updateSelectedData: _vm.updateSelectedData,
+      hidePanel: _vm.hidePanel
     }
-  }, "tiny-tree", _vm.treeOp, false)) : _vm._e(), _vm.optimization && _vm.renderType !== "tree" ? [_c("div", {
+  }), _vm.optimization ? [_c("div", {
     style: {
       height: _vm.state.optimizeStore.recycleScrollerHeight + "px"
     }
@@ -591,7 +611,7 @@ var render = function render2() {
         })];
       }
     }], null, true)
-  })], 1)] : _vm._e(), !_vm.optimization && _vm.renderType !== "tree" ? _c("tiny-scrollbar", {
+  })], 1)] : _vm._e(), !_vm.optimization ? _c("tiny-scrollbar", {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -610,7 +630,7 @@ var render = function render2() {
       }
     }
   }, [_vm._t("dropdown"), _vm.multiple && _vm.showCheck && _vm.showAlloption && !_vm.state.multipleLimit && !_vm.state.query && !_vm.remote ? _c("div", {
-    staticClass: "whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-3 my-1 sm:m-1 rounded cursor-pointer",
+    staticClass: "whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-2 my-1 sm:m-1 rounded cursor-pointer",
     class: [{
       hover: _vm.state.hoverIndex === -9 && _vm.state.selectCls !== "checked-sur"
     }, {
@@ -633,11 +653,11 @@ var render = function render2() {
     }
   }, [_c("icon-" + _vm.state.selectCls, {
     tag: "component",
-    class: _vm.m(["-mt-0.5 mr-2 fill-color-icon-secondary", _vm.state.selectCls !== "check" && "fill-color-brand"])
+    class: _vm.m(["-mt-0.5 mr-2 fill-color-icon-secondary w-3.5 h-3.5", _vm.state.selectCls !== "check" && "fill-color-brand text-color-brand"])
   }), _c("span", {
     class: [_vm.state.selectCls === "checked-sur" ? "text-color-brand" : "text-color-text-primary"]
   }, [_vm._v(" " + _vm._s(_vm.allText || _vm.t("ui.base.all")))])], 1) : _vm._e(), _vm.multiple && _vm.showCheck && _vm.showAlloption && !_vm.state.multipleLimit && _vm.state.query && !_vm.state.emptyText && !_vm.remote ? _c("div", {
-    staticClass: "whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-3 my-1 sm:m-1 rounded cursor-pointer",
+    staticClass: "whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-2 my-1 sm:m-1 rounded cursor-pointer",
     class: [{
       hover: _vm.state.hoverIndex === -9 && _vm.state.filteredSelectCls !== "checked-sur"
     }, {
@@ -688,7 +708,7 @@ var render = function render2() {
         }
       });
     });
-  })], 2) : _vm._e(), _vm.renderType !== "tree" && _vm.state.emptyText && (!_vm.allowCreate || _vm.loading || _vm.allowCreate && _vm.state.emptyFlag) ? [_vm.loadingText || _vm.slots.empty ? _c("div", [_vm.slots.empty ? _vm._t("empty") : _c("p", {
+  })], 2) : _vm._e(), !_vm.slots.panel && _vm.state.emptyText && (!_vm.allowCreate || _vm.loading || _vm.allowCreate && _vm.state.emptyFlag) ? [_vm.loadingText || _vm.slots.empty ? _c("div", [_vm.slots.empty ? _vm._t("empty") : _c("p", {
     staticClass: "py-2.5 px-0 m-0 text-center text-color-text-secondary text-xs"
   }, [_vm._v(" " + _vm._s(_vm.state.emptyText) + " ")])], 2) : _c("div", {
     staticClass: "text-center py-2.5 px-0"
@@ -696,7 +716,7 @@ var render = function render2() {
     staticClass: "py-2.5 px-0 m-0 text-center text-color-text-secondary text-xs"
   }, [_vm._v(" " + _vm._s(_vm.state.emptyText) + " ")]) : _c("icon-loading", {
     staticClass: "fill-color-brand h-4 w-4 inline-block align-top animate-spin"
-  })], 1)] : _vm._e()], 2)], 1)], 1), _vm.hoverExpand && !_vm.state.isDisplayOnly ? _c("div", {
+  })], 1)] : _vm._e(), _vm._t("footer")], 2)], 1)], 1), _vm.hoverExpand && !_vm.state.isDisplayOnly ? _c("div", {
     class: _vm.m("h-7 invisible", {
       "h-6": _vm.state.selectSize === "mini"
     }, {
@@ -724,9 +744,10 @@ var getReference = function getReference2(el, binding, vnode) {
 };
 var __vue2_script = defineComponent({
   inheritAttrs: false,
-  emits: ["update:modelValue", "change", "focus", "blur", "clear", "remove-tag", "visible-change", "handleDropdownClick", "dropdown-click", "confirm"],
+  emits: ["update:modelValue", "change", "focus", "blur", "clear", "remove-tag", "visible-change", "handleDropdownClick", "dropdown-click", "confirm", "top-create-click"],
   directives: directive({
     Clickoutside,
+    AutoTip,
     popover: {
       bind: function bind(el, binding, vnode) {
         getReference(el, binding, vnode);
@@ -740,8 +761,8 @@ var __vue2_script = defineComponent({
     TinyTag: Tag,
     TinyInput: Input,
     TinyOption: Option,
-    TinyTree: Tree,
     TinyScrollbar: Scrollbar,
+    TinyButton: Button,
     TinyFilterBox: FilterBox,
     TinyTooltip: Tooltip,
     IconClose: iconClose(),
@@ -752,9 +773,15 @@ var __vue2_script = defineComponent({
     IconCheckedSur: iconCheckedSur(),
     IconLoading: iconLoading(),
     IconChevronRight: iconChevronRight(),
+    IconDownWard: iconDownWard(),
+    IconSearch: iconSearch(),
+    IconEllipsis: iconEllipsis(),
+    IconChevronUp: iconChevronUp(),
+    IconAddCircle: iconAddCircle(),
+    IconLoadingShadow: iconLoadingShadow(),
     TinyRecycleScroller: RecycleScroller
   },
-  props: [].concat(props, ["id", "multiple", "name", "dataset", "readonly", "tabindex", "dropStyle", "valueField", "textField", "copyable", "size", "options", "showCheck", "showAlloption", "showProportion", "hideDrop", "modelValue", "showOverflowTooltip", "remote", "remoteConfig", "placement", "loading", "disabled", "valueKey", "clearable", "noDataText", "filterable", "loadingText", "noMatchText", "popperClass", "allowCreate", "placeholder", "remoteMethod", "filterMethod", "collapseTags", "autocomplete", "multipleLimit", "reserveKeyword", "automaticDropdown", "defaultFirstOption", "popperAppendToBody", "showDropdown", "expandTags", "renderType", "gridOp", "treeOp", "delay", "cacheOp", "isDropInheritWidth", "tagSelectable", "selectConfig", "radioConfig", "allowCopy", "textSplit", "autoClose", "queryDebounce", "ignoreEnter", "dropdownIcon", "disabledTooltipContent", "hoverExpand", "optimization", "displayOnly", "initQuery", "extraQueryParams", "shape", "label", "tip", "updateDelay", "showTips", "popperOptions", "title", "closeByMask", "searchPlaceholder", "blank", "allText"]),
+  props: [].concat(props, ["id", "multiple", "name", "dataset", "readonly", "tabindex", "dropStyle", "valueField", "textField", "copyable", "size", "options", "showCheck", "showAlloption", "showProportion", "hideDrop", "modelValue", "showOverflowTooltip", "remote", "remoteConfig", "placement", "loading", "disabled", "valueKey", "clearable", "noDataText", "filterable", "loadingText", "noMatchText", "popperClass", "allowCreate", "placeholder", "remoteMethod", "filterMethod", "collapseTags", "autocomplete", "multipleLimit", "reserveKeyword", "automaticDropdown", "defaultFirstOption", "popperAppendToBody", "showDropdown", "expandTags", "delay", "cacheOp", "isDropInheritWidth", "tagSelectable", "selectConfig", "radioConfig", "allowCopy", "textSplit", "autoClose", "queryDebounce", "ignoreEnter", "dropdownIcon", "disabledTooltipContent", "optimization", "displayOnly", "initQuery", "extraQueryParams", "shape", "label", "tip", "updateDelay", "showTips", "popperOptions", "title", "closeByMask", "searchPlaceholder", "blank", "allText", "maxTagWidth", "tagType", "clearNoMatchValue", "showAllTextTag", "hoverExpand", "clickExpand", "maxVisibleRows", "initLabel", "inputBoxType", "showEmptyValue"]),
   setup: function setup$1(props2, context) {
     return setup({
       props: props2,

package/lib/pc.js

@@ -6,12 +6,11 @@ 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';
 
@@ -61,6 +60,7 @@ var __vue2_script = 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);
@@ -75,25 +75,24 @@ var __vue2_script = 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",
@@ -166,7 +165,11 @@ var __vue2_script = defineComponent({
     "topCreate",
     "topCreateText",
     "keepFocus",
+    "initLabel",
     "blank",
+    "tooltipConfig",
+    "showEmptyValue",
+    "stopPropagation",
     // 以下为 tiny 新增
     "searchable",
     "showEmptyImage",
@@ -178,7 +181,8 @@ var __vue2_script = defineComponent({
     "clickExpand",
     "maxVisibleRows",
     "showAllTextTag",
-    "allText"
+    "allText",
+    "maxTagWidth"
   ]),
   setup: function setup$1(props2, context) {
     return setup({
@@ -207,7 +211,7 @@ var render = function render2() {
     }],
     ref: "select",
     staticClass: "tiny-base-select",
-    class: [_vm.state.selectSize ? "tiny-base-select--" + _vm.state.selectSize : "", _vm.state.collapseTags ? "tiny-base-select__collapse-tags" : "", _vm.filterable ? "tiny-base-select__filterable" : "", _vm.multiple ? "tiny-base-select__multiple" : "", (_vm.state.inputHovering || _vm.state.visible) && !_vm.clickExpand ? "is-hover" : "", _vm.state.isDisplayOnly ? "is-display-only" : "", _vm.hoverExpand ? "is-hover-expand" : "", _vm.clickExpand ? "is-click-expand" : "", _vm.state.showCollapseTag ? "collapse-tag-clicked" : "", _vm.state.selectDisabled ? "is-disabled" : "", _vm.$parent.$attrs.class],
+    class: [_vm.state.selectSize ? "tiny-base-select--" + _vm.state.selectSize : "", _vm.state.collapseTags ? "tiny-base-select__collapse-tags" : "", _vm.filterable ? "tiny-base-select__filterable" : "", _vm.multiple ? "tiny-base-select__multiple" : "", (_vm.state.inputHovering || _vm.state.visible) && !_vm.clickExpand ? "is-hover" : "", _vm.state.isDisplayOnly ? "is-display-only" : "", _vm.hoverExpand ? "is-hover-expand" : "", _vm.clickExpand ? "is-click-expand" : "", _vm.state.showCollapseTag ? "collapse-tag-clicked" : "", _vm.state.isDisabled ? "is-disabled" : "", _vm.$parent.$attrs.class],
     on: {
       "mouseleave": function mouseleave($event) {
         if ($event.target !== $event.currentTarget) return null;
@@ -218,14 +222,17 @@ var render = function render2() {
       },
       "mouseenter": function mouseenter($event) {
         if ($event.target !== $event.currentTarget) return null;
-        return (function() {
-          _vm.state.selectHover = true;
-          _vm.state.inputHovering = true;
-        }).apply(null, arguments);
+        return _vm.onMouseenterSelf.apply(null, arguments);
       },
       "click": _vm.toggleMenu
     }
   }, "div", _vm.a(_vm.$attrs, ["class", "style"], true), false), [_c("div", {
+    directives: [{
+      name: "auto-tip",
+      rawName: "v-auto-tip",
+      value: _vm.state.rootAutoTipConfig,
+      expression: "state.rootAutoTipConfig"
+    }],
     ref: "tagsGroup",
     class: ["tiny-base-select__tags-group", {
       "is-expand": _vm.state.isExpand
@@ -260,12 +267,17 @@ var render = function render2() {
       style: _vm.state.tagsStyle
     }, [!_vm.state.isShowTagText ? _c("span", [_vm.collapseTags && _vm.state.selected.length ? _c("span", [_c("tiny-tag", {
       key: _vm.state.key,
+      class: {
+        "is-required": _vm.state.selected[0].required
+      },
       attrs: {
-        "closable": !_vm.state.selectDisabled,
+        "closable": _vm.isTagClosable(_vm.state.selected[0]),
         "size": _vm.state.collapseTagSize,
         "hit": _vm.state.selected[0].state ? _vm.state.selected[0].state.hitState : _vm.state.selected[0].hitState,
+        "disabled": _vm.state.selected[0].disabled || _vm.state.isDisabled,
         "type": _vm.state.getTagType,
-        "disable-transitions": ""
+        "disable-transitions": "",
+        "maxWidth": _vm.maxTagWidth
       },
       on: {
         "close": function close($event) {
@@ -274,8 +286,9 @@ var render = function render2() {
       }
     }, [_c("tiny-tooltip", {
       attrs: {
-        "effect": "light",
-        "placement": "top"
+        "effect": _vm.tooltipConfig.effect || "light",
+        "placement": _vm.tooltipConfig.placement || "top",
+        "popper-class": _vm.tooltipConfig.popperClass || ""
       },
       nativeOn: {
         "mouseenter": function mouseenter($event) {
@@ -305,7 +318,9 @@ var render = function render2() {
         "closable": false,
         "size": _vm.state.collapseTagSize,
         "type": _vm.state.getTagType,
-        "disable-transitions": ""
+        "disabled": _vm.state.isDisabled,
+        "disable-transitions": "",
+        "maxWidth": _vm.maxTagWidth
       }
     }, [_c("span", {
       staticClass: "tiny-base-select__tags-text"
@@ -318,24 +333,26 @@ var render = function render2() {
         "data-tag": "tags-all-text-tag",
         "disabled": _vm.state.isDisabled,
         "closable": true,
-        "size": _vm.state.collapseTagSize
+        "size": _vm.state.collapseTagSize,
+        "maxWidth": _vm.maxTagWidth
       },
       on: {
         "close": function close($event) {
           return _vm.toggleCheckAll(false);
         }
       }
-    }, [_vm._v(" " + _vm._s(_vm.allText || _vm.t("ui.base.all")) + " ")]) : [_vm.hoverExpand || _vm.clickExpand ? _c("tiny-tag", {
+    }, [_vm._v(" " + _vm._s(_vm.allText || _vm.t("ui.base.all")) + " ")]) : [_vm.hoverExpand || _vm.clickExpand && !_vm.state.showCollapseTag ? _c("tiny-tag", {
       key: "tags-collapse",
-      class: ["tiny-base-select__tags-collapse", {
+      class: ["tiny-base-select__tags-collapse", "cursor-pointer", {
         "is-hidden": _vm.state.isHidden || _vm.state.isDisabled
       }],
       attrs: {
         "type": _vm.state.getTagType,
         "data-tag": "tags-collapse",
-        "only-icon": "",
+        "only-icon": !_vm.hoverExpand,
         "closable": false,
-        "size": _vm.state.collapseTagSize
+        "size": _vm.state.collapseTagSize,
+        "maxWidth": _vm.maxTagWidth
       },
       on: {
         "click": function click($event) {
@@ -355,7 +372,8 @@ var render = function render2() {
           "size": _vm.state.collapseTagSize,
           "hit": item.state ? item.state.hitState : item.hitState,
           "type": _vm.state.getTagType,
-          "disable-transitions": ""
+          "disable-transitions": "",
+          "maxWidth": _vm.maxTagWidth
         },
         on: {
           "close": function close($event) {
@@ -364,8 +382,9 @@ var render = function render2() {
         }
       }, [_c("tiny-tooltip", {
         attrs: {
-          "effect": "light",
-          "placement": "top"
+          "effect": _vm.tooltipConfig.effect || "light",
+          "placement": _vm.tooltipConfig.placement || "top",
+          "popper-class": _vm.tooltipConfig.popperClass || ""
         },
         nativeOn: {
           "mouseenter": function mouseenter($event) {
@@ -400,28 +419,9 @@ var render = function render2() {
         }
       }
     }, [_vm._v(" " + _vm._s(_vm.t("ui.select.collapse")) + " "), _c("icon-chevron-up")], 1) : _vm._e()]], 2) : _vm._e()]) : _c("span", {
-      staticClass: "tiny-base-select__tags-text is-disabled"
-    }, [_c("tiny-tooltip", {
-      attrs: {
-        "effect": "light",
-        "placement": "top",
-        "disabled": !_vm.showTips
-      },
-      scopedSlots: _vm._u([{
-        key: "content",
-        fn: function fn() {
-          return [_c("div", {
-            class: [_vm.state.showTips && "tiny-base-select__show-tips", "tiny-base-select__show-common"]
-          }, [_vm.slots.label ? _c("span", _vm._l(_vm.state.selected, function(item) {
-            return _c("span", {
-              key: _vm.getValueKey(item)
-            }, [_vm._t("label", null, {
-              "item": item
-            })], 2);
-          }), 0) : _c("span", [_vm._v(_vm._s(_vm.disabledTooltipContent || _vm.state.disabledTooltipContent))])])];
-        },
-        proxy: true
-      }], null, true)
+      class: ["tiny-base-select__tags-text", "is-display-only", {
+        "is-disabled": _vm.state.isDisabled
+      }]
     }, [_c("span", _vm._l(_vm.state.selected, function(item) {
       return _c("span", {
         key: item.value
@@ -430,7 +430,7 @@ var render = function render2() {
       }, {
         "item": item
       }), _vm._v("; ")], 2);
-    }), 0)])], 1), _c("input", {
+    }), 0)]), _c("input", {
       directives: [{
         name: "show",
         rawName: "v-show",
@@ -447,8 +447,8 @@ var render = function render2() {
       class: [_vm.state.selectSize ? "is-" + _vm.state.selectSize : ""],
       style: {
         "flex-grow": "1",
-        width: _vm.state.inputLength / (_vm.state.inputWidth - 32) + "%",
-        "max-width": _vm.state.inputWidth - 42 + "px",
+        width: _vm.state.inputWidth > 0 ? _vm.state.inputLength / (_vm.state.inputWidth - 32) + "%" : "auto",
+        "max-width": _vm.state.inputWidth > 0 ? _vm.state.inputWidth - 42 + "px" : "none",
         height: "auto"
       },
       attrs: {
@@ -500,7 +500,9 @@ var render = function render2() {
       class: {
         "is-focus": _vm.state.visible,
         overflow: _vm.state.overflow,
-        "is-show-close": _vm.state.showClose
+        "is-show-close": _vm.state.showClose,
+        "show-copy": _vm.copyable,
+        "show-clear": _vm.clearable
       },
       attrs: {
         "tiny_mode": "pc",
@@ -510,12 +512,14 @@ var render = function render2() {
         "id": _vm.id,
         "autocomplete": _vm.autocomplete,
         "size": _vm.state.selectSize,
+        "showTooltip": false,
         "disabled": _vm.state.selectDisabled,
         "readonly": _vm.state.readonly,
         "display-only": _vm.state.isDisplayOnly,
         "display-only-content": _vm.state.displayOnlyContent,
         "unselectable": _vm.state.readonly ? "on" : "off",
         "validate-event": false,
+        "show-empty-value": _vm.showEmptyValue,
         "input-box-type": _vm.inputBoxType,
         "tabindex": _vm.multiple && _vm.filterable ? "-1" : _vm.tabindex
       },
@@ -564,7 +568,7 @@ var render = function render2() {
       } : null, {
         key: "suffix",
         fn: function fn() {
-          return [_vm._t("suffix"), _vm.showLimitText && _vm.multiple && _vm.multipleLimit ? _c("span", {
+          return [_vm._t("suffix"), _vm.showLimitText && _vm.multiple && _vm.multipleLimit && !_vm.state.showCopy ? _c("span", {
             staticClass: "tiny-base-select__limit-txt"
           }, [_vm._v(" " + _vm._s(_vm.state.selected.length) + "/" + _vm._s(_vm.multipleLimit) + " ")]) : _vm.showProportion && _vm.state.selected.length > 0 && _vm.state.options.length > 1 ? _c("span", {
             staticClass: "tiny-base-select__proportion-txt"
@@ -626,8 +630,8 @@ var render = function render2() {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !_vm.onCopying() && !_vm.hideDrop && _vm.state.visible && _vm.state.emptyText !== false,
-      expression: "!onCopying() && !hideDrop && state.visible && state.emptyText !== false"
+      value: !_vm.onCopying() && !_vm.hideDrop && _vm.state.visible && (_vm.slots.panel || _vm.state.emptyText !== false),
+      expression: "!onCopying() && !hideDrop && state.visible && (slots.panel || state.emptyText !== false)"
     }],
     ref: "popper",
     style: _vm.dropStyle,
@@ -643,7 +647,6 @@ var render = function render2() {
   }, [_c("tiny-input", {
     ref: "input",
     attrs: {
-      "type": "text",
       "placeholder": _vm.placeholder,
       "autofocus": ""
     },
@@ -681,7 +684,7 @@ var render = function render2() {
     },
     on: {
       "update:modelValue": function updateModelValue($event) {
-        return _vm.handleQueryChange(_vm.state.query);
+        return _vm.handleQueryChange(_vm.state.query, false, true);
       }
     },
     scopedSlots: _vm._u([{
@@ -731,7 +734,6 @@ var render = function render2() {
       value: !_vm.state.emptyFlag && !_vm.loading,
       expression: "!state.emptyFlag && !loading"
     }],
-    key: _vm.state.magicKey,
     ref: "scrollbar",
     staticStyle: {
       "height": "100%"
@@ -781,7 +783,7 @@ var render = function render2() {
         })];
       }
     }], null, true)
-  })], 1)] : _vm._e(), !_vm.optimization ? _c("tiny-scrollbar", {
+  })], 1)] : _vm._e(), !_vm.optimization && !(_vm.state.isDisplayOnly && _vm.options) ? _c("tiny-scrollbar", {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -825,10 +827,16 @@ var render = function render2() {
         _vm.state.hoverIndex = -9;
       }
     }
+  }, [_c("span", {
+    staticClass: "tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox"
   }, [_c("icon-" + _vm.state.selectCls, {
     tag: "component",
     class: ["tiny-svg-size", _vm.state.selectCls]
-  }), _c("span", [_vm._v(_vm._s(_vm.allText || _vm.t("ui.base.all")))])], 1) : _vm._e(), _vm.multiple && _vm.showCheck && _vm.showAlloption && !_vm.state.multipleLimit && _vm.state.query && !_vm.state.emptyText && !_vm.remote ? _c("li", {
+  })], 1), _c("div", {
+    staticClass: "tiny-option-wrapper calc-width"
+  }, [_c("span", {
+    staticClass: "tiny-option-label"
+  }, [_vm._v(_vm._s(_vm.allText || _vm.t("ui.base.all")))])])]) : _vm._e(), _vm.multiple && _vm.showCheck && _vm.showAlloption && !_vm.state.multipleLimit && _vm.state.query && !_vm.state.emptyText && !_vm.remote ? _c("li", {
     staticClass: "tiny-option tiny-select-dropdown__item",
     class: [{
       hover: _vm.state.hoverIndex === -9 && _vm.state.filteredSelectCls !== "checked-sur"
@@ -850,10 +858,16 @@ var render = function render2() {
         _vm.state.hoverIndex = -9;
       }
     }
+  }, [_c("span", {
+    staticClass: "tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox"
   }, [_c("icon-" + _vm.state.filteredSelectCls, {
     tag: "component",
     class: ["tiny-svg-size", _vm.state.filteredSelectCls]
-  }), _c("span", [_vm._v(_vm._s(_vm.allText || _vm.t("ui.base.all")))])], 1) : _vm._e(), _vm.state.showNewOption ? _c("tiny-option", {
+  })], 1), _c("div", {
+    staticClass: "tiny-option-wrapper calc-width"
+  }, [_c("span", {
+    staticClass: "tiny-option-label"
+  }, [_vm._v(_vm._s(_vm.allText || _vm.t("ui.base.all")))])])]) : _vm._e(), _vm.state.showNewOption ? _c("tiny-option", {
     attrs: {
       "value": _vm.state.query,
       "created": ""
@@ -885,25 +899,18 @@ var render = function render2() {
   }) : _c("p", {
     staticClass: "tiny-select-dropdown__empty"
   }, [_vm._v(" " + _vm._s(_vm.state.emptyText) + " ")])], 2) : _c("div", {
-    staticClass: "tiny-select-dropdown__loading"
+    staticClass: "tiny-select-dropdown__loading",
+    class: {
+      "show-loading-icon": _vm.loading
+    }
   }, [!_vm.loading ? [_vm.showEmptyImage ? _c("span", {
     staticClass: "tiny-select-dropdown__empty-images"
   }) : _c("span", {
     staticClass: "tiny-select-dropdown__empty"
-  }, [_vm._v(" " + _vm._s(_vm.state.emptyText))])] : _c("svg", {
-    staticClass: "circular",
-    attrs: {
-      "viewBox": "25 25 50 50"
-    }
-  }, [_c("circle", {
-    staticClass: "path",
-    attrs: {
-      "cx": "50",
-      "cy": "50",
-      "r": "24",
-      "fill": "none"
-    }
-  })])], 2)] : _vm._e(), _vm._t("footer")], 2)], 1)], 2), _vm.hoverExpand && !_vm.state.isDisplayOnly ? _c("div", {
+  }, [_vm._v(" " + _vm._s(_vm.state.emptyText))])] : _c(_vm.state.designConfig && _vm.state.designConfig.icons && _vm.state.designConfig.icons.loadingIcon || "icon-loading-shadow", {
+    tag: "component",
+    staticClass: "circular"
+  })], 2)] : _vm._e(), _vm._t("footer")], 2)], 1)], 2), _vm.hoverExpand && !_vm.state.isDisplayOnly ? _c("div", {
     staticClass: "tiny-base-select__placeholder"
   }, [_c("input", {
     staticClass: "tiny-input__inner",

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@opentinyvue/vue-base-select",
   "type": "module",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "dependencies": {
-    "@opentinyvue/vue-button": "~2.27.0",
-    "@opentinyvue/vue-checkbox": "~2.27.0",
-    "@opentinyvue/vue-common": "~2.27.0",
-    "@opentinyvue/vue-directive": "~2.27.0",
-    "@opentinyvue/vue-filter-box": "~2.27.0",
-    "@opentinyvue/vue-icon": "~2.27.0",
-    "@opentinyvue/vue-input": "~2.27.0",
-    "@opentinyvue/vue-locale": "~2.27.0",
-    "@opentinyvue/vue-option": "~2.27.0",
-    "@opentinyvue/vue-recycle-scroller": "~2.27.0",
-    "@opentinyvue/vue-renderless": "~3.27.0",
-    "@opentinyvue/vue-scrollbar": "~2.27.0",
-    "@opentinyvue/vue-select-dropdown": "~2.27.0",
-    "@opentinyvue/vue-tag": "~2.27.0",
-    "@opentinyvue/vue-theme": "~3.27.0",
-    "@opentinyvue/vue-tooltip": "~2.27.0",
-    "@opentinyvue/vue-tree": "~2.27.0"
+    "@opentinyvue/vue-button": "~2.28.0",
+    "@opentinyvue/vue-checkbox": "~2.28.0",
+    "@opentinyvue/vue-common": "~2.28.0",
+    "@opentinyvue/vue-directive": "~2.28.0",
+    "@opentinyvue/vue-filter-box": "~2.28.0",
+    "@opentinyvue/vue-icon": "~2.28.0",
+    "@opentinyvue/vue-input": "~2.28.0",
+    "@opentinyvue/vue-locale": "~2.28.0",
+    "@opentinyvue/vue-option": "~2.28.0",
+    "@opentinyvue/vue-recycle-scroller": "~2.28.0",
+    "@opentinyvue/vue-renderless": "~3.28.0",
+    "@opentinyvue/vue-scrollbar": "~2.28.0",
+    "@opentinyvue/vue-select-dropdown": "~2.28.0",
+    "@opentinyvue/vue-tag": "~2.28.0",
+    "@opentinyvue/vue-theme": "~3.28.0",
+    "@opentinyvue/vue-tooltip": "~2.28.0",
+    "@opentinyvue/vue-tree": "~2.28.0"
   },
   "types": "index.d.ts",
   "scripts": {