fix(form): fix no effect when label-width prop is auto (#2480)

* chore(form-item): fix code style

* fix(form): fix no effect when label-width prop is auto

* fix(form): fix does not work when set label-position to left

* test(form): add a test case

* fix(form): replace CSSStyleDeclaration with CSSProperties

* chore(form): fix types import

packages/form/__tests__/form.spec.ts

@@ -50,29 +50,27 @@ describe('Form', () => {
     expect(findStyle(wrapper, '.el-form-item__label').width).toBe('80px')
   })
 
-  /*
-  // commented out because no style support in JSDOM
   test('auto label width', async() => {
     const wrapper = mountForm({
       template: `
-        <el-form ref="form" :model="form" label-width="auto">
+        <el-form ref="form" :model="form" label-width="auto" :label-position="labelPosition">
           <el-form-item label="Name">
             <el-input v-model="form.name"></el-input>
           </el-form-item>
-          <el-form-item label="Intro" v-if="display">
+          <el-form-item label="Intro">
             <el-input v-model="form.intro"></el-input>
           </el-form-item>
         </el-form>
       `,
       data() {
         return {
-          display: true,
           form: {
             name: '',
-            intro: ''
-          }
+            intro: '',
+          },
+          labelPosition: 'right',
         }
-      }
+      },
     })
 
     await nextTick()
@@ -82,14 +80,14 @@ describe('Form', () => {
     const marginLeft1 = parseInt(formItems[1].element.style.marginLeft, 10)
     expect(marginLeft).toEqual(marginLeft1)
 
-    wrapper.vm.display = false
+    wrapper.vm.labelPosition = 'left'
     await nextTick()
 
-    const formItemStyle = findStyle(wrapper, '.el-form-item__content')
-    const newMarginLeft = parseInt(formItemStyle.marginLeft, 10)
-    expect(newMarginLeft).toBeLessThan(marginLeft)
+    const formItems1 = wrapper.findAll<HTMLElement>('.el-form-item__content')
+    const marginRight = parseInt(formItems1[0].element.style.marginRight, 10)
+    const marginRight1 = parseInt(formItems1[1].element.style.marginRight, 10)
+    expect(marginRight).toEqual(marginRight1)
   })
-  */
 
   test('inline form', () => {
     const wrapper = mountForm({

packages/form/src/form-item.vue

@@ -51,7 +51,7 @@ import mitt from 'mitt'
 import LabelWrap from './label-wrap'
 import { elFormEvents, elFormItemKey, elFormKey } from './token'
 
-import type { PropType } from 'vue'
+import type { PropType, CSSProperties } from 'vue'
 import type { ElFormContext, ValidateFieldCallback } from './token'
 import type { FormItemRule } from './form.type'
 
@@ -133,24 +133,23 @@ export default defineComponent({
 
     const labelFor = computed(() => props.for || props.prop)
     const labelStyle = computed(() => {
-      if (elForm.labelPosition === 'top') return {}
+      const ret: CSSProperties = {}
+      if (elForm.labelPosition === 'top') return ret
       const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth)
       if (labelWidth) {
-        return {
-          width: labelWidth,
-        }
+        ret.width = labelWidth
       }
-      return {}
+      return ret
     })
     const contentStyle = computed(() => {
+      const ret: CSSProperties = {}
       if (elForm.labelPosition === 'top' || elForm.inline) {
-        return {}
+        return ret
       }
       if (!props.label && !props.labelWidth && isNested.value) {
-        return {}
+        return ret
       }
       const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth)
-      const ret: Partial<CSSStyleDeclaration> = {}
       if (!props.label && !slots.label) {
         ret.marginLeft = labelWidth
       }

packages/form/src/label-wrap.ts

@@ -3,6 +3,8 @@ import { defineComponent, Fragment, h, inject, nextTick, onBeforeUnmount, onMoun
 import { elFormItemKey, elFormKey } from './token'
 import { addResizeListener, removeResizeListener, ResizableElement } from '@element-plus/utils/resize-event'
 
+import type { CSSProperties } from 'vue'
+
 export default defineComponent({
   name: 'ElLabelWrap',
   props: {
@@ -58,7 +60,28 @@ export default defineComponent({
 
     function render() {
       if (!slots) return null
-      return h(Fragment, { ref: el }, slots.default?.())
+      if (props.isAutoWidth) {
+        const autoLabelWidth = elForm.autoLabelWidth
+        const style = {} as CSSProperties
+        if (autoLabelWidth && autoLabelWidth !== 'auto') {
+          const marginWidth = parseInt(autoLabelWidth, 10) - computedWidth.value
+          const marginPositon = elForm.labelPosition === 'left' ? 'marginRight' : 'marginLeft'
+          if (marginWidth) {
+            style[marginPositon] = marginWidth + 'px'
+          }
+        }
+        return h(
+          'div',
+          {
+            ref: el,
+            class: ['el-form-item__label-wrap'],
+            style,
+          },
+          slots.default?.(),
+        )
+      } else {
+        return h(Fragment, { ref: el }, slots.default?.())
+      }
     }
 
     return render

packages/theme-chalk/src/form.scss

@@ -84,6 +84,12 @@
     }
   }
 
+  @include e(label-wrap) {
+    .#{$namespace}-form-item__label {
+      display: inline-block;
+    }
+  }
+
   @include e(label) {
     flex: 0 0 auto;
     text-align: right;