feat(ColorPicker): add color-picker

TDesignOteam · Jan 15, 2024 · 96be85b · 96be85b
1 parent 97dba58
commit 96be85b
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 14 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
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
@@ -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<string> \| 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)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+palette-bar-change | `(detail: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/>
diff --git a/packages/products/tdesign-miniprogram/src/color-picker/README.md 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<string> \| 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)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+palette-bar-change | `(detail: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/>
diff --git 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": []
     },