53 lines
1.0 KiB
Vue
53 lines
1.0 KiB
Vue
<template>
|
|
<div :class="gridClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
cols: {
|
|
type: [String, Number],
|
|
default: 1,
|
|
},
|
|
md: {
|
|
type: [String, Number],
|
|
default: null,
|
|
},
|
|
lg: {
|
|
type: [String, Number],
|
|
default: null,
|
|
},
|
|
gap: {
|
|
type: [String, Number],
|
|
default: 6,
|
|
},
|
|
})
|
|
|
|
const colMap: Record<string, string> = {
|
|
'1': 'grid-cols-1',
|
|
'2': 'grid-cols-2',
|
|
'3': 'grid-cols-3',
|
|
'4': 'grid-cols-4',
|
|
}
|
|
|
|
const gapMap: Record<string, string> = {
|
|
'4': 'gap-4',
|
|
'6': 'gap-6',
|
|
'8': 'gap-8',
|
|
}
|
|
|
|
const gridClass = computed(() => {
|
|
const baseCols = colMap[String(props.cols)] || colMap['1']
|
|
const mdClass = props.md ? colMap[String(props.md)] : ''
|
|
const lgClass = props.lg ? colMap[String(props.lg)] : ''
|
|
const gapClass = gapMap[String(props.gap)] || gapMap['6']
|
|
|
|
const classes = ['grid', baseCols, gapClass]
|
|
if (mdClass) classes.push(`md:${mdClass}`)
|
|
if (lgClass) classes.push(`lg:${lgClass}`)
|
|
|
|
return classes.join(' ')
|
|
})
|
|
</script>
|