@tmagic/editor 1.0.0-beta.2 → 1.0.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 (52) hide show
  1. package/package.json +8 -6
  2. package/src/Editor.vue +5 -5
  3. package/src/components/ScrollViewer.vue +65 -0
  4. package/src/layouts/CodeEditor.vue +35 -59
  5. package/src/layouts/workspace/Stage.vue +62 -50
  6. package/src/layouts/workspace/Workspace.vue +2 -21
  7. package/src/services/ui.ts +36 -2
  8. package/src/theme/stage.scss +7 -7
  9. package/src/type.ts +17 -6
  10. package/src/utils/scroll-viewer.ts +213 -0
  11. package/dist/style.css +0 -505
  12. package/dist/tmagic-editor.es.js +0 -4233
  13. package/dist/tmagic-editor.es.js.map +0 -1
  14. package/dist/tmagic-editor.umd.js +0 -4276
  15. package/dist/tmagic-editor.umd.js.map +0 -1
  16. package/dist/types/src/Editor.vue.d.ts +0 -136
  17. package/dist/types/src/components/Icon.vue.d.ts +0 -13
  18. package/dist/types/src/components/ToolButton.vue.d.ts +0 -35
  19. package/dist/types/src/fields/Code.vue.d.ts +0 -24
  20. package/dist/types/src/fields/CodeLink.vue.d.ts +0 -54
  21. package/dist/types/src/fields/UISelect.vue.d.ts +0 -32
  22. package/dist/types/src/index.d.ts +0 -19
  23. package/dist/types/src/layouts/AddPageBox.vue.d.ts +0 -5
  24. package/dist/types/src/layouts/CodeEditor.vue.d.ts +0 -46
  25. package/dist/types/src/layouts/Framework.vue.d.ts +0 -11
  26. package/dist/types/src/layouts/NavMenu.vue.d.ts +0 -24
  27. package/dist/types/src/layouts/PropsPanel.vue.d.ts +0 -13
  28. package/dist/types/src/layouts/Resizer.vue.d.ts +0 -13
  29. package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts +0 -12
  30. package/dist/types/src/layouts/sidebar/LayerMenu.vue.d.ts +0 -31
  31. package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts +0 -973
  32. package/dist/types/src/layouts/sidebar/Sidebar.vue.d.ts +0 -27
  33. package/dist/types/src/layouts/workspace/PageBar.vue.d.ts +0 -11
  34. package/dist/types/src/layouts/workspace/Stage.vue.d.ts +0 -153
  35. package/dist/types/src/layouts/workspace/ViewerMenu.vue.d.ts +0 -18
  36. package/dist/types/src/layouts/workspace/Workspace.vue.d.ts +0 -37
  37. package/dist/types/src/services/BaseService.d.ts +0 -56
  38. package/dist/types/src/services/editor.d.ts +0 -122
  39. package/dist/types/src/services/events.d.ts +0 -16
  40. package/dist/types/src/services/history.d.ts +0 -51
  41. package/dist/types/src/services/props.d.ts +0 -36
  42. package/dist/types/src/services/ui.d.ts +0 -26
  43. package/dist/types/src/shims-vue.d.ts +0 -6
  44. package/dist/types/src/type.d.ts +0 -183
  45. package/dist/types/src/utils/compose.d.ts +0 -5
  46. package/dist/types/src/utils/config.d.ts +0 -4
  47. package/dist/types/src/utils/editor.d.ts +0 -45
  48. package/dist/types/src/utils/index.d.ts +0 -4
  49. package/dist/types/src/utils/logger.d.ts +0 -5
  50. package/dist/types/src/utils/props.d.ts +0 -49
  51. package/dist/types/src/utils/undo-redo.d.ts +0 -12
  52. package/dist/types/src/vite-env.d.ts +0 -1
package/dist/style.css DELETED
@@ -1,505 +0,0 @@
1
- .m-fields-ui-select {
2
- cursor: pointer;
3
- }
4
- .m-fields-ui-select i {
5
- margin-right: 3px;
6
- }
7
- .m-fields-ui-select span {
8
- color: #2882e0;
9
- }.m-editor-nav-menu {
10
- display: flex;
11
- z-index: 5;
12
- -webkit-box-pack: justify;
13
- justify-content: space-between;
14
- -webkit-box-align: center;
15
- align-items: center;
16
- background-color: #f8fbff;
17
- font-size: 19.2px;
18
- color: #070303;
19
- font-weight: 400;
20
- box-sizing: border-box;
21
- margin: 0px;
22
- flex: 0 0 35px;
23
- border-bottom: 1px solid #d8dee8;
24
- }
25
- .m-editor-nav-menu > div {
26
- display: flex;
27
- height: 100%;
28
- z-index: 1;
29
- align-items: center;
30
- }
31
- .m-editor-nav-menu .menu-left {
32
- padding-left: 16px;
33
- }
34
- .m-editor-nav-menu .menu-right {
35
- padding-right: 16px;
36
- }
37
- .m-editor-nav-menu .menu-item {
38
- flex-direction: row;
39
- -webkit-box-align: center;
40
- align-items: center;
41
- vertical-align: middle;
42
- font-size: 14px;
43
- line-height: 1;
44
- height: 100%;
45
- color: rgba(255, 255, 255, 0.7);
46
- box-sizing: inherit;
47
- z-index: 1;
48
- display: flex !important;
49
- transition: all 0.3s ease 0s;
50
- border-bottom: 2px solid transparent;
51
- margin: 0 5px;
52
- }
53
- .m-editor-nav-menu .menu-item .is-disabled {
54
- opacity: 0.5;
55
- }
56
- .m-editor-nav-menu .menu-item .el-button--text,
57
- .m-editor-nav-menu .menu-item i {
58
- color: #070303;
59
- }
60
- .m-editor-nav-menu .menu-item .icon {
61
- display: flex;
62
- -webkit-box-align: center;
63
- align-items: center;
64
- height: 100%;
65
- padding: 0px 8px;
66
- }
67
- .m-editor-nav-menu .menu-item .menu-item-text {
68
- color: #070303;
69
- }
70
- .m-editor {
71
- display: flex;
72
- flex-direction: column;
73
- width: 100%;
74
- }
75
- .m-editor-content {
76
- width: 100%;
77
- height: calc(100% - 35px);
78
- display: flex;
79
- justify-self: space-between;
80
- }
81
- .m-editor-framework-center {
82
- position: relative;
83
- transform: translateZ(0);
84
- flex: 1;
85
- }
86
- .m-editor-framework-left {
87
- background-color: #f8fbff;
88
- }
89
- .m-editor-framework-center .el-scrollbar__view {
90
- height: 100%;
91
- min-height: 100%;
92
- display: flex;
93
- justify-content: center;
94
- align-items: center;
95
- }
96
- .m-editor-empty-panel {
97
- display: flex;
98
- flex: 1;
99
- justify-content: center;
100
- align-items: center;
101
- flex-direction: column;
102
- height: calc(100% - 32px);
103
- }
104
- .m-editor-empty-content {
105
- display: flex;
106
- justify-content: space-evenly;
107
- flex-direction: row;
108
- width: 100%;
109
- }
110
- .m-editor-empty-button {
111
- border: 3px solid rgba(0, 0, 0, 0.2);
112
- padding: 10px 40px;
113
- color: rgba(0, 0, 0, 0.6);
114
- cursor: pointer;
115
- }
116
- .m-editor-empty-button i {
117
- height: 180px;
118
- line-height: 180px;
119
- font-size: 100px;
120
- }
121
- .m-editor-empty-button p {
122
- text-align: center;
123
- font-size: 20px;
124
- margin-top: 5px;
125
- }
126
- .m-editor-empty-button:hover {
127
- border-color: #2882e0;
128
- color: #2882e0;
129
- }
130
- .m-editor-sidebar {
131
- height: 100%;
132
- }
133
- .m-editor-sidebar.el-tabs--left .el-tabs__header {
134
- background: #2882e0;
135
- border: 0;
136
- }
137
- .m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {
138
- width: 40px;
139
- margin-right: 0;
140
- }
141
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {
142
- margin: 0;
143
- }
144
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {
145
- border: 0;
146
- border-radius: 0;
147
- }
148
- .m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {
149
- margin-left: 2px;
150
- }
151
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {
152
- line-height: 15px;
153
- border: 0;
154
- height: auto;
155
- padding: 8px;
156
- color: white;
157
- box-sizing: border-box;
158
- }
159
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {
160
- background: #f8fbff;
161
- border: 0;
162
- }
163
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {
164
- color: #353140;
165
- }
166
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {
167
- color: #353140;
168
- }
169
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {
170
- border-right: 0;
171
- }
172
- .m-editor-sidebar.el-tabs--left .el-tabs__header i {
173
- font-size: 25px;
174
- color: rgba(255, 255, 255, 0.6);
175
- }
176
- .m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {
177
- color: white;
178
- }
179
- .m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {
180
- font-size: 12px;
181
- white-space: normal;
182
- }
183
- .m-editor-sidebar .el-scrollbar {
184
- height: 100%;
185
- }
186
- .m-editor-sidebar .el-tree {
187
- min-height: 100%;
188
- }
189
- .m-editor-sidebar .fold-icon {
190
- position: absolute;
191
- bottom: 8px;
192
- left: 0px;
193
- width: 45px;
194
- padding-left: 8px;
195
- color: #fff;
196
- font-size: 32px;
197
- opacity: 0.8;
198
- cursor: pointer;
199
- }
200
- .m-editor-sidebar .fold-icon:hover {
201
- background: rgba(0, 0, 0, 0.2);
202
- }
203
- .m-editor-sidebar .el-tabs__content,
204
- .m-editor-sidebar .el-tab-pane {
205
- height: 100%;
206
- }
207
- .magic-editor-layer-panel {
208
- background: #f8fbff;
209
- }
210
- .magic-editor-layer-panel .search-input {
211
- background: #f8fbff;
212
- color: #bbbbbb;
213
- padding: 10px;
214
- position: absolute;
215
- top: 0;
216
- left: 0;
217
- z-index: 1;
218
- }
219
- .magic-editor-layer-panel .search-input .el-input__suffix {
220
- padding: 10px 5px;
221
- }
222
- .magic-editor-layer-panel .node-content {
223
- flex: 1;
224
- display: flex;
225
- width: 100%;
226
- }
227
- .magic-editor-layer-panel .node-content > div {
228
- width: 8px;
229
- }
230
- .magic-editor-layer-panel .node-content > span {
231
- width: calc(100% - 68px);
232
- white-space: nowrap;
233
- overflow: hidden;
234
- text-overflow: ellipsis;
235
- }
236
- .magic-editor-layer-panel .node-content > i {
237
- margin-right: 10px;
238
- font-size: 20px;
239
- }
240
- .magic-editor-layer-panel .node-content > i.lock {
241
- color: #bbb;
242
- }
243
- .magic-editor-layer-panel,
244
- .magic-editor-layer-panel .el-tree {
245
- background-color: #f8fbff;
246
- color: #313a40;
247
- }
248
- .magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
249
- background-color: #2882e0;
250
- color: #fff;
251
- }
252
- .magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
253
- background-color: #2882e0;
254
- color: #fff;
255
- }
256
- .ui-tree-tip {
257
- width: 100%;
258
- height: 25px;
259
- margin-left: 10px;
260
- background: #f8fbff;
261
- font-style: italic;
262
- color: #555554;
263
- position: absolute;
264
- top: 40px;
265
- left: 0;
266
- z-index: 1;
267
- }
268
- .ui-component-panel {
269
- height: 100%;
270
- border-top: 0 !important;
271
- margin-top: 50px;
272
- background-color: #f8fbff;
273
- }
274
- .ui-component-panel .search-input {
275
- background: #f8fbff;
276
- color: #bbbbbb;
277
- padding: 10px;
278
- position: absolute;
279
- top: 0;
280
- left: 0;
281
- box-sizing: border-box;
282
- }
283
- .ui-component-panel .search-input .el-input__prefix {
284
- padding: 10px;
285
- }
286
- .ui-component-panel .search-input .el-input__suffix {
287
- padding: 10px 5px;
288
- }
289
- .ui-component-panel .el-collapse-item > div:first-of-type {
290
- border-bottom: 1px solid #d9dbdd;
291
- margin-bottom: 10px;
292
- }
293
- .ui-component-panel .el-collapse-item__header {
294
- background: #f8fbff;
295
- color: #070303;
296
- height: 25px;
297
- line-height: 25px;
298
- padding-left: 10px;
299
- font-size: 12px;
300
- }
301
- .ui-component-panel .el-collapse-item__header i {
302
- margin-right: 5px;
303
- font-size: 14px;
304
- }
305
- .ui-component-panel .el-collapse-item__wrap {
306
- background: #f8fbff;
307
- border-bottom: 0;
308
- }
309
- .ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {
310
- padding: 10px;
311
- display: flex;
312
- flex-wrap: wrap;
313
- }
314
- .ui-component-panel .el-collapse-item__wrap .component-item {
315
- display: flex;
316
- overflow: hidden;
317
- text-overflow: ellipsis;
318
- margin: 5px 10px;
319
- box-sizing: border-box;
320
- color: #070303;
321
- flex-direction: column;
322
- width: 42px;
323
- }
324
- .ui-component-panel .el-collapse-item__wrap .component-item i {
325
- font-size: 20px;
326
- background: #fff;
327
- height: 40px;
328
- width: 40px;
329
- line-height: 40px;
330
- border-radius: 5px;
331
- color: #909090;
332
- border: 1px solid #d9dbdd;
333
- display: flex;
334
- justify-content: space-evenly;
335
- align-items: center;
336
- margin-bottom: 5px;
337
- }
338
- .ui-component-panel .el-collapse-item__wrap .component-item i:hover {
339
- background: #2882e0;
340
- color: #fff;
341
- border-color: #4e8be1;
342
- }
343
- .ui-component-panel .el-collapse-item__wrap .component-item span {
344
- font-size: 12px;
345
- text-align: center;
346
- }
347
- .ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {
348
- width: 50px;
349
- height: 30px;
350
- line-height: 15px;
351
- display: block;
352
- white-space: normal;
353
- margin: 0;
354
- }
355
- .m-editor-resizer {
356
- border-left: 1px solid transparent;
357
- border-right: 1px solid transparent;
358
- width: 8px;
359
- margin: 0 -5px;
360
- height: 100%;
361
- opacity: 0.9;
362
- background: padding-box #d8dee8;
363
- box-sizing: border-box;
364
- cursor: col-resize;
365
- z-index: 1;
366
- }
367
- .m-editor-resizer:hover {
368
- border-color: #d8dee8;
369
- }
370
- .m-editor-resizer .icon-container {
371
- visibility: hidden;
372
- opacity: 0;
373
- transition: opacity 0.4s;
374
- width: 20px;
375
- height: 120px;
376
- line-height: 120px;
377
- text-align: center;
378
- background: #d8dee8;
379
- position: absolute;
380
- top: 50%;
381
- left: 50%;
382
- transform: translate(-50%, -50%);
383
- cursor: pointer;
384
- }
385
- .m-editor-resizer .icon-container.position-left {
386
- transform: translate(calc(-100% - 4px), -50%);
387
- }
388
- .m-editor-resizer .icon-container.position-right {
389
- transform: translate(calc(100% + 4px), -50%);
390
- }
391
- .m-editor-resizer .icon {
392
- color: #fff;
393
- font-size: 18px;
394
- }
395
- .magic-editor-resizer:hover .icon-container {
396
- visibility: visible;
397
- opacity: 1;
398
- }
399
- .m-editor-workspace {
400
- height: 100%;
401
- width: 100%;
402
- user-select: none;
403
- }
404
- .m-editor-page-bar {
405
- position: fixed;
406
- bottom: 0;
407
- left: 0;
408
- display: flex;
409
- width: 100%;
410
- height: 32px;
411
- line-height: 32px;
412
- background-color: #f3f3f3;
413
- color: #070303;
414
- border-top: 1px solid #d9dbdd;
415
- z-index: 2;
416
- }
417
- .m-editor-page-bar .m-editor-page-bar-item {
418
- padding: 0 10px;
419
- cursor: pointer;
420
- border-right: 1px solid #d9dbdd;
421
- display: flex;
422
- justify-items: center;
423
- align-items: center;
424
- }
425
- .m-editor-page-bar .m-editor-page-bar-item.active {
426
- background-color: #fff;
427
- cursor: text;
428
- }
429
- .m-editor-page-bar .m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {
430
- cursor: pointer;
431
- }
432
- .m-editor-props-panel {
433
- padding: 0 10px;
434
- }
435
- .m-editor-props-panel .el-form-item__label {
436
- font-size: 12px;
437
- }
438
- .m-editor-props-panel .m-fieldset legend {
439
- font-size: 12px;
440
- }
441
- .m-editor-props-panel .el-tabs__item {
442
- font-size: 12px;
443
- }
444
- .magic-editor-content-menu {
445
- position: fixed;
446
- font-size: 12px;
447
- background: #fff;
448
- color: #333;
449
- box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
450
- z-index: 9999;
451
- transform-origin: 0% 0%;
452
- font-weight: 600;
453
- padding: 4px 0px;
454
- }
455
- .magic-editor-content-menu .separation {
456
- width: 100%;
457
- height: 0;
458
- border-color: rgba(155, 155, 155, 0.1);
459
- }
460
- .magic-editor-content-menu .subMenu {
461
- position: absolute;
462
- right: 0;
463
- transform: translate(100%, 0);
464
- background-color: #fff;
465
- color: #333;
466
- box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
467
- top: 0;
468
- height: 223px;
469
- }
470
- .magic-editor-content-menu-item {
471
- display: flex;
472
- -webkit-box-align: center;
473
- align-items: center;
474
- cursor: pointer;
475
- min-width: 140px;
476
- transition: all 0.2s ease 0s;
477
- padding: 10px 14px;
478
- border-left: 2px solid transparent;
479
- }
480
- .m-editor-stage {
481
- position: relative;
482
- width: 100%;
483
- height: calc(100% - 32px);
484
- overflow: auto;
485
- }
486
- .m-editor-stage-container {
487
- transition: transform 0.3s;
488
- transform-origin: center -50%;
489
- z-index: 0;
490
- top: 50%;
491
- margin: 0 auto;
492
- position: relative;
493
- width: 375px;
494
- height: 80%;
495
- border: 1px solid #d9dbdd;
496
- }
497
- .m-editor-stage-container::-webkit-scrollbar {
498
- width: 0 !important;
499
- }
500
- .magic-code-editor {
501
- width: 100%;
502
- }
503
- .magic-code-editor .margin {
504
- margin: 0;
505
- }