62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { tv } from "tailwind-variants";
|
|
|
|
import type { AcfLayoutFragment } from "#graphql/types";
|
|
|
|
const props = defineProps<{ layout: AcfLayoutFragment }>();
|
|
|
|
const tvLayoutVariants = tv({
|
|
slots: {
|
|
base: "",
|
|
inner: "",
|
|
},
|
|
variants: {
|
|
display: {
|
|
block: { inner: "block" },
|
|
flex: { inner: "flex flex-col gap-6" },
|
|
grid: { inner: "grid" },
|
|
},
|
|
|
|
color: {
|
|
default: { base: "bg-default" },
|
|
muted: { base: "bg-muted" },
|
|
inverted: { base: "bg-inverted text-inverted" },
|
|
primary: { base: "bg-primary text-inverted" },
|
|
},
|
|
|
|
container: {
|
|
default: { inner: "container" },
|
|
xl: { inner: "container-xl" },
|
|
lg: { inner: "container-lg" },
|
|
md: { inner: "container-md" },
|
|
sm: { inner: "container-sm" },
|
|
fluid: { inner: "container-fluid" },
|
|
none: { inner: "container-none" },
|
|
},
|
|
|
|
verticalPadding: {
|
|
none: { base: "py-0" },
|
|
sm: { base: "py-6" },
|
|
md: { base: "py-12" },
|
|
lg: { base: "py-24" },
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
display: "block",
|
|
color: "default",
|
|
container: "default",
|
|
verticalPadding: "md",
|
|
},
|
|
});
|
|
|
|
const { base, inner } = tvLayoutVariants(props.layout);
|
|
</script>
|
|
|
|
<template>
|
|
<section :class="base()">
|
|
<div :class="inner()">
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
</template>
|