@kne/form-info 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +208 -37
- package/dist/index.css +5 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +455 -366
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +295 -235
- package/dist/index.modern.js.map +1 -1
- package/dist/locale/en-US.js +11 -0
- package/dist/locale/en-US.js.map +1 -0
- package/dist/locale/en-US.modern.js +11 -0
- package/dist/locale/en-US.modern.js.map +1 -0
- package/dist/locale/zh-CN.js +11 -0
- package/dist/locale/zh-CN.js.map +1 -0
- package/dist/locale/zh-CN.modern.js +11 -0
- package/dist/locale/zh-CN.modern.js.map +1 -0
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -13,12 +13,37 @@
|
|
|
13
13
|
npm i --save @kne/form-info
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
+
|
|
17
|
+
### 概述
|
|
18
|
+
|
|
19
|
+
这是一个基于 React 和 Ant Design 的高颜值表单组件库，专为现代化 Web 应用设计。该组件库通过优雅的视觉设计和丰富的交互功能，为开发者提供了一套完整的表单解决方案。
|
|
20
|
+
|
|
21
|
+
## 核心特点
|
|
22
|
+
|
|
23
|
+
**美观优雅的界面设计** - 采用现代化的视觉风格，配合精心设计的间距、色彩和排版，让表单界面更加专业美观。
|
|
24
|
+
|
|
25
|
+
**多样化的表单组件** - 提供 FormInfo、FormModal、FormSteps、FormStepsModal、List、TableList、MultiField 等丰富的表单组件，满足各种复杂的业务场景需求。
|
|
26
|
+
|
|
27
|
+
**灵活的布局系统** - 支持响应式网格布局和 Flexbox 布局，可以轻松实现单列、多列以及自定义复杂布局。
|
|
28
|
+
|
|
29
|
+
**强大的列表功能** - 内置 List、TableList 等列表组件，支持动态添加/删除、嵌套列表等高级功能。
|
|
30
|
+
|
|
31
|
+
**多步骤表单支持** - 提供 FormSteps 和 FormStepsModal 组件，轻松实现向导式表单流程，提升用户体验。
|
|
32
|
+
|
|
33
|
+
**国际化支持** - 内置中英文语言包，支持自定义国际化文本，便于多语言应用开发。
|
|
34
|
+
|
|
35
|
+
**完整的事件系统** - 提供丰富的回调函数和事件钩子，支持表单验证、数据处理、状态管理等完整生命周期控制。
|
|
36
|
+
|
|
37
|
+
**高度可定制** - 组件设计充分考虑扩展性，支持自定义样式、图标、按钮文本等，满足个性化需求。
|
|
38
|
+
|
|
39
|
+
该组件库特别适合企业级应用、管理系统、数据录入平台等需要大量表单交互的场景，能够显著提升开发效率和用户体验。
|
|
40
|
+
|
|
16
41
|
### 示例(全屏)
|
|
17
42
|
|
|
18
43
|
#### 示例代码
|
|
19
44
|
|
|
20
|
-
-
|
|
21
|
-
-
|
|
45
|
+
- 基础表单示例
|
|
46
|
+
- 展示FormInfo、List、TableList、MultiField等基础组件的组合使用，包含普通字段、隐藏字段、多字段、列表、表格列表等多种表单元素的完整示例
|
|
22
47
|
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
23
48
|
|
|
24
49
|
```jsx
|
|
@@ -57,8 +82,8 @@ render(<BaseExample/>);
|
|
|
57
82
|
|
|
58
83
|
```
|
|
59
84
|
|
|
60
|
-
-
|
|
61
|
-
-
|
|
85
|
+
- 模态框表单示例
|
|
86
|
+
- 演示FormModal组件的使用，展示如何在弹窗中展示表单，支持表单数据初始化和提交后的自动关闭功能
|
|
62
87
|
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
63
88
|
|
|
64
89
|
```jsx
|
|
@@ -89,8 +114,8 @@ render(<BaseExample/>);
|
|
|
89
114
|
|
|
90
115
|
```
|
|
91
116
|
|
|
92
|
-
-
|
|
93
|
-
-
|
|
117
|
+
- 步骤表单示例
|
|
118
|
+
- 展示FormSteps组件的水平布局和垂直布局两种使用方式，演示多步骤表单的流程控制和步骤管理
|
|
94
119
|
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
95
120
|
|
|
96
121
|
```jsx
|
|
@@ -119,7 +144,7 @@ const BaseExample = () => {
|
|
|
119
144
|
</>
|
|
120
145
|
}]}/>
|
|
121
146
|
<Divider/>
|
|
122
|
-
<FormSteps
|
|
147
|
+
<FormSteps orientation="vertical" items={[{
|
|
123
148
|
title: '表单1',
|
|
124
149
|
formProps: {},
|
|
125
150
|
children: <FormInfo title="基本信息" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
@@ -146,55 +171,201 @@ render(<BaseExample/>);
|
|
|
146
171
|
|
|
147
172
|
```
|
|
148
173
|
|
|
149
|
-
-
|
|
150
|
-
-
|
|
174
|
+
- 模态框步骤表单示例
|
|
175
|
+
- 演示FormStepsModal组件的使用，结合模态框和步骤表单功能，展示在弹窗中实现复杂多步骤表单流程的完整解决方案
|
|
151
176
|
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
152
177
|
|
|
153
178
|
```jsx
|
|
154
|
-
const {default: FormInfo, FormStepsModal, List, Input, TextArea, SubmitButton, CancelButton} = _FormInfo;
|
|
155
|
-
const {Flex, Button} = antd;
|
|
156
|
-
const {useState} = React;
|
|
179
|
+
const { default: FormInfo, FormStepsModal, List, Input, TextArea, SubmitButton, CancelButton } = _FormInfo;
|
|
180
|
+
const { Flex, Button } = antd;
|
|
181
|
+
const { useState } = React;
|
|
157
182
|
|
|
158
183
|
const BaseExample = () => {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
184
|
+
const [open, onOpenChange] = useState(false);
|
|
185
|
+
return (
|
|
186
|
+
<>
|
|
187
|
+
<Button
|
|
188
|
+
onClick={() => {
|
|
189
|
+
onOpenChange(true);
|
|
190
|
+
}}>
|
|
191
|
+
打开StepsForm弹窗
|
|
192
|
+
</Button>
|
|
193
|
+
<FormStepsModal
|
|
194
|
+
modalProps={{ open, title: '多步骤表单', onCancel: () => onOpenChange(false) }}
|
|
195
|
+
items={[
|
|
196
|
+
{
|
|
165
197
|
title: '表单1',
|
|
166
198
|
formProps: {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
199
|
+
data: {
|
|
200
|
+
phone: '10929299202'
|
|
201
|
+
}
|
|
170
202
|
},
|
|
171
|
-
children: <FormInfo title="基本信息" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
172
|
-
|
|
173
|
-
|
|
203
|
+
children: <FormInfo title="基本信息" list={[<Input name="name" label="姓名" rule="REQ" />, <Input name="phone" label="电话" rule="REQ TEL" />, <TextArea name="description" label="描述" block />]} />
|
|
204
|
+
},
|
|
205
|
+
{
|
|
174
206
|
title: '表单2',
|
|
175
207
|
formProps: {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
208
|
+
data: {
|
|
209
|
+
phone: '11939388383'
|
|
210
|
+
}
|
|
179
211
|
},
|
|
180
|
-
children: <List title="工作经历" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
<FormSteps/>
|
|
187
|
-
</Flex>
|
|
212
|
+
children: <List title="工作经历" list={[<Input name="name" label="姓名" rule="REQ" />, <Input name="phone" label="电话" rule="REQ TEL" />, <TextArea name="description" label="描述" block />]} />
|
|
213
|
+
}
|
|
214
|
+
]}
|
|
215
|
+
/>
|
|
216
|
+
</>
|
|
217
|
+
);
|
|
188
218
|
};
|
|
189
219
|
|
|
190
|
-
render(<BaseExample/>);
|
|
220
|
+
render(<BaseExample />);
|
|
191
221
|
|
|
192
222
|
```
|
|
193
223
|
|
|
194
224
|
|
|
195
225
|
### API
|
|
196
226
|
|
|
227
|
+
### FormInfo
|
|
228
|
+
|
|
229
|
+
基础的表单信息展示组件，用于创建结构化的表单布局。
|
|
230
|
+
|
|
231
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
232
|
+
|-----|----|----|-----|
|
|
233
|
+
| column | 列数，支持数字或Flexbox配置 | number \| object | 2 |
|
|
234
|
+
| list | 表单项列表 | ReactNode[] | [] |
|
|
235
|
+
| gap | 字段间距 | number | 24 |
|
|
236
|
+
| className | 自定义样式类名 | string | - |
|
|
237
|
+
| title | 标题 | string \| ReactNode | - |
|
|
238
|
+
| subtitle | 副标题 | string \| ReactNode | - |
|
|
239
|
+
|
|
240
|
+
### FormModal
|
|
241
|
+
|
|
242
|
+
模态框表单组件，在弹窗中展示表单内容。
|
|
243
|
+
|
|
244
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
245
|
+
|-----|----|----|-----|
|
|
246
|
+
| open | 是否显示模态框 | boolean | false |
|
|
247
|
+
| onCancel | 关闭回调 | function | - |
|
|
248
|
+
| formProps | 表单属性 | object | {} |
|
|
249
|
+
| autoClose | 提交后自动关闭 | boolean | true |
|
|
250
|
+
| okType | 确认按钮类型 | string | primary |
|
|
251
|
+
| okText | 确认按钮文本 | string \| ReactNode | 提交 |
|
|
252
|
+
| cancelText | 取消按钮文本 | string \| ReactNode | 取消 |
|
|
253
|
+
| okButtonProps | 确认按钮属性 | object | - |
|
|
254
|
+
| cancelButtonProps | 取消按钮属性 | object | - |
|
|
255
|
+
| footer | 底部内容 | ReactNode \| function | - |
|
|
256
|
+
| renderModal | 自定义模态框渲染 | function | - |
|
|
257
|
+
| modalRender | 自定义内容渲染 | function | - |
|
|
258
|
+
|
|
259
|
+
### FormSteps
|
|
260
|
+
|
|
261
|
+
步骤表单组件，支持多步骤表单流程。
|
|
262
|
+
|
|
263
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
264
|
+
|-----|----|----|-----|
|
|
265
|
+
| items | 步骤配置项 | array | [] |
|
|
266
|
+
| current | 当前步骤 | number | - |
|
|
267
|
+
| defaultCurrent | 默认当前步骤 | number | 0 |
|
|
268
|
+
| autoStep | 自动切换下一步 | boolean | true |
|
|
269
|
+
| direction | 步骤条方向 | string | horizontal |
|
|
270
|
+
| orientation | 步骤条方向 | string | horizontal |
|
|
271
|
+
| onChange | 步骤切换回调 | function | - |
|
|
272
|
+
| onComplete | 完成回调 | function | - |
|
|
273
|
+
| stepsClassName | 步骤条样式类名 | string | - |
|
|
274
|
+
|
|
275
|
+
每个步骤项配置：
|
|
276
|
+
|
|
277
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
278
|
+
|-----|----|----|-----|
|
|
279
|
+
| title | 步骤标题 | string \| ReactNode | - |
|
|
280
|
+
| formProps | 表单属性 | object | - |
|
|
281
|
+
| children | 步骤内容 | ReactNode \| function | - |
|
|
282
|
+
|
|
283
|
+
### FormStepsModal
|
|
284
|
+
|
|
285
|
+
模态框步骤表单组件，结合了模态框和步骤表单功能。
|
|
286
|
+
|
|
287
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
288
|
+
|-----|----|----|-----|
|
|
289
|
+
| items | 步骤配置项 | array | [] |
|
|
290
|
+
| modalProps | 模态框属性 | object | {autoClose: true} |
|
|
291
|
+
| completeText | 完成按钮文本 | string \| ReactNode | 完成 |
|
|
292
|
+
| nextText | 下一步按钮文本 | string \| ReactNode | 下一步 |
|
|
293
|
+
| autoStep | 自动切换下一步 | boolean | true |
|
|
294
|
+
| onComplete | 完成回调 | function | - |
|
|
295
|
+
| className | 样式类名 | string | - |
|
|
296
|
+
|
|
297
|
+
### List
|
|
298
|
+
|
|
299
|
+
列表表单组件，支持动态添加/删除列表项。
|
|
300
|
+
|
|
301
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
302
|
+
|-----|----|----|-----|
|
|
303
|
+
| name | 字段名 | string | - |
|
|
304
|
+
| title | 列表标题 | string \| ReactNode | - |
|
|
305
|
+
| list | 表单项列表 | ReactNode[] | - |
|
|
306
|
+
| important | 是否重要样式 | boolean | false |
|
|
307
|
+
| addText | 添加按钮文本 | string \| ReactNode | 添加 |
|
|
308
|
+
| removeText | 删除按钮文本 | string \| ReactNode | 删除 |
|
|
309
|
+
| addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
|
|
310
|
+
| removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
|
|
311
|
+
| empty | 空状态内容 | ReactNode | Empty |
|
|
312
|
+
| itemClassName | 列表项样式类名 | string | - |
|
|
313
|
+
| className | 样式类名 | string | - |
|
|
314
|
+
|
|
315
|
+
### TableList
|
|
316
|
+
|
|
317
|
+
表格列表表单组件，以表格形式展示列表数据。
|
|
318
|
+
|
|
319
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
320
|
+
|-----|----|----|-----|
|
|
321
|
+
| name | 字段名 | string | - |
|
|
322
|
+
| title | 表格标题 | string \| ReactNode | - |
|
|
323
|
+
| list | 表单项列表 | ReactNode[] | - |
|
|
324
|
+
| addText | 添加按钮文本 | string \| ReactNode | 添加 |
|
|
325
|
+
| removeText | 删除按钮文本 | string \| ReactNode | 删除 |
|
|
326
|
+
| addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
|
|
327
|
+
| removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
|
|
328
|
+
| empty | 空状态内容 | ReactNode | Empty |
|
|
329
|
+
| className | 样式类名 | string | - |
|
|
330
|
+
|
|
331
|
+
### MultiField
|
|
332
|
+
|
|
333
|
+
多字段组件，支持动态添加/删除同类型字段。
|
|
334
|
+
|
|
197
335
|
| 属性名 | 说明 | 类型 | 默认值 |
|
|
198
336
|
|-----|----|----|-----|
|
|
199
|
-
|
|
|
337
|
+
| name | 字段名 | string | - |
|
|
338
|
+
| label | 字段标签 | string | - |
|
|
339
|
+
| field | 字段组件 | React.ComponentType | - |
|
|
340
|
+
| block | 是否块级显示 | boolean | false |
|
|
341
|
+
| addText | 添加按钮文本 | string \| function | 添加 |
|
|
342
|
+
| removeText | 删除按钮文本 | string \| function | - |
|
|
343
|
+
| addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
|
|
344
|
+
| removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
|
|
345
|
+
| empty | 空状态内容 | ReactNode | Empty |
|
|
346
|
+
| className | 样式类名 | string | - |
|
|
347
|
+
|
|
348
|
+
### Form
|
|
349
|
+
|
|
350
|
+
基础表单容器组件。
|
|
351
|
+
|
|
352
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
353
|
+
|-----|----|----|-----|
|
|
354
|
+
| type | 表单类型 | string | inner |
|
|
355
|
+
| className | 自定义样式类名 | string | - |
|
|
356
|
+
| children | 子组件 | ReactNode | - |
|
|
357
|
+
|
|
358
|
+
### 国际化配置
|
|
359
|
+
|
|
360
|
+
组件内置以下国际化文本：
|
|
361
|
+
|
|
362
|
+
| 键名 | 中文 | 英文 |
|
|
363
|
+
|-----|----|----|
|
|
364
|
+
| submit | 提交 | Submit |
|
|
365
|
+
| cancel | 取消 | Cancel |
|
|
366
|
+
| complete | 完成 | Complete |
|
|
367
|
+
| next | 下一步 | Next |
|
|
368
|
+
| addText | 添加 | Add |
|
|
369
|
+
| deleteText | 删除 | Delete |
|
|
200
370
|
|
|
371
|
+
可通过 withLocale HOC 或 useIntl hook 自定义国际化文本。
|
package/dist/index.css
CHANGED
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
._eY4qR.ant-btn {
|
|
52
|
-
border-radius: 2px;
|
|
52
|
+
border-radius: var(--radius-default, 2px);
|
|
53
53
|
border: 1px solid var(--font-color-grey-2);
|
|
54
54
|
padding: 6px 12px;
|
|
55
55
|
}
|
|
@@ -220,4 +220,8 @@
|
|
|
220
220
|
._vWPQO ._IOdkE {
|
|
221
221
|
padding: 0 100px;
|
|
222
222
|
}
|
|
223
|
+
|
|
224
|
+
._DXskv {
|
|
225
|
+
padding: 16px;
|
|
226
|
+
}
|
|
223
227
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,cAAc;AAChB;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,
|
|
1
|
+
{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,cAAc;AAChB;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,yCAAyC;EACzC,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,gBAAgB;AAClB;AACA;EACE,uBAAuB;EACvB,UAAU;EACV,YAAY;EACZ,cAAc;AAChB;AACA;EACE,mCAAmC;EACnC,2BAA2B;EAC3B,iCAAiC;EACjC,iBAAiB;AACnB;AACA;EACE,eAAe;AACjB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,YAAY;AACd;AACA;EACE,mBAAmB;EACnB,iDAAiD;EACjD,iBAAiB;EACjB,YAAY;EACZ,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,qBAAqB;EACrB,kCAAkC;AACpC;AACA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,aAAa;AACf;AACA;EACE,0CAA0C;AAC5C;AACA;EACE,aAAa;AACf;AACA;EACE,mBAAmB;AACrB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,aAAa;EACb,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,aAAa;AACf;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,OAAO;AACT;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,uBAAuB;EACvB,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,aAAa;AACf","file":"index.css","sourcesContent":[".form-outer :global .react-form__field {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input::placeholder {\n color: var(--font-color-grey-2);\n}\n.form-outer :global .react-form__field-label.is-req {\n margin-left: 0;\n}\n.form-outer :global .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n font-weight: normal !important;\n}\n.form-outer :global .react-form__field-label.is-req:before {\n color: var(--color-warning);\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.form-outer :global .react-form__field-error {\n line-height: 14px;\n}\n.form-outer :global .ant-input-number,\n.form-outer :global .ant-input-number-group-wrapper {\n width: 100%;\n}\n.form-outer :global .ant-picker.react-form__field-component,\n.form-outer :global .data_range_picker {\n flex: 1;\n width: 100%;\n}\n.form-outer :global .ant-input-number-group-addon,\n.form-outer :global .ant-input-group-addon {\n background: #ffffff;\n color: var(--font-color);\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n\n.extra-btn:global(.ant-btn) {\n border-radius: var(--radius-default, 2px);\n border: 1px solid var(--font-color-grey-2);\n padding: 6px 12px;\n}\n\n.list-part > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n.list-part .list-part .extra-btn {\n padding: 0;\n border: none;\n min-width: 0;\n}\n.list-part:global.ant-card .ant-card-body {\n padding: 16px 0 0;\n border-radius: 0;\n}\n\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n background: var(--primary-color-06);\n}\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head .ant-card-head-title .part-title) {\n color: var(--primary-color);\n}\n.list-item.is-important .list-item-part:global(.ant-card .ant-card-head-title .part-title) {\n font-weight: 500;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) {\n background: transparent;\n padding: 0;\n border: none;\n line-height: 1;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n background: var(--primary-color-06);\n color: var(--primary-color);\n font-size: var(--font-size-small);\n font-weight: bold;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-body) {\n padding: 16px 0;\n}\n.list-item.is-important > .list-item-part {\n border-color: var(--primary-color-5);\n}\n.list-item.is-important .table-list-inner {\n border: none;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n background: #f8f8f8;\n border-bottom: 1px solid var(--font-color-grey-4);\n line-height: 36px;\n height: 36px;\n padding: 0 16px;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) .extra-btn {\n min-width: auto !important;\n border: none !important;\n padding: 0 !important;\n background: transparent !important;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head-title) :global(.part-title) {\n background: transparent;\n font-weight: normal;\n font-size: 14px;\n color: var(--font-color);\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n padding: 16px;\n}\n.list-item :global(.ant-divider) {\n border-top-color: var(--font-color-grey-2);\n}\n.list-item :global(.ant-divider) {\n display: none;\n}\n.list-item:not(:last-child) {\n margin-bottom: 16px;\n}\n\n.list-item-part {\n border: 1px solid var(--font-color-grey-4);\n}\n\n.multi-field-item {\n display: flex;\n flex-wrap: nowrap;\n gap: 8px;\n}\n.multi-field-item:not(:first-child) :global .react-form__field-label {\n display: none;\n}\n.multi-field-item .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n}\n.multi-field-item :global .react-form__field {\n flex: 1;\n}\n\n.multi-field-add-btn {\n margin-bottom: 16px;\n}\n\n.table-list .list-item {\n margin-bottom: 0 !important;\n}\n.table-list :global .react-form__field-label {\n display: none;\n}\n.table-list :global .ant-row:not(:last-child) {\n border-bottom: solid 1px var(--bg-color-grey-3);\n}\n.table-list :global .ant-row:hover {\n background: var(--bg-color-grey-1) !important;\n}\n.table-list :global .ant-col {\n padding: 16px;\n width: var(--col-width);\n}\n\n.table-list-inner {\n border: solid 1px var(--bg-color-grey-3);\n}\n\n.table-list-field:global(.ant-col) {\n padding-bottom: 0;\n}\n\n.table-list-header {\n background: var(--bg-color-grey-1);\n}\n.table-list-header .is-req:before {\n color: var(--color-warning);\n content: \"*\";\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.table-list-header :global .ant-col {\n padding: 8px 16px;\n}\n\n.table-options {\n flex-basis: 100px;\n text-align: right;\n}\n\n.steps {\n justify-content: center;\n width: auto;\n}\n.steps :global(.ant-steps-item) {\n max-width: 450px;\n}\n.steps :global(.ant-steps-item-content) {\n text-wrap: nowrap;\n}\n\n.steps-form-inner {\n width: 100%;\n}\n\n.steps-modal .steps {\n padding: 0 100px;\n}\n\n.table-list-empty {\n padding: 16px;\n}"]}
|