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/lib/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/lib/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/lib/components/select-v2/src/select.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.vue_vue_type_script_lang.js","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":["defineComponent","ElSelectMenu","ElTag","ElTooltip","ElIcon","SelectProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","provide","selectV2InjectionKey","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAsQA,aAAeA,mBAAe,CAAC;AAC/B,EAAE,MAAM,YAAY;EAClB,UAAU,EAAE;kBACVC;WACAC,WAAK;eACLC;YACAC,cAAM;;EAER;EACA,KAAK,EAAEC,oBAAW;EAClB,KAAK,EAAE;IACLC;IACAC,sBAAY;IACZ,YAAY;IACZ,OAAO;IACP;IACA,OAAO;IACP,MAAM;;EAER;;IAEEC,WAAO,CAACC;MACN,KAAK,cAAU,CAAC;QACd,GAAGC,UAAM,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.js","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":["defineComponent","ElSelectMenu","ElTag","ElTooltip","ElIcon","SelectProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","provide","selectV2InjectionKey","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAuQA,aAAeA,mBAAe,CAAC;AAC/B,EAAE,MAAM,YAAY;EAClB,UAAU,EAAE;kBACVC;WACAC,WAAK;eACLC;YACAC,cAAM;;EAER;EACA,KAAK,EAAEC,oBAAW;EAClB,KAAK,EAAE;IACLC;IACAC,sBAAY;IACZ,YAAY;IACZ,OAAO;IACP;IACA,OAAO;IACP,MAAM;;EAER;;IAEEC,WAAO,CAACC;MACN,KAAK,cAAU,CAAC;QACd,GAAGC,UAAM,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/lib/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.js CHANGED Viewed

@@ -49,6 +49,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/lib/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.vue_vue_type_template_id_13e598a4_lang.js","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,eAAU;;;;MAIT;MACQ;;MACP;MACA;MACA;MACA;MACA;MACA;MACD;MACA,SAAS;MACT,MAAA;MACA;;MAEC;YACI;;;;;;;;;;;;;;gBAcC;;;;6BAEF;;;;;;;;;wBASQ;wBACC,OAAKC;;;;;;;;8CAOAC,eAAO;;;;;yCAGf;;uCAEW;;;;;;8BAKTC;;;;;oCAKG,IAAEC,uBAAG;;;;;;;;wBAST,QAAQ;;;;6BAIHC;;;;0BAIJ;0BACC;;;;;;;;;;;;;;;kBAaL;kBACC;;;;uBAII,EAACC;gCAES;;;;;;;;;;;;;;oBAeZ,qBAAiB,gDAAE,2DAAkB;oBACrC,OAAK;oBACL,OAAK;oBACL,qIAAwC;oBACxC,mEAAmB,qEAAuB;;6BAEnC;;;;;;;;;;mBAOF;;;;;;qCAIN;;;;;;;;sBAUG,EAAE;;;qCAIS;;qCAEE;oCACD;;;;;;oBAMd;oBACD,UAAU;oBACV,MAAK;oBACJ,wCAAgC;;uCAEf;;uEAEV;;;;;;;;;;;;;;;;;wCAYE;;mCAEZC,mCAAe;;;;;gCAInB;;gBAEG;;;;;;;;;;;;;;kBAeE,uEAAiD;;;;;;;;;;aAK5C;;;0BACD;;;oCAGL;;;;;;sCAGuB;;;0BAClB;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"select.vue_vue_type_template_id_13e598a4_lang.js","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,eAAU;;;;MAIT;MACQ;;MACP;MACA;MACA;MACA;MACA;MACA;MACD;MACA,SAAS;MACT;MACA,YAAW;MACX;;MAEC;YACI;;;;;;;;;;;;;;gBAcC;;;;6BAEF;;;;;;;;;wBASQ;wBACC,OAAKC;;;;;;;;8CAOAC,eAAO;;;;;yCAGf;;uCAEW;;;;;;8BAKTC;;;;;oCAKG,IAAEC,uBAAG;;;;;;;;wBAST,QAAQ;;;;6BAIHC;;;;0BAIJ;0BACC;;;;;;;;;;;;;;;kBAaL;kBACC;;;;uBAII,EAACC;gCAES;;;;;;;;;;;;;;oBAeZ,qBAAiB,gDAAE,2DAAkB;oBACrC,OAAK;oBACL,OAAK;oBACL,qIAAwC;oBACxC,mEAAmB,qEAAuB;;6BAEnC;;;;;;;;;;mBAOF;;;;;;qCAIN;;;;;;;;sBAUG,EAAE;;;qCAIS;;qCAEE;oCACD;;;;;;oBAMd;oBACD,UAAU;oBACV,MAAK;oBACJ,wCAAgC;;uCAEf;;uEAEV;;;;;;;;;;;;;;;;;wCAYE;;mCAEZC,mCAAe;;;;;gCAInB;;gBAEG;;;;;;;;;;;;;;kBAeE,uEAAiD;;;;;;;;;;aAK5C;;;0BACD;;;oCAGL;;;;;;sCAGuB;;;0BAClB;;;;;;;;;;;;;;;;"}

package/lib/components/skeleton/index.js CHANGED Viewed

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var withInstall = require('../../utils/with-install.js');
-require('./src/skeleton.js');
+require('./src/skeleton2.js');
 require('./src/skeleton-item2.js');
-var skeleton = require('./src/skeleton2.js');
+var skeleton = require('./src/skeleton.js');
 var skeletonItem = require('./src/skeleton-item.js');
 var skeleton_vue_vue_type_script_lang = require('./src/skeleton.vue_vue_type_script_lang.js');
 var skeletonItem_vue_vue_type_script_lang = require('./src/skeleton-item.vue_vue_type_script_lang.js');

package/lib/components/skeleton/src/skeleton.js CHANGED Viewed

@@ -2,11 +2,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var skeleton_vue_vue_type_script_lang = require('./skeleton.vue_vue_type_script_lang.js');
-var skeleton_vue_vue_type_template_id_26fa9225_lang = require('./skeleton.vue_vue_type_template_id_26fa9225_lang.js');
+var props = require('../../../utils/props.js');
-skeleton_vue_vue_type_script_lang["default"].render = skeleton_vue_vue_type_template_id_26fa9225_lang.render;
-skeleton_vue_vue_type_script_lang["default"].__file = "packages/components/skeleton/src/skeleton.vue";
+const skeletonProps = props.buildProps({
+  animated: {
+    type: Boolean,
+    default: false
+  },
+  count: {
+    type: Number,
+    default: 1
+  },
+  rows: {
+    type: Number,
+    default: 3
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  throttle: {
+    type: Number
+  }
+});
-exports["default"] = skeleton_vue_vue_type_script_lang["default"];
+exports.skeletonProps = skeletonProps;
 //# sourceMappingURL=skeleton.js.map

package/lib/components/skeleton/src/skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"skeleton.js","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":["buildProps"],"mappings":";;;;;;AACY,MAAC,aAAa,GAAGA,gBAAU,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/lib/components/skeleton/src/skeleton.vue_vue_type_script_lang.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 require('../../../hooks/index.js');
 require('./skeleton-item2.js');
-var skeleton = require('./skeleton2.js');
+var skeleton = require('./skeleton.js');
 var skeletonItem_vue_vue_type_script_lang = require('./skeleton-item.vue_vue_type_script_lang.js');
 var index = require('../../../hooks/use-throttle-render/index.js');

package/lib/components/skeleton/src/skeleton2.js CHANGED Viewed

@@ -2,29 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var props = require('../../../utils/props.js');
+var skeleton_vue_vue_type_script_lang = require('./skeleton.vue_vue_type_script_lang.js');
+var skeleton_vue_vue_type_template_id_26fa9225_lang = require('./skeleton.vue_vue_type_template_id_26fa9225_lang.js');
-const skeletonProps = props.buildProps({
-  animated: {
-    type: Boolean,
-    default: false
-  },
-  count: {
-    type: Number,
-    default: 1
-  },
-  rows: {
-    type: Number,
-    default: 3
-  },
-  loading: {
-    type: Boolean,
-    default: true
-  },
-  throttle: {
-    type: Number
-  }
-});
+skeleton_vue_vue_type_script_lang["default"].render = skeleton_vue_vue_type_template_id_26fa9225_lang.render;
+skeleton_vue_vue_type_script_lang["default"].__file = "packages/components/skeleton/src/skeleton.vue";
-exports.skeletonProps = skeletonProps;
+exports["default"] = skeleton_vue_vue_type_script_lang["default"];
 //# sourceMappingURL=skeleton2.js.map

package/lib/components/skeleton/src/skeleton2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton2.js","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":[~~"buildProps"~~],"mappings":";;;;;;AACY,MAAC,aAAa,GAAGA,gBAAU,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.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/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/lib/components/slider/src/button.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.vue_vue_type_script_lang.js","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":["defineComponent","ElTooltip","UPDATE_MODEL_EVENT","useSliderButton"],"mappings":";;;;;;;;;~~AA0CA~~,aAAeA,mBAAe;;AAE9B,EAAE,UAAU;eACRC,eAAS;;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,CAACC;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;QACTC;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.js","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":["defineComponent","ElTooltip","UPDATE_MODEL_EVENT","useSliderButton"],"mappings":";;;;;;;;;AA2CA,aAAeA,mBAAe;;AAE9B,EAAE,UAAU;eACRC,eAAS;;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,CAACC;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;QACTC;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/lib/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.js CHANGED Viewed

@@ -32,7 +32,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: vue.withCtx(() => [
         vue.createElementVNode("span", null, vue.toDisplayString(_ctx.formatValue), 1)

package/lib/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.vue_vue_type_template_id_9cd3e794_lang.js","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;8GACsB;aACf;8DAAO;;;;;;;MAMb;;;MAEA;MACC,2BAAyB;MACzB;;MAED;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"button.vue_vue_type_template_id_9cd3e794_lang.js","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;8GACsB;aACf;8DAAO;;;;;;;MAMb;;;MAEA;MACC,2BAAyB;MACzB;MACA;;MAED;;;;;;;;;;;;;;;"}

package/lib/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;

package/lib/components/slider/src/index.vue_vue_type_script_lang.js CHANGED Viewed

@@ -7,6 +7,8 @@ var index = require('../../input-number/index.js');
 var constants = require('../../../utils/constants.js');
 var dom = require('../../../utils/dom.js');
 var error = require('../../../utils/error.js');
+var validators = require('../../../utils/validators.js');
+require('../../../hooks/index.js');
 require('./button.js');
 require('./marker.js');
 var useMarks = require('./useMarks.js');
@@ -14,6 +16,7 @@ var useSlide = require('./useSlide.js');
 var useStops = require('./useStops.js');
 var button_vue_vue_type_script_lang = require('./button.vue_vue_type_script_lang.js');
 var marker_vue_vue_type_script_lang = require('./marker.vue_vue_type_script_lang.js');
+var index$1 = require('../../../hooks/use-common-props/index.js');
 var script = vue.defineComponent({
   name: "ElSlider",
@@ -47,9 +50,13 @@ var script = vue.defineComponent({
       type: Boolean,
       default: true
     },
+    size: {
+      type: String,
+      validator: validators.isValidComponentSize
+    },
     inputSize: {
       type: String,
-      default: "small"
+      validator: validators.isValidComponentSize
     },
     showStops: {
       type: Boolean,
@@ -119,6 +126,15 @@ var script = vue.defineComponent({
       setSecondValue
     } = useSlide.useSlide(props, initData, emit);
     const { stops, getStopStyle } = useStops.useStops(props, initData, minValue, maxValue);
+    const sliderWrapperSize = index$1.useSize();
+    const sliderInputSize = vue.computed(() => props.inputSize || sliderWrapperSize.value);
+    const prefix = "el-slider";
+    const sliderKls = vue.computed(() => [
+      prefix,
+      `${prefix}--${sliderWrapperSize.value}`,
+      props.vertical ? "is-vertical" : "",
+      props.showInput ? "el-slider--with-input" : ""
+    ]);
     const markList = useMarks.useMarks(props);
     useWatch(props, initData, minValue, maxValue, emit, elFormItem);
     const precision = vue.computed(() => {
@@ -161,7 +177,10 @@ var script = vue.defineComponent({
       setSecondValue,
       stops,
       markList,
-      sliderWrapper
+      sliderWrapper,
+      sliderWrapperSize,
+      sliderInputSize,
+      sliderKls
     };
   }
 });