@tmagic/editor 1.2.0-beta.1 → 1.2.0-beta.3

package/src/layouts/Framework.vue

@@ -34,9 +34,9 @@
       </template>
 
       <template v-if="pageLength > 0" #right>
-        <el-scrollbar>
+        <TMagicScrollbar>
           <slot name="props-panel"></slot>
-        </el-scrollbar>
+        </TMagicScrollbar>
       </template>
     </layout>
   </div>
@@ -45,6 +45,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref, watchEffect } from 'vue';
 
+import { TMagicScrollbar } from '@tmagic/design';
 import type { MApp } from '@tmagic/schema';
 
 import { GetColumnWidth, Services } from '../type';

package/src/layouts/PropsPanel.vue

@@ -15,8 +15,8 @@
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
-import { ElMessage } from 'element-plus';
 
+import { tMagicMessage } from '@tmagic/design';
 import type { FormValue, MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
@@ -65,13 +65,8 @@ const submit = async () => {
     services?.editorService.update(values);
   } catch (e: any) {
     console.error(e);
-    ElMessage.closeAll();
-    ElMessage.error({
-      duration: 10000,
-      showClose: true,
-      message: e.message,
-      dangerouslyUseHTMLString: true,
-    });
+    tMagicMessage.closeAll();
+    tMagicMessage.error(e.message);
   }
 };
 

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-scrollbar>
+  <TMagicScrollbar>
     <slot name="component-list-panel-header"></slot>
 
-    <el-collapse class="ui-component-panel" :model-value="collapseValue">
-      <el-input
+    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+      <TMagicInput
         prefix-icon="el-icon-search"
         placeholder="输入关键字进行过滤"
         class="search-input"
@@ -12,8 +12,8 @@
         v-model="searchText"
       />
       <template v-for="(group, index) in list">
-        <el-collapse-item v-if="group.items && group.items.length" :key="index" :name="index">
-          <template #title><i class="el-icon-s-grid"></i>{{ group.title }}</template>
+        <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
+          <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
           <div
             v-for="item in group.items"
             class="component-item"
@@ -27,21 +27,23 @@
             <slot name="component-list-item" :component="item">
               <MIcon :icon="item.icon"></MIcon>
 
-              <el-tooltip effect="dark" placement="bottom" :content="item.text">
+              <TMagicTooltip effect="dark" placement="bottom" :content="item.text">
                 <span>{{ item.text }}</span>
-              </el-tooltip>
+              </TMagicTooltip>
             </slot>
           </div>
-        </el-collapse-item>
+        </TMagicCollapseItem>
       </template>
-    </el-collapse>
-  </el-scrollbar>
+    </TMagicCollapse>
+  </TMagicScrollbar>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
+import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import type StageCore from '@tmagic/stage';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
@@ -62,7 +64,7 @@ const list = computed(() =>
 const collapseValue = computed(() =>
   Array(list.value?.length)
     .fill(1)
-    .map((x, i) => i),
+    .map((x, i) => `${i}`),
 );
 
 let timeout: NodeJS.Timeout | undefined;

package/src/layouts/sidebar/LayerMenu.vue

@@ -2,8 +2,8 @@
   <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, ref } from 'vue';
 import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
@@ -11,105 +11,100 @@ import { NodeType } from '@tmagic/schema';
 import ContentMenu from '../../components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
 
-export default defineComponent({
-  components: { ContentMenu },
+const services = inject<Services>('services');
+const menu = ref<InstanceType<typeof ContentMenu>>();
+const node = computed(() => services?.editorService.get('node'));
+const isRoot = computed(() => node.value?.type === NodeType.ROOT);
+const isPage = computed(() => node.value?.type === NodeType.PAGE);
+const componentList = computed(() => services?.componentListService.getList() || []);
 
-  setup() {
-    const services = inject<Services>('services');
-    const menu = ref<InstanceType<typeof ContentMenu>>();
-    const node = computed(() => services?.editorService.get('node'));
-    const isRoot = computed(() => node.value?.type === NodeType.ROOT);
-    const isPage = computed(() => node.value?.type === NodeType.PAGE);
-    const componentList = computed(() => services?.componentListService.getList() || []);
+const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
 
-    const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
+const createMenuItems = (group: ComponentGroup): MenuButton[] =>
+  group.items.map((component) => ({
+    text: component.text,
+    type: 'button',
+    icon: component.icon,
+    handler: () => {
+      services?.editorService.add({
+        name: component.text,
+        type: component.type,
+        ...(component.data || {}),
+      });
+    },
+  }));
 
-    const createMenuItems = (group: ComponentGroup): MenuButton[] =>
-      group.items.map((component) => ({
-        text: component.text,
+const getSubMenuData = computed<MenuButton[]>(() => {
+  if (node.value?.type === 'tabs') {
+    return [
+      {
+        text: '标签页',
         type: 'button',
-        icon: component.icon,
+        icon: Files,
         handler: () => {
           services?.editorService.add({
-            name: component.text,
-            type: component.type,
-            ...(component.data || {}),
+            type: 'tab-pane',
           });
         },
-      }));
+      },
+    ];
+  }
+  if (node.value?.items) {
+    return (
+      componentList.value.reduce(
+        (subMenuData: MenuButton[], group: ComponentGroup, index) =>
+          subMenuData.concat(
+            createMenuItems(group),
+            index < componentList.value.length - 1
+              ? [
+                  {
+                    type: 'divider',
+                    direction: 'horizontal',
+                  },
+                ]
+              : [],
+          ),
+        [],
+      ) || []
+    );
+  }
+  return [];
+});
 
-    const getSubMenuData = computed<MenuButton[]>(() => {
-      if (node.value?.type === 'tabs') {
-        return [
-          {
-            text: '标签页',
-            type: 'button',
-            icon: Files,
-            handler: () => {
-              services?.editorService.add({
-                type: 'tab-pane',
-              });
-            },
-          },
-        ];
-      }
-      if (node.value?.items) {
-        return (
-          componentList.value.reduce(
-            (subMenuData: MenuButton[], group: ComponentGroup, index) =>
-              subMenuData.concat(
-                createMenuItems(group),
-                index < componentList.value.length - 1
-                  ? [
-                      {
-                        type: 'divider',
-                        direction: 'horizontal',
-                      },
-                    ]
-                  : [],
-              ),
-            [],
-          ) || []
-        );
-      }
-      return [];
-    });
+const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
+  {
+    type: 'button',
+    text: '新增',
+    icon: markRaw(Plus),
+    display: () => node.value?.items,
+    items: getSubMenuData.value,
+  },
+  {
+    type: 'button',
+    text: '复制',
+    icon: markRaw(DocumentCopy),
+    display: () => !isRoot.value,
+    handler: () => {
+      node.value && services?.editorService.copy(node.value);
+    },
+  },
+  {
+    type: 'button',
+    text: '删除',
+    icon: markRaw(Delete),
+    display: () => !isRoot.value && !isPage.value,
+    handler: () => {
+      node.value && services?.editorService.remove(node.value);
+    },
+  },
+  ...layerContentMenu,
+]);
 
-    return {
-      menu,
-      menuData: computed<(MenuButton | MenuComponent)[]>(() => [
-        {
-          type: 'button',
-          text: '新增',
-          icon: markRaw(Plus),
-          display: () => node.value?.items,
-          items: getSubMenuData.value,
-        },
-        {
-          type: 'button',
-          text: '复制',
-          icon: markRaw(DocumentCopy),
-          display: () => !isRoot.value,
-          handler: () => {
-            node.value && services?.editorService.copy(node.value);
-          },
-        },
-        {
-          type: 'button',
-          text: '删除',
-          icon: markRaw(Delete),
-          display: () => !isRoot.value && !isPage.value,
-          handler: () => {
-            node.value && services?.editorService.remove(node.value);
-          },
-        },
-        ...layerContentMenu,
-      ]),
+const show = (e: MouseEvent) => {
+  menu.value?.show(e);
+};
 
-      show(e: MouseEvent) {
-        menu.value?.show(e);
-      },
-    };
-  },
+defineExpose({
+  show,
 });
 </script>