78 lines
2.6 KiB
Vue
78 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
// ---------- Imports ----------
|
|
import { computed, useSlots } from 'vue'
|
|
|
|
// Types
|
|
const props = defineProps({
|
|
mode: { type: String, default: 'entry' },
|
|
gridPoint: { type: String, default: 'lg' },
|
|
cellFlex: { type: Boolean, default: true },
|
|
cellFlexPoint: { type: String, default: 'md' },
|
|
labelSize: { type: String, default: 'medium' },
|
|
labelSizePoint: { type: String, default: 'md' },
|
|
colCount: { type: Number, default: 1 },
|
|
defaultClass: { type: String, default: 'mb-5' },
|
|
class: { type: String, default: '' },
|
|
})
|
|
|
|
const slots = useSlots()
|
|
|
|
// Utility functions (minimal, can be expanded)
|
|
const breakpoints = ['grid', 'sm:grid', 'md:grid', 'lg:grid', 'xl:grid', '2xl:grid']
|
|
const getBreakpointIdx = (point: string) => {
|
|
return Math.max(0, breakpoints.findIndex(bp => bp.startsWith(point)))
|
|
}
|
|
const labelSizes = ['small', 'medium', 'large', 'xl', '2xl']
|
|
const getLabelSizeIdx = (size: string) => {
|
|
return Math.max(0, labelSizes.findIndex(s => s === size))
|
|
}
|
|
|
|
const settingClass = computed(() => {
|
|
const breakPointIdx = getBreakpointIdx(props.gridPoint)
|
|
let cls = breakpoints[breakPointIdx]
|
|
cls += ' gap-4 xl:gap-5 ' + [
|
|
'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
|
|
'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
|
|
][props.colCount - 1]
|
|
cls += breakPointIdx === 0 ? ' gap-3 ' : ''
|
|
cls += ' ' + [
|
|
' [&_.cell]:!mb-0',
|
|
' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
|
|
' [&_.cell]:mb-2.5 [&_.cell]:md:mb-0',
|
|
' [&_.cell]:mb-2.5 [&_.cell]:lg:mb-0',
|
|
' [&_.cell]:mb-3 [&_.cell]:xl:mb-0',
|
|
' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
|
|
][breakPointIdx]
|
|
if (props.cellFlex) {
|
|
cls += ' ' + [
|
|
'[&_.cell]:flex',
|
|
'[&_.cell]:sm:flex',
|
|
'[&_.cell]:md:flex',
|
|
'[&_.cell]:lg:flex',
|
|
'[&_.cell]:xl:flex',
|
|
'[&_.cell]:2xl:flex',
|
|
][getBreakpointIdx(props.cellFlexPoint)]
|
|
cls += ' [&_.label]:sm:pt-2 ' + [
|
|
'[&_.label]:md:w-12 [&_.label]:xl:w-20',
|
|
'[&_.label]:md:w-16 [&_.label]:xl:w-24',
|
|
'[&_.label]:md:w-24 [&_.label]:xl:w-32',
|
|
'[&_.label]:md:w-32 [&_.label]:xl:w-40',
|
|
'[&_.label]:md:w-44 [&_.label]:xl:w-52',
|
|
][getLabelSizeIdx(props.labelSize)]
|
|
}
|
|
cls += ' [&_.height-default]:pt-2 [&_.height-default]:2xl:!pt-1.5 [&_.height-compact]:!pt-1 '
|
|
cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
|
|
cls += '[&_label]:text-xs [&_label]:xl:text-sm'
|
|
return cls
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="`block ${props.defaultClass} ${settingClass} ${props.class}`">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|