mirror of
https://github.com/maciejpedzich/racemash.git
synced 2024-11-10 00:53:03 +01:00
Create snackbar component and composable
This commit is contained in:
parent
6f1ac8a99e
commit
3cd08d7daf
12
src/components/ui/Snackbar.vue
Normal file
12
src/components/ui/Snackbar.vue
Normal 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>
|
22
src/composables/useSnackbar.ts
Normal file
22
src/composables/useSnackbar.ts
Normal 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 };
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user