@tmagic/editor 1.3.5 → 1.3.6

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 (103) hide show
  1. package/dist/style.css +73 -51
  2. package/dist/tmagic-editor.js +1171 -1102
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +1188 -1119
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +17 -17
  7. package/src/Editor.vue +5 -0
  8. package/src/components/FloatingBox.vue +117 -0
  9. package/src/components/Tree.vue +5 -0
  10. package/src/components/TreeNode.vue +8 -2
  11. package/src/editorProps.ts +7 -0
  12. package/src/hooks/use-filter.ts +55 -0
  13. package/src/hooks/use-node-status.ts +48 -0
  14. package/src/hooks/use-stage.ts +1 -0
  15. package/src/initService.ts +28 -12
  16. package/src/layouts/sidebar/Sidebar.vue +7 -2
  17. package/src/layouts/sidebar/code-block/CodeBlockList.vue +55 -65
  18. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +2 -1
  19. package/src/layouts/sidebar/data-source/DataSourceList.vue +63 -59
  20. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +1 -1
  21. package/src/layouts/sidebar/layer/LayerPanel.vue +24 -7
  22. package/src/layouts/sidebar/layer/use-node-status.ts +8 -11
  23. package/src/layouts/workspace/viewer/NodeListMenu.vue +67 -128
  24. package/src/layouts/workspace/viewer/Stage.vue +2 -1
  25. package/src/layouts/workspace/viewer/ViewerMenu.vue +1 -6
  26. package/src/services/BaseService.ts +63 -26
  27. package/src/services/codeBlock.ts +7 -1
  28. package/src/services/dep.ts +12 -8
  29. package/src/services/editor.ts +66 -30
  30. package/src/services/props.ts +70 -12
  31. package/src/services/storage.ts +23 -13
  32. package/src/services/ui.ts +4 -1
  33. package/src/theme/floating-box.scss +30 -0
  34. package/src/theme/layer-panel.scss +19 -0
  35. package/src/theme/stage.scss +24 -0
  36. package/src/theme/theme.scss +1 -1
  37. package/src/theme/tree.scss +12 -1
  38. package/src/type.ts +6 -3
  39. package/src/utils/compose.ts +25 -6
  40. package/src/utils/content-menu.ts +4 -5
  41. package/src/utils/editor.ts +12 -3
  42. package/src/utils/operator.ts +1 -2
  43. package/types/components/CodeBlockEditor.vue.d.ts +6 -2
  44. package/types/components/CodeParams.vue.d.ts +3 -1
  45. package/types/components/ContentMenu.vue.d.ts +13 -5
  46. package/types/components/FloatingBox.vue.d.ts +78 -0
  47. package/types/components/Resizer.vue.d.ts +6 -1
  48. package/types/components/ScrollBar.vue.d.ts +3 -1
  49. package/types/components/ScrollViewer.vue.d.ts +3 -3
  50. package/types/components/SearchInput.vue.d.ts +3 -1
  51. package/types/components/SplitView.vue.d.ts +8 -4
  52. package/types/components/ToolButton.vue.d.ts +1 -1
  53. package/types/components/Tree.vue.d.ts +27 -8
  54. package/types/components/TreeNode.vue.d.ts +24 -7
  55. package/types/editorProps.d.ts +7 -1
  56. package/types/fields/Code.vue.d.ts +6 -2
  57. package/types/fields/CodeLink.vue.d.ts +5 -3
  58. package/types/fields/CodeSelect.vue.d.ts +3 -1
  59. package/types/fields/CodeSelectCol.vue.d.ts +3 -1
  60. package/types/fields/DataSourceFieldSelect.vue.d.ts +3 -1
  61. package/types/fields/DataSourceFields.vue.d.ts +5 -3
  62. package/types/fields/DataSourceInput.vue.d.ts +8 -4
  63. package/types/fields/DataSourceMethodSelect.vue.d.ts +3 -1
  64. package/types/fields/DataSourceMethods.vue.d.ts +5 -3
  65. package/types/fields/DataSourceMocks.vue.d.ts +5 -3
  66. package/types/fields/DataSourceSelect.vue.d.ts +5 -3
  67. package/types/fields/EventSelect.vue.d.ts +3 -1
  68. package/types/fields/KeyValue.vue.d.ts +2 -2
  69. package/types/fields/UISelect.vue.d.ts +3 -1
  70. package/types/hooks/use-code-block-edit.d.ts +14 -5
  71. package/types/hooks/use-data-source-method.d.ts +14 -5
  72. package/types/hooks/use-filter.d.ts +7 -0
  73. package/types/hooks/use-node-status.d.ts +6 -0
  74. package/types/layouts/CodeEditor.vue.d.ts +4 -1
  75. package/types/layouts/Framework.vue.d.ts +1 -1
  76. package/types/layouts/PropsPanel.vue.d.ts +10 -4
  77. package/types/layouts/sidebar/ComponentListPanel.vue.d.ts +1 -1
  78. package/types/layouts/sidebar/Sidebar.vue.d.ts +5 -5
  79. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +9 -3
  80. package/types/layouts/sidebar/code-block/CodeBlockListPanel.vue.d.ts +1 -1
  81. package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts +3 -1
  82. package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts +8 -2
  83. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +1 -1
  84. package/types/layouts/sidebar/layer/LayerMenu.vue.d.ts +6 -2
  85. package/types/layouts/sidebar/layer/LayerPanel.vue.d.ts +1 -1
  86. package/types/layouts/sidebar/layer/use-click.d.ts +14 -5
  87. package/types/layouts/sidebar/layer/use-node-status.d.ts +3 -4
  88. package/types/layouts/workspace/Workspace.vue.d.ts +1 -1
  89. package/types/layouts/workspace/viewer/NodeListMenu.vue.d.ts +1 -14
  90. package/types/layouts/workspace/viewer/ViewerMenu.vue.d.ts +1 -1
  91. package/types/services/BaseService.d.ts +4 -1
  92. package/types/services/dep.d.ts +6 -5
  93. package/types/services/editor.d.ts +9 -3
  94. package/types/services/props.d.ts +25 -1
  95. package/types/services/storage.d.ts +7 -7
  96. package/types/type.d.ts +8 -6
  97. package/types/utils/compose.d.ts +1 -1
  98. package/types/utils/editor.d.ts +5 -1
  99. package/src/layouts/sidebar/layer/use-filter.ts +0 -59
  100. package/src/layouts/workspace/viewer/NodeListMenuTitle.vue +0 -68
  101. package/src/theme/dep-list.scss +0 -59
  102. package/types/layouts/sidebar/layer/use-filter.d.ts +0 -7
  103. package/types/layouts/workspace/viewer/NodeListMenuTitle.vue.d.ts +0 -15
package/dist/style.css CHANGED
@@ -251,6 +251,22 @@
251
251
  .m-editor-layer-panel .m-editor-tree {
252
252
  padding-top: 48px;
253
253
  }
254
+ .m-editor-layer-panel .search-wrapper {
255
+ display: flex;
256
+ align-items: center;
257
+ justify-content: center;
258
+ position: absolute;
259
+ top: 0;
260
+ width: 100%;
261
+ z-index: 1;
262
+ }
263
+ .m-editor-layer-panel .search-wrapper .search-input {
264
+ flex: 1;
265
+ position: relative;
266
+ }
267
+ .m-editor-layer-panel .search-wrapper .tmagic-design-button {
268
+ margin-right: 10px;
269
+ }
254
270
  .ui-component-panel.tmagic-design-collapse {
255
271
  height: 100%;
256
272
  border-top: 0 !important;
@@ -573,6 +589,27 @@
573
589
  .m-editor-stage-container::-webkit-scrollbar {
574
590
  width: 0 !important;
575
591
  }
592
+ .m-editor-stage-float-button {
593
+ cursor: pointer;
594
+ transform: translateY(-50%);
595
+ width: 12px;
596
+ font-size: 12px;
597
+ line-height: 1.2;
598
+ position: absolute;
599
+ left: 100%;
600
+ top: 50%;
601
+ padding: 5px;
602
+ background-color: #ffffff;
603
+ transition: background-color 0.2s;
604
+ color: rgba(0, 0, 0, 0.88);
605
+ box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
606
+ }
607
+ .m-editor-node-list-menu {
608
+ height: 100%;
609
+ width: 100%;
610
+ min-width: 300px;
611
+ max-height: 500px;
612
+ }
576
613
  .magic-code-editor {
577
614
  width: 100%;
578
615
  }
@@ -682,56 +719,6 @@
682
719
  top: 5px;
683
720
  z-index: 10;
684
721
  }
685
- .m-editor-dep-list-panel .magic-editor-layer-tree {
686
- padding-top: 48px;
687
- }
688
- .m-editor-dep-list-panel .search-wrapper {
689
- display: flex;
690
- align-items: center;
691
- justify-content: center;
692
- position: absolute;
693
- top: 0;
694
- width: 100%;
695
- z-index: 1;
696
- }
697
- .m-editor-dep-list-panel .search-wrapper .search-input {
698
- flex: 1;
699
- position: relative;
700
- }
701
- .m-editor-dep-list-panel .search-wrapper .tmagic-design-button {
702
- margin-right: 10px;
703
- }
704
- .m-editor-dep-list-panel .list-container {
705
- width: 100%;
706
- overflow: hidden;
707
- }
708
- .m-editor-dep-list-panel .list-container .list-item {
709
- display: flex;
710
- width: 100%;
711
- align-items: center;
712
- }
713
- .m-editor-dep-list-panel .list-container .list-item .right-tool {
714
- display: flex;
715
- width: fit-content !important;
716
- align-items: center;
717
- }
718
- .m-editor-dep-list-panel .list-container .list-item .right-tool .edit-icon {
719
- margin: 0 5px;
720
- }
721
- .m-editor-dep-list-panel .list-container .list-item .name {
722
- white-space: nowrap;
723
- overflow: hidden;
724
- text-overflow: ellipsis;
725
- width: 0 !important;
726
- flex: 1;
727
- line-height: 22px;
728
- }
729
- .m-editor-dep-list-panel .list-container .list-item .name.code {
730
- color: #000;
731
- }
732
- .m-editor-dep-list-panel .list-container .list-item .name.hook {
733
- color: #909399;
734
- }
735
722
  .data-source-list-panel .list-container .list-item .codeIcon {
736
723
  width: 22px;
737
724
  height: 22px;
@@ -897,11 +884,46 @@
897
884
  overflow: hidden;
898
885
  text-overflow: ellipsis;
899
886
  }
887
+ .m-editor-tree .m-editor-tree-node .tree-node .tree-node-content .tree-node-label .disabled {
888
+ cursor: default;
889
+ }
890
+ .m-editor-tree .m-editor-tree-node .tree-node .tree-node-content .tree-node-label .hook {
891
+ color: #999;
892
+ }
900
893
  .m-editor-tree .m-editor-tree-node .tree-node .tree-node-tool {
901
- margin-right: 15px;
902
894
  display: flex;
903
895
  align-items: center;
904
896
  }
897
+ .m-editor-tree .m-editor-tree-node .tree-node .tree-node-tool .tmagic-design-icon {
898
+ margin-right: 10px;
899
+ }
900
+ .m-editor-float-box {
901
+ position: absolute;
902
+ background-color: #fff;
903
+ z-index: 100;
904
+ border: 1px solid #d9dbdd;
905
+ display: flex;
906
+ flex-direction: column;
907
+ }
908
+ .m-editor-float-box .m-editor-float-box-title {
909
+ text-align: center;
910
+ font-size: 14px;
911
+ font-weight: 600;
912
+ padding: 5px;
913
+ cursor: move;
914
+ display: flex;
915
+ justify-content: space-between;
916
+ align-items: center;
917
+ border-bottom: 1px solid #d9dbdd;
918
+ }
919
+ .m-editor-float-box .m-editor-float-box-body {
920
+ padding: 5px;
921
+ flex: 1;
922
+ overflow: auto;
923
+ }
924
+ .m-editor-floating-box-moveable {
925
+ opacity: 0;
926
+ }
905
927
  .fade-enter-active,
906
928
  .fade-leave-active {
907
929
  transition: opacity 0.5s;