diff --git a/packages/components/rate/src/rate.ts b/packages/components/rate/src/rate.ts index 417db19efd..9f59c9d124 100644 --- a/packages/components/rate/src/rate.ts +++ b/packages/components/rate/src/rate.ts @@ -9,9 +9,100 @@ import { } from '@element-plus/utils' import { useAriaProps, useSizeProp } from '@element-plus/hooks' -import type { Component, ExtractPropTypes, ExtractPublicPropTypes } from 'vue' +import type { Component, ExtractPublicPropTypes } from 'vue' +import type { ComponentSize } from '@element-plus/constants' import type Rate from './rate.vue' +export interface RateProps { + /** + * @description binding value + */ + modelValue?: number + /** + * @description native `id` attribute + */ + id?: string + /** + * @description threshold value between low and medium level. The value itself will be included in low level + */ + lowThreshold?: number + /** + * @description threshold value between medium and high level. The value itself will be included in high level + */ + highThreshold?: number + /** + * @description max rating score + */ + max?: number + /** + * @description colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color + */ + colors?: string[] | Record + /** + * @description color of unselected icons + */ + voidColor?: string + /** + * @description color of unselected read-only icons + */ + disabledVoidColor?: string + /** + * @description icon components. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon component + */ + icons?: Array | Record + /** + * @description component of unselected icons + */ + voidIcon?: string | Component + /** + * @description component of unselected read-only icons + */ + disabledVoidIcon?: string | Component + /** + * @description whether Rate is read-only + */ + disabled?: boolean + /** + * @description whether picking half start is allowed + */ + allowHalf?: boolean + /** + * @description whether to display texts + */ + showText?: boolean + /** + * @description whether to display current score. show-score and show-text cannot be true at the same time + */ + showScore?: boolean + /** + * @description color of texts + */ + textColor?: string + /** + * @description text array + */ + texts?: string[] + /** + * @description score template + */ + scoreTemplate?: string + /** + * @description size of Rate + */ + size?: ComponentSize + /** + * @description whether value can be reset to `0` + */ + clearable?: boolean + /** + * @description native `aria-label` attribute + */ + ariaLabel?: string +} + +/** + * @deprecated Removed after 3.0.0, Use `RateProps` instead. + */ export const rateProps = buildProps({ /** * @description binding value @@ -151,7 +242,9 @@ export const rateProps = buildProps({ ...useAriaProps(['ariaLabel']), } as const) -export type RateProps = ExtractPropTypes +/** + * @deprecated Removed after 3.0.0, Use `RateProps` instead. + */ export type RatePropsPublic = ExtractPublicPropTypes export const rateEmits = { diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue index d661796b66..897735d3d1 100644 --- a/packages/components/rate/src/rate.vue +++ b/packages/components/rate/src/rate.vue @@ -80,11 +80,13 @@ import { useFormSize, } from '@element-plus/components/form' import { ElIcon } from '@element-plus/components/icon' +import { Star, StarFilled } from '@element-plus/icons-vue' import { useNamespace } from '@element-plus/hooks' -import { rateEmits, rateProps } from './rate' +import { rateEmits } from './rate' import type { CSSProperties, Component } from 'vue' import type { IconInstance } from '@element-plus/components/icon' +import type { RateProps } from './rate' function getValueFromMap( value: number, @@ -110,7 +112,29 @@ defineOptions({ name: 'ElRate', }) -const props = defineProps(rateProps) +const props = withDefaults(defineProps(), { + modelValue: 0, + id: undefined, + lowThreshold: 2, + highThreshold: 4, + max: 5, + colors: () => ['', '', ''], + voidColor: '', + disabledVoidColor: '', + icons: () => [StarFilled, StarFilled, StarFilled], + voidIcon: () => Star, + disabledVoidIcon: () => StarFilled, + disabled: undefined, + textColor: '', + texts: () => [ + 'Extremely bad', + 'Disappointed', + 'Fair', + 'Satisfied', + 'Surprise', + ], + scoreTemplate: '{value}', +}) const emit = defineEmits(rateEmits) const formItemContext = inject(formItemContextKey, undefined)