Skip to content

Commit

Permalink
feat(color-picker): update mobile-vue color-picker props
Browse files Browse the repository at this point in the history
  • Loading branch information
@novlan1
novlan1 committed Feb 17, 2025
1 parent d098eec commit f047e5b
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 0 deletions.
Binary file modified db/TDesign.db
View file
Binary file not shown.
10 changes: 10 additions & 0 deletions packages/products/tdesign-mobile-vue/src/color-picker/color-picker.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,25 @@ name | type | default | description | required
-- | -- | -- | -- | --
autoClose | Boolean | true | \- | N
clearable | Boolean | false | \- | N
enableAlpha | Boolean | false | \- | N
footer | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
header | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
swatchColors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
usePopup | Boolean | false | \- | N
value | String | - | color value。`v-model` and `v-model:value` is supported | N
defaultValue | String | - | color value。uncontrolled property | N
visible | Boolean | false | \- | N
onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
onClose | Function | | Typescript：`(trigger: ColorPickerTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
onPaletteBarChange | Function | | Typescript：`(context: { color: ColorObject }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/> | N

### ColorPicker Events

name | params | description
-- | -- | --
change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/>
close | `(trigger: ColorPickerTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
10 changes: 10 additions & 0 deletions packages/products/tdesign-mobile-vue/src/color-picker/color-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,25 @@
-- | -- | -- | -- | --
autoClose | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
clearable | Boolean | false | 是否可清空 | N
enableAlpha | Boolean | false | 是否开启透明通道 | N
footer | Slot / Function | - | 底部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
header | Slot / Function | - | 顶部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N
type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
usePopup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
value | String | - | 色值。支持语法糖 `v-model` 或 `v-model:value` | N
defaultValue | String | - | 色值。非受控属性 | N
visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
onClose | Function | | TS 类型：`(trigger: ColorPickerTrigger) => void`<br/>关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
onPaletteBarChange | Function | | TS 类型：`(context: { color: ColorObject }) => void`<br/>调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/> | N

### ColorPicker Events

名称 | 参数 | 描述
-- | -- | --
change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/>
close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
42 changes: 42 additions & 0 deletions packages/products/tdesign-mobile-vue/src/color-picker/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,21 @@ export default {
},
/** 是否可清空 */
clearable: Boolean,
/** 是否开启透明通道 */
enableAlpha: Boolean,
/** 底部插槽，仅在 `usePopup` 为 `true` 时有效 */
footer: {
type: Function as PropType<TdColorPickerProps['footer']>,
},
/** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */
format: {
type: String as PropType<TdColorPickerProps['format']>,
default: 'RGB' as TdColorPickerProps['format'],
validator(val: TdColorPickerProps['format']): boolean {
if (!val) return true;
return ['RGB', 'RGBA', 'HSL', 'HSLA', 'HSB', 'HSV', 'HSVA', 'HEX', 'CMYK', 'CSS'].includes(val);
},
},
/** 顶部插槽，仅在 `usePopup` 为 `true` 时有效 */
header: {
type: Function as PropType<TdColorPickerProps['header']>,
Expand All @@ -28,10 +39,41 @@ export default {
type: Object as PropType<TdColorPickerProps['popupProps']>,
default: () => ({}),
},
/** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */
swatchColors: {
type: Array as PropType<TdColorPickerProps['swatchColors']>,
},
/** 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容 */
type: {
type: String as PropType<TdColorPickerProps['type']>,
default: 'base' as TdColorPickerProps['type'],
validator(val: TdColorPickerProps['type']): boolean {
if (!val) return true;
return ['base', 'multiple'].includes(val);
},
},
/** 是否使用弹出层包裹颜色选择器 */
usePopup: Boolean,
/** 色值 */
value: {
type: String,
default: undefined,
},
modelValue: {
type: String,
default: undefined,
},
/** 色值，非受控属性 */
defaultValue: {
type: String,
default: '',
},
/** 是否显示颜色选择器。`usePopup` 为 true 时有效 */
visible: Boolean,
/** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */
onChange: Function as PropType<TdColorPickerProps['onChange']>,
/** 关闭按钮时触发 */
onClose: Function as PropType<TdColorPickerProps['onClose']>,
/** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */
onPaletteBarChange: Function as PropType<TdColorPickerProps['onPaletteBarChange']>,
};
68 changes: 68 additions & 0 deletions packages/products/tdesign-mobile-vue/src/color-picker/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,20 @@ export interface TdColorPickerProps {
* @default false
*/
clearable?: boolean;
/**
* 是否开启透明通道
* @default false
*/
enableAlpha?: boolean;
/**
* 底部插槽，仅在 `usePopup` 为 `true` 时有效
*/
footer?: TNode;
/**
* 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效
* @default RGB
*/
format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS';
/**
* 顶部插槽，仅在 `usePopup` 为 `true` 时有效
*/
Expand All @@ -31,20 +41,78 @@ export interface TdColorPickerProps {
* @default {}
*/
popupProps?: PopupProps;
/**
* 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
*/
swatchColors?: Array<string> | null;
/**
* 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容
* @default base
*/
type?: TypeEnum;
/**
* 是否使用弹出层包裹颜色选择器
* @default false
*/
usePopup?: boolean;
/**
* 色值
* @default ''
*/
value?: string;
/**
* 色值，非受控属性
* @default ''
*/
defaultValue?: string;
/**
* 色值
* @default ''
*/
modelValue?: string;
/**
* 是否显示颜色选择器。`usePopup` 为 true 时有效
* @default false
*/
visible?: boolean;
/**
* 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
*/
onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void;
/**
* 关闭按钮时触发
*/
onClose?: (trigger: ColorPickerTrigger) => void;
/**
* 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
*/
onPaletteBarChange?: (context: { color: ColorObject }) => void;
}

export type TypeEnum = 'base' | 'multiple';

export type ColorPickerChangeTrigger =
| 'palette-saturation-brightness'
| 'palette-saturation'
| 'palette-brightness'
| 'palette-hue-bar'
| 'palette-alpha-bar'
| 'input'
| 'preset'
| 'recent';

export type ColorPickerTrigger = 'overlay';

export interface ColorObject {
alpha: number;
css: string;
hex: string;
hex8: string;
hsl: string;
hsla: string;
hsv: string;
hsva: string;
rgb: string;
rgba: string;
value: number;
}
14 changes: 14 additions & 0 deletions packages/scripts/api.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29082,6 +29082,7 @@
"1",
"2",
"4",
"8",
"16",
"64"
],
Expand Down Expand Up @@ -29114,6 +29115,7 @@
"Vue(PC)",
"React(PC)",
"Angular(PC)",
"Vue(Mobile)",
"React(Mobile)",
"Miniprogram"
],
Expand Down Expand Up @@ -29248,6 +29250,7 @@
"1",
"2",
"4",
"8",
"16",
"64"
],
Expand Down Expand Up @@ -29280,6 +29283,7 @@
"Vue(PC)",
"React(PC)",
"Angular(PC)",
"Vue(Mobile)",
"React(Mobile)",
"Miniprogram"
],
Expand Down Expand Up @@ -29662,6 +29666,7 @@
"1",
"2",
"4",
"8",
"16",
"64"
],
Expand Down Expand Up @@ -29694,6 +29699,7 @@
"Vue(PC)",
"React(PC)",
"Angular(PC)",
"Vue(Mobile)",
"React(Mobile)",
"Miniprogram"
],
Expand All @@ -29704,6 +29710,7 @@
{
"id": 1705294739,
"platform_framework": [
"8",
"16",
"64"
],
Expand Down Expand Up @@ -29733,6 +29740,7 @@
"support_default_value": 0,
"field_category_text": "Props",
"platform_framework_text": [
"Vue(Mobile)",
"React(Mobile)",
"Miniprogram"
],
Expand Down Expand Up @@ -29825,6 +29833,7 @@
{
"id": 1705294511,
"platform_framework": [
"8",
"16",
"64"
],
Expand Down Expand Up @@ -29854,6 +29863,7 @@
"support_default_value": 1,
"field_category_text": "Props",
"platform_framework_text": [
"Vue(Mobile)",
"React(Mobile)",
"Miniprogram"
],
Expand Down Expand Up @@ -29910,6 +29920,7 @@
"1",
"2",
"4",
"8",
"16"
],
"component": "ColorPicker",
Expand Down Expand Up @@ -29939,6 +29950,7 @@
"Vue(PC)",
"React(PC)",
"Angular(PC)",
"Vue(Mobile)",
"React(Mobile)"
],
"field_type_text": []
Expand Down Expand Up @@ -30055,6 +30067,7 @@
{
"id": 1705394290,
"platform_framework": [
"8",
"16",
"64"
],
Expand Down Expand Up @@ -30082,6 +30095,7 @@
"support_default_value": 0,
"field_category_text": "Events",
"platform_framework_text": [
"Vue(Mobile)",
"React(Mobile)",
"Miniprogram"
],
Expand Down

0 comments on commit f047e5b

Please sign in to comment.