Caramel-CRM/resources/js/layouts/AppLayout.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>{{ alert.message }}</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <Button v-if="alert.onCancel" @click="alert.onCancel">{{ alert.cancelText }}</Button>
                <Button :variant="alert.actionVariant" v-if="alert.onAction" @click="alert.onAction">{{
                    alert.actionText
                }}</Button>
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>



</template>