feat(color-picker): add color-picker (#3176)

* feat(ColorPicker): init * feat(color-picker): init color-picker * feat(color-picker): 事件优化 * chore(color-picker): lint * test(color-picker): update snapshot * refactor(color-picker): css var * chore(color-picker): update snapshot" * chore: update example * chore: update snapshot" * chore: update pkg.json * feat(color-picker): update color on change * refactor(color-picker): use css vars * fix(color-picker): 修复tinyColor中hsv转rgb中黑色突变问题 * feat(color-picker): update slider css * fix(color-picker): support default value * chore: update test case * feat(color-picker): 走查优化 * chore: update snapshot * feat(color-picker): 去掉滚动条 * feat(color-picker): 体验优化 --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Oct 25, 2024 · 00c8e51 · 00c8e51
1 parent ae76113
commit 00c8e51
Show file tree

Hide file tree

Showing 38 changed files with 2,109 additions and 5 deletions.
diff --git a/example/app.json b/example/app.json
@@ -89,6 +89,7 @@
     "pages/link/skyline/link",
     "pages/col/col",
     "pages/col/skyline/col",
+    "pages/color-picker/color-picker",
     "pages/guide/guide"
   ],
   "subpackages": [

diff --git a/example/pages/home/data/form.ts b/example/pages/home/data/form.ts
@@ -14,6 +14,11 @@ const form = {
       name: 'Checkbox',
       label: '多选框',
     },
+    {
+      name: 'ColorPicker',
+      label: '颜色选择器',
+      path: '/pages/color-picker/color-picker',
+    },
     {
       name: 'DateTimePicker',
       label: '时间选择器',

diff --git a/example/project.config.json b/example/project.config.json
@@ -129,6 +129,12 @@
           "query": "",
           "scene": null
         },
+        {
+          "name": "color-picker",
+          "pathName": "pages/color-picker/color-picker",
+          "query": "",
+          "scene": null
+        },
         {
           "name": "dialog",
           "pathName": "pages/dialog/dialog",

diff --git a/package.json b/package.json
@@ -124,6 +124,7 @@
     ]
   },
   "dependencies": {
-    "dayjs": "^1.10.7"
+    "dayjs": "^1.10.7",
+    "tinycolor2": "^1.4.2"
   }
-}
+}
diff --git a/site/site.config.mjs b/site/site.config.mjs
@@ -232,6 +232,13 @@ export const docs = [
         path: '/miniprogram/components/checkbox',
         component: () => import('@/checkbox/README.md'),
       },
+      {
+        title: 'ColorPicker 颜色选择器',
+        name: 'color-picker',
+        meta: { docType: 'form' },
+        path: '/miniprogram/components/color-picker',
+        component: () => import('@/color-picker/README.md'),
+      },
       {
         title: 'DateTimePicker 时间选择器',
         titleEn: 'DateTimePicker',

diff --git a/src/cascader/cascader.ts b/src/cascader/cascader.ts
@@ -102,10 +102,10 @@ export default class Cascader extends SuperComponent {
         steps,
         selectedValue,
         stepIndex: items.length - 1,
-      }
+      };
 
-      if(items.length > this.data.items.length){
-        Object.assign(setData,{ items })
+      if (items.length > this.data.items.length) {
+        Object.assign(setData, { items });
       }
 
       this.setData(setData);

diff --git a/src/color-picker/README.en-US.md b/src/color-picker/README.en-US.md
@@ -0,0 +1,21 @@
+:: 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
+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-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; value: number;}`<br/>
diff --git a/src/color-picker/README.md b/src/color-picker/README.md
@@ -0,0 +1,55 @@
+---
+title: ColorPicker 颜色选择器
+description: 用于颜色选择，支持多种格式。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-color-picker": "tdesign-miniprogram/color-picker/color-picker"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 基础颜色选择器
+
+{{ base }}
+
+#### 带色板的颜色选择器
+
+{{ multiple }}
+
+### 组件状态
+
+{{ format }}
+
+
+## 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    |
+| 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-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; value: number;}`<br/> |
diff --git a/src/color-picker/__test__/__snapshots__/demo.test.js.snap b/src/color-picker/__test__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorPicker ColorPicker base demo works fine 1`] = `
+<base>
+  <t-color-picker />
+</base>
+`;
+
+exports[`ColorPicker ColorPicker format demo works fine 1`] = `
+<format>
+  <wx-view>
+    <wx-view
+      class="format-line"
+    >
+      <wx-view
+        class="format-item active"
+        data-format="CSS"
+        catch:tap="clickFormat"
+      >
+        <t-icon
+          customStyle="position: absolute;left: 4rpx;top: 4rpx;z-index: 1;color: #fff"
+          name="check"
+          size="14"
+        />
+        
+      CSS
+    
+      </wx-view>
+      <wx-view
+        class="format-item "
+        data-format="HEX"
+        catch:tap="clickFormat"
+      >
+        
+      HEX
+    
+      </wx-view>
+      <wx-view
+        class="format-item "
+        data-format="RGB"
+        catch:tap="clickFormat"
+      >
+        
+      RGB
+    
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="format-line"
+    >
+      <wx-view
+        class="format-item "
+        data-format="HSL"
+        catch:tap="clickFormat"
+      >
+        
+      HSL
+    
+      </wx-view>
+      <wx-view
+        class="format-item "
+        data-format="HSV"
+        catch:tap="clickFormat"
+      >
+        
+      HSV
+    
+      </wx-view>
+      <wx-view
+        class="format-item "
+        data-format="CMYK"
+        catch:tap="clickFormat"
+      >
+        
+      CMYK
+    
+      </wx-view>
+    </wx-view>
+    <t-color-picker
+      enableAlpha="{{true}}"
+      format="CSS"
+      type="multiple"
+      value="#7bd60b"
+      bind:change="onChange"
+      bind:palette-bar-change="onPaletteBarChange"
+    />
+  </wx-view>
+</format>
+`;
+
+exports[`ColorPicker ColorPicker multiple demo works fine 1`] = `
+<multiple>
+  <t-color-picker
+    enableAlpha="{{true}}"
+    type="multiple"
+    bind:change="onChange"
+    bind:palette-bar-change="onPaletteBarChange"
+  />
+</multiple>
+`;
diff --git a/src/color-picker/__test__/demo.test.js b/src/color-picker/__test__/demo.test.js
@@ -0,0 +1,19 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+const mapper = ['base', 'format', 'multiple'];
+
+describe('ColorPicker', () => {
+  mapper.forEach((demoName) => {
+    it(`ColorPicker ${demoName} demo works fine`, () => {
+      const id = load(path.resolve(__dirname, `../../color-picker/_example/${demoName}/index`), demoName);
+      const container = simulate.render(id);
+      container.attach(document.createElement('parent-wrapper'));
+      expect(container.toJSON()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/color-picker/_example/base/index.js b/src/color-picker/_example/base/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/color-picker/_example/base/index.json b/src/color-picker/_example/base/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-color-picker": "tdesign-miniprogram/color-picker/color-picker"
+  }
+}
diff --git a/src/color-picker/_example/base/index.wxml b/src/color-picker/_example/base/index.wxml
@@ -0,0 +1 @@
+<t-color-picker />
diff --git a/src/color-picker/_example/base/index.wxss b/src/color-picker/_example/base/index.wxss
diff --git a/src/color-picker/_example/color-picker.json b/src/color-picker/_example/color-picker.json
@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "ColorPicker",
+  "usingComponents": {
+    "base": "./base",
+    "multiple": "./multiple",
+    "format": "./format"
+  }
+}
diff --git a/src/color-picker/_example/color-picker.less b/src/color-picker/_example/color-picker.less
diff --git a/src/color-picker/_example/color-picker.ts b/src/color-picker/_example/color-picker.ts
@@ -0,0 +1 @@
+Page({});
diff --git a/src/color-picker/_example/color-picker.wxml b/src/color-picker/_example/color-picker.wxml
@@ -0,0 +1,16 @@
+<t-navbar class="demo-navbar" title="ColorPicker" leftArrow />
+<view class="demo">
+  <view class="demo-title">ColorPicker 颜色选择器</view>
+  <view class="demo-desc">用于颜色选择，支持多种格式。</view>
+  <t-demo title="01 组件类型" desc="基础颜色选择器">
+    <base />
+  </t-demo>
+
+  <t-demo desc="带色板的颜色选择器">
+    <multiple />
+  </t-demo>
+
+  <t-demo title="02 组件状态" desc="组件模式选择">
+    <format />
+  </t-demo>
+</view>
diff --git a/src/color-picker/_example/format/index.js b/src/color-picker/_example/format/index.js
@@ -0,0 +1,19 @@
+Component({
+  data: {
+    curFormat: 'CSS',
+    color: '#7bd60b',
+  },
+  methods: {
+    onChange(e) {
+      console.log('change', e.detail);
+    },
+    onPaletteBarChange(e) {
+      console.log('onPaletteBarChange', e.detail);
+    },
+    clickFormat(e) {
+      this.setData({
+        curFormat: e.target.dataset.format,
+      });
+    },
+  },
+});
diff --git a/src/color-picker/_example/format/index.json b/src/color-picker/_example/format/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-color-picker": "tdesign-miniprogram/color-picker/color-picker",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}
diff --git a/src/color-picker/_example/format/index.wxml b/src/color-picker/_example/format/index.wxml
@@ -0,0 +1,44 @@
+<view>
+  <view class="format-line">
+    <view
+      class="format-item {{ curFormat === item ? 'active' : '' }}"
+      wx:for="{{['CSS', 'HEX', 'RGB']}}"
+      wx:key="item"
+      data-format="{{item}}"
+      catch:tap="clickFormat"
+    >
+      <t-icon
+        wx:if="{{curFormat === item}}"
+        name="check"
+        size="14"
+        custom-style="position: absolute;left: 4rpx;top: 4rpx;z-index: 1;color: #fff"
+      />
+      {{item}}
+    </view>
+  </view>
+  <view class="format-line">
+    <view
+      class="format-item {{ curFormat === item ? 'active' : '' }}"
+      wx:for="{{['HSL', 'HSV', 'CMYK']}}"
+      wx:key="item"
+      data-format="{{item}}"
+      catch:tap="clickFormat"
+    >
+      <t-icon
+        wx:if="{{curFormat === item}}"
+        name="check"
+        size="14"
+        custom-style="position: absolute;left: 4rpx;top: 4rpx;z-index: 1;color: #fff"
+      />
+      {{item}}
+    </view>
+  </view>
+  <t-color-picker
+    enableAlpha
+    type="multiple"
+    format="{{curFormat}}"
+    value="{{color}}"
+    bind:change="onChange"
+    bind:palette-bar-change="onPaletteBarChange"
+  />
+</view>