feat(divider): support size api

packages/components/divider/__tests__/divider.test.tsx

@@ -29,8 +29,7 @@ describe('Divider', () => {
           text
         </Divider>,
       );
-      expect(wrapper.classes('t-divider--with-text-left')).toBeTruthy();
-      expect(wrapper.element).toMatchSnapshot('align-vertical-left');
+      expect(wrapper.classes('t-divider--with-text-left')).toBeFalsy();
     });
 
     it(':dashed[true/false]', () => {
@@ -69,15 +68,6 @@ describe('Divider', () => {
       });
     });
 
-    it(':theme[horizontal/vertical]', () => {
-      const { validator } = props.theme;
-      expect(validator('horizontal')).toBeTruthy();
-      expect(validator('vertical')).toBeTruthy();
-      // @ts-expect-error types error
-      expect(validator('other')).toBeFalsy();
-      expect(validator(undefined)).toBeTruthy();
-    });
-
     it(':content[string/function]', () => {
       // string
       const wrapperString = mount(<Divider content="TDesign" />);
@@ -115,5 +105,19 @@ describe('Divider', () => {
       expect(wrapper.text()).toBe('TDesign');
       expect(wrapper.element).toMatchSnapshot('default-priority');
     });
+
+    it(':size[string/number]', () => {
+      // string
+      const wrapperString = mount(<Divider size="20px" />);
+      expect(wrapperString.attributes('style')).toContain('margin: 20px 0px;');
+
+      // number
+      const wrapperNumber = mount(<Divider size={30} />);
+      expect(wrapperNumber.attributes('style')).toContain('margin: 30px 0px;');
+
+      // vertical
+      const wrapperVertical = mount(<Divider layout="vertical" size="40px" />);
+      expect(wrapperVertical.attributes('style')).toContain('margin: 0px 40px;');
+    });
   });
 });

packages/components/divider/_usage/props.json

@@ -38,20 +38,5 @@
         "value": "vertical"
       }
     ]
-  },
-  {
-    "name": "theme",
-    "type": "enum",
-    "defaultValue": "horizontal",
-    "options": [
-      {
-        "label": "horizontal",
-        "value": "horizontal"
-      },
-      {
-        "label": "vertical",
-        "value": "vertical"
-      }
-    ]
   }
 ]

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

@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Divider Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：left/right/center | N
+align | String | center | options: left/right/center | N
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 dashed | Boolean | false | \- | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-layout | String | horizontal | options：horizontal/vertical | N
-theme | String | - | `deprecated`。options：horizontal/vertical | N
+layout | String | horizontal | options: horizontal/vertical | N
+size | String / Number | - | Spacing size | N
+theme | String | - | `deprecated`。options: horizontal/vertical | N

packages/components/divider/divider.md

@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Divider Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
 content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
 default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
+size | String / Number | - | 间距大小 | N
 theme | String | - | 已废弃。请更为使用 `layout`。分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N

packages/components/divider/divider.tsx

@@ -1,6 +1,7 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import props from './props';
 import { useContent, usePrefixClass } from '@tdesign/shared-hooks';
+import { pxCompat } from '@tdesign/common-js/utils/helper';
 
 export default defineComponent({
   name: 'TDivider',
@@ -9,22 +10,30 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('divider');
     const renderContent = useContent();
     return () => {
-      const { layout, dashed, align } = props;
       const children = renderContent('default', 'content');
+      const isHorizontal = computed(() => props.layout !== 'vertical');
+      const showText = computed(() => isHorizontal.value && !!children);
 
       const dividerClassNames = [
         `${COMPONENT_NAME.value}`,
-        [`${COMPONENT_NAME.value}--${layout}`],
+        [`${COMPONENT_NAME.value}--${props.layout}`],
         {
-          [`${COMPONENT_NAME.value}--dashed`]: !!dashed,
-          [`${COMPONENT_NAME.value}--with-text`]: !!children,
-          [`${COMPONENT_NAME.value}--with-text-${align}`]: !!children,
+          [`${COMPONENT_NAME.value}--dashed`]: !!props.dashed,
+          [`${COMPONENT_NAME.value}--with-text`]: !!showText.value,
+          [`${COMPONENT_NAME.value}--with-text-${props.align}`]: !!showText.value,
         },
       ];
+      const dividerWrapperStyle = computed(() => {
+        if (props.size) {
+          const margin = isHorizontal.value ? `${pxCompat(props.size)} 0` : `0 ${pxCompat(props.size)}`;
+          return { margin };
+        }
+        return null;
+      });
 
       return (
-        <div class={dividerClassNames}>
-          {children && <span class={`${COMPONENT_NAME.value}__inner-text`}>{children}</span>}
+        <div class={dividerClassNames} style={dividerWrapperStyle.value}>
+          {showText.value && <span class={`${COMPONENT_NAME.value}__inner-text`}>{children}</span>}
         </div>
       );
     };

packages/components/divider/props.ts

@@ -36,12 +36,8 @@ export default {
       return ['horizontal', 'vertical'].includes(val);
     },
   },
-  /** 已废弃。请更为使用 `layout`。分隔线类型有两种：水平和垂直 */
-  theme: {
-    type: String as PropType<TdDividerProps['theme']>,
-    validator(val: TdDividerProps['theme']): boolean {
-      if (!val) return true;
-      return ['horizontal', 'vertical'].includes(val);
-    },
+  /** 间距大小 */
+  size: {
+    type: [String, Number] as PropType<TdDividerProps['size']>,
   },
 };

packages/components/divider/type.ts

@@ -31,8 +31,7 @@ export interface TdDividerProps {
    */
   layout?: 'horizontal' | 'vertical';
   /**
-   * 请更为使用 `layout`。分隔线类型有两种：水平和垂直
-   * @deprecated
+   * 间距大小
    */
-  theme?: 'horizontal' | 'vertical';
+  size?: string | number;
 }