Skip to content

Commit 12b51ed

Browse files
novlan1novlan1
authored
feat(form): support content-align (#115)
1 parent 5a7a410 commit 12b51ed

File tree

11 files changed

+105
-33
lines changed

11 files changed

+105
-33
lines changed

‎packages/tdesign/form-item/README.en-US.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,26 @@
66

77
name | type | default | description | required
88
-- | -- | -- | -- | --
9-
style | Object | - | CSS(Cascading Style Sheets) | N
10-
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
9+
custom-style | Object | - | CSS(Cascading Style Sheets) | N
1110
arrow | Boolean | false | \- | N
11+
content-align | String | - | options: left/right | N
1212
for | String | - | \- | N
13-
help | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
14-
label | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
13+
help | String | - | \- | N
14+
label | String | '' | \- | N
1515
label-align | String | - | options: left/right/top | N
1616
label-width | String / Number | - | \- | N
1717
name | String | - | \- | N
1818
required-mark | Boolean | undefined | \- | N
19-
rules | Array | - | Typescript：`Array<FormRule>` | N
19+
rules | Array | - | Typescript: `Array<FormRule>` | N
2020
show-error-message | Boolean | undefined | \- | N
2121

22+
### FormItem Slots
23+
24+
name | Description
25+
-- | --
26+
help | \-
27+
label | \-
28+
2229
### CSS Variables
2330

2431
The component provides the following CSS variables, which can be used to customize styles.

‎packages/tdesign/form-item/README.md‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,26 @@
66

77
名称 | 类型 | 默认值 | 描述 | 必传
88
-- | -- | -- | -- | --
9-
style | Object | - | 样式 | N
10-
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
9+
custom-style | Object | - | 自定义样式 | N
1110
arrow | Boolean | false | 是否显示右侧箭头 | N
12-
for | String | - | 【开发中】 | N
13-
help | String / Slot | - | 【开发中】 | N
14-
label | String / Slot | '' | 字段标签名称。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
11+
content-align | String | - | 表单内容对齐方式，优先级高于 Form.contentAlign。可选项：left/right | N
12+
for | String | - | label 原生属性 | N
13+
help | String | - | 表单项说明内容 | N
14+
label | String | '' | 字段标签名称 | N
1515
label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N
1616
label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N
1717
name | String | - | 表单字段名称 | N
1818
required-mark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
19-
rules | Array | - | 【开发中】 | N
19+
rules | Array | - | 表单字段校验规则。TS 类型：`Array<FormRule>` | N
2020
show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
2121

22+
### FormItem Slots
23+
24+
名称 | 描述
25+
-- | --
26+
help | 自定义 `help` 显示内容
27+
label | 自定义 `label` 显示内容
28+
2229
### CSS Variables
2330

2431
组件提供了下列 CSS 变量，可用于自定义样式。

‎packages/tdesign/form-item/form-item.less‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,18 @@
105105
}
106106

107107
&__help {
108-
// margin: 4rpx 0 8rpx;
109-
font-size: @font-size-m;
108+
font-size: @font-size-s;
110109

111-
color: @font-gray-1;
110+
color: @text-color-disabled;
112111
line-height: 1.4;
112+
113+
&--left {
114+
text-align: left;
115+
}
116+
117+
&--right {
118+
text-align: right;
119+
}
113120
}
114121

115122
&__desc-link {

‎packages/tdesign/form-item/form-item.vue‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@
2020
>
2121
*
2222
</text>
23-
<text>{{ label }}</text>
23+
<slot
24+
name="label"
25+
>
26+
<text>
27+
{{ label }}
28+
</text>
29+
</slot>
2430
<text
2531
v-if="dataRequiredMark && requiredMarkPosition === 'right'"
2632
:class="classPrefix + '__label--required'"
@@ -41,7 +47,7 @@
4147
<view :class="classPrefix + '__controls-content ' + classPrefix + '__controls-content--' + dataContentAlign">
4248
<slot />
4349
<view
44-
v-if="false"
50+
v-if="arrow"
4551
:class="classPrefix + '__arrow'"
4652
>
4753
<t-icon
@@ -50,10 +56,19 @@
5056
/>
5157
</view>
5258
</view>
59+
60+
<view
61+
:class="classPrefix + '__help ' + classPrefix + '__help--' + dataContentAlign + tClassHelp"
62+
:style="errorPosition"
63+
>
64+
<slot name="help">
65+
{{ help }}
66+
</slot>
67+
</view>
68+
5369
<view
5470
v-if="errorList.length > 0 && dataShowErrorMessage"
5571
:class="classPrefix + '__error ' + classPrefix + '__error--' + (errorList[0].type || 'error')"
56-
:style="errorPosition"
5772
>
5873
{{ errorList[0].message }}
5974
</view>
@@ -64,6 +79,7 @@
6479
{{ successList[0].message }}
6580
</view>
6681
</view>
82+
6783
<view :class="classPrefix + '__extra ' + tClassExtra">
6884
<slot name="extra" />
6985
</view>
@@ -123,6 +139,8 @@ export default uniComponent({
123139
dataRequiredMark: this.requiredMark,
124140
dataShowErrorMessage: this.showErrorMessage,
125141
dataContentAlign: this.contentAlign,
142+
143+
errorPosition: '',
126144
};
127145
},
128146
computed: {
@@ -182,7 +200,7 @@ export default uniComponent({
182200
this.requiredMarkPosition = target.requiredMarkPosition;
183201
184202
setTimeout(() => {
185-
this.errorPosition = this.dataLabelAlign !== 'top' && 'text-align: right;';
203+
this.errorPosition = this.dataLabelAlign !== 'top' && `text-align: ${this.dataContentAlign}`;
186204
}, 33);
187205
},
188206
innerAfterUnlinked() {

‎packages/tdesign/form-item/props.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ import type { TdFormItemProps } from './type';
88
export default {
99
/** 是否显示右侧箭头 */
1010
arrow: Boolean,
11+
/** 表单内容对齐方式，优先级高于 Form.contentAlign */
12+
contentAlign: {
13+
type: String,
14+
validator(val: TdFormItemProps['contentAlign']): boolean {
15+
if (!val) return true;
16+
return ['left', 'right'].includes(val);
17+
},
18+
},
1119
/** label 原生属性 */
1220
for: {
1321
type: String,

‎packages/tdesign/form/README.en-US.md‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,17 @@ name | type | default | description | required
2222
-- | -- | -- | -- | --
2323
custom-style | Object | - | CSS(Cascading Style Sheets) | N
2424
colon | Boolean | false | \- | N
25-
data | Object | {} | Typescript：`FormData` | N
25+
content-align | String | left | options: left/right | N
26+
data | Object | {} | Typescript: `FormData` | N
2627
disabled | Boolean | undefined | \- | N
27-
error-message | Object | - | Typescript：`FormErrorMessage` | N
28+
error-message | Object | - | Typescript: `FormErrorMessage` | N
2829
label-align | String | right | options: left/right/top | N
2930
label-width | String / Number | '81px' | \- | N
3031
readonly | Boolean | undefined | \- | N
3132
required-mark | Boolean | undefined | \- | N
3233
required-mark-position | String | - | Display position of required symbols。options: left/right | N
3334
reset-type | String | empty | options: empty/initial | N
34-
rules | Object | - | Typescript：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
35+
rules | Object | - | Typescript: `FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
3536
scroll-to-first-error | String | - | options: ''/smooth/auto | N
3637
show-error-message | Boolean | true | \- | N
3738
submit-with-warning-message | Boolean | false | \- | N
@@ -61,14 +62,15 @@ name | type | default | description | required
6162
-- | -- | -- | -- | --
6263
custom-style | Object | - | CSS(Cascading Style Sheets) | N
6364
arrow | Boolean | false | \- | N
65+
content-align | String | - | options: left/right | N
6466
for | String | - | \- | N
6567
help | String | - | \- | N
6668
label | String | '' | \- | N
6769
label-align | String | - | options: left/right/top | N
6870
label-width | String / Number | - | \- | N
6971
name | String | - | \- | N
7072
required-mark | Boolean | undefined | \- | N
71-
rules | Array | - | Typescript：`Array<FormRule>` | N
73+
rules | Array | - | Typescript: `Array<FormRule>` | N
7274
show-error-message | Boolean | undefined | \- | N
7375

7476
### FormItem Slots
@@ -83,22 +85,22 @@ label | \-
8385
name | type | default | description | required
8486
-- | -- | -- | -- | --
8587
boolean | Boolean | - | \- | N
86-
date | Boolean / Object | - | Typescript：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
87-
email | Boolean / Object | - | Typescript：`boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
88-
enum | Array | - | Typescript：`Array<string>` | N
88+
date | Boolean / Object | - | Typescript: `boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
89+
email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
90+
enum | Array | - | Typescript: `Array<string>` | N
8991
idcard | Boolean | - | \- | N
9092
len | Number / Boolean | - | \- | N
9193
max | Number / Boolean | - | \- | N
9294
message | String | - | \- | N
9395
min | Number / Boolean | - | \- | N
9496
number | Boolean | - | \- | N
95-
pattern | String / Object | - | Typescript：`RegExp \| string` | N
97+
pattern | String / Object | - | Typescript: `RegExp \| string` | N
9698
required | Boolean | - | \- | N
9799
telnumber | Boolean | - | \- | N
98-
trigger | String | change | Typescript：`ValidateTriggerType` | N
100+
trigger | String | change | Typescript: `ValidateTriggerType` | N
99101
type | String | error | options: error/warning | N
100-
url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
101-
validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
102+
url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
103+
validator | Function | - | Typescript: `CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
102104
whitespace | Boolean | - | \- | N
103105

104106
### FormErrorMessage

‎packages/tdesign/form/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import TFormItem from 'tdesign-uniapp/form-item/form-item.vue';
3131
-- | -- | -- | -- | --
3232
custom-style | Object | - | 自定义样式 | N
3333
colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
34+
content-align | String | left | 表单内容对齐方式：左对齐、右对齐。可选项：left/right | N
3435
data | Object | {} | 表单数据。TS 类型：`FormData` | N
3536
disabled | Boolean | undefined | 是否禁用整个表单 | N
3637
error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
@@ -70,6 +71,7 @@ validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormDat
7071
-- | -- | -- | -- | --
7172
custom-style | Object | - | 自定义样式 | N
7273
arrow | Boolean | false | 是否显示右侧箭头 | N
74+
content-align | String | - | 表单内容对齐方式，优先级高于 Form.contentAlign。可选项：left/right | N
7375
for | String | - | label 原生属性 | N
7476
help | String | - | 表单项说明内容 | N
7577
label | String | '' | 字段标签名称 | N

‎packages/tdesign/form/_example/horizontal/index.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
name="name"
1818
help="输入用户名"
1919
>
20+
<template #label>
21+
用户名
22+
</template>
2023
<t-input
2124
v-model:value="formData.name"
2225
borderless
23-
align="right"
2426
placeholder="请输入用户名"
2527
data-field="name"
2628
style="flex: 1;"
@@ -35,7 +37,6 @@
3537
:value="formData.password"
3638
borderless
3739
type="password"
38-
align="right"
3940
:clearable="false"
4041
placeholder="请输入密码"
4142
data-field="password"
@@ -110,7 +111,7 @@
110111
/>
111112

112113
<t-cascader
113-
:visible="visibleCascader"
114+
v-model:visible="visibleCascader"
114115
:value="address"
115116
title="选择地址"
116117
:options="options"

‎packages/tdesign/form/_example/vertical/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
@click="showCascader"
103103
/>
104104
<t-cascader
105-
:visible="visibleCascader"
105+
v-model:visible="visibleCascader"
106106
:value="address"
107107
title="选择地址"
108108
:options="options"

‎packages/tdesign/form/props.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ import type { TdFormProps } from './type';
88
export default {
99
/** 是否在表单标签字段右侧显示冒号 */
1010
colon: Boolean,
11+
/** 表单内容对齐方式：左对齐、右对齐 */
12+
contentAlign: {
13+
type: String,
14+
default: 'left' as TdFormProps['contentAlign'],
15+
validator(val: TdFormProps['contentAlign']): boolean {
16+
if (!val) return true;
17+
return ['left', 'right'].includes(val);
18+
},
19+
},
1120
/** 表单数据 */
1221
data: {
1322
type: Object,

0 commit comments

Comments
 (0)