119 lines
3.6 KiB
Vue
119 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3'
|
|
import AppSidebar from '@/components/AppSidebar.vue';
|
|
import { onMounted } from 'vue';
|
|
import 'vue-sonner/style.css'
|
|
import { Toaster } from 'vue-sonner'
|
|
import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
|
|
import { Button } from '@/components/ui/button'
|
|
import { SidebarProvider } from '@/components/ui/sidebar';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
|
|
import { alertStore } from '@/stores/alertStore';
|
|
|
|
const isOpen = usePage().props.sidebarOpen;
|
|
const alert = alertStore()
|
|
const props = defineProps<{
|
|
title: string;
|
|
}>();
|
|
|
|
onMounted(() => {
|
|
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
|
|
document.body.classList.add('is-mac')
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<Head :title="props.title" />
|
|
|
|
<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: '',
|
|
description: '',
|
|
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>
|
|
|
|
<div class="overflow-x-auto p-4 lg:p-8 lg:pl-4 print:bg-transparent print:p-0 print:m-0">
|
|
|
|
<SidebarProvider :default-open="isOpen">
|
|
<AppSidebar />
|
|
|
|
<main class="w-full overflow-x-hidden">
|
|
<slot />
|
|
</main>
|
|
</SidebarProvider>
|
|
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<style>
|
|
@media print {
|
|
|
|
header,
|
|
[data-slot="sidebar"] {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
margin: 25mm;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
[data-slot-sidebar-wrapper] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
main {
|
|
margin: 0;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
</style> |