Global toast notifications; replace all alert() calls
Add a useToast() composable + a single ToastHost mounted in AppLayout. Convert every alert() across views/components (29 call sites, all error paths) to toast.error, and use toast.success to confirm a warranty refresh. Kills the native "localhost says" dialog and gives consistent, dismissable feedback. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
35
frontend/src/composables/toast.js
Normal file
35
frontend/src/composables/toast.js
Normal file
@@ -0,0 +1,35 @@
|
||||
// Global toast notifications. Import useToast() anywhere and call
|
||||
// toast.success('...') / toast.error('...') / toast.info('...'). A single
|
||||
// <ToastHost /> mounted in AppLayout renders the stack.
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
items: [],
|
||||
})
|
||||
|
||||
let nextId = 1
|
||||
|
||||
function dismiss(id) {
|
||||
const index = state.items.findIndex(t => t.id === id)
|
||||
if (index !== -1) state.items.splice(index, 1)
|
||||
}
|
||||
|
||||
function push(message, type = 'info', duration = 5000) {
|
||||
if (!message) return
|
||||
const id = nextId++
|
||||
state.items.push({ id, message, type })
|
||||
if (duration > 0) {
|
||||
setTimeout(() => dismiss(id), duration)
|
||||
}
|
||||
return id
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
return {
|
||||
items: state.items,
|
||||
dismiss,
|
||||
success: (message, duration) => push(message, 'success', duration),
|
||||
error: (message, duration) => push(message, 'error', duration ?? 8000),
|
||||
info: (message, duration) => push(message, 'info', duration),
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user