Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add vue-sonner with dialog example

Browse Source
This commit is contained in:
sadeghbarati 2024-05-14 14:32:15 +03:30
parent 7f73e4d74b
commit 5ff8a0a07f
5 changed files with 141 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

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

14
apps/www/__registry__/index.ts
View File

@ -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",

20
apps/www/src/content/docs/components/sonner.md
View File

@ -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" />

53
apps/www/src/lib/registry/default/example/SonnerWithDialog.vue Normal file
View File

@ -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>

53
apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue Normal file
View File

@ -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>