@element-plus/nightly 0.0.20220106 → 0.0.20220110

package/es/components/skeleton/src/skeleton.d.ts

@@ -1,11 +1,11 @@
 import type Skeleton from './skeleton.vue';
 import type { ExtractPropTypes } from 'vue';
 export declare const skeletonProps: {
-    readonly animated: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly count: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
-    readonly rows: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 3, unknown, unknown, unknown>;
-    readonly loading: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
-    readonly throttle: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly animated: import("@element-plus/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly count: import("@element-plus/utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
+    readonly rows: import("@element-plus/utils/props").BuildPropReturn<NumberConstructor, 3, unknown, unknown, unknown>;
+    readonly loading: import("@element-plus/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly throttle: import("@element-plus/utils/props").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
 };
 export declare type SkeletonProps = ExtractPropTypes<typeof skeletonProps>;
 export declare type SkeletonInstance = InstanceType<typeof Skeleton>;

package/es/components/skeleton/src/skeleton.vue.d.ts

@@ -14,16 +14,16 @@ declare const _default: import("vue").DefineComponent<{
     readonly throttle?: unknown;
 } & {
     loading: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    count: number;
     rows: number;
     animated: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    count: number;
 } & {
     throttle?: number | undefined;
 }>, {
     loading: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    throttle: number;
+    count: number;
     rows: number;
     animated: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    count: number;
-    throttle: number;
 }>;
 export default _default;

package/es/components/skeleton/style/css.d.ts

@@ -1,3 +1,3 @@
-import 'element-plus/es/components/base/style/css';
-import 'element-plus/theme-chalk/el-skeleton.css';
-import 'element-plus/es/components/skeleton-item/style/css';
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-skeleton.css';
+import '@element-plus/components/skeleton-item/style/css';

package/es/components/skeleton/style/index.d.ts

@@ -1,3 +1,3 @@
-import 'element-plus/es/components/base/style';
-import 'element-plus/theme-chalk/src/skeleton.scss';
-import 'element-plus/es/components/skeleton-item/style/index';
+import '@element-plus/components/base/style';
+import '@element-plus/theme-chalk/src/skeleton.scss';
+import '@element-plus/components/skeleton-item/style/index';

package/es/components/skeleton-item/style/css.d.ts

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/base/style/css';
-import 'element-plus/theme-chalk/el-skeleton-item.css';
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-skeleton-item.css';

package/es/components/skeleton-item/style/index.d.ts

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/base/style';
-import 'element-plus/theme-chalk/src/skeleton-item.scss';
+import '@element-plus/components/base/style';
+import '@element-plus/theme-chalk/src/skeleton-item.scss';

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

@@ -1,4 +1,4 @@
-import type { SFCWithInstall } from 'element-plus/es/utils/types';
+import type { SFCWithInstall } from '@element-plus/utils/types';
 declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     modelValue: {
         type: import("vue").PropType<number | number[]>;
@@ -24,9 +24,13 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        default: string;
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -75,7 +79,7 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     oldValue: import("vue").Ref<number>;
     dragging: import("vue").Ref<boolean>;
     sliderSize: import("vue").Ref<number>;
-    slider: import("vue").ShallowRef<import("element-plus/es/utils/types").Nullable<HTMLElement>>;
+    slider: import("vue").ShallowRef<import("@element-plus/utils/types").Nullable<HTMLElement>>;
     firstButton: import("vue").Ref<null>;
     secondButton: import("vue").Ref<null>;
     sliderDisabled: import("vue").ComputedRef<boolean>;
@@ -88,14 +92,18 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     setSecondValue: (secondValue: number) => void;
     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>>;
-}, 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<{
+    sliderWrapper: import("vue").Ref<import("@element-plus/utils/types").Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<import("@element-plus/utils/types").ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<import("@element-plus/utils/types").ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "update:modelValue")[], "input" | "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
     max?: unknown;
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -109,47 +117,47 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     tooltipClass?: unknown;
     marks?: unknown;
 } & {
-    disabled: boolean;
-    modelValue: number | number[];
+    max: number;
     height: string;
-    vertical: boolean;
+    disabled: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
-    debounce: number;
-    max: number;
-    min: number;
+    vertical: boolean;
     step: number;
+    min: number;
+    debounce: number;
+    modelValue: number | number[];
     showTooltip: boolean;
     showInput: boolean;
     showInputControls: boolean;
     showStops: boolean;
 } & {
     label?: string | undefined;
-    tooltipClass?: string | undefined;
+    size?: import("@element-plus/utils/types").ComponentSize | undefined;
+    inputSize?: import("@element-plus/utils/types").ComponentSize | undefined;
     formatTooltip?: ((val: number) => string | number) | undefined;
+    tooltipClass?: string | undefined;
     marks?: Record<string, any> | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
-    modelValue: number | number[];
-    label: string;
+    max: number;
     height: string;
-    vertical: boolean;
+    label: string;
+    disabled: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
-    debounce: number;
-    max: number;
-    min: number;
+    vertical: boolean;
     step: number;
-    tooltipClass: string;
+    min: number;
+    debounce: number;
+    modelValue: number | number[];
     showTooltip: boolean;
+    formatTooltip: (val: number) => string | number;
+    tooltipClass: string;
     showInput: boolean;
     showInputControls: boolean;
     showStops: boolean;
-    formatTooltip: (val: number) => string | number;
 }>>;
 export default _Slider;
 export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
@@ -177,9 +185,13 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        default: string;
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -228,7 +240,7 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     oldValue: import("vue").Ref<number>;
     dragging: import("vue").Ref<boolean>;
     sliderSize: import("vue").Ref<number>;
-    slider: import("vue").ShallowRef<import("element-plus/es/utils/types").Nullable<HTMLElement>>;
+    slider: import("vue").ShallowRef<import("@element-plus/utils/types").Nullable<HTMLElement>>;
     firstButton: import("vue").Ref<null>;
     secondButton: import("vue").Ref<null>;
     sliderDisabled: import("vue").ComputedRef<boolean>;
@@ -241,14 +253,18 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     setSecondValue: (secondValue: number) => void;
     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>>;
-}, 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<{
+    sliderWrapper: import("vue").Ref<import("@element-plus/utils/types").Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<import("@element-plus/utils/types").ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<import("@element-plus/utils/types").ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "update:modelValue")[], "input" | "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
     max?: unknown;
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -262,46 +278,46 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     tooltipClass?: unknown;
     marks?: unknown;
 } & {
-    disabled: boolean;
-    modelValue: number | number[];
+    max: number;
     height: string;
-    vertical: boolean;
+    disabled: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
-    debounce: number;
-    max: number;
-    min: number;
+    vertical: boolean;
     step: number;
+    min: number;
+    debounce: number;
+    modelValue: number | number[];
     showTooltip: boolean;
     showInput: boolean;
     showInputControls: boolean;
     showStops: boolean;
 } & {
     label?: string | undefined;
-    tooltipClass?: string | undefined;
+    size?: import("@element-plus/utils/types").ComponentSize | undefined;
+    inputSize?: import("@element-plus/utils/types").ComponentSize | undefined;
     formatTooltip?: ((val: number) => string | number) | undefined;
+    tooltipClass?: string | undefined;
     marks?: Record<string, any> | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
-    modelValue: number | number[];
-    label: string;
+    max: number;
     height: string;
-    vertical: boolean;
+    label: string;
+    disabled: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
-    debounce: number;
-    max: number;
-    min: number;
+    vertical: boolean;
     step: number;
-    tooltipClass: string;
+    min: number;
+    debounce: number;
+    modelValue: number | number[];
     showTooltip: boolean;
+    formatTooltip: (val: number) => string | number;
+    tooltipClass: string;
     showInput: boolean;
     showInputControls: boolean;
     showStops: boolean;
-    formatTooltip: (val: number) => string | number;
 }>>;
 export * from './src/slider.type';

package/es/components/slider/src/button.vue.d.ts

@@ -30,14 +30,14 @@ declare const _default: import("vue").DefineComponent<{
     vertical?: unknown;
     tooltipClass?: unknown;
 } & {
-    modelValue: number;
     vertical: boolean;
+    modelValue: number;
     tooltipClass: string;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: number;
     vertical: boolean;
+    modelValue: number;
     tooltipClass: string;
 }>;
 export default _default;

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import type { PropType, Ref } from 'vue';
-import type { ComponentSize, Nullable } from 'element-plus/es/utils/types';
+import type { ComponentSize, Nullable } from '@element-plus/utils/types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: PropType<number | number[]>;
@@ -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,13 +94,17 @@ declare const _default: import("vue").DefineComponent<{
     stops: import("vue").ComputedRef<number[]>;
     markList: import("vue").ComputedRef<import("./slider.type").Mark[]>;
     sliderWrapper: Ref<Nullable<HTMLElement>>;
-}, 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<{
+    sliderWrapperSize: import("vue").ComputedRef<ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "update:modelValue")[], "input" | "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
     max?: unknown;
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -110,46 +118,46 @@ declare const _default: import("vue").DefineComponent<{
     tooltipClass?: unknown;
     marks?: unknown;
 } & {
-    disabled: boolean;
-    modelValue: number | number[];
+    max: number;
     height: string;
-    vertical: boolean;
+    disabled: boolean;
     range: boolean;
-    inputSize: ComponentSize;
-    debounce: number;
-    max: number;
-    min: number;
+    vertical: boolean;
     step: number;
+    min: number;
+    debounce: number;
+    modelValue: number | number[];
     showTooltip: boolean;
     showInput: boolean;
     showInputControls: boolean;
     showStops: boolean;
 } & {
     label?: string | undefined;
-    tooltipClass?: string | undefined;
+    size?: ComponentSize | undefined;
+    inputSize?: ComponentSize | undefined;
     formatTooltip?: ((val: number) => number | string) | undefined;
+    tooltipClass?: string | undefined;
     marks?: Record<string, any> | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
-    modelValue: number | number[];
-    label: string;
+    max: number;
     height: string;
-    vertical: boolean;
+    label: string;
+    disabled: boolean;
     range: boolean;
-    inputSize: ComponentSize;
-    debounce: number;
-    max: number;
-    min: number;
+    vertical: boolean;
     step: number;
-    tooltipClass: string;
+    min: number;
+    debounce: number;
+    modelValue: number | number[];
     showTooltip: boolean;
+    formatTooltip: (val: number) => number | string;
+    tooltipClass: string;
     showInput: boolean;
     showInputControls: boolean;
     showStops: boolean;
-    formatTooltip: (val: number) => number | string;
 }>;
 export default _default;

package/es/components/slider/src/index.vue_vue_type_script_lang.mjs

@@ -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

@@ -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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"}
+{"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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"}