init

src/component/_components/renderFunction.ts

@@ -0,0 +1,23 @@
+import { defineComponent, VNodeTypes } from "vue";
+
+import type { PropType } from "vue";
+
+export type RenderFunc = (props: Record<string, unknown>) => VNodeTypes;
+
+export default defineComponent({
+  name: "RenderFunction",
+  props: {
+    renderFunc: {
+      type: Function as PropType<RenderFunc>,
+      default: null,
+    },
+  },
+  setup(props, ctx) {
+    return () => {
+      if (typeof props.renderFunc !== "function") {
+        return null;
+      }
+      return props.renderFunc(ctx.attrs);
+    };
+  },
+});

src/component/_components/teleportWrapper.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+export default {
+  name: "TeleportWrapper",
+};
+</script>
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+export interface TeleportWrapperProps {
+  to?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<TeleportWrapperProps>(), {
+  to: "",
+  disabled: false,
+});
+
+const target = ref<Element | null>(null);
+
+onMounted(() => {
+  const observer = new MutationObserver((mutationList, observer) => {
+    for (const mutation of mutationList) {
+      if (mutation.type !== "childList") continue;
+      const el = document.querySelector(props.to);
+      if (!el) continue;
+      target.value = el;
+      observer.disconnect();
+      break;
+    }
+  });
+  observer.observe(document, { childList: true, subtree: true });
+  return () => observer.disconnect();
+});
+</script>
+<template>
+  <Teleport :to="target" :disabled="!target || disabled">
+    <slot></slot>
+  </Teleport>
+</template>