mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [description-item] add labelWidth prop (#18673)

Browse Source 
* 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>
This commit is contained in:
Harry Li 2024-11-13 17:34:37 +08:00 committed by GitHub
parent 9e763f77fa
commit 6a3dccaad8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 89 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/en-US/component/descriptions.md
View File

@ -51,14 +51,15 @@ descriptions/customized-style
### Descriptions Attributes ### Descriptions Attributes
| Name | Description | Type | Default | | Name | Description | Type | Default |
| --------- | ------------------------------------------ | ---------------------------------------------- | ---------- | | -------------------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
| border | with or without border | ^[boolean] | false | | border | with or without border | ^[boolean] | false |
| column | numbers of `Descriptions Item` in one line | ^[number] | 3 | | column | numbers of `Descriptions Item` in one line | ^[number] | 3 |
| direction | direction of list | ^[enum]`'vertical' \| 'horizontal'` | horizontal | | direction | direction of list | ^[enum]`'vertical' \| 'horizontal'` | horizontal |
| size | size of list | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — | | size | size of list | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
| title | title text, display on the top left | ^[string] | '' | | title | title text, display on the top left | ^[string] | '' |
| extra | extra text, display on the top right | ^[string] | '' | | extra | extra text, display on the top right | ^[string] | '' |
| label-width ^(2.8.8) | label width of every column | ^[string] / ^[number] | '' |
### Descriptions Slots ### Descriptions Slots
@ -72,17 +73,18 @@ descriptions/customized-style
### DescriptionsItem Attributes ### DescriptionsItem Attributes
| Name | Description | Type | Default | | Name | Description | Type | Default |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- | | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
| label | label text | ^[string] | '' | | label | label text | ^[string] | '' |
| span | colspan of column | ^[number] | 1 | | span | colspan of column | ^[number] | 1 |
| rowspan ^(2.8.1) | the number of rows a cell should span | ^[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] | '' | | 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] | '' | | 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-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] | '' |
| 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'` | '' | | align | column content alignment (If no `border`, effective for both label and content) | ^[enum]`'left' \| 'center' \| 'right'` | left |
| class-name | column content custom class name | ^[string] | '' | | 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'` | '' |
| label-class-name | column label custom class name | ^[string] | '' | | class-name | column content custom class name | ^[string] | '' |
| label-class-name | column label custom class name | ^[string] | '' |
### DescriptionsItem Slots ### DescriptionsItem Slots

46
packages/components/descriptions/__tests__/descriptions.test.tsx
View File

@ -204,4 +204,50 @@ describe('Descriptions.vue', () => {
await nextTick() await nextTick()
expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE) expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
}) })
test('should render labelWidth prop of DescriptionsItem', () => {
const wrapper = mount(() => (
<ElDescriptions border>
{Array.from({ length: 3 }).map(() => (
<ElDescriptionsItem label="测试标签" labelWidth="150px" />
))}
</ElDescriptions>
))
expect(
wrapper.find('.el-descriptions__label').attributes('style')
).toContain('width: 150px')
})
test('should render labelWidth prop of Descriptions', () => {
const wrapper = mount(() => (
<ElDescriptions label-width="150px" border>
{Array.from({ length: 3 }).map(() => (
<ElDescriptionsItem label="测试标签" />
))}
</ElDescriptions>
))
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(() => (
<ElDescriptions label-width="100px" border>
<ElDescriptionsItem label="测试标签" />
{Array.from({ length: 2 }).map(() => (
<ElDescriptionsItem label="测试标签" label-width="150px" />
))}
</ElDescriptions>
))
expect(
wrapper.findAll('.el-descriptions__label')[0].attributes('style')
).toContain('width: 100px')
expect(
wrapper.findAll('.el-descriptions__label')[1].attributes('style')
).toContain('width: 150px')
})
}) })

7
packages/components/descriptions/src/description-item.ts
View File

@ -39,6 +39,13 @@ export const descriptionItemProps = buildProps({
type: [String, Number], type: [String, Number],
default: '', 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) * @description column content alignment (If no `border`, effective for both label and content)
*/ */

7
packages/components/descriptions/src/description.ts
View File

@ -42,6 +42,13 @@ export const descriptionProps = buildProps({
type: String, type: String,
default: '', default: '',
}, },
/**
* @description width of every label column
*/
labelWidth: {
type: [String, Number],
default: '',
},
} as const) } as const)
export type DescriptionProps = ExtractPropTypes<typeof descriptionProps> export type DescriptionProps = ExtractPropTypes<typeof descriptionProps>

7
packages/components/descriptions/src/descriptions-cell.ts
View File

@ -52,8 +52,13 @@ export default defineComponent({
const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align
const className = item.className const className = item.className
const labelClassName = item.labelClassName const labelClassName = item.labelClassName
const width =
this.type === 'label'
? item.labelWidth || this.descriptions.labelWidth || item.width
: item.width
const style = { const style = {
width: addUnit(item.width), width: addUnit(width),
minWidth: addUnit(item.minWidth), minWidth: addUnit(item.minWidth),
} }
const ns = useNamespace('descriptions') const ns = useNamespace('descriptions')

2
packages/components/descriptions/src/descriptions.type.ts
View File

@ -7,6 +7,7 @@ export interface IDescriptionsInject {
size: ComponentSize size: ComponentSize
title: string title: string
extra: string extra: string
labelWidth: string | number
} }
export interface IDescriptionsItemInject { export interface IDescriptionsItemInject {
@ -15,6 +16,7 @@ export interface IDescriptionsItemInject {
rowspan: number rowspan: number
width: string | number width: string | number
minWidth: string | number minWidth: string | number
labelWidth: string | number
align: string align: string
labelAlign: string labelAlign: string
className: string className: string