@tmagic/editor 1.0.0-beta.13 → 1.0.0-beta.16

package/dist/types/src/Editor.vue.d.ts

@@ -126,9 +126,9 @@ declare const _default: DefineComponent<{
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    componentGroupList: ComponentGroup[];
     menu: MenuBarData;
     modelValue: MApp;
+    componentGroupList: ComponentGroup[];
     propsConfigs: Record<string, FormConfig>;
     propsValues: Record<string, MNode>;
     eventMethodList: Record<string, any>;

package/dist/types/src/components/ToolButton.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: DefineComponent<{
             display: boolean;
         };
     };
+    eventType: {
+        type: PropType<"mousedown" | "mouseup" | "click">;
+        default: string;
+    };
 }, {
     ZoomIn: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
     ZoomOut: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
@@ -19,7 +23,9 @@ declare const _default: DefineComponent<{
     zoomInHandler: () => void | undefined;
     zoomOutHandler: () => void | undefined;
     dropdownHandler(command: any): void;
-    buttonHandler(item: MenuButton | MenuComponent): void;
+    clickHandler(item: MenuButton | MenuComponent, event: MouseEvent): void;
+    mousedownHandler(item: MenuButton | MenuComponent, event: MouseEvent): void;
+    mouseupHandler(item: MenuButton | MenuComponent, event: MouseEvent): void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     data: {
         type: PropType<string | MenuButton | MenuComponent>;
@@ -29,7 +35,12 @@ declare const _default: DefineComponent<{
             display: boolean;
         };
     };
+    eventType: {
+        type: PropType<"mousedown" | "mouseup" | "click">;
+        default: string;
+    };
 }>>, {
     data: string | MenuButton | MenuComponent;
+    eventType: "mousedown" | "mouseup" | "click";
 }>;
 export default _default;

package/dist/types/src/fields/UISelect.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DefineComponent, ComputedRef, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ComputedRef, Ref, ExtractPropTypes } from 'vue';
 declare const _default: DefineComponent<{
     labelWidth: StringConstructor;
     config: ObjectConstructor;
@@ -9,6 +9,9 @@ declare const _default: DefineComponent<{
     };
     name: StringConstructor;
 }, {
+    Delete: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    Pointer: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    Close: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
     val: ComputedRef<any>;
     uiSelectMode: Ref<boolean>;
     toName: ComputedRef<string>;

package/dist/types/src/index.d.ts

@@ -13,6 +13,7 @@ export { default as uiService } from './services/ui';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
+export { default as ToolButton } from './components/ToolButton.vue';
 declare const _default: {
     install: (app: App, opt?: InstallOptions | undefined) => void;
 };

package/dist/types/src/layouts/CodeEditor.vue.d.ts

@@ -8,13 +8,17 @@ declare const _default: DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     type: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
     language: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, {
     values: Ref<string>;
     loading: Ref<boolean>;
@@ -30,18 +34,23 @@ declare const _default: DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     type: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
     language: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>> & {
     onInitd?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
     language: string;
+    options: Record<string, any>;
 }>;
 export default _default;

package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts

@@ -8,5 +8,6 @@ declare const _default: DefineComponent<{}, {
         title: string;
     }[] | undefined>;
     appendComponent({ text, type, data }: ComponentItem): void;
+    dragstartHandler({ text, type, data }: ComponentItem, e: DragEvent): void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/layouts/sidebar/Sidebar.vue.d.ts

@@ -1,5 +1,5 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import { SideBarData, SideComponent } from '../../type';
+import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { SideBarData } from '../../type';
 declare const _default: DefineComponent<{
     data: {
         type: PropType<SideBarData>;
@@ -11,7 +11,6 @@ declare const _default: DefineComponent<{
     };
 }, {
     activeTabName: Ref<string>;
-    items: ComputedRef<SideComponent[] | Record<string, any>[]>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     data: {
         type: PropType<SideBarData>;

package/dist/types/src/layouts/sidebar/TabPane.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { SideComponent, SideItem } from '../../type';
+declare const _default: DefineComponent<{
+    data: {
+        type: PropType<SideItem>;
+    };
+}, {
+    config: ComputedRef<SideComponent | undefined>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    data: {
+        type: PropType<SideItem>;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/src/layouts/workspace/PageBar.vue.d.ts

@@ -12,5 +12,7 @@ declare const _default: DefineComponent<{}, {
     canScroll: Ref<boolean>;
     itemsContainerWidth: ComputedRef<number>;
     scroll: (type: "left" | "right" | "start" | "end") => void;
+    Delete: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    DocumentCopy: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/services/history.d.ts

@@ -37,6 +37,7 @@ declare class History extends BaseService {
         canUndo: boolean;
     };
     constructor();
+    reset(): void;
     changePage(page: MPage): void;
     empty(): void;
     push(state: StepValue): StepValue | null;

package/dist/types/src/services/props.d.ts

@@ -1,5 +1,5 @@
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
+import type { MNode } from '@tmagic/schema';
 import BaseService from './BaseService';
 declare class Props extends BaseService {
     private state;
@@ -29,7 +29,7 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string, defaultValue?: {}): Promise<MComponent>;
+    getPropsValue(type: string, defaultValue?: {}): Promise<any>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/type.d.ts

@@ -29,6 +29,7 @@ export interface StoreState {
     highlightNode: MNode | null;
     stage: StageCore | null;
     modifiedNodeIds: Map<Id, Id>;
+    pageLength: number;
 }
 export interface PropsState {
     propsConfigMap: Record<string, FormConfig>;
@@ -92,6 +93,8 @@ export interface MenuButton {
      * zoom: 放大缩小
      */
     type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+    /** 当type为divider时有效，分割线方向, 默认vertical */
+    direction?: 'horizontal' | 'vertical';
     /** 展示的文案 */
     text?: string;
     /** 鼠标悬浮是显示的气泡中的文案 */
@@ -103,14 +106,9 @@ export interface MenuButton {
     /** 是否显示，默认为true */
     display?: boolean | ((data?: Services) => boolean);
     /** type为button/dropdown时点击运行的方法 */
-    handler?: (data?: Services) => Promise<any> | any;
-    /** type为dropdown时，下拉的菜单列表 */
-    items?: {
-        /** 展示的文案 */
-        text: string;
-        /** 点击运行的方法 */
-        handler(data: Services): any;
-    }[];
+    handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
+    /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+    items?: MenuButton[];
 }
 export interface MenuComponent {
     type: 'component';

package/package.json

@@ -1,7 +1,10 @@
 {
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.16",
   "name": "@tmagic/editor",
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/*",
+    "src/theme/*"
+  ],
   "main": "dist/tmagic-editor.umd.js",
   "module": "dist/tmagic-editor.es.js",
   "style": "dist/style.css",
@@ -14,7 +17,8 @@
     "./dist/style.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
-    }
+    },
+    "./*": "./*"
   },
   "license": "Apache-2.0",
   "scripts": {
@@ -40,13 +44,14 @@
   ],
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.13",
-    "@tmagic/form": "^1.0.0-beta.13",
-    "@tmagic/schema": "^1.0.0-beta.13",
-    "@tmagic/stage": "^1.0.0-beta.13",
-    "@tmagic/utils": "^1.0.0-beta.13",
+    "@tmagic/core": "^1.0.0-beta.16",
+    "@tmagic/form": "^1.0.0-beta.16",
+    "@tmagic/schema": "^1.0.0-beta.16",
+    "@tmagic/stage": "^1.0.0-beta.16",
+    "@tmagic/utils": "^1.0.0-beta.16",
+    "buffer": "^6.0.3",
     "color": "^3.1.3",
-    "element-plus": "^2.1.7",
+    "element-plus": "^2.2.0",
     "events": "^3.3.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
@@ -75,5 +80,5 @@
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "ca2b203614cbdaff580e5cb6f35630f50b827451"
+  "gitHead": "2aebfb1b8ceb5c8e26dfb59b643ed9f4f4b7bd15"
 }

package/src/components/ContentMenu.vue

@@ -0,0 +1,107 @@
+<template>
+  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+    <div>
+      <tool-button
+        v-for="(item, index) in menuData"
+        event-type="mouseup"
+        :data="item"
+        :key="index"
+        @mouseup="hide"
+        @mouseenter="showSubMenu(item)"
+      ></tool-button>
+    </div>
+    <teleport to="body">
+      <content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"></content-menu>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
+
+import { MenuButton, MenuItem } from '@editor/type';
+
+import ToolButton from './ToolButton.vue';
+
+export default defineComponent({
+  components: { ToolButton },
+
+  props: {
+    menuData: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+  },
+
+  setup() {
+    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 = () => {
+      visible.value = false;
+    };
+
+    onMounted(() => {
+      globalThis.addEventListener(
+        'mousedown',
+        (e: MouseEvent) => {
+          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
+            return;
+          }
+          hide();
+        },
+        true,
+      );
+    });
+
+    return {
+      menu,
+      subMenu,
+      visible,
+      menuStyle,
+      subMenuData,
+
+      hide,
+
+      show(e: MouseEvent) {
+        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`,
+          };
+        });
+      },
+
+      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,
+          });
+        }
+      },
+    };
+  },
+});
+</script>

package/src/components/ToolButton.vue

@@ -1,24 +1,37 @@
 <template>
-  <div v-if="display" class="menu-item">
-    <el-divider v-if="item.type === 'divider'" direction="vertical"></el-divider>
+  <div
+    v-if="display"
+    class="menu-item"
+    :class="item.type"
+    @click="clickHandler(item, $event)"
+    @mousedown="mousedownHandler(item, $event)"
+    @mouseup="mouseupHandler(item, $event)"
+  >
+    <el-divider v-if="item.type === 'divider'" :direction="item.direction || 'vertical'"></el-divider>
     <div v-else-if="item.type === 'text'" class="menu-item-text">{{ item.text }}</div>
 
     <template v-else-if="item.type === 'zoom'">
-      <el-button size="small" type="text"><m-icon :icon="ZoomIn" @click="zoomInHandler"></m-icon></el-button>
+      <tool-button
+        :data="{ type: 'button', icon: ZoomOut, handler: zoomOutHandler, tooltip: '缩小' }"
+        :event-type="eventType"
+      ></tool-button>
       <span class="menu-item-text" style="margin: 0 5px">{{ parseInt(`${zoom * 100}`, 10) }}%</span>
-      <el-button size="small" type="text"><m-icon :icon="ZoomOut" @click="zoomOutHandler"></m-icon></el-button>
+      <tool-button
+        :data="{ type: 'button', icon: ZoomIn, handler: zoomInHandler, tooltip: '放大' }"
+        :event-type="eventType"
+      ></tool-button>
     </template>
 
-    <el-tooltip
-      v-else-if="item.type === 'button'"
-      effect="dark"
-      placement="bottom-start"
-      :content="item.tooltip || item.text"
-    >
-      <el-button size="small" type="text" :disabled="disabled" @click="buttonHandler(item)"
-        ><m-icon :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
+    <template v-else-if="item.type === 'button'">
+      <el-tooltip v-if="item.tooltip" effect="dark" placement="bottom-start" :content="item.tooltip">
+        <el-button size="small" text :disabled="disabled"
+          ><m-icon v-if="item.icon" :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
+        >
+      </el-tooltip>
+      <el-button v-else size="small" text :disabled="disabled"
+        ><m-icon v-if="item.icon" :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
       >
-    </el-tooltip>
+    </template>
 
     <el-dropdown v-else-if="item.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
       <span class="el-dropdown-link menubar-menu-button">
@@ -38,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
 import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
 
 import { NodeType } from '@tmagic/schema';
@@ -58,6 +71,11 @@ export default defineComponent({
         display: false,
       }),
     },
+
+    eventType: {
+      type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
+      default: 'click',
+    },
   },
 
   setup(props) {
@@ -87,7 +105,7 @@ export default defineComponent({
         case 'delete':
           return {
             type: 'button',
-            icon: Delete,
+            icon: markRaw(Delete),
             tooltip: '刪除',
             disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
             handler: () => services?.editorService.remove(services?.editorService.get('node')),
@@ -95,7 +113,7 @@ export default defineComponent({
         case 'undo':
           return {
             type: 'button',
-            icon: Back,
+            icon: markRaw(Back),
             tooltip: '后退',
             disabled: () => !services?.historyService.state.canUndo,
             handler: () => services?.editorService.undo(),
@@ -103,7 +121,7 @@ export default defineComponent({
         case 'redo':
           return {
             type: 'button',
-            icon: Right,
+            icon: markRaw(Right),
             tooltip: '前进',
             disabled: () => !services?.historyService.state.canRedo,
             handler: () => services?.editorService.redo(),
@@ -111,28 +129,28 @@ export default defineComponent({
         case 'zoom-in':
           return {
             type: 'button',
-            icon: ZoomIn,
+            icon: markRaw(ZoomIn),
             tooltip: '放大',
             handler: zoomInHandler,
           };
         case 'zoom-out':
           return {
             type: 'button',
-            icon: ZoomOut,
+            icon: markRaw(ZoomOut),
             tooltip: '縮小',
             handler: zoomOutHandler,
           };
         case 'rule':
           return {
             type: 'button',
-            icon: ScaleToOriginal,
+            icon: markRaw(ScaleToOriginal),
             tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
             handler: () => uiService?.set('showRule', !showRule.value),
           };
         case 'guides':
           return {
             type: 'button',
-            icon: Grid,
+            icon: markRaw(Grid),
             tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
             handler: () => uiService?.set('showGuides', !showGuides.value),
           };
@@ -153,9 +171,16 @@ export default defineComponent({
       return item.value.disabled;
     });
 
+    const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+      if (disabled.value) return;
+      if (typeof (item as MenuButton).handler === 'function' && services) {
+        (item as MenuButton).handler?.(services, event);
+      }
+    };
+
     return {
-      ZoomIn,
-      ZoomOut,
+      ZoomIn: markRaw(ZoomIn),
+      ZoomOut: markRaw(ZoomOut),
 
       item,
       zoom,
@@ -178,10 +203,24 @@ export default defineComponent({
         }
       },
 
-      buttonHandler(item: MenuButton | MenuComponent) {
-        if (disabled.value) return;
-        if (typeof (item as MenuButton).handler === 'function') {
-          (item as MenuButton).handler?.(services);
+      clickHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+        if (props.eventType !== 'click') return;
+        if (item.type === 'button') {
+          buttonHandler(item, event);
+        }
+      },
+
+      mousedownHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+        if (props.eventType !== 'mousedown') return;
+        if (item.type === 'button') {
+          buttonHandler(item, event);
+        }
+      },
+
+      mouseupHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+        if (props.eventType !== 'mouseup') return;
+        if (item.type === 'button') {
+          buttonHandler(item, event);
         }
       },
     };

package/src/fields/UISelect.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <i class="el-icon-delete" style="color: rgb(221, 75, 57)">取消</i>
+    <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect">
-    <i class="el-icon-thumb"></i>
-    <span>{{ val ? toName + '_' + val : '点击此处选择' }}</span>
-    <i class="el-icon-delete" @click.stop="deleteHandler" v-if="val"></i>
+  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
+    <el-tooltip content="清除">
+      <el-button v-if="val" style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
+    </el-tooltip>
+    <el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
+      <el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>
+    </el-tooltip>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Close, Delete, Pointer } from '@element-plus/icons';
 
 import { FormState } from '@tmagic/form';
 
@@ -60,6 +64,10 @@ export default defineComponent({
     };
 
     return {
+      Delete: markRaw(Delete),
+      Pointer: markRaw(Pointer),
+      Close: markRaw(Close),
+
       val,
       uiSelectMode,
       toName: computed(() => {

package/src/index.ts

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import './utils/polyfills';
 
 import { App } from 'vue';
 
@@ -41,6 +42,7 @@ export { default as uiService } from './services/ui';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
+export { default as ToolButton } from './components/ToolButton.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项