build(tmagic-form): package.json中文件入口配置错误

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.7.2](https://github.com/Tencent/tmagic-editor/compare/v1.7.1...v1.7.2) (2025-12-09)
+
+
+
+## [1.7.1](https://github.com/Tencent/tmagic-editor/compare/v1.7.0...v1.7.1) (2025-12-09)
+
+
+### Bug Fixes
+
+* **core:** getNode 添加stict参数来表示必须知道页面片容器id才会返回页面内的节点 ([83664cd](https://github.com/Tencent/tmagic-editor/commit/83664cd44019c3b5f05d2ad60bbb8fcf751f6b35))
+* **form:** tabs组件子项配置了name后,配置生成的数据出错 ([b3ce1a3](https://github.com/Tencent/tmagic-editor/commit/b3ce1a3b930e9cbfc74b72bfb7dd9268fe341626))
+* **tmagic-form:** runtime刷新导致root丢失 ([d039cee](https://github.com/Tencent/tmagic-editor/commit/d039cee9136e7e892161dafe25ff34ee95bce958))
+
+
+### Features
+
+* **vue-components:** 不再兼容vue2 ([756612e](https://github.com/Tencent/tmagic-editor/commit/756612eda51fa8079420203eaca585175b039e8b))
+* **vue-runtime-help:** 去掉vue2的兼容 ([2a7ab4e](https://github.com/Tencent/tmagic-editor/commit/2a7ab4e916444a68c7cc05af4fa57ddd59994393))
+
+
+
 # [1.7.0](https://github.com/Tencent/tmagic-editor/compare/v1.7.0-beta.5...v1.7.0) (2025-12-04)
 
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "tmagic",
   "private": true,
   "type": "module",

packages/cli/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/cli",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/core",
   "type": "module",
   "main": "dist/tmagic-core.umd.cjs",

packages/core/src/EventHelper.ts

@@ -279,13 +279,13 @@ export default class EventHelper extends EventEmitter {
     }
 
     const toNodes = [];
-    const toNode = this.app.getNode(to);
+    const toNode = this.app.getNode(to, { strict: true });
     if (toNode) {
       toNodes.push(toNode);
     }
 
     for (const [, page] of this.app.pageFragments) {
-      const node = page.getNode(to);
+      const node = page.getNode(to, { strict: true });
       if (node) {
         toNodes.push(node);
       }

packages/core/src/Node.ts

@@ -191,7 +191,7 @@ class Node extends EventEmitter {
         if (this.app.eventHelper) {
           for (const eventConfig of this.app.eventHelper.getEventQueue()) {
             for (const [, page] of this.app.pageFragments) {
-              const node = page.getNode(eventConfig.toId);
+              const node = page.getNode(eventConfig.toId, { strict: true });
               if (node && node === this) {
                 if (typeof instance[eventConfig.method] === 'function') {
                   await instance[eventConfig.method](eventConfig.fromCpt, ...eventConfig.args);

packages/core/src/Page.ts

@@ -84,14 +84,16 @@ class Page extends Node {
 
   public getNode<T extends TMagicNode = TMagicNode>(
     id: Id,
-    { iteratorContainerId, iteratorIndex, pageFragmentContainerId }: GetNodeOptions = {},
+    { iteratorContainerId, iteratorIndex, pageFragmentContainerId, strict }: GetNodeOptions = {},
   ): T | undefined {
     if (this.nodes.has(id)) {
       return this.nodes.get(id) as T;
     }
 
     if (pageFragmentContainerId) {
-      return this.app.pageFragments.get(pageFragmentContainerId)?.getNode(id, { iteratorContainerId, iteratorIndex });
+      return this.app.pageFragments
+        .get(pageFragmentContainerId)
+        ?.getNode(id, { iteratorContainerId, iteratorIndex, strict: true });
     }
 
     if (Array.isArray(iteratorContainerId) && iteratorContainerId.length && Array.isArray(iteratorIndex)) {
@@ -107,7 +109,7 @@ class Page extends Node {
       return iteratorContainer?.getNode(id, iteratorIndex[iteratorIndex.length - 1]) as T;
     }
 
-    if (this.app.pageFragments.size) {
+    if (!strict && this.app.pageFragments.size) {
       for (const [, pageFragment] of this.app.pageFragments) {
         if (pageFragment.nodes.has(id)) {
           return pageFragment.nodes.get(id) as T;

packages/core/src/type.ts

@@ -48,4 +48,6 @@ export interface GetNodeOptions {
   iteratorContainerId?: Id[];
   iteratorIndex?: number[];
   pageFragmentContainerId?: Id;
+  /** 严格模式，如果为true，页面片中的节点必须指定pageFragmentContainerId，为false时，没有pageFragmentContainerId的时候获得第一个页面片容器中的节点 */
+  strict?: boolean;
 }

packages/data-source/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/data-source",
   "type": "module",
   "main": "dist/tmagic-data-source.umd.cjs",

packages/data-source/src/createDataSourceManager.ts

@@ -78,13 +78,13 @@ export const createDataSourceManager = (app: TMagicApp, useMock?: boolean, initi
               replaceChildNode(newNode, [app.page.data]);
             }
 
-            app.getNode(node.id)?.setData(newNode);
+            app.getNode(node.id, { strict: true })?.setData(newNode);
 
             for (const [, pageFragment] of app.pageFragments) {
               if (pageFragment.data.id === newNode.id) {
                 pageFragment.setData(newNode);
               } else if (pageFragment.data.id === page.id) {
-                pageFragment.getNode(newNode.id)?.setData(newNode);
+                pageFragment.getNode(newNode.id, { strict: true })?.setData(newNode);
                 if (!pageFragment.instance) {
                   replaceChildNode(newNode, [pageFragment.data]);
                 }

packages/dep/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/dep",
   "type": "module",
   "main": "dist/tmagic-dep.umd.cjs",

packages/design/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/design",
   "type": "module",
   "sideEffects": [

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [

packages/element-plus-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/element-plus-adapter",
   "type": "module",
   "main": "dist/tmagic-element-plus-adapter.umd.cjs",

packages/form-schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/form-schema",
   "type": "module",
   "main": "dist/tmagic-form-schema.umd.cjs",

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/schema",
   "type": "module",
   "main": "dist/tmagic-schema.umd.cjs",

packages/stage/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",

packages/table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [

packages/tdesign-vue-next-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.2",
   "name": "@tmagic/utils",
   "type": "module",
   "main": "dist/tmagic-utils.umd.cjs",

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmagic-playground",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "type": "module",
   "private": true,
   "scripts": {
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@tmagic/core": "1.7.0",
+    "@tmagic/core": "1.7.2",
-    "@tmagic/design": "1.7.0",
+    "@tmagic/design": "1.7.2",
-    "@tmagic/editor": "1.7.0",
+    "@tmagic/editor": "1.7.2",
-    "@tmagic/element-plus-adapter": "1.7.0",
+    "@tmagic/element-plus-adapter": "1.7.2",
-    "@tmagic/tdesign-vue-next-adapter": "1.7.0",
+    "@tmagic/tdesign-vue-next-adapter": "1.7.2",
     "@tmagic/tmagic-form-runtime": "1.1.3",
     "element-plus": "^2.11.8",
     "lodash-es": "^4.17.21",

runtime/react-runtime-help/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "name": "@tmagic/react-runtime-help",
   "type": "module",
   "sideEffects": false,
@@ -31,8 +31,8 @@
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",
-    "@tmagic/core": ">=1.6.0-beta.0",
+    "@tmagic/core": ">=1.7.0",
-    "@tmagic/stage": ">=1.6.0-beta.0",
+    "@tmagic/stage": ">=1.7.0",
     "react": ">=18.3.1",
     "typescript": "catalog:"
   },

runtime/react-runtime-help/src/hooks/use-app.ts

@@ -47,6 +47,7 @@ export const useNode = <T extends TMagicNode = TMagicNode>(
       iteratorContainerId: props.iteratorContainerId,
       iteratorIndex: props.iteratorIndex,
       pageFragmentContainerId: props.pageFragmentContainerId,
+      strict: true,
     });
   }
   return void 0;

runtime/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-react",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "type": "module",
   "private": true,
   "engines": {
@@ -16,16 +16,16 @@
     "build:playground": "node scripts/build.mjs --type=playground"
   },
   "dependencies": {
-    "@tmagic/core": "1.7.0",
+    "@tmagic/core": "1.7.2",
-    "@tmagic/react-runtime-help": "0.2.1",
+    "@tmagic/react-runtime-help": "0.2.2",
-    "@tmagic/stage": "1.7.0",
+    "@tmagic/stage": "1.7.2",
     "axios": "^1.13.2",
     "qrcode": "^1.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.7.0",
+    "@tmagic/cli": "1.7.2",
     "@types/fs-extra": "^11.0.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

runtime/tmagic-form/package.json

@@ -1,15 +1,15 @@
 {
-  "version": "1.1.3",
+  "version": "1.1.6",
   "name": "@tmagic/tmagic-form-runtime",
   "type": "module",
-  "main": "dist/tmagic-form-runtime.umd.cjs",
+  "main": "dist/tmagic-tmagic-form.umd.cjs",
-  "module": "dist/tmagic-form-runtime.js",
+  "module": "dist/tmagic-tmagic-form.js",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./dist/tmagic-form-runtime.js",
+      "import": "./dist/tmagic-tmagic-form.js",
-      "require": "./dist/tmagic-form.umd-runtime.cjs"
+      "require": "./dist/tmagic-tmagic-form.umd.cjs"
     },
     "./*": "./*"
   },
@@ -26,8 +26,8 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/core": ">=1.5.0",
+    "@tmagic/core": ">=1.7.0",
-    "@tmagic/editor": ">=1.5.0",
+    "@tmagic/editor": ">=1.7.0",
     "element-plus": ">=2.8.0",
     "vue": "catalog:",
     "typescript": "catalog:"

runtime/tmagic-form/src/App.vue

@@ -12,7 +12,7 @@ import { useFormConfig } from './useFormConfig';
 
 const props = defineProps<AppProps>();
 
-const { mForm, formConfig, config, values } = useFormConfig(props);
+const { formConfig, config, values } = useFormConfig(props);
 
 watch(formConfig, async () => {
   setTimeout(() => {

runtime/tmagic-form/src/useFormConfig.ts

@@ -73,8 +73,15 @@ export const useFormConfig = (props: AppProps) => {
         return nextTick().then(() => getElById()(document, `${id}`) as HTMLElement);
       },
 
-      add({ config, parentId }: UpdateData) {
+      add({ config, parentId, root: appConfig }: UpdateData) {
-        if (!root.value) throw new Error('error');
+        if (!root.value) {
+          if (appConfig) {
+            root.value = appConfig;
+            resetValues();
+            return;
+          }
+          throw new Error('error');
+        }
         if (!selectedId.value) throw new Error('error');
         if (!parentId) throw new Error('error');
 
@@ -82,7 +89,7 @@ export const useFormConfig = (props: AppProps) => {
         if (!parent) throw new Error('未找到父节点');
 
         if (config.type !== 'page') {
-          const parentNode = app?.page?.getNode(parent.id);
+          const parentNode = app?.page?.getNode(parent.id, { strict: true });
           parentNode && app?.page?.initNode(config, parentNode);
         }
 
@@ -97,13 +104,22 @@ export const useFormConfig = (props: AppProps) => {
         resetValues();
       },
 
-      update({ config, parentId }: UpdateData) {
+      update({ config, parentId, root: appConfig }: UpdateData) {
-        if (!root.value || !app) throw new Error('error');
+        if (!root.value) {
+          if (appConfig) {
+            root.value = appConfig;
+            resetValues();
+            return;
+          }
+          throw new Error('error');
+        }
+
+        if (!app) throw new Error('error');
 
         const newNode = app.dataSourceManager?.compiledNode(config) || config;
         replaceChildNode(reactive(newNode), [root.value], parentId);
 
-        const nodeInstance = app.page?.getNode(config.id);
+        const nodeInstance = app.page?.getNode(config.id, { strict: true });
         if (nodeInstance) {
           nodeInstance.setData(config);
         }

runtime/vue-runtime-help/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.3",
+  "version": "2.0.0",
   "name": "@tmagic/vue-runtime-help",
   "type": "module",
   "sideEffects": false,
@@ -26,20 +26,13 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
-  "dependencies": {
-    "vue-demi": "^0.14.10"
-  },
   "peerDependencies": {
-    "@tmagic/core": ">=1.6.0-beta.0",
+    "@tmagic/core": ">=1.7.0",
-    "@tmagic/stage": ">=1.6.0-beta.0",
+    "@tmagic/stage": ">=1.7.0",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "@tmagic/core": {
       "optional": true
     },

runtime/vue-runtime-help/src/hooks/use-app.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { inject, onBeforeUnmount, onMounted } from 'vue-demi';
+import { inject, onBeforeUnmount, onMounted } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import type { Id, MNodeInstance, Node as TMagicNode } from '@tmagic/core';
@@ -43,6 +43,7 @@ export const useNode = <T extends TMagicNode = TMagicNode>(
       iteratorContainerId: props.iteratorContainerId,
       iteratorIndex: props.iteratorIndex,
       pageFragmentContainerId: props.pageFragmentContainerId,
+      strict: true,
     });
   }
   return void 0;

runtime/vue-runtime-help/src/hooks/use-component-status.ts

@@ -1,4 +1,4 @@
-import { computed, inject, onScopeDispose, ref, shallowReactive, watchEffect } from 'vue-demi';
+import { computed, inject, onScopeDispose, ref, shallowReactive, watchEffect } from 'vue';
 
 import type TMagicCore from '@tmagic/core';
 import { type MComponent, type StyleSchema, toLine } from '@tmagic/core';

runtime/vue-runtime-help/src/hooks/use-component.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { ConcreteComponent, inject } from 'vue-demi';
+import { ConcreteComponent, inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { toLine } from '@tmagic/core';

runtime/vue-runtime-help/src/hooks/use-dsl.ts

@@ -1,4 +1,4 @@
-import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue-demi';
+import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import type { ChangeEvent, Id, MNode } from '@tmagic/core';

runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts

@@ -1,4 +1,4 @@
-import { computed, inject, nextTick, reactive, ref, watch } from 'vue-demi';
+import { computed, inject, nextTick, reactive, ref, watch } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import type { Id, MApp, MNode } from '@tmagic/core';
@@ -74,7 +74,7 @@ export const useEditorDsl = (app = inject<TMagicApp>('app'), win = window) => {
       if (!parent) throw new Error('未找到父节点');
 
       if (config.type !== 'page') {
-        const parentNode = app?.page?.getNode(parent.id);
+        const parentNode = app?.page?.getNode(parent.id, { strict: true });
         parentNode && app?.page?.initNode(config, parentNode);
       }
 
@@ -99,7 +99,7 @@ export const useEditorDsl = (app = inject<TMagicApp>('app'), win = window) => {
 
       replaceChildNode(reactive(newNode), [root.value], parentId);
 
-      const nodeInstance = app.getNode(config.id);
+      const nodeInstance = app.getNode(config.id, { strict: true });
       if (nodeInstance) {
         nodeInstance.setData(newNode);
       }

runtime/vue-runtime-help/src/index.ts

@@ -1,4 +1,4 @@
-import { h } from 'vue-demi';
+import { h } from 'vue';
 
 import type { Id, MComponent, StyleSchema } from '@tmagic/core';
 

runtime/vue-runtime-help/tests/use-component.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { defineComponent, isVue3, provide } from 'vue-demi';
+import { defineComponent, provide } from 'vue';
 import { mount } from '@vue/test-utils';
 
 import Core from '@tmagic/core';
@@ -34,7 +34,7 @@ describe('useComponent', () => {
   });
 
   // node_modules中的vue版本不是3.0.0，所以跳过
-  test.runIf(isVue3).skip('auto inject and empty para', () => {
+  test('auto inject and empty para', () => {
     const child = defineComponent({
       setup() {
         const component = useComponent();

runtime/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "type": "module",
   "private": true,
   "engines": {
@@ -16,14 +16,14 @@
     "build:playground": "node scripts/build.mjs --type=playground"
   },
   "dependencies": {
-    "@tmagic/core": "1.7.0",
+    "@tmagic/core": "1.7.2",
-    "@tmagic/stage": "1.7.0",
+    "@tmagic/stage": "1.7.2",
-    "@tmagic/vue-runtime-help": "^1.2.3",
+    "@tmagic/vue-runtime-help": "^2.0.0",
     "axios": "^1.13.2",
     "vue": "catalog:"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.7.0",
+    "@tmagic/cli": "1.7.2",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^24.0.10",
     "@vitejs/plugin-legacy": "^7.2.1",

runtime/vue/vite.config.ts

@@ -55,10 +55,6 @@ export default defineConfig({
 
   publicDir: 'public',
 
-  optimizeDeps: {
-    exclude: ['vue-demi'],
-  },
-
   server: {
     host: '0.0.0.0',
     port: 8078,

vue-components/button/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-button",
   "type": "module",
   "main": "src/index.ts",
@@ -14,21 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
-
     "typescript": {
       "optional": true
     }

vue-components/button/src/index.vue

@@ -6,11 +6,9 @@
   </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, type PropType } from 'vue-demi';
-
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, useApp } from '@tmagic/vue-runtime-help';
 
 interface ButtonSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -18,36 +16,16 @@ interface ButtonSchema extends Omit<MComponent, 'id'> {
   text: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-button',
+});
 
-  props: {
+const props = defineProps<ComponentProps<ButtonSchema>>();
-    config: {
-      type: Object as PropType<ButtonSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+const { app, node } = useApp(props);
-    const { app, node } = useApp(props);
+const clickHandler = () => {
-
-    const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
+};
-
-    return {
-      clickHandler,
-    };
-  },
-});
 </script>

vue-components/container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1",
+  "version": "2.0.0",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,22 +14,17 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   }
 }

vue-components/container/src/Component.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, type PropType, provide } from 'vue-demi';
+import { defineComponent, h, inject, type PropType, provide } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { Id, IS_DSL_NODE_KEY, MComponent, NODE_CONDS_RESULT_KEY } from '@tmagic/core';

vue-components/container/src/Container.vue

@@ -14,12 +14,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MContainer } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 import ItemComponent from './Component';
 
@@ -28,46 +28,19 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
   type?: 'container';
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-container',
+});
 
-  props: {
+const props = defineProps<ComponentProps<ContainerSchema>>();
-    config: {
-      type: Object as PropType<ContainerSchema>,
-      required: true,
-    },
-    iteratorIndex: {
-      type: Array as PropType<number[]>,
-      default: () => [],
-    },
-    iteratorContainerId: {
-      type: Array as PropType<Id[]>,
-      default: () => [],
-    },
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  components: { ItemComponent },
+const app = inject<TMagicApp>('app');
+const node = useNode(props, app);
+registerNodeHooks(node);
 
-  setup(props) {
+const clickHandler = () => {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props, app);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
+};
-
-    return {
-      clickHandler,
-    };
-  },
-});
 </script>

vue-components/img/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-img",
   "type": "module",
   "main": "src/index.ts",
@@ -14,20 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

vue-components/img/src/index.vue

@@ -2,11 +2,9 @@
   <img :src="config.src" @click="clickHandler" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, type PropType } from 'vue-demi';
-
 import type { Id, MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface ImgSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -15,35 +13,16 @@ interface ImgSchema extends Omit<MComponent, 'id'> {
   url?: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-img',
-
-  props: {
-    config: {
-      type: Object as PropType<ImgSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const clickHandler = () => {
-      if (props.config.url) window.location.href = props.config.url;
-    };
-
-    const node = useNode(props);
-    registerNodeHooks(node);
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<ImgSchema>>();
+
+const clickHandler = () => {
+  if (props.config.url) window.location.href = props.config.url;
+};
+
+const node = useNode(props);
+registerNodeHooks(node);
 </script>

vue-components/iterator-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-iterator-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,20 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

vue-components/iterator-container/src/IteratorContainer.vue

@@ -13,8 +13,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, type PropType, watch } from 'vue-demi';
+import { computed, watch } from 'vue';
 
 import {
   COMMON_EVENT_PREFIX,
@@ -23,7 +23,7 @@ import {
   type MIteratorContainer,
   type MNode,
 } from '@tmagic/core';
-import { registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
 
 import IteratorItem from './IteratorItem.vue';
 
@@ -40,31 +40,16 @@ interface IteratorItemSchema {
   };
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-iterator-container',
+});
 
-  components: { IteratorItem },
+const props = defineProps<ComponentProps<IteratorContainerSchema>>();
 
-  props: {
+const { app, node } = useApp(props);
-    config: {
+registerNodeHooks(node);
-      type: Object as PropType<IteratorContainerSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+const configs = computed<IteratorItemSchema[]>(() => {
-    const { app, node } = useApp(props);
-    registerNodeHooks(node);
-
-    const configs = computed<IteratorItemSchema[]>(() => {
   let { iteratorData = [] } = props.config;
   const { itemConfig, dsField, items } = props.config;
 
@@ -95,9 +80,9 @@ export default defineComponent({
       },
     };
   });
-    });
+});
 
-    watch(
+watch(
   configs,
   (configs) => {
     if (!props.config.id) {
@@ -123,18 +108,11 @@ export default defineComponent({
   {
     immediate: true,
   },
-    );
+);
 
-    const clickHandler = () => {
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
+};
-
-    return {
-      configs,
-      clickHandler,
-    };
-  },
-});
 </script>

vue-components/iterator-container/src/IteratorItem.vue

@@ -10,8 +10,8 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { type Id } from '@tmagic/core';
@@ -19,37 +19,25 @@ import { useComponent, useComponentStatus } from '@tmagic/vue-runtime-help';
 
 import { IteratorItemSchema } from './type';
 
-export default defineComponent({
+interface IteratorItemProps {
+  config: IteratorItemSchema;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+  containerIndex?: number;
+  pageFragmentContainerId?: Id;
+  index?: number;
+  model?: Record<string, any>;
+}
+
+defineOptions({
   name: 'tmagic-iterator-container-item',
-
-  props: {
-    config: {
-      type: Object as PropType<IteratorItemSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    index: Number,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-
-    const { style, className } = useComponentStatus(props);
-
-    return {
-      style,
-      className,
-      containerComponent,
-    };
-  },
 });
+
+const props = defineProps<IteratorItemProps>();
+
+const app = inject<TMagicApp>('app');
+
+const containerComponent = useComponent({ componentType: 'container', app });
+
+const { style, className } = useComponentStatus(props);
 </script>

vue-components/overlay/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-overlay",
   "type": "module",
   "main": "src/index.ts",
@@ -14,14 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "vue-demi": ">=0.14.7",
+    "typescript": "catalog:",
-    "typescript": "catalog:"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/overlay/src/index.vue

@@ -4,84 +4,72 @@
   </component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
+import { inject, onBeforeUnmount, ref } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { type Id, IS_DSL_NODE_KEY, type MContainer, type MNode, type MPage } from '@tmagic/core';
-import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
 
 interface OverlaySchema extends Omit<MContainer, 'id'> {
   id?: Id;
   type?: 'overlay';
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-overlay',
+});
 
-  props: {
+const props = defineProps<ComponentProps<OverlaySchema>>();
-    config: {
-      type: Object as PropType<OverlaySchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+const visible = ref(false);
-    const visible = ref(false);
 
-    const app = inject<TMagicApp>('app');
+const app = inject<TMagicApp>('app');
-    const containerComponent = useComponent({ componentType: 'container', app });
+const containerComponent = useComponent({ componentType: 'container', app });
 
-    const openOverlay = () => {
+const openOverlay = () => {
   visible.value = true;
   app?.emit('overlay:open', node);
-    };
+};
 
-    const closeOverlay = () => {
+const closeOverlay = () => {
   visible.value = false;
   app?.emit('overlay:close', node);
-    };
+};
 
-    const editorSelectHandler = (
+const editorSelectHandler = (
-      info: {
+  _info: {
     node: MNode;
     page: MPage;
     parent: MContainer;
   },
   path: MNode[],
-    ) => {
+) => {
   if (path.find((node: MNode) => node.id === props.config.id)) {
     openOverlay();
   } else {
     closeOverlay();
   }
-    };
+};
 
+app?.page?.on('editor:select', editorSelectHandler);
+
+app?.on('page-change', () => {
   app?.page?.on('editor:select', editorSelectHandler);
+});
 
-    onBeforeUnmount(() => {
+onBeforeUnmount(() => {
   app?.page?.off('editor:select', editorSelectHandler);
-    });
+});
 
-    const node = useNode(props, app);
+const node = useNode(props, app);
-    registerNodeHooks(node, {
+registerNodeHooks(node, {
   openOverlay,
   closeOverlay,
-    });
+});
 
-    return {
+defineExpose({
-      containerComponent,
+  openOverlay,
-      visible,
+  closeOverlay,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
 </script>

vue-components/page-fragment-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.2",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page-fragment-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page-fragment-container/src/PageFragmentContainer.vue

@@ -11,55 +11,35 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, type PropType, provide } from 'vue-demi';
+import { computed, provide } from 'vue';
 
-import { type Id, type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
+import { type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
-import { registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page-fragment-container',
+});
 
-  props: {
+const props = defineProps<ComponentProps<MComponent>>();
-    config: {
-      type: Object as PropType<MComponent>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
-    provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
 
-    const { app, node } = useApp(props);
+const { app, node } = useApp(props);
-    registerNodeHooks(node);
+registerNodeHooks(node);
 
-    const containerComponent = useComponent({ componentType: 'container', app });
+const containerComponent = useComponent({ componentType: 'container', app });
 
-    if (!props.config.id) {
+if (!props.config.id) {
   throw new Error('page-fragment-container must have id');
-    }
+}
 
-    const { pageConfig: fragment } = useDsl(app, props.config.id);
+const { pageConfig: fragment } = useDsl(app, props.config.id);
 
-    const containerConfig = computed(() => {
+const containerConfig = computed(() => {
   if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
 
   return fragment.value;
-    });
-
-    return {
-      containerComponent,
-      containerConfig,
-    };
-  },
 });
 </script>
 

vue-components/page-fragment/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page-fragment",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page-fragment/src/PageFragment.vue

@@ -8,40 +8,29 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core';
-import { registerNodeHooks, useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
+import {
+  type ComponentProps,
+  registerNodeHooks,
+  useComponent,
+  useComponentStatus,
+  useNode,
+} from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page-fragment',
-
-  props: {
-    config: {
-      type: Object as PropType<MPageFragment>,
-      required: true,
-    },
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props, app);
-    registerNodeHooks(node);
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-    const { style, className } = useComponentStatus(props);
-    return {
-      style,
-      className,
-      containerComponent,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<MPageFragment>>();
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props, app);
+registerNodeHooks(node);
+
+const containerComponent = useComponent({ componentType: 'container', app });
+const { style, className } = useComponentStatus(props);
 </script>

vue-components/page/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page/src/formConfig.ts

@@ -78,6 +78,9 @@ export default defineFormConfig([
     name: 'css',
     type: 'vs-code',
     language: 'css',
-    height: '500px',
+    autosize: {
+      minRows: 3,
+      maxRows: 20,
+    },
   },
 ]);

vue-components/page/src/index.vue

@@ -8,8 +8,8 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
+import { inject, nextTick, watch } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { asyncLoadCss, asyncLoadJs, IS_DSL_NODE_KEY, type MPage } from '@tmagic/core';
@@ -37,37 +37,36 @@ const createJs = (config: MPage) => {
   }
 };
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page',
+});
 
-  props: {
+const props = withDefaults(
-    config: {
+  defineProps<{
-      type: Object as PropType<MPage>,
+    config: MPage;
-      required: true,
+    model?: Record<string, any>;
-    },
+  }>(),
-    model: {
+  {
-      type: Object,
+    model: () => ({}),
-      default: () => ({}),
-    },
   },
+);
 
-  setup(props) {
+const app = inject<TMagicApp>('app');
-    const app = inject<TMagicApp>('app');
 
-    if (app?.jsEngine === 'browser') {
+if (app?.jsEngine === 'browser') {
   createCss(props.config);
   createJs(props.config);
-    }
+}
 
-    const containerComponent = useComponent({ componentType: 'container', app });
+const containerComponent = useComponent({ componentType: 'container', app });
 
-    const { style, className } = useComponentStatus(props);
+const { style, className } = useComponentStatus(props);
 
-    const refresh = () => {
+const refresh = () => {
   window.location.reload();
-    };
+};
 
-    watch(
+watch(
   () => props.config,
   async (config, preConfig) => {
     const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
@@ -87,14 +86,5 @@ export default defineComponent({
   {
     immediate: true,
   },
-    );
+);
-
-    return {
-      style,
-      className,
-      containerComponent,
-      IS_DSL_NODE_KEY,
-    };
-  },
-});
 </script>

vue-components/qrcode/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-qrcode",
   "type": "module",
   "main": "src/index.ts",
@@ -15,22 +15,17 @@
   },
   "dependencies": {
     "@tmagic/form-schema": "workspace:^",
-    "qrcode": "^1.5.0",
+    "qrcode": "^1.5.0"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   },
   "devDependencies": {

vue-components/qrcode/src/index.vue

@@ -2,13 +2,13 @@
   <img :src="imgUrl" @click="clickHandler" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
+import { inject, ref, watch } from 'vue';
 import QRCode from 'qrcode';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface QrCodeSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -16,28 +16,15 @@ interface QrCodeSchema extends Omit<MComponent, 'id'> {
   url: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-qrcode',
+});
 
-  props: {
+const props = defineProps<ComponentProps<QrCodeSchema>>();
-    config: {
-      type: Object as PropType<QrCodeSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+const imgUrl = ref();
-    const imgUrl = ref();
 
-    watch(
+watch(
   () => props.config.url,
   (url = '') => {
     QRCode.toDataURL(url, (e: any, url: string) => {
@@ -48,22 +35,15 @@ export default defineComponent({
   {
     immediate: true,
   },
-    );
+);
 
-    const app = inject<TMagicApp>('app');
+const app = inject<TMagicApp>('app');
-    const node = useNode(props);
+const node = useNode(props);
-    registerNodeHooks(node);
+registerNodeHooks(node);
 
-    const clickHandler = () => {
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
+};
-
-    return {
-      imgUrl,
-      clickHandler,
-    };
-  },
-});
 </script>

vue-components/text/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-text",
   "type": "module",
   "main": "src/index.ts",
@@ -14,22 +14,17 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   }
 }

vue-components/text/src/index.vue

@@ -2,12 +2,12 @@
   <p @click="clickHandler" v-html="config.text"></p>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface TextSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -15,38 +15,19 @@ interface TextSchema extends Omit<MComponent, 'id'> {
   text: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-text',
+});
 
-  props: {
+const props = defineProps<ComponentProps<TextSchema>>();
-    config: {
-      type: Object as PropType<TextSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+const app = inject<TMagicApp>('app');
-    const app = inject<TMagicApp>('app');
+const node = useNode(props);
-    const node = useNode(props);
+registerNodeHooks(node);
-    registerNodeHooks(node);
 
-    const clickHandler = () => {
+const clickHandler = () => {
   if (app && node) {
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
-    };
+};
-
-    return {
-      clickHandler,
-    };
-  },
-});
 </script>