javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [rate] add clearable attribute (#10031)

Browse Source 
feat(components): [rate] add clearable attribute
This commit is contained in:
Hefty
2022-10-11 10:21:19 +08:00
committed by GitHub
parent 0efa33f3c4
commit 31f713bf1b
5 changed files with 59 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/en-US/component/rate.md
View File

@@ -41,6 +41,14 @@ rate/text
:::
## Clearable
:::demo You can reset the value to `0` when you click at the same value again.
rate/clearable
:::
## More icons
You can use different icons to distinguish different rate components.
@@ -97,6 +105,7 @@ Use `css/scss` language to change the global or local color. We set some global
| text-color | color of texts | string | — | #1F2D3D |
| texts | text array | array | — | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] |
| score-template | score template | string | — | {value} |
| clearable | whether value can be reset to `0` | boolean | — | false |
## Events

9
docs/examples/rate/clearable.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<el-rate v-model="value" clearable />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(3)
</script>

23
packages/components/rate/__tests__/rate.test.tsx
View File

@@ -113,6 +113,29 @@ describe('Rate.vue', () => {
expect(changeCount.value).toEqual(1)
})
it('clearable', () => {
const value = ref(4)
const changeCount = ref(0)
const handleChange = () => {
changeCount.value++
}
const wrapper = mount(() => (
<Rate v-model={value.value} clearable onChange={handleChange} />
))
const fourthStar = wrapper.findAll('.el-rate__item')[3]
.element as HTMLElement
fourthStar.click()
expect(value.value).toEqual(0)
expect(changeCount.value).toEqual(1)
const fifthStar = wrapper.findAll('.el-rate__item')[4]
.element as HTMLElement
fifthStar.click()
expect(value.value).toEqual(5)
expect(changeCount.value).toEqual(2)
})
describe('form item accessibility integration', () => {
it('automatic id attachment', async () => {
const wrapper = mount(() => (

4
packages/components/rate/src/rate.ts
View File

@@ -98,6 +98,10 @@ export const rateProps = buildProps({
type: String,
default: undefined,
},
clearable: {
type: Boolean,
default: false,
},
} as const)
export type RateProps = ExtractPropTypes<typeof rateProps>

22
packages/components/rate/src/rate.vue
View File

@@ -195,20 +195,26 @@ function showDecimalIcon(item: number) {
return showWhenDisabled || showWhenAllowHalf
}
function emitValue(value: number) {
// if allow clear, and selected value is same as modelValue, reset value to 0
if (props.clearable && value === props.modelValue) {
value = 0
}
emit(UPDATE_MODEL_EVENT, value)
if (props.modelValue !== value) {
emit('change', value)
}
}
function selectValue(value: number) {
if (rateDisabled.value) {
return
}
if (props.allowHalf && pointerAtLeftHalf.value) {
emit(UPDATE_MODEL_EVENT, currentValue.value)
if (props.modelValue !== currentValue.value) {
emit('change', currentValue.value)
}
emitValue(currentValue.value)
} else {
emit(UPDATE_MODEL_EVENT, value)
if (props.modelValue !== value) {
emit('change', value)
}
emitValue(value)
}
}