Skip to content

Commit 0bf8eb2

Browse files
gimmyhehegimmyhehe
authored
fix(form): [form] x-design theme refresh (#2093)
1 parent 47e0fb8 commit 0bf8eb2

File tree

7 files changed

+83
-26
lines changed

7 files changed

+83
-26
lines changed

‎examples/sites/demos/pc/app/form/error-slot-composition-api.vue

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
<tiny-form-item label="姓名" prop="name">
55
<tiny-input v-model="createData.name"></tiny-input>
66
</tiny-form-item>
7-
<tiny-form-item label="年龄" prop="age">
8-
<tiny-input v-model="createData.age"></tiny-input>
9-
<template #error>
10-
<span>错误提示内容插槽</span>
11-
</template>
12-
</tiny-form-item>
137
<tiny-form-item label="昵称" prop="nickname" validate-type="text">
148
<tiny-input v-model="createData.nickname"></tiny-input>
159
<template #error="message">
1610
<span class="error-slot">{{ message }}</span>
1711
</template>
1812
</tiny-form-item>
13+
<tiny-form-item label="年龄" prop="age">
14+
<tiny-input v-model="createData.age"></tiny-input>
15+
<template #error>
16+
<div class="custom-error">
17+
<tiny-icon-error></tiny-icon-error>
18+
<span>错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。</span>
19+
</div>
20+
</template>
21+
</tiny-form-item>
1922
<tiny-form-item>
2023
<tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
2124
</tiny-form-item>
@@ -26,6 +29,9 @@
2629
<script setup>
2730
import { ref } from 'vue'
2831
import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
32+
import { iconError } from '@opentiny/vue-icon'
33+
34+
const TinyIconError = iconError()
2935
3036
const createData = ref({
3137
name: '',
@@ -60,3 +66,17 @@ function validateField() {
6066
color: #ffd0a6;
6167
}
6268
</style>
69+
70+
<style lang="less">
71+
.custom-error {
72+
padding: 4px 0;
73+
display: flex;
74+
.tiny-svg {
75+
fill: var(--ti-tooltip-validate-icon-color);
76+
margin-right: 8px;
77+
font-size: 16px;
78+
flex-shrink: 0;
79+
margin-top: 2px;
80+
}
81+
}
82+
</style>

‎examples/sites/demos/pc/app/form/error-slot.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ test('错误提示插槽', async ({ page }) => {
1010

1111
await validBtn.click()
1212
await expect(getTooltipByText('必填')).toBeVisible()
13-
await expect(getTooltipByText('错误提示内容插槽')).toBeVisible()
13+
await expect(
14+
getTooltipByText('错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。')
15+
).toBeVisible()
1416
await expect(page.locator('.error-slot')).toBeVisible()
1517
})

‎examples/sites/demos/pc/app/form/error-slot.vue

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
<tiny-form-item label="姓名" prop="name">
55
<tiny-input v-model="createData.name"></tiny-input>
66
</tiny-form-item>
7-
<tiny-form-item label="年龄" prop="age">
8-
<tiny-input v-model="createData.age"></tiny-input>
9-
<template #error>
10-
<span>错误提示内容插槽</span>
11-
</template>
12-
</tiny-form-item>
137
<tiny-form-item label="昵称" prop="nickname" validate-type="text">
148
<tiny-input v-model="createData.nickname"></tiny-input>
159
<template #error="message">
1610
<span class="error-slot">{{ message }}</span>
1711
</template>
1812
</tiny-form-item>
13+
<tiny-form-item label="年龄" prop="age">
14+
<tiny-input v-model="createData.age"></tiny-input>
15+
<template #error>
16+
<div class="custom-error">
17+
<tiny-icon-error></tiny-icon-error>
18+
<span>错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。</span>
19+
</div>
20+
</template>
21+
</tiny-form-item>
1922
<tiny-form-item>
2023
<tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
2124
</tiny-form-item>
@@ -25,13 +28,15 @@
2528

2629
<script>
2730
import { Form, FormItem, Input, Button } from '@opentiny/vue'
31+
import { iconError } from '@opentiny/vue-icon'
2832
2933
export default {
3034
components: {
3135
TinyForm: Form,
3236
TinyFormItem: FormItem,
3337
TinyInput: Input,
34-
TinyButton: Button
38+
TinyButton: Button,
39+
TinyIconError: iconError()
3540
},
3641
data() {
3742
return {
@@ -42,7 +47,11 @@ export default {
4247
},
4348
rules: {
4449
name: [
45-
{ required: true, message: '必填', trigger: 'blur' },
50+
{
51+
required: true,
52+
message: '必填',
53+
trigger: 'blur'
54+
},
4655
{ min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
4756
],
4857
age: { required: true },
@@ -69,3 +78,17 @@ export default {
6978
color: #ffd0a6;
7079
}
7180
</style>
81+
82+
<style lang="less">
83+
.custom-error {
84+
padding: 4px 0;
85+
display: flex;
86+
.tiny-svg {
87+
fill: var(--ti-tooltip-validate-icon-color);
88+
margin-right: 8px;
89+
font-size: 16px;
90+
flex-shrink: 0;
91+
margin-top: 2px;
92+
}
93+
}
94+
</style>

‎examples/sites/demos/pc/app/form/slot-label.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
1111
</tiny-form-item>
1212
<tiny-form-item prop="url">
13-
<template #label> URL </template>
13+
<template #label>
14+
<div class="custom-label">超过两行文字，省略显示</div>
15+
</template>
1416
<tiny-input v-model="createData.url"></tiny-input>
1517
</tiny-form-item>
1618
<tiny-form-item prop="radio">
@@ -80,4 +82,13 @@ export default {
8082
.demo-form {
8183
width: 380px;
8284
}
85+
.custom-label {
86+
display: -webkit-box;
87+
width: 100%;
88+
-webkit-line-clamp: 2;
89+
line-height: 1.2;
90+
overflow: hidden;
91+
-webkit-box-orient: vertical;
92+
white-space: wrap;
93+
}
8394
</style>

‎packages/theme/src/form-item/smb-theme.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export const tinyFormItemSmbTheme = {
22
'ti-form-item-margin-bottom-default': 'var(--ti-common-space-6x)',
3-
'ti-form-item-margin-bottom-mini': 'var(--ti-common-space-3x)',
4-
'ti-form-item-margin-bottom-small': 'var(--ti-common-space-5x)',
3+
'ti-form-item-margin-bottom-mini': 'var(--ti-common-space-5x)',
4+
'ti-form-item-margin-bottom-small': 'var(--ti-common-space-6x)',
55
'ti-form-item-margin-bottom-medium': 'var(--ti-common-space-6x)',
6-
'ti-form-item-input-mini-height': 'var(--ti-common-space-5x)',
7-
'ti-form-item-input-small-height': 'var(--ti-common-space-6x)',
8-
'ti-form-item-input-medium-height': 'var(--ti-common-space-8x)',
9-
'ti-form-item-mini-line-height': 'var(--ti-common-space-5x)',
10-
'ti-form-item-small-line-height': 'var(--ti-common-space-6x)',
11-
'ti-form-item-medium-line-height': 'var(--ti-common-space-8x)',
6+
'ti-form-item-input-mini-height': 'var(--ti-common-size-6x)',
7+
'ti-form-item-input-small-height': '28px',
8+
'ti-form-item-input-medium-height': 'var(--ti-common-size-10x)',
9+
'ti-form-item-mini-line-height': '24px',
10+
'ti-form-item-small-line-height': '28px',
11+
'ti-form-item-medium-line-height': 'var(--ti-common-size-10x)',
1212
'ti-form-item-label-padding-right': 'var(--ti-common-space-6x)'
1313
}

‎packages/theme/src/form/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@
126126
.tooltip-validate-icon {
127127
fill: var(--ti-tooltip-validate-icon-color);
128128
margin-right: 8px;
129+
font-size: 16px;
129130
}
130131

131132
&[x-placement^='top'] .popper__arrow {

‎packages/theme/src/form/vars.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
.component-css-vars-form() {
1414
// 表单校验水平内边距
15-
--ti-form-valid-padding-horizontal: calc(var(--ti-common-space-2x, 8px) + 2px);
15+
--ti-form-valid-padding-horizontal: var(--ti-common-space-4x, 16px);
1616
// 表单校验垂直内边距
17-
--ti-form-valid-padding-vertical: calc(var(--ti-common-space-2x, 8px) + 2px);
17+
--ti-form-valid-padding-vertical: var(--ti-common-space-3x, 12px);
1818
// 行内表单输入框右边距(hide)
1919
--ti-form-item-margin-right: calc(var(--ti-common-space-2x, 8px) + 2px);
2020

0 commit comments

Comments
 (0)