feat(vue-components): 不再兼容vue2

pnpm-lock.yaml

@@ -965,11 +965,11 @@ importers:
   runtime/react-runtime-help:
     dependencies:
       '@tmagic/core':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(typescript@5.9.3)
+        version: 1.7.0(typescript@5.9.3)
       '@tmagic/stage':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
+        version: 1.7.0(@tmagic/core@1.7.0(typescript@5.9.3))(typescript@5.9.3)
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -1072,23 +1072,17 @@ importers:
   runtime/vue-runtime-help:
     dependencies:
       '@tmagic/core':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(typescript@5.9.3)
+        version: 1.7.0(typescript@5.9.3)
       '@tmagic/stage':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
+        version: 1.7.0(@tmagic/core@1.7.0(typescript@5.9.3))(typescript@5.9.3)
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
     devDependencies:
       '@vue/test-utils':
         specifier: ^2.4.6
@@ -1105,18 +1099,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/container:
     dependencies:
@@ -1129,18 +1117,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/img:
     dependencies:
@@ -1153,18 +1135,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/iterator-container:
     dependencies:
@@ -1177,18 +1153,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/overlay:
     dependencies:
@@ -1204,9 +1174,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/page:
     dependencies:
@@ -1222,9 +1192,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/page-fragment:
     dependencies:
@@ -1240,9 +1210,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/page-fragment-container:
     dependencies:
@@ -1258,9 +1228,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/qrcode:
     dependencies:
@@ -1273,9 +1243,6 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       qrcode:
         specifier: ^1.5.0
         version: 1.5.4
@@ -1283,11 +1250,8 @@ importers:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
     devDependencies:
       '@types/qrcode':
         specifier: ^1.4.2
@@ -1304,18 +1268,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
 packages:
 
@@ -8277,7 +8235,7 @@ snapshots:
   '@tmagic/core@1.6.1(typescript@5.9.3)':
     dependencies:
       '@tmagic/data-source': 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
-      '@tmagic/dep': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)
+      '@tmagic/dep': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)
       '@tmagic/schema': 1.6.1(typescript@5.9.3)
       '@tmagic/utils': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3)
       events: 3.3.0
@@ -8314,10 +8272,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  '@tmagic/dep@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)':
+  '@tmagic/dep@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
       '@tmagic/schema': 1.6.1(typescript@5.9.3)
-      '@tmagic/utils': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3)
+      '@tmagic/utils': 1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -8918,6 +8876,7 @@ snapshots:
   '@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3))':
     dependencies:
       vue: 3.5.24(typescript@5.9.3)
+    optional: true
 
   '@vue/devtools-api@6.6.4': {}
 

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 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,33 +28,12 @@ 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 },
-
-  setup(props) {
 const app = inject<TMagicApp>('app');
 const node = useNode(props, app);
 registerNodeHooks(node);
@@ -64,10 +43,4 @@ export default defineComponent({
     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: {
+const props = defineProps<ComponentProps<ImgSchema>>();
-    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,
-    };
-  },
-});
 </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,27 +40,12 @@ interface IteratorItemSchema {
   };
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-iterator-container',
+});
 
-  components: { IteratorItem },
+const props = defineProps<ComponentProps<IteratorContainerSchema>>();
 
-  props: {
-    config: {
-      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 { app, node } = useApp(props);
 registerNodeHooks(node);
 
@@ -130,11 +115,4 @@ export default defineComponent({
     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: {
+const props = defineProps<IteratorItemProps>();
-    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,
-    };
-  },
-});
 </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,37 +4,24 @@
   </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 app = inject<TMagicApp>('app');
@@ -51,7 +38,7 @@ export default defineComponent({
 };
 
 const editorSelectHandler = (
-      info: {
+  _info: {
     node: MNode;
     page: MPage;
     parent: MContainer;
@@ -67,6 +54,10 @@ export default defineComponent({
 
 app?.page?.on('editor:select', editorSelectHandler);
 
+app?.on('page-change', () => {
+  app?.page?.on('editor:select', editorSelectHandler);
+});
+
 onBeforeUnmount(() => {
   app?.page?.off('editor:select', editorSelectHandler);
 });
@@ -77,11 +68,8 @@ export default defineComponent({
   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,31 +11,18 @@
   </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);
 
 const { app, node } = useApp(props);
@@ -54,13 +41,6 @@ export default defineComponent({
 
   return fragment.value;
 });
-
-    return {
-      containerComponent,
-      containerConfig,
-    };
-  },
-});
 </script>
 
 <style scoped>

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: {
+const props = defineProps<ComponentProps<MPageFragment>>();
-    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,
-    };
-  },
-});
 </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,21 +37,20 @@ 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');
 
 if (app?.jsEngine === 'browser') {
@@ -88,13 +87,4 @@ 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,25 +16,12 @@ 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();
 
 watch(
@@ -59,11 +46,4 @@ export default defineComponent({
     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,25 +15,12 @@ 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 node = useNode(props);
 registerNodeHooks(node);
@@ -43,10 +30,4 @@ export default defineComponent({
     app.emit(`${COMMON_EVENT_PREFIX}click`, node);
   }
 };
-
-    return {
-      clickHandler,
-    };
-  },
-});
 </script>