curo1305
f92d98d067
- toast.js: reactive toasts array, show/dismiss with auto-dismiss via setTimeout - ToastContainer.vue: Options API, Teleport to body, TransitionGroup, data-test attr - type-to-class maps: accentClass/iconName/iconColorClass for success/error/warning/info - App.vue: import and mount <ToastContainer /> after layout div - all 10 tests pass; SettingsAccountTab and TotpEnrollment regressions green
19 lines
498 B
JavaScript
19 lines
498 B
JavaScript
import { ref } from 'vue'
|
|
import { defineStore } from 'pinia'
|
|
|
|
export const useToastStore = defineStore('toast', () => {
|
|
const toasts = ref([])
|
|
|
|
function show(message, type = 'success', duration = 4000) {
|
|
const id = Date.now() + Math.random()
|
|
toasts.value.push({ id, message, type, duration })
|
|
if (duration > 0) setTimeout(() => dismiss(id), duration)
|
|
}
|
|
|
|
function dismiss(id) {
|
|
toasts.value = toasts.value.filter(t => t.id !== id)
|
|
}
|
|
|
|
return { toasts, show, dismiss }
|
|
})
|