@tmagic/editor 1.2.0-beta.9 → 1.2.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.
- package/dist/style.css +59 -35
- package/dist/{tmagic-editor.mjs → tmagic-editor.js} +1473 -1154
- package/dist/tmagic-editor.js.map +1 -0
- package/dist/{tmagic-editor.umd.js → tmagic-editor.umd.cjs} +1483 -1159
- package/dist/tmagic-editor.umd.cjs.map +1 -0
- package/package.json +16 -14
- package/src/Editor.vue +66 -40
- package/src/components/CodeDraftEditor.vue +145 -0
- package/src/components/ContentMenu.vue +1 -1
- package/src/components/FunctionEditor.vue +145 -0
- package/src/components/Icon.vue +1 -1
- package/src/{layouts → components}/Layout.vue +54 -15
- package/src/components/ScrollBar.vue +1 -1
- package/src/components/ScrollViewer.vue +10 -1
- package/src/components/ToolButton.vue +1 -1
- package/src/fields/Code.vue +1 -1
- package/src/fields/CodeLink.vue +1 -1
- package/src/fields/CodeSelect.vue +89 -102
- package/src/fields/UISelect.vue +1 -1
- package/src/index.ts +1 -0
- package/src/layouts/AddPageBox.vue +1 -1
- package/src/layouts/CodeEditor.vue +2 -3
- package/src/layouts/Framework.vue +2 -2
- package/src/layouts/NavMenu.vue +2 -2
- package/src/layouts/PropsPanel.vue +13 -6
- package/src/layouts/Resizer.vue +1 -1
- package/src/layouts/sidebar/ComponentListPanel.vue +1 -1
- package/src/layouts/sidebar/LayerMenu.vue +9 -7
- package/src/layouts/sidebar/LayerPanel.vue +127 -174
- package/src/layouts/sidebar/Sidebar.vue +110 -26
- package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +27 -83
- package/src/layouts/sidebar/code-block/CodeBlockList.vue +90 -122
- package/src/layouts/workspace/Breadcrumb.vue +1 -1
- package/src/layouts/workspace/PageBar.vue +1 -1
- package/src/layouts/workspace/PageBarScrollContainer.vue +1 -1
- package/src/layouts/workspace/Stage.vue +26 -9
- package/src/layouts/workspace/ViewerMenu.vue +11 -9
- package/src/layouts/workspace/Workspace.vue +7 -3
- package/src/services/BaseService.ts +10 -1
- package/src/services/codeBlock.ts +124 -125
- package/src/services/componentList.ts +6 -1
- package/src/services/editor.ts +54 -18
- package/src/services/events.ts +6 -1
- package/src/services/history.ts +7 -16
- package/src/services/props.ts +7 -2
- package/src/services/storage.ts +1 -0
- package/src/services/ui.ts +12 -0
- package/src/theme/code-block.scss +43 -24
- package/src/theme/component-list-panel.scss +8 -5
- package/src/type.ts +77 -50
- package/src/utils/editor.ts +9 -1
- package/src/utils/index.ts +1 -0
- package/src/utils/props.ts +2 -2
- package/src/utils/scroll-viewer.ts +18 -2
- package/src/utils/stage.ts +4 -3
- package/types/Editor.vue.d.ts +47 -27
- package/types/components/CodeDraftEditor.vue.d.ts +56 -0
- package/types/components/ContentMenu.vue.d.ts +11 -87
- package/types/components/FunctionEditor.vue.d.ts +43 -0
- package/types/components/Icon.vue.d.ts +4 -50
- package/types/{layouts → components}/Layout.vue.d.ts +12 -1
- package/types/components/ScrollBar.vue.d.ts +7 -65
- package/types/components/ScrollViewer.vue.d.ts +45 -1
- package/types/components/ToolButton.vue.d.ts +12 -78
- package/types/fields/Code.vue.d.ts +11 -77
- package/types/fields/CodeLink.vue.d.ts +12 -82
- package/types/fields/CodeSelect.vue.d.ts +13 -77
- package/types/fields/UISelect.vue.d.ts +7 -65
- package/types/index.d.ts +1 -0
- package/types/layouts/AddPageBox.vue.d.ts +1 -43
- package/types/layouts/CodeEditor.vue.d.ts +22 -130
- package/types/layouts/NavMenu.vue.d.ts +9 -69
- package/types/layouts/sidebar/LayerMenu.vue.d.ts +16 -48
- package/types/layouts/sidebar/LayerPanel.vue.d.ts +24 -7
- package/types/layouts/sidebar/Sidebar.vue.d.ts +10 -5
- package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +1 -1
- package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +6 -5
- package/types/layouts/workspace/Breadcrumb.vue.d.ts +1 -43
- package/types/layouts/workspace/Stage.vue.d.ts +15 -43
- package/types/layouts/workspace/ViewerMenu.vue.d.ts +11 -66
- package/types/layouts/workspace/Workspace.vue.d.ts +23 -5
- package/types/services/BaseService.d.ts +2 -1
- package/types/services/codeBlock.d.ts +57 -36
- package/types/services/componentList.d.ts +1 -0
- package/types/services/editor.d.ts +5 -6
- package/types/services/events.d.ts +1 -0
- package/types/services/history.d.ts +5 -15
- package/types/services/props.d.ts +3 -2
- package/types/services/ui.d.ts +2 -1
- package/types/type.d.ts +65 -48
- package/types/utils/editor.d.ts +1 -0
- package/types/utils/index.d.ts +1 -0
- package/types/utils/props.d.ts +1 -1
- package/types/utils/scroll-viewer.d.ts +5 -0
- package/dist/tmagic-editor.mjs.map +0 -1
- package/dist/tmagic-editor.umd.js.map +0 -1
- package/src/layouts/sidebar/TabPane.vue +0 -118
- package/types/layouts/sidebar/TabPane.vue.d.ts +0 -82
package/dist/style.css
CHANGED
|
@@ -325,13 +325,13 @@
|
|
|
325
325
|
left: 0;
|
|
326
326
|
z-index: 1;
|
|
327
327
|
}
|
|
328
|
-
.ui-component-panel {
|
|
328
|
+
.ui-component-panel.tmagic-design-collapse {
|
|
329
329
|
height: 100%;
|
|
330
330
|
border-top: 0 !important;
|
|
331
331
|
margin-top: 48px;
|
|
332
332
|
background-color: #ffffff;
|
|
333
333
|
}
|
|
334
|
-
.ui-component-panel .search-input {
|
|
334
|
+
.ui-component-panel.tmagic-design-collapse .search-input {
|
|
335
335
|
background: #fff;
|
|
336
336
|
color: #bbbbbb;
|
|
337
337
|
padding: 10px;
|
|
@@ -341,14 +341,15 @@
|
|
|
341
341
|
box-sizing: border-box;
|
|
342
342
|
z-index: 1;
|
|
343
343
|
}
|
|
344
|
-
.ui-component-panel .search-input .el-input__prefix {
|
|
344
|
+
.ui-component-panel.tmagic-design-collapse .search-input .el-input__prefix {
|
|
345
345
|
padding: 7px;
|
|
346
346
|
}
|
|
347
|
-
.ui-component-panel .
|
|
347
|
+
.ui-component-panel.tmagic-design-collapse .tmagic-design-collapse-item > div:first-of-type {
|
|
348
348
|
border-bottom: 1px solid #d9dbdd;
|
|
349
349
|
margin-bottom: 10px;
|
|
350
350
|
}
|
|
351
|
-
.ui-component-panel .el-collapse-item__header
|
|
351
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__header,
|
|
352
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__header {
|
|
352
353
|
background: #ffffff;
|
|
353
354
|
color: #070303;
|
|
354
355
|
height: 25px;
|
|
@@ -356,20 +357,26 @@
|
|
|
356
357
|
padding-left: 10px;
|
|
357
358
|
font-size: 12px;
|
|
358
359
|
}
|
|
359
|
-
.ui-component-panel .el-collapse-item__header i
|
|
360
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__header i,
|
|
361
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__header i {
|
|
360
362
|
margin-right: 5px;
|
|
361
363
|
font-size: 14px;
|
|
362
364
|
}
|
|
363
|
-
.ui-component-panel .el-collapse-item__wrap
|
|
365
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap,
|
|
366
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body {
|
|
364
367
|
background: #ffffff;
|
|
365
368
|
border-bottom: 0;
|
|
366
369
|
}
|
|
367
|
-
.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content
|
|
370
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .el-collapse-item__content,
|
|
371
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .t-collapse-panel__content,
|
|
372
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .el-collapse-item__content,
|
|
373
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .t-collapse-panel__content {
|
|
368
374
|
padding: 10px;
|
|
369
375
|
display: flex;
|
|
370
376
|
flex-wrap: wrap;
|
|
371
377
|
}
|
|
372
|
-
.ui-component-panel .el-collapse-item__wrap .component-item
|
|
378
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item,
|
|
379
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item {
|
|
373
380
|
display: flex;
|
|
374
381
|
overflow: hidden;
|
|
375
382
|
text-overflow: ellipsis;
|
|
@@ -380,7 +387,8 @@
|
|
|
380
387
|
width: 42px;
|
|
381
388
|
cursor: pointer;
|
|
382
389
|
}
|
|
383
|
-
.ui-component-panel .el-collapse-item__wrap .component-item i
|
|
390
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item i,
|
|
391
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item i {
|
|
384
392
|
font-size: 20px;
|
|
385
393
|
background: #fff;
|
|
386
394
|
height: 40px;
|
|
@@ -394,16 +402,19 @@
|
|
|
394
402
|
align-items: center;
|
|
395
403
|
margin-bottom: 5px;
|
|
396
404
|
}
|
|
397
|
-
.ui-component-panel .el-collapse-item__wrap .component-item i:hover
|
|
405
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item i:hover,
|
|
406
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item i:hover {
|
|
398
407
|
background: #2882e0;
|
|
399
408
|
color: #fff;
|
|
400
409
|
border-color: #4e8be1;
|
|
401
410
|
}
|
|
402
|
-
.ui-component-panel .el-collapse-item__wrap .component-item span
|
|
411
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item span,
|
|
412
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item span {
|
|
403
413
|
font-size: 12px;
|
|
404
414
|
text-align: center;
|
|
405
415
|
}
|
|
406
|
-
.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip
|
|
416
|
+
.ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item .el-tooltip,
|
|
417
|
+
.ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item .el-tooltip {
|
|
407
418
|
width: 50px;
|
|
408
419
|
height: 30px;
|
|
409
420
|
line-height: 15px;
|
|
@@ -618,11 +629,15 @@
|
|
|
618
629
|
max-height: 100%;
|
|
619
630
|
}
|
|
620
631
|
.m-editor-code-block-list {
|
|
632
|
+
height: 100%;
|
|
621
633
|
margin-top: 5px;
|
|
622
634
|
}
|
|
623
635
|
.m-editor-code-block-list .el-tree-node__content {
|
|
624
636
|
height: auto;
|
|
625
637
|
}
|
|
638
|
+
.m-editor-code-block-list .el-tree-node__label {
|
|
639
|
+
width: 100%;
|
|
640
|
+
}
|
|
626
641
|
.m-editor-code-block-list .code-header-wrapper {
|
|
627
642
|
display: flex;
|
|
628
643
|
align-items: center;
|
|
@@ -652,9 +667,7 @@
|
|
|
652
667
|
align-items: center;
|
|
653
668
|
}
|
|
654
669
|
.m-editor-code-block-list .list-container .list-item .right-tool {
|
|
655
|
-
|
|
656
|
-
right: 15px;
|
|
657
|
-
padding-left: 5px;
|
|
670
|
+
width: fit-content !important;
|
|
658
671
|
display: flex;
|
|
659
672
|
align-items: center;
|
|
660
673
|
}
|
|
@@ -667,7 +680,8 @@
|
|
|
667
680
|
white-space: nowrap;
|
|
668
681
|
text-overflow: ellipsis;
|
|
669
682
|
padding: 10px 15px;
|
|
670
|
-
|
|
683
|
+
width: 0 !important;
|
|
684
|
+
flex: 1;
|
|
671
685
|
}
|
|
672
686
|
.m-editor-code-block-list .list-container .code-comp-map-wrapper {
|
|
673
687
|
display: flex;
|
|
@@ -691,29 +705,24 @@
|
|
|
691
705
|
.m-fields-code-select {
|
|
692
706
|
width: 100%;
|
|
693
707
|
}
|
|
694
|
-
.
|
|
695
|
-
|
|
696
|
-
}
|
|
697
|
-
.m-fields-code-select .tool-bar {
|
|
698
|
-
display: flex;
|
|
699
|
-
align-items: center;
|
|
700
|
-
justify-content: end;
|
|
701
|
-
height: 20px;
|
|
708
|
+
.el-dialog.is-fullscreen.code-editor-dialog {
|
|
709
|
+
overflow: hidden;
|
|
702
710
|
}
|
|
703
|
-
.
|
|
704
|
-
display:
|
|
705
|
-
align-items: center;
|
|
711
|
+
.code-editor-dialog .tmagic-design-card .t-card__header {
|
|
712
|
+
display: block;
|
|
706
713
|
}
|
|
707
|
-
.code-editor-dialog .el-dialog__body
|
|
714
|
+
.code-editor-dialog .el-dialog__body,
|
|
715
|
+
.code-editor-dialog .t-dialog__body {
|
|
708
716
|
height: 90%;
|
|
709
717
|
padding-top: 10px;
|
|
710
718
|
}
|
|
711
|
-
.code-editor-dialog .
|
|
719
|
+
.code-editor-dialog .tmagic-design-card {
|
|
712
720
|
height: 100%;
|
|
713
721
|
background: #fff;
|
|
714
722
|
}
|
|
715
|
-
.code-editor-dialog .
|
|
716
|
-
|
|
723
|
+
.code-editor-dialog .tmagic-design-card .el-card__body,
|
|
724
|
+
.code-editor-dialog .tmagic-design-card .t-card__body {
|
|
725
|
+
height: 100%;
|
|
717
726
|
background: #fff;
|
|
718
727
|
}
|
|
719
728
|
.code-editor-dialog .code-editor-layout {
|
|
@@ -724,6 +733,9 @@
|
|
|
724
733
|
height: 100%;
|
|
725
734
|
overflow: auto;
|
|
726
735
|
}
|
|
736
|
+
.code-editor-dialog .code-editor-layout .side-tree .el-tree-node__label {
|
|
737
|
+
width: 100%;
|
|
738
|
+
}
|
|
727
739
|
.code-editor-dialog .code-editor-layout .side-tree .list-container {
|
|
728
740
|
width: 100%;
|
|
729
741
|
overflow: hidden;
|
|
@@ -745,6 +757,7 @@
|
|
|
745
757
|
display: flex;
|
|
746
758
|
align-items: center;
|
|
747
759
|
font-size: 16px;
|
|
760
|
+
margin-bottom: 10px;
|
|
748
761
|
}
|
|
749
762
|
.code-editor-dialog .code-name-wrapper .code-name-label {
|
|
750
763
|
margin-right: 10px;
|
|
@@ -775,19 +788,30 @@
|
|
|
775
788
|
.code-editor-dialog .m-editor-wrapper {
|
|
776
789
|
height: 100%;
|
|
777
790
|
}
|
|
791
|
+
.code-editor-dialog .m-editor-wrapper.fullScreen {
|
|
792
|
+
height: 100%;
|
|
793
|
+
width: 100%;
|
|
794
|
+
position: fixed;
|
|
795
|
+
top: 0;
|
|
796
|
+
left: 0;
|
|
797
|
+
z-index: 100;
|
|
798
|
+
}
|
|
778
799
|
.code-editor-dialog .m-editor-wrapper .m-editor-container {
|
|
779
|
-
height: calc(100% -
|
|
800
|
+
height: calc(100% - 45px);
|
|
780
801
|
}
|
|
781
802
|
.code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
|
|
782
|
-
height:
|
|
803
|
+
height: 45px;
|
|
783
804
|
width: 100%;
|
|
784
805
|
display: flex;
|
|
785
806
|
justify-content: end;
|
|
786
807
|
background: #fff;
|
|
808
|
+
position: absolute;
|
|
809
|
+
right: 20px;
|
|
810
|
+
bottom: 0;
|
|
787
811
|
}
|
|
788
812
|
.code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
|
|
789
813
|
height: 30px;
|
|
790
|
-
margin-top:
|
|
814
|
+
margin-top: 5px;
|
|
791
815
|
}
|
|
792
816
|
.m-editor-layout {
|
|
793
817
|
width: 100%;
|