@tmagic/editor 1.3.0-alpha.22 → 1.3.0-alpha.23

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.22",
+  "version": "1.3.0-alpha.23",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.22",
-    "@tmagic/design": "1.3.0-alpha.22",
-    "@tmagic/form": "1.3.0-alpha.22",
-    "@tmagic/schema": "1.3.0-alpha.22",
-    "@tmagic/stage": "1.3.0-alpha.22",
-    "@tmagic/table": "1.3.0-alpha.22",
-    "@tmagic/utils": "1.3.0-alpha.22",
+    "@tmagic/core": "1.3.0-alpha.23",
+    "@tmagic/design": "1.3.0-alpha.23",
+    "@tmagic/form": "1.3.0-alpha.23",
+    "@tmagic/schema": "1.3.0-alpha.23",
+    "@tmagic/stage": "1.3.0-alpha.23",
+    "@tmagic/table": "1.3.0-alpha.23",
+    "@tmagic/utils": "1.3.0-alpha.23",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.22",
-    "@tmagic/form": "1.3.0-alpha.22",
+    "@tmagic/design": "1.3.0-alpha.23",
+    "@tmagic/form": "1.3.0-alpha.23",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/layouts/sidebar/Sidebar.vue

@@ -1,24 +1,23 @@
 <template>
-  <component
-    v-if="data.type === 'tabs' && data.items.length"
-    v-model="activeTabName"
-    class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
-    :is="tabsComponent?.component || 'el-tabs'"
-  >
-    <component
+  <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
+    <div class="m-editor-sidebar-header">
+      <div
+        class="m-editor-sidebar-header-item"
+        v-for="(config, index) in sideBarItems"
+        :key="config.$key ?? index"
+        :class="{ 'is-active': activeTabName === config.text }"
+        @click="activeTabName = config.text || `${index}`"
+      >
+        <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </div>
+    <div
+      class="m-editor-sidebar-content"
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
-      :is="tabPaneComponent?.component || 'el-tab-pane'"
-      :key="config.$key || index"
+      :key="config.$key ?? index"
+      v-show="activeTabName === config.text"
     >
-      <template #label>
-        <div :key="config.text">
-          <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
-          <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
-        </div>
-      </template>
-
       <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
         <template
           #component-list-panel-header
@@ -71,16 +70,14 @@
           />
         </template>
       </component>
-    </component>
-  </component>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
-import { getConfig } from '@tmagic/design';
-
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
 import { SideBarData } from '@editor/type';
@@ -104,9 +101,6 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
-
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {

package/src/services/editor.ts

@@ -648,12 +648,14 @@ class Editor extends BaseService {
 
     if (doc) {
       const el = doc.getElementById(`${node.id}`);
-      const parentEl = el?.offsetParent;
+      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.right = '';
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = '';
     }
 
     return node;
@@ -792,20 +794,46 @@ class Editor extends BaseService {
     if (!node || isPage(node)) return;
 
     const { style, id, type } = node;
-    if (!style || style.position !== 'absolute') return;
-
-    if (top && !isNumber(style.top)) return;
-    if (left && !isNumber(style.left)) return;
-
-    this.update({
-      id,
-      type,
-      style: {
-        ...style,
-        left: Number(style.left) + left,
-        top: Number(style.top) + top,
-      },
-    });
+    if (!style || !['absolute', 'fixed'].includes(style.position)) return;
+
+    const update = (style: { [key: string]: any }) =>
+      this.update({
+        id,
+        type,
+        style,
+      });
+
+    if (top) {
+      if (isNumber(style.top)) {
+        update({
+          ...style,
+          top: Number(style.top) + Number(top),
+          bottom: '',
+        });
+      } else if (isNumber(style.bottom)) {
+        update({
+          ...style,
+          bottom: Number(style.bottom) - Number(top),
+          top: '',
+        });
+      }
+    }
+
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: '',
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: '',
+        });
+      }
+    }
   }
 
   public resetState() {

package/src/theme/sidebar.scss

@@ -1,76 +1,33 @@
-.m-editor-sidebar.tmagic-design-tabs {
+.m-editor-sidebar {
+  display: flex;
   height: 100%;
 
-  .el-tabs__header,
-  .t-tabs__header {
+  .m-editor-sidebar-header {
     background: $--sidebar-heder-background-color;
-    border: 0;
     height: 100%;
+    width: 40px;
 
-    .t-tabs__nav--card {
-      background-color: transparent;
-    }
-
-    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
-        .t-is-active
-      ):hover {
-      background-color: transparent;
-    }
-
-    &.is-left,
-    &.t-is-left {
-      width: 40px;
-      margin-right: 0;
-    }
-
-    .el-tabs__nav-wrap {
-      margin: 0;
-    }
-
-    .el-tabs__nav {
-      border: 0;
-      border-radius: 0;
-    }
-
-    .tab-label {
-      margin-left: 2px;
-    }
-
-    .el-tabs__item.is-left,
-    .t-tabs__nav-item {
+    .m-editor-sidebar-header-item {
       line-height: 15px;
-      border: 0;
       height: auto;
       padding: 8px;
       color: rgb(255, 255, 255);
       box-sizing: border-box;
+      cursor: pointer;
 
-      &.is-left,
-      &.t-is-left {
-        &.is-active,
-        &.t-is-active {
-          background: $--sidebar-content-background-color;
-          border: 0;
-
-          i {
-            color: #353140;
-          }
+      &.is-active {
+        background: $--sidebar-content-background-color;
 
-          .magic-editor-tab-panel-title {
-            color: #353140;
-          }
+        i {
+          color: #353140;
         }
 
-        &:first-child {
-          border-right: 0;
+        .magic-editor-tab-panel-title {
+          color: #353140;
         }
       }
     }
 
-    .t-tabs__nav-item {
-      padding: 7px;
-    }
-
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);
@@ -86,6 +43,12 @@
     }
   }
 
+  .m-editor-sidebar-content {
+    height: 100%;
+    width: calc(100% - 40px);
+    overflow: auto;
+  }
+
   .el-scrollbar {
     height: 100%;
   }
@@ -109,9 +72,4 @@
       background: rgba(0, 0, 0, 0.2);
     }
   }
-
-  .el-tabs__content,
-  .el-tab-pane {
-    height: 100%;
-  }
 }