Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
118 lines
2.2 KiB
Vue
118 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
reference?: 'self' | 'parent'
|
|
break?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
|
|
fractions?: '1/1' | '1/2' | '1/3' | '2/1' | '3/1'
|
|
}>()
|
|
|
|
const b = props.break ?? `undefined`
|
|
|
|
const fr = {
|
|
undefined: ``,
|
|
sm: `@sm:flex-row`,
|
|
md: `@md:flex-row`,
|
|
lg: `@lg:flex-row`,
|
|
xl: `@xl:flex-row`,
|
|
'2xl': `@2xl:flex-row`,
|
|
}
|
|
|
|
const is = {
|
|
undefined: ``,
|
|
sm: `@sm:items-stretch`,
|
|
md: `@md:items-stretch`,
|
|
lg: `@lg:items-stretch`,
|
|
xl: `@xl:items-stretch`,
|
|
'2xl': `@2xl:items-stretch`,
|
|
}
|
|
|
|
const f1 = {
|
|
undefined: ``,
|
|
sm: `@sm:flex-[1_1_0]`,
|
|
md: `@md:flex-[1_1_0]`,
|
|
lg: `@lg:flex-[1_1_0]`,
|
|
xl: `@xl:flex-[1_1_0]`,
|
|
'2xl': `@2xl:flex-[1_1_0]`,
|
|
}
|
|
|
|
const f2 = {
|
|
undefined: ``,
|
|
sm: `@sm:flex-[2_1_0]`,
|
|
md: `@md:flex-[2_1_0]`,
|
|
lg: `@lg:flex-[2_1_0]`,
|
|
xl: `@xl:flex-[2_1_0]`,
|
|
'2xl': `@2xl:flex-[2_1_0]`,
|
|
}
|
|
|
|
const f3 = {
|
|
undefined: ``,
|
|
sm: `@sm:flex-[3_1_0]`,
|
|
md: `@md:flex-[3_1_0]`,
|
|
lg: `@lg:flex-[3_1_0]`,
|
|
xl: `@xl:flex-[3_1_0]`,
|
|
'2xl': `@2xl:flex-[3_1_0]`,
|
|
}
|
|
|
|
const classes = useStyling(
|
|
'containerPair',
|
|
{
|
|
slots: {
|
|
base: 'w-full',
|
|
container: `w-full flex flex-col ${fr[b]} ${is[b]}`,
|
|
left: 'min-w-0 w-full',
|
|
right: 'min-w-0 w-full',
|
|
},
|
|
variants: {
|
|
reference: {
|
|
self: {
|
|
base: '@container',
|
|
},
|
|
parent: {},
|
|
},
|
|
fractions: {
|
|
'1/1': {
|
|
left: f1[b],
|
|
right: f1[b],
|
|
},
|
|
'1/2': {
|
|
left: f1[b],
|
|
right: f2[b],
|
|
},
|
|
'1/3': {
|
|
left: f1[b],
|
|
right: f3[b],
|
|
},
|
|
'2/1': {
|
|
left: f2[b],
|
|
right: f1[b],
|
|
},
|
|
'3/1': {
|
|
left: f3[b],
|
|
right: f1[b],
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
reference: 'self',
|
|
fractions: '1/1',
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes.base">
|
|
<div :class="classes.container">
|
|
<div v-if="$slots.left" :class="classes.left">
|
|
<slot name="left" />
|
|
</div>
|
|
|
|
<div v-if="$slots.right" :class="classes.right">
|
|
<slot name="right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|