@tmagic/editor 1.1.0-beta.9 → 1.1.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 (70) hide show
  1. package/dist/style.css +53 -4
  2. package/dist/tmagic-editor.mjs +1134 -928
  3. package/dist/tmagic-editor.mjs.map +1 -1
  4. package/dist/tmagic-editor.umd.js +1138 -929
  5. package/dist/tmagic-editor.umd.js.map +1 -1
  6. package/package.json +10 -10
  7. package/src/Editor.vue +28 -8
  8. package/src/components/ContentMenu.vue +4 -4
  9. package/src/components/Icon.vue +11 -23
  10. package/src/components/ScrollBar.vue +147 -0
  11. package/src/components/ScrollViewer.vue +89 -44
  12. package/src/components/ToolButton.vue +40 -138
  13. package/src/fields/UISelect.vue +2 -2
  14. package/src/index.ts +2 -2
  15. package/src/layouts/NavMenu.vue +156 -23
  16. package/src/layouts/PropsPanel.vue +49 -51
  17. package/src/layouts/sidebar/ComponentListPanel.vue +78 -90
  18. package/src/layouts/sidebar/LayerMenu.vue +3 -3
  19. package/src/layouts/sidebar/LayerPanel.vue +39 -8
  20. package/src/layouts/sidebar/Sidebar.vue +4 -0
  21. package/src/layouts/sidebar/TabPane.vue +12 -0
  22. package/src/layouts/workspace/PageBar.vue +2 -2
  23. package/src/layouts/workspace/PageBarScrollContainer.vue +13 -3
  24. package/src/layouts/workspace/Stage.vue +10 -92
  25. package/src/layouts/workspace/ViewerMenu.vue +3 -3
  26. package/src/layouts/workspace/Workspace.vue +133 -138
  27. package/src/services/componentList.ts +5 -0
  28. package/src/services/editor.ts +57 -20
  29. package/src/services/events.ts +8 -2
  30. package/src/services/props.ts +31 -52
  31. package/src/services/storage.ts +4 -0
  32. package/src/services/ui.ts +33 -30
  33. package/src/theme/component-list-panel.scss +0 -5
  34. package/src/theme/content-menu.scss +4 -0
  35. package/src/theme/icon.scss +6 -0
  36. package/src/theme/index.scss +1 -0
  37. package/src/theme/nav-menu.scss +6 -0
  38. package/src/type.ts +28 -10
  39. package/src/utils/index.ts +1 -0
  40. package/src/utils/operator.ts +3 -3
  41. package/src/utils/props.ts +0 -3
  42. package/src/utils/scroll-viewer.ts +90 -158
  43. package/src/utils/stage.ts +91 -0
  44. package/types/Editor.vue.d.ts +7 -7
  45. package/types/components/ContentMenu.vue.d.ts +8 -8
  46. package/types/components/Icon.vue.d.ts +62 -12
  47. package/types/components/ScrollBar.vue.d.ts +83 -0
  48. package/types/components/ScrollViewer.vue.d.ts +131 -19
  49. package/types/components/ToolButton.vue.d.ts +56 -59
  50. package/types/index.d.ts +2 -1
  51. package/types/layouts/NavMenu.vue.d.ts +92 -23
  52. package/types/layouts/PropsPanel.vue.d.ts +25 -208
  53. package/types/layouts/sidebar/ComponentListPanel.vue.d.ts +50 -12
  54. package/types/layouts/sidebar/LayerMenu.vue.d.ts +7 -7
  55. package/types/layouts/sidebar/LayerPanel.vue.d.ts +17 -15
  56. package/types/layouts/workspace/Workspace.vue.d.ts +54 -4
  57. package/types/services/componentList.d.ts +1 -0
  58. package/types/services/editor.d.ts +1 -0
  59. package/types/services/events.d.ts +1 -0
  60. package/types/services/props.d.ts +41 -9
  61. package/types/services/storage.d.ts +1 -0
  62. package/types/services/ui.d.ts +4 -1
  63. package/types/type.d.ts +25 -10
  64. package/types/utils/index.d.ts +1 -0
  65. package/types/utils/operator.d.ts +1 -1
  66. package/types/utils/props.d.ts +0 -1
  67. package/types/utils/scroll-viewer.d.ts +16 -18
  68. package/types/utils/stage.d.ts +3 -0
  69. package/src/utils/polyfills.ts +0 -8
  70. package/types/utils/polyfills.d.ts +0 -0
package/dist/style.css CHANGED
@@ -6,6 +6,49 @@
6
6
  }
7
7
  .m-fields-ui-select span {
8
8
  color: #2882e0;
9
+ }.m-editor-scroll-bar {
10
+ position: absolute;
11
+ background-color: transparent;
12
+ opacity: 0.3;
13
+ transition: background-color 0.2s linear, opacity 0.2s linear;
14
+ }
15
+ .m-editor-scroll-bar .m-editor-scroll-bar-thumb {
16
+ background-color: #aaa;
17
+ border-radius: 6px;
18
+ position: absolute;
19
+ }
20
+ .m-editor-scroll-bar.horizontal {
21
+ width: 100%;
22
+ height: 15px;
23
+ bottom: 0;
24
+ }
25
+ .m-editor-scroll-bar.horizontal .m-editor-scroll-bar-thumb {
26
+ height: 6px;
27
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
28
+ bottom: 2px;
29
+ }
30
+ .m-editor-scroll-bar.vertical {
31
+ height: 100%;
32
+ width: 15px;
33
+ right: 5px;
34
+ }
35
+ .m-editor-scroll-bar.vertical .m-editor-scroll-bar-thumb {
36
+ width: 6px;
37
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
38
+ right: 2px;
39
+ }
40
+ .m-editor-scroll-bar:hover, .m-editor-scroll-bar:focus {
41
+ background-color: #eee;
42
+ opacity: 0.9;
43
+ }
44
+ .m-editor-scroll-bar:hover .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus .m-editor-scroll-bar-thumb {
45
+ background-color: #999;
46
+ }
47
+ .m-editor-scroll-bar:hover.horizontal .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.horizontal .m-editor-scroll-bar-thumb {
48
+ height: 11px;
49
+ }
50
+ .m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
51
+ width: 11px;
9
52
  }.m-editor-nav-menu {
10
53
  display: flex;
11
54
  z-index: 5;
@@ -70,6 +113,9 @@
70
113
  .m-editor-nav-menu .menu-item .menu-item-text {
71
114
  color: #070303;
72
115
  }
116
+ .m-editor-nav-menu .menu-item.rule .el-icon {
117
+ transform: rotate(-90deg);
118
+ }
73
119
  .m-editor {
74
120
  display: flex;
75
121
  flex-direction: column;
@@ -353,10 +399,6 @@
353
399
  color: #fff;
354
400
  border-color: #4e8be1;
355
401
  }
356
- .ui-component-panel .el-collapse-item__wrap .component-item img {
357
- max-width: 100%;
358
- max-height: 100%;
359
- }
360
402
  .ui-component-panel .el-collapse-item__wrap .component-item span {
361
403
  font-size: 12px;
362
404
  text-align: center;
@@ -532,6 +574,9 @@
532
574
  .magic-editor-content-menu .menu-item i {
533
575
  color: #070303;
534
576
  }
577
+ .magic-editor-content-menu .menu-item .magic-editor-icon {
578
+ margin-right: 5px;
579
+ }
535
580
  .magic-editor-content-menu .menu-item.divider {
536
581
  padding: 0 14px;
537
582
  }
@@ -567,4 +612,8 @@
567
612
  }
568
613
  .magic-code-editor .margin {
569
614
  margin: 0;
615
+ }
616
+ .magic-editor-icon img {
617
+ max-width: 100%;
618
+ max-height: 100%;
570
619
  }