feat: support borderless (Tencent#4192)

* feat(AutoComplete): support borderless

* feat(tagInput): support borderless

* feat(date-picker): support label and borderless

* chore: update _common

* feat(color-picker): support borderless

* chore: udpate _common

* feat(time-picker): support borderless

* fix: "HighlightOptionProps"

* feat(time-picker): support  valueDisplay

* fix(color-picker): borderless

* feat(auto-complete): live demo

* fix(time-picker): class error

* chore: snap update

script/generate-usage/config.js

@@ -1,5 +1,11 @@
 /* eslint-disable */
 module.exports = {
+  'auto-complete': {
+    panelStr: `const panelList = [{label: 'AutoComplete', value: 'AutoComplete'}];`,
+    render: {
+      AutoComplete: `<t-auto-complete v-bind="configProps" :options="['第一个联想词', '第二个联想词', '第三个联想词']" />`,
+    },
+  },
   button: {
     panelStr: `const panelList = [{label: 'button', value: 'button'}];`,
     render: {

src/auto-complete/_usage/index.vue

@@ -0,0 +1,27 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
+    <template #AutoComplete="{ configProps }"
+      ><t-auto-complete v-bind="configProps" :options="['第一个联想词', '第二个联想词', '第三个联想词']"
+    /></template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'AutoComplete', value: 'AutoComplete' }];
+
+const usageCodeMap = {
+  AutoComplete:
+    "<t-auto-complete v-bind=\"configProps\" :options=\"['第一个联想词', '第二个联想词', '第三个联想词']\" />",
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>

src/auto-complete/_usage/props.json

@@ -0,0 +1,51 @@
+[
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "clearable",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "disabled",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "highlightKeyword",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "readonly",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "size",
+    "type": "enum",
+    "defaultValue": "medium",
+    "options": [
+      {
+        "label": "small",
+        "value": "small"
+      },
+      {
+        "label": "medium",
+        "value": "medium"
+      },
+      {
+        "label": "large",
+        "value": "large"
+      }
+    ]
+  }
+]

src/auto-complete/auto-complete.en-US.md

@@ -1,11 +1,13 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 autofocus | Boolean | - | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | - | \- | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
@@ -19,8 +21,8 @@ panelTopContent | String / Slot / Function | - | Typescript：`string \| TNode`
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/auto-complete/type.ts) | N
 readonly | Boolean | - | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-status | String | default | options：default/success/warning/error | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
 textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/auto-complete/type.ts) | N
 tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N

src/auto-complete/auto-complete.md

@@ -1,11 +1,13 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 autofocus | Boolean | - | 自动获取焦点 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | - | 是否允许清空 | N
 default | String / Slot / Function | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用 | N

src/auto-complete/auto-complete.tsx

@@ -1,7 +1,7 @@
 import { computed, ref, defineComponent, toRefs, nextTick } from 'vue';
 import props from './props';
 import { TdAutoCompleteProps } from './type';
-import Input, { InputProps, StrInputProps } from '../input';
+import TInput, { InputProps, StrInputProps } from '../input';
 import Popup, { PopupProps } from '../popup';
 import useCommonClassName from '../hooks/useCommonClassName';
 import AutoCompleteOptionList from './option-list';
@@ -105,7 +105,8 @@ export default defineComponent({
     return () => {
       // 触发元素
       const triggerNode = renderContent('default', 'triggerElement') || (
-        <Input
+        <TInput
+          borderless={props.borderless}
           placeholder={props.placeholder ?? global.value.placeholder}
           tips={props.tips}
           status={props.status}

src/auto-complete/highlight-option.tsx

@@ -1,16 +1,22 @@
 import { computed, defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import { usePrefixClass } from '../hooks/useConfig';
 import isString from 'lodash/isString';
 import escapeRegExp from 'lodash/escapeRegExp';
 
+export interface HighlightOptionProps {
+  content: string;
+  keyword: string;
+}
+
 export default defineComponent({
   name: 'HighlightOption',
 
   props: {
     /** 联想词 */
-    content: String,
+    content: String as PropType<HighlightOptionProps['content']>,
     /** 搜索词 */
-    keyword: String,
+    keyword: String as PropType<HighlightOptionProps['keyword']>,
   },
 
   setup(props) {

src/auto-complete/props.ts

@@ -10,6 +10,8 @@ import { PropType } from 'vue';
 export default {
   /** 自动获取焦点 */
   autofocus: Boolean,
+  /** 无边框模式 */
+  borderless: Boolean,
   /** 是否允许清空 */
   clearable: Boolean,
   /** 触发显示联想词下拉框的元素，同 `triggerElement` */

src/auto-complete/type.ts

@@ -14,6 +14,11 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
    * 自动获取焦点
    */
   autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否允许清空
    */
@@ -146,8 +151,3 @@ export interface AutoCompleteOptionObj {
   text?: string;
   [key: string]: any;
 }
-
-export interface HighlightOptionProps {
-  content: string;
-  keyword: string;
-}

src/color-picker/color-picker.en-US.md

@@ -1,24 +1,27 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ColorPicker Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N
+closeBtn | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+colorModes | Array | ["monochrome", "linear-gradient"] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | \- | N
 enableAlpha | Boolean | false | \- | N
 enableMultipleGradient | Boolean | true | \- | N
-format | String | RGB | options：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/color-picker/type.ts) | N
 multiple | Boolean | false | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/color-picker/type.ts) | N
 recentColors | Array | [] | used color recently。`v-model:recentColors` is supported。Typescript：`boolean \| Array<string> \| null` | N
 defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array<string> \| null` | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/color-picker/type.ts) | N
 showPrimaryColorPreview | Boolean | true | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 swatchColors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
 value | String | - | color value。`v-model` and `v-model:value` is supported | N
 defaultValue | String | - | color value。uncontrolled property | N

src/color-picker/color-picker.md

@@ -1,12 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ColorPicker Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
-colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N
+closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+colorModes | Array | ["monochrome", "linear-gradient"] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | 是否禁用组件 | N
 enableAlpha | Boolean | false | 是否开启透明通道 | N
 enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N

src/color-picker/color-picker.tsx

@@ -80,6 +80,7 @@ export default defineComponent({
             this,
             'default',
             <DefaultTrigger
+              borderless={this.borderless}
               color={this.innerValue}
               disabled={this.disabled}
               clearable={this.clearable}

src/color-picker/props.ts

@@ -8,6 +8,8 @@ import { TdColorPickerProps } from './type';
 import { PropType } from 'vue';
 
 export default {
+  /** 无边框模式 */
+  borderless: Boolean,
   /** 是否可清空 */
   clearable: Boolean,
   /** 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 */
@@ -18,7 +20,7 @@ export default {
   /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */
   colorModes: {
     type: Array as PropType<TdColorPickerProps['colorModes']>,
-    default: () => ['monochrome', 'linear-gradient'],
+    default: (): TdColorPickerProps['colorModes'] => ['monochrome', 'linear-gradient'],
   },
   /** 是否禁用组件 */
   disabled: Boolean,
@@ -51,7 +53,7 @@ export default {
   /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” */
   recentColors: {
     type: Array as PropType<TdColorPickerProps['recentColors']>,
-    default: undefined,
+    default: undefined as TdColorPickerProps['recentColors'],
   },
   /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 */
   defaultRecentColors: {

src/color-picker/trigger.tsx

@@ -17,6 +17,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
     clearable: {
       type: Boolean,
       default: false,
@@ -93,6 +97,7 @@ export default defineComponent({
     };
     return (
       <TInput
+        borderless={this.borderless}
         clearable={this.clearable}
         size={this.size}
         v-slots={inputSlots}

src/color-picker/type.ts

@@ -10,6 +10,11 @@ import { SelectInputProps } from '../select-input';
 import { TNode, SizeEnum } from '../common';
 
 export interface TdColorPickerProps {
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否可清空
    * @default false
@@ -22,7 +27,7 @@ export interface TdColorPickerProps {
   closeBtn?: string | boolean | TNode;
   /**
    * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色
-   * @default ()=> ['monochrome', 'linear-gradient']
+   * @default ["monochrome", "linear-gradient"]
    */
   colorModes?: Array<'monochrome' | 'linear-gradient'>;
   /**

src/date-picker/DatePicker.tsx

@@ -255,8 +255,10 @@ export default defineComponent({
     return () => (
       <div class={COMPONENT_NAME.value}>
         <TSelectInput
+          borderless={props.borderless}
           disabled={disabled.value}
           value={inputValue.value}
+          label={props.label}
           status={props.status}
           tips={props.tips}
           clearable={props.clearable}

src/date-picker/DateRangePicker.tsx

@@ -406,6 +406,7 @@ export default defineComponent({
       <div class={COMPONENT_NAME.value}>
         <TRangeInputPopup
           disabled={disabled.value}
+          label={props.label}
           status={props.status}
           tips={props.tips || slots.tips}
           inputValue={inputValue.value as string[]}

src/date-picker/_usage/date-picker-props.json

@@ -5,6 +5,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",

src/date-picker/date-picker.en-US.md

@@ -7,6 +7,7 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 allowInput | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 defaultTime | String | '00:00:00' | Time selector default value | N
 disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array<DateValue> \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
@@ -15,6 +16,7 @@ enableTimePicker | Boolean | false | \- | N
 firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N
 format | String | 'YYYY-MM-DD' | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 mode | String | date | options: year/quarter/month/week/date | N
 placeholder | String / Array | undefined | Typescript：`string` | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
@@ -63,6 +65,7 @@ disabled | Boolean | - | \- | N
 enableTimePicker | Boolean | false | \- | N
 firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N
 format | String | - | \- | N
+label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 mode | String | date | options: year/quarter/month/week/date | N
 panelPreselection | Boolean | true | \- | N
 placeholder | String / Array | - | Typescript：`string \| Array<string>` | N