@tmagic/editor 1.7.7 → 1.7.8-beta.2

package/package.json

@@ -1,19 +1,20 @@
 {
-  "version": "1.7.7",
+  "version": "1.7.8-beta.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
     "dist/style.css",
+    "dist/es/style.css",
     "src/theme/*"
   ],
   "main": "dist/tmagic-editor.umd.cjs",
-  "module": "dist/tmagic-editor.js",
+  "module": "dist/es/index.js",
   "style": "dist/style.css",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./dist/tmagic-editor.js",
+      "import": "./dist/es/index.js",
       "require": "./dist/tmagic-editor.umd.cjs"
     },
     "./dist/style.css": {
@@ -57,29 +58,32 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.7",
-    "@tmagic/table": "1.7.7",
-    "@tmagic/stage": "1.7.7",
-    "@tmagic/form": "1.7.7",
-    "@tmagic/utils": "1.7.7"
+    "@tmagic/design": "1.7.8-beta.2",
+    "@tmagic/form": "1.7.8-beta.2",
+    "@tmagic/utils": "1.7.8-beta.2",
+    "@tmagic/stage": "1.7.8-beta.2",
+    "@tmagic/table": "1.7.8-beta.2"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
     "@types/lodash-es": "^4.17.4",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.9",
-    "@vue/test-utils": "^2.4.6",
-    "type-fest": "^5.2.0"
+    "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "monaco-editor": "^0.48.0",
+    "monaco-editor": "^0.55.1 ",
+    "type-fest": "^5.2.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
-    "@tmagic/core": "1.7.7"
+    "@tmagic/core": "1.7.8-beta.2"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
+    },
+    "type-fest": {
+      "optional": true
     }
   }
 }

package/src/components/CodeBlockEditor.vue

@@ -63,13 +63,7 @@ import { computed, inject, nextTick, Ref, ref, useTemplateRef, watch } from 'vue
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import {
-  type ContainerChangeEventData,
-  type FormConfig,
-  type FormState,
-  MFormBox,
-  type TableColumnConfig,
-} from '@tmagic/form';
+import { type ContainerChangeEventData, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@@ -118,7 +112,7 @@ const diffChange = () => {
   difVisible.value = false;
 };
 
-const defaultParamColConfig: TableColumnConfig = {
+const defaultParamColConfig = {
   type: 'row',
   label: '参数类型',
   items: [

package/src/fields/CodeLink.vue

@@ -1,12 +1,12 @@
 <template>
-  <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
+  <MLink :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></MLink>
 </template>
 
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-import type { CodeLinkConfig, FieldProps } from '@tmagic/form';
+import type { CodeLinkConfig, FieldProps, MLink } from '@tmagic/form';
 
 import { getEditorConfig } from '@editor/utils/config';
 

package/src/fields/CodeSelectCol.vue

@@ -115,7 +115,7 @@ watch(
 const selectConfig: SelectConfig = {
   type: 'select',
   name: props.name,
-  disable: props.disabled,
+  disabled: props.disabled,
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -47,7 +47,13 @@ import { Coin } from '@element-plus/icons-vue';
 
 import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import type { ContainerChangeEventData, DataSourceFieldSelectConfig, FieldProps, FormState } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type DataSourceFieldSelectConfig,
+  type FieldProps,
+  type FormState,
+  getFormField,
+} from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -100,11 +106,18 @@ const type = computed((): string => {
   }
   if (type === 'form') return '';
   if (type === 'container') return '';
-  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (props.config.items ? '' : 'text');
+  return (
+    type?.replace(/([A-Z])/g, '-$1').toLowerCase() ||
+    (props.config.fieldConfig && 'items' in props.config.fieldConfig ? '' : 'text')
+  );
 });
 
 const tagName = computed(() => {
-  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
+  const component =
+    getFormField(type.value || 'container') ||
+    resolveComponent(
+      `m-${props.config.fieldConfig && 'items' in props.config.fieldConfig ? 'form' : 'fields'}-${type.value}`,
+    );
   if (typeof component !== 'string') return component;
   return 'm-fields-text';
 });

package/src/fields/DataSourceFields.vue

@@ -52,12 +52,15 @@ import { inject, Ref, ref } from 'vue';
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import {
+  type CodeConfig,
   type ContainerChangeEventData,
   type DataSourceFieldsConfig,
   type FieldProps,
   type FormConfig,
   type FormState,
   MFormBox,
+  type NumberConfig,
+  type TextConfig,
 } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
@@ -247,7 +250,7 @@ const dataSourceFieldsConfig: FormConfig = [
       { text: 'true', value: true },
       { text: 'false', value: false },
     ],
-  },
+  } as unknown as CodeConfig | NumberConfig | TextConfig,
   {
     name: 'enable',
     text: '是否可用',

package/src/fields/EventSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-fields-event-select">
-    <m-form-table
+    <MTable
       v-if="isOldVersion"
       name="events"
       :size="size"
@@ -8,7 +8,7 @@
       :model="model"
       :config="tableConfig"
       @change="onChangeHandler"
-    ></m-form-table>
+    ></MTable>
 
     <div v-else class="fullWidth">
       <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
@@ -41,7 +41,7 @@
             :icon="Delete"
             :disabled="disabled"
             :size="size"
-            @click="removeEvent(index)"
+            @click="removeEvent(Number(index))"
           ></TMagicButton>
         </template>
       </MPanel>
@@ -59,7 +59,6 @@ import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type {
   CascaderOption,
-  ChildConfig,
   CodeSelectColConfig,
   ContainerChangeEventData,
   DataSourceMethodSelectConfig,
@@ -68,8 +67,9 @@ import type {
   FormState,
   OnChangeHandlerData,
   PanelConfig,
+  TableConfig,
 } from '@tmagic/form';
-import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
+import { MContainer as MFormContainer, MPanel, MTable } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -89,10 +89,10 @@ const { editorService, dataSourceService, eventsService, codeBlockService, props
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
-  const defaultEventNameConfig: ChildConfig = {
+  const defaultEventNameConfig = {
     name: 'name',
     text: '事件',
-    type: (mForm, { formValue }: any) => {
+    type: (mForm: FormState | undefined, { formValue }: any) => {
       if (
         props.config.src !== 'component' ||
         (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
@@ -226,10 +226,10 @@ const targetCompConfig = computed(() => {
 
 // 联动组件动作配置
 const compActionConfig = computed(() => {
-  const defaultCompActionConfig: ChildConfig = {
+  const defaultCompActionConfig = {
     name: 'method',
     text: '动作',
-    type: (mForm, { model }: any) => {
+    type: (mForm: FormState | undefined, { model }: any) => {
       const to = editorService.getNodeById(model.to);
 
       if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
@@ -239,7 +239,7 @@ const compActionConfig = computed(() => {
       return 'select';
     },
     checkStrictly: () => props.config.src !== 'component',
-    display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
+    display: (mForm: FormState | undefined, { model }: any) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
       const node = editorService.getNodeById(model.to);
       if (!node?.type) return [];
@@ -304,7 +304,7 @@ const dataSourceActionConfig = computed(() => {
 });
 
 // 兼容旧的数据格式
-const tableConfig = computed(() => ({
+const tableConfig = computed<TableConfig>(() => ({
   type: 'table',
   name: 'events',
   items: [

package/src/fields/StyleSetter/components/BackgroundPosition.vue

@@ -28,10 +28,10 @@
 
 <script lang="ts" setup>
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { FieldProps, StyleSetterConfig } from '@tmagic/form';
 
 const emit = defineEmits(['change']);
-defineProps<FieldProps<{ type: 'style-setter' } & FormItem>>();
+defineProps<FieldProps<StyleSetterConfig>>();
 
 const horizontalList = [
   {

package/src/fields/StyleSetter/pro/Layout.vue

@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import type { ContainerChangeEventData, FormState } from '@tmagic/form';
-import { MContainer } from '@tmagic/form';
+import type { ContainerChangeEventData } from '@tmagic/form';
+import { defineFormItem, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Box from '../components/Box.vue';
@@ -42,7 +42,7 @@ const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
 }>();
 
-const config = {
+const config = defineFormItem({
   items: [
     {
       name: 'display',
@@ -74,7 +74,7 @@ const config = {
           tooltip: '垂直方向 起点在下沿 column-reverse',
         },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       name: 'justifyContent',
@@ -89,7 +89,7 @@ const config = {
         { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
         { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       name: 'alignItems',
@@ -104,7 +104,7 @@ const config = {
         { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
         { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       name: 'flexWrap',
@@ -117,7 +117,7 @@ const config = {
         { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
         { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       type: 'row',
@@ -180,7 +180,7 @@ const config = {
       ],
     },
   ],
-};
+});
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/index.ts

@@ -15,38 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-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';
-import CodeSelect from './fields/CodeSelect.vue';
-import CodeSelectCol from './fields/CodeSelectCol.vue';
-import CondOpSelect from './fields/CondOpSelect.vue';
-import DataSourceFields from './fields/DataSourceFields.vue';
-import DataSourceFieldSelect from './fields/DataSourceFieldSelect/Index.vue';
-import DataSourceInput from './fields/DataSourceInput.vue';
-import DataSourceMethods from './fields/DataSourceMethods.vue';
-import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
-import DataSourceMocks from './fields/DataSourceMocks.vue';
-import DataSourceSelect from './fields/DataSourceSelect.vue';
-import DisplayConds from './fields/DisplayConds.vue';
-import EventSelect from './fields/EventSelect.vue';
-import KeyValue from './fields/KeyValue.vue';
-import PageFragmentSelect from './fields/PageFragmentSelect.vue';
-import StyleSetter from './fields/StyleSetter/Index.vue';
-import uiSelect from './fields/UISelect.vue';
-import CodeEditor from './layouts/CodeEditor.vue';
-import { setEditorConfig } from './utils/config';
-import Editor from './Editor.vue';
-import type { EditorInstallOptions } from './type';
-
-import './theme/index.scss';
 
 export * from '@tmagic/form';
 export { default as formPlugin } from '@tmagic/form';
@@ -110,44 +78,4 @@ export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
 export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 
-const defaultInstallOpt: EditorInstallOptions = {
-  // eslint-disable-next-line no-eval
-  parseDSL: (dsl: string) => eval(dsl),
-  customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
-  customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
-    monaco.editor.createDiffEditor(codeEditorEl, options),
-};
-
-export default {
-  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);
-
-    app.config.globalProperties.$TMAGIC_EDITOR = option;
-    setEditorConfig(option);
-
-    app.component(`${Editor.name || 'MEditor'}`, Editor);
-    app.component('magic-code-editor', CodeEditor);
-    app.component('m-fields-ui-select', uiSelect);
-    app.component('m-fields-code-link', CodeLink);
-    app.component('m-fields-vs-code', Code);
-    app.component('m-fields-code-select', CodeSelect);
-    app.component('m-fields-code-select-col', CodeSelectCol);
-    app.component('m-fields-event-select', EventSelect);
-    app.component('m-fields-data-source-fields', DataSourceFields);
-    app.component('m-fields-data-source-mocks', DataSourceMocks);
-    app.component('m-fields-key-value', KeyValue);
-    app.component('m-fields-data-source-input', DataSourceInput);
-    app.component('m-fields-data-source-select', DataSourceSelect);
-    app.component('m-fields-data-source-methods', DataSourceMethods);
-    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
-    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
-    app.component('m-fields-page-fragment-select', PageFragmentSelect);
-    app.component('m-fields-display-conds', DisplayConds);
-    app.component('m-fields-cond-op-select', CondOpSelect);
-    app.component('m-form-style-setter', StyleSetter);
-  },
-};
+export { default } from './plugin';

package/src/plugin.ts

@@ -0,0 +1,92 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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';
+import CodeSelect from './fields/CodeSelect.vue';
+import CodeSelectCol from './fields/CodeSelectCol.vue';
+import CondOpSelect from './fields/CondOpSelect.vue';
+import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect/Index.vue';
+import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceMethods from './fields/DataSourceMethods.vue';
+import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
+import DataSourceMocks from './fields/DataSourceMocks.vue';
+import DataSourceSelect from './fields/DataSourceSelect.vue';
+import DisplayConds from './fields/DisplayConds.vue';
+import EventSelect from './fields/EventSelect.vue';
+import KeyValue from './fields/KeyValue.vue';
+import PageFragmentSelect from './fields/PageFragmentSelect.vue';
+import StyleSetter from './fields/StyleSetter/Index.vue';
+import uiSelect from './fields/UISelect.vue';
+import CodeEditor from './layouts/CodeEditor.vue';
+import { setEditorConfig } from './utils/config';
+import Editor from './Editor.vue';
+import type { EditorInstallOptions } from './type';
+
+import './theme/index.scss';
+
+const defaultInstallOpt: EditorInstallOptions = {
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl: string) => eval(dsl),
+  customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
+  customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
+    monaco.editor.createDiffEditor(codeEditorEl, options),
+};
+
+export default {
+  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);
+
+    app.config.globalProperties.$TMAGIC_EDITOR = option;
+    setEditorConfig(option);
+
+    app.component(`${Editor.name || 'MEditor'}`, Editor);
+    app.component('magic-code-editor', CodeEditor);
+    app.component('m-fields-ui-select', uiSelect);
+    app.component('m-fields-code-link', CodeLink);
+    app.component('m-fields-vs-code', Code);
+    app.component('m-fields-code-select', CodeSelect);
+    app.component('m-fields-code-select-col', CodeSelectCol);
+    app.component('m-fields-event-select', EventSelect);
+    app.component('m-fields-data-source-fields', DataSourceFields);
+    app.component('m-fields-data-source-mocks', DataSourceMocks);
+    app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
+    app.component('m-fields-page-fragment-select', PageFragmentSelect);
+    app.component('m-fields-display-conds', DisplayConds);
+    app.component('m-fields-cond-op-select', CondOpSelect);
+    app.component('m-form-style-setter', StyleSetter);
+  },
+};

package/src/services/props.ts

@@ -102,9 +102,11 @@ class Props extends BaseService {
   }
 
   public async setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction) {
-    let c = config;
+    let c: FormConfig;
     if (typeof config === 'function') {
       c = config({ editorService });
+    } else {
+      c = config;
     }
 
     this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);

package/src/type.ts

@@ -19,7 +19,7 @@
 import type { Component } from 'vue';
 import type EventEmitter from 'events';
 import type * as Monaco from 'monaco-editor';
-import Sortable, { type Options, type SortableEvent } from 'sortablejs';
+import type { default as Sortable, Options, SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
 
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';