@kne/form-info 0.1.9 → 0.1.10

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.
Files changed (10) hide show
  1. package/README.md +27 -18
  2. package/dist/index.css +228 -0
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +145 -42
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.modern.js +136 -35
  8. package/dist/index.modern.js.map +1 -1
  9. package/dist/package-manifest.json +5 -0
  10. package/package.json +3 -1
package/README.md CHANGED
@@ -1,19 +1,15 @@
1
-
2
1
  # form-info
3
2
 
4
-
5
3
  ### 描述
6
4
 
7
5
  构建一个更加美观的form表单组件
8
6
 
9
-
10
7
  ### 安装
11
8
 
12
9
  ```shell
13
10
  npm i --save @kne/form-info
14
11
  ```
15
12
 
16
-
17
13
  ### 概述
18
14
 
19
15
  这是一个基于 React 和 Ant Design 的高颜值表单组件库，专为现代化 Web 应用设计。该组件库通过优雅的视觉设计和丰富的交互功能，为开发者提供了一套完整的表单解决方案。
@@ -40,6 +36,20 @@ npm i --save @kne/form-info
40
36
 
41
37
  ### 示例(全屏)
42
38
 
39
+ #### 示例样式
40
+
41
+ ```scss
42
+ @use '~@kne/responsive-utils/scss' as resp;
43
+
44
+ // 手机预览下给示例内容留白，便于观察层级与间距
45
+ @include resp.mobile-container {
46
+ .example-driver-runner {
47
+ padding: 12px 16px 24px;
48
+ box-sizing: border-box;
49
+ }
50
+ }
51
+ ```
52
+
43
53
  #### 示例代码
44
54
 
45
55
  - 基础表单示例
@@ -104,7 +114,7 @@ const BaseExample = () => {
104
114
  <List
105
115
  title="工作经历"
106
116
  name="workExperience"
107
- itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
117
+ itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
108
118
  important
109
119
  maxLength={5}
110
120
  addText="添加工作经历"
@@ -116,7 +126,7 @@ const BaseExample = () => {
116
126
  <List
117
127
  title="项目经历"
118
128
  name="projects"
119
- itemTitle={({index, data}) => data?.projectName || `项目 ${index + 1}`}
129
+ itemTitle={({index, data}) => data?.projectName || &#96;项目 ${index + 1}&#96;}
120
130
  list={[
121
131
  <Input name="projectName" label="项目名称" rule="REQ" placeholder="例如：双十一活动系统" />,
122
132
  <Input name="projectRole" label="担任角色" rule="REQ" placeholder="例如：技术负责人" />,
@@ -132,7 +142,7 @@ const BaseExample = () => {
132
142
  <TableList
133
143
  title="家庭成员信息"
134
144
  name="familyMembers"
135
- itemTitle={({index}) => `家庭成员 ${index + 1}`}
145
+ itemTitle={({index}) => &#96;家庭成员 ${index + 1}&#96;}
136
146
  maxLength={10}
137
147
  addText="添加家庭成员"
138
148
  list={[
@@ -292,7 +302,7 @@ const BaseExample = () => {
292
302
  <List
293
303
  title="工作经历"
294
304
  name="workExperience"
295
- itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
305
+ itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
296
306
  important
297
307
  maxLength={5}
298
308
  addText="添加工作经历"
@@ -365,7 +375,7 @@ const BaseExample = () => {
365
375
 
366
376
  // 步骤变更回调
367
377
  const handleStepChange = (current, formData) => {
368
- console.log(`切换到第 ${current + 1} 步，表单数据:`, formData);
378
+ console.log(&#96;切换到第 ${current + 1} 步，表单数据:&#96;, formData);
369
379
  setCurrentStep(current);
370
380
  };
371
381
 
@@ -497,7 +507,7 @@ const BaseExample = () => {
497
507
  <List
498
508
  title="紧急联系人列表"
499
509
  name="emergencyContacts"
500
- itemTitle={({index, data}) => data?.name || `联系人 ${index + 1}`}
510
+ itemTitle={({index, data}) => data?.name || &#96;联系人 ${index + 1}&#96;}
501
511
  important
502
512
  maxLength={3}
503
513
  addText="添加联系人"
@@ -623,7 +633,7 @@ const BaseExample = () => {
623
633
 
624
634
  // 第三步：项目详情
625
635
  background: '现有客服系统效率低下，需要引入AI技术提升服务质量',
626
- objectives: `1. 响应时间缩短50%\n2. 客户满意度提升30%\n3. 人力成本降低40%`,
636
+ objectives: &#96;1. 响应时间缩短50%\n2. 客户满意度提升30%\n3. 人力成本降低40%&#96;,
627
637
  deliverables: '智能客服系统一套，包含前端界面、后台管理、AI对话引擎'
628
638
  };
629
639
 
@@ -644,7 +654,7 @@ const BaseExample = () => {
644
654
 
645
655
  // 步骤变更回调
646
656
  const handleStepChange = (current, data) => {
647
- console.log(`切换到第 ${current + 1} 步，当前数据:`, data);
657
+ console.log(&#96;切换到第 ${current + 1} 步，当前数据:&#96;, data);
648
658
  setCurrentStep(current);
649
659
  };
650
660
 
@@ -728,7 +738,7 @@ const BaseExample = () => {
728
738
  <List
729
739
  title="项目团队成员"
730
740
  name="teamMembers"
731
- itemTitle={({index, data}) => data?.name || `成员 ${index + 1}`}
741
+ itemTitle={({index, data}) => data?.name || &#96;成员 ${index + 1}&#96;}
732
742
  important
733
743
  maxLength={10}
734
744
  addText="添加团队成员"
@@ -784,7 +794,7 @@ const BaseExample = () => {
784
794
  <List
785
795
  title="里程碑计划"
786
796
  name="milestones"
787
- itemTitle={({index, data}) => data?.milestoneName || `里程碑 ${index + 1}`}
797
+ itemTitle={({index, data}) => data?.milestoneName || &#96;里程碑 ${index + 1}&#96;}
788
798
  addText="添加里程碑"
789
799
  list={[
790
800
  <Input name="milestoneName" label="里程碑名称" rule="REQ" placeholder="例如：需求确认" />,
@@ -854,7 +864,7 @@ const BorderedExample = () => {
854
864
  title="工作经历（important）"
855
865
  name="workExperience"
856
866
  bordered={bordered}
857
- itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
867
+ itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
858
868
  important
859
869
  addText="添加工作经历"
860
870
  list={[
@@ -868,7 +878,7 @@ const BorderedExample = () => {
868
878
  title="教育经历（非important）"
869
879
  name="educationHistory"
870
880
  bordered={bordered}
871
- itemTitle={({index, data}) => data?.schoolName || `教育经历 ${index + 1}`}
881
+ itemTitle={({index, data}) => data?.schoolName || &#96;教育经历 ${index + 1}&#96;}
872
882
  addText="添加教育经历"
873
883
  list={[
874
884
  <Input name="schoolName" label="学校名称" rule="REQ" placeholder="例如：北京大学" />,
@@ -898,7 +908,6 @@ render(<BorderedExample />);
898
908
 
899
909
  ```
900
910
 
901
-
902
911
  ### API
903
912
 
904
913
  ### FormInfo
@@ -1048,4 +1057,4 @@ render(<BorderedExample />);
1048
1057
  || addText | 添加 | Add |
1049
1058
  || deleteText | 删除 | Delete |
1050
1059
 
1051
- 可通过 withLocale HOC 或 useIntl hook 自定义国际化文本。
1060
+ 可通过 withLocale HOC 或 useIntl hook 自定义国际化文本。
package/dist/index.css CHANGED
@@ -1,3 +1,25 @@
1
+ .kne-form-info_gh14z {
2
+ position: relative;
3
+ }
4
+
5
+ .kne-form-info_Kfn6L {
6
+ overflow: auto;
7
+ }
8
+
9
+ :root {
10
+ --kne-viewport-width: 100vw;
11
+ --kne-viewport-height: 100vh;
12
+ --kne-viewport-inline-size: 100vw;
13
+ --kne-viewport-block-size: 100vh;
14
+ }
15
+
16
+ .kne-form-info_gh14z {
17
+ --kne-viewport-width: 100vw;
18
+ --kne-viewport-height: 100vh;
19
+ --kne-viewport-inline-size: 100vw;
20
+ --kne-viewport-block-size: 100vh;
21
+ }
22
+
1
23
  .kne-form-info_ZQNNL .multi-field-delete-label {
2
24
  display: none;
3
25
  }
@@ -47,10 +69,43 @@
47
69
  background: #ffffff;
48
70
  color: var(--font-color);
49
71
  }
72
+ @container kne-responsive (max-width: 768px) {
73
+ .kne-form-info_ZQNNL .ant-input,
74
+ .kne-form-info_ZQNNL .ant-input-affix-wrapper,
75
+ .kne-form-info_ZQNNL .ant-input-number,
76
+ .kne-form-info_ZQNNL .ant-input-number-input,
77
+ .kne-form-info_ZQNNL .ant-input-textarea textarea,
78
+ .kne-form-info_ZQNNL textarea.ant-input,
79
+ .kne-form-info_ZQNNL .ant-select-selector,
80
+ .kne-form-info_ZQNNL .ant-select-selection-search-input,
81
+ .kne-form-info_ZQNNL .ant-picker,
82
+ .kne-form-info_ZQNNL .ant-picker-input > input,
83
+ .kne-form-info_ZQNNL .ant-mentions,
84
+ .kne-form-info_ZQNNL .ant-mentions textarea,
85
+ .kne-form-info_ZQNNL .react-form__field input,
86
+ .kne-form-info_ZQNNL .react-form__field textarea {
87
+ font-size: 16px !important;
88
+ }
89
+ .kne-form-info_ZQNNL .ant-row {
90
+ row-gap: 12px !important;
91
+ }
92
+ .kne-form-info_ZQNNL .react-form__field-label {
93
+ margin-bottom: 6px;
94
+ }
95
+ }
50
96
 
51
97
  .kne-form-info_GW4Xx > .ant-card-head .part-title {
52
98
  font-size: var(--font-size-large);
53
99
  }
100
+ @container kne-responsive (max-width: 768px) {
101
+ .kne-form-info_GW4Xx.ant-card > .ant-card-head {
102
+ padding-inline: 0;
103
+ margin-bottom: 4px;
104
+ }
105
+ .kne-form-info_GW4Xx.ant-card > .ant-card-body {
106
+ padding: 12px 0 0;
107
+ }
108
+ }
54
109
 
55
110
  .kne-form-info_eY4qR.ant-btn {
56
111
  border-radius: var(--radius-default, 2px);
@@ -70,6 +125,109 @@
70
125
  padding: 16px 0 0;
71
126
  border-radius: 0;
72
127
  }
128
+ @container kne-responsive (max-width: 768px) {
129
+ .kne-form-info_SL3dC.ant-card {
130
+ border: none !important;
131
+ box-shadow: none !important;
132
+ background: transparent;
133
+ }
134
+ .kne-form-info_SL3dC.ant-card > .ant-card-head {
135
+ padding: 0 0 4px;
136
+ min-height: auto;
137
+ background: transparent;
138
+ border-bottom: none;
139
+ }
140
+ .kne-form-info_SL3dC.ant-card > .ant-card-body {
141
+ padding: 12px 0 0;
142
+ }
143
+ .kne-form-info_SL3dC .kne-form-info_PNnMa {
144
+ margin-bottom: 0;
145
+ }
146
+ .kne-form-info_SL3dC .kne-form-info_PNnMa:not(:last-child) {
147
+ margin-bottom: 16px;
148
+ padding-bottom: 16px;
149
+ border-bottom: 1px dashed var(--font-color-grey-4, #f0f0f0);
150
+ }
151
+ .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q {
152
+ border: none !important;
153
+ box-shadow: none !important;
154
+ background: transparent;
155
+ }
156
+ .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-head {
157
+ height: auto;
158
+ min-height: auto;
159
+ line-height: 1.5;
160
+ padding: 0 0 8px;
161
+ margin-bottom: 0;
162
+ background: transparent;
163
+ border-bottom: none;
164
+ }
165
+ .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-body {
166
+ padding: 4px 0 0;
167
+ }
168
+ .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-row {
169
+ row-gap: 12px !important;
170
+ }
171
+ .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-col {
172
+ padding-bottom: 4px;
173
+ }
174
+ .kne-form-info_SL3dC .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q {
175
+ border: none !important;
176
+ }
177
+ .kne-form-info_SL3dC .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head {
178
+ background: transparent;
179
+ padding: 0 0 8px;
180
+ }
181
+ .kne-form-info_SL3dC .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head .part-title {
182
+ display: inline-block;
183
+ padding: 4px 10px;
184
+ border-radius: 12px;
185
+ background: var(--primary-color-06);
186
+ color: var(--primary-color);
187
+ font-size: var(--font-size-small, 12px);
188
+ line-height: 16px;
189
+ }
190
+ .kne-form-info_SL3dC .kne-form-info_SL3dC {
191
+ margin: 12px 0 0;
192
+ padding: 12px 12px 12px 14px !important;
193
+ border: none !important;
194
+ box-shadow: none !important;
195
+ border-radius: 8px;
196
+ background: var(--bg-color-grey-1, #fafafa);
197
+ border-left: 3px solid var(--primary-color-2, var(--primary-color)) !important;
198
+ box-sizing: border-box;
199
+ }
200
+ .kne-form-info_SL3dC .kne-form-info_SL3dC.ant-card > .ant-card-head {
201
+ padding: 0 0 8px;
202
+ background: transparent;
203
+ border-bottom: none;
204
+ }
205
+ .kne-form-info_SL3dC .kne-form-info_SL3dC.ant-card > .ant-card-head .part-title {
206
+ font-size: var(--font-size-default, 14px);
207
+ }
208
+ .kne-form-info_SL3dC .kne-form-info_SL3dC.ant-card > .ant-card-body {
209
+ padding: 4px 0 0;
210
+ }
211
+ .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_PNnMa:not(:last-child) {
212
+ margin-bottom: 12px;
213
+ padding-bottom: 12px;
214
+ }
215
+ .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_HiB5Q {
216
+ border: none !important;
217
+ background: transparent;
218
+ }
219
+ .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_HiB5Q.ant-card .ant-card-head,
220
+ .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_HiB5Q.ant-card .ant-card-body {
221
+ padding-left: 0;
222
+ padding-right: 0;
223
+ }
224
+ .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_SL3dC {
225
+ margin-top: 8px;
226
+ padding: 10px 10px 10px 12px !important;
227
+ background: rgba(0, 0, 0, 0.02);
228
+ border-left-color: var(--font-color-grey-3, #d9d9d9) !important;
229
+ }
230
+ }
73
231
 
74
232
  .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head {
75
233
  background: var(--primary-color-06);
@@ -163,6 +321,13 @@
163
321
  margin-bottom: 16px;
164
322
  }
165
323
 
324
+ .kne-form-info_ZD9zd {
325
+ border: none !important;
326
+ border-radius: 0 !important;
327
+ background: transparent !important;
328
+ overflow: visible;
329
+ }
330
+
166
331
  .kne-form-info_r8-bn .kne-form-info_PNnMa {
167
332
  margin-bottom: 0 !important;
168
333
  }
@@ -179,6 +344,50 @@
179
344
  padding: 16px;
180
345
  width: var(--col-width);
181
346
  }
347
+ .kne-form-info_r8-bn.kne-form-info_LtgJz .react-form__field-label {
348
+ display: block;
349
+ }
350
+
351
+ .kne-form-info_5uGUh {
352
+ display: flex;
353
+ flex-direction: column;
354
+ gap: 16px;
355
+ }
356
+
357
+ .kne-form-info_H8TZT {
358
+ display: flex;
359
+ flex-direction: column;
360
+ align-items: stretch;
361
+ gap: 12px;
362
+ padding: 16px;
363
+ background: #fff;
364
+ border: 1px solid var(--font-color-grey-4, #f0f0f0);
365
+ border-radius: 8px;
366
+ box-sizing: border-box;
367
+ }
368
+
369
+ .kne-form-info_3Mhy7 {
370
+ flex: 1;
371
+ min-width: 0;
372
+ display: flex;
373
+ flex-direction: column;
374
+ gap: 12px;
375
+ }
376
+
377
+ .kne-form-info_-e-f1 {
378
+ width: 100%;
379
+ min-width: 0;
380
+ }
381
+
382
+ .kne-form-info_FVPV7 {
383
+ display: flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ width: 100%;
387
+ padding-top: 8px;
388
+ margin-top: 4px;
389
+ border-top: 1px solid var(--font-color-grey-4, #f0f0f0);
390
+ }
182
391
 
183
392
  .kne-form-info_Uw-3T {
184
393
  border: solid 1px var(--bg-color-grey-3);
@@ -220,6 +429,17 @@
220
429
  text-wrap: nowrap;
221
430
  }
222
431
 
432
+ .kne-form-info_03aHQ {
433
+ width: 100%;
434
+ justify-content: flex-start;
435
+ }
436
+ .kne-form-info_03aHQ .ant-steps-item {
437
+ max-width: none;
438
+ }
439
+ .kne-form-info_03aHQ .ant-steps-item-content {
440
+ text-wrap: wrap;
441
+ }
442
+
223
443
  .kne-form-info_uc1HZ {
224
444
  width: 100%;
225
445
  }
@@ -227,6 +447,14 @@
227
447
  .kne-form-info_vWPQO .kne-form-info_IOdkE {
228
448
  padding: 0 100px;
229
449
  }
450
+ @container kne-responsive (max-width: 768px) {
451
+ .kne-form-info_vWPQO .kne-form-info_IOdkE {
452
+ padding: 0;
453
+ }
454
+ }
455
+ .kne-form-info_vWPQO .kne-form-info_IOdkE.kne-form-info_03aHQ {
456
+ padding: 0;
457
+ }
230
458
 
231
459
  .kne-form-info_DXskv {
232
460
  padding: 16px;
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;AACf;AACA;EACE,gBAAgB;EAChB,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE,cAAc;AAChB;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,qBAAqB;EACrB,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,UAAU;AACZ;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;;AAEA;EACE,gBAAgB;AAClB","file":"index.css","sourcesContent":[".form-outer :global(.multi-field-delete-label) {\n display: none;\n}\n.form-outer:global(.react-form--inner) :global(.react-form__field-label.is-req:before) {\n position: static;\n transform: translateX(0);\n margin-right: 6px;\n}\n.form-outer:global(.react-form--inner) :global(.multi-field-delete-label) {\n display: block;\n}\n.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 {\n color: var(--font-color-grey);\n font-size: 14px;\n line-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 display: inline-block;\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 {\n padding: 0;\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}\n\n.extra-container {\n min-height: 32px;\n}"]}
1
+ {"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,2BAA2B;EAC3B,4BAA4B;EAC5B,iCAAiC;EACjC,gCAAgC;AAClC;;AAEA;EACE,2BAA2B;EAC3B,4BAA4B;EAC5B,iCAAiC;EACjC,gCAAgC;AAClC;;AAEA;EACE,aAAa;AACf;AACA;EACE,gBAAgB;EAChB,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE,cAAc;AAChB;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,qBAAqB;EACrB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;AACA;EACE;;;;;;;;;;;;;;IAcE,0BAA0B;EAC5B;EACA;IACE,wBAAwB;EAC1B;EACA;IACE,kBAAkB;EACpB;AACF;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE;IACE,iBAAiB;IACjB,kBAAkB;EACpB;EACA;IACE,iBAAiB;EACnB;AACF;;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;AACA;EACE;IACE,uBAAuB;IACvB,2BAA2B;IAC3B,uBAAuB;EACzB;EACA;IACE,gBAAgB;IAChB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EACrB;EACA;IACE,iBAAiB;EACnB;EACA;IACE,gBAAgB;EAClB;EACA;IACE,mBAAmB;IACnB,oBAAoB;IACpB,2DAA2D;EAC7D;EACA;IACE,uBAAuB;IACvB,2BAA2B;IAC3B,uBAAuB;EACzB;EACA;IACE,YAAY;IACZ,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EACrB;EACA;IACE,gBAAgB;EAClB;EACA;IACE,wBAAwB;EAC1B;EACA;IACE,mBAAmB;EACrB;EACA;IACE,uBAAuB;EACzB;EACA;IACE,uBAAuB;IACvB,gBAAgB;EAClB;EACA;IACE,qBAAqB;IACrB,iBAAiB;IACjB,mBAAmB;IACnB,mCAAmC;IACnC,2BAA2B;IAC3B,uCAAuC;IACvC,iBAAiB;EACnB;EACA;IACE,gBAAgB;IAChB,uCAAuC;IACvC,uBAAuB;IACvB,2BAA2B;IAC3B,kBAAkB;IAClB,2CAA2C;IAC3C,8EAA8E;IAC9E,sBAAsB;EACxB;EACA;IACE,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EACrB;EACA;IACE,yCAAyC;EAC3C;EACA;IACE,gBAAgB;EAClB;EACA;IACE,mBAAmB;IACnB,oBAAoB;EACtB;EACA;IACE,uBAAuB;IACvB,uBAAuB;EACzB;EACA;;IAEE,eAAe;IACf,gBAAgB;EAClB;EACA;IACE,eAAe;IACf,uCAAuC;IACvC,+BAA+B;IAC/B,+DAA+D;EACjE;AACF;;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,UAAU;AACZ;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,uBAAuB;EACvB,2BAA2B;EAC3B,kCAAkC;EAClC,iBAAiB;AACnB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;AACA;EACE,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,SAAS;AACX;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,oBAAoB;EACpB,SAAS;EACT,aAAa;EACb,gBAAgB;EAChB,mDAAmD;EACnD,kBAAkB;EAClB,sBAAsB;AACxB;;AAEA;EACE,OAAO;EACP,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,SAAS;AACX;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,gBAAgB;EAChB,eAAe;EACf,uDAAuD;AACzD;;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;EACX,2BAA2B;AAC7B;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,gBAAgB;AAClB;AACA;EACE;IACE,UAAU;EACZ;AACF;AACA;EACE,UAAU;AACZ;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,gBAAgB;AAClB","file":"index.css","sourcesContent":[".kne-responsive-boundary {\n position: relative;\n}\n\n.kne-responsive-scroll {\n overflow: auto;\n}\n\n:root {\n --kne-viewport-width: 100vw;\n --kne-viewport-height: 100vh;\n --kne-viewport-inline-size: 100vw;\n --kne-viewport-block-size: 100vh;\n}\n\n.kne-responsive-boundary {\n --kne-viewport-width: 100vw;\n --kne-viewport-height: 100vh;\n --kne-viewport-inline-size: 100vw;\n --kne-viewport-block-size: 100vh;\n}\n\n.form-outer :global(.multi-field-delete-label) {\n display: none;\n}\n.form-outer:global(.react-form--inner) :global(.react-form__field-label.is-req:before) {\n position: static;\n transform: translateX(0);\n margin-right: 6px;\n}\n.form-outer:global(.react-form--inner) :global(.multi-field-delete-label) {\n display: block;\n}\n.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 {\n color: var(--font-color-grey);\n font-size: 14px;\n line-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 display: inline-block;\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@container kne-responsive (max-width: 768px) {\n .form-outer :global .ant-input,\n .form-outer :global .ant-input-affix-wrapper,\n .form-outer :global .ant-input-number,\n .form-outer :global .ant-input-number-input,\n .form-outer :global .ant-input-textarea textarea,\n .form-outer :global textarea.ant-input,\n .form-outer :global .ant-select-selector,\n .form-outer :global .ant-select-selection-search-input,\n .form-outer :global .ant-picker,\n .form-outer :global .ant-picker-input > input,\n .form-outer :global .ant-mentions,\n .form-outer :global .ant-mentions textarea,\n .form-outer :global .react-form__field input,\n .form-outer :global .react-form__field textarea {\n font-size: 16px !important;\n }\n .form-outer :global .ant-row {\n row-gap: 12px !important;\n }\n .form-outer :global .react-form__field-label {\n margin-bottom: 6px;\n }\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n@container kne-responsive (max-width: 768px) {\n .form-info:global(.ant-card) > :global(.ant-card-head) {\n padding-inline: 0;\n margin-bottom: 4px;\n }\n .form-info:global(.ant-card) > :global(.ant-card-body) {\n padding: 12px 0 0;\n }\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@container kne-responsive (max-width: 768px) {\n .list-part:global(.ant-card) {\n border: none !important;\n box-shadow: none !important;\n background: transparent;\n }\n .list-part:global(.ant-card) > :global(.ant-card-head) {\n padding: 0 0 4px;\n min-height: auto;\n background: transparent;\n border-bottom: none;\n }\n .list-part:global(.ant-card) > :global(.ant-card-body) {\n padding: 12px 0 0;\n }\n .list-part .list-item {\n margin-bottom: 0;\n }\n .list-part .list-item:not(:last-child) {\n margin-bottom: 16px;\n padding-bottom: 16px;\n border-bottom: 1px dashed var(--font-color-grey-4, #f0f0f0);\n }\n .list-part .list-item .list-item-part {\n border: none !important;\n box-shadow: none !important;\n background: transparent;\n }\n .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n height: auto;\n min-height: auto;\n line-height: 1.5;\n padding: 0 0 8px;\n margin-bottom: 0;\n background: transparent;\n border-bottom: none;\n }\n .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n padding: 4px 0 0;\n }\n .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-row) {\n row-gap: 12px !important;\n }\n .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-col) {\n padding-bottom: 4px;\n }\n .list-part .list-item.is-important > .list-item-part {\n border: none !important;\n }\n .list-part .list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n background: transparent;\n padding: 0 0 8px;\n }\n .list-part .list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n display: inline-block;\n padding: 4px 10px;\n border-radius: 12px;\n background: var(--primary-color-06);\n color: var(--primary-color);\n font-size: var(--font-size-small, 12px);\n line-height: 16px;\n }\n .list-part .list-part {\n margin: 12px 0 0;\n padding: 12px 12px 12px 14px !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 8px;\n background: var(--bg-color-grey-1, #fafafa);\n border-left: 3px solid var(--primary-color-2, var(--primary-color)) !important;\n box-sizing: border-box;\n }\n .list-part .list-part:global(.ant-card) > :global(.ant-card-head) {\n padding: 0 0 8px;\n background: transparent;\n border-bottom: none;\n }\n .list-part .list-part:global(.ant-card) > :global(.ant-card-head) :global(.part-title) {\n font-size: var(--font-size-default, 14px);\n }\n .list-part .list-part:global(.ant-card) > :global(.ant-card-body) {\n padding: 4px 0 0;\n }\n .list-part .list-part .list-item:not(:last-child) {\n margin-bottom: 12px;\n padding-bottom: 12px;\n }\n .list-part .list-part .list-item-part {\n border: none !important;\n background: transparent;\n }\n .list-part .list-part .list-item-part:global(.ant-card) :global(.ant-card-head),\n .list-part .list-part .list-item-part:global(.ant-card) :global(.ant-card-body) {\n padding-left: 0;\n padding-right: 0;\n }\n .list-part .list-part .list-part {\n margin-top: 8px;\n padding: 10px 10px 10px 12px !important;\n background: rgba(0, 0, 0, 0.02);\n border-left-color: var(--font-color-grey-3, #d9d9d9) !important;\n }\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 {\n padding: 0;\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-view {\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: visible;\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.table-list.is-mobile :global .react-form__field-label {\n display: block;\n}\n\n.table-list-mobile-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.table-list-mobile-card {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n padding: 16px;\n background: #fff;\n border: 1px solid var(--font-color-grey-4, #f0f0f0);\n border-radius: 8px;\n box-sizing: border-box;\n}\n\n.table-list-mobile-card-body {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.table-list-mobile-field {\n width: 100%;\n min-width: 0;\n}\n\n.table-list-mobile-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding-top: 8px;\n margin-top: 4px;\n border-top: 1px solid var(--font-color-grey-4, #f0f0f0);\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-vertical {\n width: 100%;\n justify-content: flex-start;\n}\n.steps-vertical :global(.ant-steps-item) {\n max-width: none;\n}\n.steps-vertical :global(.ant-steps-item-content) {\n text-wrap: wrap;\n}\n\n.steps-form-inner {\n width: 100%;\n}\n\n.steps-modal .steps {\n padding: 0 100px;\n}\n@container kne-responsive (max-width: 768px) {\n .steps-modal .steps {\n padding: 0;\n }\n}\n.steps-modal .steps.steps-vertical {\n padding: 0;\n}\n\n.table-list-empty {\n padding: 16px;\n}\n\n.extra-container {\n min-height: 32px;\n}"]}
package/dist/index.d.ts CHANGED
@@ -104,6 +104,8 @@ export interface TableListProps {
104
104
  list?: ReactNode[];
105
105
  empty?: ReactNode;
106
106
  itemTitle?: ({ index }: { index: number }) => string;
107
+ /** 移动端适配，同 @kne/table-view：true 默认卡片、function 自定义、string 走 preset */
108
+ renderMobile?: boolean | string | ((props: any) => ReactNode);
107
109
  }
108
110
 
109
111
  export interface MultiFieldProps {