fix(ui): registered vue components can't access the appContext

packages/ui/src/common/index.ts

@@ -16,3 +16,4 @@
 
 export * from './component-manager';
 export * from './z-index-manager';
+export * from "./teleport";

packages/ui/src/common/teleport.ts

@@ -0,0 +1,43 @@
+import { Fragment, reactive, Teleport, markRaw, defineComponent, h } from "vue";
+
+let active = false;
+const items = reactive<{ [key: string]: any }>({});
+
+export function connect(
+    id: string | number,
+    component: any,
+    container: HTMLDivElement,
+    props: Record<string, any>
+) {
+    if (active) {
+        items[id] = markRaw(
+            defineComponent({
+                render: () =>
+                    h(Teleport, { to: container } as any, [
+                        h(component, props),
+                    ]),
+            })
+        );
+    }
+}
+
+export function disconnect(id: string | number) {
+    if (active) {
+        delete items[id];
+    }
+}
+
+export function getTeleport(): any {
+    active = true;
+
+    return defineComponent({
+        setup() {
+            return () =>
+                h(
+                    Fragment,
+                    {},
+                    Object.keys(items).map((id) => h(items[id]))
+                );
+        },
+    });
+}