78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import CardContent from '~/components/pub/ui/card/CardContent.vue'
|
|
|
|
const route = useRoute()
|
|
const contentFrame = computed(() => route.meta.contentFrame)
|
|
const contentFrameClass = computed(() => {
|
|
switch (contentFrame.value) {
|
|
case 'cf-container-2xl':
|
|
return 'cf-container-2xl'
|
|
case 'cf-container-2xl':
|
|
return 'cf-container-xl'
|
|
case 'cf-container-xl':
|
|
return 'cf-container-lg'
|
|
case 'cf-container-md':
|
|
return 'cf-container-md'
|
|
case 'cf-container-sm':
|
|
return 'cf-container-sm'
|
|
case 'cf-full-width':
|
|
return 'cf-full-width'
|
|
default:
|
|
return 'cf-container-lg'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarProvider>
|
|
<LayoutAppSidebar />
|
|
<SidebarInset>
|
|
<LayoutHeader />
|
|
<div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
|
|
<div v-if="contentFrame !== 'cf-no-frame'">
|
|
<Card>
|
|
<CardContent>
|
|
<slot />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<slot v-else />
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cf-container > *,
|
|
.cf-container-lg > *,
|
|
.cf-container-md > *,
|
|
.cf-container-sm > *,
|
|
.cf-full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.cf-full-width > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.cf-container-2xl > * {
|
|
max-width: 1400px;
|
|
}
|
|
|
|
.cf-container-xl > * {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.cf-container-lg > * {
|
|
max-width: 992px;
|
|
}
|
|
|
|
.cf-container-md > * {
|
|
max-width: 768px;
|
|
}
|
|
|
|
.cf-container-sm > * {
|
|
max-width: 576px;
|
|
}
|
|
</style>
|