@tmagic/editor 1.3.0-alpha.13 → 1.3.0-alpha.15

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 (66) hide show
  1. package/dist/style.css +41 -113
  2. package/dist/tmagic-editor.js +1315 -1197
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +1326 -1204
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +11 -11
  7. package/src/Editor.vue +0 -4
  8. package/src/components/CodeBlockEditor.vue +155 -0
  9. package/src/components/CodeParams.vue +59 -0
  10. package/src/fields/Code.vue +27 -19
  11. package/src/fields/CodeSelect.vue +7 -1
  12. package/src/fields/CodeSelectCol.vue +65 -74
  13. package/src/fields/DataSourceFields.vue +7 -9
  14. package/src/fields/DataSourceMethodSelect.vue +147 -0
  15. package/src/fields/DataSourceMethods.vue +103 -0
  16. package/src/fields/EventSelect.vue +33 -7
  17. package/src/icons/CodeIcon.vue +0 -2
  18. package/src/index.ts +8 -0
  19. package/src/layouts/CodeEditor.vue +32 -1
  20. package/src/layouts/Framework.vue +7 -3
  21. package/src/layouts/sidebar/LayerPanel.vue +1 -1
  22. package/src/layouts/sidebar/Sidebar.vue +2 -10
  23. package/src/layouts/sidebar/code-block/CodeBlockList.vue +73 -124
  24. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +63 -0
  25. package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +23 -33
  26. package/src/layouts/sidebar/data-source/DataSourceList.vue +111 -0
  27. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +13 -81
  28. package/src/services/codeBlock.ts +17 -70
  29. package/src/services/dataSource.ts +2 -0
  30. package/src/services/editor.ts +1 -1
  31. package/src/theme/code-block.scss +0 -122
  32. package/src/theme/code-editor.scss +27 -2
  33. package/src/theme/data-source-methods.scss +13 -0
  34. package/src/theme/event.scss +15 -12
  35. package/src/theme/theme.scss +1 -0
  36. package/src/type.ts +21 -6
  37. package/src/utils/data-source/index.ts +11 -0
  38. package/src/utils/use-code-block-edit.ts +84 -0
  39. package/src/utils/use-data-source-method.ts +101 -0
  40. package/types/components/CodeBlockEditor.vue.d.ts +21 -0
  41. package/types/components/CodeParams.vue.d.ts +26 -0
  42. package/types/components/ContentMenu.vue.d.ts +2 -2
  43. package/types/fields/Code.vue.d.ts +26 -6
  44. package/types/fields/CodeSelectCol.vue.d.ts +16 -5
  45. package/types/fields/DataSourceFields.vue.d.ts +2 -0
  46. package/types/fields/DataSourceMethodSelect.vue.d.ts +44 -0
  47. package/types/fields/DataSourceMethods.vue.d.ts +45 -0
  48. package/types/index.d.ts +4 -0
  49. package/types/layouts/CodeEditor.vue.d.ts +2 -0
  50. package/types/layouts/PropsPanel.vue.d.ts +8 -8
  51. package/types/layouts/sidebar/Sidebar.vue.d.ts +0 -3
  52. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +4 -9
  53. package/types/layouts/sidebar/code-block/{CodeBlockEditor.vue.d.ts → CodeBlockListPanel.vue.d.ts} +8 -5
  54. package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts +3 -1
  55. package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts +14 -0
  56. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +1 -11
  57. package/types/services/codeBlock.d.ts +5 -36
  58. package/types/services/dataSource.d.ts +1 -0
  59. package/types/services/editor.d.ts +1 -1
  60. package/types/type.d.ts +19 -6
  61. package/types/{components/FunctionEditor.vue.d.ts → utils/use-code-block-edit.d.ts} +26 -123
  62. package/types/utils/use-data-source-method.d.ts +116 -0
  63. package/src/components/CodeDraftEditor.vue +0 -148
  64. package/src/components/FunctionEditor.vue +0 -197
  65. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +0 -100
  66. package/types/components/CodeDraftEditor.vue.d.ts +0 -61
package/dist/style.css CHANGED
@@ -695,9 +695,30 @@
695
695
  .magic-code-editor {
696
696
  width: 100%;
697
697
  }
698
- .magic-code-editor .margin {
698
+ .magic-code-editor-wrapper {
699
+ width: 100%;
700
+ height: 100%;
701
+ position: relative;
702
+ }
703
+ .magic-code-editor-wrapper.full-screen {
704
+ position: fixed;
705
+ z-index: 10000;
706
+ top: 0;
707
+ left: 0;
708
+ }
709
+ .magic-code-editor-wrapper .magic-code-editor-content {
710
+ width: 100%;
711
+ height: 100%;
712
+ }
713
+ .magic-code-editor-wrapper .magic-code-editor-content .margin {
699
714
  margin: 0;
700
715
  }
716
+ .magic-code-editor-wrapper .magic-code-editor-full-screen-icon {
717
+ position: absolute;
718
+ top: 5px;
719
+ right: 0;
720
+ z-index: 1;
721
+ }
701
722
  .magic-editor-icon img {
702
723
  max-width: 100%;
703
724
  max-height: 100%;
@@ -721,114 +742,6 @@
721
742
  .m-fields-code-select .el-card__header {
722
743
  display: none;
723
744
  }
724
- .el-dialog.is-fullscreen.code-editor-dialog {
725
- overflow: hidden;
726
- }
727
- .code-editor-dialog .tmagic-design-card .t-card__header {
728
- display: block;
729
- }
730
- .code-editor-dialog .el-dialog__body,
731
- .code-editor-dialog .t-dialog__body {
732
- height: 90%;
733
- padding-top: 10px;
734
- }
735
- .code-editor-dialog .tmagic-design-card {
736
- height: 100%;
737
- background: #fff;
738
- }
739
- .code-editor-dialog .tmagic-design-card .el-card__body,
740
- .code-editor-dialog .tmagic-design-card .t-card__body {
741
- height: 100%;
742
- background: #fff;
743
- }
744
- .code-editor-dialog .code-editor-layout {
745
- height: 100%;
746
- border: 1px solid #e4e7ed;
747
- }
748
- .code-editor-dialog .code-editor-layout .side-tree {
749
- height: 100%;
750
- overflow: auto;
751
- }
752
- .code-editor-dialog .code-editor-layout .side-tree .el-tree-node__label {
753
- width: 100%;
754
- }
755
- .code-editor-dialog .code-editor-layout .side-tree .list-container {
756
- width: 100%;
757
- overflow: hidden;
758
- margin-left: -10px;
759
- }
760
- .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item {
761
- width: 100%;
762
- margin: 10px 0;
763
- line-height: 30px;
764
- }
765
- .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item .code-name {
766
- width: 100%;
767
- font-size: 14px;
768
- overflow: hidden;
769
- white-space: nowrap;
770
- text-overflow: ellipsis;
771
- }
772
- .code-editor-dialog .code-name-wrapper {
773
- display: flex;
774
- align-items: center;
775
- font-size: 16px;
776
- margin-bottom: 10px;
777
- }
778
- .code-editor-dialog .code-name-wrapper .code-name-label {
779
- margin-right: 10px;
780
- }
781
- .code-editor-dialog .code-name-wrapper .code-name-input {
782
- width: 300px;
783
- }
784
- .code-editor-dialog .m-editor-code-block-editor-panel-list-mode {
785
- height: 100%;
786
- z-index: 10;
787
- background: #fff;
788
- }
789
- .code-editor-dialog .m-editor-code-block-editor-panel-list-mode .el-card {
790
- border: 0;
791
- }
792
- .code-editor-dialog .m-editor-code-block-editor-panel {
793
- position: absolute;
794
- top: 0;
795
- left: 4px;
796
- width: calc(100% - 9px);
797
- height: 100%;
798
- z-index: 10;
799
- background: #fff;
800
- }
801
- .code-editor-dialog .m-editor-code-block-editor-panel .el-card {
802
- border: 0;
803
- }
804
- .code-editor-dialog .m-editor-wrapper {
805
- height: 100%;
806
- }
807
- .code-editor-dialog .m-editor-wrapper.fullScreen {
808
- height: 100%;
809
- width: 100%;
810
- position: fixed;
811
- top: 0;
812
- left: 0;
813
- z-index: 100;
814
- }
815
- .code-editor-dialog .m-editor-wrapper .m-editor-container {
816
- height: calc(100% - 45px);
817
- }
818
- .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
819
- height: 45px;
820
- width: 100%;
821
- display: flex;
822
- justify-content: end;
823
- background: #fff;
824
- position: absolute;
825
- right: 20px;
826
- bottom: 0;
827
- }
828
- .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
829
- height: 30px;
830
- margin-top: 5px;
831
- }
832
745
  .m-fields-event-select {
833
746
  width: 100%;
834
747
  }
@@ -848,17 +761,21 @@
848
761
  .m-fields-event-select .el-card.is-always-shadow {
849
762
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
850
763
  }
851
- .m-fields-code-select-col {
764
+ .m-fields-code-select-col,
765
+ .m-fields-data-source-method-select {
852
766
  width: 100%;
853
767
  }
854
- .m-fields-code-select-col .code-select-container {
768
+ .code-select-container,
769
+ .data-source-method-select-container {
855
770
  display: flex;
856
771
  align-items: center;
857
772
  }
858
- .m-fields-code-select-col .code-select-container .select {
773
+ .code-select-container .select,
774
+ .data-source-method-select-container .select {
859
775
  flex: 10 0 100px;
860
776
  }
861
- .m-fields-code-select-col .code-select-container .icon {
777
+ .code-select-container .icon,
778
+ .data-source-method-select-container .icon {
862
779
  flex: 1 0 20px;
863
780
  cursor: pointer;
864
781
  margin-right: 5px;
@@ -948,6 +865,17 @@
948
865
  justify-content: flex-end;
949
866
  margin-top: 15px;
950
867
  }
868
+ .m-editor-data-source-methods {
869
+ width: 100%;
870
+ }
871
+ .m-editor-data-source-methods .tmagic-design-table {
872
+ width: 100%;
873
+ }
874
+ .m-editor-data-source-methods .m-editor-data-source-methods-footer {
875
+ display: flex;
876
+ justify-content: flex-end;
877
+ margin-top: 15px;
878
+ }
951
879
  .tmagic-data-source-input-text .el-input__wrapper.tmagic-data-source-input-text-wrapper {
952
880
  overflow: hidden;
953
881
  padding-right: 30px;