Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
274 lines
6.1 KiB
Vue
274 lines
6.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
hero?: 'top' | 'left'
|
|
buttons?: 'hero' | 'bottom' | 'right'
|
|
break?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
|
|
buttonsBreak?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
|
|
}>()
|
|
|
|
const b = props.break ?? 'undefined'
|
|
const bb = props.buttonsBreak ?? 'undefined'
|
|
|
|
const rsf = {
|
|
undefined: '',
|
|
sm: '@sm:row-span-full',
|
|
md: '@md:row-span-full',
|
|
lg: '@lg:row-span-full',
|
|
xl: '@xl:row-span-full',
|
|
'2xl': '@2xl:row-span-full',
|
|
'3xl': '@3xl:row-span-full',
|
|
'4xl': '@4xl:row-span-full',
|
|
'5xl': '@5xl:row-span-full',
|
|
}
|
|
|
|
const csf = {
|
|
undefined: '',
|
|
sm: '@sm:col-span-full',
|
|
md: '@md:col-span-full',
|
|
lg: '@lg:col-span-full',
|
|
xl: '@xl:col-span-full',
|
|
'2xl': '@2xl:col-span-full',
|
|
'3xl': '@3xl:col-span-full',
|
|
'4xl': '@4xl:col-span-full',
|
|
'5xl': '@5xl:col-span-full',
|
|
}
|
|
|
|
const r1 = {
|
|
undefined: '',
|
|
sm: '@sm:row-1',
|
|
md: '@md:row-1',
|
|
lg: '@lg:row-1',
|
|
xl: '@xl:row-1',
|
|
'2xl': '@2xl:row-1',
|
|
'3xl': '@3xl:row-1',
|
|
'4xl': '@4xl:row-1',
|
|
'5xl': '@5xl:row-1',
|
|
}
|
|
|
|
const r2 = {
|
|
undefined: '',
|
|
sm: '@sm:row-2',
|
|
md: '@md:row-2',
|
|
lg: '@lg:row-2',
|
|
xl: '@xl:row-2',
|
|
'2xl': '@2xl:row-2',
|
|
'3xl': '@3xl:row-2',
|
|
'4xl': '@4xl:row-2',
|
|
'5xl': '@5xl:row-2',
|
|
}
|
|
|
|
const c1 = {
|
|
undefined: '',
|
|
sm: '@sm:col-1',
|
|
md: '@md:col-1',
|
|
lg: '@lg:col-1',
|
|
xl: '@xl:col-1',
|
|
'2xl': '@2xl:col-1',
|
|
'3xl': '@3xl:col-1',
|
|
'4xl': '@4xl:col-1',
|
|
'5xl': '@5xl:col-1',
|
|
}
|
|
|
|
const c2 = {
|
|
undefined: '',
|
|
sm: '@sm:col-2',
|
|
md: '@md:col-2',
|
|
lg: '@lg:col-2',
|
|
xl: '@xl:col-2',
|
|
'2xl': '@2xl:col-2',
|
|
'3xl': '@3xl:col-2',
|
|
'4xl': '@4xl:col-2',
|
|
'5xl': '@5xl:col-2',
|
|
}
|
|
|
|
const c3 = {
|
|
undefined: '',
|
|
sm: '@sm:col-3',
|
|
md: '@md:col-3',
|
|
lg: '@lg:col-3',
|
|
xl: '@xl:col-3',
|
|
'2xl': '@2xl:col-3',
|
|
'3xl': '@3xl:col-3',
|
|
'4xl': '@4xl:col-3',
|
|
'5xl': '@5xl:col-3',
|
|
}
|
|
|
|
const gra1 = {
|
|
undefined: '',
|
|
sm: '@sm:grid-rows-[auto_1fr]',
|
|
md: '@md:grid-rows-[auto_1fr]',
|
|
lg: '@lg:grid-rows-[auto_1fr]',
|
|
xl: '@xl:grid-rows-[auto_1fr]',
|
|
'2xl': '@2xl:grid-rows-[auto_1fr]',
|
|
'3xl': '@3xl:grid-rows-[auto_1fr]',
|
|
'4xl': '@4xl:grid-rows-[auto_1fr]',
|
|
'5xl': '@5xl:grid-rows-[auto_1fr]',
|
|
}
|
|
|
|
const gc1m = {
|
|
undefined: '',
|
|
sm: '@sm:grid-cols-[1fr_auto]',
|
|
md: '@md:grid-cols-[1fr_auto]',
|
|
lg: '@lg:grid-cols-[1fr_auto]',
|
|
xl: '@xl:grid-cols-[1fr_auto]',
|
|
'2xl': '@2xl:grid-cols-[1fr_auto]',
|
|
'3xl': '@3xl:grid-cols-[1fr_auto]',
|
|
'4xl': '@4xl:grid-cols-[1fr_auto]',
|
|
'5xl': '@5xl:grid-cols-[1fr_auto]',
|
|
}
|
|
|
|
const gr1m = {
|
|
undefined: '',
|
|
sm: '@sm:grid-rows-[1fr_auto]',
|
|
md: '@md:grid-rows-[1fr_auto]',
|
|
lg: '@lg:grid-rows-[1fr_auto]',
|
|
xl: '@xl:grid-rows-[1fr_auto]',
|
|
'2xl': '@2xl:grid-rows-[1fr_auto]',
|
|
'3xl': '@3xl:grid-rows-[1fr_auto]',
|
|
'4xl': '@4xl:grid-rows-[1fr_auto]',
|
|
'5xl': '@5xl:grid-rows-[1fr_auto]',
|
|
}
|
|
|
|
const gca1 = {
|
|
undefined: '',
|
|
sm: '@sm:grid-cols-[auto_1fr]',
|
|
md: '@md:grid-cols-[auto_1fr]',
|
|
lg: '@lg:grid-cols-[auto_1fr]',
|
|
xl: '@xl:grid-cols-[auto_1fr]',
|
|
'2xl': '@2xl:grid-cols-[auto_1fr]',
|
|
'3xl': '@3xl:grid-cols-[auto_1fr]',
|
|
'4xl': '@4xl:grid-cols-[auto_1fr]',
|
|
'5xl': '@5xl:grid-cols-[auto_1fr]',
|
|
}
|
|
|
|
const gr1 = {
|
|
undefined: '',
|
|
sm: '@sm:grid-rows-1',
|
|
md: '@md:grid-rows-1',
|
|
lg: '@lg:grid-rows-1',
|
|
xl: '@xl:grid-rows-1',
|
|
'2xl': '@2xl:grid-rows-1',
|
|
'3xl': '@3xl:grid-rows-1',
|
|
'4xl': '@4xl:grid-rows-1',
|
|
'5xl': '@5xl:grid-rows-1',
|
|
}
|
|
|
|
const gca1m = {
|
|
undefined: '',
|
|
sm: '@sm:grid-cols-[auto_1fr_auto]',
|
|
md: '@md:grid-cols-[auto_1fr_auto]',
|
|
lg: '@lg:grid-cols-[auto_1fr_auto]',
|
|
xl: '@xl:grid-cols-[auto_1fr_auto]',
|
|
'2xl': '@2xl:grid-cols-[auto_1fr_auto]',
|
|
'3xl': '@3xl:grid-cols-[auto_1fr_auto]',
|
|
'4xl': '@4xl:grid-cols-[auto_1fr_auto]',
|
|
'5xl': '@5xl:grid-cols-[auto_1fr_auto]',
|
|
}
|
|
|
|
const classes = useStyling(
|
|
'containerHeroContentButton',
|
|
{
|
|
slots: {
|
|
base: 'w-full @container',
|
|
grid: 'w-full grid grid-rows-[auto_1fr_auto] grid-cols-1',
|
|
hero: 'row-1',
|
|
content: 'row-2',
|
|
buttons: 'flex row-3',
|
|
},
|
|
variants: {
|
|
hero: {
|
|
top: {},
|
|
left: {},
|
|
},
|
|
buttons: {
|
|
hero: {},
|
|
bottom: {},
|
|
right: {},
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
hero: 'top',
|
|
buttons: 'hero',
|
|
class: {
|
|
grid: `${gra1[bb]} ${gc1m[bb]}`,
|
|
hero: `${c1[bb]}`,
|
|
content: `${csf[bb]}`,
|
|
buttons: `${r1[bb]} ${c2[bb]}`,
|
|
},
|
|
},
|
|
{
|
|
hero: 'top',
|
|
buttons: 'bottom',
|
|
class: {},
|
|
},
|
|
{
|
|
hero: 'top',
|
|
buttons: 'right',
|
|
class: {
|
|
grid: `${gra1[bb]} ${gc1m[bb]}`,
|
|
hero: `${csf[bb]}`,
|
|
content: `${c1[bb]}`,
|
|
buttons: `${r2[bb]} ${c2[bb]}`,
|
|
},
|
|
},
|
|
{
|
|
hero: 'left',
|
|
buttons: 'hero',
|
|
class: {
|
|
grid: `${gr1m[b]} ${gr1m[bb]} ${gca1[b]} ${gca1[bb]}`,
|
|
hero: `${r1[b]} ${c1[b]}`,
|
|
content: `${r1[b]} ${rsf[bb]} ${c2[b]} ${c2[bb]}`,
|
|
buttons: `${r2[b]} ${r2[bb]} ${csf[b]} ${c1[bb]}`,
|
|
},
|
|
},
|
|
{
|
|
hero: 'left',
|
|
buttons: 'bottom',
|
|
class: {
|
|
grid: `${gr1m[b]} ${gr1m[bb]} ${gca1[b]} ${gca1[bb]}`,
|
|
hero: `${r1[b]} ${rsf[bb]} ${c1[b]} ${c1[bb]}`,
|
|
content: `${r1[b]} ${r1[bb]} ${c2[b]} ${c2[bb]}`,
|
|
buttons: `${r2[b]} ${r2[bb]} ${csf[b]} ${c2[bb]}`,
|
|
},
|
|
},
|
|
{
|
|
hero: 'left',
|
|
buttons: 'right',
|
|
class: {
|
|
grid: `${gr1m[b]} ${gr1[bb]} ${gca1[b]} ${gca1m[bb]}`,
|
|
hero: `${r1[b]} ${r1[bb]} ${c1[b]} ${c1[bb]}`,
|
|
content: `${r1[b]} ${r1[bb]} ${c2[b]} ${c2[bb]}`,
|
|
buttons: `${r2[b]} ${r1[bb]} ${csf[b]} ${c3[bb]}`,
|
|
},
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
hero: 'left',
|
|
buttons: 'bottom',
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes.base">
|
|
<div :class="classes.grid">
|
|
<div :class="classes.hero">
|
|
<slot name="hero" />
|
|
</div>
|
|
|
|
<div :class="classes.content">
|
|
<slot />
|
|
</div>
|
|
|
|
<div :class="classes.buttons" v-if="$slots.buttons">
|
|
<slot name="buttons" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|