@tmagic/editor 1.1.6 → 1.2.0-beta.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 (32) hide show
  1. package/dist/style.css +177 -0
  2. package/dist/tmagic-editor.mjs +1104 -158
  3. package/dist/tmagic-editor.mjs.map +1 -1
  4. package/dist/tmagic-editor.umd.js +1111 -160
  5. package/dist/tmagic-editor.umd.js.map +1 -1
  6. package/package.json +7 -7
  7. package/src/Editor.vue +18 -1
  8. package/src/fields/CodeSelect.vue +139 -0
  9. package/src/index.ts +4 -1
  10. package/src/layouts/Layout.vue +1 -1
  11. package/src/layouts/PropsPanel.vue +1 -1
  12. package/src/layouts/sidebar/Sidebar.vue +13 -1
  13. package/src/layouts/sidebar/TabPane.vue +28 -1
  14. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +165 -0
  15. package/src/layouts/sidebar/code-block/CodeBlockList.vue +267 -0
  16. package/src/services/codeBlock.ts +409 -0
  17. package/src/services/editor.ts +27 -1
  18. package/src/theme/code-block.scss +184 -0
  19. package/src/theme/index.scss +2 -0
  20. package/src/theme/layout.scss +5 -0
  21. package/src/type.ts +87 -1
  22. package/src/utils/props.ts +9 -3
  23. package/types/fields/CodeSelect.vue.d.ts +96 -0
  24. package/types/index.d.ts +2 -0
  25. package/types/layouts/sidebar/LayerPanel.vue.d.ts +3 -3
  26. package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +50 -0
  27. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +72 -0
  28. package/types/services/codeBlock.d.ts +155 -0
  29. package/types/services/editor.d.ts +12 -1
  30. package/types/services/props.d.ts +12 -0
  31. package/types/type.d.ts +77 -1
  32. package/types/utils/props.d.ts +12 -0
package/dist/style.css CHANGED
@@ -616,4 +616,181 @@
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;
619
796
  }