@tmagic/editor 1.0.6 → 1.1.0-beta.10

package/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "1.0.6",
+  "version": "1.1.0-beta.10",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
     "src/theme/*"
   ],
   "main": "dist/tmagic-editor.umd.js",
-  "module": "dist/tmagic-editor.es.js",
+  "module": "dist/tmagic-editor.mjs",
   "style": "dist/style.css",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/tmagic-editor.es.js",
+      "import": "./dist/tmagic-editor.mjs",
       "require": "./dist/tmagic-editor.umd.js"
     },
     "./dist/style.css": {
@@ -22,7 +22,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -42,12 +44,12 @@
   ],
   "dependencies": {
     "@babel/core": "^7.18.0",
-    "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "1.0.6",
-    "@tmagic/form": "1.0.6",
-    "@tmagic/schema": "1.0.6",
-    "@tmagic/stage": "1.0.6",
-    "@tmagic/utils": "1.0.6",
+    "@element-plus/icons-vue": "^2.0.6",
+    "@tmagic/core": "1.1.0-beta.10",
+    "@tmagic/form": "1.1.0-beta.10",
+    "@tmagic/schema": "1.1.0-beta.10",
+    "@tmagic/stage": "1.1.0-beta.10",
+    "@tmagic/utils": "1.1.0-beta.10",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -57,26 +59,26 @@
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.0"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.6",
+    "@tmagic/form": "1.1.0-beta.10",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
-    "vue": "^3.2.0"
+    "vue": "^3.2.37"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/compiler-sfc": "^3.2.0",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^4.3.4",
-    "vite": "^2.9.13",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4",
+    "vue-tsc": "^0.39.4"
   }
 }

package/src/Editor.vue

@@ -30,7 +30,7 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+        <props-panel ref="propsPanel" @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
@@ -49,20 +49,21 @@ import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
-
-import Framework from '@editor/layouts/Framework.vue';
-import NavMenu from '@editor/layouts/NavMenu.vue';
-import PropsPanel from '@editor/layouts/PropsPanel.vue';
-import Sidebar from '@editor/layouts/sidebar/Sidebar.vue';
-import Workspace from '@editor/layouts/workspace/Workspace.vue';
-import componentListService from '@editor/services/componentList';
-import editorService from '@editor/services/editor';
-import eventsService from '@editor/services/events';
-import historyService from '@editor/services/history';
-import propsService from '@editor/services/props';
-import uiService from '@editor/services/ui';
-import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from '@editor/type';
+import { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
+
+import Framework from './layouts/Framework.vue';
+import NavMenu from './layouts/NavMenu.vue';
+import PropsPanel from './layouts/PropsPanel.vue';
+import Sidebar from './layouts/sidebar/Sidebar.vue';
+import Workspace from './layouts/workspace/Workspace.vue';
+import componentListService from './services/componentList';
+import editorService from './services/editor';
+import eventsService from './services/events';
+import historyService from './services/history';
+import propsService from './services/props';
+import storageService from './services/storage';
+import uiService from './services/ui';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -154,6 +155,26 @@ export default defineComponent({
       default: (el: HTMLElement) => Boolean(el.id),
     },
 
+    isContainer: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
+    },
+
+    containerHighlightClassName: {
+      type: String,
+      default: CONTAINER_HIGHLIGHT_CLASS,
+    },
+
+    containerHighlightDuration: {
+      type: Number,
+      default: 800,
+    },
+
+    containerHighlightType: {
+      type: String as PropType<ContainerHighlightType>,
+      default: ContainerHighlightType.DEFAULT,
+    },
+
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
@@ -254,6 +275,7 @@ export default defineComponent({
       propsService,
       editorService,
       uiService,
+      storageService,
     };
 
     provide('services', services);
@@ -269,6 +291,10 @@ export default defineComponent({
         moveableOptions: props.moveableOptions,
         canSelect: props.canSelect,
         updateDragEl: props.updateDragEl,
+        isContainer: props.isContainer,
+        containerHighlightClassName: props.containerHighlightClassName,
+        containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType,
       }),
     );
 

package/src/components/ContentMenu.vue

@@ -22,119 +22,107 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
-import { MenuButton, MenuItem } from '@editor/type';
+import { MenuButton, MenuItem } from '../type';
 
 import ToolButton from './ToolButton.vue';
 
-export default defineComponent({
-  components: { ToolButton },
-
-  props: {
-    menuData: {
-      type: Array as PropType<MenuItem[]>,
-      default: () => [],
-    },
-
-    isSubMenu: {
-      type: Boolean,
-      default: false,
-    },
+const props = withDefaults(
+  defineProps<{
+    menuData?: MenuItem[];
+    isSubMenu?: boolean;
+  }>(),
+  {
+    menuData: () => [],
+    isSubMenu: false,
   },
+);
 
-  emits: ['hide', 'show'],
-
-  setup(props, { emit }) {
-    const menu = ref<HTMLDivElement>();
-    const subMenu = ref<any>();
-    const visible = ref(false);
-    const subMenuData = ref<MenuItem[]>([]);
-    const menuStyle = ref({
-      left: '0',
-      top: '0',
-    });
-
-    const hide = () => {
-      if (!visible.value) return;
-
-      visible.value = false;
-      subMenu.value?.hide();
+const emit = defineEmits(['hide', 'show']);
 
-      emit('hide');
-    };
+const menu = ref<HTMLDivElement>();
+const subMenu = ref<any>();
+const visible = ref(false);
+const subMenuData = ref<MenuItem[]>([]);
+const menuStyle = ref({
+  left: '0',
+  top: '0',
+});
 
-    const hideHandler = (e: MouseEvent) => {
-      const target = e.target as HTMLElement | undefined;
-      if (!visible.value || !target) {
-        return;
-      }
-      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
-        return;
+const hide = () => {
+  if (!visible.value) return;
+
+  visible.value = false;
+  subMenu.value?.hide();
+
+  emit('hide');
+};
+
+const hideHandler = (e: MouseEvent) => {
+  const target = e.target as HTMLElement | undefined;
+  if (!visible.value || !target) {
+    return;
+  }
+  if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+    return;
+  }
+  hide();
+};
+
+const show = (e: MouseEvent) => {
+  // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+  setTimeout(() => {
+    visible.value = true;
+
+    nextTick(() => {
+      const menuHeight = menu.value?.clientHeight || 0;
+
+      let top = e.clientY;
+      if (menuHeight + e.clientY > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight;
       }
-      hide();
-    };
 
-    onMounted(() => {
-      if (props.isSubMenu) return;
+      menuStyle.value = {
+        top: `${top}px`,
+        left: `${e.clientX}px`,
+      };
 
-      globalThis.addEventListener('mousedown', hideHandler, true);
+      emit('show');
     });
+  }, 300);
+};
+
+const showSubMenu = (item: MenuItem) => {
+  const menuItem = item as MenuButton;
+  if (typeof item !== 'object' || !menuItem.items?.length) {
+    return;
+  }
+
+  subMenuData.value = menuItem.items;
+  if (menu.value) {
+    subMenu.value.show({
+      clientX: menu.value.offsetLeft + menu.value.clientWidth,
+      clientY: menu.value.offsetTop,
+    });
+  }
+};
 
-    onUnmounted(() => {
-      if (props.isSubMenu) return;
+onMounted(() => {
+  if (props.isSubMenu) return;
 
-      globalThis.removeEventListener('mousedown', hideHandler, true);
-    });
+  globalThis.addEventListener('mousedown', hideHandler, true);
+});
 
-    return {
-      menu,
-      subMenu,
-      visible,
-      menuStyle,
-      subMenuData,
-
-      hide,
-
-      show(e: MouseEvent) {
-        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
-        setTimeout(() => {
-          visible.value = true;
-
-          nextTick(() => {
-            const menuHeight = menu.value?.clientHeight || 0;
-
-            let top = e.clientY;
-            if (menuHeight + e.clientY > document.body.clientHeight) {
-              top = document.body.clientHeight - menuHeight;
-            }
-
-            menuStyle.value = {
-              top: `${top}px`,
-              left: `${e.clientX}px`,
-            };
-
-            emit('show');
-          });
-        }, 300);
-      },
-
-      showSubMenu(item: MenuItem) {
-        const menuItem = item as MenuButton;
-        if (typeof item !== 'object' || !menuItem.items?.length) {
-          return;
-        }
-
-        subMenuData.value = menuItem.items;
-        if (menu.value) {
-          subMenu.value.show({
-            clientX: menu.value.offsetLeft + menu.value.clientWidth,
-            clientY: menu.value.offsetTop,
-          });
-        }
-      },
-    };
-  },
+onUnmounted(() => {
+  if (props.isSubMenu) return;
+
+  globalThis.removeEventListener('mousedown', hideHandler, true);
+});
+
+defineExpose({
+  hide,
+  show,
 });
 </script>

package/src/components/Icon.vue

@@ -1,13 +1,13 @@
 <template>
   <el-icon v-if="!icon"><edit></edit></el-icon>
-  <img v-else-if="typeof icon === 'string' && icon.startsWith('http')" :src="icon" />
+  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')"><img :src="icon" /></el-icon>
   <i v-else-if="typeof icon === 'string'" :class="icon"></i>
   <el-icon v-else><component :is="toRaw(icon)"></component></el-icon>
 </template>
 
 <script lang="ts">
 import { Component, defineComponent, PropType, toRaw } from 'vue';
-import { Edit } from '@element-plus/icons';
+import { Edit } from '@element-plus/icons-vue';
 
 export default defineComponent({
   name: 'm-icon',

package/src/components/ScrollViewer.vue

@@ -9,7 +9,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { ScrollViewer } from '@editor/utils/scroll-viewer';
+import { ScrollViewer } from '../utils/scroll-viewer';
 
 export default defineComponent({
   name: 'm-editor-scroll-viewer',
@@ -55,7 +55,7 @@ export default defineComponent({
       style: computed(
         () => `
         width: ${props.width}px;
-        height: ${(props.height || 0) - 40}px;
+        height: ${props.height}px;
         position: absolute;
         margin-top: 30px;
       `,