Create toast component

2024-12-30 19:55:10 +03:30
parent 94231d8331
commit aba3a1e427
2 changed files with 82 additions and 0 deletions
@@ -0,0 +1,63 @@
+<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>
@@ -0,0 +1,19 @@
+<script setup>
+
+// state
+
+import ToastBox from "~/components/ui/ToastContainer/ToastBox.vue";
+
+const { toasts } = useToast();
+
+</script>
+
+<template>
+    <ToastBox
+        v-for="toast in toasts"
+        :key="toast.id"
+        :id="toast.id"
+        :message="toast.message"
+        :description="toast.description"
+    />
+</template>