Nikolay Tatarinov
337386caa8
- Added Vue plugin to vitest.config.ts for better component testing. - Introduced vitest.setup.ts to expose Vue reactivity and lifecycle methods globally, ensuring compatibility with .vue components. - Updated mock implementations in nuxt-imports.ts to include readonly for improved reactivity handling. - Refactored useMapBookmarks and useToast composables to utilize readonly from Vue for better state management.
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { readonly } from 'vue'
|
|
|
|
export type ToastType = 'success' | 'error' | 'info'
|
|
|
|
export interface Toast {
|
|
id: number
|
|
type: ToastType
|
|
text: string
|
|
}
|
|
|
|
const TOAST_STATE_KEY = 'hnh-map-toasts'
|
|
const DEFAULT_DURATION_MS = 4000
|
|
|
|
let nextId = 0
|
|
|
|
export function useToast() {
|
|
const toasts = useState<Toast[]>(TOAST_STATE_KEY, () => [])
|
|
|
|
function dismiss(id: number) {
|
|
toasts.value = toasts.value.filter((t) => t.id !== id)
|
|
}
|
|
|
|
function show(type: ToastType, text: string, durationMs = DEFAULT_DURATION_MS) {
|
|
const id = ++nextId
|
|
toasts.value = [...toasts.value, { id, type, text }]
|
|
if (durationMs > 0 && import.meta.client) {
|
|
setTimeout(() => dismiss(id), durationMs)
|
|
}
|
|
}
|
|
|
|
return {
|
|
toasts: readonly(toasts),
|
|
success: (text: string, durationMs?: number) => show('success', text, durationMs),
|
|
error: (text: string, durationMs?: number) => show('error', text, durationMs),
|
|
info: (text: string, durationMs?: number) => show('info', text, durationMs),
|
|
dismiss,
|
|
}
|
|
}
|