[犀牛鸟]feat(Switch): support theme API

packages/components/switch/_example/theme.vue

@@ -0,0 +1,19 @@
+<template>
+  <t-space direction="vertical" size="large">
+    <t-space>
+      <t-switch theme="round" size="small" />
+      <t-switch theme="round" />
+      <t-switch theme="round" size="large" />
+    </t-space>
+    <t-space>
+      <t-switch theme="rectangle" size="small" />
+      <t-switch theme="rectangle" />
+      <t-switch theme="rectangle" size="large" />
+    </t-space>
+    <t-space>
+      <t-switch theme="line" size="small" />
+      <t-switch theme="line" />
+      <t-switch theme="line" size="large" />
+    </t-space>
+  </t-space>
+</template>

packages/components/switch/_usage/props.json

@@ -11,6 +11,25 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "theme",
+    "type": "enum",
+    "defaultValue": "round",
+    "options": [
+      {
+        "label": "round",
+        "value": "round"
+      },
+      {
+        "label": "rectangle",
+        "value": "rectangle"
+      },
+      {
+        "label": "line",
+        "value": "line"
+      }
+    ]
+  },
   {
     "name": "size",
     "type": "enum",

packages/components/switch/props.ts

@@ -8,7 +8,7 @@ import { TdSwitchProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。 */
+  /** Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行 */
   beforeChange: {
     type: Function as PropType<TdSwitchProps['beforeChange']>,
   },
@@ -37,6 +37,15 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 组件风格。round为圆形，rectangle为矩形，line为线形 */
+  theme: {
+    type: String as PropType<TdSwitchProps['theme']>,
+    default: 'round' as TdSwitchProps['theme'],
+    validator(val: TdSwitchProps['theme']): boolean {
+      if (!val) return true;
+      return ['round', 'rectangle', 'line'].includes(val);
+    },
+  },
   /** 开关值 */
   value: {
     type: [String, Number, Boolean] as PropType<TdSwitchProps['value']>,

packages/components/switch/switch.en-US.md

@@ -1,19 +1,21 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Switch Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-beforeChange | Function | - | stop checked change。Typescript：`() => boolean \| Promise<boolean>` | N
-customValue | Array | - | Typescript：`Array<SwitchValue>` | N
+beforeChange | Function | - | Typescript: `() => boolean \| Promise<boolean>` | N
+customValue | Array | - | Typescript: `Array<SwitchValue>` | N
 disabled | Boolean | undefined | \- | N
-label | Array / Slot / Function | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+label | Array / Slot / Function | [] | Typescript: `Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | \- | N
 size | String | medium | options: small/medium/large | N
-value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
-defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
-onChange | Function |  | Typescript：`(value: T, context: { e: MouseEvent }) => void`<br/> | N
+theme | String | round | options: round/rectangle/line | N
+value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
+defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
+onChange | Function |  | Typescript: `(value: T, context: { e: MouseEvent }) => void`<br/> | N
 
 ### Switch Events
 

packages/components/switch/switch.md

@@ -1,16 +1,21 @@
 :: BASE_DOC ::
+### 不同风格的开关
+
+{{ theme }}
 
 ## API
+
 ### Switch Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 beforeChange | Function | - | Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。TS 类型：`() => boolean \| Promise<boolean>` | N
 customValue | Array | - | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array<SwitchValue>` | N
 disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disabled > Form.disabled | N
 label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | 是否处于加载中状态 | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
+theme | String | round | 组件风格。round为圆形，rectangle为矩形，line为线形。可选项：round/rectangle/line | N
 value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
 onChange | Function |  | TS 类型：`(value: T, context: { e: MouseEvent }) => void`<br/>数据发生变化时触发 | N

packages/components/switch/switch.tsx

@@ -66,6 +66,8 @@ export default defineComponent({
         [STATUS.value.disabled]: disabled.value,
         [STATUS.value.loading]: props.loading,
         [STATUS.value.checked]: innerValue.value === activeValue.value || props.modelValue === activeValue.value,
+        [`${COMPONENT_NAME.value}--line`]: props.theme === 'line',
+        [`${COMPONENT_NAME.value}--rectangle`]: props.theme === 'rectangle',
       },
     ]);
     const nodeClasses = computed(() => {
@@ -100,6 +102,8 @@ export default defineComponent({
     );
 
     const content = computed<VNodeChild>(() => {
+      if (props.theme === 'line') return;
+
       if (isFunction(props.label)) {
         return props.label(h, { value: innerValue.value });
       }

packages/components/switch/type.ts

@@ -4,11 +4,11 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode } from '../common';
+import type { TNode } from '../common';
 
 export interface TdSwitchProps<T = SwitchValue> {
   /**
-   * Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。
+   * Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，回调返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行
    */
   beforeChange?: () => boolean | Promise<boolean>;
   /**
@@ -34,6 +34,11 @@ export interface TdSwitchProps<T = SwitchValue> {
    * @default medium
    */
   size?: 'small' | 'medium' | 'large';
+  /**
+   * 组件风格。round为圆形，rectangle为矩形，line为线形
+   * @default round
+   */
+  theme?: 'round' | 'rectangle' | 'line';
   /**
    * 开关值
    */