From 1bd122168c389e0b9cddf0a2f7a671eb2efb87bd Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Mon, 23 Sep 2024 10:42:52 +0330 Subject: [PATCH 1/8] feat: add `useVueSonner` get history of toasts --- packages/hooks.ts | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/hooks.ts b/packages/hooks.ts index f8ca258..3bedbc1 100644 --- a/packages/hooks.ts +++ b/packages/hooks.ts @@ -1,6 +1,8 @@ import { ref, watchEffect } from 'vue' +import type { ToastT } from './types' +import { ToastState } from './state' -export const useIsDocumentHidden = () => { +export function useIsDocumentHidden() { const isDocumentHidden = ref(false) watchEffect(() => { @@ -12,6 +14,36 @@ export const useIsDocumentHidden = () => { }) return { - isDocumentHidden + isDocumentHidden, } } + +export function useVueSonner() { + const activeToasts = ref([]) + + watchEffect((onInvalidate) => { + const unsubscribe = ToastState.subscribe((toast) => { + if ('dismiss' in toast && toast.dismiss) { + return activeToasts.value.filter((t) => t.id !== toast.id); + } + + const existingToastIndex = activeToasts.value.findIndex((t) => t.id === toast.id); + if (existingToastIndex !== -1) { + const updatedToasts = [...activeToasts.value]; + updatedToasts[existingToastIndex] = { ...updatedToasts[existingToastIndex], ...toast }; + + activeToasts.value = updatedToasts + } else { + activeToasts.value = [toast, ...activeToasts.value] + } + }) + + onInvalidate(() => { + unsubscribe() + }) + }) + + return { + activeToasts + } +} \ No newline at end of file From d73988ba4229cefd39b35b56b9ff5a9d65ee030d Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Mon, 23 Sep 2024 10:53:21 +0330 Subject: [PATCH 2/8] feat: new `sonner` changes custom close icon allow awaiting toast.promise new css styles using :where fix and export types --- packages/Toast.vue | 171 ++++++++++++++++++++----------------- packages/Toaster.vue | 192 +++++++++++++++++++++++------------------- packages/component.ts | 2 +- packages/index.ts | 9 +- packages/state.ts | 136 ++++++++++++++++-------------- packages/styles.css | 152 +++++++++++++++------------------ packages/types.ts | 52 +++++++----- 7 files changed, 380 insertions(+), 334 deletions(-) diff --git a/packages/Toast.vue b/packages/Toast.vue index 36f1aaa..2367676 100644 --- a/packages/Toast.vue +++ b/packages/Toast.vue @@ -1,12 +1,13 @@ @@ -67,10 +73,10 @@ @@ -91,9 +97,9 @@ :class=" cn( descriptionClass, - toast.descriptionClass, + toastDescriptionClass, classes?.description, - toast.classes?.description + toast.classes?.description, ) " > @@ -111,15 +117,16 @@