mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [color-picker] support dynamic change of showAlpha prop (#18280)

Browse Source 
* feat(components): [color-picker] supports dynamic change of colorFormat

* test(components): [color-picker] test cases with fixes added

* fix(components): [color-picker] support dynamic change of showAlpha prop

---------

Co-authored-by: SKSQ2529720581 <83899365+SKSQ2529720581@users.noreply.github.com>
This commit is contained in:
尘随风染 2024-09-23 11:24:48 +08:00 committed by GitHub
parent 593d03e326
commit 6f1f506bcb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/components/color-picker/__tests__/color-picker.test.tsx
View File

@ -433,6 +433,51 @@ describe('Color-picker', () => {
wrapper.unmount()
})
it('should update the colorFormat and selected color when the colorFormat prop changes', async () => {
const color = ref('#00FF00')
const colorFormat = ref('hex')
const wrapper = mount(() => (
<ColorPicker v-model={color.value} color-format={colorFormat.value} />
))
colorFormat.value = 'rgb'
await nextTick()
const colorPickerWrapper = wrapper.findComponent(ColorPicker)
const customInput = colorPickerWrapper.findComponent({
ref: 'inputRef',
})
expect(colorPickerWrapper.vm.color.format).toBe('rgb')
expect(color.value).toBe('rgb(0, 255, 0)')
expect(
customInput.find<HTMLInputElement>('.el-input__inner').element.value
).toBe('rgb(0, 255, 0)')
wrapper.unmount()
})
it('should update the selected color when the showAlpha prop changes', async () => {
const color = ref('#00FF00AA')
const showAlpha = ref(true)
const wrapper = mount(() => (
<ColorPicker
v-model={color.value}
color-format="hex"
showAlpha={showAlpha.value}
/>
))
showAlpha.value = false
await nextTick()
const colorPickerWrapper = wrapper.findComponent(ColorPicker)
const customInput = colorPickerWrapper.findComponent({
ref: 'inputRef',
})
expect(colorPickerWrapper.vm.color.enableAlpha).toBe(false)
expect(color.value).toBe('#00FF00')
expect(
customInput.find<HTMLInputElement>('.el-input__inner').element.value
).toBe('#00FF00')
wrapper.unmount()
})
describe('form item accessibility integration', () => {
it('automatic id attachment', async () => {
const wrapper = mount(() => (
@ -498,25 +543,4 @@ describe('Color-picker', () => {
expect(blurHandler).toHaveBeenCalled()
wrapper.unmount()
})
it('when colorFormat prop changes, the color format and v-model binding values should be updated', async () => {
const color = ref('#00FF00')
const colorFormat = ref('hex')
const wrapper = mount(() => (
<ColorPicker v-model={color.value} color-format={colorFormat.value} />
))
colorFormat.value = 'rgb'
await nextTick()
const colorPickerWrapper = wrapper.findComponent(ColorPicker)
const customInput = colorPickerWrapper.findComponent({
ref: 'inputRef',
})
expect(colorPickerWrapper.vm.color.format).toBe('rgb')
expect(color.value).toBe('rgb(0, 255, 0)')
expect(
customInput.find<HTMLInputElement>('.el-input__inner').element.value
).toBe('rgb(0, 255, 0)')
wrapper.unmount()
})
})

11
packages/components/color-picker/src/color-picker.vue
View File

@ -364,13 +364,12 @@ watch(
)
watch(
() => props.colorFormat,
() => [props.colorFormat, props.showAlpha],
() => {
if (props.colorFormat) {
color.format = props.colorFormat
color.doOnChange()
emit(UPDATE_MODEL_EVENT, color.value)
}
color.enableAlpha = props.showAlpha
color.format = props.colorFormat || color.format
color.doOnChange()
emit(UPDATE_MODEL_EVENT, color.value)
}
)