[犀牛鸟]feat(ColorPicker): Add input-less trigger support

packages/components/color-picker/__tests__/color-picker.test.tsx

@@ -177,6 +177,20 @@ describe('ColorPicker', () => {
       expect(selectInput.classes()).toContain('t-is-disabled');
     });
 
+    it(':isInput[boolean]', async () => {
+      expect(colorPickerProps.isInput.default).toBe(true);
+
+      const wrapper = mount(<ColorPicker value="#0052d9" />);
+      expect(wrapper.find('.t-color-picker__trigger--default').exists()).toBe(true);
+      expect(wrapper.find('.t-color-picker__trigger--default--no-input').exists()).toBe(false);
+      expect(wrapper.find('.t-input__inner').exists()).toBe(true);
+
+      await wrapper.setProps({ isInput: false });
+      expect(wrapper.find('.t-color-picker__trigger--default--no-input').exists()).toBe(true);
+      expect(wrapper.find('.t-input').exists()).toBe(true);
+      expect(wrapper.find('.t-color-picker__trigger--default__color').exists()).toBe(true);
+    });
+
     it(':showPrimaryColorPreview[boolean]', async () => {
       const { panel: panel1 } = await mountColorPickerAndTriggerPanel({
         props: { value: '0052d9' },

packages/components/color-picker/_example/no-input.vue

@@ -0,0 +1,12 @@
+<template>
+  <t-space>
+    <t-color-picker v-model="color" />
+    <t-color-picker v-model="color" :is-input="false" />
+  </t-space>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const color = ref('#0052d9');
+</script>

packages/components/color-picker/color-picker.en-US.md

@@ -14,6 +14,7 @@ enableAlpha | Boolean | false | \- | N
 enableMultipleGradient | Boolean | true | \- | N
 format | String | RGB | When `enableAlpha` is true, `HEX8/RGBA/HSLA/HSVA` are valid。options: HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N
+isInput | Boolean | true | Whether to display the color value input. When false, only the color swatch is displayed. | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N
 recentColors | Array | [] | used color recently。`v-model:recentColors` is supported。Typescript：`Array<string> \| boolean \| null` | N
 defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`Array<string> \| boolean \| null` | N

packages/components/color-picker/color-picker.md

@@ -14,6 +14,7 @@ enableAlpha | Boolean | false | 是否开启透明通道 | N
 enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N
 format | String | RGB | 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效。可选项：HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N
+isInput | Boolean | true | 是否显示颜色值输入框，值为 false 时仅显示颜色色块 | N
 popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N
 recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。支持语法糖 `v-model:recentColors`。TS 类型：`Array<string> \| boolean \| null` | N
 defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`Array<string> \| boolean \| null` | N

packages/components/color-picker/color-picker.tsx

@@ -63,6 +63,7 @@ export default defineComponent({
                 disabled={props.disabled}
                 clearable={props.clearable}
                 input-props={props.inputProps}
+                isInput={props.isInput}
                 onTriggerChange={setInnerValue}
                 onTriggerClear={handleClear}
                 size={props.size}

packages/components/color-picker/components/trigger/index.tsx

@@ -33,6 +33,10 @@ export default defineComponent({
         };
       },
     },
+    isInput: {
+      type: Boolean,
+      default: true,
+    },
     onTriggerChange: {
       type: Function,
       default: () => {
@@ -77,6 +81,7 @@ export default defineComponent({
     });
 
     return () => {
+      const triggerClassName = `${baseClassName.value}__trigger--default`;
       const inputSlots = {
         label: () => {
           return (
@@ -97,15 +102,17 @@ export default defineComponent({
         },
       };
       return (
-        <TInput
-          borderless={props.borderless}
-          clearable={props.clearable}
-          size={props.size}
-          v-slots={inputSlots}
-          v-model={value.value}
-          disabled={props.disabled}
-          {...inputEvents.value}
-        />
+        <div class={[triggerClassName, { [`${triggerClassName}--no-input`]: !props.isInput }]}>
+          <TInput
+            borderless={props.borderless}
+            clearable={props.clearable}
+            size={props.size}
+            v-slots={inputSlots}
+            v-model={value.value}
+            disabled={props.disabled}
+            {...inputEvents.value}
+          />
+        </div>
       );
     };
   },

packages/components/color-picker/props.ts

@@ -42,6 +42,11 @@ export default {
   inputProps: {
     type: Object as PropType<TdColorPickerProps['inputProps']>,
   },
+  /** 是否显示颜色值输入框，值为 false 时仅显示颜色色块 */
+  isInput: {
+    type: Boolean,
+    default: true,
+  },
   /** 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 */
   popupProps: {
     type: Object as PropType<TdColorPickerProps['popupProps']>,

packages/components/color-picker/type.ts

@@ -48,6 +48,11 @@ export interface TdColorPickerProps {
    * 透传 Input 输入框组件全部属性
    */
   inputProps?: InputProps;
+  /**
+   * 是否显示颜色值输入框，值为 false 时仅显示颜色色块
+   * @default true
+   */
+  isInput?: boolean;
   /**
    * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等
    */