@tmagic/editor 1.5.0 → 1.5.2

package/dist/style.css

@@ -66,18 +66,23 @@
 .tmagic-design-popper:focus {
   outline: none;
 }
+
 .tmagic-design-popper[data-popper-placement^=top] > .tmagic-design-popper-arrow {
   bottom: -4px;
 }
+
 .tmagic-design-popper[data-popper-placement^=bottom] > .tmagic-design-popper-arrow {
   top: -4px;
 }
+
 .tmagic-design-popper[data-popper-placement^=left] > .tmagic-design-popper-arrow {
   right: -4px;
 }
+
 .tmagic-design-popper[data-popper-placement^=right] > .tmagic-design-popper-arrow {
   left: -4px;
 }
+
 .tmagic-design-popper-arrow,
 .tmagic-design-popper-arrow::before {
   position: absolute;
@@ -85,14 +90,17 @@
   height: 8px;
   background: inherit;
 }
+
 .tmagic-design-popper-arrow {
   visibility: hidden;
 }
+
 .tmagic-design-popper-arrow::before {
   visibility: visible;
   content: "";
   transform: rotate(45deg);
 }
+
 .m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }
@@ -106,9 +114,11 @@
 .m-table .el-table__row.el-table__row--level-1 {
   color: #999;
 }
+
 .tmagic-design-form-inline .m-form-container {
   display: inline-flex;
 }
+
 .m-form-dialog .el-dialog__body {
   padding: 0 !important;
 }
@@ -118,6 +128,7 @@
 .m-form-dialog .el-table .m-form-item .el-form-item {
   margin-bottom: 0;
 }
+
 .m-form-drawer .el-drawer__header {
   margin: 0;
 }
@@ -126,13 +137,16 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter, .fade-leave-to {
   opacity: 0;
 }
+
 .m-form .m-form-tip {
   color: rgba(0, 0, 0, 0.45);
   font-size: 12px;
@@ -154,15 +168,18 @@
 .m-form .t-form__item.tmagic-form-hidden > .t-form__label {
   display: none;
 }
+
 .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
   display: none;
 }
+
 .m-form-validate__warning {
   color: var(--el-color-warning);
   font-size: 12px;
   width: 100%;
   line-height: 1.4;
 }
+
 .tmagic-form-text-popper {
   min-width: 150px;
   line-height: 1.4;
@@ -179,18 +196,23 @@
 .tmagic-form-text-popper:focus {
   outline: none;
 }
+
 .tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
   bottom: -4px;
 }
+
 .tmagic-form-text-popper[data-popper-placement^=bottom] > .tmagic-form-text-popper-arrow {
   top: -4px;
 }
+
 .tmagic-form-text-popper[data-popper-placement^=left] > .tmagic-form-text-popper-arrow {
   right: -4px;
 }
+
 .tmagic-form-text-popper[data-popper-placement^=right] > .tmagic-form-text-popper-arrow {
   left: -4px;
 }
+
 .tmagic-form-text-popper-arrow,
 .tmagic-form-text-popper-arrow::before {
   position: absolute;
@@ -198,17 +220,21 @@
   height: 8px;
   background: inherit;
 }
+
 .tmagic-form-text-popper-arrow {
   visibility: hidden;
 }
+
 .tmagic-form-text-popper-arrow::before {
   visibility: visible;
   content: "";
   transform: rotate(45deg);
 }
+
 div.m-fields-link {
   width: fit-content;
 }
+
 fieldset.m-fieldset {
   position: relative;
   border: 1px solid rgb(229, 229, 229);
@@ -234,6 +260,7 @@ fieldset.m-fieldset legend {
 fieldset.m-fieldset .m-form-tip {
   margin-left: 5px;
 }
+
 .m-fields-group-list .el-button--text {
   padding: 0;
   margin-bottom: 7px;
@@ -252,6 +279,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-group-list .m-fields-group-list-item:last-of-type {
   border-bottom: 0;
 }
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }
@@ -264,12 +292,15 @@ fieldset.m-fieldset .m-form-tip {
 .m-form-panel .m-form-tip {
   margin-left: 5px;
 }
+
 .m-container-panel:not(:last-of-type) {
   margin-bottom: 20px;
 }
+
 .m-fields-table-wrap {
   width: 100%;
 }
+
 .m-fields-table {
   width: 100%;
 }
@@ -319,9 +350,11 @@ fieldset.m-fieldset .m-form-tip {
   color: #f56c6c;
   cursor: pointer;
 }
+
 .m-select {
   width: 100%;
 }
+
 .magic-form-dynamic-tab .el-tabs__header.is-top {
   padding-right: 8px;
 }
@@ -339,12 +372,15 @@ fieldset.m-fieldset .m-form-tip {
 .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab .el-icon-plus {
   display: none;
 }
+
 .magic-form-tab {
   margin-bottom: 10px;
 }
+
 .diff-count-badge {
   top: -10px;
 }
+
 .m-fields-number-range {
   display: flex;
   align-items: center;
@@ -352,6 +388,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-number-range .split-tag {
   margin: 0 5px;
 }
+
 .m-form-box {
   display: flex;
   flex-direction: column;
@@ -364,6 +401,7 @@ fieldset.m-fieldset .m-form-tip {
   align-items: center;
   justify-content: space-between;
 }
+
 .tmagic-design-input.search-input {
   background: #fff;
   color: #bbbbbb;
@@ -378,6 +416,7 @@ fieldset.m-fieldset .m-form-tip {
 .tmagic-design-input.search-input .el-input__prefix {
   padding: 7px;
 }
+
 .m-editor-nav-menu {
   display: flex;
   z-index: 5;
@@ -444,6 +483,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-nav-menu .menu-item.rule .el-icon {
   transform: rotate(-90deg);
 }
+
 .m-editor {
   display: flex;
   flex-direction: column;
@@ -501,6 +541,7 @@ fieldset.m-fieldset .m-form-tip {
   border-color: #2882e0;
   color: #2882e0;
 }
+
 .m-editor-sidebar {
   display: flex;
   height: 100%;
@@ -558,12 +599,14 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-sidebar .fold-icon:hover {
   background: rgba(0, 0, 0, 0.2);
 }
+
 .m-editor-slide-list-box > div:first-child {
   min-width: 240px;
 }
 .m-editor-slide-list-box .m-form-box {
   border-left: 1px solid #e0e0e0;
 }
+
 .m-editor-layer-panel {
   background: #ffffff;
 }
@@ -586,6 +629,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-layer-panel .search-wrapper .tmagic-design-button {
   margin-right: 10px;
 }
+
 .ui-component-panel.tmagic-design-collapse {
   border-top: 0 !important;
   margin-top: 48px;
@@ -674,6 +718,7 @@ fieldset.m-fieldset .m-form-tip {
   padding-top: 48px;
   position: relative;
 }
+
 .m-editor-resizer {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
@@ -694,14 +739,14 @@ fieldset.m-fieldset .m-form-tip {
   visibility: visible;
   opacity: 1;
 }
-.m-editor-resizer.m-editor-resizer-draging::after {
+.m-editor-resizer.m-editor-resizer-dragging::after {
   content: "";
   position: absolute;
   width: 600px;
   height: 100%;
   left: 0;
 }
-.m-editor-resizer.m-editor-resizer-draging::before {
+.m-editor-resizer.m-editor-resizer-dragging::before {
   content: "";
   position: absolute;
   width: 600px;
@@ -733,6 +778,7 @@ fieldset.m-fieldset .m-form-tip {
   color: #fff;
   font-size: 18px;
 }
+
 .m-editor-workspace {
   height: 100%;
   width: 100%;
@@ -741,6 +787,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-workspace:focus-visible {
   outline: 0;
 }
+
 .m-editor-page-bar-tabs {
   position: fixed;
   bottom: 0;
@@ -748,6 +795,7 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
   user-select: none;
 }
+
 .m-editor-page-list-item {
   display: flex;
   width: 100%;
@@ -760,6 +808,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-page-list-item:hover {
   background-color: #f3f5f9;
 }
+
 .m-editor-page-bar {
   display: flex;
   width: 100%;
@@ -815,6 +864,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-page-bar-item-left-icon {
   right: 34px;
 }
+
 .page-bar-popover.tmagic-design-popper {
   padding: 4px 0;
 }
@@ -832,6 +882,7 @@ fieldset.m-fieldset .m-form-tip {
 .page-bar-popover .menu-item.active .tmagic-design-button {
   color: #2882e0;
 }
+
 .m-editor-page-bar-search-panel {
   position: absolute;
   bottom: 32px;
@@ -843,8 +894,62 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-page-bar-search-panel .tmagic-design-form-item {
   margin-bottom: 0;
 }
+
 .m-editor-props-panel {
-  padding: 0 10px 50px 10px;
+  height: 100%;
+  position: relative;
+  --props-style-panel-width: 300px;
+}
+.m-editor-props-panel .m-editor-props-form-panel {
+  padding-bottom: 10px;
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+}
+.m-editor-props-panel .m-editor-props-form-panel .tmagic-design-scrollbar {
+  height: 100%;
+}
+.m-editor-props-panel .m-editor-props-property-panel.show-style-panel {
+  padding-right: var(--props-style-panel-width);
+}
+.m-editor-props-panel .m-editor-props-property-panel.show-style-panel .m-editor-props-panel-src-icon {
+  right: calc(15px + var(--props-style-panel-width));
+}
+.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
+  padding-top: 55px;
+}
+.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background: #fff;
+  z-index: 2;
+}
+.m-editor-props-panel .m-editor-props-style-panel {
+  position: absolute;
+  width: var(--props-style-panel-width);
+  right: 0;
+  top: 0;
+  background: #fff;
+  z-index: 12;
+}
+.m-editor-props-panel .m-editor-props-style-panel .tmagic-design-scrollbar {
+  height: calc(100% - 38px - 1px);
+}
+.m-editor-props-panel .m-editor-props-style-panel .m-editor-props-style-panel-title {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 0 5px;
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #d9dbdd;
 }
 .m-editor-props-panel .m-editor-props-panel-src-icon {
   position: absolute;
@@ -852,6 +957,12 @@ fieldset.m-fieldset .m-form-tip {
   bottom: 15px;
   z-index: 30;
 }
+.m-editor-props-panel .m-editor-props-panel-style-icon {
+  position: absolute;
+  right: 15px;
+  bottom: 60px;
+  z-index: 30;
+}
 .m-editor-props-panel .m-editor-props-panel-src-code.magic-code-editor {
   position: absolute;
   left: 0;
@@ -873,11 +984,13 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-props-panel .m-fields-group-list .tmagic-design-table th {
   font-size: 12px;
 }
+
 .m-editor-props-panel-popper.small span,
 .m-editor-props-panel-popper.small a,
 .m-editor-props-panel-popper.small p {
   font-size: 12px;
 }
+
 .magic-editor-content-menu {
   position: fixed;
   font-size: 12px;
@@ -942,6 +1055,7 @@ fieldset.m-fieldset .m-form-tip {
 .magic-editor-content-menu .menu-item.button.active.menu-item i {
   color: #fff;
 }
+
 .m-editor-stage {
   position: relative;
   width: 100%;
@@ -954,6 +1068,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-stage:focus-visible {
   outline: none;
 }
+
 .m-editor-stage-container {
   width: 100%;
   height: 100%;
@@ -966,6 +1081,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-stage-container::-webkit-scrollbar {
   width: 0 !important;
 }
+
 .m-editor-stage-overlay {
   position: absolute;
   left: 0;
@@ -977,17 +1093,20 @@ fieldset.m-fieldset .m-form-tip {
   z-index: 20;
   overflow: auto;
 }
+
 .m-editor-stage-overlay-container {
   position: relative;
   flex-shrink: 0;
   margin: auto;
   box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 }
+
 .m-editor-stage-overlay-close.tmagic-design-icon {
   position: fixed;
   right: 20px;
   top: 10px;
 }
+
 .m-editor-stage-float-button {
   cursor: pointer;
   transform: translateY(-50%);
@@ -1003,18 +1122,22 @@ fieldset.m-fieldset .m-form-tip {
   color: rgba(0, 0, 0, 0.88);
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
+
 .m-editor-node-list-menu {
   height: 100%;
   width: 100%;
   min-width: 300px;
   max-height: 500px;
 }
+
 .m-container-vs-code .el-form-item {
   margin-bottom: 0;
 }
+
 .magic-code-editor {
   width: 100%;
 }
+
 .magic-code-editor-wrapper {
   width: 100%;
   height: 100%;
@@ -1039,6 +1162,7 @@ fieldset.m-fieldset .m-form-tip {
   right: 0;
   z-index: 11;
 }
+
 .tmagic-design-icon {
   --color: inherit;
   height: 1em;
@@ -1050,12 +1174,14 @@ fieldset.m-fieldset .m-form-tip {
   max-width: 100%;
   max-height: 100%;
 }
+
 .m-fields-code-select {
   width: 100%;
 }
 .m-fields-code-select .el-card__header {
   display: none;
 }
+
 .m-fields-event-select {
   width: 100%;
 }
@@ -1072,10 +1198,12 @@ fieldset.m-fieldset .m-form-tip {
 .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-data-source-method-select {
   width: 100%;
 }
+
 .code-select-container,
 .data-source-method-select-container {
   display: flex;
@@ -1091,20 +1219,23 @@ fieldset.m-fieldset .m-form-tip {
   cursor: pointer;
   margin-right: 5px;
 }
+
 .m-editor-layout {
   width: 100%;
   display: flex;
   justify-self: space-between;
 }
-.m-editor-layout:has(.m-editor-resizer-draging) {
+.m-editor-layout:has(.m-editor-resizer-dragging) {
   overflow: hidden;
 }
+
 .m-editor-breadcrumb {
   position: absolute;
   left: 5px;
   top: 5px;
   z-index: 10;
 }
+
 .data-source-list-panel .list-container .list-item .codeIcon {
   width: 22px;
   height: 22px;
@@ -1115,6 +1246,7 @@ fieldset.m-fieldset .m-form-tip {
   height: 22px;
   margin-right: 5px;
 }
+
 .data-source-list-panel-add-menu {
   padding: 4px 0;
 }
@@ -1126,6 +1258,7 @@ fieldset.m-fieldset .m-form-tip {
 .data-source-list-panel-add-menu .menu-item:hover {
   background-color: #f3f5f9;
 }
+
 .m-editor-data-source-fields {
   width: 100%;
 }
@@ -1137,6 +1270,7 @@ fieldset.m-fieldset .m-form-tip {
   justify-content: flex-end;
   margin-top: 15px;
 }
+
 .m-editor-data-source-methods {
   width: 100%;
 }
@@ -1148,6 +1282,7 @@ fieldset.m-fieldset .m-form-tip {
   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;
@@ -1162,23 +1297,28 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   right: 7px;
 }
+
 .m-fields-key-value {
   display: flex;
   justify-items: center;
   align-items: top;
   width: 100%;
 }
+
 .m-fields-key-value-item {
   display: flex;
   margin-bottom: 10px;
   align-items: center;
 }
-.m-fileds-key-value-delimiter {
+
+.m-fields-key-value-delimiter {
   margin: 0 10px;
 }
-.m-fileds-key-value-delete {
+
+.m-fields-key-value-delete {
   margin-left: 10px;
 }
+
 .m-editor-tree {
   color: #313a40;
   font-size: 13px;
@@ -1247,6 +1387,7 @@ fieldset.m-fieldset .m-form-tip {
   color: #909399;
   font-size: 14px;
 }
+
 .m-editor-float-box {
   position: absolute;
   background-color: #fff;
@@ -1273,9 +1414,11 @@ fieldset.m-fieldset .m-form-tip {
   flex: 1;
   padding: 0 16px;
 }
+
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
+
 .m-fields-page-fragment-select {
   width: 100%;
 }
@@ -1290,6 +1433,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-page-fragment-select .page-fragment-select-container .icon {
   margin-left: 10px;
 }
+
 .m-fields-data-source-select,
 .m-fields-data-source-field-select,
 .m-fields-data-source-method-select .data-source-method-select-container,
@@ -1304,6 +1448,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-code-select-col .code-select-container .m-fields-select-action-button {
   margin-left: 5px;
 }
+
 .m-fields-data-source-field-select {
   width: 100%;
 }
@@ -1318,10 +1463,12 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-data-source-field-select .m-editor-data-source-field-select .tmagic-design-cascader {
   flex: 2;
 }
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter, .fade-leave-to {
   opacity: 0;
 }