mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-05 17:22:28 +08:00
48 lines
949 B
Vue
48 lines
949 B
Vue
<template>
|
|
<div :class="containerClasses">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
|
|
padding?: 'none' | 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
maxWidth: '2xl',
|
|
padding: 'md',
|
|
})
|
|
|
|
const containerClasses = computed(() => {
|
|
const classes = ['w-full mx-auto']
|
|
|
|
// Max width
|
|
const maxWidthMap = {
|
|
sm: 'max-w-screen-sm',
|
|
md: 'max-w-screen-md',
|
|
lg: 'max-w-screen-lg',
|
|
xl: 'max-w-screen-xl',
|
|
'2xl': 'max-w-screen-2xl',
|
|
full: 'max-w-full',
|
|
}
|
|
classes.push(maxWidthMap[props.maxWidth])
|
|
|
|
// Padding
|
|
const paddingMap = {
|
|
none: '',
|
|
sm: 'px-4 py-4',
|
|
md: 'px-4 py-6 sm:px-6 lg:px-8',
|
|
lg: 'px-6 py-8 sm:px-8 lg:px-12',
|
|
}
|
|
if (props.padding !== 'none') {
|
|
classes.push(paddingMap[props.padding])
|
|
}
|
|
|
|
return classes.join(' ')
|
|
})
|
|
</script>
|