@tmagic/editor 1.4.0-beta.1 → 1.4.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 (54) hide show
  1. package/dist/style.css +22 -26
  2. package/dist/tmagic-editor.js +977 -798
  3. package/dist/tmagic-editor.umd.cjs +981 -800
  4. package/package.json +11 -11
  5. package/src/components/CodeBlockEditor.vue +75 -101
  6. package/src/components/FloatingBox.vue +58 -38
  7. package/src/components/SplitView.vue +46 -35
  8. package/src/fields/DataSourceFieldSelect.vue +2 -1
  9. package/src/fields/DataSourceFields.vue +55 -30
  10. package/src/fields/DataSourceInput.vue +6 -2
  11. package/src/fields/DataSourceMocks.vue +35 -17
  12. package/src/hooks/index.ts +2 -0
  13. package/src/hooks/use-code-block-edit.ts +1 -1
  14. package/src/hooks/use-editor-content-height.ts +20 -0
  15. package/src/hooks/use-float-box.ts +21 -15
  16. package/src/hooks/use-next-float-box-position.ts +29 -0
  17. package/src/hooks/use-window-rect.ts +20 -0
  18. package/src/layouts/CodeEditor.vue +3 -6
  19. package/src/layouts/Framework.vue +33 -34
  20. package/src/layouts/PropsPanel.vue +37 -0
  21. package/src/layouts/sidebar/Sidebar.vue +17 -15
  22. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +1 -3
  23. package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +36 -22
  24. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +1 -6
  25. package/src/layouts/workspace/viewer/NodeListMenu.vue +1 -0
  26. package/src/layouts/workspace/viewer/StageOverlay.vue +3 -1
  27. package/src/services/stageOverlay.ts +2 -2
  28. package/src/services/ui.ts +6 -0
  29. package/src/theme/code-block.scss +0 -19
  30. package/src/theme/component-list-panel.scss +0 -1
  31. package/src/theme/floating-box.scss +2 -2
  32. package/src/theme/icon.scss +7 -1
  33. package/src/theme/layer-panel.scss +0 -1
  34. package/src/theme/props-panel.scss +14 -0
  35. package/src/theme/sidebar.scss +0 -7
  36. package/src/type.ts +6 -6
  37. package/types/components/CodeBlockEditor.vue.d.ts +39 -25
  38. package/types/components/FloatingBox.vue.d.ts +42 -57
  39. package/types/components/SplitView.vue.d.ts +2 -0
  40. package/types/fields/DataSourceFields.vue.d.ts +84 -28
  41. package/types/fields/DataSourceMocks.vue.d.ts +80 -28
  42. package/types/hooks/index.d.ts +2 -0
  43. package/types/hooks/use-code-block-edit.d.ts +16 -11
  44. package/types/hooks/use-data-source-method.d.ts +16 -11
  45. package/types/hooks/use-editor-content-height.d.ts +3 -0
  46. package/types/hooks/use-next-float-box-position.d.ts +9 -0
  47. package/types/hooks/use-window-rect.d.ts +6 -0
  48. package/types/layouts/sidebar/Sidebar.vue.d.ts +1 -1
  49. package/types/layouts/sidebar/code-block/CodeBlockListPanel.vue.d.ts +1 -3
  50. package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts +34 -22
  51. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +2 -15
  52. package/types/services/stageOverlay.d.ts +1 -1
  53. package/types/services/ui.d.ts +6 -0
  54. package/types/type.d.ts +6 -5
package/dist/style.css CHANGED
@@ -228,9 +228,6 @@
228
228
  width: calc(100% - 40px);
229
229
  overflow: auto;
230
230
  }
231
- .m-editor-sidebar .tmagic-design-scrollbar {
232
- height: 100%;
233
- }
234
231
  .m-editor-sidebar .fold-icon {
235
232
  position: absolute;
236
233
  bottom: 8px;
@@ -245,11 +242,6 @@
245
242
  .m-editor-sidebar .fold-icon:hover {
246
243
  background: rgba(0, 0, 0, 0.2);
247
244
  }
248
- .m-editor-slide-list-box {
249
- display: flex;
250
- min-width: 240px;
251
- min-height: 500px;
252
- }
253
245
  .m-editor-slide-list-box > div:first-child {
254
246
  min-width: 240px;
255
247
  }
@@ -258,7 +250,6 @@
258
250
  }
259
251
  .m-editor-layer-panel {
260
252
  background: #ffffff;
261
- position: relative;
262
253
  }
263
254
  .m-editor-layer-panel .m-editor-tree {
264
255
  padding-top: 48px;
@@ -280,7 +271,6 @@
280
271
  margin-right: 10px;
281
272
  }
282
273
  .ui-component-panel.tmagic-design-collapse {
283
- height: 100%;
284
274
  border-top: 0 !important;
285
275
  margin-top: 48px;
286
276
  background-color: #ffffff;
@@ -512,6 +502,18 @@
512
502
  .m-editor-props-panel {
513
503
  padding: 0 10px;
514
504
  }
505
+ .m-editor-props-panel .m-editor-props-panel-src-icon {
506
+ position: absolute;
507
+ right: 15px;
508
+ bottom: 15px;
509
+ z-index: 30;
510
+ }
511
+ .m-editor-props-panel .magic-code-editor {
512
+ position: absolute;
513
+ left: 0;
514
+ top: 0;
515
+ z-index: 10;
516
+ }
515
517
  .m-editor-props-panel.small .el-form-item__label {
516
518
  font-size: 12px;
517
519
  }
@@ -693,29 +695,23 @@
693
695
  right: 0;
694
696
  z-index: 11;
695
697
  }
696
- .magic-editor-icon img {
698
+ .tmagic-design-icon {
699
+ --color: inherit;
700
+ height: 1em;
701
+ width: 1em;
702
+ position: relative;
703
+ fill: currentColor;
704
+ }
705
+ .tmagic-design-icon img {
697
706
  max-width: 100%;
698
707
  max-height: 100%;
699
708
  }
700
- .m-editor-code-block-list {
701
- height: 100%;
702
- }
703
709
  .m-fields-code-select {
704
710
  width: 100%;
705
711
  }
706
712
  .m-fields-code-select .el-card__header {
707
713
  display: none;
708
714
  }
709
- .m-editor-code-block-editor .tmagic-design-table {
710
- height: 180px;
711
- }
712
- .m-editor-code-block-editor .el-drawer__body {
713
- padding: 10px 20px;
714
- }
715
- .m-editor-code-block-editor.m-form-box {
716
- width: 100%;
717
- min-width: 872px;
718
- }
719
715
  .m-fields-event-select {
720
716
  width: 100%;
721
717
  }
@@ -925,9 +921,9 @@
925
921
  border-bottom: 1px solid #d9dbdd;
926
922
  }
927
923
  .m-editor-float-box .m-editor-float-box-body {
928
- padding: 5px;
929
- flex: 1;
930
924
  overflow: auto;
925
+ flex: 1;
926
+ padding: 0 16px;
931
927
  }
932
928
  .m-editor-floating-box-moveable {
933
929
  opacity: 0;