diff --git a/packages/components/divider/__tests__/divider.test.tsx b/packages/components/divider/__tests__/divider.test.tsx index 93b71ea32c..555147997e 100644 --- a/packages/components/divider/__tests__/divider.test.tsx +++ b/packages/components/divider/__tests__/divider.test.tsx @@ -29,8 +29,7 @@ describe('Divider', () => { text , ); - 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(); @@ -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(); + expect(wrapperString.attributes('style')).toContain('margin: 20px 0px;'); + + // number + const wrapperNumber = mount(); + expect(wrapperNumber.attributes('style')).toContain('margin: 30px 0px;'); + + // vertical + const wrapperVertical = mount(); + expect(wrapperVertical.attributes('style')).toContain('margin: 0px 40px;'); + }); }); }); diff --git a/packages/components/divider/_usage/props.json b/packages/components/divider/_usage/props.json index 413f3d6824..e5b9a7e37a 100644 --- a/packages/components/divider/_usage/props.json +++ b/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" - } - ] } ] \ No newline at end of file diff --git a/packages/components/divider/divider.en-US.md b/packages/components/divider/divider.en-US.md index f9f6cd6d85..09af5a070f 100644 --- a/packages/components/divider/divider.en-US.md +++ b/packages/components/divider/divider.en-US.md @@ -1,13 +1,14 @@ :: 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 diff --git a/packages/components/divider/divider.md b/packages/components/divider/divider.md index f1a22a716b..a4e154f026 100644 --- a/packages/components/divider/divider.md +++ b/packages/components/divider/divider.md @@ -1,13 +1,14 @@ :: 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 -theme | String | - | 已废弃。请更为使用 `layout`。分隔线类型有两种:水平和垂直。可选项:horizontal/vertical | N +size | String / Number | - | 间距大小 | N diff --git a/packages/components/divider/divider.tsx b/packages/components/divider/divider.tsx index ddade89527..d933e4cf8e 100644 --- a/packages/components/divider/divider.tsx +++ b/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 ( -
- {children && {children}} +
+ {showText.value && {children}}
); }; diff --git a/packages/components/divider/props.ts b/packages/components/divider/props.ts index 9f5155e99e..4c0995799f 100644 --- a/packages/components/divider/props.ts +++ b/packages/components/divider/props.ts @@ -36,12 +36,8 @@ export default { return ['horizontal', 'vertical'].includes(val); }, }, - /** 已废弃。请更为使用 `layout`。分隔线类型有两种:水平和垂直 */ - theme: { - type: String as PropType, - validator(val: TdDividerProps['theme']): boolean { - if (!val) return true; - return ['horizontal', 'vertical'].includes(val); - }, + /** 间距大小 */ + size: { + type: [String, Number] as PropType, }, }; diff --git a/packages/components/divider/type.ts b/packages/components/divider/type.ts index 8a5536f0db..8c24a508aa 100644 --- a/packages/components/divider/type.ts +++ b/packages/components/divider/type.ts @@ -31,8 +31,7 @@ export interface TdDividerProps { */ layout?: 'horizontal' | 'vertical'; /** - * 请更为使用 `layout`。分隔线类型有两种:水平和垂直 - * @deprecated + * 间距大小 */ - theme?: 'horizontal' | 'vertical'; + size?: string | number; }