Noospic
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
gimmyhehe 2023-12-08 10:32:01 +08:00 committed by GitHub
parent 59799fab21
commit e0c6752d1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 88 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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({

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

@ -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: {

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

@ -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通过校验')
}

32
examples/sites/demos/pc/app/form/size.spec.ts
View File

@ -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)
})

125
packages/theme/src/form-item/index.less
View File

@ -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;

8
packages/theme/src/form-item/vars.less
View File

@ -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);
// 表单输入框左侧文本色