@tmagic/editor 1.3.0-beta.1 → 1.3.0-beta.3

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 (81) hide show
  1. package/dist/style.css +67 -75
  2. package/dist/tmagic-editor.js +1667 -1062
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +1692 -1084
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +10 -10
  7. package/src/Editor.vue +70 -65
  8. package/src/components/ContentMenu.vue +5 -1
  9. package/src/components/SearchInput.vue +5 -1
  10. package/src/components/ToolButton.vue +1 -1
  11. package/src/editorProps.ts +51 -129
  12. package/src/fields/Code.vue +9 -3
  13. package/src/fields/DataSourceFieldSelect.vue +28 -16
  14. package/src/fields/DataSourceFields.vue +95 -7
  15. package/src/fields/DataSourceMethodSelect.vue +23 -14
  16. package/src/fields/DataSourceMocks.vue +237 -0
  17. package/src/fields/EventSelect.vue +30 -11
  18. package/src/index.ts +4 -1
  19. package/src/initService.ts +50 -20
  20. package/src/layouts/CodeEditor.vue +20 -4
  21. package/src/layouts/Framework.vue +3 -1
  22. package/src/layouts/PropsPanel.vue +3 -1
  23. package/src/layouts/sidebar/ComponentListPanel.vue +18 -8
  24. package/src/layouts/sidebar/Sidebar.vue +7 -10
  25. package/src/layouts/sidebar/code-block/CodeBlockList.vue +3 -1
  26. package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +3 -1
  27. package/src/layouts/sidebar/layer/LayerNode.vue +206 -0
  28. package/src/layouts/sidebar/layer/LayerNodeTool.vue +32 -0
  29. package/src/layouts/sidebar/layer/LayerPanel.vue +85 -0
  30. package/src/layouts/sidebar/layer/use-drag.ts +157 -0
  31. package/src/layouts/sidebar/layer/use-filter.ts +70 -0
  32. package/src/layouts/sidebar/layer/use-keybinding.ts +47 -0
  33. package/src/layouts/sidebar/layer/use-node-status.ts +103 -0
  34. package/src/layouts/workspace/Workspace.vue +3 -1
  35. package/src/layouts/workspace/viewer/NodeListMenu.vue +16 -9
  36. package/src/layouts/workspace/viewer/Stage.vue +19 -17
  37. package/src/layouts/workspace/viewer/ViewerMenu.vue +1 -1
  38. package/src/services/dataSource.ts +21 -0
  39. package/src/services/editor.ts +45 -5
  40. package/src/theme/common/var.scss +2 -2
  41. package/src/theme/content-menu.scss +22 -20
  42. package/src/theme/framework.scss +2 -0
  43. package/src/theme/layer-panel.scss +63 -63
  44. package/src/theme/props-panel.scss +8 -0
  45. package/src/theme/sidebar.scss +1 -5
  46. package/src/type.ts +61 -0
  47. package/src/utils/data-source/index.ts +23 -0
  48. package/src/utils/dep.ts +26 -11
  49. package/src/utils/editor.ts +14 -3
  50. package/src/utils/props.ts +4 -0
  51. package/types/editorProps.d.ts +61 -107
  52. package/types/fields/Code.vue.d.ts +10 -6
  53. package/types/fields/DataSourceMocks.vue.d.ts +32 -0
  54. package/types/index.d.ts +2 -1
  55. package/types/initService.d.ts +5 -4
  56. package/types/layouts/CodeEditor.vue.d.ts +5 -0
  57. package/types/layouts/Framework.vue.d.ts +2 -12
  58. package/types/layouts/PropsPanel.vue.d.ts +2 -3
  59. package/types/layouts/sidebar/ComponentListPanel.vue.d.ts +2 -7
  60. package/types/layouts/sidebar/Sidebar.vue.d.ts +2 -17
  61. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +2 -7
  62. package/types/layouts/sidebar/code-block/CodeBlockListPanel.vue.d.ts +2 -9
  63. package/types/layouts/sidebar/{LayerMenu.vue.d.ts → layer/LayerMenu.vue.d.ts} +1 -1
  64. package/types/layouts/sidebar/layer/LayerNode.vue.d.ts +50 -0
  65. package/types/layouts/sidebar/{LayerNode.vue.d.ts → layer/LayerNodeTool.vue.d.ts} +1 -1
  66. package/types/layouts/sidebar/{LayerPanel.vue.d.ts → layer/LayerPanel.vue.d.ts} +2 -8
  67. package/types/layouts/sidebar/layer/use-drag.d.ts +14 -0
  68. package/types/layouts/sidebar/layer/use-filter.d.ts +8 -0
  69. package/types/layouts/sidebar/layer/use-keybinding.d.ts +4 -0
  70. package/types/layouts/sidebar/layer/use-node-status.d.ts +7 -0
  71. package/types/layouts/workspace/Workspace.vue.d.ts +2 -11
  72. package/types/layouts/workspace/viewer/Stage.vue.d.ts +1 -1
  73. package/types/services/dataSource.d.ts +7 -0
  74. package/types/services/editor.d.ts +1 -0
  75. package/types/type.d.ts +61 -0
  76. package/types/utils/dep.d.ts +1 -1
  77. package/types/utils/editor.d.ts +3 -2
  78. package/src/layouts/sidebar/LayerNode.vue +0 -40
  79. package/src/layouts/sidebar/LayerPanel.vue +0 -369
  80. package/types/Editor.vue.d.ts +0 -233
  81. /package/src/layouts/sidebar/{LayerMenu.vue → layer/LayerMenu.vue} +0 -0
package/dist/style.css CHANGED
@@ -71,7 +71,7 @@
71
71
  align-items: center;
72
72
  background-color: #ffffff;
73
73
  font-size: 19.2px;
74
- color: #070303;
74
+ color: #313a40;
75
75
  font-weight: 400;
76
76
  box-sizing: border-box;
77
77
  margin: 0px;
@@ -113,7 +113,7 @@
113
113
  padding: 5px;
114
114
  }
115
115
  .m-editor-nav-menu .menu-item .is-text > i {
116
- color: #070303;
116
+ color: #313a40;
117
117
  }
118
118
  .m-editor-nav-menu .menu-item .icon {
119
119
  display: flex;
@@ -123,7 +123,7 @@
123
123
  padding: 0px 8px;
124
124
  }
125
125
  .m-editor-nav-menu .menu-item .menu-item-text {
126
- color: #070303;
126
+ color: #313a40;
127
127
  }
128
128
  .m-editor-nav-menu .menu-item.rule .el-icon {
129
129
  transform: rotate(-90deg);
@@ -132,6 +132,7 @@
132
132
  display: flex;
133
133
  flex-direction: column;
134
134
  width: 100%;
135
+ font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, Microsoft YaHei, sans-serif;
135
136
  }
136
137
  .m-editor-content {
137
138
  height: calc(100% - 35px);
@@ -227,12 +228,9 @@
227
228
  width: calc(100% - 40px);
228
229
  overflow: auto;
229
230
  }
230
- .m-editor-sidebar .el-scrollbar {
231
+ .m-editor-sidebar .tmagic-design-scrollbar {
231
232
  height: 100%;
232
233
  }
233
- .m-editor-sidebar .el-tree {
234
- min-height: 100%;
235
- }
236
234
  .m-editor-sidebar .fold-icon {
237
235
  position: absolute;
238
236
  bottom: 8px;
@@ -252,65 +250,56 @@
252
250
  }
253
251
  .magic-editor-layer-panel .magic-editor-layer-tree {
254
252
  padding-top: 48px;
253
+ background-color: #ffffff;
254
+ color: #313a40;
255
+ font-size: 13px;
255
256
  }
256
- .magic-editor-layer-panel .node-content {
257
- flex: 1;
257
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node {
258
+ cursor: pointer;
259
+ }
260
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node {
258
261
  display: flex;
259
- width: 100%;
262
+ align-items: center;
260
263
  }
261
- .magic-editor-layer-panel .node-content > div {
262
- width: 8px;
264
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node:hover {
265
+ background-color: #f3f5f9;
266
+ color: #313a40;
263
267
  }
264
- .magic-editor-layer-panel .node-content > span {
265
- width: calc(100% - 68px);
266
- white-space: nowrap;
267
- overflow: hidden;
268
- text-overflow: ellipsis;
268
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.selected {
269
+ background-color: #2882e0;
270
+ color: #f3f5f9;
269
271
  }
270
- .magic-editor-layer-panel .node-content > i {
271
- margin-right: 10px;
272
- font-size: 20px;
272
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.drag-inner .layer-node-content {
273
+ background-color: rgba(40, 130, 224, 0.5);
274
+ color: #f3f5f9;
273
275
  }
274
- .magic-editor-layer-panel .node-content > i.lock {
275
- color: #bbb;
276
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.drag-before .layer-node-content {
277
+ border-top-color: rgba(40, 130, 224, 0.5);
276
278
  }
277
- .magic-editor-layer-panel,
278
- .magic-editor-layer-panel .el-tree {
279
- background-color: #ffffff;
280
- color: #313a40;
279
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.drag-after .layer-node-content {
280
+ border-bottom-color: rgba(40, 130, 224, 0.5);
281
281
  }
282
- .magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
283
- background-color: #2882e0;
284
- color: #fff;
282
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .expand-icon {
283
+ padding: 4px;
284
+ box-sizing: content-box;
285
+ font-size: 14px;
285
286
  }
286
- .magic-editor-layer-panel .cus-tree-node {
287
- width: 100%;
288
- overflow: hidden;
287
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .layer-node-content {
289
288
  display: flex;
289
+ flex: 1;
290
290
  justify-content: space-between;
291
+ height: 22px;
292
+ border-top: 2px solid transparent;
293
+ border-bottom: 2px solid transparent;
291
294
  }
292
- .magic-editor-layer-panel .cus-tree-node .layer-node-tool {
293
- margin-right: 15px;
294
- }
295
- .magic-editor-layer-panel .cus-tree-node-hover {
296
- background-color: #f3f5f9;
297
- width: 100%;
298
- }
299
- .magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
300
- background-color: #2882e0;
301
- color: #fff;
295
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .layer-node-content .layer-node-label {
296
+ line-height: 22px;
297
+ flex: 1;
302
298
  }
303
- .ui-tree-tip {
304
- width: 100%;
305
- height: 25px;
306
- margin-left: 10px;
307
- background: #ffffff;
308
- font-style: italic;
309
- color: #555554;
310
- position: absolute;
311
- top: 40px;
312
- left: 0;
313
- z-index: 1;
299
+ .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .layer-node-tool {
300
+ margin-right: 15px;
301
+ display: flex;
302
+ align-items: center;
314
303
  }
315
304
  .ui-component-panel.tmagic-design-collapse {
316
305
  height: 100%;
@@ -325,7 +314,7 @@
325
314
  .ui-component-panel.tmagic-design-collapse .el-collapse-item__header,
326
315
  .ui-component-panel.tmagic-design-collapse .t-collapse-panel__header {
327
316
  background: #ffffff;
328
- color: #070303;
317
+ color: #313a40;
329
318
  height: 25px;
330
319
  line-height: 25px;
331
320
  padding-left: 10px;
@@ -356,7 +345,7 @@
356
345
  text-overflow: ellipsis;
357
346
  margin: 5px 10px;
358
347
  box-sizing: border-box;
359
- color: #070303;
348
+ color: #313a40;
360
349
  flex-direction: column;
361
350
  width: 42px;
362
351
  cursor: pointer;
@@ -471,7 +460,7 @@
471
460
  width: 100%;
472
461
  height: 32px;
473
462
  line-height: 32px;
474
- color: #070303;
463
+ color: #313a40;
475
464
  background-color: #f3f3f3;
476
465
  border-top: 1px solid #d9dbdd;
477
466
  z-index: 2;
@@ -518,7 +507,7 @@
518
507
  }
519
508
  .page-bar-popover .menu-item .el-button--text,
520
509
  .page-bar-popover .menu-item i {
521
- color: #070303;
510
+ color: #313a40;
522
511
  }
523
512
  .page-bar-popover .menu-item:hover {
524
513
  background-color: #f3f5f9;
@@ -538,6 +527,9 @@
538
527
  .m-editor-props-panel .el-input__wrapper {
539
528
  border-radius: 0;
540
529
  }
530
+ .m-editor-props-panel .m-fields-group-list .tmagic-design-table th {
531
+ font-size: 12px;
532
+ }
541
533
  .m-editor-props-panel-popper.small span,
542
534
  .m-editor-props-panel-popper.small a,
543
535
  .m-editor-props-panel-popper.small p {
@@ -573,7 +565,7 @@
573
565
  }
574
566
  .magic-editor-content-menu .menu-item .el-button--text,
575
567
  .magic-editor-content-menu .menu-item i {
576
- color: #070303;
568
+ color: #313a40;
577
569
  }
578
570
  .magic-editor-content-menu .menu-item .magic-editor-icon {
579
571
  margin-right: 5px;
@@ -584,28 +576,28 @@
584
576
  .magic-editor-content-menu .menu-item.divider .el-divider {
585
577
  margin: 0;
586
578
  }
587
- .magic-editor-content-menu .menu-item.active {
588
- background-color: #2882e0;
579
+ .magic-editor-content-menu .menu-item.button:hover {
580
+ background-color: #f3f5f9;
589
581
  }
590
- .magic-editor-content-menu .menu-item.active .tmagic-design-button,
591
- .magic-editor-content-menu .menu-item.active .tmagic-design-button:active,
592
- .magic-editor-content-menu .menu-item.active .tmagic-design-button:focus {
593
- color: #fff;
594
- background-color: #2882e0;
582
+ .magic-editor-content-menu .menu-item.button:hover .tmagic-design-button,
583
+ .magic-editor-content-menu .menu-item.button:hover .tmagic-design-button:active,
584
+ .magic-editor-content-menu .menu-item.button:hover .tmagic-design-button:focus {
585
+ color: #313a40;
595
586
  }
596
- .magic-editor-content-menu .menu-item.active.menu-item i {
597
- color: #fff;
587
+ .magic-editor-content-menu .menu-item.button:hover.menu-item i {
588
+ color: #313a40;
598
589
  }
599
- .magic-editor-content-menu .menu-item:hover {
600
- background-color: #f3f5f9;
590
+ .magic-editor-content-menu .menu-item.button.active {
591
+ background-color: #2882e0;
601
592
  }
602
- .magic-editor-content-menu .menu-item:hover .tmagic-design-button,
603
- .magic-editor-content-menu .menu-item:hover .tmagic-design-button:active,
604
- .magic-editor-content-menu .menu-item:hover .tmagic-design-button:focus {
605
- color: #070303;
593
+ .magic-editor-content-menu .menu-item.button.active .tmagic-design-button,
594
+ .magic-editor-content-menu .menu-item.button.active .tmagic-design-button:active,
595
+ .magic-editor-content-menu .menu-item.button.active .tmagic-design-button:focus {
596
+ color: #fff;
597
+ background-color: transparent;
606
598
  }
607
- .magic-editor-content-menu .menu-item:hover.menu-item i {
608
- color: #070303;
599
+ .magic-editor-content-menu .menu-item.button.active.menu-item i {
600
+ color: #fff;
609
601
  }
610
602
  .m-editor-stage {
611
603
  position: relative;