@tmagic/editor 1.8.0-beta.25 → 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 (111) 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/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js +1 -1
  9. package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js +4 -5
  10. package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js +6 -10
  11. package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +5 -7
  12. package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +1 -4
  13. package/dist/es/fields/DataSourceMocks.vue_vue_type_script_setup_true_lang.js +4 -6
  14. package/dist/es/fields/DataSourceSelect.vue_vue_type_script_setup_true_lang.js +1 -1
  15. package/dist/es/fields/DisplayConds.vue_vue_type_script_setup_true_lang.js +9 -142
  16. package/dist/es/fields/EventSelect.vue_vue_type_script_setup_true_lang.js +51 -326
  17. package/dist/es/fields/KeyValue.vue_vue_type_script_setup_true_lang.js +2 -4
  18. package/dist/es/fields/StyleSetter/components/Border.vue_vue_type_script_setup_true_lang.js +3 -34
  19. package/dist/es/fields/StyleSetter/configs.js +663 -0
  20. package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js +5 -108
  21. package/dist/es/fields/StyleSetter/pro/Border.vue_vue_type_script_setup_true_lang.js +3 -9
  22. package/dist/es/fields/StyleSetter/pro/Font.vue_vue_type_script_setup_true_lang.js +5 -102
  23. package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js +5 -265
  24. package/dist/es/fields/StyleSetter/pro/Position.vue_vue_type_script_setup_true_lang.js +5 -85
  25. package/dist/es/fields/StyleSetter/pro/Transform.vue_vue_type_script_setup_true_lang.js +3 -22
  26. package/dist/es/fields/configs/codeSelect.js +98 -0
  27. package/dist/es/fields/configs/displayConds.js +158 -0
  28. package/dist/es/fields/configs/eventSelect.js +225 -0
  29. package/dist/es/fields/configs/stickyAddButton.js +20 -0
  30. package/dist/es/fields/headless-validation.js +139 -0
  31. package/dist/es/headless.js +2 -0
  32. package/dist/es/hooks/use-compare-form.js +6 -23
  33. package/dist/es/hooks/use-form-context.js +19 -0
  34. package/dist/es/index.js +2 -1
  35. package/dist/es/initService.js +17 -1
  36. package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js +1 -7
  37. package/dist/es/layouts/history-list/HistoryListPanel.vue_vue_type_script_setup_true_lang.js +1 -11
  38. package/dist/es/layouts/history-list/useHistoryRevert.js +3 -11
  39. package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js +10 -23
  40. package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js +3 -13
  41. package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js +1 -1
  42. package/dist/es/layouts/sidebar/code-block/useContentMenu.js +1 -1
  43. package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js +1 -1
  44. package/dist/es/layouts/sidebar/data-source/useContentMenu.js +1 -1
  45. package/dist/es/plugin.js +33 -32
  46. package/dist/es/style.css +116 -60
  47. package/dist/es/utils/data-source/index.js +2 -1
  48. package/dist/es/utils/props.js +1 -4
  49. package/dist/es/utils/type-match-rules.js +2 -2
  50. package/dist/style.css +116 -60
  51. package/dist/themes/magic-admin.css +128 -67
  52. package/dist/tmagic-editor-headless.umd.cjs +10867 -0
  53. package/dist/tmagic-editor.umd.cjs +2123 -2015
  54. package/package.json +12 -7
  55. package/src/Editor.vue +12 -16
  56. package/src/components/CodeParams.vue +10 -4
  57. package/src/components/CompareForm.vue +4 -5
  58. package/src/components/ViewForm.vue +2 -3
  59. package/src/editorProps.ts +1 -2
  60. package/src/fields/Code.vue +2 -10
  61. package/src/fields/CodeSelect.vue +20 -116
  62. package/src/fields/CodeSelectCol.vue +3 -5
  63. package/src/fields/DataSourceFieldSelect/FieldSelect.vue +1 -1
  64. package/src/fields/DataSourceFieldSelect/Index.vue +3 -5
  65. package/src/fields/DataSourceFields.vue +0 -7
  66. package/src/fields/DataSourceMethodSelect.vue +2 -5
  67. package/src/fields/DataSourceMethods.vue +1 -6
  68. package/src/fields/DataSourceMocks.vue +1 -10
  69. package/src/fields/DataSourceSelect.vue +1 -1
  70. package/src/fields/DisplayConds.vue +17 -157
  71. package/src/fields/EventSelect.vue +28 -375
  72. package/src/fields/KeyValue.vue +3 -4
  73. package/src/fields/StyleSetter/components/Border.vue +4 -38
  74. package/src/fields/StyleSetter/configs.ts +690 -0
  75. package/src/fields/StyleSetter/pro/Background.vue +4 -104
  76. package/src/fields/StyleSetter/pro/Border.vue +3 -12
  77. package/src/fields/StyleSetter/pro/Font.vue +4 -123
  78. package/src/fields/StyleSetter/pro/Layout.vue +4 -219
  79. package/src/fields/StyleSetter/pro/Position.vue +6 -110
  80. package/src/fields/StyleSetter/pro/Transform.vue +4 -30
  81. package/src/fields/configs/codeSelect.ts +127 -0
  82. package/src/fields/configs/displayConds.ts +184 -0
  83. package/src/fields/configs/eventSelect.ts +309 -0
  84. package/src/fields/configs/stickyAddButton.ts +31 -0
  85. package/src/fields/headless-validation.ts +177 -0
  86. package/src/headless.ts +33 -0
  87. package/src/hooks/use-compare-form.ts +7 -25
  88. package/src/hooks/use-form-context.ts +40 -0
  89. package/src/index.ts +2 -0
  90. package/src/initService.ts +23 -1
  91. package/src/layouts/history-list/HistoryDiffDialog.vue +0 -10
  92. package/src/layouts/history-list/HistoryListPanel.vue +1 -13
  93. package/src/layouts/history-list/useHistoryRevert.ts +7 -13
  94. package/src/layouts/props-panel/FormPanel.vue +17 -28
  95. package/src/layouts/props-panel/PropsPanel.vue +1 -4
  96. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +1 -1
  97. package/src/layouts/sidebar/code-block/useContentMenu.ts +1 -1
  98. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +1 -1
  99. package/src/layouts/sidebar/data-source/useContentMenu.ts +1 -1
  100. package/src/plugin.ts +32 -33
  101. package/src/theme/code-block.scss +0 -37
  102. package/src/theme/display-conds.scss +4 -0
  103. package/src/theme/event.scss +22 -45
  104. package/src/theme/props-panel.scss +17 -3
  105. package/src/theme/themes/magic-admin/index.scss +12 -1
  106. package/src/type.ts +10 -29
  107. package/src/utils/data-source/index.ts +1 -0
  108. package/src/utils/props.ts +1 -4
  109. package/src/utils/type-match-rules.ts +8 -3
  110. package/types/headless.d.ts +18 -0
  111. package/types/index.d.ts +154 -179
package/dist/es/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 {
@@ -1722,12 +1802,25 @@ fieldset.m-fieldset .m-form-tip {
1722
1802
  .m-editor-props-form-panel-form {
1723
1803
  padding-right: 10px;
1724
1804
  padding-left: 10px;
1725
- }
1726
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
1727
- 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));
1728
1813
  padding-top: 15px;
1814
+ overflow: visible;
1729
1815
  }
1730
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
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;
1821
+ }
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 {
1731
1824
  position: absolute;
1732
1825
  top: 0;
1733
1826
  width: 100%;
@@ -1925,29 +2018,6 @@ fieldset.m-fieldset .m-form-tip {
1925
2018
  .m-fields-code-select {
1926
2019
  width: 100%;
1927
2020
  }
1928
- .m-fields-code-select > .el-card.tmagic-design-card--flat {
1929
- background-color: transparent;
1930
- margin-bottom: 10px;
1931
- }
1932
- .m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body {
1933
- padding-left: 0;
1934
- }
1935
- .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 {
1936
- padding-left: 16px;
1937
- padding-right: 16px;
1938
- margin-bottom: 10px;
1939
- border: 0 !important;
1940
- }
1941
- .m-fields-code-select .el-card__body .tmagic-design-form-item {
1942
- margin-bottom: 16px;
1943
- }
1944
- .m-fields-code-select .code-select-content > .m-fields-group-list > .tmagic-design-card--flat > .el-card__header {
1945
- padding: 16px 0;
1946
- }
1947
- .m-fields-code-select .create-button.fullWidth {
1948
- width: 100%;
1949
- margin: 0 0 16px 0;
1950
- }
1951
2021
 
1952
2022
  .m-fields-event-select {
1953
2023
  width: 100%;
@@ -1956,37 +2026,34 @@ fieldset.m-fieldset .m-form-tip {
1956
2026
  width: 100%;
1957
2027
  box-sizing: border-box;
1958
2028
  }
1959
- .m-fields-event-select .fullWidth.create-button {
1960
- width: 100%;
1961
- }
1962
2029
  .m-fields-event-select .fullWidth.m-container-ui-event {
1963
2030
  width: calc(100% - 32px);
1964
2031
  }
1965
2032
  .m-fields-event-select .event-select-container {
1966
2033
  padding: 0 16px;
1967
2034
  }
1968
- .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 {
1969
2037
  border-bottom: 1px solid #ebeef5;
1970
2038
  }
1971
- .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 {
1972
2041
  padding-bottom: 16px;
1973
2042
  }
1974
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .m-fields-group-list-footer div {
1975
- justify-content: flex-start !important;
1976
- }
1977
- .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 {
1978
2051
  padding: 16px 0;
1979
2052
  }
1980
2053
  .m-fields-event-select .event-select-code {
1981
2054
  margin-left: 20px;
1982
2055
  width: auto;
1983
2056
  }
1984
- .m-fields-event-select .m-form-panel {
1985
- margin: 10px 0px;
1986
- }
1987
- .m-fields-event-select .el-card.is-always-shadow {
1988
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
1989
- }
1990
2057
 
1991
2058
  .m-fields-code-select-col,
1992
2059
  .m-fields-data-source-method-select {
@@ -2009,10 +2076,6 @@ fieldset.m-fieldset .m-form-tip {
2009
2076
  margin-right: 5px;
2010
2077
  }
2011
2078
 
2012
- .event-select-container {
2013
- padding: 0 16px;
2014
- }
2015
-
2016
2079
  .event-select-header {
2017
2080
  display: flex;
2018
2081
  align-items: center;
@@ -2027,21 +2090,10 @@ fieldset.m-fieldset .m-form-tip {
2027
2090
  }
2028
2091
 
2029
2092
  .event-item-header {
2030
- position: relative;
2031
2093
  width: 100%;
2032
- display: flex;
2033
- align-items: center;
2034
- justify-content: space-between;
2035
2094
  }
2036
- .event-item-header .event-item-title {
2037
- color: #0f1113;
2038
- font-size: 16px;
2039
- font-weight: 500;
2040
- line-height: 24px;
2041
- margin-bottom: 8px;
2042
- }
2043
- .event-item-header .event-item-delete-button {
2044
- color: #0f1113;
2095
+ .event-item-header .tmagic-design-form-item {
2096
+ margin-bottom: 0;
2045
2097
  }
2046
2098
  .event-item-header .el-form-item .el-form-item.is-error {
2047
2099
  margin-bottom: 18px;
@@ -2332,6 +2384,10 @@ fieldset.m-fieldset .m-form-tip {
2332
2384
  padding: 5px 8px;
2333
2385
  }
2334
2386
 
2387
+ .m-fields-display-conds {
2388
+ width: 100%;
2389
+ }
2390
+
2335
2391
  .m-container-text.display-conds-title .tmagic-design-form-item .el-form-item__label {
2336
2392
  color: #111;
2337
2393
  font-weight: 500;
package/dist/es/utils/data-source/index.js CHANGED
@@ -28,7 +28,8 @@ var dataSourceFormConfig = {
28
28
  items: [{
29
29
  name: "events",
30
30
  src: "datasource",
31
- type: "event-select"
31
+ type: "event-select",
32
+ defaultValue: []
32
33
  }]
33
34
  },
34
35
  {
package/dist/es/utils/props.js CHANGED
@@ -131,6 +131,7 @@ var eventTabConfig = {
131
131
  src: "component",
132
132
  labelWidth: "100px",
133
133
  type: "event-select",
134
+ defaultValue: [],
134
135
  rules: [{ typeMatch: true }]
135
136
  }]
136
137
  };
@@ -141,7 +142,6 @@ var advancedTabConfig = {
141
142
  name: NODE_DISABLE_CODE_BLOCK_KEY,
142
143
  text: "禁用代码块",
143
144
  type: "switch",
144
- labelPosition: "left",
145
145
  defaultValue: false,
146
146
  extra: "开启后，配置的代码块将不会被执行"
147
147
  },
@@ -149,7 +149,6 @@ var advancedTabConfig = {
149
149
  name: NODE_DISABLE_DATA_SOURCE_KEY,
150
150
  text: "禁用数据源",
151
151
  type: "switch",
152
- labelPosition: "left",
153
152
  defaultValue: false,
154
153
  extra: "开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效"
155
154
  },
@@ -224,8 +223,6 @@ var displayTabConfig = {
224
223
  type: "display-conds",
225
224
  name: NODE_CONDS_KEY,
226
225
  titlePrefix: "条件组",
227
- fixed: "right",
228
- operateColWidth: 112,
229
226
  defaultValue: [],
230
227
  rules: [{ typeMatch: true }]
231
228
  }
package/dist/es/utils/type-match-rules.js CHANGED
@@ -3,10 +3,10 @@ import editor_default from "../services/editor.js";
3
3
  import { getFieldType, resolveFieldByPath } from "./data-source/index.js";
4
4
  import codeBlock_default from "../services/codeBlock.js";
5
5
  import dataSource_default from "../services/dataSource.js";
6
- import { MAX_SUGGESTION_OPTIONS, optionSuggestion, stringifyExampleValue, validateTypeMatch } from "@tmagic/form";
7
- import { appendValidateSuggestion } from "@tmagic/design";
8
6
  import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_SET_DATA_METHOD_NAME, dataSourceTemplateRegExp, getKeysArray, removeDataSourceFieldPrefix } from "@tmagic/utils";
9
7
  import { NodeType } from "@tmagic/core";
8
+ import { appendValidateSuggestion } from "@tmagic/design/headless";
9
+ import { MAX_SUGGESTION_OPTIONS, optionSuggestion, stringifyExampleValue, validateTypeMatch } from "@tmagic/form/headless";
10
10
  //#region packages/editor/src/utils/type-match-rules.ts
11
11
  /** 复用 form 的可选项建议文案；额外过滤 null / 空串，避免业务侧无效枚举污染提示。 */
12
12
  var listSuggestion = (values) => optionSuggestion(values.filter((item) => item !== null && item !== ""));
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 {
@@ -1722,12 +1802,25 @@ fieldset.m-fieldset .m-form-tip {
1722
1802
  .m-editor-props-form-panel-form {
1723
1803
  padding-right: 10px;
1724
1804
  padding-left: 10px;
1725
- }
1726
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
1727
- 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));
1728
1813
  padding-top: 15px;
1814
+ overflow: visible;
1729
1815
  }
1730
- .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
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;
1821
+ }
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 {
1731
1824
  position: absolute;
1732
1825
  top: 0;
1733
1826
  width: 100%;
@@ -1925,29 +2018,6 @@ fieldset.m-fieldset .m-form-tip {
1925
2018
  .m-fields-code-select {
1926
2019
  width: 100%;
1927
2020
  }
1928
- .m-fields-code-select > .el-card.tmagic-design-card--flat {
1929
- background-color: transparent;
1930
- margin-bottom: 10px;
1931
- }
1932
- .m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body {
1933
- padding-left: 0;
1934
- }
1935
- .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 {
1936
- padding-left: 16px;
1937
- padding-right: 16px;
1938
- margin-bottom: 10px;
1939
- border: 0 !important;
1940
- }
1941
- .m-fields-code-select .el-card__body .tmagic-design-form-item {
1942
- margin-bottom: 16px;
1943
- }
1944
- .m-fields-code-select .code-select-content > .m-fields-group-list > .tmagic-design-card--flat > .el-card__header {
1945
- padding: 16px 0;
1946
- }
1947
- .m-fields-code-select .create-button.fullWidth {
1948
- width: 100%;
1949
- margin: 0 0 16px 0;
1950
- }
1951
2021
 
1952
2022
  .m-fields-event-select {
1953
2023
  width: 100%;
@@ -1956,37 +2026,34 @@ fieldset.m-fieldset .m-form-tip {
1956
2026
  width: 100%;
1957
2027
  box-sizing: border-box;
1958
2028
  }
1959
- .m-fields-event-select .fullWidth.create-button {
1960
- width: 100%;
1961
- }
1962
2029
  .m-fields-event-select .fullWidth.m-container-ui-event {
1963
2030
  width: calc(100% - 32px);
1964
2031
  }
1965
2032
  .m-fields-event-select .event-select-container {
1966
2033
  padding: 0 16px;
1967
2034
  }
1968
- .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 {
1969
2037
  border-bottom: 1px solid #ebeef5;
1970
2038
  }
1971
- .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 {
1972
2041
  padding-bottom: 16px;
1973
2042
  }
1974
- .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .m-fields-group-list-footer div {
1975
- justify-content: flex-start !important;
1976
- }
1977
- .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 {
1978
2051
  padding: 16px 0;
1979
2052
  }
1980
2053
  .m-fields-event-select .event-select-code {
1981
2054
  margin-left: 20px;
1982
2055
  width: auto;
1983
2056
  }
1984
- .m-fields-event-select .m-form-panel {
1985
- margin: 10px 0px;
1986
- }
1987
- .m-fields-event-select .el-card.is-always-shadow {
1988
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
1989
- }
1990
2057
 
1991
2058
  .m-fields-code-select-col,
1992
2059
  .m-fields-data-source-method-select {
@@ -2009,10 +2076,6 @@ fieldset.m-fieldset .m-form-tip {
2009
2076
  margin-right: 5px;
2010
2077
  }
2011
2078
 
2012
- .event-select-container {
2013
- padding: 0 16px;
2014
- }
2015
-
2016
2079
  .event-select-header {
2017
2080
  display: flex;
2018
2081
  align-items: center;
@@ -2027,21 +2090,10 @@ fieldset.m-fieldset .m-form-tip {
2027
2090
  }
2028
2091
 
2029
2092
  .event-item-header {
2030
- position: relative;
2031
2093
  width: 100%;
2032
- display: flex;
2033
- align-items: center;
2034
- justify-content: space-between;
2035
2094
  }
2036
- .event-item-header .event-item-title {
2037
- color: #0f1113;
2038
- font-size: 16px;
2039
- font-weight: 500;
2040
- line-height: 24px;
2041
- margin-bottom: 8px;
2042
- }
2043
- .event-item-header .event-item-delete-button {
2044
- color: #0f1113;
2095
+ .event-item-header .tmagic-design-form-item {
2096
+ margin-bottom: 0;
2045
2097
  }
2046
2098
  .event-item-header .el-form-item .el-form-item.is-error {
2047
2099
  margin-bottom: 18px;
@@ -2332,6 +2384,10 @@ fieldset.m-fieldset .m-form-tip {
2332
2384
  padding: 5px 8px;
2333
2385
  }
2334
2386
 
2387
+ .m-fields-display-conds {
2388
+ width: 100%;
2389
+ }
2390
+
2335
2391
  .m-container-text.display-conds-title .tmagic-design-form-item .el-form-item__label {
2336
2392
  color: #111;
2337
2393
  font-weight: 500;