@tmagic/editor 1.8.0-beta.24 → 1.8.0-beta.26

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 (113) hide show
  1. package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +10 -16
  2. package/dist/es/components/CodeParams.vue_vue_type_script_setup_true_lang.js +4 -4
  3. package/dist/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js +5 -8
  4. package/dist/es/components/ViewForm.vue_vue_type_script_setup_true_lang.js +3 -5
  5. package/dist/es/fields/Code.vue_vue_type_script_setup_true_lang.js +3 -11
  6. package/dist/es/fields/CodeSelect.vue_vue_type_script_setup_true_lang.js +29 -124
  7. package/dist/es/fields/CodeSelectCol.vue_vue_type_script_setup_true_lang.js +5 -6
  8. package/dist/es/fields/CondOpSelect.vue_vue_type_script_setup_true_lang.js +3 -2
  9. package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js +1 -1
  10. package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js +7 -6
  11. package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js +6 -10
  12. package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +5 -7
  13. package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +1 -4
  14. package/dist/es/fields/DataSourceMocks.vue_vue_type_script_setup_true_lang.js +4 -6
  15. package/dist/es/fields/DataSourceSelect.vue_vue_type_script_setup_true_lang.js +1 -1
  16. package/dist/es/fields/DisplayConds.vue_vue_type_script_setup_true_lang.js +9 -137
  17. package/dist/es/fields/EventSelect.vue_vue_type_script_setup_true_lang.js +51 -326
  18. package/dist/es/fields/KeyValue.vue_vue_type_script_setup_true_lang.js +2 -4
  19. package/dist/es/fields/StyleSetter/components/Border.vue_vue_type_script_setup_true_lang.js +3 -34
  20. package/dist/es/fields/StyleSetter/configs.js +663 -0
  21. package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js +5 -108
  22. package/dist/es/fields/StyleSetter/pro/Border.vue_vue_type_script_setup_true_lang.js +3 -9
  23. package/dist/es/fields/StyleSetter/pro/Font.vue_vue_type_script_setup_true_lang.js +6 -103
  24. package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js +5 -265
  25. package/dist/es/fields/StyleSetter/pro/Position.vue_vue_type_script_setup_true_lang.js +5 -85
  26. package/dist/es/fields/StyleSetter/pro/Transform.vue_vue_type_script_setup_true_lang.js +3 -22
  27. package/dist/es/fields/configs/codeSelect.js +98 -0
  28. package/dist/es/fields/configs/displayConds.js +158 -0
  29. package/dist/es/fields/configs/eventSelect.js +225 -0
  30. package/dist/es/fields/configs/stickyAddButton.js +20 -0
  31. package/dist/es/fields/headless-validation.js +139 -0
  32. package/dist/es/headless.js +2 -0
  33. package/dist/es/hooks/use-compare-form.js +6 -23
  34. package/dist/es/hooks/use-form-context.js +19 -0
  35. package/dist/es/index.js +3 -2
  36. package/dist/es/initService.js +17 -1
  37. package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js +1 -7
  38. package/dist/es/layouts/history-list/HistoryListPanel.vue_vue_type_script_setup_true_lang.js +1 -11
  39. package/dist/es/layouts/history-list/useHistoryRevert.js +3 -11
  40. package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js +10 -23
  41. package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js +3 -13
  42. package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js +1 -1
  43. package/dist/es/layouts/sidebar/code-block/useContentMenu.js +1 -1
  44. package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js +1 -1
  45. package/dist/es/layouts/sidebar/data-source/useContentMenu.js +1 -1
  46. package/dist/es/plugin.js +33 -32
  47. package/dist/es/style.css +120 -60
  48. package/dist/es/utils/data-source/index.js +2 -1
  49. package/dist/es/utils/props.js +1 -4
  50. package/dist/es/utils/type-match-rules.js +23 -22
  51. package/dist/style.css +120 -60
  52. package/dist/themes/magic-admin.css +132 -67
  53. package/dist/tmagic-editor-headless.umd.cjs +10867 -0
  54. package/dist/tmagic-editor.umd.cjs +2151 -2034
  55. package/package.json +12 -7
  56. package/src/Editor.vue +12 -16
  57. package/src/components/CodeParams.vue +10 -4
  58. package/src/components/CompareForm.vue +4 -5
  59. package/src/components/ViewForm.vue +2 -3
  60. package/src/editorProps.ts +1 -2
  61. package/src/fields/Code.vue +2 -10
  62. package/src/fields/CodeSelect.vue +20 -116
  63. package/src/fields/CodeSelectCol.vue +3 -5
  64. package/src/fields/CondOpSelect.vue +3 -2
  65. package/src/fields/DataSourceFieldSelect/FieldSelect.vue +1 -1
  66. package/src/fields/DataSourceFieldSelect/Index.vue +7 -6
  67. package/src/fields/DataSourceFields.vue +0 -7
  68. package/src/fields/DataSourceMethodSelect.vue +2 -5
  69. package/src/fields/DataSourceMethods.vue +1 -6
  70. package/src/fields/DataSourceMocks.vue +1 -10
  71. package/src/fields/DataSourceSelect.vue +1 -1
  72. package/src/fields/DisplayConds.vue +17 -153
  73. package/src/fields/EventSelect.vue +28 -375
  74. package/src/fields/KeyValue.vue +3 -4
  75. package/src/fields/StyleSetter/components/Border.vue +4 -38
  76. package/src/fields/StyleSetter/configs.ts +690 -0
  77. package/src/fields/StyleSetter/pro/Background.vue +4 -104
  78. package/src/fields/StyleSetter/pro/Border.vue +3 -12
  79. package/src/fields/StyleSetter/pro/Font.vue +5 -124
  80. package/src/fields/StyleSetter/pro/Layout.vue +4 -219
  81. package/src/fields/StyleSetter/pro/Position.vue +6 -110
  82. package/src/fields/StyleSetter/pro/Transform.vue +4 -30
  83. package/src/fields/configs/codeSelect.ts +127 -0
  84. package/src/fields/configs/displayConds.ts +184 -0
  85. package/src/fields/configs/eventSelect.ts +309 -0
  86. package/src/fields/configs/stickyAddButton.ts +31 -0
  87. package/src/fields/headless-validation.ts +177 -0
  88. package/src/headless.ts +33 -0
  89. package/src/hooks/use-compare-form.ts +7 -25
  90. package/src/hooks/use-form-context.ts +40 -0
  91. package/src/index.ts +2 -0
  92. package/src/initService.ts +23 -1
  93. package/src/layouts/history-list/HistoryDiffDialog.vue +0 -10
  94. package/src/layouts/history-list/HistoryListPanel.vue +1 -13
  95. package/src/layouts/history-list/useHistoryRevert.ts +7 -13
  96. package/src/layouts/props-panel/FormPanel.vue +17 -28
  97. package/src/layouts/props-panel/PropsPanel.vue +1 -4
  98. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +1 -1
  99. package/src/layouts/sidebar/code-block/useContentMenu.ts +1 -1
  100. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +1 -1
  101. package/src/layouts/sidebar/data-source/useContentMenu.ts +1 -1
  102. package/src/plugin.ts +32 -33
  103. package/src/theme/code-block.scss +0 -37
  104. package/src/theme/display-conds.scss +4 -0
  105. package/src/theme/event.scss +22 -45
  106. package/src/theme/props-panel.scss +17 -3
  107. package/src/theme/themes/magic-admin/index.scss +12 -1
  108. package/src/type.ts +10 -29
  109. package/src/utils/data-source/index.ts +1 -0
  110. package/src/utils/props.ts +1 -4
  111. package/src/utils/type-match-rules.ts +37 -31
  112. package/types/headless.d.ts +18 -0
  113. package/types/index.d.ts +155 -180
package/dist/style.css CHANGED
@@ -414,6 +414,21 @@ fieldset.m-fieldset .m-form-tip {
414
414
  margin-left: 5px;
415
415
  }
416
416
 
417
+ .m-fields-group-list {
418
+ --m-group-list-footer-padding-top: 12px;
419
+ --m-group-list-footer-padding-bottom: 16px;
420
+ --m-group-list-footer-button-height: 32px;
421
+ --m-group-list-footer-height: calc(
422
+ var(--m-group-list-footer-padding-top) +
423
+ var(--m-group-list-footer-button-height) +
424
+ var(--m-group-list-footer-padding-bottom)
425
+ );
426
+ --m-group-list-footer-bg: var(--el-bg-color, #fff);
427
+ --m-group-list-header-height: 65px;
428
+ --m-group-list-header-bg: #fff;
429
+ width: 100%;
430
+ min-width: 0;
431
+ }
417
432
  .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
418
433
  border: 0;
419
434
  }
@@ -429,22 +444,87 @@ fieldset.m-fieldset .m-form-tip {
429
444
  transform: rotate(90deg);
430
445
  }
431
446
  .m-fields-group-list .m-fields-group-list-item {
447
+ overflow: visible;
432
448
  border-bottom: 1px solid #ebeef5;
433
449
  margin-bottom: 7px;
434
450
  }
435
451
  .m-fields-group-list .m-fields-group-list-item:last-of-type {
436
452
  border-bottom: 0;
437
453
  }
454
+ .m-fields-group-list .m-fields-group-list-item .el-card__body,
455
+ .m-fields-group-list .m-fields-group-list-item .t-card__body {
456
+ overflow: visible;
457
+ }
458
+ .m-fields-group-list .m-fields-group-list-item .el-card__body > .m-container-row,
459
+ .m-fields-group-list .m-fields-group-list-item .t-card__body > .m-container-row {
460
+ overflow: visible;
461
+ }
462
+ .m-fields-group-list .m-fields-group-list-item .el-card__body .tmagic-design-form-item,
463
+ .m-fields-group-list .m-fields-group-list-item .t-card__body .tmagic-design-form-item {
464
+ margin-bottom: 16px;
465
+ }
438
466
  .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
439
467
  display: flex;
440
468
  align-items: center;
441
469
  gap: 8px;
442
470
  }
443
- .m-fields-group-list .m-fields-group-list-footer {
471
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-title {
472
+ flex: 1;
473
+ min-width: 0;
474
+ }
475
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-actions {
476
+ display: flex;
477
+ align-items: center;
478
+ flex-shrink: 0;
479
+ gap: 8px;
480
+ }
481
+ .m-fields-group-list .m-fields-group-list-item > .el-card__header,
482
+ .m-fields-group-list .m-fields-group-list-item > .t-card__header {
483
+ position: sticky;
484
+ top: var(--m-group-list-header-sticky-top, 0px);
485
+ z-index: 7;
486
+ background-color: var(--m-group-list-header-bg, #fff);
487
+ }
488
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
489
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
490
+ top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
491
+ z-index: 6;
492
+ }
493
+ .m-fields-group-list .el-table__empty-block {
494
+ width: 100%;
495
+ min-height: 0;
496
+ }
497
+ .m-fields-group-list .el-table__empty-text {
498
+ display: block;
499
+ box-sizing: border-box;
500
+ width: 100%;
501
+ }
502
+ .m-fields-group-list > .m-fields-group-list-footer {
503
+ display: flex;
444
504
  justify-content: space-between;
445
505
  margin-top: 10px;
446
506
  margin-bottom: 16px;
447
507
  }
508
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
509
+ position: sticky;
510
+ bottom: 0;
511
+ z-index: 7;
512
+ margin-bottom: 0;
513
+ padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
514
+ background-color: var(--m-group-list-footer-bg);
515
+ }
516
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full > div {
517
+ justify-content: stretch;
518
+ }
519
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .el-button,
520
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .tmagic-design-button {
521
+ width: 100%;
522
+ height: var(--m-group-list-footer-button-height);
523
+ }
524
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
525
+ bottom: var(--m-group-list-footer-height);
526
+ z-index: 7;
527
+ }
448
528
 
449
529
  /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
450
530
  .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
@@ -572,7 +652,11 @@ fieldset.m-fieldset .m-form-tip {
572
652
  .m-form-box .el-box__header {
573
653
  margin: 0;
574
654
  }
655
+ .m-form-box .m-box-body {
656
+ min-height: 0;
657
+ }
575
658
  .m-form-box .dialog-footer {
659
+ flex-shrink: 0;
576
660
  display: flex;
577
661
  align-items: center;
578
662
  justify-content: space-between;
@@ -1718,12 +1802,25 @@ fieldset.m-fieldset .m-form-tip {
1718
1802
  .m-editor-props-form-panel-form {
1719
1803
  padding-right: 10px;
1720
1804
  padding-left: 10px;
1721
- }
1722
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
1723
- margin-top: var(--el-tabs-header-height);
1805
+ --m-group-list-header-sticky-top: var(
1806
+ --el-tabs-header-height,
1807
+ var(--td-comp-size-xxl, 48px)
1808
+ );
1809
+ }
1810
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content,
1811
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__content {
1812
+ margin-top: var(--el-tabs-header-height, var(--td-comp-size-xxl, 48px));
1724
1813
  padding-top: 15px;
1814
+ overflow: visible;
1815
+ }
1816
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content > .el-tab-pane,
1817
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content > .t-tab-panel,
1818
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__content > .el-tab-pane,
1819
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__content > .t-tab-panel {
1820
+ overflow: visible;
1725
1821
  }
1726
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
1822
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top,
1823
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__header {
1727
1824
  position: absolute;
1728
1825
  top: 0;
1729
1826
  width: 100%;
@@ -1921,29 +2018,6 @@ fieldset.m-fieldset .m-form-tip {
1921
2018
  .m-fields-code-select {
1922
2019
  width: 100%;
1923
2020
  }
1924
- .m-fields-code-select > .el-card.tmagic-design-card--flat {
1925
- background-color: transparent;
1926
- margin-bottom: 10px;
1927
- }
1928
- .m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body {
1929
- padding-left: 0;
1930
- }
1931
- .m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body .code-select-content > .m-fields-group-list > .tmagic-design-card--flat.el-card {
1932
- padding-left: 16px;
1933
- padding-right: 16px;
1934
- margin-bottom: 10px;
1935
- border: 0 !important;
1936
- }
1937
- .m-fields-code-select .el-card__body .tmagic-design-form-item {
1938
- margin-bottom: 16px;
1939
- }
1940
- .m-fields-code-select .code-select-content > .m-fields-group-list > .tmagic-design-card--flat > .el-card__header {
1941
- padding: 16px 0;
1942
- }
1943
- .m-fields-code-select .create-button.fullWidth {
1944
- width: 100%;
1945
- margin: 0 0 16px 0;
1946
- }
1947
2021
 
1948
2022
  .m-fields-event-select {
1949
2023
  width: 100%;
@@ -1952,37 +2026,34 @@ fieldset.m-fieldset .m-form-tip {
1952
2026
  width: 100%;
1953
2027
  box-sizing: border-box;
1954
2028
  }
1955
- .m-fields-event-select .fullWidth.create-button {
1956
- width: 100%;
1957
- }
1958
2029
  .m-fields-event-select .fullWidth.m-container-ui-event {
1959
2030
  width: calc(100% - 32px);
1960
2031
  }
1961
2032
  .m-fields-event-select .event-select-container {
1962
2033
  padding: 0 16px;
1963
2034
  }
1964
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__header {
2035
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__header,
2036
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__header {
1965
2037
  border-bottom: 1px solid #ebeef5;
1966
2038
  }
1967
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body {
2039
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body,
2040
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body {
1968
2041
  padding-bottom: 16px;
1969
2042
  }
1970
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .m-fields-group-list-footer div {
1971
- justify-content: flex-start !important;
1972
- }
1973
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .el-card__header {
2043
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .el-card__header,
2044
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .t-card__header,
2045
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .t-card.tmagic-design-card--flat > .el-card__header,
2046
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .t-card.tmagic-design-card--flat > .t-card__header,
2047
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .el-card.tmagic-design-card--flat > .el-card__header,
2048
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .el-card.tmagic-design-card--flat > .t-card__header,
2049
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .t-card.tmagic-design-card--flat > .el-card__header,
2050
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .t-card.tmagic-design-card--flat > .t-card__header {
1974
2051
  padding: 16px 0;
1975
2052
  }
1976
2053
  .m-fields-event-select .event-select-code {
1977
2054
  margin-left: 20px;
1978
2055
  width: auto;
1979
2056
  }
1980
- .m-fields-event-select .m-form-panel {
1981
- margin: 10px 0px;
1982
- }
1983
- .m-fields-event-select .el-card.is-always-shadow {
1984
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
1985
- }
1986
2057
 
1987
2058
  .m-fields-code-select-col,
1988
2059
  .m-fields-data-source-method-select {
@@ -2005,10 +2076,6 @@ fieldset.m-fieldset .m-form-tip {
2005
2076
  margin-right: 5px;
2006
2077
  }
2007
2078
 
2008
- .event-select-container {
2009
- padding: 0 16px;
2010
- }
2011
-
2012
2079
  .event-select-header {
2013
2080
  display: flex;
2014
2081
  align-items: center;
@@ -2023,21 +2090,10 @@ fieldset.m-fieldset .m-form-tip {
2023
2090
  }
2024
2091
 
2025
2092
  .event-item-header {
2026
- position: relative;
2027
2093
  width: 100%;
2028
- display: flex;
2029
- align-items: center;
2030
- justify-content: space-between;
2031
2094
  }
2032
- .event-item-header .event-item-title {
2033
- color: #0f1113;
2034
- font-size: 16px;
2035
- font-weight: 500;
2036
- line-height: 24px;
2037
- margin-bottom: 8px;
2038
- }
2039
- .event-item-header .event-item-delete-button {
2040
- color: #0f1113;
2095
+ .event-item-header .tmagic-design-form-item {
2096
+ margin-bottom: 0;
2041
2097
  }
2042
2098
  .event-item-header .el-form-item .el-form-item.is-error {
2043
2099
  margin-bottom: 18px;
@@ -2328,6 +2384,10 @@ fieldset.m-fieldset .m-form-tip {
2328
2384
  padding: 5px 8px;
2329
2385
  }
2330
2386
 
2387
+ .m-fields-display-conds {
2388
+ width: 100%;
2389
+ }
2390
+
2331
2391
  .m-container-text.display-conds-title .tmagic-design-form-item .el-form-item__label {
2332
2392
  color: #111;
2333
2393
  font-weight: 500;
package/dist/themes/magic-admin.css CHANGED
@@ -445,6 +445,21 @@ fieldset.m-fieldset .m-form-tip {
445
445
  margin-left: 5px;
446
446
  }
447
447
 
448
+ .m-fields-group-list {
449
+ --m-group-list-footer-padding-top: 12px;
450
+ --m-group-list-footer-padding-bottom: 16px;
451
+ --m-group-list-footer-button-height: 32px;
452
+ --m-group-list-footer-height: calc(
453
+ var(--m-group-list-footer-padding-top) +
454
+ var(--m-group-list-footer-button-height) +
455
+ var(--m-group-list-footer-padding-bottom)
456
+ );
457
+ --m-group-list-footer-bg: var(--el-bg-color, #fff);
458
+ --m-group-list-header-height: 65px;
459
+ --m-group-list-header-bg: #fff;
460
+ width: 100%;
461
+ min-width: 0;
462
+ }
448
463
  .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
449
464
  border: 0;
450
465
  }
@@ -460,22 +475,87 @@ fieldset.m-fieldset .m-form-tip {
460
475
  transform: rotate(90deg);
461
476
  }
462
477
  .m-fields-group-list .m-fields-group-list-item {
478
+ overflow: visible;
463
479
  border-bottom: 1px solid #ebeef5;
464
480
  margin-bottom: 7px;
465
481
  }
466
482
  .m-fields-group-list .m-fields-group-list-item:last-of-type {
467
483
  border-bottom: 0;
468
484
  }
485
+ .m-fields-group-list .m-fields-group-list-item .el-card__body,
486
+ .m-fields-group-list .m-fields-group-list-item .t-card__body {
487
+ overflow: visible;
488
+ }
489
+ .m-fields-group-list .m-fields-group-list-item .el-card__body > .m-container-row,
490
+ .m-fields-group-list .m-fields-group-list-item .t-card__body > .m-container-row {
491
+ overflow: visible;
492
+ }
493
+ .m-fields-group-list .m-fields-group-list-item .el-card__body .tmagic-design-form-item,
494
+ .m-fields-group-list .m-fields-group-list-item .t-card__body .tmagic-design-form-item {
495
+ margin-bottom: 16px;
496
+ }
469
497
  .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
470
498
  display: flex;
471
499
  align-items: center;
472
500
  gap: 8px;
473
501
  }
474
- .m-fields-group-list .m-fields-group-list-footer {
502
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-title {
503
+ flex: 1;
504
+ min-width: 0;
505
+ }
506
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-actions {
507
+ display: flex;
508
+ align-items: center;
509
+ flex-shrink: 0;
510
+ gap: 8px;
511
+ }
512
+ .m-fields-group-list .m-fields-group-list-item > .el-card__header,
513
+ .m-fields-group-list .m-fields-group-list-item > .t-card__header {
514
+ position: sticky;
515
+ top: var(--m-group-list-header-sticky-top, 0px);
516
+ z-index: 7;
517
+ background-color: var(--m-group-list-header-bg, #fff);
518
+ }
519
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
520
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
521
+ top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
522
+ z-index: 6;
523
+ }
524
+ .m-fields-group-list .el-table__empty-block {
525
+ width: 100%;
526
+ min-height: 0;
527
+ }
528
+ .m-fields-group-list .el-table__empty-text {
529
+ display: block;
530
+ box-sizing: border-box;
531
+ width: 100%;
532
+ }
533
+ .m-fields-group-list > .m-fields-group-list-footer {
534
+ display: flex;
475
535
  justify-content: space-between;
476
536
  margin-top: 10px;
477
537
  margin-bottom: 16px;
478
538
  }
539
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
540
+ position: sticky;
541
+ bottom: 0;
542
+ z-index: 7;
543
+ margin-bottom: 0;
544
+ padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
545
+ background-color: var(--m-group-list-footer-bg);
546
+ }
547
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full > div {
548
+ justify-content: stretch;
549
+ }
550
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .el-button,
551
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .tmagic-design-button {
552
+ width: 100%;
553
+ height: var(--m-group-list-footer-button-height);
554
+ }
555
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
556
+ bottom: var(--m-group-list-footer-height);
557
+ z-index: 7;
558
+ }
479
559
 
480
560
  /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
481
561
  .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
@@ -603,7 +683,11 @@ fieldset.m-fieldset .m-form-tip {
603
683
  .m-form-box .el-box__header {
604
684
  margin: 0;
605
685
  }
686
+ .m-form-box .m-box-body {
687
+ min-height: 0;
688
+ }
606
689
  .m-form-box .dialog-footer {
690
+ flex-shrink: 0;
607
691
  display: flex;
608
692
  align-items: center;
609
693
  justify-content: space-between;
@@ -629,7 +713,8 @@ fieldset.m-fieldset .m-form-tip {
629
713
  .m-form.m-form--magic-admin [class="m-container-fieldset m-form-container"] {
630
714
  margin-top: 15px;
631
715
  }
632
- .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 {
716
+ .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,
717
+ .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) > .t-tabs__content {
633
718
  background-color: #fff;
634
719
  padding: 16px 16px 0 16px;
635
720
  border-radius: 4px;
@@ -666,12 +751,7 @@ fieldset.m-fieldset .m-form-tip {
666
751
  .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 {
667
752
  height: 48px;
668
753
  }
669
- .m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .m-fields-group-list-item-header {
670
- position: relative;
671
- }
672
754
  .m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .m-fields-group-list-item-header .delete-button {
673
- position: absolute;
674
- right: 0;
675
755
  color: #0f1113;
676
756
  }
677
757
  .m-form.m-form--magic-admin .m-form-container .m-form-container-expand {
@@ -1808,12 +1888,25 @@ fieldset.m-fieldset .m-form-tip {
1808
1888
  .m-editor-props-form-panel-form {
1809
1889
  padding-right: 10px;
1810
1890
  padding-left: 10px;
1811
- }
1812
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
1813
- margin-top: var(--el-tabs-header-height);
1891
+ --m-group-list-header-sticky-top: var(
1892
+ --el-tabs-header-height,
1893
+ var(--td-comp-size-xxl, 48px)
1894
+ );
1895
+ }
1896
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content,
1897
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__content {
1898
+ margin-top: var(--el-tabs-header-height, var(--td-comp-size-xxl, 48px));
1814
1899
  padding-top: 15px;
1900
+ overflow: visible;
1901
+ }
1902
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content > .el-tab-pane,
1903
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content > .t-tab-panel,
1904
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__content > .el-tab-pane,
1905
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__content > .t-tab-panel {
1906
+ overflow: visible;
1815
1907
  }
1816
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
1908
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top,
1909
+ .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__header {
1817
1910
  position: absolute;
1818
1911
  top: 0;
1819
1912
  width: 100%;
@@ -2011,29 +2104,6 @@ fieldset.m-fieldset .m-form-tip {
2011
2104
  .m-fields-code-select {
2012
2105
  width: 100%;
2013
2106
  }
2014
- .m-fields-code-select > .el-card.tmagic-design-card--flat {
2015
- background-color: transparent;
2016
- margin-bottom: 10px;
2017
- }
2018
- .m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body {
2019
- padding-left: 0;
2020
- }
2021
- .m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body .code-select-content > .m-fields-group-list > .tmagic-design-card--flat.el-card {
2022
- padding-left: 16px;
2023
- padding-right: 16px;
2024
- margin-bottom: 10px;
2025
- border: 0 !important;
2026
- }
2027
- .m-fields-code-select .el-card__body .tmagic-design-form-item {
2028
- margin-bottom: 16px;
2029
- }
2030
- .m-fields-code-select .code-select-content > .m-fields-group-list > .tmagic-design-card--flat > .el-card__header {
2031
- padding: 16px 0;
2032
- }
2033
- .m-fields-code-select .create-button.fullWidth {
2034
- width: 100%;
2035
- margin: 0 0 16px 0;
2036
- }
2037
2107
 
2038
2108
  .m-fields-event-select {
2039
2109
  width: 100%;
@@ -2042,37 +2112,34 @@ fieldset.m-fieldset .m-form-tip {
2042
2112
  width: 100%;
2043
2113
  box-sizing: border-box;
2044
2114
  }
2045
- .m-fields-event-select .fullWidth.create-button {
2046
- width: 100%;
2047
- }
2048
2115
  .m-fields-event-select .fullWidth.m-container-ui-event {
2049
2116
  width: calc(100% - 32px);
2050
2117
  }
2051
2118
  .m-fields-event-select .event-select-container {
2052
2119
  padding: 0 16px;
2053
2120
  }
2054
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__header {
2121
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__header,
2122
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__header {
2055
2123
  border-bottom: 1px solid #ebeef5;
2056
2124
  }
2057
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body {
2125
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body,
2126
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body {
2058
2127
  padding-bottom: 16px;
2059
2128
  }
2060
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .m-fields-group-list-footer div {
2061
- justify-content: flex-start !important;
2062
- }
2063
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .el-card__header {
2129
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .el-card__header,
2130
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .t-card__header,
2131
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .t-card.tmagic-design-card--flat > .el-card__header,
2132
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .el-card__body .t-card.tmagic-design-card--flat > .t-card__header,
2133
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .el-card.tmagic-design-card--flat > .el-card__header,
2134
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .el-card.tmagic-design-card--flat > .t-card__header,
2135
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .t-card.tmagic-design-card--flat > .el-card__header,
2136
+ .m-fields-event-select .event-select-container > .m-fields-group-list > .m-fields-group-list-item.tmagic-design-card--flat > .t-card__body .t-card.tmagic-design-card--flat > .t-card__header {
2064
2137
  padding: 16px 0;
2065
2138
  }
2066
2139
  .m-fields-event-select .event-select-code {
2067
2140
  margin-left: 20px;
2068
2141
  width: auto;
2069
2142
  }
2070
- .m-fields-event-select .m-form-panel {
2071
- margin: 10px 0px;
2072
- }
2073
- .m-fields-event-select .el-card.is-always-shadow {
2074
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
2075
- }
2076
2143
 
2077
2144
  .m-fields-code-select-col,
2078
2145
  .m-fields-data-source-method-select {
@@ -2095,10 +2162,6 @@ fieldset.m-fieldset .m-form-tip {
2095
2162
  margin-right: 5px;
2096
2163
  }
2097
2164
 
2098
- .event-select-container {
2099
- padding: 0 16px;
2100
- }
2101
-
2102
2165
  .event-select-header {
2103
2166
  display: flex;
2104
2167
  align-items: center;
@@ -2113,21 +2176,10 @@ fieldset.m-fieldset .m-form-tip {
2113
2176
  }
2114
2177
 
2115
2178
  .event-item-header {
2116
- position: relative;
2117
2179
  width: 100%;
2118
- display: flex;
2119
- align-items: center;
2120
- justify-content: space-between;
2121
- }
2122
- .event-item-header .event-item-title {
2123
- color: #0f1113;
2124
- font-size: 16px;
2125
- font-weight: 500;
2126
- line-height: 24px;
2127
- margin-bottom: 8px;
2128
2180
  }
2129
- .event-item-header .event-item-delete-button {
2130
- color: #0f1113;
2181
+ .event-item-header .tmagic-design-form-item {
2182
+ margin-bottom: 0;
2131
2183
  }
2132
2184
  .event-item-header .el-form-item .el-form-item.is-error {
2133
2185
  margin-bottom: 18px;
@@ -2418,6 +2470,10 @@ fieldset.m-fieldset .m-form-tip {
2418
2470
  padding: 5px 8px;
2419
2471
  }
2420
2472
 
2473
+ .m-fields-display-conds {
2474
+ width: 100%;
2475
+ }
2476
+
2421
2477
  .m-container-text.display-conds-title .tmagic-design-form-item .el-form-item__label {
2422
2478
  color: #111;
2423
2479
  font-weight: 500;
@@ -2983,12 +3039,21 @@ fieldset.m-fieldset .m-form-tip {
2983
3039
  line-height: 24px;
2984
3040
  }
2985
3041
 
2986
- .m-editor.m-theme--magic-admin .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
3042
+ .m-editor.m-theme--magic-admin .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content,
3043
+ .m-editor.m-theme--magic-admin .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .t-tabs__content {
2987
3044
  background-color: #fafafa;
2988
3045
  border-radius: 8px;
2989
3046
  padding-left: 16px;
2990
3047
  padding-right: 16px;
2991
3048
  }
3049
+ .m-editor.m-theme--magic-admin .m-fields-group-list-footer.is-sticky-full {
3050
+ --m-group-list-footer-bg: #fafafa;
3051
+ background-color: #fafafa;
3052
+ }
3053
+ .m-editor.m-theme--magic-admin .m-fields-group-list-item .m-fields-group-list-footer.is-sticky-full {
3054
+ --m-group-list-footer-bg: #fff;
3055
+ background-color: #fff;
3056
+ }
2992
3057
 
2993
3058
  .m-editor.m-theme--magic-admin .m-fields-style-setter {
2994
3059
  border: 0;