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

docs(components): [color-picker] (#10889)

Browse Source 
* docs(components): [color-picker]
* Adjust API style
* classname

* Update docs/en-US/component/color-picker.md

Co-authored-by: qiang <qw13131wang@gmail.com>

Co-authored-by: qiang <qw13131wang@gmail.com>
This commit is contained in:
Xc 2022-12-09 14:46:58 +08:00 committed by GitHub
parent 15d146949f
commit 69895aeccb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,22 +39,33 @@ color-picker/sizes
:::
## Attributes
## API
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------- | ------- | ---------------------- | ------------------------------------------------------------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether to disable the ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | large / default /small | — |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| color-format | color format of v-model | string | 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 | array | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
### Attributes
## Events
| 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 |
| label<A11yTag/> | ColorPicker aria-label | ^[string] | — |
| id | ColorPicker id | ^[string] | — |
| Name | Description | Parameters |
| ------------- | ---------------------------------------------- | ------------------ |
| change | triggers when input value changes | color value |
| active-change | triggers when the current active color changes | active color value |
### Events
| Name | Description | Type |
| ------------- | ---------------------------------------------- | ------------------------------------ |
| change | triggers when input value changes | ^[Function]`(value: string) => void` |
| active-change | triggers when the current active color changes | ^[Function]`(value: string) => void` |
### Exposes
| Name | Description | Type |
| ----- | -------------------- | ---------------- |
| color | current color object | ^[object]`Color` |

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

@ -7,27 +7,60 @@ import type { ComputedRef, ExtractPropTypes, InjectionKey } from 'vue'
import type ColorPicker from './color-picker.vue'
export const colorPickerProps = buildProps({
/**
* @description binding value
*/
modelValue: String,
/**
* @description ColorPicker id
*/
id: String,
/**
* @description whether to display the alpha slider
*/
showAlpha: Boolean,
/**
* @description color format of v-model
*/
colorFormat: String,
/**
* @description whether to disable the ColorPicker
*/
disabled: Boolean,
/**
* @description size of ColorPicker
*/
size: useSizeProp,
/**
* @description custom class name for ColorPicker's dropdown
*/
popperClass: {
type: String,
default: '',
},
/**
* @description ColorPicker aria-label
*/
label: {
type: String,
default: undefined,
},
/**
* @description ColorPicker tabindex
*/
tabindex: {
type: [String, Number],
default: 0,
},
/**
* @description predefined color options
*/
predefine: {
type: definePropType<string[]>(Array),
},
/**
* @description whether to trigger form validation
*/
validateEvent: {
type: Boolean,
default: true,

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

@ -58,11 +58,7 @@
<template #default>
<div
:id="buttonId"
:class="[
ns.b('picker'),
ns.is('disabled', colorDisabled),
ns.bm('picker', colorSize),
]"
:class="btnKls"
role="button"
:aria-label="buttonAriaLabel"
:aria-labelledby="buttonAriaLabelledby"
@ -197,6 +193,14 @@ const buttonAriaLabelledby = computed<string | undefined>(() => {
return isLabeledByFormItem.value ? formItem?.labelId : undefined
})
const btnKls = computed(() => {
return [
ns.b('picker'),
ns.is('disabled', colorDisabled.value),
ns.bm('picker', colorSize.value),
]
})
function displayedRgb(color: Color, showAlpha: boolean) {
if (!(color instanceof Color)) {
throw new TypeError('color should be instance of _color Class')
@ -324,6 +328,9 @@ provide(colorPickerContextKey, {
})
defineExpose({
/**
* @description current color object
*/
color,
})
</script>