@iqual/nuxt-icms 1.4.10 → 1.5.0

package/components/Search/Facets/fragment.graphql

@@ -1,10 +1,11 @@
 query layoutOverviewFacetsSearch(
+  $indexId: String!,
   $facets: [String!],
   $filter: SearchApiQueryFilterInput,
   $keys: String
 ) {
 	searchApiQuery(
-    indexId: "content_search",
+    indexId: $indexId,
     facets: $facets,
     filter: $filter,
     keys: $keys
@@ -23,28 +24,28 @@ query layoutOverviewFacetsSearch(
 }
 
 query layoutOverviewResultsSearch(
+  $indexId: String!,
   $filter: SearchApiQueryFilterInput,
   $limit: Int,
   $offset: Int,
   $keys: String
   $facets: [String!],
+  $sort: [SearchApiQuerySortInput!]
 ) {
 	searchApiQuery(
-    indexId: "content_search",
+    indexId: $indexId,
     filter: $filter
     facets: $facets
     limit: $limit
     offset: $offset
     keys: $keys
-    sort: [
-      {field: "weight", direction:DESC},
-      {field: "created", direction:DESC}
-    ]
+    sort: $sort
   ) {
     count
     results {
       bundle: __typename
       ...entityTeaser
+      ...paragraphTeaser
     }
     facets {
       field
@@ -57,6 +58,7 @@ query layoutOverviewResultsSearch(
       results {
         bundle: __typename
         ...entityTeaser
+        ...paragraphTeaser
       }
     }
   }

package/components/Search/Input/index.vue

@@ -95,7 +95,7 @@ const icon = tv({
 const input = tv({
   base: themedClass(
     'inputBase',
-    'py-3 pl-12 pr-3 focus:outline-none focus-visible:ring-2',
+    'py-3 pl-12 pr-3 focus:outline-hidden focus-visible:ring-2',
   ),
   variants: {
     colorScheme: {

package/components/Section/Footer/index.vue

@@ -3,7 +3,7 @@
     <DesignSystemAtomsContainer
       :spacing="{ top: 'none', bottom: 'none' }"
       :class="
-        themedClass('containerClass', 'border-y border-y-gray-100 pb-10 pt-16')
+        themedClass('containerClass', 'border-y border-y-gray-100 pt-16 pb-10')
       "
     >
       <DesignSystemAtomsGridRow
@@ -59,7 +59,7 @@
                     cn(
                       themedClass(
                         'linkClass',
-                        'hover:text-primary transition-colors',
+                        'hover:text-primary-500 transition-colors',
                       ),
                       link.additionalClass,
                     )
@@ -96,7 +96,7 @@
                   cn(
                     themedClass(
                       'subLinkClass',
-                      'hover:text-primary transition-colors',
+                      'hover:text-primary-500 transition-colors',
                     ),
                     subLink.additionalClass,
                   )
@@ -137,7 +137,7 @@
               :class="
                 themedClass(
                   'phoneNumberClass',
-                  'hover:text-primary mb-2 block w-fit font-medium motion-safe:transition-colors motion-safe:duration-200',
+                  'hover:text-primary-500 mb-2 block w-fit font-medium motion-safe:transition-colors motion-safe:duration-200',
                 )
               "
             >
@@ -150,7 +150,7 @@
               :class="
                 themedClass(
                   'emailAddressClass',
-                  'hover:text-primary mb-2 block w-fit font-medium motion-safe:transition-colors motion-safe:duration-200',
+                  'hover:text-primary-500 mb-2 block w-fit font-medium motion-safe:transition-colors motion-safe:duration-200',
                 )
               "
             >
@@ -190,7 +190,7 @@
                   :class="
                     themedClass(
                       'socialMediaIconClass',
-                      'group-hover:text-primary size-8 transition-colors',
+                      'group-hover:text-primary-500 size-8 transition-colors',
                     )
                   "
                 />
@@ -227,12 +227,11 @@
                     cn(
                       themedClass(
                         'footerMetaMenuLinkClass',
-                        'hover:text-primary focus:text-primary underline transition-colors',
+                        'hover:text-primary-500 focus:text-primary-500 underline transition-colors',
                       ),
                       link.additionalClass,
                     )
                   "
-                  prefetch
                 >
                   {{ link.label }}
                 </NuxtLink>

package/components/Section/Header/Buttons.vue

@@ -7,16 +7,12 @@
       v-for="(link, key) in buttons"
       :key="key"
       :label="link?.label"
-      :subline="link?.subline"
       :title="link?.title"
       :link="link?.link?.uri?.path"
       :params="link?.params"
       :target-blank="link?.targetBlank"
-      :style="link?.buttonStyle"
-      :textAlignment="link?.textAlignment"
       :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
       :labelClass="themedClass('labelClass')"
-      :sublineClass="themedClass('sublineClass')"
       @click="close()"
     />
   </div>

package/components/Section/Header/DesktopMainMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    :aria-label="$texts('main_menu.nav_aria_label', 'Main navigation')"
+    :aria-label="$texts('main_menu.nav_aria_label_main', 'Main navigation')"
     :class="
       themedClass(
         'containerClass',
@@ -73,7 +73,7 @@
             :class="
               themedClass(
                 'submenuListClass',
-                'absolute left-0 top-full w-fit min-w-48 border border-gray-100 bg-white',
+                'absolute top-full left-0 w-fit min-w-48 border border-gray-100 bg-white',
               )
             "
           >
@@ -134,7 +134,7 @@ function componentAttrs(item: MappedMenuLink) {
         class: cn(
           themedClass(
             'linkClass',
-            'flex items-center justify-between gap-1 hover:text-primary motion-safe:transition-colors motion-safe:duration-200 whitespace-normal break-keep hyphens-none',
+            'flex items-center justify-between gap-1 hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 whitespace-normal break-keep hyphens-none',
           ),
           item.additionalClass,
         ),

package/components/Section/Header/DesktopMainMenuDropdown.vue

@@ -62,7 +62,7 @@
         :class="
           themedClass(
             'listClass',
-            'absolute left-full top-0 -mt-px w-fit min-w-48 border border-gray-100 bg-white',
+            'absolute top-0 left-full -mt-px max-h-80 w-fit min-w-48 overflow-auto border border-gray-100 bg-white',
           )
         "
       >
@@ -142,7 +142,7 @@ function componentAttrs(child: MappedMenuLink) {
         class: cn(
           themedClass(
             'linkClass',
-            'w-full flex items-center justify-between gap-4 px-6 py-3 hover:text-primary motion-safe:transition-colors motion-safe:duration-200 whitespace-normal break-keep hyphens-none',
+            'w-full flex items-center justify-between gap-4 px-6 py-3 hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 whitespace-normal break-keep hyphens-none',
           ),
           child.additionalClass,
         ),

package/components/Section/Header/LanguageDropdown.vue

@@ -25,7 +25,7 @@
           :class="[
             themedClass(
               'currentLanguageLinkIconClass',
-              'motion-safe:duration-250 size-4 shrink-0 motion-safe:transition-all motion-safe:ease-in-out',
+              'size-4 shrink-0 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out',
             ),
             { 'rotate-180': isLangDropdownOpen },
           ]"
@@ -56,7 +56,7 @@
           :class="
             themedClass(
               'langDropdownContainerClass',
-              'absolute left-0 top-full z-10 -mt-[1px]',
+              'absolute top-full left-0 z-10 -mt-[1px]',
             )
           "
         >
@@ -76,7 +76,7 @@
                 :class="
                   themedClass(
                     'linkClass',
-                    'hover:text-primary motion-safe:duration-250 flex items-center whitespace-nowrap px-4 py-3 text-sm font-medium motion-safe:transition-all motion-safe:ease-in-out',
+                    'hover:text-primary-500 flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out',
                   )
                 "
                 @click="closeDropdown"
@@ -89,7 +89,7 @@
                 :class="
                   themedClass(
                     'noLinkClass',
-                    'flex cursor-default items-center whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-300',
+                    'flex cursor-default items-center px-4 py-3 text-sm font-medium whitespace-nowrap text-gray-300',
                   )
                 "
               >

package/components/Section/Header/LanguageLinks.vue

@@ -15,7 +15,7 @@
             :to="lang.to"
             :class="[
               themedClass('linkClass', 'block'),
-              { 'text-primary': lang.active },
+              { [themedClass('linkClassActive', 'text-primary')]: lang.active },
             ]"
             @click="close()"
           >

package/components/Section/Header/Logo.vue

@@ -4,7 +4,6 @@
     :title="companyName"
     :class="themedClass('linkClass')"
     @click="close()"
-    prefetch
   >
     <Media
       v-if="companyLogo"

package/components/Section/Header/MainButtons.vue

@@ -7,16 +7,12 @@
       v-for="(link, key) in contactButtons"
       :key="key"
       :label="link?.label"
-      :subline="link?.subline"
       :title="link?.title"
       :link="link?.link?.uri?.path"
       :params="link?.params"
       :target-blank="link?.targetBlank"
-      :style="link?.buttonStyle"
-      :textAlignment="link?.textAlignment"
       :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
       :labelClass="themedClass('labelClass')"
-      :sublineClass="themedClass('sublineClass')"
       @click="close()"
     />
   </div>

package/components/Section/Header/MetaButtons.vue

@@ -7,16 +7,12 @@
       v-for="(link, key) in metaLinks"
       :key="key"
       :label="link?.label"
-      :subline="link?.subline"
       :title="link?.title"
       :link="link?.link?.uri?.path"
       :params="link?.params"
-      :target-blank="link?.targetBlank"
-      :style="link?.buttonStyle"
-      :textAlignment="link?.textAlignment"
+      :targetBlank="link?.targetBlank"
       :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
       :labelClass="themedClass('labelClass')"
-      :sublineClass="themedClass('sublineClass')"
       @click="close()"
     />
   </div>

package/components/Section/Header/MetaMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <nav
     :aria-label="
-      $texts('meta_navigation.nav_aria_label', 'Meta navigation menu')
+      $texts('meta_navigation.nav_aria_label_meta', 'Meta navigation menu')
     "
     :class="themedClass('containerClass', 'empty:hidden')"
   >
@@ -39,7 +39,7 @@
               cn(
                 themedClass(
                   'linkClass',
-                  '2xl:group-hover/main:text-primary flex w-full items-center justify-between motion-safe:transition-colors motion-safe:duration-200 2xl:size-auto',
+                  '2xl:group-hover/main:text-primary-500 flex w-full items-center justify-between motion-safe:transition-colors motion-safe:duration-200 2xl:size-auto',
                 ),
                 menuItem?.additionalClass,
               )

package/components/Section/Header/MobileMainMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    :aria-label="$texts('main_menu.nav_aria_label', 'Main navigation')"
+    :aria-label="$texts('main_menu.nav_aria_label_main', 'Main navigation')"
     :class="themedClass('containerClass')"
   >
     <ul role="menu" :class="themedClass('listClass', 'flex flex-col gap-2')">

package/composables/useAccordionScroll.ts

@@ -1,30 +1,23 @@
-import { useNavigationOffset } from './useNavigationOffset'
+import { useNavigationOffset } from '@iqual/nuxt-icms/composables/useNavigationOffset'
 
-export function useAccordionScroll(el: ComponentPublicInstance | undefined): { handleAccordionOpen: () => void } {
-  if (!el) return { handleAccordionOpen: () => { } }
+export function useAccordionScroll() {
+  const { navigationOffset } = useNavigationOffset()
 
-  const triggerRef = el
+  const scrollToTrigger = (accordionEl: HTMLElement | undefined, index: number): void => {
+    if (!accordionEl) return
 
-  const { navigationOffset } = useNavigationOffset()
+    const triggers = accordionEl.querySelectorAll<HTMLElement>('[data-slot="trigger"]')
+    const trigger = triggers[index]
+
+    if (!trigger) return
 
-  const handleAccordionOpen = (): void => {
     nextTick(() => {
       setTimeout(() => {
-        if (
-          triggerRef.$el &&
-          triggerRef.$el.getAttribute('data-state') === 'open'
-        ) {
-          const triggerRect = triggerRef.$el.getBoundingClientRect()
-          const scrollY = window.scrollY + triggerRect.top - navigationOffset.value
-
-          window.scrollTo({
-            top: scrollY,
-            behavior: 'smooth',
-          })
-        }
-      }, 250)
+        const top = window.scrollY + trigger.getBoundingClientRect().top - navigationOffset.value
+        window.scrollTo({ top, behavior: 'smooth' })
+      }, 400)
     })
   }
 
-  return { handleAccordionOpen }
+  return { scrollToTrigger }
 }

package/composables/useEnrichFacetLabels.ts

@@ -0,0 +1,75 @@
+/**
+ * Enriches Search API facet results with taxonomy term labels.
+ *
+ * When facets contain taxonomy term IDs as labels (e.g., "4" instead of "Thema B"),
+ * this composable fetches the actual term names and updates the facet filter labels.
+ *
+ * @param facets - Array of facet objects from searchApiQuery
+ * @param fieldsToEnrich - Array of facet field names that reference taxonomy terms (default: ['topics'])
+ * @returns Enriched facets with resolved term labels
+ */
+export async function useEnrichFacetLabels(
+  facets: any[],
+  fieldsToEnrich: string[] = ['topics']
+): Promise<any[]> {
+  if (!facets || facets.length === 0) {
+    return facets
+  }
+
+  // Find facets that need enrichment
+  const facetsToEnrich = facets.filter(f => fieldsToEnrich.includes(f.field))
+
+  if (facetsToEnrich.length === 0) {
+    return facets
+  }
+
+  // Collect all term IDs from these facets
+  const termIds: string[] = []
+  for (const facet of facetsToEnrich) {
+    if (facet.filter?.id) {
+      termIds.push(facet.filter.id)
+    }
+  }
+
+  if (termIds.length === 0) {
+    return facets
+  }
+
+  // Fetch term labels via GraphQL
+  try {
+    const response: any = await useGraphqlQuery('facetTermLabels' as any, { ids: termIds })
+    const terms = response?.data?.terms?.items || []
+
+    if (terms.length === 0) {
+      return facets
+    }
+
+    // Create a map of term ID -> label
+    const termLabelMap = new Map<string, string>()
+    for (const term of terms) {
+      if (term?.id && term?.label) {
+        termLabelMap.set(term.id, term.label)
+      }
+    }
+
+    // Update facet filter labels
+    return facets.map(facet => {
+      if (fieldsToEnrich.includes(facet.field) && facet.filter?.id) {
+        const label = termLabelMap.get(facet.filter.id)
+        if (label) {
+          return {
+            ...facet,
+            filter: {
+              ...facet.filter,
+              label
+            }
+          }
+        }
+      }
+      return facet
+    })
+  } catch (error) {
+    console.error('Error enriching facet labels:', error)
+    return facets
+  }
+}

package/composables/useEntityRegistry.ts

@@ -0,0 +1,21 @@
+const nodeComponentRegistry = new Map<string, Component>()
+
+export const useEntityRegistry  = () => {
+  const register = (type: string, component: Component) => {
+    nodeComponentRegistry.set(type, component)
+  }
+
+  const get = (type: string) => {
+    return nodeComponentRegistry.get(type)
+  }
+
+  const getAll = () => {
+    return Array.from(nodeComponentRegistry.entries())
+  }
+
+  return {
+    register,
+    get,
+    getAll
+  }
+}

package/composables/useIsMobile.ts

@@ -1,10 +1,6 @@
 export function useIsMobile() {
   const viewport = useViewport()
-  const isMobile = ref(viewport.isLessThan('2xl'))
-
-  watch(viewport.breakpoint, (newValue: string) => {
-    isMobile.value = newValue !== '2xl'
-  })
+  const isMobile = computed(() => viewport.isLessThan('2xl'))
 
   return { isMobile }
 }

package/composables/useNavigationOffset.ts

@@ -1,7 +1,7 @@
 import { useIsMobile } from '@iqual/nuxt-icms/composables/useIsMobile'
 
-const mobileNavHeight: number = 60 // actual height + 4
-const desktopNavHeight: number = 85 // actual height + 4
+const mobileNavHeight: number = 57 + 4
+const desktopNavHeight: number = 80 + 66 + 4
 
 export function useNavigationOffset(): { navigationOffset: ComputedRef<number> } {
   const { isMobile } = useIsMobile()

package/composables/useWebformEnrichment.ts

@@ -0,0 +1,68 @@
+// Composable for webform field enrichment system
+// Allows bundles to register custom field processors
+
+interface FormElement {
+  metadata?: {
+    key?: string
+    type?: string
+    [key: string]: any
+  }
+  [key: string]: any
+}
+
+interface EnrichmentContext {
+  formElement: FormElement
+  props: Record<string, any>
+}
+
+interface SubmissionContext {
+  data: Record<string, any>
+  elements: Array<{ element: string; value: any }>
+  props: Record<string, any>
+}
+
+type EnrichmentFunction = (context: EnrichmentContext) => FormElement | null
+type SubmissionProcessor = (context: SubmissionContext) => void
+
+const enrichmentFunctions: EnrichmentFunction[] = []
+const submissionProcessors: SubmissionProcessor[] = []
+
+export function useWebformEnrichment() {
+  const registerEnrichment = (fn: EnrichmentFunction) => {
+    if (!enrichmentFunctions.includes(fn)) {
+      enrichmentFunctions.push(fn)
+    }
+  }
+
+  const registerSubmissionProcessor = (fn: SubmissionProcessor) => {
+    if (!submissionProcessors.includes(fn)) {
+      submissionProcessors.push(fn)
+    }
+  }
+
+  const enrichFormElement = (formElement: FormElement, props: Record<string, any>): FormElement => {
+    // Try each registered enrichment function
+    for (const fn of enrichmentFunctions) {
+      const result = fn({ formElement, props })
+      if (result) {
+        return result
+      }
+    }
+    // Return original if no enrichment applied
+    return formElement
+  }
+
+  const processSubmission = (context: SubmissionContext) => {
+    // Run all submission processors
+    for (const fn of submissionProcessors) {
+      fn(context)
+    }
+  }
+
+  return {
+    registerEnrichment,
+    registerSubmissionProcessor,
+    enrichFormElement,
+    processSubmission,
+  }
+}