34 lines
828 B
Vue
34 lines
828 B
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
as?: string
|
|
width?: 'full' | 'comfortable'
|
|
spacing?: 'compact' | 'normal' | 'relaxed'
|
|
}>(), {
|
|
as: 'main',
|
|
width: 'full',
|
|
spacing: 'normal',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="as" class="admin-page" :class="[`is-width-${width}`, `is-spacing-${spacing}`]">
|
|
<slot />
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.admin-page { display: flex; min-width: 0; flex-direction: column; margin: 0 auto; }
|
|
.admin-page.is-width-comfortable { width: min(100%, 1440px); }
|
|
.admin-page.is-spacing-compact { gap: 12px; }
|
|
.admin-page.is-spacing-normal { gap: 16px; }
|
|
.admin-page.is-spacing-relaxed { gap: 20px; }
|
|
|
|
@media (min-width: 1920px) {
|
|
.admin-page.is-spacing-normal { gap: 12px; }
|
|
|
|
.admin-page.is-width-comfortable {
|
|
width: min(100%, 1920px);
|
|
}
|
|
}
|
|
</style>
|