@tmagic/editor 1.2.0-beta.9 → 1.2.1

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 (103) hide show
  1. package/dist/style.css +62 -34
  2. package/dist/{tmagic-editor.mjs → tmagic-editor.js} +1641 -1266
  3. package/dist/tmagic-editor.js.map +1 -0
  4. package/dist/{tmagic-editor.umd.js → tmagic-editor.umd.cjs} +1649 -1270
  5. package/dist/tmagic-editor.umd.cjs.map +1 -0
  6. package/package.json +16 -14
  7. package/src/Editor.vue +66 -40
  8. package/src/components/CodeDraftEditor.vue +137 -0
  9. package/src/components/ContentMenu.vue +1 -1
  10. package/src/components/FunctionEditor.vue +190 -0
  11. package/src/components/Icon.vue +1 -1
  12. package/src/{layouts → components}/Layout.vue +54 -15
  13. package/src/components/ScrollBar.vue +1 -1
  14. package/src/components/ScrollViewer.vue +10 -1
  15. package/src/components/ToolButton.vue +1 -1
  16. package/src/fields/Code.vue +1 -1
  17. package/src/fields/CodeLink.vue +1 -1
  18. package/src/fields/CodeSelect.vue +102 -99
  19. package/src/fields/UISelect.vue +3 -3
  20. package/src/index.ts +2 -1
  21. package/src/layouts/AddPageBox.vue +5 -2
  22. package/src/layouts/CodeEditor.vue +2 -3
  23. package/src/layouts/Framework.vue +12 -10
  24. package/src/layouts/NavMenu.vue +11 -8
  25. package/src/layouts/PropsPanel.vue +12 -9
  26. package/src/layouts/Resizer.vue +1 -1
  27. package/src/layouts/sidebar/ComponentListPanel.vue +2 -3
  28. package/src/layouts/sidebar/LayerMenu.vue +9 -7
  29. package/src/layouts/sidebar/LayerPanel.vue +130 -178
  30. package/src/layouts/sidebar/Sidebar.vue +110 -26
  31. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +33 -118
  32. package/src/layouts/sidebar/code-block/CodeBlockList.vue +93 -126
  33. package/src/layouts/workspace/Breadcrumb.vue +6 -7
  34. package/src/layouts/workspace/PageBar.vue +3 -3
  35. package/src/layouts/workspace/PageBarScrollContainer.vue +5 -3
  36. package/src/layouts/workspace/Stage.vue +36 -18
  37. package/src/layouts/workspace/ViewerMenu.vue +16 -15
  38. package/src/layouts/workspace/Workspace.vue +9 -6
  39. package/src/services/BaseService.ts +11 -2
  40. package/src/services/codeBlock.ts +136 -146
  41. package/src/services/componentList.ts +7 -2
  42. package/src/services/editor.ts +161 -85
  43. package/src/services/events.ts +7 -2
  44. package/src/services/history.ts +8 -17
  45. package/src/services/props.ts +8 -3
  46. package/src/services/storage.ts +1 -0
  47. package/src/services/ui.ts +20 -10
  48. package/src/theme/code-block.scss +46 -23
  49. package/src/theme/component-list-panel.scss +8 -5
  50. package/src/type.ts +84 -63
  51. package/src/utils/config.ts +1 -1
  52. package/src/utils/editor.ts +17 -3
  53. package/src/utils/index.ts +2 -1
  54. package/src/utils/logger.ts +1 -1
  55. package/src/utils/operator.ts +12 -12
  56. package/src/utils/props.ts +3 -3
  57. package/src/utils/scroll-viewer.ts +18 -2
  58. package/src/utils/stage.ts +10 -9
  59. package/src/utils/undo-redo.ts +1 -1
  60. package/types/Editor.vue.d.ts +48 -28
  61. package/types/components/CodeDraftEditor.vue.d.ts +55 -0
  62. package/types/components/ContentMenu.vue.d.ts +11 -87
  63. package/types/components/FunctionEditor.vue.d.ts +60 -0
  64. package/types/components/Icon.vue.d.ts +4 -50
  65. package/types/{layouts → components}/Layout.vue.d.ts +12 -1
  66. package/types/components/ScrollBar.vue.d.ts +7 -65
  67. package/types/components/ScrollViewer.vue.d.ts +45 -1
  68. package/types/components/ToolButton.vue.d.ts +12 -78
  69. package/types/fields/Code.vue.d.ts +11 -77
  70. package/types/fields/CodeLink.vue.d.ts +12 -82
  71. package/types/fields/CodeSelect.vue.d.ts +13 -77
  72. package/types/fields/UISelect.vue.d.ts +7 -65
  73. package/types/index.d.ts +1 -0
  74. package/types/layouts/AddPageBox.vue.d.ts +1 -43
  75. package/types/layouts/CodeEditor.vue.d.ts +22 -130
  76. package/types/layouts/NavMenu.vue.d.ts +9 -69
  77. package/types/layouts/sidebar/LayerMenu.vue.d.ts +16 -48
  78. package/types/layouts/sidebar/LayerPanel.vue.d.ts +24 -7
  79. package/types/layouts/sidebar/Sidebar.vue.d.ts +10 -5
  80. package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +24 -6
  81. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +11 -5
  82. package/types/layouts/workspace/Breadcrumb.vue.d.ts +1 -43
  83. package/types/layouts/workspace/Stage.vue.d.ts +15 -43
  84. package/types/layouts/workspace/ViewerMenu.vue.d.ts +11 -66
  85. package/types/layouts/workspace/Workspace.vue.d.ts +25 -8
  86. package/types/services/BaseService.d.ts +2 -1
  87. package/types/services/codeBlock.d.ts +56 -47
  88. package/types/services/componentList.d.ts +1 -0
  89. package/types/services/editor.d.ts +10 -11
  90. package/types/services/events.d.ts +1 -0
  91. package/types/services/history.d.ts +5 -15
  92. package/types/services/props.d.ts +3 -2
  93. package/types/services/ui.d.ts +24 -24
  94. package/types/type.d.ts +70 -59
  95. package/types/utils/editor.d.ts +1 -0
  96. package/types/utils/index.d.ts +1 -0
  97. package/types/utils/operator.d.ts +1 -1
  98. package/types/utils/props.d.ts +1 -1
  99. package/types/utils/scroll-viewer.d.ts +5 -0
  100. package/dist/tmagic-editor.mjs.map +0 -1
  101. package/dist/tmagic-editor.umd.js.map +0 -1
  102. package/src/layouts/sidebar/TabPane.vue +0 -118
  103. 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 .el-collapse-item > div:first-of-type {
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
- position: absolute;
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
- margin-right: 60px;
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,28 @@
691
705
  .m-fields-code-select {
692
706
  width: 100%;
693
707
  }
694
- .m-fields-code-select .el-card__body {
695
- padding: 5px;
708
+ .m-fields-code-select .edit-icon {
709
+ cursor: pointer;
710
+ margin-right: 5px;
696
711
  }
697
- .m-fields-code-select .tool-bar {
698
- display: flex;
699
- align-items: center;
700
- justify-content: end;
701
- height: 20px;
712
+ .el-dialog.is-fullscreen.code-editor-dialog {
713
+ overflow: hidden;
702
714
  }
703
- .m-fields-code-select .tool-bar .tool-item {
704
- display: flex;
705
- align-items: center;
715
+ .code-editor-dialog .tmagic-design-card .t-card__header {
716
+ display: block;
706
717
  }
707
- .code-editor-dialog .el-dialog__body {
718
+ .code-editor-dialog .el-dialog__body,
719
+ .code-editor-dialog .t-dialog__body {
708
720
  height: 90%;
709
721
  padding-top: 10px;
710
722
  }
711
- .code-editor-dialog .el-card {
723
+ .code-editor-dialog .tmagic-design-card {
712
724
  height: 100%;
713
725
  background: #fff;
714
726
  }
715
- .code-editor-dialog .el-card .el-card__body {
716
- height: calc(100% - 80px);
727
+ .code-editor-dialog .tmagic-design-card .el-card__body,
728
+ .code-editor-dialog .tmagic-design-card .t-card__body {
729
+ height: 100%;
717
730
  background: #fff;
718
731
  }
719
732
  .code-editor-dialog .code-editor-layout {
@@ -724,6 +737,9 @@
724
737
  height: 100%;
725
738
  overflow: auto;
726
739
  }
740
+ .code-editor-dialog .code-editor-layout .side-tree .el-tree-node__label {
741
+ width: 100%;
742
+ }
727
743
  .code-editor-dialog .code-editor-layout .side-tree .list-container {
728
744
  width: 100%;
729
745
  overflow: hidden;
@@ -745,6 +761,7 @@
745
761
  display: flex;
746
762
  align-items: center;
747
763
  font-size: 16px;
764
+ margin-bottom: 10px;
748
765
  }
749
766
  .code-editor-dialog .code-name-wrapper .code-name-label {
750
767
  margin-right: 10px;
@@ -775,19 +792,30 @@
775
792
  .code-editor-dialog .m-editor-wrapper {
776
793
  height: 100%;
777
794
  }
795
+ .code-editor-dialog .m-editor-wrapper.fullScreen {
796
+ height: 100%;
797
+ width: 100%;
798
+ position: fixed;
799
+ top: 0;
800
+ left: 0;
801
+ z-index: 100;
802
+ }
778
803
  .code-editor-dialog .m-editor-wrapper .m-editor-container {
779
- height: calc(100% - 70px);
804
+ height: calc(100% - 45px);
780
805
  }
781
806
  .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
782
- height: 40px;
807
+ height: 45px;
783
808
  width: 100%;
784
809
  display: flex;
785
810
  justify-content: end;
786
811
  background: #fff;
812
+ position: absolute;
813
+ right: 20px;
814
+ bottom: 0;
787
815
  }
788
816
  .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
789
817
  height: 30px;
790
- margin-top: 15px;
818
+ margin-top: 5px;
791
819
  }
792
820
  .m-editor-layout {
793
821
  width: 100%;