Abizrh
87 lines
1.7 KiB
Vue
87 lines
1.7 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 classVal = computed(() => {
|
|
let val = ''
|
|
|
|
if (props.column === 2) val += 'column-2 '
|
|
else if (props.column === 3) val += 'column-3 '
|
|
else val += 'column-1 '
|
|
|
|
if (props.density === 'dense') val += 'density-dense '
|
|
|
|
if (props.side === 'break') val += 'side-break '
|
|
|
|
if (props.position === 'dynamic') val += 'position-dynamic '
|
|
|
|
return (val + (props.class || '')).trim()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="[
|
|
column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
|
|
density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
|
|
side !== 'break' ? 'md:flex' : '',
|
|
position === 'dynamic' ? 'ps-4' : '',
|
|
props.class,
|
|
]"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.column-1,
|
|
.column-2,
|
|
.column-3 {
|
|
@apply w-full flex-shrink-0;
|
|
}
|
|
|
|
.column-1:not(.density-dense):not(:last-child),
|
|
.column-2:not(.density-dense):not(:last-child),
|
|
.column-3:not(.density-dense):not(:last-child) {
|
|
@apply mb-2 md:mb-2.5 xl:mb-3;
|
|
}
|
|
|
|
.column-2:not(.position-dynamic),
|
|
.column-3:not(.position-dynamic) {
|
|
@apply pe-4;
|
|
}
|
|
|
|
.column-2:is(.position-dynamic),
|
|
.column-3:is(.position-dynamic) {
|
|
@apply ps-4;
|
|
}
|
|
|
|
.column-1:not(.side-break),
|
|
.column-2:not(.side-break),
|
|
.column-3:not(.side-break) {
|
|
@apply md:flex;
|
|
}
|
|
|
|
.column-2:not(.side-break) {
|
|
@apply md:w-1/2;
|
|
}
|
|
|
|
.column-3:not(.side-break) {
|
|
@apply md:w-1/3;
|
|
}
|
|
</style>
|