@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.0

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 (121) hide show
  1. package/dist/style.css +77 -218
  2. package/dist/tmagic-editor.js +4143 -3302
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +5289 -4434
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +15 -15
  7. package/src/Editor.vue +4 -5
  8. package/src/components/CodeBlockEditor.vue +257 -0
  9. package/src/components/CodeParams.vue +60 -0
  10. package/src/components/ContentMenu.vue +11 -3
  11. package/src/editorProps.ts +30 -5
  12. package/src/fields/Code.vue +23 -19
  13. package/src/fields/CodeLink.vue +6 -7
  14. package/src/fields/CodeSelect.vue +12 -9
  15. package/src/fields/CodeSelectCol.vue +70 -81
  16. package/src/fields/DataSourceFieldSelect.vue +47 -0
  17. package/src/fields/DataSourceFields.vue +28 -22
  18. package/src/fields/DataSourceInput.vue +21 -58
  19. package/src/fields/DataSourceMethodSelect.vue +136 -0
  20. package/src/fields/DataSourceMethods.vue +103 -0
  21. package/src/fields/DataSourceSelect.vue +5 -12
  22. package/src/fields/EventSelect.vue +53 -19
  23. package/src/fields/KeyValue.vue +9 -11
  24. package/src/fields/UISelect.vue +54 -14
  25. package/src/hooks/index.ts +21 -0
  26. package/src/hooks/use-code-block-edit.ts +84 -0
  27. package/src/hooks/use-data-source-method.ts +100 -0
  28. package/src/{utils/stage.ts → hooks/use-stage.ts} +4 -7
  29. package/src/icons/CenterIcon.vue +13 -0
  30. package/src/icons/CodeIcon.vue +0 -2
  31. package/src/icons/FolderMinusIcon.vue +22 -0
  32. package/src/index.ts +12 -0
  33. package/src/initService.ts +69 -16
  34. package/src/layouts/CodeEditor.vue +35 -3
  35. package/src/layouts/Framework.vue +7 -3
  36. package/src/layouts/PropsPanel.vue +8 -3
  37. package/src/layouts/sidebar/ComponentListPanel.vue +4 -6
  38. package/src/layouts/sidebar/LayerMenu.vue +20 -21
  39. package/src/layouts/sidebar/LayerPanel.vue +12 -2
  40. package/src/layouts/sidebar/Sidebar.vue +22 -36
  41. package/src/layouts/sidebar/code-block/CodeBlockList.vue +81 -119
  42. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +64 -0
  43. package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +27 -47
  44. package/src/layouts/sidebar/data-source/DataSourceList.vue +145 -0
  45. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +58 -85
  46. package/src/layouts/workspace/Stage.vue +3 -2
  47. package/src/layouts/workspace/ViewerMenu.vue +10 -35
  48. package/src/services/codeBlock.ts +18 -71
  49. package/src/services/dataSource.ts +16 -1
  50. package/src/services/dep.ts +22 -20
  51. package/src/services/editor.ts +46 -18
  52. package/src/services/props.ts +2 -2
  53. package/src/theme/code-block.scss +5 -117
  54. package/src/theme/code-editor.scss +27 -2
  55. package/src/theme/content-menu.scss +1 -1
  56. package/src/theme/data-source-methods.scss +13 -0
  57. package/src/theme/data-source.scss +11 -0
  58. package/src/theme/event.scss +15 -12
  59. package/src/theme/framework.scss +0 -3
  60. package/src/theme/layout.scss +4 -0
  61. package/src/theme/sidebar.scss +18 -60
  62. package/src/theme/theme.scss +1 -0
  63. package/src/type.ts +47 -7
  64. package/src/utils/content-menu.ts +92 -0
  65. package/src/utils/data-source/formConfigs/base.ts +28 -30
  66. package/src/utils/data-source/index.ts +65 -2
  67. package/src/utils/dep.ts +33 -7
  68. package/src/utils/index.ts +1 -1
  69. package/src/utils/props.ts +298 -189
  70. package/src/utils/undo-redo.ts +1 -1
  71. package/types/Editor.vue.d.ts +30 -6
  72. package/types/components/CodeBlockEditor.vue.d.ts +23 -0
  73. package/types/components/CodeParams.vue.d.ts +26 -0
  74. package/types/components/ContentMenu.vue.d.ts +2 -2
  75. package/types/components/ToolButton.vue.d.ts +3 -3
  76. package/types/editorProps.d.ts +19 -5
  77. package/types/fields/Code.vue.d.ts +24 -19
  78. package/types/fields/CodeLink.vue.d.ts +12 -21
  79. package/types/fields/CodeSelect.vue.d.ts +6 -17
  80. package/types/fields/CodeSelectCol.vue.d.ts +10 -14
  81. package/types/fields/DataSourceFieldSelect.vue.d.ts +29 -0
  82. package/types/fields/DataSourceFields.vue.d.ts +7 -18
  83. package/types/fields/DataSourceInput.vue.d.ts +10 -30
  84. package/types/fields/DataSourceMethodSelect.vue.d.ts +29 -0
  85. package/types/fields/DataSourceMethods.vue.d.ts +32 -0
  86. package/types/fields/DataSourceSelect.vue.d.ts +13 -29
  87. package/types/fields/EventSelect.vue.d.ts +2 -13
  88. package/types/fields/KeyValue.vue.d.ts +9 -24
  89. package/types/fields/UISelect.vue.d.ts +2 -11
  90. package/types/hooks/index.d.ts +3 -0
  91. package/types/{components/FunctionEditor.vue.d.ts → hooks/use-code-block-edit.d.ts} +31 -121
  92. package/types/hooks/use-data-source-method.d.ts +123 -0
  93. package/types/icons/CenterIcon.vue.d.ts +2 -0
  94. package/types/icons/FolderMinusIcon.vue.d.ts +2 -0
  95. package/types/index.d.ts +6 -0
  96. package/types/initService.d.ts +2 -2
  97. package/types/layouts/CodeEditor.vue.d.ts +7 -4
  98. package/types/layouts/PropsPanel.vue.d.ts +274 -2
  99. package/types/layouts/sidebar/Sidebar.vue.d.ts +0 -3
  100. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +4 -9
  101. package/types/layouts/sidebar/code-block/{CodeBlockEditor.vue.d.ts → CodeBlockListPanel.vue.d.ts} +9 -5
  102. package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts +3 -1
  103. package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts +14 -0
  104. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +1 -11
  105. package/types/services/codeBlock.d.ts +6 -37
  106. package/types/services/dataSource.d.ts +7 -1
  107. package/types/services/dep.d.ts +12 -21
  108. package/types/services/editor.d.ts +1 -1
  109. package/types/services/props.d.ts +10 -115
  110. package/types/type.d.ts +42 -7
  111. package/types/utils/content-menu.d.ts +7 -0
  112. package/types/utils/data-source/formConfigs/base.d.ts +1 -2
  113. package/types/utils/data-source/index.d.ts +5 -0
  114. package/types/utils/dep.d.ts +4 -2
  115. package/types/utils/index.d.ts +1 -1
  116. package/types/utils/props.d.ts +13 -102
  117. package/src/components/CodeDraftEditor.vue +0 -148
  118. package/src/components/FunctionEditor.vue +0 -197
  119. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +0 -100
  120. package/types/components/CodeDraftEditor.vue.d.ts +0 -61
  121. /package/types/{utils/stage.d.ts → hooks/use-stage.d.ts} +0 -0
package/dist/style.css CHANGED
@@ -134,10 +134,7 @@
134
134
  width: 100%;
135
135
  }
136
136
  .m-editor-content {
137
- width: 100%;
138
137
  height: calc(100% - 35px);
139
- display: flex;
140
- justify-self: space-between;
141
138
  }
142
139
  .m-editor-framework-center {
143
140
  position: relative;
@@ -188,133 +185,55 @@
188
185
  border-color: #2882e0;
189
186
  color: #2882e0;
190
187
  }
191
- .m-editor-sidebar.tmagic-design-tabs {
188
+ .m-editor-sidebar {
189
+ display: flex;
192
190
  height: 100%;
193
191
  }
194
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header,
195
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header {
192
+ .m-editor-sidebar .m-editor-sidebar-header {
196
193
  background: #2882e0;
197
- border: 0;
198
194
  height: 100%;
199
- }
200
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card,
201
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card {
202
- background-color: transparent;
203
- }
204
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover,
205
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover {
206
- background-color: transparent;
207
- }
208
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header.is-left, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header.t-is-left,
209
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header.is-left,
210
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header.t-is-left {
211
195
  width: 40px;
212
- margin-right: 0;
213
- }
214
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav-wrap,
215
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav-wrap {
216
- margin: 0;
217
196
  }
218
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav,
219
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav {
220
- border: 0;
221
- border-radius: 0;
222
- }
223
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .tab-label,
224
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .tab-label {
225
- margin-left: 2px;
226
- }
227
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left,
228
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
229
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left,
230
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
197
+ .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item {
231
198
  line-height: 15px;
232
- border: 0;
233
199
  height: auto;
234
200
  padding: 8px;
235
201
  color: white;
236
202
  box-sizing: border-box;
203
+ cursor: pointer;
237
204
  }
238
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
239
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active,
240
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active,
241
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active,
242
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active,
243
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active,
244
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active,
245
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active,
246
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
247
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active,
248
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active,
249
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active,
250
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active {
205
+ .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active {
251
206
  background: #ffffff;
252
- border: 0;
253
- }
254
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
255
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active i,
256
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
257
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
258
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i,
259
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active i,
260
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active i,
261
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active i,
262
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
263
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active i,
264
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
265
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
266
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i {
267
- color: #353140;
268
207
  }
269
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
270
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
271
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
272
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
273
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title,
274
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title,
275
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title,
276
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title,
277
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
278
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
279
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
280
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
281
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title {
208
+ .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active i {
282
209
  color: #353140;
283
210
  }
284
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left:first-child, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
285
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left:first-child,
286
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left:first-child,
287
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left:first-child,
288
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
289
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left:first-child,
290
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left:first-child {
291
- border-right: 0;
292
- }
293
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
294
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
295
- padding: 7px;
211
+ .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active .magic-editor-tab-panel-title {
212
+ color: #353140;
296
213
  }
297
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header i,
298
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header i {
214
+ .m-editor-sidebar .m-editor-sidebar-header i {
299
215
  font-size: 25px;
300
216
  color: rgba(255, 255, 255, 0.6);
301
217
  }
302
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header i:hover,
303
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header i:hover {
218
+ .m-editor-sidebar .m-editor-sidebar-header i:hover {
304
219
  color: white;
305
220
  }
306
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .magic-editor-tab-panel-title,
307
- .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .magic-editor-tab-panel-title {
221
+ .m-editor-sidebar .m-editor-sidebar-header .magic-editor-tab-panel-title {
308
222
  font-size: 12px;
309
223
  white-space: normal;
310
224
  }
311
- .m-editor-sidebar.tmagic-design-tabs .el-scrollbar {
225
+ .m-editor-sidebar .m-editor-sidebar-content {
226
+ height: 100%;
227
+ width: calc(100% - 40px);
228
+ overflow: auto;
229
+ }
230
+ .m-editor-sidebar .el-scrollbar {
312
231
  height: 100%;
313
232
  }
314
- .m-editor-sidebar.tmagic-design-tabs .el-tree {
233
+ .m-editor-sidebar .el-tree {
315
234
  min-height: 100%;
316
235
  }
317
- .m-editor-sidebar.tmagic-design-tabs .fold-icon {
236
+ .m-editor-sidebar .fold-icon {
318
237
  position: absolute;
319
238
  bottom: 8px;
320
239
  left: 0px;
@@ -325,13 +244,9 @@
325
244
  opacity: 0.8;
326
245
  cursor: pointer;
327
246
  }
328
- .m-editor-sidebar.tmagic-design-tabs .fold-icon:hover {
247
+ .m-editor-sidebar .fold-icon:hover {
329
248
  background: rgba(0, 0, 0, 0.2);
330
249
  }
331
- .m-editor-sidebar.tmagic-design-tabs .el-tabs__content,
332
- .m-editor-sidebar.tmagic-design-tabs .el-tab-pane {
333
- height: 100%;
334
- }
335
250
  .magic-editor-layer-panel {
336
251
  background: #ffffff;
337
252
  }
@@ -638,7 +553,7 @@
638
553
  font-weight: 600;
639
554
  padding: 4px 0px;
640
555
  overflow: auto;
641
- max-height: 100%;
556
+ max-height: 80%;
642
557
  }
643
558
  .magic-editor-content-menu .menu-item {
644
559
  color: #333;
@@ -698,9 +613,30 @@
698
613
  .magic-code-editor {
699
614
  width: 100%;
700
615
  }
701
- .magic-code-editor .margin {
616
+ .magic-code-editor-wrapper {
617
+ width: 100%;
618
+ height: 100%;
619
+ position: relative;
620
+ }
621
+ .magic-code-editor-wrapper.full-screen {
622
+ position: fixed;
623
+ z-index: 10000;
624
+ top: 0;
625
+ left: 0;
626
+ }
627
+ .magic-code-editor-wrapper .magic-code-editor-content {
628
+ width: 100%;
629
+ height: 100%;
630
+ }
631
+ .magic-code-editor-wrapper .magic-code-editor-content .margin {
702
632
  margin: 0;
703
633
  }
634
+ .magic-code-editor-wrapper .magic-code-editor-full-screen-icon {
635
+ position: absolute;
636
+ top: 5px;
637
+ right: 0;
638
+ z-index: 11;
639
+ }
704
640
  .magic-editor-icon img {
705
641
  max-width: 100%;
706
642
  max-height: 100%;
@@ -724,113 +660,11 @@
724
660
  .m-fields-code-select .el-card__header {
725
661
  display: none;
726
662
  }
727
- .el-dialog.is-fullscreen.code-editor-dialog {
728
- overflow: hidden;
729
- }
730
- .code-editor-dialog .tmagic-design-card .t-card__header {
731
- display: block;
732
- }
733
- .code-editor-dialog .el-dialog__body,
734
- .code-editor-dialog .t-dialog__body {
735
- height: 90%;
736
- padding-top: 10px;
737
- }
738
- .code-editor-dialog .tmagic-design-card {
739
- height: 100%;
740
- background: #fff;
741
- }
742
- .code-editor-dialog .tmagic-design-card .el-card__body,
743
- .code-editor-dialog .tmagic-design-card .t-card__body {
744
- height: 100%;
745
- background: #fff;
746
- }
747
- .code-editor-dialog .code-editor-layout {
748
- height: 100%;
749
- border: 1px solid #e4e7ed;
750
- }
751
- .code-editor-dialog .code-editor-layout .side-tree {
752
- height: 100%;
753
- overflow: auto;
754
- }
755
- .code-editor-dialog .code-editor-layout .side-tree .el-tree-node__label {
756
- width: 100%;
757
- }
758
- .code-editor-dialog .code-editor-layout .side-tree .list-container {
759
- width: 100%;
760
- overflow: hidden;
761
- margin-left: -10px;
762
- }
763
- .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item {
764
- width: 100%;
765
- margin: 10px 0;
766
- line-height: 30px;
767
- }
768
- .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item .code-name {
769
- width: 100%;
770
- font-size: 14px;
771
- overflow: hidden;
772
- white-space: nowrap;
773
- text-overflow: ellipsis;
774
- }
775
- .code-editor-dialog .code-name-wrapper {
776
- display: flex;
777
- align-items: center;
778
- font-size: 16px;
779
- margin-bottom: 10px;
780
- }
781
- .code-editor-dialog .code-name-wrapper .code-name-label {
782
- margin-right: 10px;
783
- }
784
- .code-editor-dialog .code-name-wrapper .code-name-input {
785
- width: 300px;
786
- }
787
- .code-editor-dialog .m-editor-code-block-editor-panel-list-mode {
788
- height: 100%;
789
- z-index: 10;
790
- background: #fff;
791
- }
792
- .code-editor-dialog .m-editor-code-block-editor-panel-list-mode .el-card {
793
- border: 0;
794
- }
795
- .code-editor-dialog .m-editor-code-block-editor-panel {
796
- position: absolute;
797
- top: 0;
798
- left: 4px;
799
- width: calc(100% - 9px);
800
- height: 100%;
801
- z-index: 10;
802
- background: #fff;
803
- }
804
- .code-editor-dialog .m-editor-code-block-editor-panel .el-card {
805
- border: 0;
806
- }
807
- .code-editor-dialog .m-editor-wrapper {
808
- height: 100%;
809
- }
810
- .code-editor-dialog .m-editor-wrapper.fullScreen {
811
- height: 100%;
812
- width: 100%;
813
- position: fixed;
814
- top: 0;
815
- left: 0;
816
- z-index: 100;
817
- }
818
- .code-editor-dialog .m-editor-wrapper .m-editor-container {
819
- height: calc(100% - 45px);
820
- }
821
- .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
822
- height: 45px;
823
- width: 100%;
824
- display: flex;
825
- justify-content: end;
826
- background: #fff;
827
- position: absolute;
828
- right: 20px;
829
- bottom: 0;
663
+ .m-editor-code-block-editor .tmagic-design-table {
664
+ height: 180px;
830
665
  }
831
- .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
832
- height: 30px;
833
- margin-top: 5px;
666
+ .m-editor-code-block-editor .el-drawer__body {
667
+ padding: 10px 20px;
834
668
  }
835
669
  .m-fields-event-select {
836
670
  width: 100%;
@@ -851,17 +685,21 @@
851
685
  .m-fields-event-select .el-card.is-always-shadow {
852
686
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
853
687
  }
854
- .m-fields-code-select-col {
688
+ .m-fields-code-select-col,
689
+ .m-fields-data-source-method-select {
855
690
  width: 100%;
856
691
  }
857
- .m-fields-code-select-col .code-select-container {
692
+ .code-select-container,
693
+ .data-source-method-select-container {
858
694
  display: flex;
859
695
  align-items: center;
860
696
  }
861
- .m-fields-code-select-col .code-select-container .select {
697
+ .code-select-container .select,
698
+ .data-source-method-select-container .select {
862
699
  flex: 10 0 100px;
863
700
  }
864
- .m-fields-code-select-col .code-select-container .icon {
701
+ .code-select-container .icon,
702
+ .data-source-method-select-container .icon {
865
703
  flex: 1 0 20px;
866
704
  cursor: pointer;
867
705
  margin-right: 5px;
@@ -871,6 +709,9 @@
871
709
  display: flex;
872
710
  justify-self: space-between;
873
711
  }
712
+ .m-editor-layout:has(.m-editor-resizer-draging) {
713
+ overflow: hidden;
714
+ }
874
715
  .m-editor-breadcrumb {
875
716
  position: absolute;
876
717
  left: 5px;
@@ -937,6 +778,13 @@
937
778
  height: 22px;
938
779
  margin-right: 5px;
939
780
  }
781
+ .data-source-list-panel-add-menu .tmagic-design-button {
782
+ width: 100%;
783
+ text-align: left;
784
+ }
785
+ .data-source-list-panel-add-menu .tmagic-design-button span {
786
+ width: 100%;
787
+ }
940
788
  .m-editor-data-source-fields {
941
789
  width: 100%;
942
790
  }
@@ -948,6 +796,17 @@
948
796
  justify-content: flex-end;
949
797
  margin-top: 15px;
950
798
  }
799
+ .m-editor-data-source-methods {
800
+ width: 100%;
801
+ }
802
+ .m-editor-data-source-methods .tmagic-design-table {
803
+ width: 100%;
804
+ }
805
+ .m-editor-data-source-methods .m-editor-data-source-methods-footer {
806
+ display: flex;
807
+ justify-content: flex-end;
808
+ margin-top: 15px;
809
+ }
951
810
  .tmagic-data-source-input-text .el-input__wrapper.tmagic-data-source-input-text-wrapper {
952
811
  overflow: hidden;
953
812
  padding-right: 30px;