feat(Switch): support shape prop

packages/components/switch/__tests__/__snapshots__/switch.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Switch > :props > :customValue 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"
@@ -19,7 +19,7 @@ exports[`Switch > :props > :customValue 1`] = `
 
 exports[`Switch > :props > :defaultValue 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"
@@ -36,7 +36,7 @@ exports[`Switch > :props > :defaultValue 1`] = `
 
 exports[`Switch > :props > :disabled 1`] = `
 <div
-  class="t-switch t-size-m t-is-disabled"
+  class="t-switch t-switch--shape-circle t-size-m t-is-disabled"
 >
   <span
     class="t-switch__handle t-is-disabled"
@@ -53,7 +53,7 @@ exports[`Switch > :props > :disabled 1`] = `
 
 exports[`Switch > :props > :label 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"
@@ -70,7 +70,7 @@ exports[`Switch > :props > :label 1`] = `
 
 exports[`Switch > :props > :loading 1`] = `
 <div
-  class="t-switch t-size-m t-is-loading"
+  class="t-switch t-switch--shape-circle t-size-m t-is-loading"
 >
   <span
     class="t-switch__handle t-is-loading"
@@ -110,7 +110,7 @@ exports[`Switch > :props > :loading 1`] = `
 
 exports[`Switch > :props > :modelValue 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"
@@ -127,7 +127,7 @@ exports[`Switch > :props > :modelValue 1`] = `
 
 exports[`Switch > :props > :onChange 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"
@@ -144,7 +144,7 @@ exports[`Switch > :props > :onChange 1`] = `
 
 exports[`Switch > :props > :size 1`] = `
 <div
-  class="t-switch t-size-s"
+  class="t-switch t-switch--shape-circle t-size-s"
 >
   <span
     class="t-switch__handle"
@@ -161,7 +161,7 @@ exports[`Switch > :props > :size 1`] = `
 
 exports[`Switch > :props > :value 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"
@@ -178,7 +178,7 @@ exports[`Switch > :props > :value 1`] = `
 
 exports[`Switch > <slot> > <label> 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"
@@ -197,7 +197,7 @@ exports[`Switch > <slot> > <label> 1`] = `
 
 exports[`Switch > @event > Event passthrough: change 1`] = `
 <div
-  class="t-switch t-size-m"
+  class="t-switch t-switch--shape-circle t-size-m"
 >
   <span
     class="t-switch__handle"

packages/components/switch/__tests__/base.test.tsx

@@ -137,6 +137,54 @@ describe('switch', () => {
         expect(eleCls.includes('t-size-s')).toBe(true);
       });
     });
+    // test props shape
+    describe(':props.shape', () => {
+      it('shape default value is circle', () => {
+        const wrapper = mount(Switch);
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-switch--shape-circle')).toBe(true);
+      });
+      it('shape={round} works find', () => {
+        const wrapper = mount({
+          render() {
+            return <Switch shape="round" />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-switch--shape-round')).toBe(true);
+      });
+      it('shape={line} works find', () => {
+        const label = vi.fn(() => 'open');
+        const wrapper = mount({
+          render() {
+            return <Switch shape="line" label={label} />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-switch--shape-line')).toBe(true);
+        expect(ele.find('.t-switch__content').exists()).toBe(false);
+        expect(label).not.toBeCalled();
+        expect(eleCls.includes('t-is-disabled')).toBe(false);
+        expect(eleCls.includes('t-is-loading')).toBe(false);
+      });
+      it('shape={line} works with size and status', () => {
+        const wrapper = mount({
+          render() {
+            return <Switch shape="line" size="small" defaultValue disabled loading />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-switch--shape-line')).toBe(true);
+        expect(eleCls.includes('t-size-s')).toBe(true);
+        expect(eleCls.includes('t-is-checked')).toBe(true);
+        expect(eleCls.includes('t-is-disabled')).toBe(true);
+        expect(eleCls.includes('t-is-loading')).toBe(true);
+      });
+    });
     // test props beforeChange
     describe(':props.beforeChange', () => {
       it('beforeChange resolve', async () => {

packages/components/switch/_example/shape.vue

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

packages/components/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",
@@ -30,4 +49,4 @@
       }
     ]
   }
-]
+]

packages/components/switch/props.ts

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

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

@@ -10,6 +10,7 @@ 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
 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` 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

packages/components/switch/switch.md

@@ -10,6 +10,7 @@ customValue | Array | - | 用于自定义开关的值，[打开时的值，关
 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
+shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项：circle/round/line | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | 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

packages/components/switch/switch.tsx

@@ -8,6 +8,8 @@ import { TNodeReturnValue } from '../common';
 
 import { isArray, isString, isFunction } from 'lodash-es';
 
+const SWITCH_SHAPES = ['circle', 'round', 'line'];
+
 export default defineComponent({
   name: 'TSwitch',
   props,
@@ -58,9 +60,12 @@ export default defineComponent({
         });
     }
 
+    const shape = computed(() => (SWITCH_SHAPES.includes(props.shape) ? props.shape : 'circle'));
+
     // classes
     const classes = computed(() => [
       `${COMPONENT_NAME.value}`,
+      `${COMPONENT_NAME.value}--shape-${shape.value}`,
       SIZE.value[props.size],
       {
         [STATUS.value.disabled]: disabled.value,
@@ -126,14 +131,14 @@ export default defineComponent({
       let loadingContent: TNodeReturnValue;
       if (props.loading) {
         loadingContent = <TLoading size="small" />;
-      } else if (content.value) {
+      } else if (shape.value !== 'line' && content.value) {
         switchContent = content.value;
       }
 
       return (
         <div class={classes.value} onClick={toggle}>
           <span class={nodeClasses.value}>{loadingContent}</span>
-          <div class={contentClasses.value}>{switchContent}</div>
+          {shape.value !== 'line' && <div class={contentClasses.value}>{switchContent}</div>}
         </div>
       );
     };

packages/components/switch/type.ts

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