@tmagic/editor 1.5.0-beta.1 → 1.5.0-beta.11

package/package.json

@@ -1,8 +1,9 @@
 {
-  "version": "1.5.0-beta.1",
+  "version": "1.5.0-beta.11",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
+    "dist/style.css",
     "src/theme/*"
   ],
   "main": "dist/tmagic-editor.umd.cjs",
@@ -55,8 +56,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/table": "1.5.0-beta.1",
-    "@tmagic/dep": "1.5.0-beta.1"
+    "@tmagic/design": "1.5.0-beta.11",
+    "@tmagic/stage": "1.5.0-beta.11",
+    "@tmagic/form": "1.5.0-beta.11",
+    "@tmagic/table": "1.5.0-beta.11",
+    "@tmagic/utils": "1.5.0-beta.11"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -64,25 +68,20 @@
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.1.1",
-    "@vue/compiler-sfc": "^3.4.27",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "@vue/compiler-sfc": "^3.5.0",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.77.0",
+    "sass": "^1.78.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "vite": "^5.3.5"
+    "vite": "^5.4.3"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "typescript": "*",
-    "vue": "^3.4.35",
-    "@tmagic/core": "1.5.0-beta.1",
-    "@tmagic/design": "1.5.0-beta.1",
-    "@tmagic/form": "1.5.0-beta.1",
-    "@tmagic/schema": "1.5.0-beta.1",
-    "@tmagic/stage": "1.5.0-beta.1",
-    "@tmagic/utils": "1.5.0-beta.1"
+    "vue": "^3.5.0",
+    "@tmagic/core": "1.5.0-beta.11"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -16,7 +16,13 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
+        <Sidebar
+          :data="sidebar"
+          :layer-content-menu="layerContentMenu"
+          :custom-content-menu="customContentMenu"
+          :indent="treeIndent"
+          :next-level-indent-increment="treeNextLevelIndentIncrement"
+        >
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>
@@ -119,7 +125,7 @@ import { EventEmitter } from 'events';
 
 import { provide } from 'vue';
 
-import type { MApp } from '@tmagic/schema';
+import type { MApp } from '@tmagic/core';
 
 import Framework from './layouts/Framework.vue';
 import TMagicNavMenu from './layouts/NavMenu.vue';
@@ -141,7 +147,15 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+import type {
+  EventBus,
+  FrameworkSlots,
+  PropsPanelSlots,
+  Services,
+  SidebarSlots,
+  StageOptions,
+  WorkspaceSlots,
+} from './type';
 
 defineSlots<
   FrameworkSlots &
@@ -186,7 +200,7 @@ initServiceState(props, services);
 keybindingService.register(keybindingConfig);
 keybindingService.registerEl('global');
 
-const stageOptions = {
+const stageOptions: StageOptions = {
   runtimeUrl: props.runtimeUrl,
   autoScrollIntoView: props.autoScrollIntoView,
   render: props.render,

package/src/components/CodeBlockEditor.vue

@@ -61,9 +61,9 @@
 <script lang="ts" setup>
 import { computed, inject, Ref, ref } from 'vue';
 
+import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
-import type { CodeBlockContent } from '@tmagic/schema';
+import { type FormConfig, type FormState, MFormBox, type TableColumnConfig } from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@@ -71,7 +71,7 @@ import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-positi
 import { useWindowRect } from '@editor/hooks/use-window-rect';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MEditorCodeBlockEditor',
@@ -110,7 +110,7 @@ const diffChange = () => {
   difVisible.value = false;
 };
 
-const defaultParamColConfig: ColumnConfig = {
+const defaultParamColConfig: TableColumnConfig = {
   type: 'row',
   label: '参数类型',
   items: [
@@ -197,7 +197,7 @@ const functionConfig = computed<FormConfig>(() => [
     onChange: (formState: FormState | undefined, code: string) => {
       try {
         // 检测js代码是否存在语法错误
-        getConfig('parseDSL')(code);
+        getEditorConfig('parseDSL')(code);
 
         return code;
       } catch (error: any) {

package/src/components/SearchInput.vue

@@ -32,6 +32,7 @@ const filterTextChangeHandler = () => {
   timer && clearTimeout(timer);
   timer = setTimeout(() => {
     emit('search', filterText.value);
+    timer = null;
   }, 300);
 };
 </script>

package/src/components/Tree.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="m-editor-tree" @dragover="handleDragOver">
     <template v-if="data?.length">
-      <TreeNode v-for="item in data" :key="item.id" :data="item" :indent="indent" :node-status-map="nodeStatusMap">
+      <TreeNode
+        v-for="item in data"
+        :key="item.id"
+        :data="item"
+        :indent="indent"
+        :next-level-indent-increment="nextLevelIndentIncrement"
+        :node-status-map="nodeStatusMap"
+      >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
         </template>
@@ -24,7 +31,7 @@
 <script setup lang="ts">
 import { provide } from 'vue';
 
-import type { Id } from '@tmagic/schema';
+import type { Id } from '@tmagic/core';
 
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 
@@ -57,6 +64,7 @@ withDefaults(
     data: TreeNodeData[];
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
+    nextLevelIndentIncrement?: number;
     emptyText?: string;
   }>(),
   {

package/src/components/TreeNode.vue

@@ -45,7 +45,7 @@
         :parent="data"
         :parentsId="[...parentsId, data.id]"
         :node-status-map="nodeStatusMap"
-        :indent="indent + 11"
+        :indent="indent + nextLevelIndentIncrement"
       >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
@@ -65,7 +65,7 @@
 import { computed, inject } from 'vue';
 import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 
-import type { Id } from '@tmagic/schema';
+import type { Id } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
@@ -99,9 +99,11 @@ const props = withDefaults(
     parentsId?: Id[];
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
+    nextLevelIndentIncrement?: number;
   }>(),
   {
     indent: 0,
+    nextLevelIndentIncrement: 11,
     parentsId: () => [],
   },
 );

package/src/editorProps.ts

@@ -1,6 +1,5 @@
-import type { EventOption } from '@tmagic/core';
+import type { DataSourceSchema, EventOption, Id, MApp, MNode } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
-import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
@@ -81,8 +80,12 @@ export interface EditorProps {
   disabledStageOverlay?: boolean;
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
+  /** 已选组件、代码编辑、数据源缩进配置 */
+  treeIndent?: number;
+  /** 已选组件、代码编辑、数据源子节点缩进增量配置 */
+  treeNextLevelIndentIncrement?: number;
   /** 中间工作区域中画布渲染的内容 */
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
   updateDragEl?: UpdateDragEl;
   /** 用于设置画布上的dom是否可以被选中 */

package/src/fields/CodeLink.vue

@@ -8,7 +8,7 @@ import serialize from 'serialize-javascript';
 
 import type { FieldProps, FormItem } from '@tmagic/form';
 
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MFieldsCodeLink',
@@ -70,7 +70,7 @@ const changeHandler = (v: Record<string, any>) => {
   if (!props.name || !props.model) return;
 
   try {
-    const parseDSL = getConfig('parseDSL');
+    const parseDSL = getEditorConfig('parseDSL');
     props.model[props.name] = parseDSL(`(${v[props.name]})`);
     emit('change', props.model[props.name]);
   } catch (e) {

package/src/fields/CodeSelect.vue

@@ -19,10 +19,10 @@
 import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
+import { HookCodeType, HookType } from '@tmagic/core';
 import { TMagicCard } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
 import { FormState, MContainer } from '@tmagic/form';
-import { HookCodeType, HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 

package/src/fields/CodeSelectCol.vue

@@ -39,9 +39,9 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';

package/src/fields/CondOpSelect.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design';
+import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
 
 import type { CondOpSelectConfig, Services } from '@editor/type';

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -69,15 +69,9 @@
 import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import {
-  getConfig as getDesignConfig,
-  TMagicButton,
-  TMagicCascader,
-  TMagicSelect,
-  TMagicTooltip,
-} from '@tmagic/design';
+import { DataSourceFieldType } from '@tmagic/core';
+import { getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect, TMagicTooltip } from '@tmagic/design';
 import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
-import { DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -22,7 +22,7 @@
       :last-values="lastValues"
       :init-values="initValues"
       :values="values"
-      :prop="`${prop}${prop ? '.' : ''}${name}`"
+      :prop="prop"
       @change="onChangeHandler"
     ></component>
 
@@ -42,9 +42,9 @@
 import { computed, inject, ref, resolveComponent, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
+import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
-import { DataSchema } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';

package/src/fields/DataSourceFields.vue

@@ -49,9 +49,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref } from 'vue';
 
+import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
-import type { DataSchema } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 

package/src/fields/DataSourceInput.vue

@@ -1,12 +1,12 @@
 <template>
   <component
     v-if="disabled || isFocused"
-    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
+    :is="getDesignConfig('components')?.autocomplete.component || 'el-autocomplete'"
     class="tmagic-design-auto-complete"
     ref="autocomplete"
     v-model="state"
     v-bind="
-      getConfig('components')?.autocomplete.props({
+      getDesignConfig('components')?.autocomplete.props({
         disabled,
         size,
         fetchSuggestions: querySearch,
@@ -51,9 +51,9 @@
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { DataSchema, DataSourceSchema } from '@tmagic/core';
+import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
-import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 import { getKeysArray, isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';

package/src/fields/DataSourceMethodSelect.vue

@@ -35,9 +35,9 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';

package/src/fields/DataSourceMethods.vue

@@ -21,9 +21,9 @@
 </template>
 
 <script setup lang="ts">
+import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
-import type { CodeBlockContent } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';

package/src/fields/DataSourceMocks.vue

@@ -31,9 +31,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref } from 'vue';
 
+import type { MockSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
-import type { MockSchema } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 

package/src/fields/DisplayConds.vue

@@ -15,6 +15,7 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
+import type { DisplayCond } from '@tmagic/core';
 import {
   type FieldProps,
   type FilterFunction,
@@ -23,7 +24,6 @@ import {
   type GroupListConfig,
   MGroupList,
 } from '@tmagic/form';
-import type { DisplayCond } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 import { getCascaderOptionsFromFields } from '@editor/utils';

package/src/fields/EventSelect.vue

@@ -53,15 +53,15 @@ import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
-import type { EventOption } from '@tmagic/core';
+import type { EventOption, MComponent, MContainer } from '@tmagic/core';
+import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
-import { ActionType, type MComponent, type MContainer } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',

package/src/fields/PageFragmentSelect.vue

@@ -19,8 +19,8 @@
 import { computed, inject } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
+import { Id, NodeType } from '@tmagic/core';
 import { FieldProps } from '@tmagic/form';
-import { Id, NodeType } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import type { PageFragmentSelectConfig, Services } from '@editor/type';

package/src/fields/UISelect.vue

@@ -45,9 +45,9 @@ import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormItem, FormState } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { type Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';

package/src/hooks/use-code-block-edit.ts

@@ -1,8 +1,8 @@
 import { nextTick, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { CodeBlockContent } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import type { CodeBlockContent } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import type { CodeBlockService } from '@editor/services/codeBlock';

package/src/hooks/use-data-source-edit.ts

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue';
 
-import type { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceSchema } from '@tmagic/core';
 
 import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 import type { DataSourceService } from '@editor/services/dataSource';

package/src/hooks/use-data-source-method.ts

@@ -1,11 +1,11 @@
 import { nextTick, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { CodeBlockContent, DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 export const useDataSourceMethod = () => {
   const codeConfig = ref<CodeBlockContent>();
@@ -81,7 +81,7 @@ export const useDataSourceMethod = () => {
 
       if (values.content) {
         // 在保存的时候转换代码内容
-        const parseDSL = getConfig('parseDSL');
+        const parseDSL = getEditorConfig('parseDSL');
         if (typeof values.content === 'string') {
           values.content = parseDSL<(...args: any[]) => any>(values.content);
         }

package/src/hooks/use-filter.ts

@@ -1,9 +1,9 @@
 import { type Ref, ref } from 'vue';
 
-import type { Id, MNode } from '@tmagic/schema';
+import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 import { updateStatus } from '@editor/utils/tree';
 
 export const useFilter = (

package/src/hooks/use-node-status.ts

@@ -1,9 +1,9 @@
-import { ComputedRef, ref, watch } from 'vue';
+import { type ComputedRef, ref, watch } from 'vue';
 
-import type { Id, MNode } from '@tmagic/schema';
+import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 
 const createPageNodeStatus = (nodeData: TreeNodeData[], initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();

package/src/hooks/use-stage.ts

@@ -1,6 +1,6 @@
 import { computed, watch } from 'vue';
 
-import type { MNode } from '@tmagic/schema';
+import type { MNode } from '@tmagic/core';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
 import { getIdFromEl } from '@tmagic/utils';
 
@@ -62,7 +62,7 @@ export const useStage = (stageOptions: StageOptions) => {
     },
   );
 
-  stage.mask.setGuides([
+  stage.mask?.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
   ]);

package/src/index.ts

@@ -15,7 +15,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { App } from 'vue';
+import type { App } from 'vue';
+
+import type { DesignPluginOptions } from '@tmagic/design';
+import designPlugin from '@tmagic/design';
+import type { FormInstallOptions } from '@tmagic/form';
+import formPlugin from '@tmagic/form';
+import tablePlugin from '@tmagic/table';
 
 import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
@@ -35,16 +41,25 @@ import KeyValue from './fields/KeyValue.vue';
 import PageFragmentSelect from './fields/PageFragmentSelect.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
-import { setConfig } from './utils/config';
+import { setEditorConfig } from './utils/config';
 import Editor from './Editor.vue';
-import type { InstallOptions } from './type';
+import type { EditorInstallOptions } from './type';
 
 import './theme/index.scss';
 
+export * from '@tmagic/form';
+export { default as formPlugin } from '@tmagic/form';
+export * from '@tmagic/table';
+export { default as tablePlugin } from '@tmagic/table';
+export * from '@tmagic/stage';
+export { default as StageCore } from '@tmagic/stage';
+export * from '@tmagic/design';
+export { default as designPlugin } from '@tmagic/design';
+export * from '@tmagic/utils';
+
 export type { OnDrag } from 'gesto';
 
-export { DepTargetType } from '@tmagic/dep';
-export type { MoveableOptions } from '@tmagic/stage';
+export { DepTargetType } from '@tmagic/core';
 export * from './type';
 export * from './hooks';
 export * from './utils';
@@ -91,18 +106,23 @@ export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
 
-const defaultInstallOpt: InstallOptions = {
+const defaultInstallOpt: EditorInstallOptions = {
   // eslint-disable-next-line no-eval
   parseDSL: (dsl: string) => eval(dsl),
 };
 
 export default {
-  install: (app: App, opt?: Partial<InstallOptions>): void => {
+  install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>): void => {
     const option = Object.assign(defaultInstallOpt, opt || {});
 
+    app.use(designPlugin, opt || {});
+    app.use(formPlugin, opt || {});
+    app.use(tablePlugin);
+
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
-    setConfig(option);
+    setEditorConfig(option);
+
     app.component(`${Editor.name || 'MEditor'}`, Editor);
     app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-ui-select', uiSelect);