51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { LayoutContainedFragment } from "#graphql/operations";
|
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
|
|
const props = defineProps<LayoutContainedFragment>();
|
|
|
|
const layoutWrapperVariants = tv({
|
|
slots: {
|
|
base: "",
|
|
inner: "",
|
|
},
|
|
variants: {
|
|
container: {
|
|
default: { inner: "container" },
|
|
lg: { inner: "container-lg" },
|
|
xl: { inner: "container-xl" },
|
|
fluid: { inner: "container-fluid" },
|
|
none: { inner: "container-none" },
|
|
},
|
|
verticalPadding: {
|
|
sm: { base: "py-3" },
|
|
md: { base: "py-6" },
|
|
lg: { base: "py-12" },
|
|
},
|
|
bgColor: {
|
|
default: { base: "bg-default" },
|
|
muted: { base: "bg-muted" },
|
|
inverted: { base: "bg-inverted text-inverted" },
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
container: "default",
|
|
verticalPadding: "md",
|
|
bgColor: "default",
|
|
},
|
|
});
|
|
const { base, inner } = layoutWrapperVariants({
|
|
container: props.container[0],
|
|
verticalPadding: props.verticalPadding[0],
|
|
bgColor: props.bgColor[0],
|
|
} as VariantProps<typeof layoutWrapperVariants>);
|
|
</script>
|
|
|
|
<template>
|
|
<section :class="base()">
|
|
<div :class="inner()">
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
</template>
|