feat: LaoutContained

wp-content/themes/moonshine/app/components/builder/LayoutContained.fragment.gql

@@ -0,0 +1,5 @@
+fragment LayoutContained on GroupLayoutContained_Fields {
+  container
+  verticalPadding
+  bgColor
+}

wp-content/themes/moonshine/app/components/builder/LayoutContained.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { LayoutContainedFragment } from "#graphql/typed-documents";
+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>