style(form): use flex layout

packages/form/__tests__/form.spec.ts

@@ -48,7 +48,6 @@ describe('Form', () => {
       },
     })
     expect(findStyle(wrapper, '.el-form-item__label').width).toBe('80px')
-    expect(findStyle(wrapper, '.el-form-item__content').marginLeft).toBe('80px')
   })
 
   /*

packages/form/src/form-item.vue

@@ -42,31 +42,16 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  provide,
-  inject,
-  ref,
-  watch,
-  computed,
-  nextTick,
-  onMounted,
-  onBeforeUnmount,
-  getCurrentInstance,
-  toRefs,
-  reactive,
-} from 'vue'
+import type { PropType } from 'vue'
+import { computed, defineComponent, getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, provide, reactive, ref, toRefs, watch } from 'vue'
 import { NOOP } from '@vue/shared'
-import AsyncValidator from 'async-validator'
-import { RuleItem } from 'async-validator'
+import AsyncValidator, { RuleItem } from 'async-validator'
 import LabelWrap from './label-wrap'
 import { getPropByPath, useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import mitt from 'mitt'
-import { elFormKey, elFormItemKey, elFormEvents } from './token'
-
-import type { PropType } from 'vue'
 import type { ElFormContext, ValidateFieldCallback } from './token'
+import { elFormEvents, elFormItemKey, elFormKey } from './token'
 
 export default defineComponent({
   name: 'ElFormItem',
@@ -99,7 +84,7 @@ export default defineComponent({
       validator: isValidComponentSize,
     },
   },
-  setup(props) {
+  setup(props, { slots }) {
     const formItemMitt = mitt()
     const $ELEMENT = useGlobalConfig()
 
@@ -161,13 +146,7 @@ export default defineComponent({
       }
       const labelWidth = props.labelWidth || elForm.labelWidth
       const ret: Partial<CSSStyleDeclaration> = {}
-      if (labelWidth === 'auto') {
-        if (props.labelWidth === 'auto') {
-          ret.marginLeft = computedLabelWidth.value
-        } else if (elForm.labelWidth === 'auto') {
-          ret.marginLeft = elForm.autoLabelWidth
-        }
-      } else {
+      if (!props.label && !slots.label) {
         ret.marginLeft = labelWidth
       }
       return ret

packages/form/src/label-wrap.ts

@@ -1,24 +1,7 @@
-import {
-  defineComponent,
-  h,
-  inject,
-  ref,
-  watch,
-  onMounted,
-  onUpdated,
-  onBeforeUnmount,
-  nextTick,
-  Fragment,
-} from 'vue'
+import { defineComponent, Fragment, h, inject, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue'
 
-import {
-  elFormKey, elFormItemKey,
-} from './token'
-import {
-  addResizeListener,
-  removeResizeListener,
-  ResizableElement,
-} from '@element-plus/utils/resize-event'
+import { elFormItemKey, elFormKey } from './token'
+import { addResizeListener, removeResizeListener, ResizableElement } from '@element-plus/utils/resize-event'
 
 export default defineComponent({
   name: 'ElLabelWrap',
@@ -75,28 +58,9 @@ export default defineComponent({
 
     function render() {
       if (!slots) return null
-      if (props.isAutoWidth) {
-        const autoLabelWidth = elForm.autoLabelWidth
-        const style = {} as CSSStyleDeclaration
-        if (autoLabelWidth && autoLabelWidth !== 'auto') {
-          const marginLeft = parseInt(autoLabelWidth, 10) - computedWidth.value
-          if (marginLeft) {
-            style.marginLeft = marginLeft + '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

@@ -9,33 +9,34 @@
     }
   }
   @include m(label-top) {
+    & .#{$namespace}-form-item {
+      display: block;
+    }
     & .#{$namespace}-form-item__label {
-      float: none;
-      display: inline-block;
+      display: block;
       text-align: left;
       padding: 0 0 10px 0;
     }
   }
   @include m(inline) {
     & .#{$namespace}-form-item {
-      display: inline-block;
+      display: inline-flex;
       margin-right: 10px;
-      vertical-align: top;
     }
-    & .#{$namespace}-form-item__label {
-      float: none;
-      display: inline-block;
-    }
-    & .#{$namespace}-form-item__content {
-      display: inline-block;
-      vertical-align: top;
-    }
-    &.#{$namespace}-form--label-top .#{$namespace}-form-item__content {
+
+    &.#{$namespace}-form--label-top {
+      display: flex;
+      flex-wrap: wrap;
+
+      .#{$namespace}-form-item {
         display: block;
       }
     }
+  }
 }
+
 @include b(form-item) {
+  display: flex;
   margin-bottom: 22px;
   @include utils-clearfix;
 
@@ -84,18 +85,9 @@
     }
   }
 
-  @include e(label-wrap) {
-    float: left;
-    .#{$namespace}-form-item__label {
-      display: inline-block;
-      float: none;
-    }
-  }
-
   @include e(label) {
+    flex: 0 0 auto;
     text-align: right;
-    vertical-align: middle;
-    float: left;
     font-size: $--form-label-font-size;
     color: $--color-text-regular;
     line-height: 40px;
@@ -103,6 +95,7 @@
     box-sizing: border-box;
   }
   @include e(content) {
+    flex: 1;
     line-height: 40px;
     position: relative;
     font-size: 14px;
@@ -132,8 +125,7 @@
 
   @include when(required) {
     @include pseudo('not(.is-no-asterisk)') {
-      & > .#{$namespace}-form-item__label:before,
-      & .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
+      & > .#{$namespace}-form-item__label:before {
         content: '*';
         color: $--color-danger;
         margin-right: 4px;