39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<template>
|
||
<ToastRoot class="ToastRoot bg-light-10 dark:bg-dark-10 p-3 border border-light-30 dark:border-dark-30" v-model:open="model">
|
||
<ToastTitle asChild><slot name="title"></slot></ToastTitle>
|
||
<ToastDescription asChild><slot></slot></ToastDescription>
|
||
<ToastClose v-if="closeable"><button>×</button></ToastClose>
|
||
</ToastRoot>
|
||
|
||
<ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-96 z-50 outline-none" />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const model = defineModel<boolean>();
|
||
|
||
const { closeable = true } = defineProps<{
|
||
closeable?: boolean
|
||
}>();
|
||
</script>
|
||
|
||
<style>
|
||
.ToastRoot[data-swipe='move'] {
|
||
transform: translateX(var(--radix-toast-swipe-move-x));
|
||
}
|
||
.ToastRoot[data-swipe='cancel'] {
|
||
transform: translateX(0);
|
||
transition: transform 200ms ease-out;
|
||
}
|
||
.ToastRoot[data-swipe='end'] {
|
||
animation: swipeRight 100ms ease-out;
|
||
}
|
||
|
||
@keyframes swipeRight {
|
||
from {
|
||
transform: translateX(var(--radix-toast-swipe-end-x));
|
||
}
|
||
to {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
</style> |