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

@element-plus/nightly 0.0.20220104 → 0.0.20220108

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 (367) hide show

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

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

package/es/components/slider/src/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/es/components/slider/src/index.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -3,6 +3,8 @@ import { ElInputNumber } from '../../input-number/index.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../utils/constants.mjs';
 import { on, off } from '../../../utils/dom.mjs';
 import { throwError } from '../../../utils/error.mjs';
+import { isValidComponentSize } from '../../../utils/validators.mjs';
+import '../../../hooks/index.mjs';
 import './button.mjs';
 import './marker.mjs';
 import { useMarks } from './useMarks.mjs';
@@ -10,6 +12,7 @@ import { useSlide } from './useSlide.mjs';
 import { useStops } from './useStops.mjs';
 import script$1 from './button.vue_vue_type_script_lang.mjs';
 import script$2 from './marker.vue_vue_type_script_lang.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 var script = defineComponent({
   name: "ElSlider",
@@ -43,9 +46,13 @@ var script = defineComponent({
       type: Boolean,
       default: true
     },
+    size: {
+      type: String,
+      validator: isValidComponentSize
+    },
     inputSize: {
       type: String,
-      default: "small"
+      validator: isValidComponentSize
     },
     showStops: {
       type: Boolean,
@@ -115,6 +122,15 @@ var script = defineComponent({
       setSecondValue
     } = useSlide(props, initData, emit);
     const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
+    const sliderWrapperSize = useSize();
+    const sliderInputSize = computed(() => props.inputSize || sliderWrapperSize.value);
+    const prefix = "el-slider";
+    const sliderKls = computed(() => [
+      prefix,
+      `${prefix}--${sliderWrapperSize.value}`,
+      props.vertical ? "is-vertical" : "",
+      props.showInput ? "el-slider--with-input" : ""
+    ]);
     const markList = useMarks(props);
     useWatch(props, initData, minValue, maxValue, emit, elFormItem);
     const precision = computed(() => {
@@ -157,7 +173,10 @@ var script = defineComponent({
       setSecondValue,
       stops,
       markList,
-      sliderWrapper
+      sliderWrapper,
+      sliderWrapperSize,
+      sliderInputSize,
+      sliderKls
     };
   }
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/slider/src/index.vue"],"sourcesContent":["<template>\n <div\n ref=\"sliderWrapper\"\n class=\"el-slider\"\n :class=\"{ 'is-vertical': vertical, 'el-slider--with-input': showInput }\"\n role=\"slider\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n :aria-disabled=\"sliderDisabled\"\n >\n <el-input-number\n v-if=\"showInput && !range\"\n ref=\"input\"\n :model-value=\"firstValue\"\n class=\"el-slider__input\"\n :step=\"step\"\n :disabled=\"sliderDisabled\"\n :controls=\"showInputControls\"\n :min=\"min\"\n :max=\"max\"\n :debounce=\"debounce\"\n :size=\"inputSize\"\n @update:model-value=\"setFirstValue\"\n @change=\"emitChange\"\n />\n <div\n ref=\"slider\"\n class=\"el-slider__runway\"\n :class=\"{ 'show-input': showInput && !range, disabled: sliderDisabled }\"\n :style=\"runwayStyle\"\n @click=\"onSliderClick\"\n >\n <div class=\"el-slider__bar\" :style=\"barStyle\"></div>\n <slider-button\n ref=\"firstButton\"\n :model-value=\"firstValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setFirstValue\"\n />\n <slider-button\n v-if=\"range\"\n ref=\"secondButton\"\n :model-value=\"secondValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setSecondValue\"\n />\n <div v-if=\"showStops\">\n <div\n v-for=\"(item, key) in stops\"\n :key=\"key\"\n class=\"el-slider__stop\"\n :style=\"getStopStyle(item)\"\n ></div>\n </div>\n <template v-if=\"markList.length > 0\">\n <div>\n <div\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :style=\"getStopStyle(item.position)\"\n class=\"el-slider__stop el-slider__marks-stop\"\n ></div>\n </div>\n <div class=\"el-slider__marks\">\n <slider-marker\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :mark=\"item.mark\"\n :style=\"getStopStyle(item.position)\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n nextTick,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport ElInputNumber from '@element-plus/components/input-number'\nimport {\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { off, on } from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\nimport SliderButton from './button.vue'\nimport SliderMarker from './marker.vue'\nimport { useMarks } from './useMarks'\nimport { useSlide } from './useSlide'\nimport { useStops } from './useStops'\n\nimport type { PropType, Ref } from 'vue'\nimport type { ComponentSize, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n name: 'ElSlider',\n\n components: {\n ElInputNumber,\n SliderButton,\n SliderMarker,\n },\n\n props: {\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n default: 0,\n },\n min: {\n type: Number,\n default: 0,\n },\n max: {\n type: Number,\n default: 100,\n },\n step: {\n type: Number,\n default: 1,\n },\n showInput: {\n type: Boolean,\n default: false,\n },\n showInputControls: {\n type: Boolean,\n default: true,\n },\n inputSize: {\n type: String as PropType<ComponentSize>,\n default: 'small',\n },\n showStops: {\n type: Boolean,\n default: false,\n },\n showTooltip: {\n type: Boolean,\n default: true,\n },\n formatTooltip: {\n type: Function as PropType<(val: number) => number \| string>,\n default: undefined,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n range: {\n type: Boolean,\n default: false,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n height: {\n type: String,\n default: '',\n },\n debounce: {\n type: Number,\n default: 300,\n },\n label: {\n type: String,\n default: undefined,\n },\n tooltipClass: {\n type: String,\n default: undefined,\n },\n marks: Object,\n },\n\n emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n firstValue: 0,\n secondValue: 0,\n oldValue: 0,\n dragging: false,\n sliderSize: 1,\n })\n\n const {\n elFormItem,\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n minValue,\n maxValue,\n runwayStyle,\n barStyle,\n resetSize,\n emitChange,\n onSliderClick,\n setFirstValue,\n setSecondValue,\n } = useSlide(props, initData, emit)\n\n const { stops, getStopStyle } = useStops(\n props,\n initData,\n minValue,\n maxValue\n )\n\n const markList = useMarks(props)\n\n useWatch(props, initData, minValue, maxValue, emit, elFormItem)\n\n const precision = computed(() => {\n const precisions = [props.min, props.max, props.step].map((item) => {\n const decimal = `${item}`.split('.')[1]\n return decimal ? decimal.length : 0\n })\n return Math.max.apply(null, precisions)\n })\n\n const { sliderWrapper } = useLifecycle(props, initData, resetSize)\n\n const { firstValue, secondValue, oldValue, dragging, sliderSize } =\n toRefs(initData)\n\n const updateDragging = (val: boolean) => {\n initData.dragging = val\n }\n\n provide('SliderProvider', {\n ...toRefs(props),\n sliderSize,\n disabled: sliderDisabled,\n precision,\n emitChange,\n resetSize,\n updateDragging,\n })\n\n return {\n firstValue,\n secondValue,\n oldValue,\n dragging,\n sliderSize,\n\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n runwayStyle,\n barStyle,\n emitChange,\n onSliderClick,\n getStopStyle,\n setFirstValue,\n setSecondValue,\n\n stops,\n markList,\n\n sliderWrapper,\n }\n },\n})\n\nconst useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {\n const _emit = (val: number \| number[]) => {\n emit(UPDATE_MODEL_EVENT, val)\n emit(INPUT_EVENT, val)\n }\n\n const valueChanged = () => {\n if (props.range) {\n return ![minValue.value, maxValue.value].every(\n (item, index) => item === initData.oldValue[index]\n )\n } else {\n return props.modelValue !== initData.oldValue\n }\n }\n\n const setValues = () => {\n if (props.min > props.max) {\n throwError('Slider', 'min should not be greater than max.')\n return\n }\n const val = props.modelValue\n if (props.range && Array.isArray(val)) {\n if (val[1] < props.min) {\n _emit([props.min, props.min])\n } else if (val[0] > props.max) {\n _emit([props.max, props.max])\n } else if (val[0] < props.min) {\n _emit([props.min, val[1]])\n } else if (val[1] > props.max) {\n _emit([val[0], props.max])\n } else {\n initData.firstValue = val[0]\n initData.secondValue = val[1]\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val.slice()\n }\n }\n } else if (!props.range && typeof val === 'number' && !isNaN(val)) {\n if (val < props.min) {\n _emit(props.min)\n } else if (val > props.max) {\n _emit(props.max)\n } else {\n initData.firstValue = val\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val\n }\n }\n }\n }\n\n setValues()\n\n watch(\n () => initData.dragging,\n (val) => {\n if (!val) {\n setValues()\n }\n }\n )\n\n watch(\n () => props.modelValue,\n (val, oldVal) => {\n if (\n initData.dragging \|\|\n (Array.isArray(val) &&\n Array.isArray(oldVal) &&\n val.every((item, index) => item === oldVal[index]))\n ) {\n return\n }\n setValues()\n }\n )\n\n watch(\n () => [props.min, props.max],\n () => {\n setValues()\n }\n )\n}\n\nconst useLifecycle = (props, initData, resetSize) => {\n const sliderWrapper: Ref<Nullable<HTMLElement>> = ref(null)\n\n onMounted(async () => {\n let valuetext\n if (props.range) {\n if (Array.isArray(props.modelValue)) {\n initData.firstValue = Math.max(props.min, props.modelValue[0])\n initData.secondValue = Math.min(props.max, props.modelValue[1])\n } else {\n initData.firstValue = props.min\n initData.secondValue = props.max\n }\n initData.oldValue = [initData.firstValue, initData.secondValue]\n valuetext = `${initData.firstValue}-${initData.secondValue}`\n } else {\n if (typeof props.modelValue !== 'number' \|\| isNaN(props.modelValue)) {\n initData.firstValue = props.min\n } else {\n initData.firstValue = Math.min(\n props.max,\n Math.max(props.min, props.modelValue)\n )\n }\n initData.oldValue = initData.firstValue\n valuetext = initData.firstValue\n }\n\n sliderWrapper.value.setAttribute('aria-valuetext', valuetext)\n\n // label screen reader\n sliderWrapper.value.setAttribute(\n 'aria-label',\n props.label ? props.label : `slider between ${props.min} and ${props.max}`\n )\n\n on(window, 'resize', resetSize)\n\n await nextTick()\n resetSize()\n })\n\n onBeforeUnmount(() => {\n off(window, 'resize', resetSize)\n })\n\n return {\n sliderWrapper,\n }\n}\n</script>\n"],"names":["SliderMarker"],"mappings":"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"}
1	+ {"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/slider/src/index.vue"],"sourcesContent":["<template>\n <div\n ref=\"sliderWrapper\"\n :class=\"sliderKls\"\n role=\"slider\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n :aria-disabled=\"sliderDisabled\"\n >\n <div\n ref=\"slider\"\n class=\"el-slider__runway\"\n :class=\"{ 'show-input': showInput && !range, disabled: sliderDisabled }\"\n :style=\"runwayStyle\"\n @click=\"onSliderClick\"\n >\n <div class=\"el-slider__bar\" :style=\"barStyle\"></div>\n <slider-button\n ref=\"firstButton\"\n :model-value=\"firstValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setFirstValue\"\n />\n <slider-button\n v-if=\"range\"\n ref=\"secondButton\"\n :model-value=\"secondValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setSecondValue\"\n />\n <div v-if=\"showStops\">\n <div\n v-for=\"(item, key) in stops\"\n :key=\"key\"\n class=\"el-slider__stop\"\n :style=\"getStopStyle(item)\"\n ></div>\n </div>\n <template v-if=\"markList.length > 0\">\n <div>\n <div\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :style=\"getStopStyle(item.position)\"\n class=\"el-slider__stop el-slider__marks-stop\"\n ></div>\n </div>\n <div class=\"el-slider__marks\">\n <slider-marker\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :mark=\"item.mark\"\n :style=\"getStopStyle(item.position)\"\n />\n </div>\n </template>\n </div>\n <el-input-number\n v-if=\"showInput && !range\"\n ref=\"input\"\n :model-value=\"firstValue\"\n class=\"el-slider__input\"\n :step=\"step\"\n :disabled=\"sliderDisabled\"\n :controls=\"showInputControls\"\n :min=\"min\"\n :max=\"max\"\n :debounce=\"debounce\"\n :size=\"sliderInputSize\"\n @update:model-value=\"setFirstValue\"\n @change=\"emitChange\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n nextTick,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport ElInputNumber from '@element-plus/components/input-number'\nimport {\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { off, on } from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { useSize } from '@element-plus/hooks'\nimport SliderButton from './button.vue'\nimport SliderMarker from './marker.vue'\nimport { useMarks } from './useMarks'\nimport { useSlide } from './useSlide'\nimport { useStops } from './useStops'\n\nimport type { PropType, Ref } from 'vue'\nimport type { ComponentSize, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n name: 'ElSlider',\n\n components: {\n ElInputNumber,\n SliderButton,\n SliderMarker,\n },\n\n props: {\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n default: 0,\n },\n min: {\n type: Number,\n default: 0,\n },\n max: {\n type: Number,\n default: 100,\n },\n step: {\n type: Number,\n default: 1,\n },\n showInput: {\n type: Boolean,\n default: false,\n },\n showInputControls: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n inputSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n showStops: {\n type: Boolean,\n default: false,\n },\n showTooltip: {\n type: Boolean,\n default: true,\n },\n formatTooltip: {\n type: Function as PropType<(val: number) => number \| string>,\n default: undefined,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n range: {\n type: Boolean,\n default: false,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n height: {\n type: String,\n default: '',\n },\n debounce: {\n type: Number,\n default: 300,\n },\n label: {\n type: String,\n default: undefined,\n },\n tooltipClass: {\n type: String,\n default: undefined,\n },\n marks: Object,\n },\n\n emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n firstValue: 0,\n secondValue: 0,\n oldValue: 0,\n dragging: false,\n sliderSize: 1,\n })\n\n const {\n elFormItem,\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n minValue,\n maxValue,\n runwayStyle,\n barStyle,\n resetSize,\n emitChange,\n onSliderClick,\n setFirstValue,\n setSecondValue,\n } = useSlide(props, initData, emit)\n\n const { stops, getStopStyle } = useStops(\n props,\n initData,\n minValue,\n maxValue\n )\n\n const sliderWrapperSize = useSize()\n const sliderInputSize = computed(\n () => props.inputSize \|\| sliderWrapperSize.value\n )\n\n const prefix = 'el-slider'\n const sliderKls = computed(() => [\n prefix,\n `${prefix}--${sliderWrapperSize.value}`,\n props.vertical ? 'is-vertical' : '',\n props.showInput ? 'el-slider--with-input' : '',\n ])\n\n const markList = useMarks(props)\n\n useWatch(props, initData, minValue, maxValue, emit, elFormItem)\n\n const precision = computed(() => {\n const precisions = [props.min, props.max, props.step].map((item) => {\n const decimal = `${item}`.split('.')[1]\n return decimal ? decimal.length : 0\n })\n return Math.max.apply(null, precisions)\n })\n\n const { sliderWrapper } = useLifecycle(props, initData, resetSize)\n\n const { firstValue, secondValue, oldValue, dragging, sliderSize } =\n toRefs(initData)\n\n const updateDragging = (val: boolean) => {\n initData.dragging = val\n }\n\n provide('SliderProvider', {\n ...toRefs(props),\n sliderSize,\n disabled: sliderDisabled,\n precision,\n emitChange,\n resetSize,\n updateDragging,\n })\n\n return {\n firstValue,\n secondValue,\n oldValue,\n dragging,\n sliderSize,\n\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n runwayStyle,\n barStyle,\n emitChange,\n onSliderClick,\n getStopStyle,\n setFirstValue,\n setSecondValue,\n\n stops,\n markList,\n\n sliderWrapper,\n sliderWrapperSize,\n sliderInputSize,\n sliderKls,\n }\n },\n})\n\nconst useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {\n const _emit = (val: number \| number[]) => {\n emit(UPDATE_MODEL_EVENT, val)\n emit(INPUT_EVENT, val)\n }\n\n const valueChanged = () => {\n if (props.range) {\n return ![minValue.value, maxValue.value].every(\n (item, index) => item === initData.oldValue[index]\n )\n } else {\n return props.modelValue !== initData.oldValue\n }\n }\n\n const setValues = () => {\n if (props.min > props.max) {\n throwError('Slider', 'min should not be greater than max.')\n return\n }\n const val = props.modelValue\n if (props.range && Array.isArray(val)) {\n if (val[1] < props.min) {\n _emit([props.min, props.min])\n } else if (val[0] > props.max) {\n _emit([props.max, props.max])\n } else if (val[0] < props.min) {\n _emit([props.min, val[1]])\n } else if (val[1] > props.max) {\n _emit([val[0], props.max])\n } else {\n initData.firstValue = val[0]\n initData.secondValue = val[1]\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val.slice()\n }\n }\n } else if (!props.range && typeof val === 'number' && !isNaN(val)) {\n if (val < props.min) {\n _emit(props.min)\n } else if (val > props.max) {\n _emit(props.max)\n } else {\n initData.firstValue = val\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val\n }\n }\n }\n }\n\n setValues()\n\n watch(\n () => initData.dragging,\n (val) => {\n if (!val) {\n setValues()\n }\n }\n )\n\n watch(\n () => props.modelValue,\n (val, oldVal) => {\n if (\n initData.dragging \|\|\n (Array.isArray(val) &&\n Array.isArray(oldVal) &&\n val.every((item, index) => item === oldVal[index]))\n ) {\n return\n }\n setValues()\n }\n )\n\n watch(\n () => [props.min, props.max],\n () => {\n setValues()\n }\n )\n}\n\nconst useLifecycle = (props, initData, resetSize) => {\n const sliderWrapper: Ref<Nullable<HTMLElement>> = ref(null)\n\n onMounted(async () => {\n let valuetext\n if (props.range) {\n if (Array.isArray(props.modelValue)) {\n initData.firstValue = Math.max(props.min, props.modelValue[0])\n initData.secondValue = Math.min(props.max, props.modelValue[1])\n } else {\n initData.firstValue = props.min\n initData.secondValue = props.max\n }\n initData.oldValue = [initData.firstValue, initData.secondValue]\n valuetext = `${initData.firstValue}-${initData.secondValue}`\n } else {\n if (typeof props.modelValue !== 'number' \|\| isNaN(props.modelValue)) {\n initData.firstValue = props.min\n } else {\n initData.firstValue = Math.min(\n props.max,\n Math.max(props.min, props.modelValue)\n )\n }\n initData.oldValue = initData.firstValue\n valuetext = initData.firstValue\n }\n\n sliderWrapper.value.setAttribute('aria-valuetext', valuetext)\n\n // label screen reader\n sliderWrapper.value.setAttribute(\n 'aria-label',\n props.label ? props.label : `slider between ${props.min} and ${props.max}`\n )\n\n on(window, 'resize', resetSize)\n\n await nextTick()\n resetSize()\n })\n\n onBeforeUnmount(() => {\n off(window, 'resize', resetSize)\n })\n\n return {\n sliderWrapper,\n }\n}\n</script>\n"],"names":["SliderMarker"],"mappings":"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"}

package/es/components/slider/src/index.vue_vue_type_template_id_24c42d04_lang.mjs CHANGED Viewed

@@ -1,36 +1,21 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, createElementVNode, normalizeStyle, createVNode, Fragment, renderList } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, createBlock, createCommentVNode, Fragment, renderList } from 'vue';
 const _hoisted_1 = ["aria-valuemin", "aria-valuemax", "aria-orientation", "aria-disabled"];
 const _hoisted_2 = { key: 1 };
 const _hoisted_3 = { class: "el-slider__marks" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_input_number = resolveComponent("el-input-number");
   const _component_slider_button = resolveComponent("slider-button");
   const _component_slider_marker = resolveComponent("slider-marker");
+  const _component_el_input_number = resolveComponent("el-input-number");
   return openBlock(), createElementBlock("div", {
     ref: "sliderWrapper",
-    class: normalizeClass(["el-slider", { "is-vertical": _ctx.vertical, "el-slider--with-input": _ctx.showInput }]),
+    class: normalizeClass(_ctx.sliderKls),
     role: "slider",
     "aria-valuemin": _ctx.min,
     "aria-valuemax": _ctx.max,
     "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
     "aria-disabled": _ctx.sliderDisabled
   }, [
-    _ctx.showInput && !_ctx.range ? (openBlock(), createBlock(_component_el_input_number, {
-      key: 0,
-      ref: "input",
-      "model-value": _ctx.firstValue,
-      class: "el-slider__input",
-      step: _ctx.step,
-      disabled: _ctx.sliderDisabled,
-      controls: _ctx.showInputControls,
-      min: _ctx.min,
-      max: _ctx.max,
-      debounce: _ctx.debounce,
-      size: _ctx.inputSize,
-      "onUpdate:modelValue": _ctx.setFirstValue,
-      onChange: _ctx.emitChange
-    }, null, 8, ["model-value", "step", "disabled", "controls", "min", "max", "debounce", "size", "onUpdate:modelValue", "onChange"])) : createCommentVNode("v-if", true),
     createElementVNode("div", {
       ref: "slider",
       class: normalizeClass(["el-slider__runway", { "show-input": _ctx.showInput && !_ctx.range, disabled: _ctx.sliderDisabled }]),
@@ -85,7 +70,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128))
         ])
       ], 64)) : createCommentVNode("v-if", true)
-    ], 6)
+    ], 6),
+    _ctx.showInput && !_ctx.range ? (openBlock(), createBlock(_component_el_input_number, {
+      key: 0,
+      ref: "input",
+      "model-value": _ctx.firstValue,
+      class: "el-slider__input",
+      step: _ctx.step,
+      disabled: _ctx.sliderDisabled,
+      controls: _ctx.showInputControls,
+      min: _ctx.min,
+      max: _ctx.max,
+      debounce: _ctx.debounce,
+      size: _ctx.sliderInputSize,
+      "onUpdate:modelValue": _ctx.setFirstValue,
+      onChange: _ctx.emitChange
+    }, null, 8, ["model-value", "step", "disabled", "controls", "min", "max", "debounce", "size", "onUpdate:modelValue", "onChange"])) : createCommentVNode("v-if", true)
   ], 10, _hoisted_1);
 }

package/es/components/slider/src/index.vue_vue_type_template_id_24c42d04_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue_vue_type_template_id_24c42d04_lang.mjs","sources":["../../../../../../packages/components/slider/src/index.vue?vue&type=template&id=24c42d04&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"sliderWrapper\"\n class=\"el-slider\"\n :class=\"{ 'is-vertical': vertical, 'el-slider--with-input': showInput }\"\n role=\"slider\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n :aria-disabled=\"sliderDisabled\"\n >\n <el-input-number\n v-if=\"showInput && !range\"\n ref=\"input\"\n :model-value=\"firstValue\"\n class=\"el-slider__input\"\n :step=\"step\"\n :disabled=\"sliderDisabled\"\n :controls=\"showInputControls\"\n :min=\"min\"\n :max=\"max\"\n :debounce=\"debounce\"\n :size=\"inputSize\"\n @update:model-value=\"setFirstValue\"\n @change=\"emitChange\"\n />\n <div\n ref=\"slider\"\n class=\"el-slider__runway\"\n :class=\"{ 'show-input': showInput && !range, disabled: sliderDisabled }\"\n :style=\"runwayStyle\"\n @click=\"onSliderClick\"\n >\n <div class=\"el-slider__bar\" :style=\"barStyle\"></div>\n <slider-button\n ref=\"firstButton\"\n :model-value=\"firstValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setFirstValue\"\n />\n <slider-button\n v-if=\"range\"\n ref=\"secondButton\"\n :model-value=\"secondValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setSecondValue\"\n />\n <div v-if=\"showStops\">\n <div\n v-for=\"(item, key) in stops\"\n :key=\"key\"\n class=\"el-slider__stop\"\n :style=\"getStopStyle(item)\"\n ></div>\n </div>\n <template v-if=\"markList.length > 0\">\n <div>\n <div\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :style=\"getStopStyle(item.position)\"\n class=\"el-slider__stop el-slider__marks-stop\"\n ></div>\n </div>\n <div class=\"el-slider__marks\">\n <slider-marker\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :mark=\"item.mark\"\n :style=\"getStopStyle(item.position)\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n nextTick,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport ElInputNumber from '@element-plus/components/input-number'\nimport {\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { off, on } from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\nimport SliderButton from './button.vue'\nimport SliderMarker from './marker.vue'\nimport { useMarks } from './useMarks'\nimport { useSlide } from './useSlide'\nimport { useStops } from './useStops'\n\nimport type { PropType, Ref } from 'vue'\nimport type { ComponentSize, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n name: 'ElSlider',\n\n components: {\n ElInputNumber,\n SliderButton,\n SliderMarker,\n },\n\n props: {\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n default: 0,\n },\n min: {\n type: Number,\n default: 0,\n },\n max: {\n type: Number,\n default: 100,\n },\n step: {\n type: Number,\n default: 1,\n },\n showInput: {\n type: Boolean,\n default: false,\n },\n showInputControls: {\n type: Boolean,\n default: true,\n },\n inputSize: {\n type: String as PropType<ComponentSize>,\n default: 'small',\n },\n showStops: {\n type: Boolean,\n default: false,\n },\n showTooltip: {\n type: Boolean,\n default: true,\n },\n formatTooltip: {\n type: Function as PropType<(val: number) => number \| string>,\n default: undefined,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n range: {\n type: Boolean,\n default: false,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n height: {\n type: String,\n default: '',\n },\n debounce: {\n type: Number,\n default: 300,\n },\n label: {\n type: String,\n default: undefined,\n },\n tooltipClass: {\n type: String,\n default: undefined,\n },\n marks: Object,\n },\n\n emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n firstValue: 0,\n secondValue: 0,\n oldValue: 0,\n dragging: false,\n sliderSize: 1,\n })\n\n const {\n elFormItem,\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n minValue,\n maxValue,\n runwayStyle,\n barStyle,\n resetSize,\n emitChange,\n onSliderClick,\n setFirstValue,\n setSecondValue,\n } = useSlide(props, initData, emit)\n\n const { stops, getStopStyle } = useStops(\n props,\n initData,\n minValue,\n maxValue\n )\n\n const markList = useMarks(props)\n\n useWatch(props, initData, minValue, maxValue, emit, elFormItem)\n\n const precision = computed(() => {\n const precisions = [props.min, props.max, props.step].map((item) => {\n const decimal = `${item}`.split('.')[1]\n return decimal ? decimal.length : 0\n })\n return Math.max.apply(null, precisions)\n })\n\n const { sliderWrapper } = useLifecycle(props, initData, resetSize)\n\n const { firstValue, secondValue, oldValue, dragging, sliderSize } =\n toRefs(initData)\n\n const updateDragging = (val: boolean) => {\n initData.dragging = val\n }\n\n provide('SliderProvider', {\n ...toRefs(props),\n sliderSize,\n disabled: sliderDisabled,\n precision,\n emitChange,\n resetSize,\n updateDragging,\n })\n\n return {\n firstValue,\n secondValue,\n oldValue,\n dragging,\n sliderSize,\n\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n runwayStyle,\n barStyle,\n emitChange,\n onSliderClick,\n getStopStyle,\n setFirstValue,\n setSecondValue,\n\n stops,\n markList,\n\n sliderWrapper,\n }\n },\n})\n\nconst useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {\n const _emit = (val: number \| number[]) => {\n emit(UPDATE_MODEL_EVENT, val)\n emit(INPUT_EVENT, val)\n }\n\n const valueChanged = () => {\n if (props.range) {\n return ![minValue.value, maxValue.value].every(\n (item, index) => item === initData.oldValue[index]\n )\n } else {\n return props.modelValue !== initData.oldValue\n }\n }\n\n const setValues = () => {\n if (props.min > props.max) {\n throwError('Slider', 'min should not be greater than max.')\n return\n }\n const val = props.modelValue\n if (props.range && Array.isArray(val)) {\n if (val[1] < props.min) {\n _emit([props.min, props.min])\n } else if (val[0] > props.max) {\n _emit([props.max, props.max])\n } else if (val[0] < props.min) {\n _emit([props.min, val[1]])\n } else if (val[1] > props.max) {\n _emit([val[0], props.max])\n } else {\n initData.firstValue = val[0]\n initData.secondValue = val[1]\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val.slice()\n }\n }\n } else if (!props.range && typeof val === 'number' && !isNaN(val)) {\n if (val < props.min) {\n _emit(props.min)\n } else if (val > props.max) {\n _emit(props.max)\n } else {\n initData.firstValue = val\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val\n }\n }\n }\n }\n\n setValues()\n\n watch(\n () => initData.dragging,\n (val) => {\n if (!val) {\n setValues()\n }\n }\n )\n\n watch(\n () => props.modelValue,\n (val, oldVal) => {\n if (\n initData.dragging \|\|\n (Array.isArray(val) &&\n Array.isArray(oldVal) &&\n val.every((item, index) => item === oldVal[index]))\n ) {\n return\n }\n setValues()\n }\n )\n\n watch(\n () => [props.min, props.max],\n () => {\n setValues()\n }\n )\n}\n\nconst useLifecycle = (props, initData, resetSize) => {\n const sliderWrapper: Ref<Nullable<HTMLElement>> = ref(null)\n\n onMounted(async () => {\n let valuetext\n if (props.range) {\n if (Array.isArray(props.modelValue)) {\n initData.firstValue = Math.max(props.min, props.modelValue[0])\n initData.secondValue = Math.min(props.max, props.modelValue[1])\n } else {\n initData.firstValue = props.min\n initData.secondValue = props.max\n }\n initData.oldValue = [initData.firstValue, initData.secondValue]\n valuetext = `${initData.firstValue}-${initData.secondValue}`\n } else {\n if (typeof props.modelValue !== 'number' \|\| isNaN(props.modelValue)) {\n initData.firstValue = props.min\n } else {\n initData.firstValue = Math.min(\n props.max,\n Math.max(props.min, props.modelValue)\n )\n }\n initData.oldValue = initData.firstValue\n valuetext = initData.firstValue\n }\n\n sliderWrapper.value.setAttribute('aria-valuetext', valuetext)\n\n // label screen reader\n sliderWrapper.value.setAttribute(\n 'aria-label',\n props.label ? props.label : `slider between ${props.min} and ${props.max}`\n )\n\n on(window, 'resize', resetSize)\n\n await nextTick()\n resetSize()\n })\n\n onBeforeUnmount(() => {\n off(window, 'resize', resetSize)\n })\n\n return {\n sliderWrapper,\n }\n}\n</script>\n"],"names":["_createElementVNode","_createElementBlock","_createBlock"],"mappings":";;;;;;;;;;;;;IAEI;IACA;IAEA;IACC,eAAa,EAAE;;IAEf,kBAAgB;;;;;;;;eAOV;gBACE;oBACI;UACV;;;;;;;;;;MASDA;;4CAGmB;aACb;;;QAED;QAAwB,uBAAO;;;aAE9B;;QAEH;QACA;QACA;;;;;;wBAKW,EAAEC;;YAEb;YACA;;;;;;;oBAKO;;;;;;;;;;gCAONC;;kBAEG;wCACO,kBAAa;yBACf;;;;;;;;;;"}
1	+ {"version":3,"file":"index.vue_vue_type_template_id_24c42d04_lang.mjs","sources":["../../../../../../packages/components/slider/src/index.vue?vue&type=template&id=24c42d04&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"sliderWrapper\"\n :class=\"sliderKls\"\n role=\"slider\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n :aria-disabled=\"sliderDisabled\"\n >\n <div\n ref=\"slider\"\n class=\"el-slider__runway\"\n :class=\"{ 'show-input': showInput && !range, disabled: sliderDisabled }\"\n :style=\"runwayStyle\"\n @click=\"onSliderClick\"\n >\n <div class=\"el-slider__bar\" :style=\"barStyle\"></div>\n <slider-button\n ref=\"firstButton\"\n :model-value=\"firstValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setFirstValue\"\n />\n <slider-button\n v-if=\"range\"\n ref=\"secondButton\"\n :model-value=\"secondValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n @update:model-value=\"setSecondValue\"\n />\n <div v-if=\"showStops\">\n <div\n v-for=\"(item, key) in stops\"\n :key=\"key\"\n class=\"el-slider__stop\"\n :style=\"getStopStyle(item)\"\n ></div>\n </div>\n <template v-if=\"markList.length > 0\">\n <div>\n <div\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :style=\"getStopStyle(item.position)\"\n class=\"el-slider__stop el-slider__marks-stop\"\n ></div>\n </div>\n <div class=\"el-slider__marks\">\n <slider-marker\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :mark=\"item.mark\"\n :style=\"getStopStyle(item.position)\"\n />\n </div>\n </template>\n </div>\n <el-input-number\n v-if=\"showInput && !range\"\n ref=\"input\"\n :model-value=\"firstValue\"\n class=\"el-slider__input\"\n :step=\"step\"\n :disabled=\"sliderDisabled\"\n :controls=\"showInputControls\"\n :min=\"min\"\n :max=\"max\"\n :debounce=\"debounce\"\n :size=\"sliderInputSize\"\n @update:model-value=\"setFirstValue\"\n @change=\"emitChange\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n nextTick,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport ElInputNumber from '@element-plus/components/input-number'\nimport {\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { off, on } from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { useSize } from '@element-plus/hooks'\nimport SliderButton from './button.vue'\nimport SliderMarker from './marker.vue'\nimport { useMarks } from './useMarks'\nimport { useSlide } from './useSlide'\nimport { useStops } from './useStops'\n\nimport type { PropType, Ref } from 'vue'\nimport type { ComponentSize, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n name: 'ElSlider',\n\n components: {\n ElInputNumber,\n SliderButton,\n SliderMarker,\n },\n\n props: {\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n default: 0,\n },\n min: {\n type: Number,\n default: 0,\n },\n max: {\n type: Number,\n default: 100,\n },\n step: {\n type: Number,\n default: 1,\n },\n showInput: {\n type: Boolean,\n default: false,\n },\n showInputControls: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n inputSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n showStops: {\n type: Boolean,\n default: false,\n },\n showTooltip: {\n type: Boolean,\n default: true,\n },\n formatTooltip: {\n type: Function as PropType<(val: number) => number \| string>,\n default: undefined,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n range: {\n type: Boolean,\n default: false,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n height: {\n type: String,\n default: '',\n },\n debounce: {\n type: Number,\n default: 300,\n },\n label: {\n type: String,\n default: undefined,\n },\n tooltipClass: {\n type: String,\n default: undefined,\n },\n marks: Object,\n },\n\n emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],\n\n setup(props, { emit }) {\n const initData = reactive({\n firstValue: 0,\n secondValue: 0,\n oldValue: 0,\n dragging: false,\n sliderSize: 1,\n })\n\n const {\n elFormItem,\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n minValue,\n maxValue,\n runwayStyle,\n barStyle,\n resetSize,\n emitChange,\n onSliderClick,\n setFirstValue,\n setSecondValue,\n } = useSlide(props, initData, emit)\n\n const { stops, getStopStyle } = useStops(\n props,\n initData,\n minValue,\n maxValue\n )\n\n const sliderWrapperSize = useSize()\n const sliderInputSize = computed(\n () => props.inputSize \|\| sliderWrapperSize.value\n )\n\n const prefix = 'el-slider'\n const sliderKls = computed(() => [\n prefix,\n `${prefix}--${sliderWrapperSize.value}`,\n props.vertical ? 'is-vertical' : '',\n props.showInput ? 'el-slider--with-input' : '',\n ])\n\n const markList = useMarks(props)\n\n useWatch(props, initData, minValue, maxValue, emit, elFormItem)\n\n const precision = computed(() => {\n const precisions = [props.min, props.max, props.step].map((item) => {\n const decimal = `${item}`.split('.')[1]\n return decimal ? decimal.length : 0\n })\n return Math.max.apply(null, precisions)\n })\n\n const { sliderWrapper } = useLifecycle(props, initData, resetSize)\n\n const { firstValue, secondValue, oldValue, dragging, sliderSize } =\n toRefs(initData)\n\n const updateDragging = (val: boolean) => {\n initData.dragging = val\n }\n\n provide('SliderProvider', {\n ...toRefs(props),\n sliderSize,\n disabled: sliderDisabled,\n precision,\n emitChange,\n resetSize,\n updateDragging,\n })\n\n return {\n firstValue,\n secondValue,\n oldValue,\n dragging,\n sliderSize,\n\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n runwayStyle,\n barStyle,\n emitChange,\n onSliderClick,\n getStopStyle,\n setFirstValue,\n setSecondValue,\n\n stops,\n markList,\n\n sliderWrapper,\n sliderWrapperSize,\n sliderInputSize,\n sliderKls,\n }\n },\n})\n\nconst useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {\n const _emit = (val: number \| number[]) => {\n emit(UPDATE_MODEL_EVENT, val)\n emit(INPUT_EVENT, val)\n }\n\n const valueChanged = () => {\n if (props.range) {\n return ![minValue.value, maxValue.value].every(\n (item, index) => item === initData.oldValue[index]\n )\n } else {\n return props.modelValue !== initData.oldValue\n }\n }\n\n const setValues = () => {\n if (props.min > props.max) {\n throwError('Slider', 'min should not be greater than max.')\n return\n }\n const val = props.modelValue\n if (props.range && Array.isArray(val)) {\n if (val[1] < props.min) {\n _emit([props.min, props.min])\n } else if (val[0] > props.max) {\n _emit([props.max, props.max])\n } else if (val[0] < props.min) {\n _emit([props.min, val[1]])\n } else if (val[1] > props.max) {\n _emit([val[0], props.max])\n } else {\n initData.firstValue = val[0]\n initData.secondValue = val[1]\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val.slice()\n }\n }\n } else if (!props.range && typeof val === 'number' && !isNaN(val)) {\n if (val < props.min) {\n _emit(props.min)\n } else if (val > props.max) {\n _emit(props.max)\n } else {\n initData.firstValue = val\n if (valueChanged()) {\n elFormItem.validate?.('change')\n initData.oldValue = val\n }\n }\n }\n }\n\n setValues()\n\n watch(\n () => initData.dragging,\n (val) => {\n if (!val) {\n setValues()\n }\n }\n )\n\n watch(\n () => props.modelValue,\n (val, oldVal) => {\n if (\n initData.dragging \|\|\n (Array.isArray(val) &&\n Array.isArray(oldVal) &&\n val.every((item, index) => item === oldVal[index]))\n ) {\n return\n }\n setValues()\n }\n )\n\n watch(\n () => [props.min, props.max],\n () => {\n setValues()\n }\n )\n}\n\nconst useLifecycle = (props, initData, resetSize) => {\n const sliderWrapper: Ref<Nullable<HTMLElement>> = ref(null)\n\n onMounted(async () => {\n let valuetext\n if (props.range) {\n if (Array.isArray(props.modelValue)) {\n initData.firstValue = Math.max(props.min, props.modelValue[0])\n initData.secondValue = Math.min(props.max, props.modelValue[1])\n } else {\n initData.firstValue = props.min\n initData.secondValue = props.max\n }\n initData.oldValue = [initData.firstValue, initData.secondValue]\n valuetext = `${initData.firstValue}-${initData.secondValue}`\n } else {\n if (typeof props.modelValue !== 'number' \|\| isNaN(props.modelValue)) {\n initData.firstValue = props.min\n } else {\n initData.firstValue = Math.min(\n props.max,\n Math.max(props.min, props.modelValue)\n )\n }\n initData.oldValue = initData.firstValue\n valuetext = initData.firstValue\n }\n\n sliderWrapper.value.setAttribute('aria-valuetext', valuetext)\n\n // label screen reader\n sliderWrapper.value.setAttribute(\n 'aria-label',\n props.label ? props.label : `slider between ${props.min} and ${props.max}`\n )\n\n on(window, 'resize', resetSize)\n\n await nextTick()\n resetSize()\n })\n\n onBeforeUnmount(() => {\n off(window, 'resize', resetSize)\n })\n\n return {\n sliderWrapper,\n }\n}\n</script>\n"],"names":["_createElementVNode","_createElementBlock"],"mappings":";;;;;;;;;;;;;IAEI;IACC;IACD;IACC,eAAa,EAAE;;IAEfA,mBAAkB;mBACL;;;MAGZ;;MAGCA;aACK;;;;QAEuB,KAAK;;;QAEhC;QACC;gBACQ,EAAE;;QAEV;;;;;;;oBAMQ;0BACKC,kBAAc;;;;;;;;mBAMtB;;oBAEE;;;;;qBAGe;;;gCAErB;;;;kBAIE,OAAM;;;;;;;kBAML,KAAK;;kBAEL;;;;;;;;;;;;iBASD;;;;;;"}

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

@@ -18,11 +18,13 @@ export declare const ElSwitch: import("../../utils/types").SFCWithInstall<import
     readonly id: StringConstructor;
     readonly loading: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly beforeChange: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<() => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    readonly size: import("../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
 }, {
     input: import("vue").Ref<HTMLInputElement | undefined>;
     core: import("vue").Ref<HTMLSpanElement | undefined>;
     switchDisabled: import("vue").ComputedRef<boolean>;
     checked: import("vue").ComputedRef<boolean>;
+    switchKls: import("vue").ComputedRef<string[]>;
     handleChange: () => void;
     switchValue: () => void;
     focus: () => void;
@@ -50,11 +52,12 @@ export declare const ElSwitch: import("../../utils/types").SFCWithInstall<import
     readonly id?: unknown;
     readonly loading?: unknown;
     readonly beforeChange?: unknown;
+    readonly size?: unknown;
 } & {
     disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     loading: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    name: string;
     modelValue: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    name: string;
     width: number;
     borderColor: string;
     validateEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -69,6 +72,7 @@ export declare const ElSwitch: import("../../utils/types").SFCWithInstall<import
     activeValue: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     inactiveValue: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
 } & {
+    size?: import("../../utils/props").BuildPropType<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown> | undefined;
     id?: string | undefined;
     beforeChange?: (() => boolean | Promise<boolean>) | undefined;
 }> & {
@@ -76,10 +80,11 @@ export declare const ElSwitch: import("../../utils/types").SFCWithInstall<import
     onInput?: ((val: string | number | boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;
 }, {
+    size: import("../../utils/props").BuildPropType<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown>;
     disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     loading: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    name: string;
     modelValue: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    name: string;
     width: number;
     borderColor: string;
     validateEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/switch/src/switch.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { ComponentSize } from 'element-plus/es/utils/types';
 import type Switch from './switch.vue';
 import type { Component, ExtractPropTypes } from 'vue';
 export declare const switchProps: {
@@ -20,6 +21,7 @@ export declare const switchProps: {
     readonly id: StringConstructor;
     readonly loading: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly beforeChange: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<() => Promise<boolean> | boolean>, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<(new (...args: any[]) => ComponentSize & {}) | (() => ComponentSize) | ((new (...args: any[]) => ComponentSize & {}) | (() => ComponentSize))[], unknown, unknown, unknown, unknown>;
 };
 export declare type SwitchProps = ExtractPropTypes<typeof switchProps>;
 export declare const switchEmits: {

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

@@ -1,6 +1,7 @@
 import { buildProps, definePropType } from '../../../utils/props.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../utils/constants.mjs';
 import { isBool, isNumber } from '../../../utils/util.mjs';
+import { isValidComponentSize } from '../../../utils/validators.mjs';
 import { isString } from '@vue/shared';
 const switchProps = buildProps({
@@ -75,6 +76,10 @@ const switchProps = buildProps({
   },
   beforeChange: {
     type: definePropType(Function)
+  },
+  size: {
+    type: String,
+    validator: isValidComponentSize
   }
 });
 const switchEmits = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.mjs","sources":["../../../../../../packages/components/switch/src/switch.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport {\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { isBool, isNumber, isString } from '@element-plus/utils/util'\nimport type Switch from './switch.vue'\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const switchProps = buildProps({\n modelValue: {\n type: [Boolean, String, Number],\n default: false,\n },\n value: {\n type: [Boolean, String, Number],\n default: false,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n width: {\n type: Number,\n default: 40,\n },\n inlinePrompt: {\n type: Boolean,\n default: false,\n },\n activeIcon: {\n type: definePropType<string \| Component>([String, Object, Function]),\n default: '',\n },\n inactiveIcon: {\n type: definePropType<string \| Component>([String, Object, Function]),\n default: '',\n },\n activeText: {\n type: String,\n default: '',\n },\n inactiveText: {\n type: String,\n default: '',\n },\n activeColor: {\n type: String,\n default: '',\n },\n inactiveColor: {\n type: String,\n default: '',\n },\n borderColor: {\n type: String,\n default: '',\n },\n activeValue: {\n type: [Boolean, String, Number],\n default: true,\n },\n inactiveValue: {\n type: [Boolean, String, Number],\n default: false,\n },\n name: {\n type: String,\n default: '',\n },\n validateEvent: {\n type: Boolean,\n default: true,\n },\n id: String,\n loading: {\n type: Boolean,\n default: false,\n },\n beforeChange: {\n type: definePropType<() => Promise<boolean> \| boolean>(Function),\n },\n} as const)\n\nexport type SwitchProps = ExtractPropTypes<typeof switchProps>\n\nexport const switchEmits = {\n [UPDATE_MODEL_EVENT]: (val: boolean \| string \| number) =>\n isBool(val) \|\| isString(val) \|\| isNumber(val),\n [CHANGE_EVENT]: (val: boolean \| string \| number) =>\n isBool(val) \|\| isString(val) \|\| isNumber(val),\n [INPUT_EVENT]: (val: boolean \| string \| number) =>\n isBool(val) \|\| isString(val) \|\| isNumber(val),\n}\nexport type SwitchEmits = typeof switchEmits\n\nexport type SwitchInstance = InstanceType<typeof Switch>\n"],"names":[],"mappings":"~~;;;;;AAOY~~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"}
1	+ {"version":3,"file":"switch.mjs","sources":["../../../../../../packages/components/switch/src/switch.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport {\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { isBool, isNumber, isString } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type Switch from './switch.vue'\nimport type { Component, ExtractPropTypes, PropType } from 'vue'\n\nexport const switchProps = buildProps({\n modelValue: {\n type: [Boolean, String, Number],\n default: false,\n },\n value: {\n type: [Boolean, String, Number],\n default: false,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n width: {\n type: Number,\n default: 40,\n },\n inlinePrompt: {\n type: Boolean,\n default: false,\n },\n activeIcon: {\n type: definePropType<string \| Component>([String, Object, Function]),\n default: '',\n },\n inactiveIcon: {\n type: definePropType<string \| Component>([String, Object, Function]),\n default: '',\n },\n activeText: {\n type: String,\n default: '',\n },\n inactiveText: {\n type: String,\n default: '',\n },\n activeColor: {\n type: String,\n default: '',\n },\n inactiveColor: {\n type: String,\n default: '',\n },\n borderColor: {\n type: String,\n default: '',\n },\n activeValue: {\n type: [Boolean, String, Number],\n default: true,\n },\n inactiveValue: {\n type: [Boolean, String, Number],\n default: false,\n },\n name: {\n type: String,\n default: '',\n },\n validateEvent: {\n type: Boolean,\n default: true,\n },\n id: String,\n loading: {\n type: Boolean,\n default: false,\n },\n beforeChange: {\n type: definePropType<() => Promise<boolean> \| boolean>(Function),\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n} as const)\n\nexport type SwitchProps = ExtractPropTypes<typeof switchProps>\n\nexport const switchEmits = {\n [UPDATE_MODEL_EVENT]: (val: boolean \| string \| number) =>\n isBool(val) \|\| isString(val) \|\| isNumber(val),\n [CHANGE_EVENT]: (val: boolean \| string \| number) =>\n isBool(val) \|\| isString(val) \|\| isNumber(val),\n [INPUT_EVENT]: (val: boolean \| string \| number) =>\n isBool(val) \|\| isString(val) \|\| isNumber(val),\n}\nexport type SwitchEmits = typeof switchEmits\n\nexport type SwitchInstance = InstanceType<typeof Switch>\n"],"names":[],"mappings":"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"}

package/es/components/switch/src/switch.vue.d.ts CHANGED Viewed

@@ -18,11 +18,13 @@ declare const _default: import("vue").DefineComponent<{
     readonly id: StringConstructor;
     readonly loading: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly beforeChange: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<() => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    readonly size: import("../../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
 }, {
     input: import("vue").Ref<HTMLInputElement | undefined>;
     core: import("vue").Ref<HTMLSpanElement | undefined>;
     switchDisabled: import("vue").ComputedRef<boolean>;
     checked: import("vue").ComputedRef<boolean>;
+    switchKls: import("vue").ComputedRef<string[]>;
     handleChange: () => void;
     switchValue: () => void;
     focus: () => void;
@@ -50,11 +52,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly id?: unknown;
     readonly loading?: unknown;
     readonly beforeChange?: unknown;
+    readonly size?: unknown;
 } & {
     disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     loading: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    name: string;
     modelValue: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    name: string;
     width: number;
     borderColor: string;
     validateEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -69,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     activeValue: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     inactiveValue: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
 } & {
+    size?: import("../../../utils/props").BuildPropType<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown> | undefined;
     id?: string | undefined;
     beforeChange?: (() => boolean | Promise<boolean>) | undefined;
 }> & {
@@ -76,10 +80,11 @@ declare const _default: import("vue").DefineComponent<{
     onInput?: ((val: string | number | boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;
 }, {
+    size: import("../../../utils/props").BuildPropType<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown>;
     disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     loading: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    name: string;
     modelValue: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    name: string;
     width: number;
     borderColor: string;
     validateEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -8,7 +8,7 @@ import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../utils/co
 import '../../../hooks/index.mjs';
 import { switchProps, switchEmits } from './switch.mjs';
 import { useFormItem } from '../../../hooks/use-form-item/index.mjs';
-import { useDisabled } from '../../../hooks/use-common-props/index.mjs';
+import { useDisabled, useSize } from '../../../hooks/use-common-props/index.mjs';
 const COMPONENT_NAME = "ElSwitch";
 var script = defineComponent({
@@ -19,9 +19,17 @@ var script = defineComponent({
   setup(props, { emit }) {
     const { formItem } = useFormItem();
     const switchDisabled = useDisabled(computed(() => props.loading));
+    const switchSize = useSize();
     const isModelValue = ref(props.modelValue !== false);
     const input = ref();
     const core = ref();
+    const prefix = "el-switch";
+    const switchKls = computed(() => [
+      prefix,
+      `${prefix}--${switchSize.value}`,
+      switchDisabled.value ? "is-disabled" : "",
+      checked.value ? "is-checked" : ""
+    ]);
     watch(() => props.modelValue, () => {
       isModelValue.value = true;
     });
@@ -106,6 +114,7 @@ var script = defineComponent({
       core,
       switchDisabled,
       checked,
+      switchKls,
       handleChange,
       switchValue,
       focus