chore: add vue-sonner with dialog example

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -303,7 +303,7 @@ watch(() => $route.path, (n) => {
         </DialogContent>
       </Dialog>
       <DefaultToaster />
-      <NewYorkSonner :theme="'system'" />
+      <NewYorkSonner class="pointer-events-auto" :theme="'system'" />
       <NewYorkToaster />
     </div>
   </TooltipProvider>

apps/www/__registry__/index.ts

@@ -948,6 +948,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/SonnerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SonnerDemo.vue"],
     },
+    "SonnerWithDialog": {
+      name: "SonnerWithDialog",
+      type: "components:example",
+      registryDependencies: ["button","dialog"],
+      component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
+    },
     "SwitchDemo": {
       name: "SwitchDemo",
       type: "components:example",
@@ -2349,6 +2356,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/SonnerDemo.vue"],
     },
+    "SonnerWithDialog": {
+      name: "SonnerWithDialog",
+      type: "components:example",
+      registryDependencies: ["button","dialog"],
+      component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
+    },
     "SwitchDemo": {
       name: "SwitchDemo",
       type: "components:example",

apps/www/src/content/docs/components/sonner.md

@@ -61,3 +61,23 @@ import { Button } from '@/components/ui/button'
   </Button>
 </template>
 ```
+
+## Examples
+
+### Sonner with Dialog
+
+Related issue https://github.com/radix-vue/shadcn-vue/issues/462
+
+Add `pointer-events-auto` class to Toaster component in your `App.vue` file:
+
+```vue {6}
+<script setup lang="ts">
+import { Toaster } from '@/components/ui/sonner'
+</script>
+
+<template>
+  <Toaster class="pointer-events-auto" />
+</template>
+```
+
+<ComponentPreview name="SonnerWithDialog" />

apps/www/src/lib/registry/default/example/SonnerWithDialog.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Dialog with toast
+      </Button>
+    </DialogTrigger>
+    <DialogContent
+      class="sm:max-w-md"
+      @interact-outside="event => {
+        const target = event.target as HTMLElement;
+        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()
+      }"
+    >
+      <DialogHeader>
+        <DialogTitle>Vue Sonner Toast</DialogTitle>
+        <DialogDescription> Dialog with toast </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4">
+        <Button
+          size="sm"
+          class="px-3"
+          @click="
+            () => {
+              toast('Event has been created', {
+                description: 'Sunday, December 03, 2023 at 9:00 AM',
+                action: {
+                  label: 'Undo',
+                  onClick: () => console.log('Undo'),
+                },
+              });
+            }
+          "
+        >
+          Toast
+        </Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/new-york/ui/dialog'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Dialog with toast
+      </Button>
+    </DialogTrigger>
+    <DialogContent
+      class="sm:max-w-md"
+      @interact-outside="event => {
+        const target = event.target as HTMLElement;
+        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()
+      }"
+    >
+      <DialogHeader>
+        <DialogTitle>Vue Sonner Toast</DialogTitle>
+        <DialogDescription> Dialog with toast </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4">
+        <Button
+          size="sm"
+          class="px-3"
+          @click="
+            () => {
+              toast('Event has been created', {
+                description: 'Sunday, December 03, 2023 at 9:00 AM',
+                action: {
+                  label: 'Undo',
+                  onClick: () => console.log('Undo'),
+                },
+              });
+            }
+          "
+        >
+          Toast
+        </Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>