npm - @element-plus/nightly - Versions diffs - 0.0.20220108 → 0.0.20220112 - Mend

@element-plus/nightly 0.0.20220108 → 0.0.20220112

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 (279) 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/src/useSelect.d.ts CHANGED Viewed

@@ -153,6 +153,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -172,6 +173,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -269,6 +271,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -283,7 +286,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             virtualTriggering?: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
         }> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "appendTo" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -307,6 +310,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -404,6 +408,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -535,6 +540,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -574,6 +580,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
         trigger?: unknown;
         virtualRef?: unknown;
         virtualTriggering?: unknown;
+        appendTo?: unknown;
         content?: unknown;
         rawContent?: unknown;
         persistent?: unknown;
@@ -671,6 +678,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
         stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showAfter: number;
         hideAfter: number;
+        appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
         rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         persistent: boolean;
         teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -208,6 +208,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -227,6 +228,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -324,6 +326,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -338,7 +341,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
             virtualTriggering?: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
         }> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "appendTo" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -362,6 +365,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -459,6 +463,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -590,6 +595,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -629,6 +635,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
         trigger?: unknown;
         virtualRef?: unknown;
         virtualTriggering?: unknown;
+        appendTo?: unknown;
         content?: unknown;
         rawContent?: unknown;
         persistent?: unknown;
@@ -726,6 +733,7 @@ declare const _Select: SFCWithInstall<import("vue").DefineComponent<{
         stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showAfter: number;
         hideAfter: number;
+        appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
         rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         persistent: boolean;
         teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -1131,6 +1139,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -1150,6 +1159,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -1247,6 +1257,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -1261,7 +1272,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
             virtualTriggering?: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
         }> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "appendTo" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -1285,6 +1296,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -1382,6 +1394,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -1513,6 +1526,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -1552,6 +1566,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
         trigger?: unknown;
         virtualRef?: unknown;
         virtualTriggering?: unknown;
+        appendTo?: unknown;
         content?: unknown;
         rawContent?: unknown;
         persistent?: unknown;
@@ -1649,6 +1664,7 @@ export declare const ElSelectV2: SFCWithInstall<import("vue").DefineComponent<{
         stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showAfter: number;
         hideAfter: number;
+        appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
         rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         persistent: boolean;
         teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -207,6 +207,7 @@ declare const _default: import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -226,6 +227,7 @@ declare const _default: import("vue").DefineComponent<{
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -323,6 +325,7 @@ declare const _default: import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -337,7 +340,7 @@ declare const _default: import("vue").DefineComponent<{
             virtualTriggering?: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
         }> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "appendTo" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -361,6 +364,7 @@ declare const _default: import("vue").DefineComponent<{
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -458,6 +462,7 @@ declare const _default: import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -589,6 +594,7 @@ declare const _default: import("vue").DefineComponent<{
             stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -628,6 +634,7 @@ declare const _default: import("vue").DefineComponent<{
         trigger?: unknown;
         virtualRef?: unknown;
         virtualTriggering?: unknown;
+        appendTo?: unknown;
         content?: unknown;
         rawContent?: unknown;
         persistent?: unknown;
@@ -725,6 +732,7 @@ declare const _default: import("vue").DefineComponent<{
         stopPopperMouseEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showAfter: number;
         hideAfter: number;
+        appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
         rawContent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         persistent: boolean;
         teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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;;;;;;;;;;;;;;;;"}