heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new changes

Browse Source
This commit is contained in:
Mamalizz
2025-02-23 23:22:42 +03:30
parent 1dcd3647ac
commit 0e171e167b
7 changed files with 135 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/ToastContainer/ToastBox.vue
+17 -17
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// import
import type { ToastOptions } from "~/composables/global/useToast";
@@ -9,9 +8,9 @@ import { useToast } from "~/composables/global/useToast";
type Props = {
id: number;
message: string,
options: ToastOptions
}
message: string;
options: ToastOptions;
};
// props
@@ -24,7 +23,7 @@ const { destroyToast } = useToast();
const open = ref(true);
// method
// methods
const onSwipeEnd = () => {
setTimeout(() => {
@@ -41,37 +40,39 @@ const statusIcon = computed(() => {
case "success":
return {
name: "duo-icons:check-circle",
class: "**:fill-success-500 [filter:drop-shadow(0_0_10px_var(--color-success-500))]"
class: "**:fill-success-500 [filter:drop-shadow(0_0_10px_var(--color-success-500))]",
};
case "error":
return {
name: "duo-icons:alert-triangle",
class: "**:fill-danger-500 [filter:drop-shadow(0_0_10px_var(--color-danger-500))]"
class: "**:fill-danger-500 [filter:drop-shadow(0_0_10px_var(--color-danger-500))]",
};
case "info":
return {
name: "duo-icons:info",
class: "**:fill-cyan-500 [filter:drop-shadow(0_0_10px_var(--color-cyan-500))]"
class: "**:fill-cyan-500 [filter:drop-shadow(0_0_10px_var(--color-cyan-500))]",
};
case "warning":
return {
name: "duo-icons:alert-octagon",
class: "**:fill-warning-500 [filter:drop-shadow(0_0_10px_var(--color-warning-500))]"
class: "**:fill-warning-500 [filter:drop-shadow(0_0_10px_var(--color-warning-500))]",
};
default:
return {
name: "duo-icons:info",
class: "**:fill-slate-500 [filter:drop-shadow(0_0_10px_var(--color-slate-500))]"
class: "**:fill-slate-500 [filter:drop-shadow(0_0_10px_var(--color-slate-500))]",
};
}
});
// watch
watch(() => open.value, (value) => {
if (!value) onSwipeEnd();
});
watch(
() => open.value,
(value) => {
if (!value) onSwipeEnd();
}
);
// lifecycle
@@ -80,7 +81,6 @@ onMounted(() => {
open.value = false;
}, options.value.duration ?? 4000);
});
</script>
<template>
@@ -92,7 +92,7 @@ onMounted(() => {
:class="options.description ? 'rounded-150' : 'rounded-full'"
>
<ToastTitle
:class="[ { 'mb-1.5' : options.description } ]"
:class="[{ 'mb-1.5': options.description }]"
class="[grid-area:_title] font-medium text-slate-600 text-sm flex items-center gap-2"
>
<Icon :name="statusIcon.name" :class="statusIcon.class" size="24" />
@@ -106,4 +106,4 @@ onMounted(() => {
</div>
</ToastDescription>
</ToastRoot>
</template>
</template>