element-plus 1.2.0-beta.2 → 1.2.0-beta.6

package/es/components/select-v2/src/select.vue.d.ts

@@ -87,9 +87,10 @@ declare const _default: import("vue").DefineComponent<{
     inputWrapperStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
     popperSize: import("vue").Ref<number>;
     dropdownMenuVisible: import("vue").ComputedRef<boolean>;
+    hasModelValue: import("vue").ComputedRef<boolean>;
     shouldShowPlaceholder: import("vue").ComputedRef<boolean>;
     selectDisabled: import("vue").ComputedRef<boolean | undefined>;
-    selectSize: import("vue").ComputedRef<any>;
+    selectSize: import("vue").ComputedRef<"" | import("../../../utils/types").ComponentSize>;
     showClearBtn: import("vue").ComputedRef<boolean>;
     states: {
         inputValue: string;
@@ -159,7 +160,7 @@ declare const _default: import("vue").DefineComponent<{
     handleCompositionStart: () => void;
     handleCompositionEnd: (event: any) => void;
     handleCompositionUpdate: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "update:modelValue" | "change" | "blur" | "visible-change" | "remove-tag")[], "change" | "clear" | "focus" | "update:modelValue" | "blur" | "visible-change" | "remove-tag", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "blur" | "focus" | "clear" | "visible-change" | "remove-tag")[], "update:modelValue" | "change" | "blur" | "focus" | "clear" | "visible-change" | "remove-tag", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     allowCreate?: unknown;
     autocomplete?: unknown;
     automaticDropdown?: unknown;
@@ -195,16 +196,16 @@ declare const _default: import("vue").DefineComponent<{
     valueKey?: unknown;
     scrollbarAlwaysOn?: unknown;
 } & {
+    disabled: boolean;
+    loading: boolean;
     height: number;
     multiple: boolean;
-    disabled: boolean;
     popperClass: string;
     popperOptions: Partial<import("element-plus/es/components/popper").Options>;
     autocomplete: "none" | "both" | "inline" | "list";
     clearable: boolean;
     valueKey: string;
     popperAppendToBody: boolean;
-    loading: boolean;
     filterable: boolean;
     collapseTags: boolean;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
@@ -217,11 +218,11 @@ declare const _default: import("vue").DefineComponent<{
     itemHeight: number;
     scrollbarAlwaysOn: boolean;
 } & {
-    name?: string | undefined;
     size?: import("../../../utils/types").ComponentSize | undefined;
-    modelValue?: unknown;
-    placeholder?: string | undefined;
+    name?: string | undefined;
+    modelValue?: any;
     label?: string | undefined;
+    placeholder?: string | undefined;
     id?: string | undefined;
     options?: import("./select.types").OptionType<any>[] | undefined;
     filterMethod?: Function | undefined;
@@ -232,23 +233,23 @@ declare const _default: import("vue").DefineComponent<{
     estimatedOptionHeight?: number | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    onClear?: ((...args: any[]) => any) | undefined;
-    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
     "onVisible-change"?: ((...args: any[]) => any) | undefined;
     "onRemove-tag"?: ((...args: any[]) => any) | undefined;
 }, {
+    disabled: boolean;
+    loading: boolean;
     height: number;
     multiple: boolean;
-    disabled: boolean;
     popperClass: string;
     popperOptions: Partial<import("element-plus/es/components/popper").Options>;
     autocomplete: "none" | "both" | "inline" | "list";
     clearable: boolean;
     valueKey: string;
     popperAppendToBody: boolean;
-    loading: boolean;
     filterable: boolean;
     collapseTags: boolean;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;

package/es/components/select-v2/src/select.vue_vue_type_script_lang.mjs

@@ -0,0 +1,50 @@
+import { defineComponent, vModelText, provide, reactive, toRefs } from 'vue';
+import '../../../directives/index.mjs';
+import _Popper from '../../popper/index.mjs';
+import { ElTag } from '../../tag/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../utils/constants.mjs';
+import './select-dropdown.mjs';
+import useSelect from './useSelect.mjs';
+import { selectV2InjectionKey } from './token.mjs';
+import { SelectProps } from './defaults.mjs';
+import script$1 from './select-dropdown.vue_vue_type_script_lang.mjs';
+import ClickOutside from '../../../directives/click-outside/index.mjs';
+
+var script = defineComponent({
+  name: "ElSelectV2",
+  components: {
+    ElSelectMenu: script$1,
+    ElTag,
+    ElPopper: _Popper,
+    ElIcon
+  },
+  directives: { ClickOutside, ModelText: vModelText },
+  props: SelectProps,
+  emits: [
+    UPDATE_MODEL_EVENT,
+    CHANGE_EVENT,
+    "remove-tag",
+    "clear",
+    "visible-change",
+    "focus",
+    "blur"
+  ],
+  setup(props, { emit }) {
+    const API = useSelect(props, emit);
+    provide(selectV2InjectionKey, {
+      props: reactive({
+        ...toRefs(props),
+        height: API.popupHeight
+      }),
+      onSelect: API.onSelect,
+      onHover: API.onHover,
+      onKeyboardNavigate: API.onKeyboardNavigate,
+      onKeyboardSelect: API.onKeyboardSelect
+    });
+    return API;
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=select.vue_vue_type_script_lang.mjs.map

package/es/components/select-v2/src/select.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/select-v2/src/select.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"selectRef\"\n    v-click-outside:[popperRef]=\"handleClickOutside\"\n    :class=\"[selectSize ? 'el-select-v2--' + selectSize : '']\"\n    class=\"el-select-v2\"\n    @click.stop=\"toggleMenu\"\n    @mouseenter=\"states.comboBoxHovering = true\"\n    @mouseleave=\"states.comboBoxHovering = false\"\n  >\n    <el-popper\n      ref=\"popper\"\n      v-model:visible=\"dropdownMenuVisible\"\n      :append-to-body=\"popperAppendToBody\"\n      :popper-class=\"`el-select-v2__popper ${popperClass}`\"\n      :gpu-acceleration=\"false\"\n      :stop-popper-mouse-event=\"false\"\n      :popper-options=\"popperOptions\"\n      :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n      :effect=\"Effect.LIGHT\"\n      manual-mode\n      placement=\"bottom-start\"\n      pure\n      transition=\"el-zoom-in-top\"\n      trigger=\"click\"\n      @before-enter=\"handleMenuEnter\"\n      @after-leave=\"states.inputValue = states.displayInputValue\"\n    >\n      <template #trigger>\n        <div\n          ref=\"selectionRef\"\n          class=\"el-select-v2__wrapper\"\n          :class=\"{\n            'is-focused': states.isComposing,\n            'is-hovering': states.comboBoxHovering,\n            'is-filterable': filterable,\n            'is-disabled': disabled,\n          }\"\n        >\n          <div v-if=\"$slots.prefix\">\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div v-if=\"multiple\" class=\"el-select-v2__selection\">\n            <template v-if=\"collapseTags && modelValue.length > 0\">\n              <div class=\"el-select-v2__selected-item\">\n                <el-tag\n                  :closable=\"\n                    !selectDisabled && !states.cachedOptions[0]?.disable\n                  \"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                  @close=\"deleteTag($event, states.cachedOptions[0])\"\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >{{ states.cachedOptions[0]?.label }}</span\n                  >\n                </el-tag>\n                <el-tag\n                  v-if=\"modelValue.length > 1\"\n                  :closable=\"false\"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >+ {{ modelValue.length - 1 }}</span\n                  >\n                </el-tag>\n              </div>\n            </template>\n\n            <template v-else>\n              <div\n                v-for=\"(selected, idx) in states.cachedOptions\"\n                :key=\"idx\"\n                class=\"el-select-v2__selected-item\"\n              >\n                <el-tag\n                  :key=\"getValueKey(selected)\"\n                  :closable=\"!selectDisabled && !selected.disabled\"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                  @close=\"deleteTag($event, selected)\"\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >{{ getLabel(selected) }}</span\n                  >\n                </el-tag>\n              </div>\n            </template>\n            <div\n              class=\"el-select-v2__selected-item el-select-v2__input-wrapper\"\n              :style=\"inputWrapperStyle\"\n            >\n              <input\n                :id=\"id\"\n                ref=\"inputRef\"\n                v-model-text=\"states.displayInputValue\"\n                :autocomplete=\"autocomplete\"\n                aria-autocomplete=\"list\"\n                aria-haspopup=\"listbox\"\n                autocapitalize=\"off\"\n                :aria-expanded=\"expanded\"\n                :aria-labelledby=\"label\"\n                class=\"el-select-v2__combobox-input\"\n                :class=\"[selectSize ? `is-${selectSize}` : '']\"\n                :disabled=\"disabled\"\n                role=\"combobox\"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :name=\"name\"\n                :unselectable=\"expanded ? 'on' : undefined\"\n                @update:modelValue=\"onUpdateInputValue\"\n                @focus=\"handleFocus\"\n                @input=\"onInput\"\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @keydown.delete.stop=\"handleDel\"\n              />\n              <span\n                v-if=\"filterable\"\n                ref=\"calculatorRef\"\n                aria-hidden=\"true\"\n                class=\"el-select-v2__input-calculator\"\n                v-text=\"states.displayInputValue\"\n              >\n              </span>\n            </div>\n          </div>\n          <template v-else>\n            <div\n              class=\"el-select-v2__selected-item el-select-v2__input-wrapper\"\n            >\n              <input\n                :id=\"id\"\n                ref=\"inputRef\"\n                v-model-text=\"states.displayInputValue\"\n                aria-autocomplete=\"list\"\n                aria-haspopup=\"listbox\"\n                :aria-labelledby=\"label\"\n                :aria-expanded=\"expanded\"\n                autocapitalize=\"off\"\n                :autocomplete=\"autocomplete\"\n                class=\"el-select-v2__combobox-input\"\n                :disabled=\"disabled\"\n                :name=\"name\"\n                role=\"combobox\"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :unselectable=\"expanded ? 'on' : undefined\"\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @focus=\"handleFocus\"\n                @input=\"onInput\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @update:modelValue=\"onUpdateInputValue\"\n              />\n            </div>\n            <span\n              v-if=\"filterable\"\n              ref=\"calculatorRef\"\n              aria-hidden=\"true\"\n              class=\"el-select-v2__selected-item el-select-v2__input-calculator\"\n              v-text=\"states.displayInputValue\"\n            >\n            </span>\n          </template>\n          <span\n            v-if=\"shouldShowPlaceholder\"\n            :class=\"{\n              'el-select-v2__placeholder': true,\n              'is-transparent':\n                states.isComposing ||\n                (placeholder && multiple\n                  ? modelValue.length === 0\n                  : !hasModelValue),\n            }\"\n          >\n            {{ currentPlaceholder }}\n          </span>\n          <span class=\"el-select-v2__suffix\">\n            <el-icon\n              v-if=\"iconComponent\"\n              v-show=\"!showClearBtn\"\n              :class=\"['el-select-v2__caret', 'el-input__icon', iconReverse]\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <el-icon\n              v-if=\"showClearBtn && clearIcon\"\n              class=\"el-select-v2__caret el-input__icon\"\n              @click.prevent.stop=\"handleClear\"\n            >\n              <component :is=\"clearIcon\" />\n            </el-icon>\n          </span>\n        </div>\n      </template>\n      <template #default>\n        <el-select-menu\n          ref=\"menuRef\"\n          :data=\"filteredOptions\"\n          :width=\"popperSize\"\n          :hovering-index=\"states.hoveringIndex\"\n          :scrollbar-always-on=\"scrollbarAlwaysOn\"\n        >\n          <template #default=\"scope\">\n            <slot v-bind=\"scope\"></slot>\n          </template>\n          <template #empty>\n            <slot name=\"empty\">\n              <p class=\"el-select-v2__empty\">\n                {{ emptyText ? emptyText : '' }}\n              </p>\n            </slot>\n          </template>\n        </el-select-menu>\n      </template>\n    </el-popper>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive, vModelText } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElPopper from '@element-plus/components/popper'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport ElSelectMenu from './select-dropdown.vue'\nimport useSelect from './useSelect'\nimport { selectV2InjectionKey } from './token'\nimport { SelectProps } from './defaults'\nexport default defineComponent({\n  name: 'ElSelectV2',\n  components: {\n    ElSelectMenu,\n    ElTag,\n    ElPopper,\n    ElIcon,\n  },\n  directives: { ClickOutside, ModelText: vModelText },\n  props: SelectProps,\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'remove-tag',\n    'clear',\n    'visible-change',\n    'focus',\n    'blur',\n  ],\n\n  setup(props, { emit }) {\n    const API = useSelect(props, emit)\n    // TODO, remove the any cast to align the actual API.\n    provide(selectV2InjectionKey, {\n      props: reactive({\n        ...toRefs(props),\n        height: API.popupHeight,\n      }),\n      onSelect: API.onSelect,\n      onHover: API.onHover,\n      onKeyboardNavigate: API.onKeyboardNavigate,\n      onKeyboardSelect: API.onKeyboardSelect,\n    } as any)\n\n    return API\n  },\n})\n</script>\n"],"names":["ElSelectMenu","ElPopper"],"mappings":";;;;;;;;;;;;;AAkQA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,kBACVA;AAAA,IACA;AAAA,cACAC;AAAA,IACA;AAAA;AAAA,EAEF,YAAY,EAAE,cAAc,WAAW;AAAA,EACvC,OAAO;AAAA,EACP,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,MAAM,UAAU,OAAO;AAE7B,YAAQ,sBAAsB;AAAA,MAC5B,OAAO,SAAS;AAAA,WACX,OAAO;AAAA,QACV,QAAQ,IAAI;AAAA;AAAA,MAEd,UAAU,IAAI;AAAA,MACd,SAAS,IAAI;AAAA,MACb,oBAAoB,IAAI;AAAA,MACxB,kBAAkB,IAAI;AAAA;AAGxB,WAAO;AAAA;AAAA;;;;"}

package/es/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.mjs

@@ -0,0 +1,279 @@
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withModifiers, createVNode, withCtx, createElementVNode, renderSlot, createCommentVNode, normalizeStyle, toDisplayString, createBlock, Fragment, renderList, withKeys, resolveDynamicComponent, vShow, normalizeProps, guardReactiveProps } from 'vue';
+
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = {
+  key: 1,
+  class: "el-select-v2__selection"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "el-select-v2__selected-item"
+};
+const _hoisted_4 = ["id", "autocomplete", "aria-expanded", "aria-labelledby", "disabled", "readonly", "name", "unselectable"];
+const _hoisted_5 = ["textContent"];
+const _hoisted_6 = { class: "el-select-v2__selected-item el-select-v2__input-wrapper" };
+const _hoisted_7 = ["id", "aria-labelledby", "aria-expanded", "autocomplete", "disabled", "name", "readonly", "unselectable"];
+const _hoisted_8 = ["textContent"];
+const _hoisted_9 = { class: "el-select-v2__suffix" };
+const _hoisted_10 = { class: "el-select-v2__empty" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tag = resolveComponent("el-tag");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_el_select_menu = resolveComponent("el-select-menu");
+  const _component_el_popper = resolveComponent("el-popper");
+  const _directive_model_text = resolveDirective("model-text");
+  const _directive_click_outside = resolveDirective("click-outside");
+  return withDirectives((openBlock(), createElementBlock("div", {
+    ref: "selectRef",
+    class: normalizeClass([[_ctx.selectSize ? "el-select-v2--" + _ctx.selectSize : ""], "el-select-v2"]),
+    onClick: _cache[24] || (_cache[24] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])),
+    onMouseenter: _cache[25] || (_cache[25] = ($event) => _ctx.states.comboBoxHovering = true),
+    onMouseleave: _cache[26] || (_cache[26] = ($event) => _ctx.states.comboBoxHovering = false)
+  }, [
+    createVNode(_component_el_popper, {
+      ref: "popper",
+      visible: _ctx.dropdownMenuVisible,
+      "onUpdate:visible": _cache[22] || (_cache[22] = ($event) => _ctx.dropdownMenuVisible = $event),
+      "append-to-body": _ctx.popperAppendToBody,
+      "popper-class": `el-select-v2__popper ${_ctx.popperClass}`,
+      "gpu-acceleration": false,
+      "stop-popper-mouse-event": false,
+      "popper-options": _ctx.popperOptions,
+      "fallback-placements": ["bottom-start", "top-start", "right", "left"],
+      effect: _ctx.Effect.LIGHT,
+      "manual-mode": "",
+      placement: "bottom-start",
+      pure: "",
+      transition: "el-zoom-in-top",
+      trigger: "click",
+      onBeforeEnter: _ctx.handleMenuEnter,
+      onAfterLeave: _cache[23] || (_cache[23] = ($event) => _ctx.states.inputValue = _ctx.states.displayInputValue)
+    }, {
+      trigger: withCtx(() => {
+        var _a;
+        return [
+          createElementVNode("div", {
+            ref: "selectionRef",
+            class: normalizeClass(["el-select-v2__wrapper", {
+              "is-focused": _ctx.states.isComposing,
+              "is-hovering": _ctx.states.comboBoxHovering,
+              "is-filterable": _ctx.filterable,
+              "is-disabled": _ctx.disabled
+            }])
+          }, [
+            _ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_1, [
+              renderSlot(_ctx.$slots, "prefix")
+            ])) : createCommentVNode("v-if", true),
+            _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              _ctx.collapseTags && _ctx.modelValue.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                createVNode(_component_el_tag, {
+                  closable: !_ctx.selectDisabled && !((_a = _ctx.states.cachedOptions[0]) == null ? void 0 : _a.disable),
+                  size: _ctx.collapseTagSize,
+                  type: "info",
+                  "disable-transitions": "",
+                  onClose: _cache[0] || (_cache[0] = ($event) => _ctx.deleteTag($event, _ctx.states.cachedOptions[0]))
+                }, {
+                  default: withCtx(() => {
+                    var _a2;
+                    return [
+                      createElementVNode("span", {
+                        class: "el-select-v2__tags-text",
+                        style: normalizeStyle({
+                          maxWidth: `${_ctx.tagMaxWidth}px`
+                        })
+                      }, toDisplayString((_a2 = _ctx.states.cachedOptions[0]) == null ? void 0 : _a2.label), 5)
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["closable", "size"]),
+                _ctx.modelValue.length > 1 ? (openBlock(), createBlock(_component_el_tag, {
+                  key: 0,
+                  closable: false,
+                  size: _ctx.collapseTagSize,
+                  type: "info",
+                  "disable-transitions": ""
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", {
+                      class: "el-select-v2__tags-text",
+                      style: normalizeStyle({
+                        maxWidth: `${_ctx.tagMaxWidth}px`
+                      })
+                    }, "+ " + toDisplayString(_ctx.modelValue.length - 1), 5)
+                  ]),
+                  _: 1
+                }, 8, ["size"])) : createCommentVNode("v-if", true)
+              ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.states.cachedOptions, (selected, idx) => {
+                return openBlock(), createElementBlock("div", {
+                  key: idx,
+                  class: "el-select-v2__selected-item"
+                }, [
+                  createVNode(_component_el_tag, {
+                    key: _ctx.getValueKey(selected),
+                    closable: !_ctx.selectDisabled && !selected.disabled,
+                    size: _ctx.collapseTagSize,
+                    type: "info",
+                    "disable-transitions": "",
+                    onClose: ($event) => _ctx.deleteTag($event, selected)
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", {
+                        class: "el-select-v2__tags-text",
+                        style: normalizeStyle({
+                          maxWidth: `${_ctx.tagMaxWidth}px`
+                        })
+                      }, toDisplayString(_ctx.getLabel(selected)), 5)
+                    ]),
+                    _: 2
+                  }, 1032, ["closable", "size", "onClose"])
+                ]);
+              }), 128)),
+              createElementVNode("div", {
+                class: "el-select-v2__selected-item el-select-v2__input-wrapper",
+                style: normalizeStyle(_ctx.inputWrapperStyle)
+              }, [
+                withDirectives(createElementVNode("input", {
+                  id: _ctx.id,
+                  ref: "inputRef",
+                  autocomplete: _ctx.autocomplete,
+                  "aria-autocomplete": "list",
+                  "aria-haspopup": "listbox",
+                  autocapitalize: "off",
+                  "aria-expanded": _ctx.expanded,
+                  "aria-labelledby": _ctx.label,
+                  class: normalizeClass(["el-select-v2__combobox-input", [_ctx.selectSize ? `is-${_ctx.selectSize}` : ""]]),
+                  disabled: _ctx.disabled,
+                  role: "combobox",
+                  readonly: !_ctx.filterable,
+                  spellcheck: "false",
+                  type: "text",
+                  name: _ctx.name,
+                  unselectable: _ctx.expanded ? "on" : void 0,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = (...args) => _ctx.onUpdateInputValue && _ctx.onUpdateInputValue(...args)),
+                  onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+                  onInput: _cache[3] || (_cache[3] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+                  onCompositionstart: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
+                  onCompositionupdate: _cache[5] || (_cache[5] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
+                  onCompositionend: _cache[6] || (_cache[6] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
+                  onKeydown: [
+                    _cache[7] || (_cache[7] = withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
+                    _cache[8] || (_cache[8] = withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
+                    _cache[9] || (_cache[9] = withKeys(withModifiers((...args) => _ctx.onKeyboardSelect && _ctx.onKeyboardSelect(...args), ["stop", "prevent"]), ["enter"])),
+                    _cache[10] || (_cache[10] = withKeys(withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"])),
+                    _cache[11] || (_cache[11] = withKeys(withModifiers((...args) => _ctx.handleDel && _ctx.handleDel(...args), ["stop"]), ["delete"]))
+                  ]
+                }, null, 42, _hoisted_4), [
+                  [_directive_model_text, _ctx.states.displayInputValue]
+                ]),
+                _ctx.filterable ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  ref: "calculatorRef",
+                  "aria-hidden": "true",
+                  class: "el-select-v2__input-calculator",
+                  textContent: toDisplayString(_ctx.states.displayInputValue)
+                }, null, 8, _hoisted_5)) : createCommentVNode("v-if", true)
+              ], 4)
+            ])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              createElementVNode("div", _hoisted_6, [
+                withDirectives(createElementVNode("input", {
+                  id: _ctx.id,
+                  ref: "inputRef",
+                  "aria-autocomplete": "list",
+                  "aria-haspopup": "listbox",
+                  "aria-labelledby": _ctx.label,
+                  "aria-expanded": _ctx.expanded,
+                  autocapitalize: "off",
+                  autocomplete: _ctx.autocomplete,
+                  class: "el-select-v2__combobox-input",
+                  disabled: _ctx.disabled,
+                  name: _ctx.name,
+                  role: "combobox",
+                  readonly: !_ctx.filterable,
+                  spellcheck: "false",
+                  type: "text",
+                  unselectable: _ctx.expanded ? "on" : void 0,
+                  onCompositionstart: _cache[12] || (_cache[12] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
+                  onCompositionupdate: _cache[13] || (_cache[13] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
+                  onCompositionend: _cache[14] || (_cache[14] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
+                  onFocus: _cache[15] || (_cache[15] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+                  onInput: _cache[16] || (_cache[16] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+                  onKeydown: [
+                    _cache[17] || (_cache[17] = withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
+                    _cache[18] || (_cache[18] = withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
+                    _cache[19] || (_cache[19] = withKeys(withModifiers((...args) => _ctx.onKeyboardSelect && _ctx.onKeyboardSelect(...args), ["stop", "prevent"]), ["enter"])),
+                    _cache[20] || (_cache[20] = withKeys(withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"]))
+                  ],
+                  "onUpdate:modelValue": _cache[21] || (_cache[21] = (...args) => _ctx.onUpdateInputValue && _ctx.onUpdateInputValue(...args))
+                }, null, 40, _hoisted_7), [
+                  [_directive_model_text, _ctx.states.displayInputValue]
+                ])
+              ]),
+              _ctx.filterable ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                ref: "calculatorRef",
+                "aria-hidden": "true",
+                class: "el-select-v2__selected-item el-select-v2__input-calculator",
+                textContent: toDisplayString(_ctx.states.displayInputValue)
+              }, null, 8, _hoisted_8)) : createCommentVNode("v-if", true)
+            ], 64)),
+            _ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("span", {
+              key: 3,
+              class: normalizeClass({
+                "el-select-v2__placeholder": true,
+                "is-transparent": _ctx.states.isComposing || (_ctx.placeholder && _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.hasModelValue)
+              })
+            }, toDisplayString(_ctx.currentPlaceholder), 3)) : createCommentVNode("v-if", true),
+            createElementVNode("span", _hoisted_9, [
+              _ctx.iconComponent ? withDirectives((openBlock(), createBlock(_component_el_icon, {
+                key: 0,
+                class: normalizeClass(["el-select-v2__caret", "el-input__icon", _ctx.iconReverse])
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
+                ]),
+                _: 1
+              }, 8, ["class"])), [
+                [vShow, !_ctx.showClearBtn]
+              ]) : createCommentVNode("v-if", true),
+              _ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
+                key: 1,
+                class: "el-select-v2__caret el-input__icon",
+                onClick: withModifiers(_ctx.handleClear, ["prevent", "stop"])
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
+                ]),
+                _: 1
+              }, 8, ["onClick"])) : createCommentVNode("v-if", true)
+            ])
+          ], 2)
+        ];
+      }),
+      default: withCtx(() => [
+        createVNode(_component_el_select_menu, {
+          ref: "menuRef",
+          data: _ctx.filteredOptions,
+          width: _ctx.popperSize,
+          "hovering-index": _ctx.states.hoveringIndex,
+          "scrollbar-always-on": _ctx.scrollbarAlwaysOn
+        }, {
+          default: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(scope)))
+          ]),
+          empty: withCtx(() => [
+            renderSlot(_ctx.$slots, "empty", {}, () => [
+              createElementVNode("p", _hoisted_10, toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 1)
+            ])
+          ]),
+          _: 3
+        }, 8, ["data", "width", "hovering-index", "scrollbar-always-on"])
+      ]),
+      _: 3
+    }, 8, ["visible", "append-to-body", "popper-class", "popper-options", "effect", "onBeforeEnter"])
+  ], 34)), [
+    [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
+  ]);
+}
+
+export { render };
+//# sourceMappingURL=select.vue_vue_type_template_id_13e598a4_lang.mjs.map

package/es/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.vue_vue_type_template_id_13e598a4_lang.mjs","sources":["../../../../../../packages/components/select-v2/src/select.vue?vue&type=template&id=13e598a4&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"selectRef\"\n    v-click-outside:[popperRef]=\"handleClickOutside\"\n    :class=\"[selectSize ? 'el-select-v2--' + selectSize : '']\"\n    class=\"el-select-v2\"\n    @click.stop=\"toggleMenu\"\n    @mouseenter=\"states.comboBoxHovering = true\"\n    @mouseleave=\"states.comboBoxHovering = false\"\n  >\n    <el-popper\n      ref=\"popper\"\n      v-model:visible=\"dropdownMenuVisible\"\n      :append-to-body=\"popperAppendToBody\"\n      :popper-class=\"`el-select-v2__popper ${popperClass}`\"\n      :gpu-acceleration=\"false\"\n      :stop-popper-mouse-event=\"false\"\n      :popper-options=\"popperOptions\"\n      :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n      :effect=\"Effect.LIGHT\"\n      manual-mode\n      placement=\"bottom-start\"\n      pure\n      transition=\"el-zoom-in-top\"\n      trigger=\"click\"\n      @before-enter=\"handleMenuEnter\"\n      @after-leave=\"states.inputValue = states.displayInputValue\"\n    >\n      <template #trigger>\n        <div\n          ref=\"selectionRef\"\n          class=\"el-select-v2__wrapper\"\n          :class=\"{\n            'is-focused': states.isComposing,\n            'is-hovering': states.comboBoxHovering,\n            'is-filterable': filterable,\n            'is-disabled': disabled,\n          }\"\n        >\n          <div v-if=\"$slots.prefix\">\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div v-if=\"multiple\" class=\"el-select-v2__selection\">\n            <template v-if=\"collapseTags && modelValue.length > 0\">\n              <div class=\"el-select-v2__selected-item\">\n                <el-tag\n                  :closable=\"\n                    !selectDisabled && !states.cachedOptions[0]?.disable\n                  \"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                  @close=\"deleteTag($event, states.cachedOptions[0])\"\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >{{ states.cachedOptions[0]?.label }}</span\n                  >\n                </el-tag>\n                <el-tag\n                  v-if=\"modelValue.length > 1\"\n                  :closable=\"false\"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >+ {{ modelValue.length - 1 }}</span\n                  >\n                </el-tag>\n              </div>\n            </template>\n\n            <template v-else>\n              <div\n                v-for=\"(selected, idx) in states.cachedOptions\"\n                :key=\"idx\"\n                class=\"el-select-v2__selected-item\"\n              >\n                <el-tag\n                  :key=\"getValueKey(selected)\"\n                  :closable=\"!selectDisabled && !selected.disabled\"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                  @close=\"deleteTag($event, selected)\"\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >{{ getLabel(selected) }}</span\n                  >\n                </el-tag>\n              </div>\n            </template>\n            <div\n              class=\"el-select-v2__selected-item el-select-v2__input-wrapper\"\n              :style=\"inputWrapperStyle\"\n            >\n              <input\n                :id=\"id\"\n                ref=\"inputRef\"\n                v-model-text=\"states.displayInputValue\"\n                :autocomplete=\"autocomplete\"\n                aria-autocomplete=\"list\"\n                aria-haspopup=\"listbox\"\n                autocapitalize=\"off\"\n                :aria-expanded=\"expanded\"\n                :aria-labelledby=\"label\"\n                class=\"el-select-v2__combobox-input\"\n                :class=\"[selectSize ? `is-${selectSize}` : '']\"\n                :disabled=\"disabled\"\n                role=\"combobox\"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :name=\"name\"\n                :unselectable=\"expanded ? 'on' : undefined\"\n                @update:modelValue=\"onUpdateInputValue\"\n                @focus=\"handleFocus\"\n                @input=\"onInput\"\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @keydown.delete.stop=\"handleDel\"\n              />\n              <span\n                v-if=\"filterable\"\n                ref=\"calculatorRef\"\n                aria-hidden=\"true\"\n                class=\"el-select-v2__input-calculator\"\n                v-text=\"states.displayInputValue\"\n              >\n              </span>\n            </div>\n          </div>\n          <template v-else>\n            <div\n              class=\"el-select-v2__selected-item el-select-v2__input-wrapper\"\n            >\n              <input\n                :id=\"id\"\n                ref=\"inputRef\"\n                v-model-text=\"states.displayInputValue\"\n                aria-autocomplete=\"list\"\n                aria-haspopup=\"listbox\"\n                :aria-labelledby=\"label\"\n                :aria-expanded=\"expanded\"\n                autocapitalize=\"off\"\n                :autocomplete=\"autocomplete\"\n                class=\"el-select-v2__combobox-input\"\n                :disabled=\"disabled\"\n                :name=\"name\"\n                role=\"combobox\"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :unselectable=\"expanded ? 'on' : undefined\"\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @focus=\"handleFocus\"\n                @input=\"onInput\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @update:modelValue=\"onUpdateInputValue\"\n              />\n            </div>\n            <span\n              v-if=\"filterable\"\n              ref=\"calculatorRef\"\n              aria-hidden=\"true\"\n              class=\"el-select-v2__selected-item el-select-v2__input-calculator\"\n              v-text=\"states.displayInputValue\"\n            >\n            </span>\n          </template>\n          <span\n            v-if=\"shouldShowPlaceholder\"\n            :class=\"{\n              'el-select-v2__placeholder': true,\n              'is-transparent':\n                states.isComposing ||\n                (placeholder && multiple\n                  ? modelValue.length === 0\n                  : !hasModelValue),\n            }\"\n          >\n            {{ currentPlaceholder }}\n          </span>\n          <span class=\"el-select-v2__suffix\">\n            <el-icon\n              v-if=\"iconComponent\"\n              v-show=\"!showClearBtn\"\n              :class=\"['el-select-v2__caret', 'el-input__icon', iconReverse]\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <el-icon\n              v-if=\"showClearBtn && clearIcon\"\n              class=\"el-select-v2__caret el-input__icon\"\n              @click.prevent.stop=\"handleClear\"\n            >\n              <component :is=\"clearIcon\" />\n            </el-icon>\n          </span>\n        </div>\n      </template>\n      <template #default>\n        <el-select-menu\n          ref=\"menuRef\"\n          :data=\"filteredOptions\"\n          :width=\"popperSize\"\n          :hovering-index=\"states.hoveringIndex\"\n          :scrollbar-always-on=\"scrollbarAlwaysOn\"\n        >\n          <template #default=\"scope\">\n            <slot v-bind=\"scope\"></slot>\n          </template>\n          <template #empty>\n            <slot name=\"empty\">\n              <p class=\"el-select-v2__empty\">\n                {{ emptyText ? emptyText : '' }}\n              </p>\n            </slot>\n          </template>\n        </el-select-menu>\n      </template>\n    </el-popper>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive, vModelText } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElPopper from '@element-plus/components/popper'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport ElSelectMenu from './select-dropdown.vue'\nimport useSelect from './useSelect'\nimport { selectV2InjectionKey } from './token'\nimport { SelectProps } from './defaults'\nexport default defineComponent({\n  name: 'ElSelectV2',\n  components: {\n    ElSelectMenu,\n    ElTag,\n    ElPopper,\n    ElIcon,\n  },\n  directives: { ClickOutside, ModelText: vModelText },\n  props: SelectProps,\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'remove-tag',\n    'clear',\n    'visible-change',\n    'focus',\n    'blur',\n  ],\n\n  setup(props, { emit }) {\n    const API = useSelect(props, emit)\n    // TODO, remove the any cast to align the actual API.\n    provide(selectV2InjectionKey, {\n      props: reactive({\n        ...toRefs(props),\n        height: API.popupHeight,\n      }),\n      onSelect: API.onSelect,\n      onHover: API.onHover,\n      onKeyboardNavigate: API.onKeyboardNavigate,\n      onKeyboardSelect: API.onKeyboardSelect,\n    } as any)\n\n    return API\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_createElementVNode","_renderSlot","_createBlock","_toDisplayString"],"mappings":"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"}

package/es/components/select-v2/src/useSelect.d.ts

@@ -15,9 +15,10 @@ declare const useSelect: (props: ExtractPropTypes<typeof SelectProps>, emit: any
     inputWrapperStyle: import("vue").ComputedRef<CSSProperties>;
     popperSize: import("vue").Ref<number>;
     dropdownMenuVisible: import("vue").ComputedRef<boolean>;
+    hasModelValue: import("vue").ComputedRef<boolean>;
     shouldShowPlaceholder: import("vue").ComputedRef<boolean>;
     selectDisabled: import("vue").ComputedRef<boolean | undefined>;
-    selectSize: import("vue").ComputedRef<any>;
+    selectSize: import("vue").ComputedRef<"" | import("../../../utils/types").ComponentSize>;
     showClearBtn: import("vue").ComputedRef<boolean>;
     states: {
         inputValue: string;

package/es/components/select-v2/src/useSelect.mjs

@@ -6,14 +6,15 @@ import '../../../tokens/index.mjs';
 import '../../../hooks/index.mjs';
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
 import { addResizeListener, removeResizeListener } from '../../../utils/resize-event.mjs';
-import { useGlobalConfig, getValueByPath } from '../../../utils/util.mjs';
+import { getValueByPath } from '../../../utils/util.mjs';
 import '../../popper/index.mjs';
-import { ArrowUp } from '@element-plus/icons';
+import { ArrowUp } from '@element-plus/icons-vue';
 import { useAllowCreate } from './useAllowCreate.mjs';
 import { flattenOptions } from './util.mjs';
 import { useInput } from './useInput.mjs';
-import { useLocaleInject } from '../../../hooks/use-locale/index.mjs';
-import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { elFormKey } from '../../../tokens/form.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 import { Effect } from '../../popper/src/use-popper/defaults.mjs';
 
 const DEFAULT_INPUT_PLACEHOLDER = "";
@@ -23,10 +24,8 @@ const TAG_BASE_WIDTH = {
   mini: 33
 };
 const useSelect = (props, emit) => {
-  const { t } = useLocaleInject();
+  const { t } = useLocale();
   const elForm = inject(elFormKey, {});
-  const elFormItem = inject(elFormItemKey, {});
-  const $ELEMENT = useGlobalConfig();
   const states = reactive({
     inputValue: DEFAULT_INPUT_PLACEHOLDER,
     displayInputValue: DEFAULT_INPUT_PLACEHOLDER,
@@ -67,8 +66,11 @@ const useSelect = (props, emit) => {
     const totalHeight = filteredOptions.value.length * 34;
     return totalHeight > props.height ? props.height : totalHeight;
   });
+  const hasModelValue = computed(() => {
+    return props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
+  });
   const showClearBtn = computed(() => {
-    const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
+    const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : hasModelValue.value;
     const criteria = props.clearable && !selectDisabled.value && states.comboBoxHovering && hasValue;
     return criteria;
   });
@@ -118,7 +120,7 @@ const useSelect = (props, emit) => {
     }).filter((v) => v !== null));
   });
   const optionsAllDisabled = computed(() => filteredOptions.value.every((option) => option.disabled));
-  const selectSize = computed(() => props.size || elFormItem.size || $ELEMENT.size);
+  const selectSize = useSize();
   const collapseTagSize = computed(() => ["small", "mini"].indexOf(selectSize.value) > -1 ? "mini" : "small");
   const tagMaxWidth = computed(() => {
     const select = selectionRef.value;
@@ -510,7 +512,7 @@ const useSelect = (props, emit) => {
         states.cachedOptions = [];
       }
     } else {
-      if (props.modelValue) {
+      if (hasModelValue.value) {
         const options = filteredOptions.value;
         const selectedItemIndex = options.findIndex((option) => getValueKey(option) === props.modelValue);
         if (~selectedItemIndex) {
@@ -573,6 +575,7 @@ const useSelect = (props, emit) => {
     inputWrapperStyle,
     popperSize,
     dropdownMenuVisible,
+    hasModelValue,
     shouldShowPlaceholder,
     selectDisabled,
     selectSize,