Feature/color picker

examples/color-picker/color-picker.md

@@ -5,20 +5,28 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' | 'linear-gradient'>` | N
 disabled | Boolean | false | 是否禁用组件 | N
 enableAlpha | Boolean | false | 是否开启透明通道 | N
-format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA/HEX8` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/HEX8/CMYK/CSS | N
-multiple | Boolean | false | 是否允许选中多个颜色 | N
-popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` 等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
-swatchColors | Array | - | 颜色样例。TS 类型：`Array<string>` | N
+format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
+multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N
+popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
+recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean | Array<string>` | N
+defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean | Array<string>` | N
+selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
+swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string>` | N
 value | String | - | 色值。支持语法糖 `v-model` | N
 defaultValue | String | - | 色值。非受控属性 | N
-onChange | Function |  | TS 类型：`(value: string, context: { colors: string[]; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.colors` 表示当前调色板的所有色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette' | 'input'`<br/> | N
-onPaletteChange | Function |  | TS 类型：`(context: { colors: string[] }) => void`<br/>调色板变化时触发，当前色板的色值 | N
+onChange | Function |  | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-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'`<br/> | N
+onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }) => void`<br/>调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/> | N
+onRecentColorsChange | Function |  | TS 类型：`(value: Array<string>) => void`<br/>最近使用颜色发生变化时触发 | N
 
 ### ColorPicker Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: string, context: { colors: string[]; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.colors` 表示当前调色板的所有色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette' | 'input'`<br/>
-palette-change | `(context: { colors: string[] })` | 调色板变化时触发，当前色板的色值
+change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-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'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/>
+recent-colors-change | `(value: Array<string>)` | 最近使用颜色发生变化时触发

examples/color-picker/demos/color-mode.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <div class="item">
+      <h5>默认（单色 + 线性渐变）</h5>
+      <t-color-picker v-model="color1" format="CSS" />
+    </div>
+    <div class="item">
+      <h5>仅单色模式</h5>
+      <t-color-picker v-model="color2" format="CSS" :color-modes="['monochrome']" />
+    </div>
+    <div style="width: 100%"></div>
+    <div class="item">
+      <h5>仅线性渐变模式</h5>
+      <t-color-picker v-model="color3" format="CSS" :color-modes="['linear-gradient']" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color1: 'red',
+      color2: '#0052d9',
+      color3: 'linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)',
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 20px;
+}
+.item h5 {
+  font-weight: normal;
+  margin-bottom: 10px;
+}
+</style>

examples/color-picker/demos/enable-alpha.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker-panel v-model="color" format="RGBA" :enable-alpha="true" @change="handleChange" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'red',
+    };
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+  },
+};
+</script>

examples/color-picker/demos/panel.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker-panel
+      v-model="color"
+      @change="handleChange"
+      @palette-bar-change="handlePaletteChange"
+      @recent-colors-change="handleRecentColorsChange"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+    };
+  },
+  methods: {
+    handleChange(value, context) {
+      console.log(value, context);
+    },
+    handlePaletteChange(context) {
+      console.log('色相面板改变', context);
+    },
+    handleRecentColorsChange(value) {
+      console.log('最近使用颜色改变', value);
+    },
+  },
+};
+</script>

examples/color-picker/demos/recent-color.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <div>
+      <h6>预设最近使用色</h6>
+      <t-color-picker-panel
+        v-model="color"
+        :recent-colors="[
+          'red',
+          'green',
+          'yellow',
+          'blue',
+          'purple',
+          'linear-gradient(to right, #fa709a 0%, #fee140 100%)',
+          'linear-gradient(45deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)',
+          'linear-gradient(120deg, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)',
+        ]"
+      />
+    </div>
+    <div>
+      <h6>完全不显示最近使用色</h6>
+      <t-color-picker-panel v-model="color" :recent-colors="null" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'red',
+    };
+  },
+};
+</script>
+<style scoped>
+.tdesign-demo-block-row {
+  align-items: flex-start;
+}
+h6 {
+  margin-bottom: 10px;
+}
+</style>

examples/color-picker/demos/status-disabled.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker v-model="color" disabled />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'red',
+    };
+  },
+};
+</script>

examples/color-picker/demos/status-readonly.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker-panel v-model="color" disabled />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+    };
+  },
+};
+</script>

examples/color-picker/demos/swatch-color.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <div>
+      <h6>自定义系统色</h6>
+      <t-color-picker-panel v-model="color" :swatch-colors="systemColors" />
+    </div>
+    <div>
+      <h6>完全不显示系统色</h6>
+      <t-color-picker-panel v-model="color" :swatch-colors="null" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+      systemColors: ['red', 'green', 'yellow', 'blue', 'purple'],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tdesign-demo-block-row {
+  align-items: flex-start;
+}
+h6 {
+  margin-bottom: 10px;
+}
+</style>

examples/color-picker/demos/trigger.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker v-model="color" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+    };
+  },
+};
+</script>

examples/color-picker/usage/props.json

@@ -0,0 +1,16 @@
+[
+
+  {
+    "name": "enableAlpha",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+
+  {
+    "name": "disabled",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  }
+]

examples/dialog/demos/custom/bottom.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <p>底部按钮有两个控制属性：confirmBtn 和 cancelBtn。属性类型有多种：string/function/object/boolean。</p><br>
+    <p>底部按钮有两个控制属性：confirmBtn 和 cancelBtn。属性类型有多种：string/function/object/boolean。</p>
+    <br />
     <t-button theme="primary" @click="visible1 = true">自定义底部按钮（文字）</t-button>
     <t-button theme="primary" @click="visible2 = true">自定义底部按钮（任何按钮属性）</t-button>
     <t-button theme="primary" @click="visible3 = true">自定义底部按钮（自定义组件）</t-button>
@@ -38,7 +39,6 @@
       :cancelBtn="false"
     >
     </t-dialog>
-
   </div>
 </template>
 <script>
@@ -52,7 +52,11 @@ export default {
   },
   methods: {
     getConfirmBtn() {
-      return <t-button theme='primary' disabled>我知道了</t-button>;
+      return (
+        <t-button theme="primary" disabled>
+          我知道了
+        </t-button>
+      );
     },
   },
 };

examples/dialog/demos/plugin.vue

@@ -40,7 +40,6 @@ export default Vue.extend({
       const dialogNode = this.$dialog({
         header: 'Dialog-Plugin',
         body: '通过 update 更新弹框内容',
-
       });
       // 更新弹框内容
       dialogNode.update({

examples/loading/demos/fullscreen.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="tdesign-demo-block-column">
-
     <t-loading :loading="loading" text="加载中..." fullscreen />
     <!-- <t-loading :loading="loading" text="加载中..." attach="body" fullscreen /> -->
 

examples/popup/demos/trigger-element.vue

@@ -9,17 +9,14 @@
       </div>
       <div class="t-popup-demo-base-item">
         <t-popup content="我的触发元素通过插槽(triggerElement)渲染">
-          <t-button variant="outline" slot='triggerElement'>具名插槽定义触发元素</t-button>
+          <t-button variant="outline" slot="triggerElement">具名插槽定义触发元素</t-button>
         </t-popup>
       </div>
     </div>
-    <br>
+    <br />
     <div>
       <div class="t-popup-demo-base-item">
-        <t-popup
-          content="我的触发元素通过渲染函数 default 渲染"
-          :default="renderTriggerElement1"
-        ></t-popup>
+        <t-popup content="我的触发元素通过渲染函数 default 渲染" :default="renderTriggerElement1"></t-popup>
       </div>
       <div class="t-popup-demo-base-item">
         <t-popup

examples/tabs/demos/base.vue

@@ -5,10 +5,10 @@
       <t-tabs v-model="value">
         <!-- 默认插槽 和 具名插槽（panel）都是用来渲染面板内容 -->
         <t-tab-panel value="first" label="选项卡1" :destroyOnHide="false">
-          <p style="padding: 25px;">选项卡1的内容，使用 t-tab-panel 渲染</p>
+          <p style="padding: 25px">选项卡1的内容，使用 t-tab-panel 渲染</p>
         </t-tab-panel>
         <t-tab-panel value="second" label="选项卡2" :destroyOnHide="false">
-          <p slot="panel" style="padding: 25px;">选项卡2的内容，使用 t-tab-panel 渲染</p>
+          <p slot="panel" style="padding: 25px">选项卡2的内容，使用 t-tab-panel 渲染</p>
         </t-tab-panel>
         <t-tab-panel value="third" label="选项卡3" :panel="panelRender" />
       </t-tabs>
@@ -26,12 +26,24 @@ export default {
       value: 'first',
       tab: 1,
       tabList: [
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        { label: '选项卡一', value: 1, panel: (h) => <p style="padding: 25px">这是选项卡一的内容，使用 t-tabs 渲染</p> },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        { label: '选项卡二', value: 2, panel: (h) => <p style="padding: 25px">这是选项卡二的内容，使用 t-tabs 渲染</p> },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        { label: '选项卡三', value: 3, panel: (h) => <p style="padding: 25px">这是选项卡三的内容，使用 t-tabs 渲染</p> },
+        {
+          label: '选项卡一',
+          value: 1,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          panel: (h) => <p style="padding: 25px">这是选项卡一的内容，使用 t-tabs 渲染</p>,
+        },
+        {
+          label: '选项卡二',
+          value: 2,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          panel: (h) => <p style="padding: 25px">这是选项卡二的内容，使用 t-tabs 渲染</p>,
+        },
+        {
+          label: '选项卡三',
+          value: 3,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          panel: (h) => <p style="padding: 25px">这是选项卡三的内容，使用 t-tabs 渲染</p>,
+        },
       ],
     };
   },

examples/transfer/demos/custom.vue

@@ -9,7 +9,7 @@
         {{ props.direction === 'left' ? '移除' : '加入' }}
       </template>
       <template v-slot:footer="props" :name="123">
-        <div style="padding:10px 20px;">
+        <div style="padding: 10px 20px">
           <span v-if="props.type === 'source'">选中并加入</span>
           <span v-else>选中并移除</span>
         </div>