Create snackbar component and composable

This commit is contained in:
Maciej Pędzich 2023-05-26 12:25:02 +02:00
parent 6f1ac8a99e
commit 3cd08d7daf
2 changed files with 34 additions and 0 deletions

View File

@ -0,0 +1,12 @@
<script lang="ts" setup>
import { useSnackbar } from '@/composables/useSnackbar';
const { visible, color, title, message } = useSnackbar();
</script>
<template>
<v-snackbar v-model="visible" :color="color" vertical>
<h6 class="text-h6 mb-1">{{ title }}</h6>
<p class="text-body-1">{{ message }}</p>
</v-snackbar>
</template>

View File

@ -0,0 +1,22 @@
import { reactive, toRefs } from 'vue';
interface Snackbar {
visible: boolean;
color: '' | 'error' | 'success';
title: string;
message: string;
}
const snackbar = reactive<Snackbar>({
color: '',
title: '',
message: '',
visible: false
});
export function useSnackbar() {
const showSnackbar = (options: Omit<Snackbar, 'visible'>) =>
Object.assign(snackbar, { ...options, visible: true });
return { ...toRefs(snackbar), showSnackbar };
}