feat(Toast): add Portal (#1417)

* feat(Toast): improve `Toast` to use Portal

* chore: docs gen

---------

Co-authored-by: malik jouda <m.jouda@approved.tech>

docs/content/components/toast.md

@@ -113,6 +113,12 @@ The toast that automatically closes. It should not be held open to [acquire a us
   ]"
 />
 
+### Portal
+
+When used, portals the content part into the `body`.
+
+<!-- @include: @/meta/ToastPortal.md -->
+
 ### Title
 
 An optional title for the toast

docs/content/meta/ToastPortal.md

@@ -0,0 +1,22 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Disable teleport and render the component inline</p>\n<p><a href=\'https://vuejs.org/guide/built-ins/teleport.html#disabling-teleport\' target=\'_blank\'>reference</a></p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'to',
+    'description': '<p>Vue native teleport component prop <code>:to</code></p>\n<p><a href=\'https://vuejs.org/guide/built-ins/teleport.html#basic-usage\' target=\'_blank\'>reference</a></p>\n',
+    'type': 'string | HTMLElement',
+    'required': false
+  }
+]" />

packages/radix-vue/constant/components.ts

@@ -384,6 +384,7 @@ export const components = {
   toast: [
     'ToastProvider',
     'ToastRoot',
+    'ToastPortal',
     'ToastAction',
     'ToastClose',
     'ToastViewport',

packages/radix-vue/src/Toast/ToastPortal.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportProps } from '@/Teleport'
+
+export interface ToastPortalProps extends TeleportProps {}
+</script>
+
+<script setup lang="ts">
+import { TeleportPrimitive } from '@/Teleport'
+
+const props = defineProps<ToastPortalProps>()
+</script>
+
+<template>
+  <TeleportPrimitive v-bind="props">
+    <slot />
+  </TeleportPrimitive>
+</template>

packages/radix-vue/src/Toast/index.ts

@@ -1,5 +1,6 @@
 export { default as ToastProvider, type ToastProviderProps } from './ToastProvider.vue'
 export { default as ToastRoot, type ToastRootProps, type ToastRootEmits } from './ToastRoot.vue'
+export { default as ToastPortal, type ToastPortalProps } from './ToastPortal.vue'
 export { default as ToastAction, type ToastActionProps } from './ToastAction.vue'
 export { default as ToastClose, type ToastCloseProps } from './ToastClose.vue'
 export { default as ToastViewport, type ToastViewportProps } from './ToastViewport.vue'