@tmagic/editor 1.3.0-alpha.8 → 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 (124) hide show
  1. package/dist/style.css +82 -218
  2. package/dist/tmagic-editor.js +4985 -3999
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +5013 -4012
  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 +68 -0
  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 +15 -0
  33. package/src/initService.ts +73 -16
  34. package/src/layouts/CodeEditor.vue +62 -10
  35. package/src/layouts/Framework.vue +7 -3
  36. package/src/layouts/PropsPanel.vue +8 -3
  37. package/src/layouts/sidebar/ComponentListPanel.vue +6 -9
  38. package/src/layouts/sidebar/LayerMenu.vue +20 -21
  39. package/src/layouts/sidebar/LayerNode.vue +40 -0
  40. package/src/layouts/sidebar/LayerPanel.vue +14 -5
  41. package/src/layouts/sidebar/Sidebar.vue +22 -36
  42. package/src/layouts/sidebar/code-block/CodeBlockList.vue +81 -119
  43. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +64 -0
  44. package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +27 -47
  45. package/src/layouts/sidebar/data-source/DataSourceList.vue +145 -0
  46. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +58 -69
  47. package/src/layouts/workspace/Stage.vue +13 -5
  48. package/src/layouts/workspace/ViewerMenu.vue +10 -35
  49. package/src/services/codeBlock.ts +18 -71
  50. package/src/services/dataSource.ts +16 -1
  51. package/src/services/dep.ts +23 -20
  52. package/src/services/editor.ts +46 -18
  53. package/src/services/props.ts +2 -2
  54. package/src/theme/code-block.scss +5 -117
  55. package/src/theme/code-editor.scss +27 -2
  56. package/src/theme/content-menu.scss +1 -1
  57. package/src/theme/data-source-methods.scss +13 -0
  58. package/src/theme/data-source.scss +11 -0
  59. package/src/theme/event.scss +15 -12
  60. package/src/theme/framework.scss +0 -3
  61. package/src/theme/layer-panel.scss +6 -0
  62. package/src/theme/layout.scss +4 -0
  63. package/src/theme/sidebar.scss +18 -60
  64. package/src/theme/theme.scss +1 -0
  65. package/src/type.ts +47 -7
  66. package/src/utils/content-menu.ts +92 -0
  67. package/src/utils/data-source/formConfigs/base.ts +28 -30
  68. package/src/utils/data-source/index.ts +65 -2
  69. package/src/utils/dep.ts +39 -7
  70. package/src/utils/index.ts +1 -1
  71. package/src/utils/props.ts +298 -189
  72. package/src/utils/undo-redo.ts +1 -1
  73. package/types/Editor.vue.d.ts +30 -6
  74. package/types/components/CodeBlockEditor.vue.d.ts +23 -0
  75. package/types/components/CodeParams.vue.d.ts +26 -0
  76. package/types/components/ContentMenu.vue.d.ts +2 -2
  77. package/types/components/ToolButton.vue.d.ts +3 -3
  78. package/types/editorProps.d.ts +19 -5
  79. package/types/fields/Code.vue.d.ts +24 -19
  80. package/types/fields/CodeLink.vue.d.ts +12 -21
  81. package/types/fields/CodeSelect.vue.d.ts +6 -17
  82. package/types/fields/CodeSelectCol.vue.d.ts +10 -14
  83. package/types/fields/DataSourceFieldSelect.vue.d.ts +29 -0
  84. package/types/fields/DataSourceFields.vue.d.ts +7 -18
  85. package/types/fields/DataSourceInput.vue.d.ts +10 -30
  86. package/types/fields/DataSourceMethodSelect.vue.d.ts +29 -0
  87. package/types/fields/DataSourceMethods.vue.d.ts +32 -0
  88. package/types/fields/DataSourceSelect.vue.d.ts +40 -0
  89. package/types/fields/EventSelect.vue.d.ts +2 -13
  90. package/types/fields/KeyValue.vue.d.ts +9 -24
  91. package/types/fields/UISelect.vue.d.ts +2 -11
  92. package/types/hooks/index.d.ts +3 -0
  93. package/types/{components/FunctionEditor.vue.d.ts → hooks/use-code-block-edit.d.ts} +31 -119
  94. package/types/hooks/use-data-source-method.d.ts +123 -0
  95. package/types/icons/CenterIcon.vue.d.ts +2 -0
  96. package/types/icons/FolderMinusIcon.vue.d.ts +2 -0
  97. package/types/index.d.ts +7 -0
  98. package/types/initService.d.ts +2 -2
  99. package/types/layouts/CodeEditor.vue.d.ts +10 -4
  100. package/types/layouts/PropsPanel.vue.d.ts +274 -2
  101. package/types/layouts/sidebar/LayerNode.vue.d.ts +16 -0
  102. package/types/layouts/sidebar/Sidebar.vue.d.ts +0 -3
  103. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +4 -9
  104. package/types/layouts/sidebar/code-block/{CodeBlockEditor.vue.d.ts → CodeBlockListPanel.vue.d.ts} +9 -5
  105. package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts +3 -1
  106. package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts +14 -0
  107. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +1 -11
  108. package/types/services/codeBlock.d.ts +6 -37
  109. package/types/services/dataSource.d.ts +7 -1
  110. package/types/services/dep.d.ts +12 -21
  111. package/types/services/editor.d.ts +1 -1
  112. package/types/services/props.d.ts +10 -115
  113. package/types/type.d.ts +42 -7
  114. package/types/utils/content-menu.d.ts +7 -0
  115. package/types/utils/data-source/formConfigs/base.d.ts +1 -2
  116. package/types/utils/data-source/index.d.ts +5 -0
  117. package/types/utils/dep.d.ts +4 -2
  118. package/types/utils/index.d.ts +1 -1
  119. package/types/utils/props.d.ts +13 -102
  120. package/src/components/CodeDraftEditor.vue +0 -148
  121. package/src/components/FunctionEditor.vue +0 -197
  122. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +0 -100
  123. package/types/components/CodeDraftEditor.vue.d.ts +0 -61
  124. /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
- }
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
196
  }
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
  }
@@ -371,6 +286,11 @@
371
286
  .magic-editor-layer-panel .cus-tree-node {
372
287
  width: 100%;
373
288
  overflow: hidden;
289
+ display: flex;
290
+ justify-content: space-between;
291
+ }
292
+ .magic-editor-layer-panel .cus-tree-node .layer-node-tool {
293
+ margin-right: 15px;
374
294
  }
375
295
  .magic-editor-layer-panel .cus-tree-node-hover {
376
296
  background-color: #f3f5f9;
@@ -633,7 +553,7 @@
633
553
  font-weight: 600;
634
554
  padding: 4px 0px;
635
555
  overflow: auto;
636
- max-height: 100%;
556
+ max-height: 80%;
637
557
  }
638
558
  .magic-editor-content-menu .menu-item {
639
559
  color: #333;
@@ -693,9 +613,30 @@
693
613
  .magic-code-editor {
694
614
  width: 100%;
695
615
  }
696
- .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 {
697
632
  margin: 0;
698
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
+ }
699
640
  .magic-editor-icon img {
700
641
  max-width: 100%;
701
642
  max-height: 100%;
@@ -719,113 +660,11 @@
719
660
  .m-fields-code-select .el-card__header {
720
661
  display: none;
721
662
  }
722
- .el-dialog.is-fullscreen.code-editor-dialog {
723
- overflow: hidden;
724
- }
725
- .code-editor-dialog .tmagic-design-card .t-card__header {
726
- display: block;
727
- }
728
- .code-editor-dialog .el-dialog__body,
729
- .code-editor-dialog .t-dialog__body {
730
- height: 90%;
731
- padding-top: 10px;
732
- }
733
- .code-editor-dialog .tmagic-design-card {
734
- height: 100%;
735
- background: #fff;
736
- }
737
- .code-editor-dialog .tmagic-design-card .el-card__body,
738
- .code-editor-dialog .tmagic-design-card .t-card__body {
739
- height: 100%;
740
- background: #fff;
741
- }
742
- .code-editor-dialog .code-editor-layout {
743
- height: 100%;
744
- border: 1px solid #e4e7ed;
745
- }
746
- .code-editor-dialog .code-editor-layout .side-tree {
747
- height: 100%;
748
- overflow: auto;
749
- }
750
- .code-editor-dialog .code-editor-layout .side-tree .el-tree-node__label {
751
- width: 100%;
752
- }
753
- .code-editor-dialog .code-editor-layout .side-tree .list-container {
754
- width: 100%;
755
- overflow: hidden;
756
- margin-left: -10px;
757
- }
758
- .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item {
759
- width: 100%;
760
- margin: 10px 0;
761
- line-height: 30px;
762
- }
763
- .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item .code-name {
764
- width: 100%;
765
- font-size: 14px;
766
- overflow: hidden;
767
- white-space: nowrap;
768
- text-overflow: ellipsis;
769
- }
770
- .code-editor-dialog .code-name-wrapper {
771
- display: flex;
772
- align-items: center;
773
- font-size: 16px;
774
- margin-bottom: 10px;
775
- }
776
- .code-editor-dialog .code-name-wrapper .code-name-label {
777
- margin-right: 10px;
778
- }
779
- .code-editor-dialog .code-name-wrapper .code-name-input {
780
- width: 300px;
781
- }
782
- .code-editor-dialog .m-editor-code-block-editor-panel-list-mode {
783
- height: 100%;
784
- z-index: 10;
785
- background: #fff;
786
- }
787
- .code-editor-dialog .m-editor-code-block-editor-panel-list-mode .el-card {
788
- border: 0;
789
- }
790
- .code-editor-dialog .m-editor-code-block-editor-panel {
791
- position: absolute;
792
- top: 0;
793
- left: 4px;
794
- width: calc(100% - 9px);
795
- height: 100%;
796
- z-index: 10;
797
- background: #fff;
798
- }
799
- .code-editor-dialog .m-editor-code-block-editor-panel .el-card {
800
- border: 0;
801
- }
802
- .code-editor-dialog .m-editor-wrapper {
803
- height: 100%;
804
- }
805
- .code-editor-dialog .m-editor-wrapper.fullScreen {
806
- height: 100%;
807
- width: 100%;
808
- position: fixed;
809
- top: 0;
810
- left: 0;
811
- z-index: 100;
812
- }
813
- .code-editor-dialog .m-editor-wrapper .m-editor-container {
814
- height: calc(100% - 45px);
815
- }
816
- .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
817
- height: 45px;
818
- width: 100%;
819
- display: flex;
820
- justify-content: end;
821
- background: #fff;
822
- position: absolute;
823
- right: 20px;
824
- bottom: 0;
663
+ .m-editor-code-block-editor .tmagic-design-table {
664
+ height: 180px;
825
665
  }
826
- .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
827
- height: 30px;
828
- margin-top: 5px;
666
+ .m-editor-code-block-editor .el-drawer__body {
667
+ padding: 10px 20px;
829
668
  }
830
669
  .m-fields-event-select {
831
670
  width: 100%;
@@ -846,17 +685,21 @@
846
685
  .m-fields-event-select .el-card.is-always-shadow {
847
686
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
848
687
  }
849
- .m-fields-code-select-col {
688
+ .m-fields-code-select-col,
689
+ .m-fields-data-source-method-select {
850
690
  width: 100%;
851
691
  }
852
- .m-fields-code-select-col .code-select-container {
692
+ .code-select-container,
693
+ .data-source-method-select-container {
853
694
  display: flex;
854
695
  align-items: center;
855
696
  }
856
- .m-fields-code-select-col .code-select-container .select {
697
+ .code-select-container .select,
698
+ .data-source-method-select-container .select {
857
699
  flex: 10 0 100px;
858
700
  }
859
- .m-fields-code-select-col .code-select-container .icon {
701
+ .code-select-container .icon,
702
+ .data-source-method-select-container .icon {
860
703
  flex: 1 0 20px;
861
704
  cursor: pointer;
862
705
  margin-right: 5px;
@@ -866,6 +709,9 @@
866
709
  display: flex;
867
710
  justify-self: space-between;
868
711
  }
712
+ .m-editor-layout:has(.m-editor-resizer-draging) {
713
+ overflow: hidden;
714
+ }
869
715
  .m-editor-breadcrumb {
870
716
  position: absolute;
871
717
  left: 5px;
@@ -932,6 +778,13 @@
932
778
  height: 22px;
933
779
  margin-right: 5px;
934
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
+ }
935
788
  .m-editor-data-source-fields {
936
789
  width: 100%;
937
790
  }
@@ -943,6 +796,17 @@
943
796
  justify-content: flex-end;
944
797
  margin-top: 15px;
945
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
+ }
946
810
  .tmagic-data-source-input-text .el-input__wrapper.tmagic-data-source-input-text-wrapper {
947
811
  overflow: hidden;
948
812
  padding-right: 30px;