@tmagic/editor 1.1.6 → 1.2.0-beta.10

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 (82) hide show
  1. package/dist/style.css +191 -8
  2. package/dist/tmagic-editor.mjs +2104 -1027
  3. package/dist/tmagic-editor.mjs.map +1 -1
  4. package/dist/tmagic-editor.umd.js +2136 -1053
  5. package/dist/tmagic-editor.umd.js.map +1 -1
  6. package/package.json +11 -10
  7. package/src/Editor.vue +27 -12
  8. package/src/components/ContentMenu.vue +4 -4
  9. package/src/components/Icon.vue +7 -5
  10. package/src/{layouts → components}/Layout.vue +15 -5
  11. package/src/components/ScrollBar.vue +1 -1
  12. package/src/components/ScrollViewer.vue +10 -1
  13. package/src/components/ToolButton.vue +30 -15
  14. package/src/fields/Code.vue +5 -2
  15. package/src/fields/CodeLink.vue +20 -12
  16. package/src/fields/CodeSelect.vue +131 -0
  17. package/src/fields/UISelect.vue +9 -8
  18. package/src/index.ts +7 -2
  19. package/src/layouts/AddPageBox.vue +13 -20
  20. package/src/layouts/CodeEditor.vue +106 -120
  21. package/src/layouts/Framework.vue +62 -40
  22. package/src/layouts/NavMenu.vue +1 -1
  23. package/src/layouts/PropsPanel.vue +5 -10
  24. package/src/layouts/Resizer.vue +1 -1
  25. package/src/layouts/sidebar/ComponentListPanel.vue +15 -13
  26. package/src/layouts/sidebar/LayerMenu.vue +89 -92
  27. package/src/layouts/sidebar/LayerPanel.vue +273 -178
  28. package/src/layouts/sidebar/Sidebar.vue +129 -37
  29. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +169 -0
  30. package/src/layouts/sidebar/code-block/CodeBlockList.vue +267 -0
  31. package/src/layouts/workspace/Breadcrumb.vue +32 -0
  32. package/src/layouts/workspace/PageBar.vue +12 -11
  33. package/src/layouts/workspace/PageBarScrollContainer.vue +1 -1
  34. package/src/layouts/workspace/Stage.vue +15 -7
  35. package/src/layouts/workspace/ViewerMenu.vue +8 -7
  36. package/src/layouts/workspace/Workspace.vue +10 -3
  37. package/src/services/codeBlock.ts +415 -0
  38. package/src/services/editor.ts +35 -5
  39. package/src/theme/breadcrumb.scss +6 -0
  40. package/src/theme/code-block.scss +184 -0
  41. package/src/theme/component-list-panel.scss +3 -7
  42. package/src/theme/index.scss +1 -13
  43. package/src/theme/layer-panel.scss +7 -2
  44. package/src/theme/layout.scss +5 -0
  45. package/src/theme/theme.scss +16 -0
  46. package/src/type.ts +88 -1
  47. package/src/utils/props.ts +9 -3
  48. package/src/utils/scroll-viewer.ts +18 -2
  49. package/src/utils/stage.ts +7 -0
  50. package/types/Editor.vue.d.ts +2 -2
  51. package/types/components/ContentMenu.vue.d.ts +1 -3
  52. package/types/components/Icon.vue.d.ts +1 -3
  53. package/types/{layouts → components}/Layout.vue.d.ts +0 -0
  54. package/types/components/ScrollBar.vue.d.ts +1 -3
  55. package/types/components/ScrollViewer.vue.d.ts +45 -1
  56. package/types/components/ToolButton.vue.d.ts +1 -3
  57. package/types/fields/Code.vue.d.ts +9 -3
  58. package/types/fields/CodeLink.vue.d.ts +5 -3
  59. package/types/fields/CodeSelect.vue.d.ts +94 -0
  60. package/types/fields/UISelect.vue.d.ts +1 -3
  61. package/types/index.d.ts +4 -0
  62. package/types/layouts/AddPageBox.vue.d.ts +43 -3
  63. package/types/layouts/CodeEditor.vue.d.ts +158 -45
  64. package/types/layouts/NavMenu.vue.d.ts +1 -3
  65. package/types/layouts/sidebar/LayerMenu.vue.d.ts +31 -63
  66. package/types/layouts/sidebar/LayerPanel.vue.d.ts +38 -1074
  67. package/types/layouts/sidebar/Sidebar.vue.d.ts +119 -17
  68. package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +50 -0
  69. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +73 -0
  70. package/types/layouts/workspace/Breadcrumb.vue.d.ts +44 -0
  71. package/types/layouts/workspace/Stage.vue.d.ts +23 -7
  72. package/types/layouts/workspace/ViewerMenu.vue.d.ts +6 -3
  73. package/types/layouts/workspace/Workspace.vue.d.ts +23 -5
  74. package/types/services/codeBlock.d.ts +155 -0
  75. package/types/services/editor.d.ts +12 -1
  76. package/types/services/props.d.ts +12 -0
  77. package/types/services/ui.d.ts +1 -1
  78. package/types/type.d.ts +78 -1
  79. package/types/utils/props.d.ts +12 -0
  80. package/types/utils/scroll-viewer.d.ts +5 -0
  81. package/src/layouts/sidebar/TabPane.vue +0 -99
  82. package/types/layouts/sidebar/TabPane.vue.d.ts +0 -14
package/dist/style.css CHANGED
@@ -265,8 +265,11 @@
265
265
  left: 0;
266
266
  z-index: 1;
267
267
  }
268
- .magic-editor-layer-panel .search-input .el-input__suffix {
269
- padding: 10px 5px;
268
+ .magic-editor-layer-panel .search-input .el-input__prefix {
269
+ padding: 7px;
270
+ }
271
+ .magic-editor-layer-panel .magic-editor-layer-tree {
272
+ padding-top: 48px;
270
273
  }
271
274
  .magic-editor-layer-panel .node-content {
272
275
  flex: 1;
@@ -325,11 +328,11 @@
325
328
  .ui-component-panel {
326
329
  height: 100%;
327
330
  border-top: 0 !important;
328
- margin-top: 50px;
331
+ margin-top: 48px;
329
332
  background-color: #ffffff;
330
333
  }
331
334
  .ui-component-panel .search-input {
332
- background: #f8fbff;
335
+ background: #fff;
333
336
  color: #bbbbbb;
334
337
  padding: 10px;
335
338
  position: absolute;
@@ -339,10 +342,7 @@
339
342
  z-index: 1;
340
343
  }
341
344
  .ui-component-panel .search-input .el-input__prefix {
342
- padding: 10px;
343
- }
344
- .ui-component-panel .search-input .el-input__suffix {
345
- padding: 10px 5px;
345
+ padding: 7px;
346
346
  }
347
347
  .ui-component-panel .el-collapse-item > div:first-of-type {
348
348
  border-bottom: 1px solid #d9dbdd;
@@ -616,4 +616,187 @@
616
616
  .magic-editor-icon img {
617
617
  max-width: 100%;
618
618
  max-height: 100%;
619
+ }
620
+ .m-editor-code-block-list {
621
+ margin-top: 5px;
622
+ }
623
+ .m-editor-code-block-list .el-tree-node__content {
624
+ height: auto;
625
+ }
626
+ .m-editor-code-block-list .code-header-wrapper {
627
+ display: flex;
628
+ align-items: center;
629
+ justify-content: center;
630
+ }
631
+ .m-editor-code-block-list .code-header-wrapper .code-filter-input {
632
+ margin: 0 5px;
633
+ }
634
+ .m-editor-code-block-list .code-header-wrapper .code-filter-input-no-btn {
635
+ margin-left: 5px;
636
+ margin-right: 10px;
637
+ }
638
+ .m-editor-code-block-list .code-header-wrapper .create-code-button {
639
+ margin-left: 2px;
640
+ margin-right: 10px;
641
+ }
642
+ .m-editor-code-block-list .divider {
643
+ margin: 10px 0 0 0;
644
+ }
645
+ .m-editor-code-block-list .list-container {
646
+ width: 100%;
647
+ overflow: hidden;
648
+ margin-left: -25px;
649
+ }
650
+ .m-editor-code-block-list .list-container .list-item {
651
+ display: flex;
652
+ align-items: center;
653
+ }
654
+ .m-editor-code-block-list .list-container .list-item .right-tool {
655
+ position: absolute;
656
+ right: 15px;
657
+ padding-left: 5px;
658
+ display: flex;
659
+ align-items: center;
660
+ }
661
+ .m-editor-code-block-list .list-container .list-item .right-tool .edit-icon {
662
+ margin: 0 5px;
663
+ }
664
+ .m-editor-code-block-list .list-container .list-item .code-name {
665
+ font-size: 14px;
666
+ overflow: hidden;
667
+ white-space: nowrap;
668
+ text-overflow: ellipsis;
669
+ padding: 10px 15px;
670
+ margin-right: 60px;
671
+ }
672
+ .m-editor-code-block-list .list-container .code-comp-map-wrapper {
673
+ display: flex;
674
+ align-items: center;
675
+ flex-wrap: wrap;
676
+ margin-left: 20px;
677
+ margin-bottom: 5px;
678
+ }
679
+ .m-editor-code-block-list .list-container .code-comp-map-wrapper .arrow-left {
680
+ transform: rotate(-45deg);
681
+ width: 20px;
682
+ height: 20px;
683
+ }
684
+ .m-editor-code-block-list .list-container .code-comp-map-wrapper .code-comp {
685
+ margin-left: 5px;
686
+ padding: 5px;
687
+ }
688
+ .m-editor-code-block-list .list-container .code-comp-map-wrapper .code-comp .comp-delete-icon {
689
+ margin-left: 3px;
690
+ }
691
+ .m-fields-code-select {
692
+ width: 100%;
693
+ }
694
+ .m-fields-code-select .el-card__body {
695
+ padding: 5px;
696
+ }
697
+ .m-fields-code-select .tool-bar {
698
+ display: flex;
699
+ align-items: center;
700
+ justify-content: end;
701
+ height: 20px;
702
+ }
703
+ .m-fields-code-select .tool-bar .tool-item {
704
+ display: flex;
705
+ align-items: center;
706
+ }
707
+ .code-editor-dialog .el-dialog__body {
708
+ height: 90%;
709
+ padding-top: 10px;
710
+ }
711
+ .code-editor-dialog .el-card {
712
+ height: 100%;
713
+ background: #fff;
714
+ }
715
+ .code-editor-dialog .el-card .el-card__body {
716
+ height: calc(100% - 80px);
717
+ background: #fff;
718
+ }
719
+ .code-editor-dialog .code-editor-layout {
720
+ height: 100%;
721
+ border: 1px solid #e4e7ed;
722
+ }
723
+ .code-editor-dialog .code-editor-layout .side-tree {
724
+ height: 100%;
725
+ overflow: auto;
726
+ }
727
+ .code-editor-dialog .code-editor-layout .side-tree .list-container {
728
+ width: 100%;
729
+ overflow: hidden;
730
+ margin-left: -10px;
731
+ }
732
+ .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item {
733
+ width: 100%;
734
+ margin: 10px 0;
735
+ line-height: 30px;
736
+ }
737
+ .code-editor-dialog .code-editor-layout .side-tree .list-container .list-item .code-name {
738
+ width: 100%;
739
+ font-size: 14px;
740
+ overflow: hidden;
741
+ white-space: nowrap;
742
+ text-overflow: ellipsis;
743
+ }
744
+ .code-editor-dialog .code-name-wrapper {
745
+ display: flex;
746
+ align-items: center;
747
+ font-size: 16px;
748
+ }
749
+ .code-editor-dialog .code-name-wrapper .code-name-label {
750
+ margin-right: 10px;
751
+ }
752
+ .code-editor-dialog .code-name-wrapper .code-name-input {
753
+ width: 300px;
754
+ }
755
+ .code-editor-dialog .m-editor-code-block-editor-panel-list-mode {
756
+ height: 100%;
757
+ z-index: 10;
758
+ background: #fff;
759
+ }
760
+ .code-editor-dialog .m-editor-code-block-editor-panel-list-mode .el-card {
761
+ border: 0;
762
+ }
763
+ .code-editor-dialog .m-editor-code-block-editor-panel {
764
+ position: absolute;
765
+ top: 0;
766
+ left: 4px;
767
+ width: calc(100% - 9px);
768
+ height: 100%;
769
+ z-index: 10;
770
+ background: #fff;
771
+ }
772
+ .code-editor-dialog .m-editor-code-block-editor-panel .el-card {
773
+ border: 0;
774
+ }
775
+ .code-editor-dialog .m-editor-wrapper {
776
+ height: 100%;
777
+ }
778
+ .code-editor-dialog .m-editor-wrapper .m-editor-container {
779
+ height: calc(100% - 70px);
780
+ }
781
+ .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
782
+ height: 40px;
783
+ width: 100%;
784
+ display: flex;
785
+ justify-content: end;
786
+ background: #fff;
787
+ }
788
+ .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
789
+ height: 30px;
790
+ margin-top: 15px;
791
+ }
792
+ .m-editor-layout {
793
+ width: 100%;
794
+ display: flex;
795
+ justify-self: space-between;
796
+ }
797
+ .m-editor-breadcrumb {
798
+ position: absolute;
799
+ left: 5px;
800
+ top: 5px;
801
+ z-index: 10;
619
802
  }