feat(form-item): label-width support auto #2114
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
close #2087 |
|
This pull request introduces 1 alert when merging 507eb3d into 14910a0 - view on LGTM.com new alerts:
|
Codecov Report
@@ Coverage Diff @@
## main #2114 +/- ##
==========================================
- Coverage 64.73% 64.70% -0.03%
==========================================
Files 899 899
Lines 17639 17656 +17
Branches 4186 4194 +8
==========================================
+ Hits 11418 11425 +7
- Misses 5436 5445 +9
- Partials 785 786 +1
Continue to review full report at Codecov.
|
07akioni
reviewed
Jan 5, 2022
| @@ -27,7 +27,7 @@ partially-apply-rules | |||
| | --- | --- | --- | --- | | |||
| | disabled | `boolean` | `false` | Whether to disable the form. | | |||
| | inline | `boolean` | `false` | Whether to display as an inline form. | | |||
| | label-width | `number \| string` | `undefined` | The width of label. Particularly useful when `label-placement` is set to `'left'`. | | |||
| | label-width | `number \| string` | `undefined` | The width of label. Particularly useful when `label-placement` is set to `'left'`,Width `'auto'` is supported. | | |||
There was a problem hiding this comment.
number \| number \| 'auto'
'auto' means label width will be auto adjusted
07akioni
reviewed
Jan 5, 2022
src/form/src/Form.tsx
Outdated
| @@ -64,6 +72,13 @@ export default defineComponent({ | |||
| useTheme('Form', 'Form', style, formLight, props, mergedClsPrefixRef) | |||
| // from path to form-item | |||
| const formItems: Record<string, FormItemInst[]> = {} | |||
| // label-width = 'auto' | |||
| const autoComputedWidth = ref(0) | |||
07akioni
reviewed
Jan 5, 2022
src/form/src/Form.tsx
Outdated
| @@ -64,6 +72,13 @@ export default defineComponent({ | |||
| useTheme('Form', 'Form', style, formLight, props, mergedClsPrefixRef) | |||
| // from path to form-item | |||
| const formItems: Record<string, FormItemInst[]> = {} | |||
| // label-width = 'auto' | |||
| const autoComputedWidth = ref(0) | |||
| const changeAutoComputedWidth = (currentWidth: number): void => { | |||
07akioni
reviewed
Jan 5, 2022
src/form/src/Form.tsx
Outdated
| provide(formItemLabelWidthInjectionKey, { | ||
| autoComputedWidth, | ||
| changeAutoComputedWidth | ||
| }) |
07akioni
reviewed
Jan 5, 2022
src/form/src/FormItem.tsx
Outdated
Comment on lines
342
to
347
| onMounted(() => { | ||
| if (labelElementRef.value !== null) { | ||
| NFormItemLabelWidth?.changeAutoComputedWidth( | ||
| Number(getComputedStyle(labelElementRef.value).width.slice(0, -2)) | ||
| ) | ||
| } | ||
| }) |
There was a problem hiding this comment.
比如给 label 里面的内容套个 span，然后监听 resize，需要注意 * 也要放在 span 里面，因为 * 占据空间
doom-9-zz
force-pushed
the
n-form-label-width-zuto
branch
from
7069a5c to
fa87671
Compare
07akioni
reviewed
Jan 6, 2022
Comment on lines
24
to
53
| const mergedLabelWidthRef = computed(() => { | ||
| if (mergedLabelPlacementRef.value === 'top') return | ||
| const { labelWidth } = props | ||
| const autoComputedWidth = NForm?.maxChildLabelWidth.value | ||
|
|
||
| if (labelWidth === 'auto') { | ||
| if (autoComputedWidth !== undefined) { | ||
| return formatLength(autoComputedWidth) | ||
| } else { | ||
| return undefined | ||
| } | ||
| } | ||
|
|
||
| if (labelWidth !== undefined) { | ||
| return formatLength(labelWidth) | ||
| } | ||
|
|
||
| if (NForm?.labelWidth !== undefined) { | ||
| return formatLength(NForm.labelWidth) | ||
| if (NForm?.labelWidth.value === 'auto') { | ||
| if (autoComputedWidth !== undefined) { | ||
| return formatLength(autoComputedWidth) | ||
| } else { | ||
| return undefined | ||
| } | ||
| } | ||
|
|
||
| if (NForm?.labelWidth.value !== undefined) { | ||
| return formatLength(NForm.labelWidth.value) | ||
| } | ||
| return undefined | ||
| }) |
There was a problem hiding this comment.
这段逻辑写的不干净，改完之后是这样的
const mergedLabelWidthRef = computed(() => {
if (mergedLabelPlacementRef.value === 'top') return
const { labelWidth } = props
if (labelWidth !== undefined && labelWidth !== 'auto') {
return formatLength(labelWidth)
}
if (labelWidth === 'auto' || NForm?.props.labelWidth === 'auto') {
const autoComputedWidth = NForm?.maxChildLabelWidthRef.value
if (autoComputedWidth !== undefined) {
return formatLength(autoComputedWidth)
} else {
return undefined
}
}
if (NForm?.props.labelWidth !== undefined) {
return formatLength(NForm.props.labelWidth)
}
return undefined
})
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.