@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.12
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.
- package/LICENSE +5432 -0
- package/README.md +1 -0
- package/dist/style.css +53 -24
- package/dist/tmagic-editor.es.js +901 -412
- package/dist/tmagic-editor.es.js.map +1 -1
- package/dist/tmagic-editor.umd.js +918 -412
- package/dist/tmagic-editor.umd.js.map +1 -1
- package/dist/types/src/Editor.vue.d.ts +5 -5
- package/dist/types/src/components/ScrollViewer.vue.d.ts +23 -0
- package/dist/types/src/layouts/CodeEditor.vue.d.ts +5 -4
- package/dist/types/src/layouts/NavMenu.vue.d.ts +2 -1
- package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts +1 -1
- package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts +10 -3
- package/dist/types/src/layouts/workspace/PageBar.vue.d.ts +8 -3
- package/dist/types/src/layouts/workspace/Stage.vue.d.ts +77 -42
- package/dist/types/src/layouts/workspace/Workspace.vue.d.ts +4 -10
- package/dist/types/src/services/BaseService.d.ts +4 -1
- package/dist/types/src/services/editor.d.ts +11 -4
- package/dist/types/src/services/props.d.ts +1 -1
- package/dist/types/src/services/ui.d.ts +10 -3
- package/dist/types/src/type.d.ts +23 -7
- package/dist/types/src/utils/editor.d.ts +3 -3
- package/dist/types/src/utils/scroll-viewer.d.ts +35 -0
- package/package.json +25 -12
- package/src/Editor.vue +5 -5
- package/src/components/ScrollViewer.vue +66 -0
- package/src/components/ToolButton.vue +5 -3
- package/src/layouts/AddPageBox.vue +3 -1
- package/src/layouts/CodeEditor.vue +35 -59
- package/src/layouts/NavMenu.vue +7 -3
- package/src/layouts/PropsPanel.vue +6 -10
- package/src/layouts/sidebar/ComponentListPanel.vue +2 -2
- package/src/layouts/sidebar/LayerMenu.vue +15 -39
- package/src/layouts/sidebar/LayerPanel.vue +63 -16
- package/src/layouts/workspace/PageBar.vue +113 -14
- package/src/layouts/workspace/Stage.vue +67 -61
- package/src/layouts/workspace/ViewerMenu.vue +5 -3
- package/src/layouts/workspace/Workspace.vue +45 -34
- package/src/services/BaseService.ts +70 -22
- package/src/services/editor.ts +111 -55
- package/src/services/props.ts +2 -1
- package/src/services/ui.ts +42 -5
- package/src/theme/common/var.scss +2 -2
- package/src/theme/layer-panel.scss +9 -0
- package/src/theme/nav-menu.scss +3 -3
- package/src/theme/page-bar.scss +21 -2
- package/src/theme/props-panel.scss +8 -0
- package/src/theme/stage.scss +8 -7
- package/src/type.ts +26 -7
- package/src/utils/editor.ts +30 -27
- package/src/utils/props.ts +1 -1
- package/src/utils/scroll-viewer.ts +216 -0
- package/dist/types/src/layouts/sidebar/LayerMenu.vue.d.ts +0 -31
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# [文档](https://tencent.github.io/tmagic-editor/docs/)
|
package/dist/style.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
justify-content: space-between;
|
|
14
14
|
-webkit-box-align: center;
|
|
15
15
|
align-items: center;
|
|
16
|
-
background-color: #
|
|
16
|
+
background-color: #ffffff;
|
|
17
17
|
font-size: 19.2px;
|
|
18
18
|
color: #070303;
|
|
19
19
|
font-weight: 400;
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
z-index: 1;
|
|
29
29
|
align-items: center;
|
|
30
30
|
}
|
|
31
|
-
.m-editor-nav-menu .menu-
|
|
32
|
-
|
|
31
|
+
.m-editor-nav-menu .menu-center {
|
|
32
|
+
justify-content: center;
|
|
33
33
|
}
|
|
34
34
|
.m-editor-nav-menu .menu-right {
|
|
35
|
-
|
|
35
|
+
justify-content: flex-end;
|
|
36
36
|
}
|
|
37
37
|
.m-editor-nav-menu .menu-item {
|
|
38
38
|
flex-direction: row;
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
flex: 1;
|
|
85
85
|
}
|
|
86
86
|
.m-editor-framework-left {
|
|
87
|
-
background-color: #
|
|
87
|
+
background-color: #ffffff;
|
|
88
88
|
}
|
|
89
89
|
.m-editor-framework-center .el-scrollbar__view {
|
|
90
90
|
height: 100%;
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
box-sizing: border-box;
|
|
158
158
|
}
|
|
159
159
|
.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {
|
|
160
|
-
background: #
|
|
160
|
+
background: #ffffff;
|
|
161
161
|
border: 0;
|
|
162
162
|
}
|
|
163
163
|
.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {
|
|
@@ -205,10 +205,10 @@
|
|
|
205
205
|
height: 100%;
|
|
206
206
|
}
|
|
207
207
|
.magic-editor-layer-panel {
|
|
208
|
-
background: #
|
|
208
|
+
background: #ffffff;
|
|
209
209
|
}
|
|
210
210
|
.magic-editor-layer-panel .search-input {
|
|
211
|
-
background: #
|
|
211
|
+
background: #ffffff;
|
|
212
212
|
color: #bbbbbb;
|
|
213
213
|
padding: 10px;
|
|
214
214
|
position: absolute;
|
|
@@ -242,13 +242,20 @@
|
|
|
242
242
|
}
|
|
243
243
|
.magic-editor-layer-panel,
|
|
244
244
|
.magic-editor-layer-panel .el-tree {
|
|
245
|
-
background-color: #
|
|
245
|
+
background-color: #ffffff;
|
|
246
246
|
color: #313a40;
|
|
247
247
|
}
|
|
248
248
|
.magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
249
249
|
background-color: #2882e0;
|
|
250
250
|
color: #fff;
|
|
251
251
|
}
|
|
252
|
+
.magic-editor-layer-panel .cus-tree-node {
|
|
253
|
+
width: 100%;
|
|
254
|
+
}
|
|
255
|
+
.magic-editor-layer-panel .cus-tree-node-hover {
|
|
256
|
+
background-color: #f3f5f9;
|
|
257
|
+
width: 100%;
|
|
258
|
+
}
|
|
252
259
|
.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
|
|
253
260
|
background-color: #2882e0;
|
|
254
261
|
color: #fff;
|
|
@@ -257,7 +264,7 @@
|
|
|
257
264
|
width: 100%;
|
|
258
265
|
height: 25px;
|
|
259
266
|
margin-left: 10px;
|
|
260
|
-
background: #
|
|
267
|
+
background: #ffffff;
|
|
261
268
|
font-style: italic;
|
|
262
269
|
color: #555554;
|
|
263
270
|
position: absolute;
|
|
@@ -269,7 +276,7 @@
|
|
|
269
276
|
height: 100%;
|
|
270
277
|
border-top: 0 !important;
|
|
271
278
|
margin-top: 50px;
|
|
272
|
-
background-color: #
|
|
279
|
+
background-color: #ffffff;
|
|
273
280
|
}
|
|
274
281
|
.ui-component-panel .search-input {
|
|
275
282
|
background: #f8fbff;
|
|
@@ -291,7 +298,7 @@
|
|
|
291
298
|
margin-bottom: 10px;
|
|
292
299
|
}
|
|
293
300
|
.ui-component-panel .el-collapse-item__header {
|
|
294
|
-
background: #
|
|
301
|
+
background: #ffffff;
|
|
295
302
|
color: #070303;
|
|
296
303
|
height: 25px;
|
|
297
304
|
line-height: 25px;
|
|
@@ -303,7 +310,7 @@
|
|
|
303
310
|
font-size: 14px;
|
|
304
311
|
}
|
|
305
312
|
.ui-component-panel .el-collapse-item__wrap {
|
|
306
|
-
background: #
|
|
313
|
+
background: #ffffff;
|
|
307
314
|
border-bottom: 0;
|
|
308
315
|
}
|
|
309
316
|
.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {
|
|
@@ -409,26 +416,42 @@
|
|
|
409
416
|
width: 100%;
|
|
410
417
|
height: 32px;
|
|
411
418
|
line-height: 32px;
|
|
412
|
-
background-color: #f3f3f3;
|
|
413
419
|
color: #070303;
|
|
420
|
+
background-color: #f3f3f3;
|
|
414
421
|
border-top: 1px solid #d9dbdd;
|
|
415
422
|
z-index: 2;
|
|
423
|
+
overflow: hidden;
|
|
416
424
|
}
|
|
417
|
-
.m-editor-page-bar
|
|
425
|
+
.m-editor-page-bar-items {
|
|
426
|
+
display: flex;
|
|
427
|
+
transition: transform 0.3s;
|
|
428
|
+
}
|
|
429
|
+
.m-editor-page-bar-item {
|
|
418
430
|
padding: 0 10px;
|
|
419
431
|
cursor: pointer;
|
|
420
432
|
border-right: 1px solid #d9dbdd;
|
|
421
433
|
display: flex;
|
|
422
434
|
justify-items: center;
|
|
423
435
|
align-items: center;
|
|
436
|
+
background-color: #f3f3f3;
|
|
424
437
|
}
|
|
425
|
-
.m-editor-page-bar
|
|
438
|
+
.m-editor-page-bar-item.active {
|
|
426
439
|
background-color: #fff;
|
|
427
440
|
cursor: text;
|
|
428
441
|
}
|
|
429
|
-
.m-editor-page-bar
|
|
442
|
+
.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {
|
|
430
443
|
cursor: pointer;
|
|
431
444
|
}
|
|
445
|
+
.m-editor-page-bar-item-icon {
|
|
446
|
+
position: relative;
|
|
447
|
+
z-index: 1;
|
|
448
|
+
}
|
|
449
|
+
.m-editor-page-bar-item .m-editor-page-bar-title {
|
|
450
|
+
max-width: 150px;
|
|
451
|
+
text-overflow: ellipsis;
|
|
452
|
+
white-space: nowrap;
|
|
453
|
+
overflow: hidden;
|
|
454
|
+
}
|
|
432
455
|
.m-editor-props-panel {
|
|
433
456
|
padding: 0 10px;
|
|
434
457
|
}
|
|
@@ -441,6 +464,11 @@
|
|
|
441
464
|
.m-editor-props-panel .el-tabs__item {
|
|
442
465
|
font-size: 12px;
|
|
443
466
|
}
|
|
467
|
+
.m-editor-props-panel-popper span,
|
|
468
|
+
.m-editor-props-panel-popper a,
|
|
469
|
+
.m-editor-props-panel-popper p {
|
|
470
|
+
font-size: 12px;
|
|
471
|
+
}
|
|
444
472
|
.magic-editor-content-menu {
|
|
445
473
|
position: fixed;
|
|
446
474
|
font-size: 12px;
|
|
@@ -481,18 +509,19 @@
|
|
|
481
509
|
position: relative;
|
|
482
510
|
width: 100%;
|
|
483
511
|
height: calc(100% - 32px);
|
|
484
|
-
overflow:
|
|
512
|
+
overflow: hidden;
|
|
513
|
+
display: flex;
|
|
514
|
+
justify-content: center;
|
|
515
|
+
align-items: center;
|
|
485
516
|
}
|
|
486
517
|
.m-editor-stage-container {
|
|
487
|
-
|
|
488
|
-
|
|
518
|
+
width: 100%;
|
|
519
|
+
height: 100%;
|
|
489
520
|
z-index: 0;
|
|
490
|
-
top: 50%;
|
|
491
|
-
margin: 0 auto;
|
|
492
521
|
position: relative;
|
|
493
|
-
width: 375px;
|
|
494
|
-
height: 80%;
|
|
495
522
|
border: 1px solid #d9dbdd;
|
|
523
|
+
transition: transform 0.3s;
|
|
524
|
+
box-sizing: content-box;
|
|
496
525
|
}
|
|
497
526
|
.m-editor-stage-container::-webkit-scrollbar {
|
|
498
527
|
width: 0 !important;
|