@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/dist/{style.css → tmagic-editor.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;
@@ -148,24 +162,79 @@
 .m-form .el-tabs {
   margin-bottom: 10px;
 }
-.m-form .el-form-item.hidden > .el-form-item__label {
+.m-form .el-form-item.tmagic-form-hidden > .el-form-item__label {
   display: none;
 }
-.m-form .t-form__item.hidden > .t-form__label {
+.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;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  color: #606266;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 14px;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.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;
+  width: 8px;
+  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);
@@ -191,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;
@@ -209,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;
 }
@@ -221,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%;
 }
@@ -276,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;
 }
@@ -296,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;
@@ -309,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;
@@ -321,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;
@@ -330,10 +411,12 @@ fieldset.m-fieldset .m-form-tip {
   left: 0;
   box-sizing: border-box;
   z-index: 1;
+  background: transparent;
 }
 .tmagic-design-input.search-input .el-input__prefix {
   padding: 7px;
 }
+
 .m-editor-nav-menu {
   display: flex;
   z-index: 5;
@@ -400,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;
@@ -457,6 +541,7 @@ fieldset.m-fieldset .m-form-tip {
   border-color: #2882e0;
   color: #2882e0;
 }
+
 .m-editor-sidebar {
   display: flex;
   height: 100%;
@@ -514,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;
 }
@@ -542,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;
@@ -630,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;
@@ -650,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;
@@ -689,6 +778,7 @@ fieldset.m-fieldset .m-form-tip {
   color: #fff;
   font-size: 18px;
 }
+
 .m-editor-workspace {
   height: 100%;
   width: 100%;
@@ -697,24 +787,15 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-workspace:focus-visible {
   outline: 0;
 }
+
 .m-editor-page-bar-tabs {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
+  user-select: none;
 }
-.m-editor-page-bar-tabs .tmagic-design-button.m-editor-page-bar-switch-type-button {
-  margin-left: 10px;
-  position: relative;
-  top: 1px;
-  border-radius: 3px 3px 0 0;
-  border: 1px solid #d9dbdd;
-  border-bottom: 1px solid transparent;
-  padding: 5px 10px;
-}
-.m-editor-page-bar-tabs .tmagic-design-button.m-editor-page-bar-switch-type-button.active {
-  background-color: #f3f3f3;
-}
+
 .m-editor-page-list-item {
   display: flex;
   width: 100%;
@@ -727,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%;
@@ -763,12 +845,26 @@ fieldset.m-fieldset .m-form-tip {
   position: relative;
   z-index: 1;
 }
+.m-editor-page-bar-item-icon .icon-active {
+  font-weight: bold;
+  color: #2882e0;
+}
 .m-editor-page-bar-item-title {
   max-width: 150px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
+.m-editor-page-bar-item-left-icon, .m-editor-page-bar-item-right-icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+}
+.m-editor-page-bar-item-left-icon {
+  right: 34px;
+}
+
 .page-bar-popover.tmagic-design-popper {
   padding: 4px 0;
 }
@@ -777,15 +873,83 @@ fieldset.m-fieldset .m-form-tip {
   transition: all 0.2s ease 0s;
   padding: 5px 14px;
 }
-.page-bar-popover .menu-item .el-button--text,
-.page-bar-popover .menu-item i {
+.page-bar-popover .menu-item .tmagic-design-button {
   color: #313a40;
 }
 .page-bar-popover .menu-item:hover {
   background-color: #f3f5f9;
 }
+.page-bar-popover .menu-item.active .tmagic-design-button {
+  color: #2882e0;
+}
+
+.m-editor-page-bar-search-panel {
+  position: absolute;
+  bottom: 32px;
+  border: 1px solid #d9dbdd;
+  padding: 6px 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.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;
@@ -793,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;
@@ -814,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;
@@ -883,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%;
@@ -895,6 +1068,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-stage:focus-visible {
   outline: none;
 }
+
 .m-editor-stage-container {
   width: 100%;
   height: 100%;
@@ -907,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;
@@ -918,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%);
@@ -944,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%;
@@ -980,6 +1162,7 @@ fieldset.m-fieldset .m-form-tip {
   right: 0;
   z-index: 11;
 }
+
 .tmagic-design-icon {
   --color: inherit;
   height: 1em;
@@ -991,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%;
 }
@@ -1013,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;
@@ -1032,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;
@@ -1056,6 +1246,7 @@ fieldset.m-fieldset .m-form-tip {
   height: 22px;
   margin-right: 5px;
 }
+
 .data-source-list-panel-add-menu {
   padding: 4px 0;
 }
@@ -1067,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%;
 }
@@ -1078,6 +1270,7 @@ fieldset.m-fieldset .m-form-tip {
   justify-content: flex-end;
   margin-top: 15px;
 }
+
 .m-editor-data-source-methods {
   width: 100%;
 }
@@ -1089,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;
@@ -1103,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;
@@ -1188,6 +1387,7 @@ fieldset.m-fieldset .m-form-tip {
   color: #909399;
   font-size: 14px;
 }
+
 .m-editor-float-box {
   position: absolute;
   background-color: #fff;
@@ -1214,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%;
 }
@@ -1231,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,
@@ -1245,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%;
 }
@@ -1259,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;
 }