@tmagic/editor 1.2.14 → 1.3.0-alpha.0

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 (59) hide show
  1. package/dist/style.css +173 -80
  2. package/dist/tmagic-editor.js +975 -222
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +984 -230
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +10 -9
  7. package/src/Editor.vue +2 -0
  8. package/src/components/CodeDraftEditor.vue +2 -2
  9. package/src/components/SearchInput.vue +6 -3
  10. package/src/editorProps.ts +5 -0
  11. package/src/fields/CodeSelect.vue +1 -0
  12. package/src/fields/DataSourceFields.vue +178 -0
  13. package/src/fields/EventSelect.vue +1 -0
  14. package/src/fields/KeyValue.vue +93 -0
  15. package/src/icons/AppManageIcon.vue +1 -1
  16. package/src/icons/CodeIcon.vue +1 -10
  17. package/src/index.ts +6 -0
  18. package/src/initService.ts +59 -3
  19. package/src/layouts/sidebar/LayerPanel.vue +2 -0
  20. package/src/layouts/sidebar/Sidebar.vue +24 -14
  21. package/src/layouts/sidebar/code-block/CodeBlockList.vue +11 -4
  22. package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +84 -0
  23. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +130 -0
  24. package/src/services/codeBlock.ts +0 -2
  25. package/src/services/dataSource.ts +90 -0
  26. package/src/services/props.ts +2 -15
  27. package/src/theme/code-block.scss +4 -66
  28. package/src/theme/data-source-fields.scss +13 -0
  29. package/src/theme/data-source.scss +17 -0
  30. package/src/theme/dep-list.scss +59 -0
  31. package/src/theme/key-value.scss +13 -0
  32. package/src/theme/sidebar.scss +26 -6
  33. package/src/theme/theme.scss +4 -0
  34. package/src/type.ts +3 -1
  35. package/src/utils/data-source/formConfigs/base.ts +32 -0
  36. package/src/utils/data-source/formConfigs/http.ts +50 -0
  37. package/src/utils/data-source/index.ts +31 -0
  38. package/src/utils/dep.ts +9 -1
  39. package/src/utils/props.ts +1 -0
  40. package/types/Editor.vue.d.ts +9 -0
  41. package/types/components/ContentMenu.vue.d.ts +2 -2
  42. package/types/components/ScrollViewer.vue.d.ts +1 -1
  43. package/types/editorProps.d.ts +4 -0
  44. package/types/fields/DataSourceFields.vue.d.ts +40 -0
  45. package/types/fields/KeyValue.vue.d.ts +50 -0
  46. package/types/index.d.ts +2 -0
  47. package/types/initService.d.ts +1 -1
  48. package/types/layouts/CodeEditor.vue.d.ts +1 -1
  49. package/types/layouts/sidebar/Sidebar.vue.d.ts +2 -2
  50. package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts +22 -0
  51. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +12 -0
  52. package/types/services/dataSource.d.ts +25 -0
  53. package/types/services/props.d.ts +17 -12
  54. package/types/type.d.ts +3 -1
  55. package/types/utils/data-source/formConfigs/base.d.ts +3 -0
  56. package/types/utils/data-source/formConfigs/http.d.ts +3 -0
  57. package/types/utils/data-source/index.d.ts +2 -0
  58. package/types/utils/dep.d.ts +2 -1
  59. package/types/utils/props.d.ts +2 -3
package/dist/style.css CHANGED
@@ -188,28 +188,46 @@
188
188
  border-color: #2882e0;
189
189
  color: #2882e0;
190
190
  }
191
- .m-editor-sidebar {
191
+ .m-editor-sidebar.tmagic-design-tabs {
192
192
  height: 100%;
193
193
  }
194
- .m-editor-sidebar.el-tabs--left .el-tabs__header {
194
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header,
195
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header {
195
196
  background: #2882e0;
196
197
  border: 0;
198
+ height: 100%;
199
+ }
200
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card,
201
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card {
202
+ background-color: transparent;
197
203
  }
198
- .m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {
204
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover,
205
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover {
206
+ background-color: transparent;
207
+ }
208
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header.is-left, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header.t-is-left,
209
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header.is-left,
210
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header.t-is-left {
199
211
  width: 40px;
200
212
  margin-right: 0;
201
213
  }
202
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {
214
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav-wrap,
215
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav-wrap {
203
216
  margin: 0;
204
217
  }
205
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {
218
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav,
219
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav {
206
220
  border: 0;
207
221
  border-radius: 0;
208
222
  }
209
- .m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {
223
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .tab-label,
224
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .tab-label {
210
225
  margin-left: 2px;
211
226
  }
212
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {
227
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left,
228
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
229
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left,
230
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
213
231
  line-height: 15px;
214
232
  border: 0;
215
233
  height: auto;
@@ -217,37 +235,86 @@
217
235
  color: white;
218
236
  box-sizing: border-box;
219
237
  }
220
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {
238
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
239
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active,
240
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active,
241
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active,
242
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active,
243
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active,
244
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active,
245
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active,
246
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
247
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active,
248
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active,
249
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active,
250
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active {
221
251
  background: #ffffff;
222
252
  border: 0;
223
253
  }
224
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {
254
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
255
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active i,
256
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
257
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
258
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i,
259
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active i,
260
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active i,
261
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active i,
262
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
263
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active i,
264
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
265
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
266
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i {
225
267
  color: #353140;
226
268
  }
227
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {
269
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
270
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
271
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
272
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
273
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title,
274
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title,
275
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title,
276
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title,
277
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
278
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
279
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
280
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
281
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title {
228
282
  color: #353140;
229
283
  }
230
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {
284
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left:first-child, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
285
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left:first-child,
286
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left:first-child,
287
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left:first-child,
288
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
289
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left:first-child,
290
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left:first-child {
231
291
  border-right: 0;
232
292
  }
233
- .m-editor-sidebar.el-tabs--left .el-tabs__header i {
293
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
294
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
295
+ padding: 7px;
296
+ }
297
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header i,
298
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header i {
234
299
  font-size: 25px;
235
300
  color: rgba(255, 255, 255, 0.6);
236
301
  }
237
- .m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {
302
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header i:hover,
303
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header i:hover {
238
304
  color: white;
239
305
  }
240
- .m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {
306
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .magic-editor-tab-panel-title,
307
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .magic-editor-tab-panel-title {
241
308
  font-size: 12px;
242
309
  white-space: normal;
243
310
  }
244
- .m-editor-sidebar .el-scrollbar {
311
+ .m-editor-sidebar.tmagic-design-tabs .el-scrollbar {
245
312
  height: 100%;
246
313
  }
247
- .m-editor-sidebar .el-tree {
314
+ .m-editor-sidebar.tmagic-design-tabs .el-tree {
248
315
  min-height: 100%;
249
316
  }
250
- .m-editor-sidebar .fold-icon {
317
+ .m-editor-sidebar.tmagic-design-tabs .fold-icon {
251
318
  position: absolute;
252
319
  bottom: 8px;
253
320
  left: 0px;
@@ -258,11 +325,11 @@
258
325
  opacity: 0.8;
259
326
  cursor: pointer;
260
327
  }
261
- .m-editor-sidebar .fold-icon:hover {
328
+ .m-editor-sidebar.tmagic-design-tabs .fold-icon:hover {
262
329
  background: rgba(0, 0, 0, 0.2);
263
330
  }
264
- .m-editor-sidebar .el-tabs__content,
265
- .m-editor-sidebar .el-tab-pane {
331
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__content,
332
+ .m-editor-sidebar.tmagic-design-tabs .el-tab-pane {
266
333
  height: 100%;
267
334
  }
268
335
  .magic-editor-layer-panel {
@@ -618,72 +685,16 @@
618
685
  .m-editor-code-block-list {
619
686
  height: 100%;
620
687
  }
621
- .m-editor-code-block-list .magic-editor-layer-tree {
622
- padding-top: 48px;
623
- }
624
- .m-editor-code-block-list .code-header-wrapper {
625
- display: flex;
626
- align-items: center;
627
- justify-content: center;
628
- position: absolute;
629
- top: 0;
630
- width: 100%;
631
- z-index: 1;
632
- }
633
- .m-editor-code-block-list .code-header-wrapper .search-input {
634
- flex: 1;
635
- position: relative;
636
- }
637
- .m-editor-code-block-list .code-header-wrapper .create-code-button {
638
- margin-left: 2px;
639
- margin-right: 10px;
640
- }
641
- .m-editor-code-block-list .divider {
642
- margin: 10px 0 0 0;
643
- }
644
- .m-editor-code-block-list .list-container {
645
- width: 100%;
646
- overflow: hidden;
647
- }
648
- .m-editor-code-block-list .list-container .list-item {
649
- display: flex;
650
- align-items: center;
651
- width: 100%;
652
- align-items: center;
653
- }
654
- .m-editor-code-block-list .list-container .list-item .right-tool {
655
- display: flex;
656
- width: fit-content !important;
657
- align-items: center;
658
- margin-right: 10px;
659
- }
660
- .m-editor-code-block-list .list-container .list-item .right-tool .edit-icon {
661
- margin: 0 5px;
662
- }
663
688
  .m-editor-code-block-list .list-container .list-item .codeIcon {
664
- width: 20px;
665
- height: 20px;
689
+ width: 22px;
690
+ height: 22px;
666
691
  margin-right: 5px;
667
692
  }
668
693
  .m-editor-code-block-list .list-container .list-item .compIcon {
669
- width: 15px;
670
- height: 15px;
694
+ width: 22px;
695
+ height: 22px;
671
696
  margin-right: 5px;
672
697
  }
673
- .m-editor-code-block-list .list-container .list-item .code-name {
674
- white-space: nowrap;
675
- overflow: hidden;
676
- text-overflow: ellipsis;
677
- width: 0 !important;
678
- flex: 1;
679
- line-height: 22px;
680
- }
681
- .m-editor-code-block-list .list-container .list-item .code-name.code {
682
- color: #000;
683
- }
684
- .m-editor-code-block-list .list-container .list-item .code-name.hook {
685
- color: #909399;
686
- }
687
698
  .m-fields-code-select {
688
699
  width: 100%;
689
700
  }
@@ -842,4 +853,86 @@
842
853
  left: 5px;
843
854
  top: 5px;
844
855
  z-index: 10;
856
+ }
857
+ .m-editor-dep-list-panel .magic-editor-layer-tree {
858
+ padding-top: 48px;
859
+ }
860
+ .m-editor-dep-list-panel .search-wrapper {
861
+ display: flex;
862
+ align-items: center;
863
+ justify-content: center;
864
+ position: absolute;
865
+ top: 0;
866
+ width: 100%;
867
+ z-index: 1;
868
+ }
869
+ .m-editor-dep-list-panel .search-wrapper .search-input {
870
+ flex: 1;
871
+ position: relative;
872
+ }
873
+ .m-editor-dep-list-panel .search-wrapper .tmagic-design-button {
874
+ margin-right: 10px;
875
+ }
876
+ .m-editor-dep-list-panel .list-container {
877
+ width: 100%;
878
+ overflow: hidden;
879
+ }
880
+ .m-editor-dep-list-panel .list-container .list-item {
881
+ display: flex;
882
+ width: 100%;
883
+ align-items: center;
884
+ }
885
+ .m-editor-dep-list-panel .list-container .list-item .right-tool {
886
+ display: flex;
887
+ width: fit-content !important;
888
+ align-items: center;
889
+ }
890
+ .m-editor-dep-list-panel .list-container .list-item .right-tool .edit-icon {
891
+ margin: 0 5px;
892
+ }
893
+ .m-editor-dep-list-panel .list-container .list-item .name {
894
+ white-space: nowrap;
895
+ overflow: hidden;
896
+ text-overflow: ellipsis;
897
+ width: 0 !important;
898
+ flex: 1;
899
+ line-height: 22px;
900
+ }
901
+ .m-editor-dep-list-panel .list-container .list-item .name.code {
902
+ color: #000;
903
+ }
904
+ .m-editor-dep-list-panel .list-container .list-item .name.hook {
905
+ color: #909399;
906
+ }
907
+ .data-source-list-panel .list-container .list-item .codeIcon {
908
+ width: 22px;
909
+ height: 22px;
910
+ margin-right: 5px;
911
+ }
912
+ .data-source-list-panel .list-container .list-item .compIcon {
913
+ width: 22px;
914
+ height: 22px;
915
+ margin-right: 5px;
916
+ }
917
+ .m-editor-data-source-fields {
918
+ width: 100%;
919
+ }
920
+ .m-editor-data-source-fields .tmagic-design-table {
921
+ width: 100%;
922
+ }
923
+ .m-editor-data-source-fields .m-editor-data-source-fields-footer {
924
+ display: flex;
925
+ justify-content: flex-end;
926
+ margin-top: 15px;
927
+ }
928
+ .m-fields-key-value-item {
929
+ display: flex;
930
+ margin-bottom: 10px;
931
+ align-items: center;
932
+ }
933
+ .m-fileds-key-value-delimiter {
934
+ margin: 0 10px;
935
+ }
936
+ .m-fileds-key-value-delete {
937
+ margin-left: 10px;
845
938
  }