Skip to content

Commit e2f171c

Browse files
Jay2138Jay2138
authored
feat: add form component (#3912)
* feat: 新增表单组件 * feat(form): 添加表单组件及示例，优化数据处理和安全检查 * feat(form): 完善表单组件样式，添加禁用和只读状态支持，更新文档示例 * fix: 修复嵌套三元表达式的 ESLint 错误 * feat(form): 更新表单组件，添加对 dayjs 的依赖，优化类型定义，调整示例样式 * feat(test): 添加表单组件的单元测试，覆盖 props 和方法的各个场景 * fix(common): 优化类型定义，移除不必要的 Node 类型支持 * fix(form): 移除不必要的注释，优化表单组件示例样式 * feat(form): 移除表单组件示例样式测试文件 * fix(pull-down-list): 优化点击事件处理，简化数据传递方式 * fix(form): 更新必填符号和错误提示信息的默认值，优化文档说明 * fix(form): 使用配置文件中的前缀更新表单和表单项组件的名称 * fix(form): 优化表单组件的单元测试，增加对元素存在性的验证，移除旧的快照文件 * fix(form): 移除表单组件的测试文件和快照，清理不再使用的代码
1 parent dbccef9 commit e2f171c

37 files changed

+3023
-9
lines changed

‎example/app.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
"pages/col/col",
9191
"pages/col/skyline/col",
9292
"pages/color-picker/color-picker",
93+
"pages/form/form",
9394
"pages/guide/guide",
9495
"pages/watermark/watermark"
9596
],

‎example/pages/home/data/form.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@ const form = {
7171
name: 'Upload',
7272
label: '上传',
7373
},
74+
{
75+
name: 'Form',
76+
label: '表单',
77+
},
7478
],
7579
};
7680

@@ -118,6 +122,10 @@ const skylineForm = {
118122
name: 'Textarea',
119123
label: '多行文本框',
120124
},
125+
{
126+
name: 'Form',
127+
label: '表单',
128+
},
121129
],
122130
};
123131

‎example/pages/home/home.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,30 @@ Page({
4444
},
4545

4646
clickHandle(e) {
47-
let { name, path = '' } = e.detail.item as {
47+
// 添加安全检查，确保e.detail存在
48+
if (!e.detail) {
49+
console.error('clickHandle: e.detail is undefined', e);
50+
return;
51+
}
52+
53+
// 从e.detail中获取item对象
54+
const { item } = e.detail;
55+
if (!item) {
56+
console.error('clickHandle: item is undefined', e.detail);
57+
return;
58+
}
59+
60+
let { name, path = '' } = item as {
4861
name: string;
4962
path?: string;
5063
};
5164

65+
// 确保name存在
66+
if (!name) {
67+
console.error('clickHandle: name is undefined', e.detail.item);
68+
return;
69+
}
70+
5271
if (!path) {
5372
name = name.replace(/^[A-Z]/, (match) => `${match}`.toLocaleLowerCase());
5473
name = name.replace(/[A-Z]/g, (match) => {

‎packages/components/date-time-picker/locale/dayjs.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// dayjs 语言包
2-
import enLocale from 'dayjs/locale/en';
3-
import zhLocale from 'dayjs/locale/zh-cn';
4-
import tcLocale from 'dayjs/locale/zh-tw'; // 繁体
5-
import koLocale from 'dayjs/locale/ko'; // 韩语
6-
import jaLocale from 'dayjs/locale/ja'; // 日语
7-
import ruLocale from 'dayjs/locale/ru'; // 俄语
2+
import * as enLocale from 'dayjs/locale/en';
3+
import * as zhLocale from 'dayjs/locale/zh-cn';
4+
import * as tcLocale from 'dayjs/locale/zh-tw'; // 繁体
5+
import * as koLocale from 'dayjs/locale/ko'; // 韩语
6+
import * as jaLocale from 'dayjs/locale/ja'; // 日语
7+
import * as ruLocale from 'dayjs/locale/ru'; // 俄语
88

99
// 本地语言包
1010
import en from './en';

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
### FormItem Props
6+
7+
name | type | default | description | required
8+
-- | -- | -- | -- | --
9+
style | Object | - | CSS(Cascading Style Sheets) | N
10+
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
11+
arrow | Boolean | false | \- | N
12+
help | String | - | \- | N
13+
label | String | '' | \- | N
14+
label-align | String | - | options: left/right/top | N
15+
label-width | String / Number | - | \- | N
16+
name | String | - | \- | N
17+
required-mark | Boolean | true | Whether to display the required symbol (*), which has a higher priority than Form.requiredMark | N
18+
show-error-message | Boolean | true | When the validation fails, whether to display the error message, which has a higher priority than `Form.showErrorMessage` | N

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
### FormItem Props
6+
7+
名称 | 类型 | 默认值 | 描述 | 必传
8+
-- | -- | -- | -- | --
9+
style | Object | - | 样式 | N
10+
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
11+
arrow | Boolean | false | 是否显示右侧箭头 | N
12+
help | String | - | 表单项说明内容 | N
13+
label | String | '' | 字段标签名称 | N
14+
label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N
15+
label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N
16+
name | String | - | 表单字段名称 | N
17+
required-mark | Boolean | true | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
18+
show-error-message | Boolean | true | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N

‎packages/components/form-item/form-item.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"component": true,
3+
"styleIsolation": "apply-shared",
4+
"usingComponents": {
5+
"t-icon": "tdesign-miniprogram/icon/icon",
6+
"t-button": "tdesign-miniprogram/button/button"
7+
}
8+
}

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
@import '../common/style/base.less';
2+
3+
/* Less 支持测试 - 监听功能验证 */
4+
@form-item-prefix: ~'@{prefix}-form-item';
5+
@form-item-horizontal-padding: var(--td-form-item-horizontal-padding, 32rpx);
6+
@form-item-vertical-padding: var(--td-form-item-vertical-padding, 32rpx);
7+
@form-item-label-width: var(--td-form-item-label-width, 160rpx);
8+
@form-item-justify-content: var(--td-form-item-justify-content, space-between);
9+
.@{form-item-prefix} {
10+
position: relative;
11+
display: flex;
12+
align-items: flex-start;
13+
justify-content: @form-item-justify-content;
14+
width: 100%;
15+
padding: @form-item-horizontal-padding @form-item-vertical-padding;
16+
background-color: #ffffff;
17+
--td-input-vertical-padding: 0rpx;
18+
--td-textarea-vertical-padding: 0rpx;
19+
--td-textarea-horizontal-padding: 0rpx;
20+
box-sizing: border-box;
21+
&--top {
22+
display: flex;
23+
flex-direction: column;
24+
}
25+
26+
&--bordered {
27+
border-bottom: 1rpx solid @border-color;
28+
}
29+
30+
&--error {
31+
.@{form-item-prefix}__error {
32+
color: @error-color;
33+
}
34+
}
35+
36+
&--success {
37+
.@{form-item-prefix}__success {
38+
color: @success-color;
39+
}
40+
}
41+
42+
&__label {
43+
position: relative;
44+
display: flex;
45+
align-items: center;
46+
width: @form-item-label-width;
47+
margin-right: 16rpx;
48+
font-size: @font-size-base;
49+
color: @text-color-primary;
50+
line-height: 1.5;
51+
52+
&--required {
53+
color: @error-color;
54+
margin-right: 4rpx;
55+
}
56+
57+
&--colon {
58+
margin-left: 4rpx;
59+
}
60+
61+
&--left {
62+
display: flex;
63+
align-items: center;
64+
justify-content: flex-start;
65+
}
66+
67+
&--right {
68+
display: flex;
69+
align-items: center;
70+
justify-content: flex-end;
71+
}
72+
73+
&--top {
74+
position: relative;
75+
// margin-bottom: 8rpx;
76+
margin-right: 0;
77+
width: 100%;
78+
}
79+
}
80+
81+
&__controls {
82+
flex: 1;
83+
width: 100%;
84+
margin-top: 8rpx;
85+
86+
&--left {
87+
text-align: left;
88+
}
89+
90+
&--right {
91+
text-align: right;
92+
}
93+
94+
&-content {
95+
width: 100%;
96+
display: flex;
97+
align-items: center;
98+
justify-content: space-between;
99+
}
100+
}
101+
102+
&__help {
103+
// margin: 4rpx 0 8rpx;
104+
font-size: @font-size-base;
105+
color: @font-gray-1;
106+
line-height: 1.4;
107+
}
108+
109+
&__desc-link {
110+
margin-top: 8rpx;
111+
color: @primary-color-7;
112+
font-size: @font-size-s;
113+
line-height: 1.4;
114+
}
115+
116+
&__error {
117+
margin-top: 4rpx;
118+
font-size: @font-size-s;
119+
line-height: 1.4;
120+
121+
&--error {
122+
color: @error-color;
123+
}
124+
125+
&--warning {
126+
color: @warning-color;
127+
}
128+
}
129+
130+
&__success {
131+
margin-top: 4rpx;
132+
font-size: @font-size-s;
133+
color: @success-color;
134+
line-height: 1.4;
135+
}
136+
137+
&__arrow {
138+
display: flex;
139+
align-items: center;
140+
margin-left: 8rpx;
141+
color: @text-color-placeholder;
142+
}
143+
144+
&__extra {
145+
margin-left: 16rpx;
146+
}
147+
}
148+
149+
.desc-wrapper {
150+
display: flex;
151+
align-items: center;
152+
gap: 12rpx;
153+
height: 50rpx;
154+
--td-button-font-weight: 400;
155+
// --td-button-extra-small-height: 38rpx;
156+
}

0 commit comments

Comments
 (0)