46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<script setup>
|
|
import { Toaster as Sonner } from "vue-sonner";
|
|
|
|
const props = defineProps({
|
|
id: { type: String, required: false },
|
|
invert: { type: Boolean, required: false },
|
|
theme: { type: String, required: false },
|
|
position: { type: String, required: false },
|
|
closeButtonPosition: { type: String, required: false },
|
|
hotkey: { type: Array, required: false },
|
|
richColors: { type: Boolean, required: false },
|
|
expand: { type: Boolean, required: false },
|
|
duration: { type: Number, required: false },
|
|
gap: { type: Number, required: false },
|
|
visibleToasts: { type: Number, required: false },
|
|
closeButton: { type: Boolean, required: false },
|
|
toastOptions: { type: Object, required: false },
|
|
class: { type: String, required: false },
|
|
style: { type: Object, required: false },
|
|
offset: { type: [Object, String, Number], required: false },
|
|
mobileOffset: { type: [Object, String, Number], required: false },
|
|
dir: { type: String, required: false },
|
|
swipeDirections: { type: Array, required: false },
|
|
icons: { type: Object, required: false },
|
|
containerAriaLabel: { type: String, required: false },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Sonner
|
|
class="toaster group"
|
|
v-bind="props"
|
|
:toast-options="{
|
|
classes: {
|
|
toast:
|
|
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
|
|
description: 'group-[.toast]:text-muted-foreground',
|
|
actionButton:
|
|
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
|
|
cancelButton:
|
|
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
|
|
},
|
|
}"
|
|
/>
|
|
</template>
|