feat: AcfLink / AcfLinkButton components

wp-content/themes/moonshine/acf-json/group_options_site.json

@@ -47,6 +47,54 @@
             "graphql_description": "",
             "graphql_field_name": "phoneNumber",
             "graphql_non_null": 1
+        },
+        {
+            "key": "field_697cc921234cc",
+            "label": "Liens globaux",
+            "name": "links",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "row",
+            "acfe_seamless_style": 0,
+            "acfe_group_modal": 0,
+            "show_in_graphql": 1,
+            "graphql_description": "",
+            "graphql_field_name": "links",
+            "graphql_non_null": 0,
+            "sub_fields": [
+                {
+                    "key": "field_697cc93e234cd",
+                    "label": "Contact",
+                    "name": "contact",
+                    "aria-label": "",
+                    "type": "link",
+                    "instructions": "",
+                    "required": 1,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "allow_in_bindings": 0,
+                    "show_in_graphql": 1,
+                    "graphql_description": "",
+                    "graphql_field_name": "contact",
+                    "graphql_non_null": 1
+                }
+            ],
+            "acfe_group_modal_close": 0,
+            "acfe_group_modal_button": "",
+            "acfe_group_modal_size": "large"
         }
     ],
     "location": [
@@ -78,5 +126,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1769785033
+    "modified": 1769785750
 }

wp-content/themes/moonshine/app/components/acf/AcfLink.fragment.gql

@@ -0,0 +1,5 @@
+fragment AcfLink on AcfLink {
+  title
+  url
+  target
+}

wp-content/themes/moonshine/app/components/acf/AcfLink.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AcfLinkFragment } from "#graphql/operations";
+import type { LinkProps } from "@nuxt/ui";
+
+type AcfLinkProps = Omit<LinkProps, "to" | "target" | "href"> & {
+  link?: AcfLinkFragment;
+};
+
+const { link, ...linkProps } = defineProps<AcfLinkProps>();
+</script>
+
+<template>
+  <ULink
+    v-if="link?.url && link?.title"
+    v-bind="linkProps"
+    :to="link.url"
+    :target="link.target"
+    :external="link.target === '_blank'"
+    :rel="link.target === '_blank' ? 'noopener noreferrer' : undefined"
+  >
+    <slot>{{ link.title }}</slot>
+  </ULink>
+</template>

wp-content/themes/moonshine/app/components/acf/AcfLinkButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AcfLinkFragment } from "#graphql/operations";
+import type { ButtonProps } from "@nuxt/ui";
+
+type AcfLinkButtonProps = & Omit<ButtonProps, "to" | "target" | "href"> & {
+  link?: AcfLinkFragment;
+};
+
+const { link, ...buttonProps } = defineProps<AcfLinkButtonProps>();
+</script>
+
+<template>
+  <UButton
+    v-if="link?.url && link?.title"
+    v-bind="buttonProps"
+    :to="link.url"
+    :target="link.target"
+    :external="link.target === '_blank'"
+    :rel="link.target === '_blank' ? 'noopener noreferrer' : undefined"
+  >
+    <slot>{{ link.title }}</slot>
+  </UButton>
+</template>

wp-content/themes/moonshine/app/graphql/SiteOptions.query.gql

@@ -1,5 +1,9 @@
 fragment SiteOptions on GroupSiteOptions {
   email
+  phoneNumber { ... AcfPhone }
+  links {
+    contact { ... AcfLink}
+  }
 }
 
 query SiteOptions {

wp-content/themes/moonshine/server/graphql/schema.graphql

@@ -51,6 +51,18 @@ interface AcfFieldGroupFields {
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
 }
 
+"""ACF Link field"""
+type AcfLink {
+  """The target of the link (_blank, etc)"""
+  target: String
+
+  """The title of the link"""
+  title: String
+
+  """The url of the link"""
+  url: String
+}
+
 """
 Connection between the GroupAbstractBuilderSectionsHeroSplitLayout_Fields type and the MediaItem type
 """
@@ -3711,12 +3723,43 @@ type GroupSiteOptions implements AcfFieldGroup & AcfFieldGroupFields & GroupSite
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
 
+  """
+  Field of the "group" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
+  """
+  links: GroupSiteOptionsLinks
+
   """
   Field of the "phone" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
   """
   phoneNumber: AcfPhone!
 }
 
+"""
+The "GroupSiteOptionsLinks" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type GroupSiteOptionsLinks implements AcfFieldGroup & AcfFieldGroupFields & GroupSiteOptionsLinks_Fields {
+  """
+  Field of the "link" Field Type added to the schema as part of the "GroupSiteOptionsLinks" Field Group
+  """
+  contact: AcfLink!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
+"""
+Interface representing fields of the ACF "GroupSiteOptionsLinks" Field Group
+"""
+interface GroupSiteOptionsLinks_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+  """
+  Field of the "link" Field Type added to the schema as part of the "GroupSiteOptionsLinks" Field Group
+  """
+  contact: AcfLink!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
 """
 Interface representing fields of the ACF "GroupSiteOptions" Field Group
 """
@@ -3729,6 +3772,11 @@ interface GroupSiteOptions_Fields implements AcfFieldGroup & AcfFieldGroupFields
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
 
+  """
+  Field of the "group" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
+  """
+  links: GroupSiteOptionsLinks
+
   """
   Field of the "phone" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
   """