vollstock
f688e3fb17
Add a show function in alertStore so we can use alerts in a defined way everywhere. #12 #33
85 lines
3.0 KiB
Vue
85 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
|
|
// import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
|
|
import type { BreadcrumbItemType } from '@/types';
|
|
import { ref, onMounted } from 'vue';
|
|
import 'vue-sonner/style.css'
|
|
import { Toaster } from 'vue-sonner'
|
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@/components/ui/alert-dialog'
|
|
import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
|
|
import { Button } from '@/components/ui/button'
|
|
import { alertStore } from '@/stores/alertStore';
|
|
|
|
interface Props {
|
|
breadcrumbs?: BreadcrumbItemType[];
|
|
}
|
|
const alert = alertStore()
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
breadcrumbs: () => [],
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
|
|
document.body.classList.add('is-mac')
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Toaster position="top-right" :expand="true" closeButton :visible-toasts="6" :offset="'1rem'" :toastOptions="{
|
|
unstyled: true,
|
|
classes: {
|
|
toast: 'bg-muted rounded-lg w-80 text-sm shadow-lg/20 p-3 pl-5 flex gap-3',
|
|
title: 'font-bold',
|
|
description: 'text-',
|
|
actionButton: 'bg-background hover:bg-accent border-1 rounded shadow text-foreground px-2 h-8 ml-auto whitespace-nowrap',
|
|
cancelButton: '',
|
|
closeButton: 'bg-background hover:bg-accent text-foreground stroke-2 rounded-full w-5 h-5 absolute -left-2 -top-2 flex justify-center items-center shadow-md',
|
|
info: 'text-blue-500 dark:text-blue-400',
|
|
error: 'text-white bg-red-500 dark:bg-red-800',
|
|
success: 'text-green-600 dark:text-green-500',
|
|
warning: 'text-white bg-amber-500! dark:bg-amber-600!',
|
|
}
|
|
}">
|
|
<template #loading-icon>
|
|
<div class="animate-spin">
|
|
<LoaderCircle />
|
|
</div>
|
|
</template>
|
|
<template #success-icon>
|
|
<CircleCheck />
|
|
</template>
|
|
<template #error-icon>
|
|
<Ban />
|
|
</template>
|
|
<template #info-icon>
|
|
<Info />
|
|
</template>
|
|
<template #warning-icon>
|
|
<CircleAlert />
|
|
</template>
|
|
</Toaster>
|
|
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<slot />
|
|
</AppLayout>
|
|
|
|
<AlertDialog v-model:open="alert.open">
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{{ alert.title }}</AlertDialogTitle>
|
|
<AlertDialogDescription v-if="alert.message">{{ alert.message }}</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<Button @click="alert.cancel">{{ alert.cancelText }}</Button>
|
|
<Button :variant="alert.actionVariant" @click="alert.action">{{ alert.actionText }}</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
|
|
|
|
</template>
|