@tmagic/editor 1.3.0-alpha.1 → 1.3.0-alpha.10

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 +46 -9
  2. package/dist/tmagic-editor.js +1764 -871
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +1780 -882
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +19 -20
  7. package/src/Editor.vue +29 -3
  8. package/src/components/CodeDraftEditor.vue +5 -1
  9. package/src/components/ContentMenu.vue +30 -11
  10. package/src/components/FunctionEditor.vue +12 -5
  11. package/src/components/Icon.vue +5 -1
  12. package/src/components/Resizer.vue +45 -0
  13. package/src/components/ScrollBar.vue +5 -1
  14. package/src/components/ScrollViewer.vue +5 -1
  15. package/src/components/SearchInput.vue +4 -0
  16. package/src/components/{Layout.vue → SplitView.vue} +8 -4
  17. package/src/components/ToolButton.vue +5 -1
  18. package/src/editorProps.ts +5 -1
  19. package/src/fields/Code.vue +5 -1
  20. package/src/fields/CodeLink.vue +9 -3
  21. package/src/fields/CodeSelect.vue +8 -2
  22. package/src/fields/CodeSelectCol.vue +6 -2
  23. package/src/fields/DataSourceFields.vue +5 -1
  24. package/src/fields/DataSourceInput.vue +358 -0
  25. package/src/fields/DataSourceSelect.vue +75 -0
  26. package/src/fields/EventSelect.vue +9 -3
  27. package/src/fields/KeyValue.vue +4 -0
  28. package/src/fields/UISelect.vue +5 -1
  29. package/src/icons/AppManageIcon.vue +5 -1
  30. package/src/icons/CenterIcon.vue +13 -0
  31. package/src/icons/CodeIcon.vue +5 -1
  32. package/src/index.ts +12 -3
  33. package/src/initService.ts +73 -0
  34. package/src/layouts/AddPageBox.vue +5 -1
  35. package/src/layouts/CodeEditor.vue +34 -10
  36. package/src/layouts/Framework.vue +25 -25
  37. package/src/layouts/NavMenu.vue +5 -1
  38. package/src/layouts/PropsPanel.vue +14 -4
  39. package/src/layouts/sidebar/ComponentListPanel.vue +8 -5
  40. package/src/layouts/sidebar/LayerMenu.vue +13 -25
  41. package/src/layouts/sidebar/LayerNode.vue +40 -0
  42. package/src/layouts/sidebar/LayerPanel.vue +70 -27
  43. package/src/layouts/sidebar/Sidebar.vue +11 -7
  44. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +8 -4
  45. package/src/layouts/sidebar/code-block/CodeBlockList.vue +5 -1
  46. package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +4 -0
  47. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +22 -2
  48. package/src/layouts/workspace/Breadcrumb.vue +5 -1
  49. package/src/layouts/workspace/PageBar.vue +5 -1
  50. package/src/layouts/workspace/PageBarScrollContainer.vue +5 -1
  51. package/src/layouts/workspace/Stage.vue +29 -7
  52. package/src/layouts/workspace/ViewerMenu.vue +15 -36
  53. package/src/layouts/workspace/Workspace.vue +9 -134
  54. package/src/services/codeBlock.ts +3 -2
  55. package/src/services/dep.ts +4 -0
  56. package/src/services/keybinding.ts +185 -0
  57. package/src/services/storage.ts +3 -2
  58. package/src/theme/content-menu.scss +1 -1
  59. package/src/theme/data-source-input.scss +18 -0
  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/resizer.scss +25 -10
  64. package/src/theme/stage.scss +4 -0
  65. package/src/theme/theme.scss +1 -0
  66. package/src/type.ts +59 -1
  67. package/src/utils/config.ts +1 -1
  68. package/src/utils/content-menu.ts +92 -0
  69. package/src/utils/dep.ts +7 -1
  70. package/src/utils/keybinding-config.ts +120 -0
  71. package/src/utils/props.ts +34 -0
  72. package/types/Editor.vue.d.ts +7 -1
  73. package/types/components/CodeDraftEditor.vue.d.ts +6 -3
  74. package/types/components/ContentMenu.vue.d.ts +10 -5
  75. package/types/components/FunctionEditor.vue.d.ts +74 -51
  76. package/types/components/Icon.vue.d.ts +2 -2
  77. package/types/{layouts → components}/Resizer.vue.d.ts +2 -2
  78. package/types/components/ScrollBar.vue.d.ts +1 -1
  79. package/types/components/ScrollViewer.vue.d.ts +8 -5
  80. package/types/components/SearchInput.vue.d.ts +1 -1
  81. package/types/components/{Layout.vue.d.ts → SplitView.vue.d.ts} +9 -6
  82. package/types/components/ToolButton.vue.d.ts +8 -5
  83. package/types/editorProps.d.ts +4 -1
  84. package/types/fields/Code.vue.d.ts +1 -1
  85. package/types/fields/CodeLink.vue.d.ts +9 -9
  86. package/types/fields/CodeSelect.vue.d.ts +10 -7
  87. package/types/fields/CodeSelectCol.vue.d.ts +8 -5
  88. package/types/fields/DataSourceFields.vue.d.ts +8 -5
  89. package/types/fields/DataSourceInput.vue.d.ts +54 -0
  90. package/types/fields/DataSourceSelect.vue.d.ts +56 -0
  91. package/types/fields/EventSelect.vue.d.ts +3 -3
  92. package/types/fields/KeyValue.vue.d.ts +8 -5
  93. package/types/fields/UISelect.vue.d.ts +1 -1
  94. package/types/icons/AppManageIcon.vue.d.ts +1 -1
  95. package/types/icons/CenterIcon.vue.d.ts +2 -0
  96. package/types/icons/CodeIcon.vue.d.ts +1 -1
  97. package/types/index.d.ts +6 -2
  98. package/types/initService.d.ts +1 -1
  99. package/types/layouts/AddPageBox.vue.d.ts +1 -1
  100. package/types/layouts/CodeEditor.vue.d.ts +16 -10
  101. package/types/layouts/Framework.vue.d.ts +11 -32
  102. package/types/layouts/NavMenu.vue.d.ts +7 -4
  103. package/types/layouts/PropsPanel.vue.d.ts +276 -4
  104. package/types/layouts/sidebar/ComponentListPanel.vue.d.ts +4 -4
  105. package/types/layouts/sidebar/LayerMenu.vue.d.ts +2 -2
  106. package/types/layouts/sidebar/LayerNode.vue.d.ts +16 -0
  107. package/types/layouts/sidebar/LayerPanel.vue.d.ts +5 -5
  108. package/types/layouts/sidebar/Sidebar.vue.d.ts +18 -15
  109. package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +4 -4
  110. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +7 -7
  111. package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts +1 -1
  112. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +3 -3
  113. package/types/layouts/workspace/Breadcrumb.vue.d.ts +1 -1
  114. package/types/layouts/workspace/PageBar.vue.d.ts +5 -5
  115. package/types/layouts/workspace/PageBarScrollContainer.vue.d.ts +2 -2
  116. package/types/layouts/workspace/Stage.vue.d.ts +2 -2
  117. package/types/layouts/workspace/ViewerMenu.vue.d.ts +7 -4
  118. package/types/layouts/workspace/Workspace.vue.d.ts +9 -9
  119. package/types/services/keybinding.d.ts +20 -0
  120. package/types/type.d.ts +56 -1
  121. package/types/utils/config.d.ts +1 -1
  122. package/types/utils/content-menu.d.ts +7 -0
  123. package/types/utils/keybinding-config.d.ts +3 -0
  124. package/src/layouts/Resizer.vue +0 -32
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;
@@ -371,6 +368,11 @@
371
368
  .magic-editor-layer-panel .cus-tree-node {
372
369
  width: 100%;
373
370
  overflow: hidden;
371
+ display: flex;
372
+ justify-content: space-between;
373
+ }
374
+ .magic-editor-layer-panel .cus-tree-node .layer-node-tool {
375
+ margin-right: 15px;
374
376
  }
375
377
  .magic-editor-layer-panel .cus-tree-node-hover {
376
378
  background-color: #f3f5f9;
@@ -482,15 +484,34 @@
482
484
  width: 8px;
483
485
  margin: 0 -5px;
484
486
  height: 100%;
485
- opacity: 0.9;
487
+ opacity: 0.8;
486
488
  background: padding-box #d8dee8;
487
489
  box-sizing: border-box;
488
490
  cursor: col-resize;
489
491
  z-index: 1;
492
+ position: relative;
490
493
  }
491
494
  .m-editor-resizer:hover {
492
495
  border-color: #d8dee8;
493
496
  }
497
+ .m-editor-resizer:hover .icon-container {
498
+ visibility: visible;
499
+ opacity: 1;
500
+ }
501
+ .m-editor-resizer.m-editor-resizer-draging::after {
502
+ content: "";
503
+ position: absolute;
504
+ width: 600px;
505
+ height: 100%;
506
+ left: 0;
507
+ }
508
+ .m-editor-resizer.m-editor-resizer-draging::before {
509
+ content: "";
510
+ position: absolute;
511
+ width: 600px;
512
+ height: 100%;
513
+ right: 0;
514
+ }
494
515
  .m-editor-resizer .icon-container {
495
516
  visibility: hidden;
496
517
  opacity: 0;
@@ -516,10 +537,6 @@
516
537
  color: #fff;
517
538
  font-size: 18px;
518
539
  }
519
- .magic-editor-resizer:hover .icon-container {
520
- visibility: visible;
521
- opacity: 1;
522
- }
523
540
  .m-editor-workspace {
524
541
  height: 100%;
525
542
  width: 100%;
@@ -618,7 +635,7 @@
618
635
  font-weight: 600;
619
636
  padding: 4px 0px;
620
637
  overflow: auto;
621
- max-height: 100%;
638
+ max-height: 80%;
622
639
  }
623
640
  .magic-editor-content-menu .menu-item {
624
641
  color: #333;
@@ -660,6 +677,9 @@
660
677
  justify-content: center;
661
678
  align-items: center;
662
679
  }
680
+ .m-editor-stage:focus-visible {
681
+ outline: none;
682
+ }
663
683
  .m-editor-stage-container {
664
684
  width: 100%;
665
685
  height: 100%;
@@ -848,6 +868,9 @@
848
868
  display: flex;
849
869
  justify-self: space-between;
850
870
  }
871
+ .m-editor-layout:has(.m-editor-resizer-draging) {
872
+ overflow: hidden;
873
+ }
851
874
  .m-editor-breadcrumb {
852
875
  position: absolute;
853
876
  left: 5px;
@@ -925,6 +948,20 @@
925
948
  justify-content: flex-end;
926
949
  margin-top: 15px;
927
950
  }
951
+ .tmagic-data-source-input-text .el-input__wrapper.tmagic-data-source-input-text-wrapper {
952
+ overflow: hidden;
953
+ padding-right: 30px;
954
+ }
955
+ .tmagic-data-source-input-text .el-input__inner {
956
+ display: flex;
957
+ align-items: center;
958
+ overflow: hidden;
959
+ white-space: nowrap;
960
+ }
961
+ .tmagic-data-source-input-text .tmagic-data-source-input-icon {
962
+ position: absolute;
963
+ right: 7px;
964
+ }
928
965
  .m-fields-key-value-item {
929
966
  display: flex;
930
967
  margin-bottom: 10px;