refactor: improvemets
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* Simple snackbar/toast notification composable
|
||||
* Uses Vuetify's snackbar component
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
import { nextTick, ref } from 'vue'
|
||||
|
||||
export interface SnackbarOptions {
|
||||
message: string
|
||||
@@ -10,21 +10,60 @@ export interface SnackbarOptions {
|
||||
timeout?: number
|
||||
}
|
||||
|
||||
interface SnackbarState {
|
||||
message: string
|
||||
color: string
|
||||
timeout: number
|
||||
}
|
||||
|
||||
const snackbarVisible = ref(false)
|
||||
const snackbarMessage = ref('')
|
||||
const snackbarColor = ref<string>('info')
|
||||
const snackbarTimeout = ref(3000)
|
||||
const snackbarQueue = ref<SnackbarState[]>([])
|
||||
|
||||
function showNextSnackbar() {
|
||||
if (snackbarVisible.value || snackbarQueue.value.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const nextSnackbar = snackbarQueue.value.shift()
|
||||
|
||||
if (!nextSnackbar) {
|
||||
return
|
||||
}
|
||||
|
||||
snackbarMessage.value = nextSnackbar.message
|
||||
snackbarColor.value = nextSnackbar.color
|
||||
snackbarTimeout.value = nextSnackbar.timeout
|
||||
snackbarVisible.value = true
|
||||
}
|
||||
|
||||
export function useSnackbar() {
|
||||
const showSnackbar = (options: SnackbarOptions) => {
|
||||
snackbarMessage.value = options.message
|
||||
snackbarColor.value = options.color || 'info'
|
||||
snackbarTimeout.value = options.timeout || 3000
|
||||
snackbarVisible.value = true
|
||||
|
||||
const notification = {
|
||||
message: options.message,
|
||||
color: options.color || 'info',
|
||||
timeout: options.timeout || 3000,
|
||||
}
|
||||
|
||||
if (!snackbarVisible.value && snackbarQueue.value.length === 0) {
|
||||
snackbarMessage.value = notification.message
|
||||
snackbarColor.value = notification.color
|
||||
snackbarTimeout.value = notification.timeout
|
||||
snackbarVisible.value = true
|
||||
return
|
||||
}
|
||||
|
||||
snackbarQueue.value = [...snackbarQueue.value, notification]
|
||||
}
|
||||
|
||||
const hideSnackbar = () => {
|
||||
snackbarVisible.value = false
|
||||
void nextTick(() => {
|
||||
showNextSnackbar()
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -32,6 +71,7 @@ export function useSnackbar() {
|
||||
snackbarMessage,
|
||||
snackbarColor,
|
||||
snackbarTimeout,
|
||||
snackbarQueue,
|
||||
showSnackbar,
|
||||
hideSnackbar,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user