@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.20

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 (93) hide show
  1. package/dist/style.css +41 -28
  2. package/dist/tmagic-editor.mjs +1641 -1257
  3. package/dist/tmagic-editor.mjs.map +1 -1
  4. package/dist/tmagic-editor.umd.js +1648 -1259
  5. package/dist/tmagic-editor.umd.js.map +1 -1
  6. package/package.json +11 -10
  7. package/src/Editor.vue +48 -30
  8. package/src/components/CodeDraftEditor.vue +145 -0
  9. package/src/components/ContentMenu.vue +4 -4
  10. package/src/components/FunctionEditor.vue +145 -0
  11. package/src/components/Icon.vue +7 -5
  12. package/src/components/Layout.vue +149 -0
  13. package/src/components/ScrollBar.vue +1 -1
  14. package/src/components/ScrollViewer.vue +10 -1
  15. package/src/components/ToolButton.vue +30 -15
  16. package/src/fields/Code.vue +1 -1
  17. package/src/fields/CodeLink.vue +1 -1
  18. package/src/fields/CodeSelect.vue +89 -110
  19. package/src/fields/UISelect.vue +9 -8
  20. package/src/index.ts +1 -0
  21. package/src/layouts/AddPageBox.vue +3 -2
  22. package/src/layouts/CodeEditor.vue +2 -3
  23. package/src/layouts/Framework.vue +62 -40
  24. package/src/layouts/NavMenu.vue +1 -1
  25. package/src/layouts/PropsPanel.vue +11 -13
  26. package/src/layouts/Resizer.vue +1 -1
  27. package/src/layouts/sidebar/ComponentListPanel.vue +15 -13
  28. package/src/layouts/sidebar/LayerMenu.vue +9 -7
  29. package/src/layouts/sidebar/LayerPanel.vue +277 -177
  30. package/src/layouts/sidebar/Sidebar.vue +113 -27
  31. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +34 -85
  32. package/src/layouts/sidebar/code-block/CodeBlockList.vue +55 -89
  33. package/src/layouts/workspace/Breadcrumb.vue +32 -0
  34. package/src/layouts/workspace/PageBar.vue +12 -11
  35. package/src/layouts/workspace/PageBarScrollContainer.vue +1 -1
  36. package/src/layouts/workspace/Stage.vue +26 -9
  37. package/src/layouts/workspace/ViewerMenu.vue +11 -9
  38. package/src/layouts/workspace/Workspace.vue +10 -3
  39. package/src/services/BaseService.ts +1 -1
  40. package/src/services/codeBlock.ts +118 -125
  41. package/src/services/editor.ts +35 -16
  42. package/src/services/history.ts +4 -14
  43. package/src/services/props.ts +1 -1
  44. package/src/theme/breadcrumb.scss +6 -0
  45. package/src/theme/code-block.scss +30 -21
  46. package/src/theme/component-list-panel.scss +3 -7
  47. package/src/theme/layer-panel.scss +7 -2
  48. package/src/theme/theme.scss +1 -0
  49. package/src/type.ts +76 -50
  50. package/src/utils/editor.ts +9 -1
  51. package/src/utils/index.ts +1 -0
  52. package/src/utils/props.ts +2 -2
  53. package/src/utils/scroll-viewer.ts +18 -2
  54. package/src/utils/stage.ts +9 -2
  55. package/types/Editor.vue.d.ts +42 -29
  56. package/types/components/CodeDraftEditor.vue.d.ts +148 -0
  57. package/types/components/ContentMenu.vue.d.ts +1 -3
  58. package/types/components/FunctionEditor.vue.d.ts +120 -0
  59. package/types/components/Icon.vue.d.ts +1 -3
  60. package/types/{layouts → components}/Layout.vue.d.ts +12 -1
  61. package/types/components/ScrollBar.vue.d.ts +1 -3
  62. package/types/components/ScrollViewer.vue.d.ts +45 -1
  63. package/types/components/ToolButton.vue.d.ts +1 -3
  64. package/types/fields/Code.vue.d.ts +1 -3
  65. package/types/fields/CodeLink.vue.d.ts +1 -3
  66. package/types/fields/CodeSelect.vue.d.ts +10 -12
  67. package/types/fields/UISelect.vue.d.ts +1 -3
  68. package/types/index.d.ts +1 -0
  69. package/types/layouts/AddPageBox.vue.d.ts +1 -3
  70. package/types/layouts/CodeEditor.vue.d.ts +6 -15
  71. package/types/layouts/NavMenu.vue.d.ts +1 -3
  72. package/types/layouts/sidebar/LayerMenu.vue.d.ts +25 -9
  73. package/types/layouts/sidebar/LayerPanel.vue.d.ts +38 -886
  74. package/types/layouts/sidebar/Sidebar.vue.d.ts +10 -5
  75. package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +1 -1
  76. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +6 -5
  77. package/types/layouts/{sidebar/TabPane.vue.d.ts → workspace/Breadcrumb.vue.d.ts} +5 -43
  78. package/types/layouts/workspace/Stage.vue.d.ts +25 -8
  79. package/types/layouts/workspace/ViewerMenu.vue.d.ts +6 -3
  80. package/types/layouts/workspace/Workspace.vue.d.ts +23 -5
  81. package/types/services/BaseService.d.ts +1 -1
  82. package/types/services/codeBlock.d.ts +56 -36
  83. package/types/services/editor.d.ts +4 -6
  84. package/types/services/history.d.ts +4 -14
  85. package/types/services/props.d.ts +2 -2
  86. package/types/services/ui.d.ts +1 -1
  87. package/types/type.d.ts +64 -48
  88. package/types/utils/editor.d.ts +1 -0
  89. package/types/utils/index.d.ts +1 -0
  90. package/types/utils/props.d.ts +1 -1
  91. package/types/utils/scroll-viewer.d.ts +5 -0
  92. package/src/layouts/Layout.vue +0 -100
  93. package/src/layouts/sidebar/TabPane.vue +0 -116
package/dist/style.css CHANGED
@@ -265,8 +265,11 @@
265
265
  left: 0;
266
266
  z-index: 1;
267
267
  }
268
- .magic-editor-layer-panel .search-input .el-input__suffix {
269
- padding: 10px 5px;
268
+ .magic-editor-layer-panel .search-input .el-input__prefix {
269
+ padding: 7px;
270
+ }
271
+ .magic-editor-layer-panel .magic-editor-layer-tree {
272
+ padding-top: 48px;
270
273
  }
271
274
  .magic-editor-layer-panel .node-content {
272
275
  flex: 1;
@@ -325,11 +328,11 @@
325
328
  .ui-component-panel {
326
329
  height: 100%;
327
330
  border-top: 0 !important;
328
- margin-top: 50px;
331
+ margin-top: 48px;
329
332
  background-color: #ffffff;
330
333
  }
331
334
  .ui-component-panel .search-input {
332
- background: #f8fbff;
335
+ background: #fff;
333
336
  color: #bbbbbb;
334
337
  padding: 10px;
335
338
  position: absolute;
@@ -339,10 +342,7 @@
339
342
  z-index: 1;
340
343
  }
341
344
  .ui-component-panel .search-input .el-input__prefix {
342
- padding: 10px;
343
- }
344
- .ui-component-panel .search-input .el-input__suffix {
345
- padding: 10px 5px;
345
+ padding: 7px;
346
346
  }
347
347
  .ui-component-panel .el-collapse-item > div:first-of-type {
348
348
  border-bottom: 1px solid #d9dbdd;
@@ -623,6 +623,9 @@
623
623
  .m-editor-code-block-list .el-tree-node__content {
624
624
  height: auto;
625
625
  }
626
+ .m-editor-code-block-list .el-tree-node__label {
627
+ width: 100%;
628
+ }
626
629
  .m-editor-code-block-list .code-header-wrapper {
627
630
  display: flex;
628
631
  align-items: center;
@@ -652,9 +655,7 @@
652
655
  align-items: center;
653
656
  }
654
657
  .m-editor-code-block-list .list-container .list-item .right-tool {
655
- position: absolute;
656
- right: 15px;
657
- padding-left: 5px;
658
+ width: fit-content !important;
658
659
  display: flex;
659
660
  align-items: center;
660
661
  }
@@ -667,7 +668,8 @@
667
668
  white-space: nowrap;
668
669
  text-overflow: ellipsis;
669
670
  padding: 10px 15px;
670
- margin-right: 60px;
671
+ width: 0 !important;
672
+ flex: 1;
671
673
  }
672
674
  .m-editor-code-block-list .list-container .code-comp-map-wrapper {
673
675
  display: flex;
@@ -691,18 +693,8 @@
691
693
  .m-fields-code-select {
692
694
  width: 100%;
693
695
  }
694
- .m-fields-code-select .el-card__body {
695
- padding: 5px;
696
- }
697
- .m-fields-code-select .tool-bar {
698
- display: flex;
699
- align-items: center;
700
- justify-content: end;
701
- height: 20px;
702
- }
703
- .m-fields-code-select .tool-bar .tool-item {
704
- display: flex;
705
- align-items: center;
696
+ .el-dialog.is-fullscreen.code-editor-dialog {
697
+ overflow: hidden;
706
698
  }
707
699
  .code-editor-dialog .el-dialog__body {
708
700
  height: 90%;
@@ -713,7 +705,7 @@
713
705
  background: #fff;
714
706
  }
715
707
  .code-editor-dialog .el-card .el-card__body {
716
- height: calc(100% - 80px);
708
+ height: 100%;
717
709
  background: #fff;
718
710
  }
719
711
  .code-editor-dialog .code-editor-layout {
@@ -724,6 +716,9 @@
724
716
  height: 100%;
725
717
  overflow: auto;
726
718
  }
719
+ .code-editor-dialog .code-editor-layout .side-tree .el-tree-node__label {
720
+ width: 100%;
721
+ }
727
722
  .code-editor-dialog .code-editor-layout .side-tree .list-container {
728
723
  width: 100%;
729
724
  overflow: hidden;
@@ -745,6 +740,7 @@
745
740
  display: flex;
746
741
  align-items: center;
747
742
  font-size: 16px;
743
+ margin-bottom: 10px;
748
744
  }
749
745
  .code-editor-dialog .code-name-wrapper .code-name-label {
750
746
  margin-right: 10px;
@@ -775,22 +771,39 @@
775
771
  .code-editor-dialog .m-editor-wrapper {
776
772
  height: 100%;
777
773
  }
774
+ .code-editor-dialog .m-editor-wrapper.fullScreen {
775
+ height: 100%;
776
+ width: 100%;
777
+ position: fixed;
778
+ top: 0;
779
+ left: 0;
780
+ z-index: 100;
781
+ }
778
782
  .code-editor-dialog .m-editor-wrapper .m-editor-container {
779
- height: calc(100% - 70px);
783
+ height: calc(100% - 45px);
780
784
  }
781
785
  .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
782
- height: 40px;
786
+ height: 45px;
783
787
  width: 100%;
784
788
  display: flex;
785
789
  justify-content: end;
786
790
  background: #fff;
791
+ position: absolute;
792
+ right: 20px;
793
+ bottom: 0;
787
794
  }
788
795
  .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
789
796
  height: 30px;
790
- margin-top: 15px;
797
+ margin-top: 5px;
791
798
  }
792
799
  .m-editor-layout {
793
800
  width: 100%;
794
801
  display: flex;
795
802
  justify-self: space-between;
803
+ }
804
+ .m-editor-breadcrumb {
805
+ position: absolute;
806
+ left: 5px;
807
+ top: 5px;
808
+ z-index: 10;
796
809
  }