2022-09-09 22:46:53 +00:00
|
|
|
import { useId } from "./use-ids";
|
2022-08-31 00:07:21 +00:00
|
|
|
|
|
|
|
interface Notification {
|
2022-09-09 22:46:53 +00:00
|
|
|
id: string;
|
|
|
|
message: string;
|
|
|
|
type: "success" | "error" | "info";
|
2022-08-31 00:07:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const notifications = ref<Notification[]>([]);
|
|
|
|
|
|
|
|
function addNotification(notification: Notification) {
|
2022-09-09 22:46:53 +00:00
|
|
|
notifications.value.unshift(notification);
|
2022-08-31 00:07:21 +00:00
|
|
|
|
2022-09-09 22:46:53 +00:00
|
|
|
if (notifications.value.length > 4) {
|
|
|
|
notifications.value.pop();
|
|
|
|
} else {
|
|
|
|
setTimeout(() => {
|
|
|
|
// Remove notification with ID
|
|
|
|
notifications.value = notifications.value.filter(n => n.id !== notification.id);
|
|
|
|
}, 5000);
|
|
|
|
}
|
2022-08-31 00:07:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export function useNotifications() {
|
2022-09-09 22:46:53 +00:00
|
|
|
return {
|
|
|
|
notifications,
|
|
|
|
dropNotification: (idx: number) => notifications.value.splice(idx, 1),
|
|
|
|
};
|
2022-08-31 00:07:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export function useNotifier() {
|
2022-09-09 22:46:53 +00:00
|
|
|
return {
|
|
|
|
success: (message: string) => {
|
|
|
|
addNotification({
|
|
|
|
id: useId(),
|
|
|
|
message,
|
|
|
|
type: "success",
|
|
|
|
});
|
|
|
|
},
|
|
|
|
error: (message: string) => {
|
|
|
|
addNotification({
|
|
|
|
id: useId(),
|
|
|
|
message,
|
|
|
|
type: "error",
|
|
|
|
});
|
|
|
|
},
|
|
|
|
info: (message: string) => {
|
|
|
|
addNotification({
|
|
|
|
id: useId(),
|
|
|
|
message,
|
|
|
|
type: "info",
|
|
|
|
});
|
|
|
|
},
|
|
|
|
};
|
2022-08-31 00:07:21 +00:00
|
|
|
}
|