From 96be85b89a7617dab769b4bdd58d044e811d2fb5 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Mon, 15 Jan 2024 13:02:25 +0800 Subject: [PATCH] feat(ColorPicker): add color-picker --- db/TDesign.db | Bin 860160 -> 860160 bytes .../src/color-picker/README.en-US.md | 22 +++ .../src/color-picker/README.md | 22 +++ packages/scripts/api.json | 143 ++++++++++++++++-- 4 files changed, 173 insertions(+), 14 deletions(-) create mode 100644 packages/products/tdesign-miniprogram/src/color-picker/README.en-US.md create mode 100644 packages/products/tdesign-miniprogram/src/color-picker/README.md diff --git a/db/TDesign.db b/db/TDesign.db index 50c3c9c4aed4b460704239e53f2add4fdaae4a24..7ee719a69ce377dc82f3a390d0c1e214bb31d6d5 100644 GIT binary patch delta 933 zcmZuuZAep57{2G+-JN^y?sdypVzao-Vtrt3bA!3ERu*PNlj!S5Kl-|)G~4{>OM<4& zFN#=couVwW5ei}~v0E<6A4cG>L4rX)lx#U8&_8AnLFYOZseU}1_q@F4d7k$9qChP@MWHsXgu962 zW^i2bx507<1s67$!3Hcofl0h(1f9k$BWR0qHv-!bt8($b*&7X>E=WKto-WPXI#Bq+ z&RA(ssMws$9&+N#E~Xk3Hq5vf0*(7HKSa({8mpa;&x-n^Uqn-BzpH>iAEqR>XPBi3(@rjFy^96e|*u@2ub&N-2iHFz5g0+*c8`WVc z`M6^|()T4+mx$gb#duF_Joad!J(TQzlc=vtbidjx&2!DorUnV?*Vea*Ti5@6LD&~B z<8V7&ZfBldUbORE?*Os9>+HEQ5=mIKFD*3kC5vj$B3+g&^ZFJNoDaJ))kHElQOwMq s4TLhKQs?AI-!l*1_Q7jsZ5i0E$S@#pv6W#&Ksm#+=yYs1A5 zntBqBqp25{&Zoqz5m6LnKT$C@{?f#0ILg=9U2kB$eqgVI_>AuhYdve1m8%QEBQ zTR5y$)Gf7bHLRMoBy2&2V*R!{)|S<_*1?`dyTG2u-{8zw@?gMKVkV&#{{=HZp-Y|4 zb*a&^tSn%cP|pN4*65W&Y!Q1>Wo%J<^AM5Ohx8#85qWS#KjjhbI(iO~!nUJ(3dn7T z7_gf}&~+`Zh=!<%CGlK56RxO;B6OlC0XK@M4}SEZxGXiv9&C$_Up&EM+~Gr7qwMk| zI3LL}T=+r;G(N^YK>IW4Rgbe(DEiGY_8!K)CN#<#zHNSlz3cKYd)uYMmSz4EaWOS- zDwHSLhTPjC35}XfZ=5kWWH-np75+5M{>k+XGNx)~FMSG~d7RdG(ddK81swBZi1>Q| zFO{(Txk=7`56r|f>C80TJBP#2?qNZ=y+UJN2GteniFq<)b;UeALKFoR)P4nQ7hi+} zO>z}hBPdYK@)J1V-RvExVLl$m=5uyX>ksNJ l#b~l$)@bl0|HJR-EjB@4(GWQq$nhO=&?Z$~wt9p6jQ?iGu}1&^ diff --git a/packages/products/tdesign-miniprogram/src/color-picker/README.en-US.md b/packages/products/tdesign-miniprogram/src/color-picker/README.en-US.md new file mode 100644 index 000000000..f373b7f86 --- /dev/null +++ b/packages/products/tdesign-miniprogram/src/color-picker/README.en-US.md @@ -0,0 +1,22 @@ +:: BASE_DOC :: + +## API + +### ColorPicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +enable-alpha | Boolean | false | \- | N +format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N +show-primary-color-preview | Boolean | true | \- | N +swatch-colors | Array | - | swatch colors。Typescript：`Array \| null` | N +type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N +value | String | - | color value | N +default-value | String | undefined | color value。uncontrolled property | N + +### ColorPicker Events + +name | params | description +-- | -- | -- +change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `
+palette-bar-change | `(detail: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
diff --git a/packages/products/tdesign-miniprogram/src/color-picker/README.md b/packages/products/tdesign-miniprogram/src/color-picker/README.md new file mode 100644 index 000000000..c59ac10df --- /dev/null +++ b/packages/products/tdesign-miniprogram/src/color-picker/README.md @@ -0,0 +1,22 @@ +:: BASE_DOC :: + +## API + +### ColorPicker Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +enable-alpha | Boolean | false | 是否开启透明通道 | N +format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N +show-primary-color-preview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N +swatch-colors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array \| null` | N +type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N +value | String | - | 色值 | N +default-value | String | undefined | 色值。非受控属性 | N + +### ColorPicker Events + +名称 | 参数 | 描述 +-- | -- | -- +change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `
+palette-bar-change | `(detail: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 67ceb64f6..dca9087f5 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -25241,8 +25241,7 @@ "4", "8", "16", - "32", - "64" + "32" ], "component": "ColorPicker", "field_category": 1, @@ -25275,8 +25274,7 @@ "Angular(PC)", "Vue(Mobile)", "React(Mobile)", - "Angular(Mobile)", - "Miniprogram" + "Angular(Mobile)" ], "field_type_text": [ "Boolean" @@ -25414,7 +25412,8 @@ "platform_framework": [ "1", "2", - "4" + "4", + "64" ], "component": "ColorPicker", "field_category": 1, @@ -25444,7 +25443,8 @@ "platform_framework_text": [ "Vue(PC)", "React(PC)", - "Angular(PC)" + "Angular(PC)", + "Miniprogram" ], "field_type_text": [ "Boolean" @@ -25496,7 +25496,8 @@ "platform_framework": [ "1", "2", - "4" + "4", + "64" ], "component": "ColorPicker", "field_category": 1, @@ -25526,7 +25527,8 @@ "platform_framework_text": [ "Vue(PC)", "React(PC)", - "Angular(PC)" + "Angular(PC)", + "Miniprogram" ], "field_type_text": [ "String" @@ -25742,7 +25744,8 @@ "platform_framework": [ "1", "2", - "4" + "4", + "64" ], "component": "ColorPicker", "field_category": 1, @@ -25772,7 +25775,8 @@ "platform_framework_text": [ "Vue(PC)", "React(PC)", - "Angular(PC)" + "Angular(PC)", + "Miniprogram" ], "field_type_text": [ "Boolean" @@ -25783,7 +25787,8 @@ "platform_framework": [ "1", "2", - "4" + "4", + "64" ], "component": "ColorPicker", "field_category": 1, @@ -25813,12 +25818,50 @@ "platform_framework_text": [ "Vue(PC)", "React(PC)", - "Angular(PC)" + "Angular(PC)", + "Miniprogram" ], "field_type_text": [ "Array" ] }, + { + "id": 1705294739, + "platform_framework": [ + "64" + ], + "component": "ColorPicker", + "field_category": 1, + "field_name": "type", + "field_type": [ + "1" + ], + "field_default_value": "base", + "field_enum": "base/multiple", + "field_desc_zh": "颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2024-01-15 04:58:59", + "update_time": "2024-01-15 04:58:59", + "event_output": null, + "custom_field_type": "TypeEnum 【type TypeEnum = 'base' | 'multiple'】", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Miniprogram" + ], + "field_type_text": [ + "String" + ] + }, { "id": 2118, "platform_framework": [ @@ -25860,6 +25903,43 @@ "String" ] }, + { + "id": 1705294511, + "platform_framework": [ + "64" + ], + "component": "ColorPicker", + "field_category": 1, + "field_name": "value", + "field_type": [ + "1" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "色值", + "field_desc_en": "color value", + "field_required": 0, + "event_input": "", + "create_time": "2024-01-15 04:55:11", + "update_time": "2024-01-15 04:55:11", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": "v-model", + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 1, + "field_category_text": "Props", + "platform_framework_text": [ + "Miniprogram" + ], + "field_type_text": [ + "String" + ] + }, { "id": 2126, "platform_framework": [ @@ -25897,12 +25977,46 @@ ], "field_type_text": [] }, + { + "id": 1705294804, + "platform_framework": [ + "64" + ], + "component": "ColorPicker", + "field_category": 2, + "field_name": "change", + "field_type": [], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源", + "field_desc_en": null, + "field_required": 0, + "event_input": "(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })【type ColorPickerChangeTrigger = 'palette-saturation-brightness' | 'palette-saturation' | 'palette-brightness' | 'palette-hue-bar' | 'palette-alpha-bar' | 'preset' 】", + "create_time": "2024-01-15 05:00:04", + "update_time": "2024-01-15 05:00:04", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Miniprogram" + ], + "field_type_text": [] + }, { "id": 2125, "platform_framework": [ "1", "2", - "4" + "4", + "64" ], "component": "ColorPicker", "field_category": 2, @@ -25930,7 +26044,8 @@ "platform_framework_text": [ "Vue(PC)", "React(PC)", - "Angular(PC)" + "Angular(PC)", + "Miniprogram" ], "field_type_text": [] },