marzban-dev
63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
|
|
// type
|
|
|
|
type Props = {
|
|
id: number;
|
|
message: string,
|
|
description?: string
|
|
}
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
const { id } = toRefs(props);
|
|
|
|
// state
|
|
|
|
const { destroyToast } = useToast();
|
|
|
|
const open = ref(true);
|
|
|
|
// method
|
|
|
|
const onSwipeEnd = () => {
|
|
setTimeout(() => {
|
|
destroyToast(id);
|
|
}, 1000);
|
|
}
|
|
|
|
// watch
|
|
|
|
watch(() => open.value, (value) => {
|
|
if (!value) onSwipeEnd()
|
|
});
|
|
|
|
// lifecycle
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
open.value = false;
|
|
}, 4000);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<ToastRoot
|
|
@swipeEnd="onSwipeEnd"
|
|
v-model:open="open"
|
|
class="bg-white rounded-lg shadow-xl shadow-black/5 border-[0.5px] border-black p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-toast-in data-[state=closed]:animate-toast-hide data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-toast-out"
|
|
>
|
|
<ToastTitle class="[grid-area:_title] mb-[5px] font-medium text-black text-sm">
|
|
{{ message }}
|
|
</ToastTitle>
|
|
<ToastDescription v-if="description" as-child>
|
|
<div
|
|
class="[grid-area:_description] m-0 text-black leading-[1.3]"
|
|
>
|
|
{{ description }}
|
|
</div>
|
|
</ToastDescription>
|
|
</ToastRoot>
|
|
</template> |