@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

package/dist/style.css

@@ -134,10 +134,7 @@
   width: 100%;
 }
 .m-editor-content {
-  width: 100%;
   height: calc(100% - 35px);
-  display: flex;
-  justify-self: space-between;
 }
 .m-editor-framework-center {
   position: relative;
@@ -371,6 +368,11 @@
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+}
+.magic-editor-layer-panel .cus-tree-node .layer-node-tool {
+  margin-right: 15px;
 }
 .magic-editor-layer-panel .cus-tree-node-hover {
   background-color: #f3f5f9;
@@ -482,15 +484,34 @@
   width: 8px;
   margin: 0 -5px;
   height: 100%;
-  opacity: 0.9;
+  opacity: 0.8;
   background: padding-box #d8dee8;
   box-sizing: border-box;
   cursor: col-resize;
   z-index: 1;
+  position: relative;
 }
 .m-editor-resizer:hover {
   border-color: #d8dee8;
 }
+.m-editor-resizer:hover .icon-container {
+  visibility: visible;
+  opacity: 1;
+}
+.m-editor-resizer.m-editor-resizer-draging::after {
+  content: "";
+  position: absolute;
+  width: 600px;
+  height: 100%;
+  left: 0;
+}
+.m-editor-resizer.m-editor-resizer-draging::before {
+  content: "";
+  position: absolute;
+  width: 600px;
+  height: 100%;
+  right: 0;
+}
 .m-editor-resizer .icon-container {
   visibility: hidden;
   opacity: 0;
@@ -516,10 +537,6 @@
   color: #fff;
   font-size: 18px;
 }
-.magic-editor-resizer:hover .icon-container {
-  visibility: visible;
-  opacity: 1;
-}
 .m-editor-workspace {
   height: 100%;
   width: 100%;
@@ -618,7 +635,7 @@
   font-weight: 600;
   padding: 4px 0px;
   overflow: auto;
-  max-height: 100%;
+  max-height: 80%;
 }
 .magic-editor-content-menu .menu-item {
   color: #333;
@@ -660,6 +677,9 @@
   justify-content: center;
   align-items: center;
 }
+.m-editor-stage:focus-visible {
+  outline: none;
+}
 .m-editor-stage-container {
   width: 100%;
   height: 100%;
@@ -675,9 +695,30 @@
 .magic-code-editor {
   width: 100%;
 }
-.magic-code-editor .margin {
+.magic-code-editor-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.magic-code-editor-wrapper.full-screen {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+}
+.magic-code-editor-wrapper .magic-code-editor-content {
+  width: 100%;
+  height: 100%;
+}
+.magic-code-editor-wrapper .magic-code-editor-content .margin {
   margin: 0;
 }
+.magic-code-editor-wrapper .magic-code-editor-full-screen-icon {
+  position: absolute;
+  top: 5px;
+  right: 0;
+  z-index: 11;
+}
 .magic-editor-icon img {
   max-width: 100%;
   max-height: 100%;
@@ -701,113 +742,11 @@
 .m-fields-code-select .el-card__header {
   display: none;
 }
-.el-dialog.is-fullscreen.code-editor-dialog {
-  overflow: hidden;
-}
-.code-editor-dialog .tmagic-design-card .t-card__header {
-  display: block;
-}
-.code-editor-dialog .el-dialog__body,
-.code-editor-dialog .t-dialog__body {
-  height: 90%;
-  padding-top: 10px;
-}
-.code-editor-dialog .tmagic-design-card {
-  height: 100%;
-  background: #fff;
-}
-.code-editor-dialog .tmagic-design-card .el-card__body,
-.code-editor-dialog .tmagic-design-card .t-card__body {
-  height: 100%;
-  background: #fff;
-}
-.code-editor-dialog .code-editor-layout {
-  height: 100%;
-  border: 1px solid #e4e7ed;
-}
-.code-editor-dialog .code-editor-layout .side-tree {
-  height: 100%;
-  overflow: auto;
-}
-.code-editor-dialog .code-editor-layout .side-tree .el-tree-node__label {
-  width: 100%;
-}
-.code-editor-dialog .code-editor-layout .side-tree .list-container {
-  width: 100%;
-  overflow: hidden;
-  margin-left: -10px;
-}
-.code-editor-dialog .code-editor-layout .side-tree .list-container .list-item {
-  width: 100%;
-  margin: 10px 0;
-  line-height: 30px;
-}
-.code-editor-dialog .code-editor-layout .side-tree .list-container .list-item .code-name {
-  width: 100%;
-  font-size: 14px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.code-editor-dialog .code-name-wrapper {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  margin-bottom: 10px;
-}
-.code-editor-dialog .code-name-wrapper .code-name-label {
-  margin-right: 10px;
-}
-.code-editor-dialog .code-name-wrapper .code-name-input {
-  width: 300px;
-}
-.code-editor-dialog .m-editor-code-block-editor-panel-list-mode {
-  height: 100%;
-  z-index: 10;
-  background: #fff;
-}
-.code-editor-dialog .m-editor-code-block-editor-panel-list-mode .el-card {
-  border: 0;
-}
-.code-editor-dialog .m-editor-code-block-editor-panel {
-  position: absolute;
-  top: 0;
-  left: 4px;
-  width: calc(100% - 9px);
-  height: 100%;
-  z-index: 10;
-  background: #fff;
-}
-.code-editor-dialog .m-editor-code-block-editor-panel .el-card {
-  border: 0;
-}
-.code-editor-dialog .m-editor-wrapper {
-  height: 100%;
-}
-.code-editor-dialog .m-editor-wrapper.fullScreen {
-  height: 100%;
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-}
-.code-editor-dialog .m-editor-wrapper .m-editor-container {
-  height: calc(100% - 45px);
-}
-.code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
-  height: 45px;
-  width: 100%;
-  display: flex;
-  justify-content: end;
-  background: #fff;
-  position: absolute;
-  right: 20px;
-  bottom: 0;
+.m-editor-code-block-editor .tmagic-design-table {
+  height: 180px;
 }
-.code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
-  height: 30px;
-  margin-top: 5px;
+.m-editor-code-block-editor .el-drawer__body {
+  padding: 10px 20px;
 }
 .m-fields-event-select {
   width: 100%;
@@ -828,17 +767,21 @@
 .m-fields-event-select .el-card.is-always-shadow {
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
 }
-.m-fields-code-select-col {
+.m-fields-code-select-col,
+.m-fields-data-source-method-select {
   width: 100%;
 }
-.m-fields-code-select-col .code-select-container {
+.code-select-container,
+.data-source-method-select-container {
   display: flex;
   align-items: center;
 }
-.m-fields-code-select-col .code-select-container .select {
+.code-select-container .select,
+.data-source-method-select-container .select {
   flex: 10 0 100px;
 }
-.m-fields-code-select-col .code-select-container .icon {
+.code-select-container .icon,
+.data-source-method-select-container .icon {
   flex: 1 0 20px;
   cursor: pointer;
   margin-right: 5px;
@@ -848,6 +791,9 @@
   display: flex;
   justify-self: space-between;
 }
+.m-editor-layout:has(.m-editor-resizer-draging) {
+  overflow: hidden;
+}
 .m-editor-breadcrumb {
   position: absolute;
   left: 5px;
@@ -925,6 +871,31 @@
   justify-content: flex-end;
   margin-top: 15px;
 }
+.m-editor-data-source-methods {
+  width: 100%;
+}
+.m-editor-data-source-methods .tmagic-design-table {
+  width: 100%;
+}
+.m-editor-data-source-methods .m-editor-data-source-methods-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 15px;
+}
+.tmagic-data-source-input-text .el-input__wrapper.tmagic-data-source-input-text-wrapper {
+  overflow: hidden;
+  padding-right: 30px;
+}
+.tmagic-data-source-input-text .el-input__inner {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.tmagic-data-source-input-text .tmagic-data-source-input-icon {
+  position: absolute;
+  right: 7px;
+}
 .m-fields-key-value-item {
   display: flex;
   margin-bottom: 10px;