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): [color-picker] add empty values attributes (#20962)

Browse Source 
* feat(components): [color-picker] add empty values attributes

* chore: better

* test: add test case

* docs: update version

---------

Co-authored-by: warmthsea <2586244885@qq.com>
This commit is contained in:
Noblet Ouways
2025-06-24 10:58:38 +02:00
committed by GitHub
parent 1fd8c4b3b2
commit ffe42ae401
4 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/en-US/component/color-picker.md
View File

@@ -43,21 +43,23 @@ color-picker/sizes
### Attributes
| Name | Description | Type | Default |
| --------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------- |
| model-value / v-model | binding value | ^[string] | — |
| disabled | whether to disable the ColorPicker | ^[boolean] | false |
| size | size of ColorPicker | ^[enum]`'large' \| 'default' \| 'small'` | — |
| show-alpha | whether to display the alpha slider | ^[boolean] | false |
| color-format | color format of v-model | ^[enum]`'hsl' \| 'hsv' \| 'hex' \| 'rgb' \| 'hex' (when show-alpha is false) \| 'rgb' (when show-alpha is true)` | — |
| popper-class | custom class name for ColorPicker's dropdown | ^[string] | — |
| predefine | predefined color options | ^[object]`string[]` | — |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| tabindex | ColorPicker tabindex | ^[string] / ^[number] | 0 |
| aria-label ^(a11y) ^(2.7.2) | ColorPicker aria-label | ^[string] | — |
| id | ColorPicker id | ^[string] | — |
| teleported ^(2.7.2) | whether color-picker popper is teleported to the body | ^[boolean] | true |
| label ^(a11y) ^(deprecated) | ColorPicker aria-label | ^[string] | — |
| Name | Description | Type | Default |
| --------------------------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------- |
| model-value / v-model | binding value | ^[string] | — |
| disabled | whether to disable the ColorPicker | ^[boolean] | false |
| size | size of ColorPicker | ^[enum]`'large' \| 'default' \| 'small'` | — |
| show-alpha | whether to display the alpha slider | ^[boolean] | false |
| color-format | color format of v-model | ^[enum]`'hsl' \| 'hsv' \| 'hex' \| 'rgb' \| 'hex' (when show-alpha is false) \| 'rgb' (when show-alpha is true)` | — |
| popper-class | custom class name for ColorPicker's dropdown | ^[string] | — |
| predefine | predefined color options | ^[object]`string[]` | — |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| tabindex | ColorPicker tabindex | ^[string] / ^[number] | 0 |
| aria-label ^(a11y) ^(2.7.2) | ColorPicker aria-label | ^[string] | — |
| empty-values ^(2.10.3) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
| value-on-clear ^(2.10.3) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
| id | ColorPicker id | ^[string] | — |
| teleported ^(2.7.2) | whether color-picker popper is teleported to the body | ^[boolean] | true |
| label ^(a11y) ^(deprecated) | ColorPicker aria-label | ^[string] | — |
### Events

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

@@ -107,7 +107,7 @@ describe('Color-picker', () => {
await wrapper.find('.el-color-picker__trigger').trigger('click')
document.querySelector<HTMLElement>('.el-color-dropdown__btn')?.click()
await nextTick()
expect(color.value).toEqual('') // should be empty #13239
expect(color.value).toBeNull()
wrapper.unmount()
})
it('should pick a color contains alpha when confirm button click', async () => {
@@ -119,7 +119,7 @@ describe('Color-picker', () => {
await wrapper.find('.el-color-picker__trigger').trigger('click')
document.querySelector<HTMLElement>('.el-color-dropdown__btn')?.click()
await nextTick()
expect(color.value).toEqual('') // should be empty #13239
expect(color.value).toBeNull()
wrapper.unmount()
})
it('should init the right color when open', async () => {
@@ -166,7 +166,18 @@ describe('Color-picker', () => {
'.el-color-dropdown__link-btn'
)
clearBtn!.click()
expect(color.value).toEqual(null)
expect(color.value).toBeNull()
wrapper.unmount()
})
it("should set '' as null when confirm button click", async () => {
const color = ref('')
const wrapper = mount(() => (
<ColorPicker v-model={color.value} show-alpha={true} />
))
await wrapper.find('.el-color-picker__trigger').trigger('click')
document.querySelector<HTMLElement>('.el-color-dropdown__btn')?.click()
expect(color.value).toBeNull()
wrapper.unmount()
})
it('should change hue when clicking the hue bar', async () => {

7
packages/components/color-picker/src/color-picker.ts
View File

@@ -1,6 +1,10 @@
import { isNil } from 'lodash-unified'
import { buildProps, definePropType, isString } from '@element-plus/utils'
import { useAriaProps, useSizeProp } from '@element-plus/hooks'
import {
useAriaProps,
useEmptyValuesProps,
useSizeProp,
} from '@element-plus/hooks'
import { useTooltipContentProps } from '@element-plus/components/tooltip'
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
@@ -66,6 +70,7 @@ export const colorPickerProps = buildProps({
type: Boolean,
default: true,
},
...useEmptyValuesProps,
...useAriaProps(['ariaLabel']),
} as const)
export const colorPickerEmits = {

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

@@ -130,6 +130,7 @@ import {
useFormSize,
} from '@element-plus/components/form'
import {
useEmptyValues,
useFocusController,
useLocale,
useNamespace,
@@ -165,6 +166,7 @@ const ns = useNamespace('color')
const { formItem } = useFormItem()
const colorSize = useFormSize()
const colorDisabled = useFormDisabled()
const { valueOnClear, isEmptyValue } = useEmptyValues(props, null)
const { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: formItem,
@@ -287,7 +289,7 @@ function handleConfirm() {
}
function confirmValue() {
const value = color.value
const value = isEmptyValue(color.value) ? valueOnClear.value : color.value
emit(UPDATE_MODEL_EVENT, value)
emit(CHANGE_EVENT, value)
if (props.validateEvent) {
@@ -309,9 +311,9 @@ function confirmValue() {
function clear() {
debounceSetShowPicker(false)
emit(UPDATE_MODEL_EVENT, null)
emit(CHANGE_EVENT, null)
if (props.modelValue !== null && props.validateEvent) {
emit(UPDATE_MODEL_EVENT, valueOnClear.value)
emit(CHANGE_EVENT, valueOnClear.value)
if (props.modelValue !== valueOnClear.value && props.validateEvent) {
formItem?.validate('change').catch((err) => debugWarn(err))
}
resetColor()