@element-plus/nightly 0.0.20220106 → 0.0.20220107

package/lib/components/rate/index.d.ts

@@ -16,6 +16,7 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
     readonly textColor: import("../../utils/props").BuildPropReturn<StringConstructor, "#1f2d3d", unknown, unknown, unknown>;
     readonly texts: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string[]>, () => ["Extremely bad", "Disappointed", "Fair", "Satisfied", "Surprise"], unknown, unknown, unknown>;
     readonly scoreTemplate: import("../../utils/props").BuildPropReturn<StringConstructor, "{value}", 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>;
 }, {
     hoverIndex: import("vue").Ref<number>;
     currentValue: import("vue").Ref<number>;
@@ -43,6 +44,7 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
         };
     }>;
     iconComponents: import("vue").ComputedRef<any[]>;
+    rateKls: import("vue").ComputedRef<string[]>;
     showDecimalIcon: (item: number) => boolean;
     getIconStyle: (item: number) => {
         color: string | {
@@ -75,6 +77,7 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
     readonly textColor?: unknown;
     readonly texts?: unknown;
     readonly scoreTemplate?: unknown;
+    readonly size?: unknown;
 } & {
     disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modelValue: number;
@@ -93,10 +96,13 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
     showScore: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     texts: string[];
     scoreTemplate: string;
-} & {}> & {
+} & {
+    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;
+}> & {
     onChange?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => 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>;
     modelValue: number;
     textColor: string;

package/lib/components/rate/src/rate.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentSize } from 'element-plus/es/utils/types';
 import type { Component, ExtractPropTypes } from 'vue';
 export declare const rateProps: {
     readonly modelValue: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
@@ -17,6 +18,7 @@ export declare const rateProps: {
     readonly textColor: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "#1f2d3d", unknown, unknown, unknown>;
     readonly texts: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string[]>, () => ["Extremely bad", "Disappointed", "Fair", "Satisfied", "Surprise"], unknown, unknown, unknown>;
     readonly scoreTemplate: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "{value}", 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 RateProps = ExtractPropTypes<typeof rateProps>;
 export declare const rateEmits: {

package/lib/components/rate/src/rate.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var iconsVue = require('@element-plus/icons-vue');
 var constants = require('../../../utils/constants.js');
 var props = require('../../../utils/props.js');
+var validators = require('../../../utils/validators.js');
 
 const rateProps = props.buildProps({
   modelValue: {
@@ -80,6 +81,10 @@ const rateProps = props.buildProps({
   scoreTemplate: {
     type: String,
     default: "{value}"
+  },
+  size: {
+    type: String,
+    validator: validators.isValidComponentSize
   }
 });
 const rateEmits = {

package/lib/components/rate/src/rate.js.map

@@ -1 +1 @@
-{"version":3,"file":"rate.js","sources":["../../../../../../packages/components/rate/src/rate.ts"],"sourcesContent":["import { Star, StarFilled } from '@element-plus/icons-vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const rateProps = buildProps({\n  modelValue: {\n    type: Number,\n    default: 0,\n  },\n  lowThreshold: {\n    type: Number,\n    default: 2,\n  },\n  highThreshold: {\n    type: Number,\n    default: 4,\n  },\n  max: {\n    type: Number,\n    default: 5,\n  },\n  colors: {\n    type: definePropType<string[] | Record<number, string>>([Array, Object]),\n    default: () => mutable(['#F7BA2A', '#F7BA2A', '#F7BA2A'] as const),\n  },\n  voidColor: {\n    type: String,\n    default: '#C6D1DE',\n  },\n  disabledVoidColor: {\n    type: String,\n    default: '#EFF2F7',\n  },\n  icons: {\n    type: definePropType<\n      Array<string | Component> | Record<number, string | Component>\n    >([Array, Object]),\n    default: () => [StarFilled, StarFilled, StarFilled],\n  },\n  voidIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: () => Star,\n  },\n  disabledvoidIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: () => StarFilled,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  allowHalf: {\n    type: Boolean,\n    default: false,\n  },\n  showText: {\n    type: Boolean,\n    default: false,\n  },\n  showScore: {\n    type: Boolean,\n    default: false,\n  },\n  textColor: {\n    type: String,\n    default: '#1f2d3d',\n  },\n  texts: {\n    type: definePropType<string[]>([Array]),\n    default: () =>\n      mutable([\n        'Extremely bad',\n        'Disappointed',\n        'Fair',\n        'Satisfied',\n        'Surprise',\n      ] as const),\n  },\n  scoreTemplate: {\n    type: String,\n    default: '{value}',\n  },\n} as const)\n\nexport type RateProps = ExtractPropTypes<typeof rateProps>\n\nexport const rateEmits = {\n  change: (value: number) => typeof value === 'number',\n  [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',\n}\nexport type RateEmits = typeof rateEmits\n"],"names":["buildProps","definePropType","mutable","StarFilled","Star","UPDATE_MODEL_EVENT"],"mappings":";;;;;;;;AAGY,MAAC,SAAS,GAAGA,gBAAU,CAAC;AACpC,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,MAAMC,aAAO,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAC7D,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAED,oBAAc,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,MAAM,CAACE,mBAAU,EAAEA,mBAAU,EAAEA,mBAAU,CAAC;AACvD,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAEF,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAMG,aAAI;AACvB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAEH,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAME,mBAAU;AAC7B,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAEF,oBAAc,CAAC,CAAC,KAAK,CAAC,CAAC;AACjC,IAAI,OAAO,EAAE,MAAMC,aAAO,CAAC;AAC3B,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,MAAM;AACZ,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,KAAK,CAAC;AACN,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,SAAS,GAAG;AACzB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC9C,EAAE,CAACG,4BAAkB,GAAG,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC5D;;;;;"}
+{"version":3,"file":"rate.js","sources":["../../../../../../packages/components/rate/src/rate.ts"],"sourcesContent":["import { Star, StarFilled } from '@element-plus/icons-vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { Component, ExtractPropTypes, PropType } from 'vue'\n\nexport const rateProps = buildProps({\n  modelValue: {\n    type: Number,\n    default: 0,\n  },\n  lowThreshold: {\n    type: Number,\n    default: 2,\n  },\n  highThreshold: {\n    type: Number,\n    default: 4,\n  },\n  max: {\n    type: Number,\n    default: 5,\n  },\n  colors: {\n    type: definePropType<string[] | Record<number, string>>([Array, Object]),\n    default: () => mutable(['#F7BA2A', '#F7BA2A', '#F7BA2A'] as const),\n  },\n  voidColor: {\n    type: String,\n    default: '#C6D1DE',\n  },\n  disabledVoidColor: {\n    type: String,\n    default: '#EFF2F7',\n  },\n  icons: {\n    type: definePropType<\n      Array<string | Component> | Record<number, string | Component>\n    >([Array, Object]),\n    default: () => [StarFilled, StarFilled, StarFilled],\n  },\n  voidIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: () => Star,\n  },\n  disabledvoidIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: () => StarFilled,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  allowHalf: {\n    type: Boolean,\n    default: false,\n  },\n  showText: {\n    type: Boolean,\n    default: false,\n  },\n  showScore: {\n    type: Boolean,\n    default: false,\n  },\n  textColor: {\n    type: String,\n    default: '#1f2d3d',\n  },\n  texts: {\n    type: definePropType<string[]>([Array]),\n    default: () =>\n      mutable([\n        'Extremely bad',\n        'Disappointed',\n        'Fair',\n        'Satisfied',\n        'Surprise',\n      ] as const),\n  },\n  scoreTemplate: {\n    type: String,\n    default: '{value}',\n  },\n  size: {\n    type: String as PropType<ComponentSize>,\n    validator: isValidComponentSize,\n  },\n} as const)\n\nexport type RateProps = ExtractPropTypes<typeof rateProps>\n\nexport const rateEmits = {\n  change: (value: number) => typeof value === 'number',\n  [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',\n}\nexport type RateEmits = typeof rateEmits\n"],"names":["buildProps","definePropType","mutable","StarFilled","Star","isValidComponentSize","UPDATE_MODEL_EVENT"],"mappings":"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"}

package/lib/components/rate/src/rate.vue.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly textColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "#1f2d3d", unknown, unknown, unknown>;
     readonly texts: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string[]>, () => ["Extremely bad", "Disappointed", "Fair", "Satisfied", "Surprise"], unknown, unknown, unknown>;
     readonly scoreTemplate: import("../../../utils/props").BuildPropReturn<StringConstructor, "{value}", 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>;
 }, {
     hoverIndex: import("vue").Ref<number>;
     currentValue: import("vue").Ref<number>;
@@ -43,6 +44,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     iconComponents: import("vue").ComputedRef<any[]>;
+    rateKls: import("vue").ComputedRef<string[]>;
     showDecimalIcon: (item: number) => boolean;
     getIconStyle: (item: number) => {
         color: string | {
@@ -75,6 +77,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly textColor?: unknown;
     readonly texts?: unknown;
     readonly scoreTemplate?: unknown;
+    readonly size?: unknown;
 } & {
     disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modelValue: number;
@@ -93,10 +96,13 @@ declare const _default: import("vue").DefineComponent<{
     showScore: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     texts: string[];
     scoreTemplate: string;
-} & {}> & {
+} & {
+    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;
+}> & {
     onChange?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => 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>;
     modelValue: number;
     textColor: string;

package/lib/components/rate/src/rate.vue_vue_type_script_lang.js

@@ -10,8 +10,10 @@ var aria = require('../../../utils/aria.js');
 var constants = require('../../../utils/constants.js');
 var index = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
+require('../../../hooks/index.js');
 var rate = require('./rate.js');
 var form = require('../../../tokens/form.js');
+var index$1 = require('../../../hooks/use-common-props/index.js');
 
 function getValueFromMap(value, map) {
   const isExcludedObject = (val) => shared.isObject(val);
@@ -34,9 +36,12 @@ var script = vue.defineComponent({
   emits: rate.rateEmits,
   setup(props, { emit }) {
     const elForm = vue.inject(form.elFormKey, {});
+    const rateSize = index$1.useSize();
     const currentValue = vue.ref(props.modelValue);
     const hoverIndex = vue.ref(-1);
     const pointerAtLeftHalf = vue.ref(true);
+    const prefix = "el-rate";
+    const rateKls = vue.computed(() => [prefix, `${prefix}--${rateSize.value}`]);
     const rateDisabled = vue.computed(() => props.disabled || elForm.disabled);
     const text = vue.computed(() => {
       let result = "";
@@ -184,6 +189,7 @@ var script = vue.defineComponent({
       decimalStyle,
       decimalIconComponent,
       iconComponents,
+      rateKls,
       showDecimalIcon,
       getIconStyle,
       selectValue,

package/lib/components/rate/src/rate.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"rate.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-rate\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      class=\"el-rate__item\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      class=\"el-rate__text\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\nexport default defineComponent({\n  name: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const rateDisabled = computed(() => props.disabled || elForm.disabled)\n    const text = computed(() => {\n      let result = ''\n      if (props.showScore) {\n        result = props.scoreTemplate.replace(\n          /\\{\\s*value\\s*\\}/,\n          rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n        )\n      } else if (props.showText) {\n        result = props.texts[Math.ceil(currentValue.value) - 1]\n      }\n      return result\n    })\n    const valueDecimal = computed(\n      () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n    )\n    const colorMap = computed(() =>\n      isArray(props.colors)\n        ? {\n            [props.lowThreshold]: props.colors[0],\n            [props.highThreshold]: { value: props.colors[1], excluded: true },\n            [props.max]: props.colors[2],\n          }\n        : props.colors\n    )\n    const activeColor = computed(() =>\n      getValueFromMap(currentValue.value, colorMap.value)\n    )\n    const decimalStyle = computed(() => {\n      let width = ''\n      if (rateDisabled.value) {\n        width = `${valueDecimal.value}%`\n      } else if (props.allowHalf) {\n        width = '50%'\n      }\n      return {\n        color: activeColor.value,\n        width,\n      }\n    })\n    const componentMap = computed(() =>\n      isArray(props.icons)\n        ? {\n            [props.lowThreshold]: props.icons[0],\n            [props.highThreshold]: {\n              value: props.icons[1],\n              excluded: true,\n            },\n            [props.max]: props.icons[2],\n          }\n        : props.icons\n    )\n    const decimalIconComponent = computed(() =>\n      getValueFromMap(props.modelValue, componentMap.value)\n    )\n    const voidComponent = computed(() =>\n      rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n    )\n    const activeComponent = computed(() =>\n      getValueFromMap(currentValue.value, componentMap.value)\n    )\n    const iconComponents = computed(() => {\n      const result = Array(props.max)\n      const threshold = currentValue.value\n      result.fill(activeComponent.value, 0, threshold)\n      result.fill(voidComponent.value, threshold, props.max)\n      return result\n    })\n\n    function showDecimalIcon(item: number) {\n      const showWhenDisabled =\n        rateDisabled.value &&\n        valueDecimal.value > 0 &&\n        item - 1 < props.modelValue &&\n        item > props.modelValue\n      const showWhenAllowHalf =\n        props.allowHalf &&\n        pointerAtLeftHalf.value &&\n        item - 0.5 <= currentValue.value &&\n        item > currentValue.value\n      return showWhenDisabled || showWhenAllowHalf\n    }\n\n    function getIconStyle(item: number) {\n      const voidColor = rateDisabled.value\n        ? props.disabledVoidColor\n        : props.voidColor\n      return {\n        color: item <= currentValue.value ? activeColor.value : voidColor,\n      }\n    }\n\n    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        let target = event.target as HTMLElement\n        if (hasClass(target, 'el-rate__item')) {\n          target = target.querySelector('.el-rate__icon')!\n        }\n        if (target.clientWidth === 0 || hasClass(target, 'el-rate__decimal')) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","StarFilled","rateProps","inject","elFormKey","ref","computed","EVENT_CODE"],"mappings":"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"}
+{"version":3,"file":"rate.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rateKls\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      class=\"el-rate__item\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      class=\"el-rate__text\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\nexport default defineComponent({\n  name: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const rateSize = useSize()\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const prefix = 'el-rate'\n    const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`])\n\n    const rateDisabled = computed(() => props.disabled || elForm.disabled)\n    const text = computed(() => {\n      let result = ''\n      if (props.showScore) {\n        result = props.scoreTemplate.replace(\n          /\\{\\s*value\\s*\\}/,\n          rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n        )\n      } else if (props.showText) {\n        result = props.texts[Math.ceil(currentValue.value) - 1]\n      }\n      return result\n    })\n    const valueDecimal = computed(\n      () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n    )\n    const colorMap = computed(() =>\n      isArray(props.colors)\n        ? {\n            [props.lowThreshold]: props.colors[0],\n            [props.highThreshold]: { value: props.colors[1], excluded: true },\n            [props.max]: props.colors[2],\n          }\n        : props.colors\n    )\n    const activeColor = computed(() =>\n      getValueFromMap(currentValue.value, colorMap.value)\n    )\n    const decimalStyle = computed(() => {\n      let width = ''\n      if (rateDisabled.value) {\n        width = `${valueDecimal.value}%`\n      } else if (props.allowHalf) {\n        width = '50%'\n      }\n      return {\n        color: activeColor.value,\n        width,\n      }\n    })\n    const componentMap = computed(() =>\n      isArray(props.icons)\n        ? {\n            [props.lowThreshold]: props.icons[0],\n            [props.highThreshold]: {\n              value: props.icons[1],\n              excluded: true,\n            },\n            [props.max]: props.icons[2],\n          }\n        : props.icons\n    )\n    const decimalIconComponent = computed(() =>\n      getValueFromMap(props.modelValue, componentMap.value)\n    )\n    const voidComponent = computed(() =>\n      rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n    )\n    const activeComponent = computed(() =>\n      getValueFromMap(currentValue.value, componentMap.value)\n    )\n    const iconComponents = computed(() => {\n      const result = Array(props.max)\n      const threshold = currentValue.value\n      result.fill(activeComponent.value, 0, threshold)\n      result.fill(voidComponent.value, threshold, props.max)\n      return result\n    })\n\n    function showDecimalIcon(item: number) {\n      const showWhenDisabled =\n        rateDisabled.value &&\n        valueDecimal.value > 0 &&\n        item - 1 < props.modelValue &&\n        item > props.modelValue\n      const showWhenAllowHalf =\n        props.allowHalf &&\n        pointerAtLeftHalf.value &&\n        item - 0.5 <= currentValue.value &&\n        item > currentValue.value\n      return showWhenDisabled || showWhenAllowHalf\n    }\n\n    function getIconStyle(item: number) {\n      const voidColor = rateDisabled.value\n        ? props.disabledVoidColor\n        : props.voidColor\n      return {\n        color: item <= currentValue.value ? activeColor.value : voidColor,\n      }\n    }\n\n    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        let target = event.target as HTMLElement\n        if (hasClass(target, 'el-rate__item')) {\n          target = target.querySelector('.el-rate__icon')!\n        }\n        if (target.clientWidth === 0 || hasClass(target, 'el-rate__decimal')) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n      rateKls,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","StarFilled","rateProps","inject","elFormKey","useSize","ref","computed","isArray","UPDATE_MODEL_EVENT","EVENT_CODE"],"mappings":"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"}

package/lib/components/rate/src/rate.vue_vue_type_template_id_38c42df6_lang.js

@@ -9,7 +9,7 @@ const _hoisted_2 = ["onMousemove", "onClick"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = vue.resolveComponent("el-icon");
   return vue.openBlock(), vue.createElementBlock("div", {
-    class: "el-rate",
+    class: vue.normalizeClass(_ctx.rateKls),
     role: "slider",
     "aria-valuenow": _ctx.currentValue,
     "aria-valuetext": _ctx.text,
@@ -53,7 +53,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "el-rate__text",
       style: vue.normalizeStyle({ color: _ctx.textColor })
     }, vue.toDisplayString(_ctx.text), 5)) : vue.createCommentVNode("v-if", true)
-  ], 40, _hoisted_1);
+  ], 42, _hoisted_1);
 }
 
 exports.render = render;

package/lib/components/rate/src/rate.vue_vue_type_template_id_38c42df6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"rate.vue_vue_type_template_id_38c42df6_lang.js","sources":["../../../../../../packages/components/rate/src/rate.vue?vue&type=template&id=38c42df6&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-rate\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      class=\"el-rate__item\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      class=\"el-rate__text\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\nexport default defineComponent({\n  name: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const rateDisabled = computed(() => props.disabled || elForm.disabled)\n    const text = computed(() => {\n      let result = ''\n      if (props.showScore) {\n        result = props.scoreTemplate.replace(\n          /\\{\\s*value\\s*\\}/,\n          rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n        )\n      } else if (props.showText) {\n        result = props.texts[Math.ceil(currentValue.value) - 1]\n      }\n      return result\n    })\n    const valueDecimal = computed(\n      () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n    )\n    const colorMap = computed(() =>\n      isArray(props.colors)\n        ? {\n            [props.lowThreshold]: props.colors[0],\n            [props.highThreshold]: { value: props.colors[1], excluded: true },\n            [props.max]: props.colors[2],\n          }\n        : props.colors\n    )\n    const activeColor = computed(() =>\n      getValueFromMap(currentValue.value, colorMap.value)\n    )\n    const decimalStyle = computed(() => {\n      let width = ''\n      if (rateDisabled.value) {\n        width = `${valueDecimal.value}%`\n      } else if (props.allowHalf) {\n        width = '50%'\n      }\n      return {\n        color: activeColor.value,\n        width,\n      }\n    })\n    const componentMap = computed(() =>\n      isArray(props.icons)\n        ? {\n            [props.lowThreshold]: props.icons[0],\n            [props.highThreshold]: {\n              value: props.icons[1],\n              excluded: true,\n            },\n            [props.max]: props.icons[2],\n          }\n        : props.icons\n    )\n    const decimalIconComponent = computed(() =>\n      getValueFromMap(props.modelValue, componentMap.value)\n    )\n    const voidComponent = computed(() =>\n      rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n    )\n    const activeComponent = computed(() =>\n      getValueFromMap(currentValue.value, componentMap.value)\n    )\n    const iconComponents = computed(() => {\n      const result = Array(props.max)\n      const threshold = currentValue.value\n      result.fill(activeComponent.value, 0, threshold)\n      result.fill(voidComponent.value, threshold, props.max)\n      return result\n    })\n\n    function showDecimalIcon(item: number) {\n      const showWhenDisabled =\n        rateDisabled.value &&\n        valueDecimal.value > 0 &&\n        item - 1 < props.modelValue &&\n        item > props.modelValue\n      const showWhenAllowHalf =\n        props.allowHalf &&\n        pointerAtLeftHalf.value &&\n        item - 0.5 <= currentValue.value &&\n        item > currentValue.value\n      return showWhenDisabled || showWhenAllowHalf\n    }\n\n    function getIconStyle(item: number) {\n      const voidColor = rateDisabled.value\n        ? props.disabledVoidColor\n        : props.voidColor\n      return {\n        color: item <= currentValue.value ? activeColor.value : voidColor,\n      }\n    }\n\n    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        let target = event.target as HTMLElement\n        if (hasClass(target, 'el-rate__item')) {\n          target = target.querySelector('.el-rate__icon')!\n        }\n        if (target.clientWidth === 0 || hasClass(target, 'el-rate__decimal')) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createVNode"],"mappings":";;;;;;;;;;;;;;IAEI;IACA;IACC,eAAa,EAAE;IACf;IACD,iBAAc;;;aAGNA,gDAAE;;;;QAIP;QACD;QACC;;QAEAC,eAAU;eACL,gCAAa,KAAK;;;UAGrB;;;;;;;;;;;;;;;;;;;;;;KAeG;;;;;"}
+{"version":3,"file":"rate.vue_vue_type_template_id_38c42df6_lang.js","sources":["../../../../../../packages/components/rate/src/rate.vue?vue&type=template&id=38c42df6&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"rateKls\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      class=\"el-rate__item\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      class=\"el-rate__text\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\nexport default defineComponent({\n  name: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const rateSize = useSize()\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const prefix = 'el-rate'\n    const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`])\n\n    const rateDisabled = computed(() => props.disabled || elForm.disabled)\n    const text = computed(() => {\n      let result = ''\n      if (props.showScore) {\n        result = props.scoreTemplate.replace(\n          /\\{\\s*value\\s*\\}/,\n          rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n        )\n      } else if (props.showText) {\n        result = props.texts[Math.ceil(currentValue.value) - 1]\n      }\n      return result\n    })\n    const valueDecimal = computed(\n      () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n    )\n    const colorMap = computed(() =>\n      isArray(props.colors)\n        ? {\n            [props.lowThreshold]: props.colors[0],\n            [props.highThreshold]: { value: props.colors[1], excluded: true },\n            [props.max]: props.colors[2],\n          }\n        : props.colors\n    )\n    const activeColor = computed(() =>\n      getValueFromMap(currentValue.value, colorMap.value)\n    )\n    const decimalStyle = computed(() => {\n      let width = ''\n      if (rateDisabled.value) {\n        width = `${valueDecimal.value}%`\n      } else if (props.allowHalf) {\n        width = '50%'\n      }\n      return {\n        color: activeColor.value,\n        width,\n      }\n    })\n    const componentMap = computed(() =>\n      isArray(props.icons)\n        ? {\n            [props.lowThreshold]: props.icons[0],\n            [props.highThreshold]: {\n              value: props.icons[1],\n              excluded: true,\n            },\n            [props.max]: props.icons[2],\n          }\n        : props.icons\n    )\n    const decimalIconComponent = computed(() =>\n      getValueFromMap(props.modelValue, componentMap.value)\n    )\n    const voidComponent = computed(() =>\n      rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n    )\n    const activeComponent = computed(() =>\n      getValueFromMap(currentValue.value, componentMap.value)\n    )\n    const iconComponents = computed(() => {\n      const result = Array(props.max)\n      const threshold = currentValue.value\n      result.fill(activeComponent.value, 0, threshold)\n      result.fill(voidComponent.value, threshold, props.max)\n      return result\n    })\n\n    function showDecimalIcon(item: number) {\n      const showWhenDisabled =\n        rateDisabled.value &&\n        valueDecimal.value > 0 &&\n        item - 1 < props.modelValue &&\n        item > props.modelValue\n      const showWhenAllowHalf =\n        props.allowHalf &&\n        pointerAtLeftHalf.value &&\n        item - 0.5 <= currentValue.value &&\n        item > currentValue.value\n      return showWhenDisabled || showWhenAllowHalf\n    }\n\n    function getIconStyle(item: number) {\n      const voidColor = rateDisabled.value\n        ? props.disabledVoidColor\n        : props.voidColor\n      return {\n        color: item <= currentValue.value ? activeColor.value : voidColor,\n      }\n    }\n\n    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        let target = event.target as HTMLElement\n        if (hasClass(target, 'el-rate__item')) {\n          target = target.querySelector('.el-rate__icon')!\n        }\n        if (target.clientWidth === 0 || hasClass(target, 'el-rate__decimal')) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n      rateKls,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createVNode"],"mappings":";;;;;;;;;;;;;;IAEK,uBAAO;IACR;IACC,eAAa,EAAE;IACf;IACD,iBAAc;;;aAGNA,gDAAE;;;;QAIP;QACD;QACC;;QAEAC,eAAU;eACL,gCAAa,KAAK;;;UAGrB;;;;;;;;;;;;;;;;;;;;;;KAeG;;;;;"}

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

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

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

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

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

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

package/lib/components/slider/src/index.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","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":["defineComponent","ElInputNumber","SliderMarker","useSlide","UPDATE_MODEL_EVENT","INPUT_EVENT","throwError","on","off"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","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":["defineComponent","ElInputNumber","SliderMarker","useSlide","provide","toRefs","INPUT_EVENT","throwError","ref","on","nextTick"],"mappings":"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"}