Abizrh
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
column?: 1 | 2 | 3
|
|
density?: 'default' | 'dense'
|
|
side?: 'default' | 'break'
|
|
position?: 'default' | 'dynamic'
|
|
class?: string
|
|
}>(),
|
|
{
|
|
column: 1,
|
|
density: 'default',
|
|
side: 'default',
|
|
position: 'default',
|
|
class: '',
|
|
},
|
|
)
|
|
|
|
const wrapperClass = computed(() => [
|
|
'w-full flex-shrink-0',
|
|
|
|
props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
|
|
props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
|
|
props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
|
|
props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
|
|
props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
|
|
|
|
props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
|
|
|
|
props.side !== 'break' ? 'md:flex' : '',
|
|
|
|
props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
|
|
|
|
props.class,
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="wrapperClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|