@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.2

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 (119) hide show
  1. package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +11 -2
  2. package/dist/es/components/CodeBlockEditor.vue_vue_type_script_setup_true_lang.js +18 -110
  3. package/dist/es/components/CodeParams.vue_vue_type_script_setup_true_lang.js +6 -0
  4. package/dist/es/components/CompareForm.js +5 -0
  5. package/dist/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js +167 -0
  6. package/dist/es/fields/Code.vue_vue_type_script_setup_true_lang.js +19 -3
  7. package/dist/es/fields/CodeSelect.vue_vue_type_script_setup_true_lang.js +18 -2
  8. package/dist/es/fields/CodeSelectCol.vue_vue_type_script_setup_true_lang.js +37 -6
  9. package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js +3 -1
  10. package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js +2 -2
  11. package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js +14 -6
  12. package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +3 -1
  13. package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +15 -7
  14. package/dist/es/fields/DataSourceMocks.vue_vue_type_script_setup_true_lang.js +14 -6
  15. package/dist/es/fields/DataSourceSelect.vue_vue_type_script_setup_true_lang.js +3 -1
  16. package/dist/es/fields/EventSelect.vue_vue_type_script_setup_true_lang.js +58 -11
  17. package/dist/es/fields/KeyValue.vue_vue_type_script_setup_true_lang.js +11 -6
  18. package/dist/es/fields/UISelect.vue_vue_type_script_setup_true_lang.js +8 -5
  19. package/dist/es/hooks/use-code-block-edit.js +2 -2
  20. package/dist/es/hooks/use-stage.js +15 -7
  21. package/dist/es/index.js +3 -1
  22. package/dist/es/initService.js +6 -6
  23. package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js +4 -0
  24. package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js +12 -7
  25. package/dist/es/layouts/NavMenu.vue_vue_type_script_setup_true_lang.js +8 -0
  26. package/dist/es/layouts/history-list/Bucket.js +5 -0
  27. package/dist/es/layouts/history-list/Bucket.vue_vue_type_script_setup_true_lang.js +84 -0
  28. package/dist/es/layouts/history-list/CodeBlockTab.js +5 -0
  29. package/dist/es/layouts/history-list/CodeBlockTab.vue_vue_type_script_setup_true_lang.js +62 -0
  30. package/dist/es/layouts/history-list/DataSourceTab.js +5 -0
  31. package/dist/es/layouts/history-list/DataSourceTab.vue_vue_type_script_setup_true_lang.js +62 -0
  32. package/dist/es/layouts/history-list/GroupRow.js +5 -0
  33. package/dist/es/layouts/history-list/GroupRow.vue_vue_type_script_setup_true_lang.js +180 -0
  34. package/dist/es/layouts/history-list/HistoryDiffDialog.js +5 -0
  35. package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js +195 -0
  36. package/dist/es/layouts/history-list/HistoryListPanel.js +5 -0
  37. package/dist/es/layouts/history-list/HistoryListPanel.vue_vue_type_script_setup_true_lang.js +270 -0
  38. package/dist/es/layouts/history-list/InitialRow.js +5 -0
  39. package/dist/es/layouts/history-list/InitialRow.vue_vue_type_script_setup_true_lang.js +48 -0
  40. package/dist/es/layouts/history-list/PageTab.js +5 -0
  41. package/dist/es/layouts/history-list/PageTab.vue_vue_type_script_setup_true_lang.js +99 -0
  42. package/dist/es/layouts/history-list/composables.js +154 -0
  43. package/dist/es/layouts/sidebar/layer/use-node-status.js +1 -1
  44. package/dist/es/services/BaseService.js +31 -68
  45. package/dist/es/services/codeBlock.js +205 -8
  46. package/dist/es/services/componentList.js +2 -2
  47. package/dist/es/services/dataSource.js +217 -8
  48. package/dist/es/services/dep.js +21 -9
  49. package/dist/es/services/editor.js +350 -160
  50. package/dist/es/services/events.js +2 -2
  51. package/dist/es/services/history.js +407 -12
  52. package/dist/es/services/keybinding.js +2 -2
  53. package/dist/es/services/props.js +8 -8
  54. package/dist/es/services/stageOverlay.js +2 -2
  55. package/dist/es/services/storage.js +2 -2
  56. package/dist/es/services/ui.js +2 -2
  57. package/dist/es/style.css +347 -1
  58. package/dist/es/utils/code-block.js +122 -0
  59. package/dist/es/utils/content-menu.js +4 -5
  60. package/dist/es/utils/dep/worker.js +1 -1
  61. package/dist/es/utils/editor.js +2 -2
  62. package/dist/es/utils/undo-redo.js +20 -0
  63. package/dist/style.css +347 -1
  64. package/dist/tmagic-editor.umd.cjs +3165 -774
  65. package/package.json +7 -7
  66. package/src/Editor.vue +7 -0
  67. package/src/components/CodeBlockEditor.vue +20 -109
  68. package/src/components/CodeParams.vue +6 -0
  69. package/src/components/CompareForm.vue +225 -0
  70. package/src/editorProps.ts +2 -0
  71. package/src/fields/Code.vue +19 -3
  72. package/src/fields/CodeSelect.vue +17 -1
  73. package/src/fields/CodeSelectCol.vue +30 -2
  74. package/src/fields/DataSourceFieldSelect/FieldSelect.vue +7 -1
  75. package/src/fields/DataSourceFieldSelect/Index.vue +2 -2
  76. package/src/fields/DataSourceFields.vue +12 -3
  77. package/src/fields/DataSourceMethodSelect.vue +4 -1
  78. package/src/fields/DataSourceMethods.vue +14 -4
  79. package/src/fields/DataSourceMocks.vue +13 -3
  80. package/src/fields/DataSourceSelect.vue +4 -1
  81. package/src/fields/EventSelect.vue +57 -8
  82. package/src/fields/KeyValue.vue +17 -4
  83. package/src/fields/UISelect.vue +5 -2
  84. package/src/hooks/use-code-block-edit.ts +5 -2
  85. package/src/hooks/use-stage.ts +23 -7
  86. package/src/index.ts +1 -0
  87. package/src/layouts/CodeEditor.vue +15 -0
  88. package/src/layouts/Framework.vue +10 -5
  89. package/src/layouts/NavMenu.vue +9 -0
  90. package/src/layouts/history-list/Bucket.vue +99 -0
  91. package/src/layouts/history-list/CodeBlockTab.vue +61 -0
  92. package/src/layouts/history-list/DataSourceTab.vue +61 -0
  93. package/src/layouts/history-list/GroupRow.vue +207 -0
  94. package/src/layouts/history-list/HistoryDiffDialog.vue +212 -0
  95. package/src/layouts/history-list/HistoryListPanel.vue +271 -0
  96. package/src/layouts/history-list/InitialRow.vue +41 -0
  97. package/src/layouts/history-list/PageTab.vue +94 -0
  98. package/src/layouts/history-list/composables.ts +195 -0
  99. package/src/layouts/sidebar/layer/use-node-status.ts +9 -6
  100. package/src/services/BaseService.ts +35 -86
  101. package/src/services/codeBlock.ts +256 -5
  102. package/src/services/dataSource.ts +257 -6
  103. package/src/services/dep.ts +32 -9
  104. package/src/services/editor.ts +454 -171
  105. package/src/services/history.ts +452 -8
  106. package/src/services/props.ts +2 -2
  107. package/src/theme/history-list-panel.scss +423 -0
  108. package/src/theme/theme.scss +1 -0
  109. package/src/type.ts +179 -6
  110. package/src/utils/code-block.ts +150 -0
  111. package/src/utils/content-menu.ts +8 -5
  112. package/src/utils/dep/worker.ts +5 -3
  113. package/src/utils/index.ts +1 -0
  114. package/src/utils/undo-redo.ts +23 -0
  115. package/types/index.d.ts +2105 -810
  116. package/dist/es/utils/compose.js +0 -44
  117. package/dist/es/utils/editor-history.js +0 -100
  118. package/src/utils/compose.ts +0 -52
  119. package/src/utils/editor-history.ts +0 -138
package/dist/style.css CHANGED
@@ -126,7 +126,10 @@
126
126
  .m-form-container.has-tip .tmagic-design-form-item {
127
127
  flex: 1;
128
128
  }
129
- .m-form-container .tmagic-design-form-item.show-diff {
129
+ .m-form-container .tmagic-design-form-item.show-after-diff {
130
+ background: rgb(225, 243, 216);
131
+ }
132
+ .m-form-container .tmagic-design-form-item.show-before-diff {
130
133
  background: #f7dadd;
131
134
  }
132
135
 
@@ -578,6 +581,349 @@ fieldset.m-fieldset .m-form-tip {
578
581
  background-color: transparent;
579
582
  }
580
583
 
584
+ .m-editor-history-list-popover {
585
+ padding: 0 !important;
586
+ }
587
+ .m-editor-history-list-popover .m-editor-history-list {
588
+ position: relative;
589
+ padding: 4px 8px 8px;
590
+ }
591
+ .m-editor-history-list-popover .m-editor-history-list-close {
592
+ position: absolute;
593
+ top: 4px;
594
+ right: 4px;
595
+ z-index: 1;
596
+ display: flex;
597
+ align-items: center;
598
+ height: 40px;
599
+ margin: 0;
600
+ color: #909399;
601
+ }
602
+ .m-editor-history-list-popover .m-editor-history-list-close:hover {
603
+ color: #409eff;
604
+ }
605
+ .m-editor-history-list-popover .m-editor-history-list-tabs .el-tabs__header,
606
+ .m-editor-history-list-popover .m-editor-history-list-tabs .t-tabs__header {
607
+ margin-bottom: 4px;
608
+ }
609
+ .m-editor-history-list-popover .m-editor-history-list-empty {
610
+ padding: 24px 0;
611
+ text-align: center;
612
+ color: #909399;
613
+ font-size: 12px;
614
+ }
615
+ .m-editor-history-list-popover .m-editor-history-list-ul {
616
+ margin: 0;
617
+ padding: 0;
618
+ list-style: none;
619
+ }
620
+ .m-editor-history-list-popover .m-editor-history-list-item {
621
+ display: flex;
622
+ align-items: center;
623
+ gap: 6px;
624
+ padding: 6px 8px;
625
+ border-radius: 4px;
626
+ font-size: 12px;
627
+ line-height: 1.4;
628
+ color: #303133;
629
+ cursor: default;
630
+ }
631
+ .m-editor-history-list-popover .m-editor-history-list-item:not(.m-editor-history-list-group.is-merged):hover {
632
+ background-color: rgba(0, 0, 0, 0.04);
633
+ }
634
+ .m-editor-history-list-popover .m-editor-history-list-item.is-undone {
635
+ color: #c0c4cc;
636
+ }
637
+ .m-editor-history-list-popover .m-editor-history-list-item.is-undone .m-editor-history-list-item-op {
638
+ opacity: 0.5;
639
+ }
640
+ .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged) {
641
+ background-color: rgba(64, 158, 255, 0.1);
642
+ box-shadow: inset 2px 0 0 #409eff;
643
+ }
644
+ .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged):hover {
645
+ background-color: rgba(64, 158, 255, 0.16);
646
+ }
647
+ .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged) .m-editor-history-list-item-desc {
648
+ font-weight: 600;
649
+ color: #409eff;
650
+ }
651
+ .m-editor-history-list-popover .m-editor-history-list-group {
652
+ flex-direction: column;
653
+ align-items: stretch;
654
+ gap: 0;
655
+ }
656
+ .m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-head {
657
+ display: flex;
658
+ align-items: center;
659
+ gap: 6px;
660
+ cursor: default;
661
+ }
662
+ .m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-head.is-clickable {
663
+ cursor: pointer;
664
+ }
665
+ .m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-toggle {
666
+ flex: 0 0 auto;
667
+ width: 16px;
668
+ text-align: center;
669
+ color: #909399;
670
+ font-size: 12px;
671
+ user-select: none;
672
+ transition: transform 0.15s ease;
673
+ pointer-events: none;
674
+ }
675
+ .m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-toggle.is-expanded {
676
+ transform: rotate(180deg);
677
+ }
678
+ .m-editor-history-list-popover .m-editor-history-list-group.is-merged {
679
+ margin: 4px 0;
680
+ padding: 4px 8px 6px;
681
+ background-color: rgba(144, 105, 219, 0.06);
682
+ border: 1px solid rgba(144, 105, 219, 0.18);
683
+ border-left: 3px solid #9069db;
684
+ border-radius: 4px;
685
+ }
686
+ .m-editor-history-list-popover .m-editor-history-list-group.is-merged:hover {
687
+ background-color: rgba(144, 105, 219, 0.1);
688
+ }
689
+ .m-editor-history-list-popover .m-editor-history-list-group.is-merged .m-editor-history-list-group-head {
690
+ font-weight: 600;
691
+ color: #5b3fa5;
692
+ }
693
+ .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-undone {
694
+ background-color: rgba(192, 196, 204, 0.08);
695
+ border-color: rgba(192, 196, 204, 0.4);
696
+ border-left-color: #c0c4cc;
697
+ }
698
+ .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-undone .m-editor-history-list-group-head {
699
+ color: #c0c4cc;
700
+ }
701
+ .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current {
702
+ background-color: rgba(64, 158, 255, 0.08);
703
+ border-color: rgba(64, 158, 255, 0.3);
704
+ border-left-color: #409eff;
705
+ box-shadow: none;
706
+ }
707
+ .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current .m-editor-history-list-group-head {
708
+ color: #409eff;
709
+ }
710
+ .m-editor-history-list-popover .m-editor-history-list-substeps {
711
+ margin: 6px 0 0 6px;
712
+ padding: 0;
713
+ list-style: none;
714
+ border-left: 1px dashed rgba(144, 105, 219, 0.45);
715
+ }
716
+ .m-editor-history-list-popover .m-editor-history-list-substeps li {
717
+ display: flex;
718
+ align-items: center;
719
+ gap: 6px;
720
+ padding: 3px 8px;
721
+ font-size: 11px;
722
+ color: #606266;
723
+ cursor: default;
724
+ border-radius: 3px;
725
+ }
726
+ .m-editor-history-list-popover .m-editor-history-list-substeps li.is-clickable {
727
+ cursor: pointer;
728
+ }
729
+ .m-editor-history-list-popover .m-editor-history-list-substeps li.is-clickable:hover {
730
+ background-color: rgba(144, 105, 219, 0.1);
731
+ }
732
+ .m-editor-history-list-popover .m-editor-history-list-substeps li.is-undone {
733
+ color: #c0c4cc;
734
+ }
735
+ .m-editor-history-list-popover .m-editor-history-list-substeps li.is-current {
736
+ color: #409eff;
737
+ font-weight: 600;
738
+ background-color: rgba(64, 158, 255, 0.08);
739
+ border-radius: 3px;
740
+ }
741
+ .m-editor-history-list-popover .m-editor-history-list-item-current {
742
+ flex: 0 0 auto;
743
+ padding: 0 6px;
744
+ border-radius: 2px;
745
+ font-size: 10px;
746
+ line-height: 16px;
747
+ color: #fff;
748
+ background-color: #409eff;
749
+ font-weight: 500;
750
+ }
751
+ .m-editor-history-list-popover .m-editor-history-list-item-index {
752
+ flex: 0 0 auto;
753
+ color: #909399;
754
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
755
+ font-size: 11px;
756
+ font-weight: 400;
757
+ white-space: nowrap;
758
+ }
759
+ .m-editor-history-list-popover .m-editor-history-list-item-op {
760
+ flex: 0 0 auto;
761
+ padding: 0 6px;
762
+ border-radius: 2px;
763
+ font-size: 11px;
764
+ line-height: 18px;
765
+ color: #fff;
766
+ background-color: #909399;
767
+ }
768
+ .m-editor-history-list-popover .m-editor-history-list-item-op.op-add {
769
+ background-color: #67c23a;
770
+ }
771
+ .m-editor-history-list-popover .m-editor-history-list-item-op.op-remove {
772
+ background-color: #f56c6c;
773
+ }
774
+ .m-editor-history-list-popover .m-editor-history-list-item-op.op-update {
775
+ background-color: #409eff;
776
+ }
777
+ .m-editor-history-list-popover .m-editor-history-list-item-op.op-initial {
778
+ background-color: #909399;
779
+ }
780
+ .m-editor-history-list-popover .m-editor-history-list-initial {
781
+ cursor: default;
782
+ color: #606266;
783
+ border-top: 1px dashed #dcdfe6;
784
+ margin-top: 4px;
785
+ padding-top: 8px;
786
+ }
787
+ .m-editor-history-list-popover .m-editor-history-list-initial.is-clickable {
788
+ cursor: pointer;
789
+ }
790
+ .m-editor-history-list-popover .m-editor-history-list-initial .m-editor-history-list-item-desc {
791
+ font-style: italic;
792
+ }
793
+ .m-editor-history-list-popover .m-editor-history-list-item-desc {
794
+ flex: 1 1 auto;
795
+ overflow: hidden;
796
+ text-overflow: ellipsis;
797
+ white-space: nowrap;
798
+ }
799
+ .m-editor-history-list-popover .m-editor-history-list-item-merge {
800
+ flex: 0 0 auto;
801
+ padding: 0 8px;
802
+ border-radius: 8px;
803
+ font-size: 10px;
804
+ line-height: 16px;
805
+ color: #fff;
806
+ background-color: #9069db;
807
+ font-weight: 500;
808
+ letter-spacing: 0.2px;
809
+ }
810
+ .m-editor-history-list-popover .m-editor-history-list-item-diff {
811
+ flex: 0 0 auto;
812
+ padding: 0 6px;
813
+ border-radius: 2px;
814
+ font-size: 10px;
815
+ line-height: 16px;
816
+ color: #409eff;
817
+ background-color: rgba(64, 158, 255, 0.1);
818
+ cursor: pointer;
819
+ user-select: none;
820
+ }
821
+ .m-editor-history-list-popover .m-editor-history-list-item-diff:hover {
822
+ background-color: rgba(64, 158, 255, 0.2);
823
+ }
824
+ .m-editor-history-list-popover .m-editor-history-list-item-revert {
825
+ flex: 0 0 auto;
826
+ padding: 0 6px;
827
+ border-radius: 2px;
828
+ font-size: 10px;
829
+ line-height: 16px;
830
+ color: #e6a23c;
831
+ background-color: rgba(230, 162, 60, 0.12);
832
+ cursor: pointer;
833
+ user-select: none;
834
+ }
835
+ .m-editor-history-list-popover .m-editor-history-list-item-revert:hover {
836
+ background-color: rgba(230, 162, 60, 0.25);
837
+ }
838
+ .m-editor-history-list-popover .m-editor-history-list-substep-desc {
839
+ flex: 1 1 auto;
840
+ overflow: hidden;
841
+ text-overflow: ellipsis;
842
+ white-space: nowrap;
843
+ }
844
+ .m-editor-history-list-popover .m-editor-history-list-bucket {
845
+ margin-bottom: 8px;
846
+ }
847
+ .m-editor-history-list-popover .m-editor-history-list-bucket:last-child {
848
+ margin-bottom: 0;
849
+ }
850
+ .m-editor-history-list-popover .m-editor-history-list-bucket-title {
851
+ display: flex;
852
+ align-items: center;
853
+ gap: 6px;
854
+ padding: 4px 8px;
855
+ font-size: 12px;
856
+ font-weight: 500;
857
+ color: #606266;
858
+ background-color: #f5f7fa;
859
+ border-radius: 4px;
860
+ }
861
+ .m-editor-history-list-popover .m-editor-history-list-bucket-title code {
862
+ flex: 1 1 auto;
863
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
864
+ font-size: 11px;
865
+ color: #409eff;
866
+ overflow: hidden;
867
+ text-overflow: ellipsis;
868
+ white-space: nowrap;
869
+ }
870
+ .m-editor-history-list-popover .m-editor-history-list-bucket-count {
871
+ flex: 0 0 auto;
872
+ color: #909399;
873
+ font-weight: 400;
874
+ font-size: 11px;
875
+ }
876
+
877
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-body {
878
+ display: flex;
879
+ flex-direction: column;
880
+ }
881
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-header {
882
+ display: flex;
883
+ align-items: center;
884
+ justify-content: space-between;
885
+ margin-bottom: 8px;
886
+ padding: 8px 12px;
887
+ background-color: #f5f7fa;
888
+ border-radius: 4px;
889
+ gap: 12px;
890
+ }
891
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-controls {
892
+ display: flex;
893
+ align-items: center;
894
+ flex: 0 0 auto;
895
+ gap: 8px;
896
+ }
897
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-view,
898
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-mode {
899
+ flex: 0 0 auto;
900
+ }
901
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-target {
902
+ flex: 1 1 auto;
903
+ font-size: 13px;
904
+ font-weight: 500;
905
+ color: #303133;
906
+ overflow: hidden;
907
+ text-overflow: ellipsis;
908
+ white-space: nowrap;
909
+ }
910
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-legend {
911
+ display: flex;
912
+ align-items: center;
913
+ gap: 6px;
914
+ margin-bottom: 12px;
915
+ padding: 0 4px;
916
+ }
917
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-arrow {
918
+ color: #909399;
919
+ font-size: 12px;
920
+ }
921
+ .m-editor-history-diff-dialog .m-editor-history-diff-dialog-tip {
922
+ margin-left: 8px;
923
+ color: #e6a23c;
924
+ font-size: 12px;
925
+ }
926
+
581
927
  .m-editor {
582
928
  display: flex;
583
929
  flex-direction: column;