From 91cde30d75de866ade3f48f48b2c0d1251fe2b36 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 27 Feb 2025 19:31:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(vue-container):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89render?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-components/container/package.json      |  2 +-
 vue-components/container/src/Component.ts  | 54 ++++++++++++++++++++++
 vue-components/container/src/Container.vue | 38 +++++++--------
 3 files changed, 75 insertions(+), 19 deletions(-)
 create mode 100644 vue-components/container/src/Component.ts

diff --git a/vue-components/container/package.json b/vue-components/container/package.json
index 6fcc90fb..d46c93bd 100644
--- a/vue-components/container/package.json
+++ b/vue-components/container/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.8",
+  "version": "1.0.0",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/container/src/Component.ts b/vue-components/container/src/Component.ts
new file mode 100644
index 00000000..c9d110d6
--- /dev/null
+++ b/vue-components/container/src/Component.ts
@@ -0,0 +1,54 @@
+import { defineComponent, h, inject, type PropType } from 'vue-demi';
+
+import type TMagicApp from '@tmagic/core';
+import { Id, IS_DSL_NODE_KEY, MComponent, toLine } from '@tmagic/core';
+import { useComponent, type UserRenderFunction } from '@tmagic/vue-runtime-help';
+
+export default defineComponent({
+  props: {
+    config: {
+      type: Object as PropType<MComponent>,
+      required: true,
+    },
+    index: Number,
+    iteratorIndex: {
+      type: Array as PropType<number[]>,
+      default: () => [],
+    },
+    iteratorContainerId: {
+      type: Array as PropType<Id[]>,
+      default: () => [],
+    },
+  },
+
+  setup(props) {
+    const userRender = inject<UserRenderFunction>('userRender', ({ h, type, props, attrs, style, className }) =>
+      h(type, { ...props, ...attrs, style, class: className }),
+    );
+
+    const app = inject<TMagicApp>('app');
+
+    return () =>
+      userRender({
+        h,
+        config: props.config,
+        type: useComponent({ componentType: props.config.type, app }),
+        style: app?.transformStyle(props.config.style || {}),
+        className: props.config.className
+          ? `${props.config.className} magic-ui-${toLine(props.config.type)}`
+          : `magic-ui-${toLine(props.config.type)}`,
+        props: {
+          config: { ...props.config, [IS_DSL_NODE_KEY]: true },
+          containerIndex: props.index,
+          iteratorIndex: props.iteratorIndex,
+          iteratorContainerId: props.iteratorContainerId,
+        },
+        attrs: {
+          'data-tmagic-id': props.config.id,
+          'data-tmagic-iterator-index': props.iteratorIndex,
+          'data-tmagic-iterator-container-id': props.iteratorContainerId,
+          'data-container-index': props.index,
+        },
+      });
+  },
+});
diff --git a/vue-components/container/src/Container.vue b/vue-components/container/src/Container.vue
index 00879c4b..31397287 100644
--- a/vue-components/container/src/Container.vue
+++ b/vue-components/container/src/Container.vue
@@ -2,21 +2,14 @@
   <div v-if="display(config)" :class="className" :style="style">
     <slot>
       <template v-for="(item, index) in config.items">
-        <component
+        <ItemComponent
           v-if="display(item)"
           :key="item.id"
-          :is="useComponent({ componentType: item.type, app })"
-          :data-tmagic-id="item.id"
-          :data-tmagic-iterator-index="iteratorIndex"
-          :data-tmagic-iterator-container-id="iteratorContainerId"
-          :data-container-index="index"
-          :class="item.className ? `${item.className} magic-ui-${toLine(item.type)}` : `magic-ui-${toLine(item.type)}`"
-          :style="app?.transformStyle(item.style || {})"
-          :config="{ ...item, [IS_DSL_NODE_KEY]: true }"
-          :container-index="index"
+          :config="item"
+          :index="index"
           :iterator-index="iteratorIndex"
           :iterator-container-id="iteratorContainerId"
-        ></component>
+        ></ItemComponent>
       </template>
     </slot>
   </div>
@@ -26,8 +19,10 @@
 import { computed, defineComponent, type PropType } from 'vue-demi';
 
 import type { Id, MContainer } from '@tmagic/core';
-import { IS_DSL_NODE_KEY, toLine } from '@tmagic/core';
-import { useApp, useComponent } from '@tmagic/vue-runtime-help';
+import { IS_DSL_NODE_KEY } from '@tmagic/core';
+import { useApp } from '@tmagic/vue-runtime-help';
+
+import ItemComponent from './Component';
 
 interface ContainerSchema extends Omit<MContainer, 'id'> {
   id?: Id;
@@ -35,19 +30,29 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
 }
 
 export default defineComponent({
+  name: 'tmagic-container',
+
   props: {
     config: {
       type: Object as PropType<ContainerSchema>,
       required: true,
     },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
+    iteratorIndex: {
+      type: Array as PropType<number[]>,
+      default: () => [],
+    },
+    iteratorContainerId: {
+      type: Array as PropType<Id[]>,
+      default: () => [],
+    },
     model: {
       type: Object,
       default: () => ({}),
     },
   },
 
+  components: { ItemComponent },
+
   setup(props) {
     const { display, app } = useApp({
       config: props.config,
@@ -78,11 +83,8 @@ export default defineComponent({
       app,
       className,
       style,
-      IS_DSL_NODE_KEY,
 
       display,
-      toLine,
-      useComponent,
     };
   },
 });