Munawwirul Jamal
45 lines
1010 B
Vue
45 lines
1010 B
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
column?: 1 | 2 | 3
|
|
density?: 'default' | 'dense'
|
|
side?: 'default' | 'break'
|
|
position?: 'default' | 'dynamic'
|
|
layout?: 'default' | 'stacked'
|
|
class?: string
|
|
}>(),
|
|
{
|
|
column: 1,
|
|
density: 'default',
|
|
side: 'default',
|
|
position: 'default',
|
|
layout: 'stacked',
|
|
class: '',
|
|
},
|
|
)
|
|
|
|
const widthClass = computed(() => {
|
|
if (props.column === 1) return 'md:w-full pe-4'
|
|
if (props.column === 2) return 'md:w-1/2 pe-4'
|
|
if (props.column === 3) return 'md:w-1/3 pe-4'
|
|
return 'w-full'
|
|
})
|
|
|
|
const wrapperClass = computed(() => [
|
|
'w-full flex-shrink-0',
|
|
widthClass.value,
|
|
|
|
props.layout === 'stacked' ? 'flex flex-col' : 'md:flex',
|
|
|
|
// Only add margin bottom if no custom class overrides it
|
|
props.class?.includes('mb-') ? '' : (props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : 'mb-3'),
|
|
props.class,
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="wrapperClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|