From 6a3dccaad884ddc7056f85cb0a17f5b80465361a Mon Sep 17 00:00:00 2001 From: Harry Li <34190570+Lakphy@users.noreply.github.com> Date: Wed, 13 Nov 2024 17:34:37 +0800 Subject: [PATCH] feat(components): [description-item] add labelWidth prop (#18673) * feat(components): [description-item] add labelWidth prop * feat(docs): [description-item] add labelWidth prop in api * feat(components): [descriptions] add test code for * fix(components): [descriptions] more maintainable width compute * feat(docs): [descriptions] add version tips for label-width prop * feat(docs): [descriptions] update label-width support version * chore: code format * feat(components): [descriptions] add labelWidth to descriptions * feat(components): [descriptions] add test code for labelWidth * feat(components): [descriptions] add docs for new labelWidth props --------- Co-authored-by: warmthsea <2586244885@qq.com> --- docs/en-US/component/descriptions.md | 40 ++++++++-------- .../__tests__/descriptions.test.tsx | 46 +++++++++++++++++++ .../descriptions/src/description-item.ts | 7 +++ .../descriptions/src/description.ts | 7 +++ .../descriptions/src/descriptions-cell.ts | 7 ++- .../descriptions/src/descriptions.type.ts | 2 + 6 files changed, 89 insertions(+), 20 deletions(-) diff --git a/docs/en-US/component/descriptions.md b/docs/en-US/component/descriptions.md index 3dca6070a1..30a4307b43 100644 --- a/docs/en-US/component/descriptions.md +++ b/docs/en-US/component/descriptions.md @@ -51,14 +51,15 @@ descriptions/customized-style ### Descriptions Attributes -| Name | Description | Type | Default | -| --------- | ------------------------------------------ | ---------------------------------------------- | ---------- | -| border | with or without border | ^[boolean] | false | -| column | numbers of `Descriptions Item` in one line | ^[number] | 3 | -| direction | direction of list | ^[enum]`'vertical' \| 'horizontal'` | horizontal | -| size | size of list | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — | -| title | title text, display on the top left | ^[string] | '' | -| extra | extra text, display on the top right | ^[string] | '' | +| Name | Description | Type | Default | +| -------------------- | ------------------------------------------ | ---------------------------------------------- | ---------- | +| border | with or without border | ^[boolean] | false | +| column | numbers of `Descriptions Item` in one line | ^[number] | 3 | +| direction | direction of list | ^[enum]`'vertical' \| 'horizontal'` | horizontal | +| size | size of list | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — | +| title | title text, display on the top left | ^[string] | '' | +| extra | extra text, display on the top right | ^[string] | '' | +| label-width ^(2.8.8) | label width of every column | ^[string] / ^[number] | '' | ### Descriptions Slots @@ -72,17 +73,18 @@ descriptions/customized-style ### DescriptionsItem Attributes -| Name | Description | Type | Default | -| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- | -| label | label text | ^[string] | '' | -| span | colspan of column | ^[number] | 1 | -| rowspan ^(2.8.1) | the number of rows a cell should span | ^[number] | 1 | -| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | ^[string] / ^[number] | '' | -| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number] | '' | -| align | column content alignment (If no `border`, effective for both label and content) | ^[enum]`'left' \| 'center' \| 'right'` | left | -| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | ^[enum]`'left' \| 'center' \| 'right'` | '' | -| class-name | column content custom class name | ^[string] | '' | -| label-class-name | column label custom class name | ^[string] | '' | +| Name | Description | Type | Default | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- | +| label | label text | ^[string] | '' | +| span | colspan of column | ^[number] | 1 | +| rowspan ^(2.8.1) | the number of rows a cell should span | ^[number] | 1 | +| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | ^[string] / ^[number] | '' | +| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number] | '' | +| label-width ^(2.8.8) | column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions` | ^[string] / ^[number] | '' | +| align | column content alignment (If no `border`, effective for both label and content) | ^[enum]`'left' \| 'center' \| 'right'` | left | +| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | ^[enum]`'left' \| 'center' \| 'right'` | '' | +| class-name | column content custom class name | ^[string] | '' | +| label-class-name | column label custom class name | ^[string] | '' | ### DescriptionsItem Slots diff --git a/packages/components/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx index 34b233b95a..8d837f12cf 100644 --- a/packages/components/descriptions/__tests__/descriptions.test.tsx +++ b/packages/components/descriptions/__tests__/descriptions.test.tsx @@ -204,4 +204,50 @@ describe('Descriptions.vue', () => { await nextTick() expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE) }) + + test('should render labelWidth prop of DescriptionsItem', () => { + const wrapper = mount(() => ( + + {Array.from({ length: 3 }).map(() => ( + + ))} + + )) + + expect( + wrapper.find('.el-descriptions__label').attributes('style') + ).toContain('width: 150px') + }) + + test('should render labelWidth prop of Descriptions', () => { + const wrapper = mount(() => ( + + {Array.from({ length: 3 }).map(() => ( + + ))} + + )) + + expect( + wrapper.find('.el-descriptions__label').attributes('style') + ).toContain('width: 150px') + }) + + test('should render labelWidth prop of Descriptions and DescriptionsItem with higher priority', () => { + const wrapper = mount(() => ( + + + {Array.from({ length: 2 }).map(() => ( + + ))} + + )) + + expect( + wrapper.findAll('.el-descriptions__label')[0].attributes('style') + ).toContain('width: 100px') + expect( + wrapper.findAll('.el-descriptions__label')[1].attributes('style') + ).toContain('width: 150px') + }) }) diff --git a/packages/components/descriptions/src/description-item.ts b/packages/components/descriptions/src/description-item.ts index 32db51e38a..66e5e85020 100644 --- a/packages/components/descriptions/src/description-item.ts +++ b/packages/components/descriptions/src/description-item.ts @@ -39,6 +39,13 @@ export const descriptionItemProps = buildProps({ type: [String, Number], default: '', }, + /** + * @description column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions` + */ + labelWidth: { + type: [String, Number], + default: '', + }, /** * @description column content alignment (If no `border`, effective for both label and content) */ diff --git a/packages/components/descriptions/src/description.ts b/packages/components/descriptions/src/description.ts index 468a1e2dd3..318dfdd06a 100644 --- a/packages/components/descriptions/src/description.ts +++ b/packages/components/descriptions/src/description.ts @@ -42,6 +42,13 @@ export const descriptionProps = buildProps({ type: String, default: '', }, + /** + * @description width of every label column + */ + labelWidth: { + type: [String, Number], + default: '', + }, } as const) export type DescriptionProps = ExtractPropTypes diff --git a/packages/components/descriptions/src/descriptions-cell.ts b/packages/components/descriptions/src/descriptions-cell.ts index c1ddf66805..0b80a61200 100644 --- a/packages/components/descriptions/src/descriptions-cell.ts +++ b/packages/components/descriptions/src/descriptions-cell.ts @@ -52,8 +52,13 @@ export default defineComponent({ const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align const className = item.className const labelClassName = item.labelClassName + const width = + this.type === 'label' + ? item.labelWidth || this.descriptions.labelWidth || item.width + : item.width + const style = { - width: addUnit(item.width), + width: addUnit(width), minWidth: addUnit(item.minWidth), } const ns = useNamespace('descriptions') diff --git a/packages/components/descriptions/src/descriptions.type.ts b/packages/components/descriptions/src/descriptions.type.ts index bc8c56782a..32991fe50f 100644 --- a/packages/components/descriptions/src/descriptions.type.ts +++ b/packages/components/descriptions/src/descriptions.type.ts @@ -7,6 +7,7 @@ export interface IDescriptionsInject { size: ComponentSize title: string extra: string + labelWidth: string | number } export interface IDescriptionsItemInject { @@ -15,6 +16,7 @@ export interface IDescriptionsItemInject { rowspan: number width: string | number minWidth: string | number + labelWidth: string | number align: string labelAlign: string className: string