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

2023-12-08 10:32:01 +08:00 · 2023-12-08 10:32:01 +08:00 · e0c6752d1b
parent 59799fab21
commit e0c6752d1b
6 changed files with 88 additions and 107 deletions
--- a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
@ -1,12 +1,6 @@
 <template>
  <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
      <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 {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'

 const ruleFormRef = ref()
 const createData = reactive({
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
@ -1,12 +1,6 @@
 <template>
  <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
      <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: {
--- a/examples/sites/demos/pc/app/form/form-validate-field.vue
+++ b/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通过校验')
      }
--- a/examples/sites/demos/pc/app/form/size.spec.ts
+++ b/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(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-mini/)
+  await expect(submitBtn).toHaveClass(/tiny-button--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(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-small/)
+  await expect(submitBtn).toHaveClass(/tiny-button--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(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-medium/)
+  await expect(submitBtn).toHaveClass(/tiny-button--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)
 })
--- a/packages/theme/src/form-item/index.less
+++ b/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;

--- a/packages/theme/src/form-item/vars.less
+++ b/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);
  // 表单输入框左侧文本色