feat(Switch): support shape prop

src/switch/_example-composition/shape.vue

@@ -0,0 +1,15 @@
+<template>
+  <t-space>
+    <t-switch v-model="circleChecked" shape="circle"></t-switch>
+    <t-switch v-model="roundChecked" shape="round"></t-switch>
+    <t-switch v-model="lineChecked" shape="line"></t-switch>
+  </t-space>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '@vue/composition-api';
+
+const circleChecked = ref(true);
+const roundChecked = ref(true);
+const lineChecked = ref(true);
+</script>

src/switch/_example/shape.vue

@@ -0,0 +1,19 @@
+<template>
+  <t-space>
+    <t-switch v-model="circleChecked" shape="circle"></t-switch>
+    <t-switch v-model="roundChecked" shape="round"></t-switch>
+    <t-switch v-model="lineChecked" shape="line"></t-switch>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      circleChecked: true,
+      roundChecked: true,
+      lineChecked: true,
+    };
+  },
+};
+</script>

src/switch/_usage/props.json

@@ -11,6 +11,25 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "shape",
+    "type": "enum",
+    "defaultValue": "circle",
+    "options": [
+      {
+        "label": "circle",
+        "value": "circle"
+      },
+      {
+        "label": "round",
+        "value": "round"
+      },
+      {
+        "label": "line",
+        "value": "line"
+      }
+    ]
+  },
   {
     "name": "size",
     "type": "enum",
@@ -36,4 +55,4 @@
     "defaultValue": false,
     "options": []
   }
-]
+]

src/switch/props.ts

@@ -26,6 +26,14 @@ export default {
   },
   /** 是否处于加载中状态 */
   loading: Boolean,
+  /** 开关形状。`line` 形态不展示开关内容 `label` */
+  shape: {
+    type: String as PropType<TdSwitchProps['shape']>,
+    default: 'circle' as TdSwitchProps['shape'],
+    validator(val: TdSwitchProps['shape']): boolean {
+      return ['circle', 'round', 'line'].includes(val);
+    },
+  },
   /** 开关尺寸 */
   size: {
     type: String as PropType<TdSwitchProps['size']>,

src/switch/switch.en-US.md

@@ -10,6 +10,7 @@ customValue | Array | - | Typescript：`Array<SwitchValue>` | N
 disabled | Boolean | - | \- | N
 label | Array / Slot / Function | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | \- | N
+shape | String | circle | Switch shape. `label` is not rendered when shape is `line`. Options: circle/round/line | N
 size | String | medium | options：small/medium/large | N
 value | String / Number / Boolean | - | `v-model` is supported。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N

src/switch/switch.md

@@ -10,6 +10,7 @@ customValue | Array | - | 用于自定义开关的值，[打开时的值，关
 disabled | Boolean | - | 是否禁用组件 | N
 label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否处于加载中状态 | N
+shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项：circle/round/line | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
 value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model`。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N

src/switch/switch.tsx

@@ -29,6 +29,7 @@
     classes(): ClassName {
       return [
         `${this.componentName}`,
+        `${this.componentName}--shape-${this.shape}`,
         this.commonSizeClassName[this.size],
         {
           [this.commonStatusClassName.disabled]: this.tDisabled,
@@ -129,23 +130,21 @@
     },
   },
   render(): VNode {
-    const {
-      loading, content, nodeClasses, classes, toggle, contentClasses,
-    } = this;
+    const { loading, nodeClasses, classes, toggle, contentClasses } = this;
 
     let switchContent: TNodeReturnValue;
     let loadingContent: TNodeReturnValue;
 
     if (loading) {
       loadingContent = <Loading size="small" />;
-    } else if (content) {
-      switchContent = content;
+    } else if (this.shape !== 'line' && this.content) {
+      switchContent = this.content;
     }
 
     return (
       <div class={classes} onClick={toggle}>
         <span class={nodeClasses}>{loadingContent}</span>
-        <div class={contentClasses}>{switchContent}</div>
+        {this.shape !== 'line' && <div class={contentClasses}>{switchContent}</div>}
       </div>
     );
   },

src/switch/type.ts

@@ -31,6 +31,11 @@ export interface TdSwitchProps {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 开关形状。`line` 形态不展示开关内容 `label`
+   * @default circle
+   */
+  shape?: 'circle' | 'round' | 'line';
   /**
    * 开关尺寸
    * @default medium