pascalmartineau/headless-2026-03
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Initial AcfLayout field

Browse Source
This commit is contained in:
Pascal Martineau
2026-03-30 08:20:02 -04:00
parent 46964ea1d3
commit d47c518565
9 changed files with 179 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
wp-content/themes/headless/acf-json/group_layout_color.json
View File

@@ -50,9 +50,7 @@
"description": "",
"show_in_rest": 0,
"display_title": "",
"acfe_autosync": [
"json"
],
"acfe_autosync": ["json"],
"acfe_form": 0,
"show_in_graphql": 1,
"graphql_field_name": "GroupLayoutColor",

8
wp-content/themes/headless/acf-json/group_layout_padding.json
View File

@@ -18,9 +18,9 @@
},
"choices": {
"none": "Aucun",
"sm": "Petit (12px)",
"md": "Medium (24px)",
"lg": "Grand (48px)"
"sm": "Petit (24px)",
"md": "Medium (48px)",
"lg": "Grand (96px)"
},
"default_value": "md",
"return_format": "value",
@@ -60,5 +60,5 @@
"graphql_types": "",
"acfe_meta": "",
"acfe_note": "",
"modified": 1774616314
"modified": 1774873127
}

18
wp-content/themes/headless/app/components/acf/AcfLayout.gql Normal file
View File

@@ -0,0 +1,18 @@
fragment LayoutColor on GroupLayoutColor_Fields {
color @nullToUndefined @enum(values: ["default", "muted", "inverted", "primary"])
}
fragment LayoutContainer on GroupLayoutContainer_Fields {
container @nullToUndefined @enum(values: ["default", "xl", "lg", "md", "sm", "fluid", "none"])
}
fragment LayoutPadding on GroupLayoutPadding_Fields {
verticalPadding @nullToUndefined @enum(values: ["none", "sm", "md", "lg"])
}
fragment AcfLayout on GroupAbstractBuilderSectionsLayoutSettings_Fields {
__typename
...LayoutColor
...LayoutContainer
...LayoutPadding
}

61
wp-content/themes/headless/app/components/acf/AcfLayout.vue Normal file
View File

@@ -0,0 +1,61 @@
<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>

3
wp-content/themes/headless/app/components/sections/SectionProse.gql
View File

@@ -1,3 +1,6 @@
fragment SectionProse on GroupAbstractBuilderSectionsProseLayout {
content
layout: layoutSettings @nonNull {
...AcfLayout
}
}

2
wp-content/themes/headless/app/components/sections/SectionProse.vue
View File

@@ -5,5 +5,7 @@ defineProps<{ section: SectionProseFragment }>();
</script>
<template>
<AcfLayout :layout="section.layout">
<div class="prose" v-html="section.content"></div>
</AcfLayout>
</template>

8
wp-content/themes/headless/nuxt.config.ts
View File

@@ -54,7 +54,13 @@ export default defineNuxtConfig({
vite: {
optimizeDeps: {
include: ["@vue/devtools-core", "@vue/devtools-kit", "es-toolkit", "zod"],
include: [
"@vue/devtools-core",
"@vue/devtools-kit",
"es-toolkit",
"tailwind-variants",
"zod",
],
},
},
});

5
wp-content/themes/headless/package.json
View File

@@ -19,15 +19,18 @@
"dependencies": {
"@iconify-json/cib": "^1.2.3",
"@iconify-json/lucide": "^1.2.100",
"@lewebsimple/nuxt-graphql": "^0.7.7",
"@lewebsimple/graphql-codegen-zod": "^0.2.2",
"@lewebsimple/nuxt-graphql": "^0.7.8",
"@nuxt/ui": "^4.6.0",
"@nuxtjs/seo": "^4.0.2",
"defu": "^6.1.4",
"es-toolkit": "^1.45.1",
"graphql-codegen-zod": "link: @lewebsimple/graphql-codegen-zod",
"jwt-decode": "^4.0.0",
"nuxt": "^4.4.2",
"nuxt-auth-utils": "^0.5.29",
"nuxt-svgo": "^4.2.6",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.2.2",
"vue": "^3.5.31",
"vue-router": "^4.6.4"

28
wp-content/themes/headless/pnpm-lock.yaml generated
View File

@@ -14,9 +14,12 @@ importers:
'@iconify-json/lucide':
specifier: ^1.2.100
version: 1.2.100
'@lewebsimple/graphql-codegen-zod':
specifier: ^0.2.2
version: 0.2.2(graphql@16.13.1)(zod@4.3.6)
'@lewebsimple/nuxt-graphql':
specifier: ^0.7.7
version: 0.7.7(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)
specifier: ^0.7.8
version: 0.7.8(@lewebsimple/graphql-codegen-zod@0.2.2(graphql@16.13.1)(zod@4.3.6))(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)
'@nuxt/ui':
specifier: ^4.6.0
version: 4.6.0(@tiptap/extensions@3.21.0(@tiptap/core@3.21.0(@tiptap/pm@3.21.0))(@tiptap/pm@3.21.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.7)(y-protocols@1.0.7(yjs@13.6.30))(yjs@13.6.30))(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.10.1)(jwt-decode@4.0.0)(magicast@0.5.2)(tailwindcss@4.2.2)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))(vue-router@4.6.4(vue@3.5.31(typescript@5.9.3)))(vue@3.5.31(typescript@5.9.3))(yjs@13.6.30)(zod@4.3.6)
@@ -29,6 +32,9 @@ importers:
es-toolkit:
specifier: ^1.45.1
version: 1.45.1
graphql-codegen-zod:
specifier: "link:\_@lewebsimple/graphql-codegen-zod"
version: "link:\_@lewebsimple/graphql-codegen-zod"
jwt-decode:
specifier: ^4.0.0
version: 4.0.0
@@ -41,6 +47,9 @@ importers:
nuxt-svgo:
specifier: ^4.2.6
version: 4.2.6(magicast@0.5.2)(vue@3.5.31(typescript@5.9.3))
tailwind-variants:
specifier: ^3.2.2
version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.2)
tailwindcss:
specifier: ^4.2.2
version: 4.2.2
@@ -721,15 +730,16 @@ packages:
'@kwsites/promise-deferred@1.1.1':
resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
'@lewebsimple/graphql-codegen-zod@0.2.1':
resolution: {integrity: sha512-6a9hE/5+6lBdx3CSiAuJ5/KkPI/DmT/BvZihix41mJnzvROlpYRnpKvoDbWb8E7Zp1nH6C8xuwG/N9UMPT342Q==}
'@lewebsimple/graphql-codegen-zod@0.2.2':
resolution: {integrity: sha512-46Z2MKfiwWxuxg2lfCP7VinFBmcwEKH2ROjve1gdAH1Em4a1/x/4Y0avysO8zeL2hihDj7YkPsaWwka3okj2AA==}
peerDependencies:
graphql: ^16.13.1
zod: ^4.3.6
'@lewebsimple/nuxt-graphql@0.7.7':
resolution: {integrity: sha512-8hEWDwSEm9YXdZmY1ZxSooa/zSHJBM4UARIF+6oRcEpNXG52kagRnmyuec53iFxq7YlwvFpIpTG4V43SlR/1UQ==}
'@lewebsimple/nuxt-graphql@0.7.8':
resolution: {integrity: sha512-Ur80HqiP0U6IY6T+Ny2VO6+K5i4OKJtxLzRPFfKuzwATKAWIANrhMHxbOuqjxxUCmUoVcH+4hW80h7k03vO6EA==}
peerDependencies:
'@lewebsimple/graphql-codegen-zod': ^0.2.2
graphql: ^16
zod: ^4
@@ -6535,7 +6545,7 @@ snapshots:
'@kwsites/promise-deferred@1.1.1': {}
'@lewebsimple/graphql-codegen-zod@0.2.1(graphql@16.13.1)(zod@4.3.6)':
'@lewebsimple/graphql-codegen-zod@0.2.2(graphql@16.13.1)(zod@4.3.6)':
dependencies:
'@graphql-codegen/add': 6.0.0(graphql@16.13.1)
'@graphql-codegen/plugin-helpers': 6.2.0(graphql@16.13.1)
@@ -6548,7 +6558,7 @@ snapshots:
transitivePeerDependencies:
- graphql-sock
'@lewebsimple/nuxt-graphql@0.7.7(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)':
'@lewebsimple/nuxt-graphql@0.7.8(@lewebsimple/graphql-codegen-zod@0.2.2(graphql@16.13.1)(zod@4.3.6))(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)':
dependencies:
'@graphql-codegen/core': 5.0.1(graphql@16.13.1)
'@graphql-codegen/typed-document-node': 6.1.6(graphql@16.13.1)
@@ -6560,7 +6570,7 @@ snapshots:
'@graphql-tools/schema': 10.0.31(graphql@16.13.1)
'@graphql-tools/stitch': 10.1.16(graphql@16.13.1)
'@graphql-typed-document-node/core': 3.2.0(graphql@16.13.1)
'@lewebsimple/graphql-codegen-zod': 0.2.1(graphql@16.13.1)(zod@4.3.6)
'@lewebsimple/graphql-codegen-zod': 0.2.2(graphql@16.13.1)(zod@4.3.6)
'@nuxt/kit': 4.4.2(magicast@0.5.2)
defu: 6.1.4
es-toolkit: 1.45.1