first add files

ProjectLiaisonForm/pages/color-picker/base/index.js

@@ -0,0 +1 @@
+Component({});

ProjectLiaisonForm/pages/color-picker/base/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-color-picker": "tdesign-miniprogram/color-picker/color-picker"
+  }
+}

ProjectLiaisonForm/pages/color-picker/base/index.wxml

@@ -0,0 +1 @@
+<t-color-picker />

ProjectLiaisonForm/pages/color-picker/color-picker.d.ts

@@ -0,0 +1 @@
+

ProjectLiaisonForm/pages/color-picker/color-picker.js

@@ -0,0 +1 @@
+Page({});

ProjectLiaisonForm/pages/color-picker/color-picker.json

@@ -0,0 +1,9 @@
+{
+  "navigationBarTitleText": "ColorPicker",
+  "usingComponents": {
+    "base": "./base",
+    "multiple": "./multiple",
+    "format": "./format",
+    "usePopup": "./use-popup"
+  }
+}

ProjectLiaisonForm/pages/color-picker/color-picker.wxml

@@ -0,0 +1,24 @@
+<t-navbar class="demo-navbar" title="ColorPicker" leftArrow />
+
+<view class="demo">
+  <t-demo-header
+    title="ColorPicker 颜色选择器"
+    desc="用于颜色选择，支持多种格式。"
+    notice="渲染框架支持情况：WebView"
+  />
+  <t-demo title="01 组件类型" desc="基础颜色选择器">
+    <base />
+  </t-demo>
+
+  <t-demo desc="带色板的颜色选择器">
+    <multiple />
+  </t-demo>
+
+  <t-demo desc="弹窗形式的颜色选择器" padding>
+    <usePopup />
+  </t-demo>
+
+  <t-demo title="02 组件状态" desc="组件模式选择">
+    <format />
+  </t-demo>
+</view>

ProjectLiaisonForm/pages/color-picker/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,
+      });
+    },
+  },
+});

ProjectLiaisonForm/pages/color-picker/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"
+  }
+}

ProjectLiaisonForm/pages/color-picker/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>

ProjectLiaisonForm/pages/color-picker/format/index.wxss

@@ -0,0 +1,43 @@
+.format-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 112rpx;
+  margin: 0 32rpx 40rpx;
+}
+
+.format-item {
+  border-radius: 12rpx;
+  height: 100%;
+  background-color: #fff;
+  padding: 32rpx;
+  line-height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+}
+
+.format-item.active {
+  border: 3rpx solid #0052d9;
+}
+
+.format-item.active::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: 0;
+  top: 0;
+  border-top-left-radius: 12rpx;
+  border-top: 56rpx solid #0052d9;
+  border-right: 56rpx solid transparent;
+  border-radius: 0;
+}
+
+.format-item:not(:last-child) {
+  margin-right: 24rpx;
+}

ProjectLiaisonForm/pages/color-picker/multiple/index.js

@@ -0,0 +1,10 @@
+Component({
+  methods: {
+    onChange(e) {
+      console.log('change', e.detail);
+    },
+    onPaletteBarChange(e) {
+      console.log('onPaletteBarChange', e.detail);
+    },
+  },
+});

ProjectLiaisonForm/pages/color-picker/multiple/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-color-picker": "tdesign-miniprogram/color-picker/color-picker"
+  }
+}

ProjectLiaisonForm/pages/color-picker/multiple/index.wxml

@@ -0,0 +1 @@
+<t-color-picker enableAlpha type="multiple" bind:change="onChange" bind:palette-bar-change="onPaletteBarChange" />

ProjectLiaisonForm/pages/color-picker/use-popup/index.js

@@ -0,0 +1,14 @@
+Component({
+  methods: {
+    onChange(e) {
+      console.log('change', e.detail);
+    },
+
+    handlePopup() {
+      this.setData({ visible: true });
+    },
+    onPaletteBarChange(e) {
+      console.log('onPaletteBarChange', e.detail);
+    },
+  },
+});

ProjectLiaisonForm/pages/color-picker/use-popup/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-color-picker": "tdesign-miniprogram/color-picker/color-picker",
+    "t-popup": "tdesign-miniprogram/popup/popup"
+  }
+}

ProjectLiaisonForm/pages/color-picker/use-popup/index.wxml

@@ -0,0 +1,12 @@
+<t-color-picker
+  visible="{{visible}}"
+  use-popup
+  enableAlpha
+  type="multiple"
+  bind:change="onChange"
+  bind:palette-bar-change="onPaletteBarChange"
+/>
+
+<t-button block size="large" variant="outline" theme="primary" bind:tap="handlePopup" t-class="wrapper">
+  弹窗形式的颜色选择器
+</t-button>