npm - @element-plus/nightly - Versions diffs - 0.0.20220105 → 0.0.20220109 - Mend

@element-plus/nightly 0.0.20220105 → 0.0.20220109

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

Files changed (380) hide show

package/es/components/select/src/select.vue_vue_type_template_id_33774f85_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.vue_vue_type_template_id_33774f85_lang.mjs","sources":["../../../../../../packages/components/select/src/select.vue?vue&type=template&id=33774f85&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"selectWrapper\"\n v-click-outside:[popperPaneRef]=\"handleClose\"\n :class=\"wrapperKls\"\n @click.stop=\"toggleMenu\"\n >\n <el-tooltip\n ref=\"tooltipRef\"\n v-model:visible=\"dropMenuVisible\"\n placement=\"bottom-start\"\n :append-to-body=\"popperAppendToBody\"\n :popper-class=\"`el-select__popper ${popperClass}`\"\n :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n effect=\"light\"\n pure\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n :stop-popper-mouse-event=\"false\"\n :gpu-acceleration=\"false\"\n @show=\"handleMenuEnter\"\n >\n <template #default>\n <div class=\"select-trigger\">\n <div\n v-if=\"multiple\"\n ref=\"tags\"\n class=\"el-select__tags\"\n :style=\"selectTagsStyle\"\n >\n <span v-if=\"collapseTags && selected.length\">\n <el-tag\n :closable=\"!selectDisabled && !selected[0].isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"selected[0].hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, selected[0])\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 123 + 'px' }\"\n >{{ selected[0].currentLabel }}</span\n >\n </el-tag>\n <el-tag\n v-if=\"selected.length > 1\"\n :closable=\"false\"\n :size=\"collapseTagSize\"\n :type=\"tagType\"\n disable-transitions\n >\n <span class=\"el-select__tags-text\"\n >+ {{ selected.length - 1 }}</span\n >\n </el-tag>\n </span>\n <!-- <div> -->\n <transition v-if=\"!collapseTags\" @after-leave=\"resetInputHeight\">\n <span\n :style=\"{\n marginLeft:\n prefixWidth && selected.length ? `${prefixWidth}px` : null,\n }\"\n >\n <el-tag\n v-for=\"item in selected\"\n :key=\"getValueKey(item)\"\n :closable=\"!selectDisabled && !item.isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"item.hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, item)\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 75 + 'px' }\"\n >{{ item.currentLabel }}</span\n >\n </el-tag>\n </span>\n </transition>\n <!-- </div> -->\n <input\n v-if=\"filterable\"\n ref=\"input\"\n v-model=\"query\"\n type=\"text\"\n class=\"el-select__input\"\n :class=\"[selectSize ? `is-${selectSize}` : '']\"\n :disabled=\"selectDisabled\"\n :autocomplete=\"autocomplete\"\n :style=\"{\n marginLeft:\n (prefixWidth && !selected.length) \|\| tagInMultiLine\n ? `${prefixWidth}px`\n : null,\n flexGrow: '1',\n width: `${inputLength / (inputWidth - 32)}%`,\n maxWidth: `${inputWidth - 42}px`,\n }\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @keyup=\"managePlaceholder\"\n @keydown=\"resetInputState\"\n @keydown.down.prevent=\"navigateOptions('next')\"\n @keydown.up.prevent=\"navigateOptions('prev')\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.delete=\"deletePrevTag\"\n @keydown.tab=\"visible = false\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @input=\"debouncedQueryChange\"\n />\n </div>\n <el-input\n :id=\"id\"\n ref=\"reference\"\n v-model=\"selectedLabel\"\n type=\"text\"\n :placeholder=\"currentPlaceholder\"\n :name=\"name\"\n :autocomplete=\"autocomplete\"\n :size=\"selectSize\"\n :disabled=\"selectDisabled\"\n :readonly=\"readonly\"\n :validate-event=\"false\"\n :class=\"{ 'is-focus': visible }\"\n :tabindex=\"multiple && filterable ? -1 : undefined\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @input=\"debouncedOnInputChange\"\n @paste=\"debouncedOnInputChange\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @keydown.down.stop.prevent=\"navigateOptions('next')\"\n @keydown.up.stop.prevent=\"navigateOptions('prev')\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.tab=\"visible = false\"\n @mouseenter=\"inputHovering = true\"\n @mouseleave=\"inputHovering = false\"\n >\n <template v-if=\"$slots.prefix\" #prefix>\n <div\n style=\"\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n \"\n >\n <slot name=\"prefix\"></slot>\n </div>\n </template>\n <template #suffix>\n <el-icon\n v-if=\"iconComponent\"\n v-show=\"!showClose\"\n :class=\"['el-select__caret', 'el-input__icon', iconReverse]\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <el-icon\n v-if=\"showClose && clearIcon\"\n class=\"el-select__caret el-input__icon\"\n @click=\"handleClearClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </template>\n </el-input>\n </div>\n </template>\n <template #content>\n <el-select-menu>\n <el-scrollbar\n v-show=\"options.size > 0 && !loading\"\n ref=\"scrollbar\"\n tag=\"ul\"\n wrap-class=\"el-select-dropdown__wrap\"\n view-class=\"el-select-dropdown__list\"\n :class=\"{\n 'is-empty': !allowCreate && query && filteredOptionsCount === 0,\n }\"\n >\n <el-option v-if=\"showNewOption\" :value=\"query\" :created=\"true\" />\n <slot></slot>\n </el-scrollbar>\n <template\n v-if=\"\n emptyText &&\n (!allowCreate \|\| loading \|\| (allowCreate && options.size === 0))\n \"\n >\n <slot v-if=\"$slots.empty\" name=\"empty\"></slot>\n <p v-else class=\"el-select-dropdown__empty\">\n {{ emptyText }}\n </p>\n </template>\n </el-select-menu>\n </template>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n toRefs,\n defineComponent,\n onMounted,\n onBeforeUnmount,\n nextTick,\n reactive,\n provide,\n computed,\n unref,\n} from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useFocus, useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\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 {\n addResizeListener,\n removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose, ArrowUp } from '@element-plus/icons-vue'\nimport ElOption from './option.vue'\nimport ElSelectMenu from './select-dropdown.vue'\nimport { useSelect, useSelectStates } from './useSelect'\nimport { selectKey } from './token'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { SelectContext } from './token'\n\nexport default defineComponent({\n name: 'ElSelect',\n componentName: 'ElSelect',\n components: {\n ElInput,\n ElSelectMenu,\n ElOption,\n ElTag,\n ElScrollbar,\n ElTooltip,\n ElIcon,\n },\n directives: { ClickOutside },\n props: {\n name: String,\n id: String,\n modelValue: {\n type: [Array, String, Number, Boolean, Object],\n default: undefined,\n },\n autocomplete: {\n type: String,\n default: 'off',\n },\n automaticDropdown: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n disabled: Boolean,\n clearable: Boolean,\n filterable: Boolean,\n allowCreate: Boolean,\n loading: Boolean,\n popperClass: {\n type: String,\n default: '',\n },\n remote: Boolean,\n loadingText: String,\n noMatchText: String,\n noDataText: String,\n remoteMethod: Function,\n filterMethod: Function,\n multiple: Boolean,\n multipleLimit: {\n type: Number,\n default: 0,\n },\n placeholder: {\n type: String,\n },\n defaultFirstOption: Boolean,\n reserveKeyword: Boolean,\n valueKey: {\n type: String,\n default: 'value',\n },\n collapseTags: Boolean,\n popperAppendToBody: {\n type: Boolean,\n default: true,\n },\n clearIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: CircleClose,\n },\n fitInputWidth: {\n type: Boolean,\n default: false,\n },\n suffixIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: ArrowUp,\n },\n tagType: {\n type: String,\n default: 'info',\n },\n },\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, ctx) {\n const { t } = useLocale()\n const states = useSelectStates(props)\n const {\n optionsArray,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n setSelected,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n onOptionCreate,\n onOptionDestroy,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n\n reference,\n input,\n tooltipRef,\n tags,\n selectWrapper,\n scrollbar,\n queryChange,\n groupQueryChange,\n } = useSelect(props, states, ctx)\n\n const { focus } = useFocus(reference)\n\n const {\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n cachedOptions,\n optionsCount,\n prefixWidth,\n tagInMultiLine,\n } = toRefs(states)\n\n const wrapperKls = computed(() => {\n const classList = ['el-select']\n const _selectSize = unref(selectSize)\n if (_selectSize) {\n classList.push(`el-select--${_selectSize}`)\n }\n return classList\n })\n\n const selectTagsStyle = computed(() => ({\n maxWidth: `${unref(inputWidth) - 32}px`,\n width: '100%',\n }))\n\n provide(\n selectKey,\n reactive({\n props,\n options,\n optionsArray,\n cachedOptions,\n optionsCount,\n filteredOptionsCount,\n hoverIndex,\n handleOptionSelect,\n onOptionCreate,\n onOptionDestroy,\n selectWrapper,\n selected,\n setSelected,\n queryChange,\n groupQueryChange,\n }) as unknown as SelectContext\n )\n\n onMounted(() => {\n states.cachedPlaceHolder = currentPlaceholder.value =\n props.placeholder \|\| t('el.select.placeholder')\n if (\n props.multiple &&\n Array.isArray(props.modelValue) &&\n props.modelValue.length > 0\n ) {\n currentPlaceholder.value = ''\n }\n addResizeListener(selectWrapper.value as any, handleResize)\n if (reference.value && reference.value.$el) {\n const sizeMap = {\n large: 36,\n default: 32,\n small: 28,\n }\n const input = reference.value.input as HTMLInputElement\n states.initialInputHeight =\n input.getBoundingClientRect().height \|\| sizeMap[selectSize.value]\n }\n if (props.remote && props.multiple) {\n resetInputHeight()\n }\n nextTick(() => {\n if (!reference.value) return\n if (reference.value.$el) {\n inputWidth.value = reference.value.$el.getBoundingClientRect().width\n }\n if (ctx.slots.prefix) {\n const inputChildNodes = reference.value.$el.childNodes\n const input = (Array.from(inputChildNodes) as HTMLElement[]).filter(\n (item) => item.tagName === 'INPUT'\n )[0]\n const prefix = reference.value.$el.querySelector('.el-input__prefix')\n prefixWidth.value = Math.max(\n prefix.getBoundingClientRect().width + 5,\n 30\n )\n if (states.prefixWidth) {\n input.style.paddingLeft = `${Math.max(states.prefixWidth, 30)}px`\n }\n }\n })\n setSelected()\n })\n\n onBeforeUnmount(() => {\n removeResizeListener(selectWrapper.value as any, handleResize)\n })\n\n if (props.multiple && !Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, [])\n }\n if (!props.multiple && Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, '')\n }\n\n const popperPaneRef = computed(() => {\n return tooltipRef.value?.popperRef?.contentRef\n })\n\n return {\n tagInMultiLine,\n prefixWidth,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n focus,\n\n reference,\n input,\n tooltipRef,\n popperPaneRef,\n tags,\n selectWrapper,\n scrollbar,\n\n wrapperKls,\n selectTagsStyle,\n }\n },\n})\n</script>\n"],"names":["_createVNode","_createCommentVNode","_withModifiers","_withDirectives","_createBlock"],"mappings":";;;qBAuBa,KAAK;;;;;;;EAiLI;;;;;;;;;;;;;;;IApMjBA;WACK;;;MAGJ;MACQ;;MACR;MACC;MACA;MACA;MACD;MACA;MACA;MACA,YAAW;;MAEV,iBAAgB;;;;;;;;gBAOX;;gBAEC;;sCAE2B;;;gCAEf,sDAA4C;;;;;qEAK7C,eAAU;;;;iCAGX;4BACJ;;;;;qCAKY;;;qCACJ;;;;;;8BAKX,yCACK;;;;;;;;;;;;;;;+BAOC;;;;;;iDAKN;iCAEM;gEAC2B;;;;8BAI/B;;;;;kCAIE,KAAKC;;uDAEI;;;;;;;;;;gBAKjB;;;;;;;;sBAQG,QAAQ;sBACR,cAAc;sBACd;;;;;;;;;6BASK;;;;;;;;;;;;sBAUL;;sBAEA;sBACA;;;;;;;;YAIF;YACD;;;YAEA;uBACY;;uBAECC,kBAAc;;oBAElB;;YAER,uBAAqB;YACrB;;YAEA;kBACI,iBAAYC;mBACX,EAAE;qBACA;;gCAEY;;;;;;;;;;;;;gCAwBGC;;;oBAElB;;;;;;;;;;eAKK;;;;;;;;;;;;;;;;;+BArB4B;;;;;;;;;;;aA+B1B;;;;;cAKZ;;;;;;;;;;;;"}
1	+ {"version":3,"file":"select.vue_vue_type_template_id_33774f85_lang.mjs","sources":["../../../../../../packages/components/select/src/select.vue?vue&type=template&id=33774f85&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"selectWrapper\"\n v-click-outside:[popperPaneRef]=\"handleClose\"\n :class=\"wrapperKls\"\n @click.stop=\"toggleMenu\"\n >\n <el-tooltip\n ref=\"tooltipRef\"\n v-model:visible=\"dropMenuVisible\"\n placement=\"bottom-start\"\n :append-to-body=\"popperAppendToBody\"\n :popper-class=\"`el-select__popper ${popperClass}`\"\n :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n effect=\"light\"\n pure\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n :stop-popper-mouse-event=\"false\"\n :gpu-acceleration=\"false\"\n persistent\n @show=\"handleMenuEnter\"\n >\n <template #default>\n <div class=\"select-trigger\">\n <div\n v-if=\"multiple\"\n ref=\"tags\"\n class=\"el-select__tags\"\n :style=\"selectTagsStyle\"\n >\n <span v-if=\"collapseTags && selected.length\">\n <el-tag\n :closable=\"!selectDisabled && !selected[0].isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"selected[0].hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, selected[0])\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 123 + 'px' }\"\n >{{ selected[0].currentLabel }}</span\n >\n </el-tag>\n <el-tag\n v-if=\"selected.length > 1\"\n :closable=\"false\"\n :size=\"collapseTagSize\"\n :type=\"tagType\"\n disable-transitions\n >\n <span class=\"el-select__tags-text\"\n >+ {{ selected.length - 1 }}</span\n >\n </el-tag>\n </span>\n <!-- <div> -->\n <transition v-if=\"!collapseTags\" @after-leave=\"resetInputHeight\">\n <span\n :style=\"{\n marginLeft:\n prefixWidth && selected.length ? `${prefixWidth}px` : null,\n }\"\n >\n <el-tag\n v-for=\"item in selected\"\n :key=\"getValueKey(item)\"\n :closable=\"!selectDisabled && !item.isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"item.hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, item)\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 75 + 'px' }\"\n >{{ item.currentLabel }}</span\n >\n </el-tag>\n </span>\n </transition>\n <!-- </div> -->\n <input\n v-if=\"filterable\"\n ref=\"input\"\n v-model=\"query\"\n type=\"text\"\n class=\"el-select__input\"\n :class=\"[selectSize ? `is-${selectSize}` : '']\"\n :disabled=\"selectDisabled\"\n :autocomplete=\"autocomplete\"\n :style=\"{\n marginLeft:\n (prefixWidth && !selected.length) \|\| tagInMultiLine\n ? `${prefixWidth}px`\n : null,\n flexGrow: '1',\n width: `${inputLength / (inputWidth - 32)}%`,\n maxWidth: `${inputWidth - 42}px`,\n }\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @keyup=\"managePlaceholder\"\n @keydown=\"resetInputState\"\n @keydown.down.prevent=\"navigateOptions('next')\"\n @keydown.up.prevent=\"navigateOptions('prev')\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.delete=\"deletePrevTag\"\n @keydown.tab=\"visible = false\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @input=\"debouncedQueryChange\"\n />\n </div>\n <el-input\n :id=\"id\"\n ref=\"reference\"\n v-model=\"selectedLabel\"\n type=\"text\"\n :placeholder=\"currentPlaceholder\"\n :name=\"name\"\n :autocomplete=\"autocomplete\"\n :size=\"selectSize\"\n :disabled=\"selectDisabled\"\n :readonly=\"readonly\"\n :validate-event=\"false\"\n :class=\"{ 'is-focus': visible }\"\n :tabindex=\"multiple && filterable ? -1 : undefined\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @input=\"debouncedOnInputChange\"\n @paste=\"debouncedOnInputChange\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @keydown.down.stop.prevent=\"navigateOptions('next')\"\n @keydown.up.stop.prevent=\"navigateOptions('prev')\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.tab=\"visible = false\"\n @mouseenter=\"inputHovering = true\"\n @mouseleave=\"inputHovering = false\"\n >\n <template v-if=\"$slots.prefix\" #prefix>\n <div\n style=\"\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n \"\n >\n <slot name=\"prefix\"></slot>\n </div>\n </template>\n <template #suffix>\n <el-icon\n v-if=\"iconComponent\"\n v-show=\"!showClose\"\n :class=\"['el-select__caret', 'el-input__icon', iconReverse]\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <el-icon\n v-if=\"showClose && clearIcon\"\n class=\"el-select__caret el-input__icon\"\n @click=\"handleClearClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </template>\n </el-input>\n </div>\n </template>\n <template #content>\n <el-select-menu>\n <el-scrollbar\n v-show=\"options.size > 0 && !loading\"\n ref=\"scrollbar\"\n tag=\"ul\"\n wrap-class=\"el-select-dropdown__wrap\"\n view-class=\"el-select-dropdown__list\"\n :class=\"{\n 'is-empty': !allowCreate && query && filteredOptionsCount === 0,\n }\"\n >\n <el-option v-if=\"showNewOption\" :value=\"query\" :created=\"true\" />\n <slot></slot>\n </el-scrollbar>\n <template\n v-if=\"\n emptyText &&\n (!allowCreate \|\| loading \|\| (allowCreate && options.size === 0))\n \"\n >\n <slot v-if=\"$slots.empty\" name=\"empty\"></slot>\n <p v-else class=\"el-select-dropdown__empty\">\n {{ emptyText }}\n </p>\n </template>\n </el-select-menu>\n </template>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n toRefs,\n defineComponent,\n onMounted,\n onBeforeUnmount,\n nextTick,\n reactive,\n provide,\n computed,\n unref,\n} from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useFocus, useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\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 {\n addResizeListener,\n removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose, ArrowUp } from '@element-plus/icons-vue'\nimport ElOption from './option.vue'\nimport ElSelectMenu from './select-dropdown.vue'\nimport { useSelect, useSelectStates } from './useSelect'\nimport { selectKey } from './token'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { SelectContext } from './token'\n\nexport default defineComponent({\n name: 'ElSelect',\n componentName: 'ElSelect',\n components: {\n ElInput,\n ElSelectMenu,\n ElOption,\n ElTag,\n ElScrollbar,\n ElTooltip,\n ElIcon,\n },\n directives: { ClickOutside },\n props: {\n name: String,\n id: String,\n modelValue: {\n type: [Array, String, Number, Boolean, Object],\n default: undefined,\n },\n autocomplete: {\n type: String,\n default: 'off',\n },\n automaticDropdown: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n disabled: Boolean,\n clearable: Boolean,\n filterable: Boolean,\n allowCreate: Boolean,\n loading: Boolean,\n popperClass: {\n type: String,\n default: '',\n },\n remote: Boolean,\n loadingText: String,\n noMatchText: String,\n noDataText: String,\n remoteMethod: Function,\n filterMethod: Function,\n multiple: Boolean,\n multipleLimit: {\n type: Number,\n default: 0,\n },\n placeholder: {\n type: String,\n },\n defaultFirstOption: Boolean,\n reserveKeyword: Boolean,\n valueKey: {\n type: String,\n default: 'value',\n },\n collapseTags: Boolean,\n popperAppendToBody: {\n type: Boolean,\n default: true,\n },\n clearIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: CircleClose,\n },\n fitInputWidth: {\n type: Boolean,\n default: false,\n },\n suffixIcon: {\n type: [String, Object] as PropType<string \| Component>,\n default: ArrowUp,\n },\n tagType: {\n type: String,\n default: 'info',\n },\n },\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, ctx) {\n const { t } = useLocale()\n const states = useSelectStates(props)\n const {\n optionsArray,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n setSelected,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n onOptionCreate,\n onOptionDestroy,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n\n reference,\n input,\n tooltipRef,\n tags,\n selectWrapper,\n scrollbar,\n queryChange,\n groupQueryChange,\n } = useSelect(props, states, ctx)\n\n const { focus } = useFocus(reference)\n\n const {\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n cachedOptions,\n optionsCount,\n prefixWidth,\n tagInMultiLine,\n } = toRefs(states)\n\n const wrapperKls = computed(() => {\n const classList = ['el-select']\n const _selectSize = unref(selectSize)\n if (_selectSize) {\n classList.push(`el-select--${_selectSize}`)\n }\n return classList\n })\n\n const selectTagsStyle = computed(() => ({\n maxWidth: `${unref(inputWidth) - 32}px`,\n width: '100%',\n }))\n\n provide(\n selectKey,\n reactive({\n props,\n options,\n optionsArray,\n cachedOptions,\n optionsCount,\n filteredOptionsCount,\n hoverIndex,\n handleOptionSelect,\n onOptionCreate,\n onOptionDestroy,\n selectWrapper,\n selected,\n setSelected,\n queryChange,\n groupQueryChange,\n }) as unknown as SelectContext\n )\n\n onMounted(() => {\n states.cachedPlaceHolder = currentPlaceholder.value =\n props.placeholder \|\| t('el.select.placeholder')\n if (\n props.multiple &&\n Array.isArray(props.modelValue) &&\n props.modelValue.length > 0\n ) {\n currentPlaceholder.value = ''\n }\n addResizeListener(selectWrapper.value as any, handleResize)\n if (reference.value && reference.value.$el) {\n const sizeMap = {\n large: 36,\n default: 32,\n small: 28,\n }\n const input = reference.value.input as HTMLInputElement\n states.initialInputHeight =\n input.getBoundingClientRect().height \|\| sizeMap[selectSize.value]\n }\n if (props.remote && props.multiple) {\n resetInputHeight()\n }\n nextTick(() => {\n if (!reference.value) return\n if (reference.value.$el) {\n inputWidth.value = reference.value.$el.getBoundingClientRect().width\n }\n if (ctx.slots.prefix) {\n const inputChildNodes = reference.value.$el.childNodes\n const input = (Array.from(inputChildNodes) as HTMLElement[]).filter(\n (item) => item.tagName === 'INPUT'\n )[0]\n const prefix = reference.value.$el.querySelector('.el-input__prefix')\n prefixWidth.value = Math.max(\n prefix.getBoundingClientRect().width + 5,\n 30\n )\n if (states.prefixWidth) {\n input.style.paddingLeft = `${Math.max(states.prefixWidth, 30)}px`\n }\n }\n })\n setSelected()\n })\n\n onBeforeUnmount(() => {\n removeResizeListener(selectWrapper.value as any, handleResize)\n })\n\n if (props.multiple && !Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, [])\n }\n if (!props.multiple && Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, '')\n }\n\n const popperPaneRef = computed(() => {\n return tooltipRef.value?.popperRef?.contentRef\n })\n\n return {\n tagInMultiLine,\n prefixWidth,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n focus,\n\n reference,\n input,\n tooltipRef,\n popperPaneRef,\n tags,\n selectWrapper,\n scrollbar,\n\n wrapperKls,\n selectTagsStyle,\n }\n },\n})\n</script>\n"],"names":["_createVNode","_createCommentVNode","_withModifiers","_withDirectives","_createBlock"],"mappings":";;;qBAwBa,KAAK;;;;;;;EAiLI;;;;;;;;;;;;;;;IArMjBA;WACK;;;MAGJ;MACQ;;MACR;MACC;MACA;MACA;MACD;MACA;MACA;MACA,UAAU,EAAC;MACV;;MAED;;;;;;;;gBAOM;;gBAEC;;sCAE2B;;;gCAEf,sDAA4C;;;;;qEAK7C,eAAU;;;;iCAGX;4BACJ;;;;;qCAKY;;;qCACJ;;;;;;8BAKX,yCACK;;;;;;;;;;;;;;;+BAOC;;;;;;iDAKN;iCAEM;gEAC2B;;;;8BAI/B;;;;;kCAIE,KAAKC;;uDAEI;;;;;;;;;;gBAKjB;;;;;;;;sBAQG,QAAQ;sBACR,cAAc;sBACd;;;;;;;;;6BASK;;;;;;;;;;;;sBAUL;;sBAEA;sBACA;;;;;;;;YAIF;YACD;;;YAEA;uBACY;;uBAECC,kBAAc;;oBAElB;;YAER,uBAAqB;YACrB;;YAEA;kBACI,iBAAYC;mBACX,EAAE;qBACA;;gCAEY;;;;;;;;;;;;;gCAwBGC;;;oBAElB;;;;;;;;;;eAKK;;;;;;;;;;;;;;;;;+BArB4B;;;;;;;;;;;aA+B1B;;;;;cAKZ;;;;;;;;;;;;"}

package/es/components/select-v2/index.d.ts CHANGED Viewed

@@ -877,9 +877,9 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
     scrollbarAlwaysOn: boolean;
 } & {
     size?: import("element-plus/es/utils/types").ComponentSize | undefined;
-    name?: string | undefined;
     modelValue?: any;
     label?: string | undefined;
+    name?: string | undefined;
     id?: string | undefined;
     placeholder?: string | undefined;
     options?: import("./src/select.types").OptionType<any>[] | undefined;
@@ -1800,9 +1800,9 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
     scrollbarAlwaysOn: boolean;
 } & {
     size?: import("element-plus/es/utils/types").ComponentSize | undefined;
-    name?: string | undefined;
     modelValue?: any;
     label?: string | undefined;
+    name?: string | undefined;
     id?: string | undefined;
     placeholder?: string | undefined;
     options?: import("./src/select.types").OptionType<any>[] | undefined;

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

@@ -876,9 +876,9 @@ declare const _default: import("vue").DefineComponent<{
     scrollbarAlwaysOn: boolean;
 } & {
     size?: import("../../../utils/types").ComponentSize | undefined;
-    name?: string | undefined;
     modelValue?: any;
     label?: string | undefined;
+    name?: string | undefined;
     id?: string | undefined;
     placeholder?: string | undefined;
     options?: import("./select.types").OptionType<any>[] | undefined;

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

	@@ -1 +1 @@
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-tooltip\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=\"light\"\n placement=\"bottom-start\"\n pure\n transition=\"el-zoom-in-top\"\n trigger=\"click\"\n @show=\"handleMenuEnter\"\n @hide=\"states.inputValue = states.displayInputValue\"\n >\n <template #default>\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 <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n </div>\n </template>\n <template #content>\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-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive, vModelText } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElTooltip from '@element-plus/components/tooltip'\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 ElTooltip,\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"],"mappings":";;;;;;;;;;;;;AAsQA,aAAe,eAAe,CAAC;AAC/B,EAAE,MAAM,YAAY;EAClB,UAAU,EAAE;kBACVA;IACA,KAAK;IACL;IACA,MAAM;;EAER;EACA,KAAK,EAAE,WAAW;EAClB,KAAK,EAAE;IACL;IACA,YAAY;IACZ,YAAY;IACZ,OAAO;IACP;IACA,OAAO;IACP,MAAM;;EAER;;IAEE,OAAO,CAAC;MACN,KAAK,UAAU,CAAC;QACd,GAAG,MAAM,CAAC,MAAM;QAChB,MAAM,EAAE,GAAG,CAAC,WAAW;OACxB,CAAC;cACM,EAAE,GAAG,CAAC;aACP,KAAK,CAAC,OAAO;MACpB;MACA,gBAAgB,EAAE,GAAG,CAAC;MACtB,CAAC;WACI,GAAG,CAAC;;;;;;"}
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-tooltip\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=\"light\"\n placement=\"bottom-start\"\n pure\n transition=\"el-zoom-in-top\"\n trigger=\"click\"\n persistent\n @show=\"handleMenuEnter\"\n @hide=\"states.inputValue = states.displayInputValue\"\n >\n <template #default>\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 <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n </div>\n </template>\n <template #content>\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-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive, vModelText } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElTooltip from '@element-plus/components/tooltip'\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 ElTooltip,\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"],"mappings":";;;;;;;;;;;;;AAuQA,aAAe,eAAe,CAAC;AAC/B,EAAE,MAAM,YAAY;EAClB,UAAU,EAAE;kBACVA;IACA,KAAK;IACL;IACA,MAAM;;EAER;EACA,KAAK,EAAE,WAAW;EAClB,KAAK,EAAE;IACL;IACA,YAAY;IACZ,YAAY;IACZ,OAAO;IACP;IACA,OAAO;IACP,MAAM;;EAER;;IAEE,OAAO,CAAC;MACN,KAAK,UAAU,CAAC;QACd,GAAG,MAAM,CAAC,MAAM;QAChB,MAAM,EAAE,GAAG,CAAC,WAAW;OACxB,CAAC;cACM,EAAE,GAAG,CAAC;aACP,KAAK,CAAC,OAAO;MACpB;MACA,gBAAgB,EAAE,GAAG,CAAC;MACtB,CAAC;WACI,GAAG,CAAC;;;;;;"}

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

@@ -45,6 +45,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       pure: "",
       transition: "el-zoom-in-top",
       trigger: "click",
+      persistent: "",
       onShow: _ctx.handleMenuEnter,
       onHide: _cache[23] || (_cache[23] = ($event) => _ctx.states.inputValue = _ctx.states.displayInputValue)
     }, {

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

	@@ -1 +1 @@
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-tooltip\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=\"light\"\n placement=\"bottom-start\"\n pure\n transition=\"el-zoom-in-top\"\n trigger=\"click\"\n @show=\"handleMenuEnter\"\n @hide=\"states.inputValue = states.displayInputValue\"\n >\n <template #default>\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 <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n </div>\n </template>\n <template #content>\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-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive, vModelText } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElTooltip from '@element-plus/components/tooltip'\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 ElTooltip,\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":["_createVNode","_normalizeStyle","_openBlock","_toDisplayString","_createElementBlock","_withCtx","_normalizeClass","_withDirectives"],"mappings":";;;;;;EAyC+B;;;;EAEZ;;;;0BA2GA;;;kDAsDyB;eAqC3B,KAAK,EAAC;;;;;;;;;;;IA/OnB;IAEC,qFACK;;IAELA,WAAU;;;;MAIT;MACQ;;MACP;MACA;MACA;MACA;MACA;MACA;MACD;MACA,SAAS;MACT,MAAA;MACA;;MAEC;YACI;;;;;;;;;;;;;;gBAcC;;;;6BAEF;;;;;;;;;wBASQ;wBACC,OAAKC;;;;;;;;8CAOAC,WAAO;;;;;yCAGf;;mCAEW;;;;;;8BAKTC;;;;;gCAKG,IAAEC,mBAAG;;;;;;;;wBAST,QAAQ;;;;6BAIHC;;;;0BAIJ;0BACC;;;;;;;;;;;;;;;kBAaL;kBACC;;;;uBAII,EAACC;gCAES;;;;;;;;;;;;;;oBAeZ,qBAAiB,wCAAE,2DAAkB;oBACrC,OAAK;oBACL,OAAK;oBACL,6HAAwC;oBACxC,2DAAmB,qEAAuB;;6BAEnC;;;;;;;;;;mBAOF;;;;;;qCAIN;;;;;;;;sBAUG,EAAE;;;qCAIS;;qCAEE;oCACD;;;;;;oBAMd;oBACD,UAAU;oBACV,MAAK;oBACJ,oCAAgC;;uCAEf;;uEAEV;;;;;;;;;;;;;;;;;oCAYE;;mCAEZC,2BAAe;;;;;4BAInB;;gBAEG;;;;;;;;;;;;;;kBAeE,+DAAiD;;;;;;;;;;aAK5C;;;sBACD;;;oCAGL;;;;;;kCAGuB;;;sBAClB;;;;;;;;;;;;;;;;"}
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-tooltip\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=\"light\"\n placement=\"bottom-start\"\n pure\n transition=\"el-zoom-in-top\"\n trigger=\"click\"\n persistent\n @show=\"handleMenuEnter\"\n @hide=\"states.inputValue = states.displayInputValue\"\n >\n <template #default>\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 <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n </div>\n </template>\n <template #content>\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-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive, vModelText } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElTooltip from '@element-plus/components/tooltip'\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 ElTooltip,\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":["_createVNode","_normalizeStyle","_openBlock","_toDisplayString","_createElementBlock","_withCtx","_normalizeClass","_withDirectives"],"mappings":";;;;;;EA0C+B;;;;EAEZ;;;;0BA2GA;;;kDAsDyB;eAqC3B,KAAK,EAAC;;;;;;;;;;;IAhPnB;IAEC,qFACK;;IAELA,WAAU;;;;MAIT;MACQ;;MACP;MACA;MACA;MACA;MACA;MACA;MACD;MACA,SAAS;MACT;MACA,YAAW;MACX;;MAEC;YACI;;;;;;;;;;;;;;gBAcC;;;;6BAEF;;;;;;;;;wBASQ;wBACC,OAAKC;;;;;;;;8CAOAC,WAAO;;;;;yCAGf;;mCAEW;;;;;;8BAKTC;;;;;gCAKG,IAAEC,mBAAG;;;;;;;;wBAST,QAAQ;;;;6BAIHC;;;;0BAIJ;0BACC;;;;;;;;;;;;;;;kBAaL;kBACC;;;;uBAII,EAACC;gCAES;;;;;;;;;;;;;;oBAeZ,qBAAiB,wCAAE,2DAAkB;oBACrC,OAAK;oBACL,OAAK;oBACL,6HAAwC;oBACxC,2DAAmB,qEAAuB;;6BAEnC;;;;;;;;;;mBAOF;;;;;;qCAIN;;;;;;;;sBAUG,EAAE;;;qCAIS;;qCAEE;oCACD;;;;;;oBAMd;oBACD,UAAU;oBACV,MAAK;oBACJ,oCAAgC;;uCAEf;;uEAEV;;;;;;;;;;;;;;;;;oCAYE;;mCAEZC,2BAAe;;;;;4BAInB;;gBAEG;;;;;;;;;;;;;;kBAeE,+DAAiD;;;;;;;;;;aAK5C;;;sBACD;;;oCAGL;;;;;;kCAGuB;;;sBAClB;;;;;;;;;;;;;;;;"}

package/es/components/skeleton/index.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
-import './src/skeleton.mjs';
+import './src/skeleton2.mjs';
 import './src/skeleton-item2.mjs';
-export { skeletonProps } from './src/skeleton2.mjs';
+export { skeletonProps } from './src/skeleton.mjs';
 export { skeletonItemProps } from './src/skeleton-item.mjs';
 import script from './src/skeleton.vue_vue_type_script_lang.mjs';
 import script$1 from './src/skeleton-item.vue_vue_type_script_lang.mjs';

package/es/components/skeleton/src/skeleton.mjs CHANGED Viewed

@@ -1,7 +1,26 @@
-import script from './skeleton.vue_vue_type_script_lang.mjs';
-export { default } from './skeleton.vue_vue_type_script_lang.mjs';
-import { render } from './skeleton.vue_vue_type_template_id_26fa9225_lang.mjs';
+import { buildProps } from '../../../utils/props.mjs';
-script.render = render;
-script.__file = "packages/components/skeleton/src/skeleton.vue";
+const skeletonProps = buildProps({
+  animated: {
+    type: Boolean,
+    default: false
+  },
+  count: {
+    type: Number,
+    default: 1
+  },
+  rows: {
+    type: Number,
+    default: 3
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  throttle: {
+    type: Number
+  }
+});
+export { skeletonProps };
 //# sourceMappingURL=skeleton.mjs.map

package/es/components/skeleton/src/skeleton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;~~"}
1	+ {"version":3,"file":"skeleton.mjs","sources":["../../../../../../packages/components/skeleton/src/skeleton.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport type Skeleton from './skeleton.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const skeletonProps = buildProps({\n animated: {\n type: Boolean,\n default: false,\n },\n count: {\n type: Number,\n default: 1,\n },\n rows: {\n type: Number,\n default: 3,\n },\n loading: {\n type: Boolean,\n default: true,\n },\n throttle: {\n type: Number,\n },\n} as const)\nexport type SkeletonProps = ExtractPropTypes<typeof skeletonProps>\n\nexport type SkeletonInstance = InstanceType<typeof Skeleton>\n"],"names":[],"mappings":";;AACY,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}

package/es/components/skeleton/src/skeleton.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import '../../../hooks/index.mjs';
 import './skeleton-item2.mjs';
-import { skeletonProps } from './skeleton2.mjs';
+import { skeletonProps } from './skeleton.mjs';
 import script$1 from './skeleton-item.vue_vue_type_script_lang.mjs';
 import { useThrottleRender } from '../../../hooks/use-throttle-render/index.mjs';

package/es/components/skeleton/src/skeleton2.mjs CHANGED Viewed

@@ -1,26 +1,7 @@
-import { buildProps } from '../../../utils/props.mjs';
+import script from './skeleton.vue_vue_type_script_lang.mjs';
+export { default } from './skeleton.vue_vue_type_script_lang.mjs';
+import { render } from './skeleton.vue_vue_type_template_id_26fa9225_lang.mjs';
-const skeletonProps = buildProps({
-  animated: {
-    type: Boolean,
-    default: false
-  },
-  count: {
-    type: Number,
-    default: 1
-  },
-  rows: {
-    type: Number,
-    default: 3
-  },
-  loading: {
-    type: Boolean,
-    default: true
-  },
-  throttle: {
-    type: Number
-  }
-});
-export { skeletonProps };
+script.render = render;
+script.__file = "packages/components/skeleton/src/skeleton.vue";
 //# sourceMappingURL=skeleton2.mjs.map

package/es/components/skeleton/src/skeleton2.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton2.mjs","sources":[~~"../../../../../../packages/components/skeleton/src/skeleton.ts"~~],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport type Skeleton from './skeleton.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const skeletonProps = buildProps({\n animated: {\n type: Boolean,\n default: false,\n },\n count: {\n type: Number,\n default: 1,\n },\n rows: {\n type: Number,\n default: 3,\n },\n loading: {\n type: Boolean,\n default: true,\n },\n throttle: {\n type: Number,\n },\n} as const)\nexport type SkeletonProps = ExtractPropTypes<typeof skeletonProps>\n\nexport type SkeletonInstance = InstanceType<typeof Skeleton>\n"],"names":[],"mappings":";;AACY,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}
1	+ {"version":3,"file":"skeleton2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/slider/index.d.ts CHANGED Viewed

@@ -24,9 +24,13 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
         type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        default: string;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -89,6 +93,9 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     stops: import("vue").ComputedRef<number[]>;
     markList: import("vue").ComputedRef<import("./src/slider.type").Mark[]>;
     sliderWrapper: import("vue").Ref<import("element-plus/es/utils/types").Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "change")[], "input" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
@@ -96,6 +103,7 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -114,7 +122,6 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -124,7 +131,9 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     showInputControls: boolean;
     showStops: boolean;
 } & {
+    size?: import("element-plus/es/utils/types").ComponentSize | undefined;
     label?: string | undefined;
+    inputSize?: import("element-plus/es/utils/types").ComponentSize | undefined;
     tooltipClass?: string | undefined;
     formatTooltip?: ((val: number) => string | number) | undefined;
     marks?: Record<string, any> | undefined;
@@ -139,7 +148,6 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -177,9 +185,13 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
         type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        default: string;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -242,6 +254,9 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     stops: import("vue").ComputedRef<number[]>;
     markList: import("vue").ComputedRef<import("./src/slider.type").Mark[]>;
     sliderWrapper: import("vue").Ref<import("element-plus/es/utils/types").Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "change")[], "input" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
@@ -249,6 +264,7 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -267,7 +283,6 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -277,7 +292,9 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     showInputControls: boolean;
     showStops: boolean;
 } & {
+    size?: import("element-plus/es/utils/types").ComponentSize | undefined;
     label?: string | undefined;
+    inputSize?: import("element-plus/es/utils/types").ComponentSize | undefined;
     tooltipClass?: string | undefined;
     formatTooltip?: ((val: number) => string | number) | undefined;
     marks?: Record<string, any> | undefined;
@@ -292,7 +309,6 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;

package/es/components/slider/src/button.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/slider/src/button.vue"],"sourcesContent":["<template>\n <div\n ref=\"button\"\n class=\"el-slider__button-wrapper\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @mousedown=\"onButtonDown\"\n @touchstart=\"onButtonDown\"\n @focus=\"handleMouseEnter\"\n @blur=\"handleMouseLeave\"\n @keydown.left=\"onLeftKeyDown\"\n @keydown.right=\"onRightKeyDown\"\n @keydown.down.prevent=\"onLeftKeyDown\"\n @keydown.up.prevent=\"onRightKeyDown\"\n >\n <el-tooltip\n ref=\"tooltip\"\n v-model=\"tooltipVisible\"\n placement=\"top\"\n :stop-popper-mouse-event=\"false\"\n :popper-class=\"tooltipClass\"\n :disabled=\"!showTooltip\"\n manual\n >\n <template #content>\n <span>{{ formatValue }}</span>\n </template>\n <div\n class=\"el-slider__button\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n ></div>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSliderButton } from './useSliderButton'\n\nexport default defineComponent({\n name: 'ElSliderButton',\n\n components: {\n ElTooltip,\n },\n\n props: {\n modelValue: {\n type: Number,\n default: 0,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n tooltipClass: {\n type: String,\n default: '',\n },\n },\n\n emits: [UPDATE_MODEL_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n hovering: false,\n dragging: false,\n isClick: false,\n startX: 0,\n currentX: 0,\n startY: 0,\n currentY: 0,\n startPosition: 0,\n newPosition: 0,\n oldValue: props.modelValue,\n })\n\n const {\n tooltip,\n showTooltip,\n tooltipVisible,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n } = useSliderButton(props, initData, emit)\n\n const { hovering, dragging } = toRefs(initData)\n\n return {\n tooltip,\n tooltipVisible,\n showTooltip,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n\n hovering,\n dragging,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;~~AA0CA~~,aAAe,eAAe;;AAE9B,EAAE,UAAU;IACR,SAAS;;EAEX,KAAK,EAAE;IACL;;;KAGC;IACD,QAAQ,EAAE;MACR,IAAI,EAAE;MACN,OAAO,EAAE;KACV;IACD;MACE,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE,EAAE;KACZ;;OAEE,EAAE,CAAC;OACH,CAAC,KAAK,EAAE,EAAE;IACb;;;MAGE,OAAO,EAAE,KAAK;;MAEd,WAAW;MACX,MAAM,EAAE,CAAC;MACT,QAAQ,EAAE,CAAC;MACX,aAAa,EAAE;MACf,WAAW,EAAE,CAAC;MACd,QAAQ;MACR,CAAC;UACG;MACJ,OAAO;MACP,WAAW;MACX,cAAc;MACd,YAAY;;;MAGZ;MACA;MACA;MACA,cAAc;MACd,WAAW;QACT;UACE,EAAE,QAAQ,EAAE;WACX;MACL,OAAO;MACP;MACA,WAAW;MACX;MACA,WAAW;;MAEX,gBAAgB;;MAEhB;MACA;MACA,WAAW;MACX,QAAQ;MACR,QAAQ;MACR;;;;;;"}
1	+ {"version":3,"file":"button.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/slider/src/button.vue"],"sourcesContent":["<template>\n <div\n ref=\"button\"\n class=\"el-slider__button-wrapper\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @mousedown=\"onButtonDown\"\n @touchstart=\"onButtonDown\"\n @focus=\"handleMouseEnter\"\n @blur=\"handleMouseLeave\"\n @keydown.left=\"onLeftKeyDown\"\n @keydown.right=\"onRightKeyDown\"\n @keydown.down.prevent=\"onLeftKeyDown\"\n @keydown.up.prevent=\"onRightKeyDown\"\n >\n <el-tooltip\n ref=\"tooltip\"\n v-model=\"tooltipVisible\"\n placement=\"top\"\n :stop-popper-mouse-event=\"false\"\n :popper-class=\"tooltipClass\"\n :disabled=\"!showTooltip\"\n manual\n persistent\n >\n <template #content>\n <span>{{ formatValue }}</span>\n </template>\n <div\n class=\"el-slider__button\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n ></div>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSliderButton } from './useSliderButton'\n\nexport default defineComponent({\n name: 'ElSliderButton',\n\n components: {\n ElTooltip,\n },\n\n props: {\n modelValue: {\n type: Number,\n default: 0,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n tooltipClass: {\n type: String,\n default: '',\n },\n },\n\n emits: [UPDATE_MODEL_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n hovering: false,\n dragging: false,\n isClick: false,\n startX: 0,\n currentX: 0,\n startY: 0,\n currentY: 0,\n startPosition: 0,\n newPosition: 0,\n oldValue: props.modelValue,\n })\n\n const {\n tooltip,\n showTooltip,\n tooltipVisible,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n } = useSliderButton(props, initData, emit)\n\n const { hovering, dragging } = toRefs(initData)\n\n return {\n tooltip,\n tooltipVisible,\n showTooltip,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n\n hovering,\n dragging,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;AA2CA,aAAe,eAAe;;AAE9B,EAAE,UAAU;IACR,SAAS;;EAEX,KAAK,EAAE;IACL;;;KAGC;IACD,QAAQ,EAAE;MACR,IAAI,EAAE;MACN,OAAO,EAAE;KACV;IACD;MACE,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE,EAAE;KACZ;;OAEE,EAAE,CAAC;OACH,CAAC,KAAK,EAAE,EAAE;IACb;;;MAGE,OAAO,EAAE,KAAK;;MAEd,WAAW;MACX,MAAM,EAAE,CAAC;MACT,QAAQ,EAAE,CAAC;MACX,aAAa,EAAE;MACf,WAAW,EAAE,CAAC;MACd,QAAQ;MACR,CAAC;UACG;MACJ,OAAO;MACP,WAAW;MACX,cAAc;MACd,YAAY;;;MAGZ;MACA;MACA;MACA,cAAc;MACd,WAAW;QACT;UACE,EAAE,QAAQ,EAAE;WACX;MACL,OAAO;MACP;MACA,WAAW;MACX;MACA,WAAW;;MAEX,gBAAgB;;MAEhB;MACA;MACA,WAAW;MACX,QAAQ;MACR,QAAQ;MACR;;;;;;"}

package/es/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.mjs CHANGED Viewed

@@ -28,7 +28,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "stop-popper-mouse-event": false,
       "popper-class": _ctx.tooltipClass,
       disabled: !_ctx.showTooltip,
-      manual: ""
+      manual: "",
+      persistent: ""
     }, {
       content: withCtx(() => [
         createElementVNode("span", null, toDisplayString(_ctx.formatValue), 1)

package/es/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.vue_vue_type_template_id_9cd3e794_lang.mjs","sources":["../../../../../../packages/components/slider/src/button.vue?vue&type=template&id=9cd3e794&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"button\"\n class=\"el-slider__button-wrapper\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @mousedown=\"onButtonDown\"\n @touchstart=\"onButtonDown\"\n @focus=\"handleMouseEnter\"\n @blur=\"handleMouseLeave\"\n @keydown.left=\"onLeftKeyDown\"\n @keydown.right=\"onRightKeyDown\"\n @keydown.down.prevent=\"onLeftKeyDown\"\n @keydown.up.prevent=\"onRightKeyDown\"\n >\n <el-tooltip\n ref=\"tooltip\"\n v-model=\"tooltipVisible\"\n placement=\"top\"\n :stop-popper-mouse-event=\"false\"\n :popper-class=\"tooltipClass\"\n :disabled=\"!showTooltip\"\n manual\n >\n <template #content>\n <span>{{ formatValue }}</span>\n </template>\n <div\n class=\"el-slider__button\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n ></div>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSliderButton } from './useSliderButton'\n\nexport default defineComponent({\n name: 'ElSliderButton',\n\n components: {\n ElTooltip,\n },\n\n props: {\n modelValue: {\n type: Number,\n default: 0,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n tooltipClass: {\n type: String,\n default: '',\n },\n },\n\n emits: [UPDATE_MODEL_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n hovering: false,\n dragging: false,\n isClick: false,\n startX: 0,\n currentX: 0,\n startY: 0,\n currentY: 0,\n startPosition: 0,\n newPosition: 0,\n oldValue: props.modelValue,\n })\n\n const {\n tooltip,\n showTooltip,\n tooltipVisible,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n } = useSliderButton(props, initData, emit)\n\n const { hovering, dragging } = toRefs(initData)\n\n return {\n tooltip,\n tooltipVisible,\n showTooltip,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n\n hovering,\n dragging,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;IAEI,KAAI;IACJ;IAEC,uBAAO,iBAAY;IACpB;IACC;IACA,YAAU;IACV,qDAAW;IACX,qGAAwB;IACxB;0GACsB;aACf;sDAAO;;;;;;;MAMb;;;MAEA;MACC,2BAAyB;MACzB;;MAED;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"button.vue_vue_type_template_id_9cd3e794_lang.mjs","sources":["../../../../../../packages/components/slider/src/button.vue?vue&type=template&id=9cd3e794&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"button\"\n class=\"el-slider__button-wrapper\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @mousedown=\"onButtonDown\"\n @touchstart=\"onButtonDown\"\n @focus=\"handleMouseEnter\"\n @blur=\"handleMouseLeave\"\n @keydown.left=\"onLeftKeyDown\"\n @keydown.right=\"onRightKeyDown\"\n @keydown.down.prevent=\"onLeftKeyDown\"\n @keydown.up.prevent=\"onRightKeyDown\"\n >\n <el-tooltip\n ref=\"tooltip\"\n v-model=\"tooltipVisible\"\n placement=\"top\"\n :stop-popper-mouse-event=\"false\"\n :popper-class=\"tooltipClass\"\n :disabled=\"!showTooltip\"\n manual\n persistent\n >\n <template #content>\n <span>{{ formatValue }}</span>\n </template>\n <div\n class=\"el-slider__button\"\n :class=\"{ hover: hovering, dragging: dragging }\"\n ></div>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSliderButton } from './useSliderButton'\n\nexport default defineComponent({\n name: 'ElSliderButton',\n\n components: {\n ElTooltip,\n },\n\n props: {\n modelValue: {\n type: Number,\n default: 0,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n tooltipClass: {\n type: String,\n default: '',\n },\n },\n\n emits: [UPDATE_MODEL_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n hovering: false,\n dragging: false,\n isClick: false,\n startX: 0,\n currentX: 0,\n startY: 0,\n currentY: 0,\n startPosition: 0,\n newPosition: 0,\n oldValue: props.modelValue,\n })\n\n const {\n tooltip,\n showTooltip,\n tooltipVisible,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n } = useSliderButton(props, initData, emit)\n\n const { hovering, dragging } = toRefs(initData)\n\n return {\n tooltip,\n tooltipVisible,\n showTooltip,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n\n hovering,\n dragging,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;IAEI,KAAI;IACJ;IAEC,uBAAO,iBAAY;IACpB;IACC;IACA,YAAU;IACV,qDAAW;IACX,qGAAwB;IACxB;0GACsB;aACf;sDAAO;;;;;;;MAMb;;;MAEA;MACC,2BAAyB;MACzB;MACA;;MAED;;;;;;;;;;;;;;;"}

package/es/components/slider/src/index.vue.d.ts CHANGED Viewed

@@ -25,9 +25,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
         type: PropType<ComponentSize>;
-        default: string;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -90,6 +94,9 @@ declare const _default: import("vue").DefineComponent<{
     stops: import("vue").ComputedRef<number[]>;
     markList: import("vue").ComputedRef<import("./slider.type").Mark[]>;
     sliderWrapper: Ref<Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "change")[], "input" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
@@ -97,6 +104,7 @@ declare const _default: import("vue").DefineComponent<{
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -115,7 +123,6 @@ declare const _default: import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -125,7 +132,9 @@ declare const _default: import("vue").DefineComponent<{
     showInputControls: boolean;
     showStops: boolean;
 } & {
+    size?: ComponentSize | undefined;
     label?: string | undefined;
+    inputSize?: ComponentSize | undefined;
     tooltipClass?: string | undefined;
     formatTooltip?: ((val: number) => number | string) | undefined;
     marks?: Record<string, any> | undefined;
@@ -140,7 +149,6 @@ declare const _default: import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: ComponentSize;
     debounce: number;
     max: number;
     min: number;