fix(form): [form] fix form item size height (#1054)

examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
@@ -23,13 +17,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
 
 const ruleFormRef = ref()
 const createData = reactive({

examples/sites/demos/pc/app/form/custom-validation-rule.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
@@ -22,7 +16,7 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { Form, FormItem, Input, Button } from '@opentiny/vue'
 
 export default {
   components: {

examples/sites/demos/pc/app/form/form-validate-field.vue

@@ -8,7 +8,7 @@
       label-width="100px"
       show-message
     >
-      <tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
+      <tiny-form-item label="姓名" prop="users" required>
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="日期" prop="datepicker">
@@ -62,7 +62,7 @@ export default {
         }
       })
       if (errArray.length > 0) {
-        console.log(errArray)
+        // empty
       } else {
         Modal.alert('日期和url通过校验')
       }

examples/sites/demos/pc/app/form/size.spec.ts

@@ -7,20 +7,40 @@ test('测试表单尺寸', async ({ page }) => {
   const demo = page.locator('#size')
   const form = demo.locator('.tiny-form')
   const getBtnByText = (text: string) => demo.locator('.tiny-button-group').getByRole('button', { name: text })
+  const submitBtn = form.getByRole('button', { name: '提交' })
+  const input = form.locator('.tiny-numeric__input')
+  const firstLabel = form.locator('.tiny-form-item__label').first()
 
   // mini表单
+  const miniHeight = '24px'
   await getBtnByText('mini').click()
   await expect(form.locator('.tiny-form-item--mini')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--mini/)
+  await expect(submitBtn).toHaveClass(/tiny-button--mini/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-mini/)
+  await expect(input).toHaveClass(/tiny-input-mini/)
+  await expect(submitBtn).toHaveCSS('height', miniHeight)
+  await expect(input).toHaveCSS('height', miniHeight)
+  await expect(firstLabel).toHaveCSS('height', miniHeight)
+  await expect(firstLabel).toHaveCSS('line-height', miniHeight)
+
   // small表单
+  const smallHeight = '32px'
   await getBtnByText('small').click()
   await expect(form.locator('.tiny-form-item--small')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--small/)
+  await expect(submitBtn).toHaveClass(/tiny-button--small/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-small/)
+  await expect(input).toHaveClass(/tiny-input-small/)
+  await expect(submitBtn).toHaveCSS('height', smallHeight)
+  await expect(input).toHaveCSS('height', smallHeight)
+  await expect(firstLabel).toHaveCSS('height', smallHeight)
+  await expect(firstLabel).toHaveCSS('line-height', smallHeight)
+
   // medium表单
+  const mediumHeight = '40px'
   await getBtnByText('medium').click()
   await expect(form.locator('.tiny-form-item--medium')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--medium/)
+  await expect(submitBtn).toHaveClass(/tiny-button--medium/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-medium/)
+  await expect(input).toHaveClass(/tiny-input-medium/)
+  await expect(submitBtn).toHaveCSS('height', mediumHeight)
+  await expect(input).toHaveCSS('height', mediumHeight)
+  await expect(firstLabel).toHaveCSS('height', mediumHeight)
+  await expect(firstLabel).toHaveCSS('line-height', mediumHeight)
 })

packages/theme/src/form-item/index.less

@@ -27,6 +27,34 @@
 @select-prefix-cls: ~'@{css-prefix}select';
 @rate-prefix-cls: ~'@{css-prefix}rate';
 
+.size-height(@height, @line-height, @margin-bottom) {
+  margin-bottom: @margin-bottom;
+
+  .@{form-item-prefix-cls}__content {
+    line-height: @line-height;
+
+    .@{css-prefix}checkbox,
+    .@{css-prefix}radio {
+      line-height: @height;
+    }
+    .@{css-prefix}checkbox-group {
+      min-height: @height;
+    }
+    .@{numeric-prefix-cls} {
+      display: block;
+
+      &__input-inner {
+        height: @height;
+      }
+    }
+  }
+
+  .@{form-item-prefix-cls}__label {
+    height: @line-height;
+    line-height: @line-height;
+  }
+}
+
 .@{form-item-prefix-cls} {
   .component-css-vars-form-item();
 
@@ -38,87 +66,38 @@
     margin-bottom: 0;
   }
 
-  &&--mini {
-    margin-bottom: var(--ti-form-item-margin-bottom-mini);
-  }
-  &&--small {
-    margin-bottom: var(--ti-form-item-margin-bottom-small);
-  }
-  &--medium {
-    margin-bottom: var(--ti-form-item-margin-bottom-medium);
-  }
-
-  &--medium &__label {
-    height: var(--ti-form-item-medium-line-height);
-    line-height: var(--ti-form-item-medium-line-height);
-  }
-
-  &--small &__label {
-    height: var(--ti-form-item-small-line-height);
-    line-height: var(--ti-form-item-small-line-height);
-  }
-
   &--small &__error {
     padding-top: 2px;
   }
 
-  &--mini &__label {
-    height: var(--ti-form-item-mini-line-height);
-    line-height: var(--ti-form-item-mini-line-height);
-  }
-
-  &--medium &__content {
-    line-height: var(--ti-form-item-medium-line-height);
-    .@{css-prefix}checkbox,
-    .@{css-prefix}radio {
-      line-height: var(--ti-form-item-input-medium-height);
-    }
-    .@{css-prefix}checkbox-group {
-      min-height: var(--ti-form-item-input-medium-height);
-    }
-
-    .@{input-prefix-cls} .@{input-prefix-cls}__inner {
-      height: var(--ti-form-item-input-medium-height);
-      line-height: var(--ti-form-item-input-medium-height);
-    }
-  }
-
-  &--small &__content {
-    line-height: var(--ti-form-item-small-line-height);
-    .@{css-prefix}checkbox,
-    .@{css-prefix}radio {
-      line-height: var(--ti-form-item-input-small-height);
-    }
-    .@{css-prefix}checkbox-group {
-      min-height: var(--ti-form-item-input-small-height);
-    }
-
-    .@{input-prefix-cls} .@{input-prefix-cls}__inner {
-      height: var(--ti-form-item-input-small-height);
-      line-height: var(--ti-form-item-input-small-height);
-    }
-  }
-
-  &--mini &__content {
-    line-height: var(--ti-form-item-mini-line-height);
-    .@{css-prefix}checkbox,
-    .@{css-prefix}radio {
-      line-height: var(--ti-form-item-input-mini-height);
-    }
-    .@{css-prefix}checkbox-group {
-      min-height: var(--ti-form-item-input-mini-height);
-    }
-
-    .@{input-prefix-cls} .@{input-prefix-cls}__inner {
-      height: var(--ti-form-item-input-mini-height);
-      line-height: var(--ti-form-item-input-mini-height);
-    }
-  }
-
   &--mini &__error {
     padding-top: 1px;
   }
 
+  &--medium {
+    .size-height(
+      var(--ti-form-item-medium-line-height),
+      var(--ti-form-item-medium-line-height),
+      var(--ti-form-item-margin-bottom-medium)
+    );
+  }
+
+  &--small {
+    .size-height(
+      var(--ti-form-item-small-line-height),
+      var(--ti-form-item-small-line-height),
+      var(--ti-form-item-margin-bottom-small)
+    );
+  }
+
+  &--mini {
+    .size-height(
+      var(--ti-form-item-mini-line-height),
+      var(--ti-form-item-mini-line-height),
+      var(--ti-form-item-margin-bottom-mini)
+    );
+  }
+
   &__label-wrap {
     float: left;
 

packages/theme/src/form-item/vars.less

@@ -12,9 +12,9 @@
 
 .component-css-vars-form-item() {
   // 小型尺寸表单输入框左侧行高(hide)
-  --ti-form-item-small-line-height: var(--ti-common-line-height-7, 36px);
+  --ti-form-item-small-line-height: var(--ti-common-line-height-6, 32px);
   // 中等尺寸表单输入框左侧行高(hide)
-  --ti-form-item-medium-line-height: calc(var(--ti-common-line-height-7, 36px) + 6px);
+  --ti-form-item-medium-line-height: calc(var(--ti-common-line-height-7, 36px) + 4px);
   // 迷你尺寸表单输入框左侧行高(hide)
   --ti-form-item-mini-line-height: var(--ti-common-line-height-5, 24px);
   // 表单输入框左侧文本行高
@@ -22,9 +22,9 @@
   // 迷你尺寸表单的输入框高度
   --ti-form-item-input-mini-height: var(--ti-common-size-6x, 24px);
   // 小型尺寸表单的输入框高度
-  --ti-form-item-input-small-height: var(--ti-common-size-9x, 36px);
+  --ti-form-item-input-small-height: var(--ti-common-size-8x, 32px);
   // 中等尺寸表单的输入框高度
-  --ti-form-item-input-medium-height: calc(var(--ti-common-size-base, 4px) * 10.5);
+  --ti-form-item-input-medium-height: var(--ti-common-size-10x, 40px);
   // 表单输入框左侧字号
   --ti-form-item-label-font-size: var(--ti-common-font-size-1, 14px);
   // 表单输入框左侧文本色