@tmagic/form 1.8.0-beta.9 → 1.8.0-manmanyu.11

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 (64) hide show
  1. package/dist/es/Form.vue_vue_type_script_setup_true_lang.js +44 -5
  2. package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js +12 -5
  3. package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js +37 -12
  4. package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +22 -16
  5. package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +6 -5
  6. package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +41 -31
  7. package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +16 -10
  8. package/dist/es/containers/table/ActionsColumn.vue_vue_type_script_setup_true_lang.js +13 -6
  9. package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js +4 -2
  10. package/dist/es/containers/table/useTableColumns.js +6 -2
  11. package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js +2 -1
  12. package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +4 -1
  13. package/dist/es/fields/Checkbox.vue_vue_type_script_setup_true_lang.js +4 -1
  14. package/dist/es/fields/CheckboxGroup.vue_vue_type_script_setup_true_lang.js +4 -1
  15. package/dist/es/fields/ColorPicker.vue_vue_type_script_setup_true_lang.js +4 -1
  16. package/dist/es/fields/Date.vue_vue_type_script_setup_true_lang.js +4 -1
  17. package/dist/es/fields/DateTime.vue_vue_type_script_setup_true_lang.js +4 -1
  18. package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js +4 -1
  19. package/dist/es/fields/Display.vue_vue_type_script_setup_true_lang.js +4 -1
  20. package/dist/es/fields/DynamicField.vue_vue_type_script_setup_true_lang.js +4 -1
  21. package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +29 -7
  22. package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +8 -3
  23. package/dist/es/fields/NumberRange.vue_vue_type_script_setup_true_lang.js +4 -1
  24. package/dist/es/fields/RadioGroup.vue_vue_type_script_setup_true_lang.js +16 -8
  25. package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +4 -1
  26. package/dist/es/fields/Switch.vue_vue_type_script_setup_true_lang.js +4 -1
  27. package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +112 -77
  28. package/dist/es/fields/Textarea.vue_vue_type_script_setup_true_lang.js +4 -1
  29. package/dist/es/fields/Time.vue_vue_type_script_setup_true_lang.js +4 -1
  30. package/dist/es/fields/Timerange.vue_vue_type_script_setup_true_lang.js +4 -1
  31. package/dist/es/plugin.js +2 -0
  32. package/dist/es/style.css +121 -8
  33. package/dist/style.css +121 -8
  34. package/dist/themes/magic-admin.css +495 -0
  35. package/dist/tmagic-form.umd.cjs +448 -225
  36. package/package.json +4 -4
  37. package/src/Form.vue +53 -4
  38. package/src/FormDialog.vue +14 -3
  39. package/src/FormDrawer.vue +40 -12
  40. package/src/containers/Container.vue +16 -5
  41. package/src/containers/GroupList.vue +1 -1
  42. package/src/containers/GroupListItem.vue +28 -22
  43. package/src/containers/Panel.vue +10 -3
  44. package/src/containers/table/ActionsColumn.vue +10 -4
  45. package/src/containers/table/Table.vue +1 -0
  46. package/src/containers/table/useTableColumns.ts +10 -4
  47. package/src/containers/table-group-list/TableGroupList.vue +7 -1
  48. package/src/fields/Link.vue +17 -3
  49. package/src/fields/Number.vue +5 -2
  50. package/src/fields/RadioGroup.vue +11 -5
  51. package/src/fields/Text.vue +43 -19
  52. package/src/plugin.ts +2 -0
  53. package/src/theme/container.scss +3 -0
  54. package/src/theme/fieldset.scss +50 -0
  55. package/src/theme/form.scss +6 -0
  56. package/src/theme/group-list.scss +9 -7
  57. package/src/theme/index.scss +1 -0
  58. package/src/theme/link.scss +17 -0
  59. package/src/theme/panel.scss +1 -1
  60. package/src/theme/radio-group.scss +23 -0
  61. package/src/theme/tabs.scss +2 -2
  62. package/src/theme/text.scss +38 -0
  63. package/src/theme/themes/magic-admin/index.scss +91 -0
  64. package/types/index.d.ts +46 -1
@@ -0,0 +1,495 @@
1
+ @charset "UTF-8";
2
+ .tmagic-design-form-inline .m-form-container {
3
+ display: inline-flex;
4
+ }
5
+
6
+ .m-form-container.has-tip {
7
+ display: flex;
8
+ align-items: baseline;
9
+ }
10
+ .m-form-container.has-tip .tmagic-design-form-item {
11
+ flex: 1;
12
+ }
13
+ .m-form-container .tmagic-design-form-item.show-after-diff {
14
+ background: rgb(225, 243, 216);
15
+ }
16
+ .m-form-container .tmagic-design-form-item.show-before-diff {
17
+ background: #f7dadd;
18
+ }
19
+ .m-form-container .m-form-title-extra {
20
+ margin-left: 8px;
21
+ }
22
+
23
+ .m-form-dialog .el-dialog__body {
24
+ padding: 0 !important;
25
+ }
26
+ .m-form-dialog .m-dialog-body {
27
+ padding: 0 20px;
28
+ }
29
+ .m-form-dialog .el-table .m-form-item .el-form-item {
30
+ margin-bottom: 0;
31
+ }
32
+
33
+ .m-form-drawer .el-drawer__header {
34
+ margin: 0;
35
+ }
36
+ .m-form-drawer .m-drawer-body {
37
+ height: 100%;
38
+ overflow-y: auto;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ .fade-enter-active,
43
+ .fade-leave-active {
44
+ transition: opacity 0.5s;
45
+ }
46
+
47
+ .fade-enter, .fade-leave-to {
48
+ opacity: 0;
49
+ }
50
+
51
+ .m-form .m-form-tip {
52
+ color: rgba(0, 0, 0, 0.45);
53
+ font-size: 12px;
54
+ transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
55
+ }
56
+ .m-form .m-form-schematic {
57
+ max-width: 50%;
58
+ height: 100%;
59
+ }
60
+ .m-form .tmagic-design-table .cell > div.m-form-container {
61
+ display: block;
62
+ }
63
+ .m-form .tmagic-design-table .cell > div.m-form-container.has-tip {
64
+ display: flex;
65
+ }
66
+ .m-form .tmagic-design-tabs {
67
+ margin-bottom: 10px;
68
+ }
69
+ .m-form .tmagic-design-form-item.tmagic-form-hidden > .el-form-item__label {
70
+ display: none;
71
+ }
72
+ .m-form .t-form__item.tmagic-form-hidden > .t-form__label {
73
+ display: none;
74
+ }
75
+ .m-form .t-form__item.tmagic-form-hidden > .t-form__controls {
76
+ margin-left: 0 !important;
77
+ }
78
+ .m-form.t-form:not(.t-form-inline) .t-form__item:last-of-type {
79
+ margin-bottom: var(--td-comp-margin-xxl);
80
+ }
81
+
82
+ .m-form-container .m-form-container-expand {
83
+ text-align: center;
84
+ }
85
+
86
+ .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
87
+ display: none;
88
+ }
89
+
90
+ .m-fields-text {
91
+ display: flex;
92
+ align-items: center;
93
+ width: 100%;
94
+ }
95
+ .m-fields-text--static {
96
+ gap: 6px;
97
+ min-height: 32px;
98
+ }
99
+ .m-fields-text--static .m-fields-text__prepend {
100
+ color: var(--el-text-color-secondary, #909399);
101
+ }
102
+ .m-fields-text--static .m-fields-text__value {
103
+ color: var(--el-text-color-regular, #606266);
104
+ overflow: hidden;
105
+ text-overflow: ellipsis;
106
+ white-space: nowrap;
107
+ }
108
+ .m-fields-text--static .m-fields-text__icon {
109
+ width: 16px;
110
+ height: 16px;
111
+ cursor: pointer;
112
+ }
113
+
114
+ .m-form-validate__warning {
115
+ color: var(--el-color-warning);
116
+ font-size: 12px;
117
+ width: 100%;
118
+ line-height: 1.4;
119
+ }
120
+
121
+ .tmagic-form-text-popper {
122
+ min-width: 150px;
123
+ line-height: 1.4;
124
+ background-color: #fff;
125
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
126
+ color: #606266;
127
+ border: 1px solid #e4e7ed;
128
+ border-radius: 4px;
129
+ font-size: 14px;
130
+ overflow-wrap: break-word;
131
+ box-sizing: border-box;
132
+ padding: 10px;
133
+ }
134
+ .tmagic-form-text-popper:focus {
135
+ outline: none;
136
+ }
137
+
138
+ .m-container-text.m-fields-title-container .tmagic-design-form-item .el-form-item__label {
139
+ color: #0f1113;
140
+ font-weight: 500;
141
+ font-size: 16px;
142
+ }
143
+ .m-container-text.m-fields-title-container .tmagic-design-form-item {
144
+ line-height: 24px;
145
+ margin-bottom: 16px;
146
+ }
147
+
148
+ .tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
149
+ bottom: -4px;
150
+ }
151
+
152
+ .tmagic-form-text-popper[data-popper-placement^=bottom] > .tmagic-form-text-popper-arrow {
153
+ top: -4px;
154
+ }
155
+
156
+ .tmagic-form-text-popper[data-popper-placement^=left] > .tmagic-form-text-popper-arrow {
157
+ right: -4px;
158
+ }
159
+
160
+ .tmagic-form-text-popper[data-popper-placement^=right] > .tmagic-form-text-popper-arrow {
161
+ left: -4px;
162
+ }
163
+
164
+ .tmagic-form-text-popper-arrow,
165
+ .tmagic-form-text-popper-arrow::before {
166
+ position: absolute;
167
+ width: 8px;
168
+ height: 8px;
169
+ background: inherit;
170
+ }
171
+
172
+ .tmagic-form-text-popper-arrow {
173
+ visibility: hidden;
174
+ }
175
+
176
+ .tmagic-form-text-popper-arrow::before {
177
+ visibility: visible;
178
+ content: "";
179
+ transform: rotate(45deg);
180
+ }
181
+
182
+ div.m-fields-link {
183
+ width: fit-content;
184
+ }
185
+
186
+ a.magic-admin-link {
187
+ width: 100%;
188
+ box-sizing: border-box;
189
+ border-radius: 4px;
190
+ border: 1px solid #e6e6e6;
191
+ background-color: #fafafa;
192
+ padding: 0 8px;
193
+ height: 28px;
194
+ display: inline-flex;
195
+ gap: 4px;
196
+ align-items: center;
197
+ text-decoration: none;
198
+ }
199
+ a.magic-admin-link i {
200
+ margin-right: 4px;
201
+ }
202
+
203
+ .m-container-fieldset.no-border-fieldset.fieldset-in-row > fieldset.m-fieldset legend {
204
+ left: 0;
205
+ }
206
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset {
207
+ border: 0;
208
+ }
209
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset legend {
210
+ position: relative;
211
+ left: -5px;
212
+ font-size: 16px;
213
+ font-weight: 500;
214
+ line-height: 24px;
215
+ padding: 0;
216
+ }
217
+ .m-container-fieldset.fieldset-in-card-fit {
218
+ border-bottom: 1px solid #e6e6e6;
219
+ }
220
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset {
221
+ padding: 16px 0 16px 0 !important;
222
+ border: 0;
223
+ margin-top: 0;
224
+ margin-bottom: 0;
225
+ }
226
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
227
+ position: relative;
228
+ top: 10px;
229
+ }
230
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
231
+ padding-bottom: 0 !important;
232
+ border-bottom: 0;
233
+ }
234
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-first {
235
+ padding-top: 0 !important;
236
+ }
237
+ .m-container-fieldset.fieldset-in-card-fit:last-child {
238
+ padding-bottom: 0 !important;
239
+ border-bottom: 0;
240
+ }
241
+ .m-container-fieldset.fieldset-in-card-fit:first {
242
+ padding-top: 0 !important;
243
+ }
244
+
245
+ fieldset.m-fieldset {
246
+ position: relative;
247
+ border: 1px solid rgb(229, 229, 229);
248
+ margin-top: 10px;
249
+ margin-bottom: 10px;
250
+ min-inline-size: auto;
251
+ }
252
+ fieldset.m-fieldset .el-checkbox {
253
+ height: 22px;
254
+ }
255
+ fieldset.m-fieldset legend {
256
+ font-size: 14px;
257
+ position: absolute;
258
+ border: 0;
259
+ top: -10px;
260
+ left: 20px;
261
+ background: rgb(255, 255, 255);
262
+ width: auto;
263
+ padding: 0px 3px;
264
+ font-weight: bold;
265
+ line-height: 20px;
266
+ }
267
+ fieldset.m-fieldset .m-form-tip {
268
+ margin-left: 5px;
269
+ }
270
+
271
+ .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
272
+ border: 0;
273
+ }
274
+ .m-fields-group-list .el-button--text {
275
+ padding: 0;
276
+ margin-bottom: 7px;
277
+ }
278
+ .m-fields-group-list .el-tree-node__expand-icon {
279
+ padding: 0;
280
+ margin-bottom: 7px;
281
+ }
282
+ .m-fields-group-list .el-tree-node__expand-icon.expand {
283
+ transform: rotate(90deg);
284
+ }
285
+ .m-fields-group-list .m-fields-group-list-item {
286
+ border-bottom: 1px solid #ebeef5;
287
+ margin-bottom: 7px;
288
+ }
289
+ .m-fields-group-list .m-fields-group-list-item:last-of-type {
290
+ border-bottom: 0;
291
+ }
292
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
293
+ display: flex;
294
+ align-items: center;
295
+ gap: 8px;
296
+ }
297
+ .m-fields-group-list .m-fields-group-list-footer {
298
+ display: flex;
299
+ justify-content: space-between;
300
+ margin-top: 10px;
301
+ margin-bottom: 16px;
302
+ }
303
+
304
+ .m-form-panel .el-card__header:hover {
305
+ background: #f2f6fc;
306
+ }
307
+ .m-form-panel .el-card__header a {
308
+ color: var(--el-color-primary, #409eff);
309
+ }
310
+ .m-form-panel .el-card__body {
311
+ padding: 10px;
312
+ }
313
+ .m-form-panel .m-form-tip {
314
+ margin-left: 5px;
315
+ }
316
+
317
+ .m-container-panel:not(:last-of-type) {
318
+ margin-bottom: 20px;
319
+ }
320
+
321
+ .m-fields-table-wrap {
322
+ width: 100%;
323
+ }
324
+ .m-fields-table-wrap.fixed {
325
+ position: fixed;
326
+ height: 100%;
327
+ overflow: auto;
328
+ top: 0;
329
+ right: 0;
330
+ left: 0;
331
+ bottom: 0;
332
+ z-index: 100;
333
+ background: rgba(0, 0, 0, 0.5);
334
+ align-items: center;
335
+ display: flex;
336
+ }
337
+ .m-fields-table-wrap.fixed > .el-form-item__content {
338
+ z-index: 101;
339
+ position: relative;
340
+ margin: 10vh auto;
341
+ max-width: fit-content;
342
+ }
343
+ .m-fields-table-wrap.fixed table {
344
+ width: 95vw !important;
345
+ }
346
+
347
+ .m-fields-table {
348
+ width: 100%;
349
+ }
350
+ .m-fields-table th {
351
+ background-color: #f2f2f2 !important;
352
+ color: #333 !important;
353
+ }
354
+ .m-fields-table .el-table th {
355
+ padding: 0 !important;
356
+ }
357
+ .m-fields-table .el-table__column--dropable {
358
+ cursor: move;
359
+ }
360
+ .m-fields-table .el-form-item__content .el-input-group {
361
+ vertical-align: middle;
362
+ }
363
+ .m-fields-table.m-fields-table-item-extra tr.expanded td {
364
+ border-bottom: 0;
365
+ }
366
+ .m-fields-table .el-table__expanded-cell .m-form-tip {
367
+ margin-left: 80px;
368
+ }
369
+ .m-fields-table .el-form-item {
370
+ margin-bottom: 0;
371
+ }
372
+ .m-fields-table .tmagic-form-table-drag-target {
373
+ cursor: move;
374
+ }
375
+
376
+ .m-select {
377
+ width: 100%;
378
+ }
379
+
380
+ .magic-form-dynamic-tab .el-tabs__header.is-top {
381
+ padding-right: 8px;
382
+ }
383
+ .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab {
384
+ margin-right: auto;
385
+ min-width: 50px;
386
+ outline: none;
387
+ border-color: var(--el-color-primary, #409eff);
388
+ color: var(--el-color-primary, #409eff);
389
+ width: 10px;
390
+ }
391
+ .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab::before {
392
+ content: "添加";
393
+ }
394
+ .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab .el-icon-plus {
395
+ display: none;
396
+ }
397
+
398
+ .magic-form-tab {
399
+ margin-bottom: 10px;
400
+ }
401
+
402
+ .diff-count-badge {
403
+ top: -10px;
404
+ }
405
+
406
+ .m-fields-number-range {
407
+ display: flex;
408
+ align-items: center;
409
+ }
410
+ .m-fields-number-range .split-tag {
411
+ margin: 0 5px;
412
+ }
413
+
414
+ .m-form-box {
415
+ display: flex;
416
+ flex-direction: column;
417
+ }
418
+ .m-form-box .el-box__header {
419
+ margin: 0;
420
+ }
421
+ .m-form-box .dialog-footer {
422
+ display: flex;
423
+ align-items: center;
424
+ justify-content: space-between;
425
+ }
426
+
427
+ .m-fields-radio-group__option {
428
+ display: flex;
429
+ align-items: center;
430
+ }
431
+
432
+ .m-fields-radio-group__text {
433
+ display: inline-block;
434
+ vertical-align: middle;
435
+ white-space: pre-line;
436
+ line-height: 20px;
437
+ }
438
+
439
+ .m-fields-radio-group__icon_with_text {
440
+ margin-right: 8px;
441
+ }
442
+
443
+ .m-form.m-form--magic-admin .m-container-tab:not(.magic-right-panel-tabs-top):not(.magic-form-dynamic-tab) > .tmagic-design-tabs:not(.el-tabs--border-card) > .el-tabs__content {
444
+ background-color: #fff;
445
+ padding: 16px 16px 0 16px;
446
+ border-radius: 4px;
447
+ }
448
+ .m-form.m-form--magic-admin .m-form-tip {
449
+ color: rgba(0, 0, 0, 0.55);
450
+ }
451
+ .m-form.m-form--magic-admin .tmagic-design-form-item.show-after-diff {
452
+ background: #d4edbc;
453
+ }
454
+ .m-form.m-form--magic-admin .tmagic-design-form-item.show-before-diff {
455
+ background: #fad2cf;
456
+ }
457
+ .m-form.m-form--magic-admin .m-fields-radio-group__text {
458
+ white-space: pre-line;
459
+ line-height: 20px;
460
+ }
461
+ .m-form.m-form--magic-admin .el-form-item__content .tmagic-design-radio-group .tmagic-design-radio-button {
462
+ margin-right: 8px;
463
+ height: 32px;
464
+ }
465
+ .m-form.m-form--magic-admin .el-form-item__content .tmagic-design-radio-group .tmagic-design-radio-button .el-radio-button__inner {
466
+ outline: none !important;
467
+ border: 0 !important;
468
+ height: 32px;
469
+ height: 32px;
470
+ border-radius: 16px;
471
+ padding: 0 16px;
472
+ display: inline-flex;
473
+ align-items: center;
474
+ justify-content: center;
475
+ }
476
+ .m-form.m-form--magic-admin .m-fields-data-source-field-select .tmagic-design-button {
477
+ margin-left: 8px;
478
+ }
479
+ .m-form.m-form--magic-admin .m-fields-data-source-field-select .tmagic-design-button span {
480
+ font-size: 16px;
481
+ }
482
+ .m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .el-card__body .m-fields-table-wrap .m-fields-table .el-table__header-wrapper thead {
483
+ height: 48px;
484
+ }
485
+ .m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .m-fields-group-list-item-header {
486
+ position: relative;
487
+ }
488
+ .m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .m-fields-group-list-item-header .delete-button {
489
+ position: absolute;
490
+ right: 0;
491
+ color: #0f1113;
492
+ }
493
+ .m-form.m-form--magic-admin .m-form-container .m-form-container-expand {
494
+ text-align: left;
495
+ }