26 lines
677 B
Vue
26 lines
677 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; }
|
||
|
|
</style>
|