@tmagic/editor 1.7.7 → 1.7.8-beta.1

package/package.json

@@ -1,19 +1,20 @@
 {
-  "version": "1.7.7",
+  "version": "1.7.8-beta.1",
   "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.1",
+    "@tmagic/form": "1.7.8-beta.1",
+    "@tmagic/utils": "1.7.8-beta.1",
+    "@tmagic/table": "1.7.8-beta.1",
+    "@tmagic/stage": "1.7.8-beta.1"
   },
   "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.1"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
+    },
+    "type-fest": {
+      "optional": true
     }
   }
 }

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/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';
@@ -104,7 +110,9 @@ const type = computed((): string => {
 });
 
 const tagName = computed(() => {
-  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
+  const component =
+    getFormField(type.value || 'container') ||
+    resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
   if (typeof component !== 'string') return component;
   return 'm-fields-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>
@@ -68,8 +68,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';
@@ -304,7 +305,7 @@ const dataSourceActionConfig = computed(() => {
 });
 
 // 兼容旧的数据格式
-const tableConfig = computed(() => ({
+const tableConfig = computed<TableConfig>(() => ({
   type: 'table',
   name: 'events',
   items: [

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/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';

package/src/utils/index.ts

@@ -27,3 +27,4 @@ export * from './scroll-viewer';
 export * from './tree';
 export * from './undo-redo';
 export * from './const';
+export { default as loadMonaco } from './monaco-editor';