@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/components/Search/Facets/FacetDropdownUI.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="themedClass('containerClass', 'facets-ui space-y-5')"
     v-if="groupEntries.length"
+    :class="themedClass('containerClass', 'facets-ui space-y-5')"
   >
     <!-- Filters row -->
     <DesignSystemAtomsGridRow
@@ -19,14 +19,14 @@
       >
         <!-- Text search input -->
         <SearchInput
-          :inputClass="
+          v-model="internalSearchTerm"
+          :input-class="
             themedClass(
               'textSearchInputClass',
               'w-full pr-6 pl-12 py-3 border transition-all bg-white text-black border-0 selection:bg-primary-500 selection:text-white border-1 border-gray-200 placeholder-gray-300',
             )
           "
-          :colorScheme="colorScheme"
-          v-model="internalSearchTerm"
+          :color-scheme="colorScheme"
         />
       </div>
 
@@ -47,7 +47,7 @@
           :ui="{
             content: themedClass(
               'popoverUiContentClass',
-              'rounded-none ring-0',
+              'z-[103] rounded-none ring-0',
             ),
           }"
         >
@@ -84,8 +84,8 @@
                 <template v-for="opt in opts" :key="opt.value">
                   <button
                     type="button"
-                    @click="toggle(field.field, opt.value)"
                     :class="filterOptionButton({ colorScheme })"
+                    @click="toggle(field.field, opt.value)"
                   >
                     <UCheckbox
                       :model-value="
@@ -130,13 +130,13 @@
                       selections[field.field] && selections[field.field]?.length
                     )
                   "
-                  @click="clearField(field.field)"
-                  :buttonClass="
+                  :button-class="
                     themedClass('resetFilterButtonButtonClass', 'py-1 px-3')
                   "
-                  :labelClass="themedClass('resetFilterButtonLabelClass')"
-                  buttonStyle="focus"
-                  :colorScheme="colorScheme"
+                  :label-class="themedClass('resetFilterButtonLabelClass')"
+                  button-style="focus"
+                  :color-scheme="colorScheme"
+                  @click="clearField(field.field)"
                 />
               </div>
             </div>
@@ -157,11 +157,11 @@
         <DesignSystemAtomsButton
           v-if="selections && Object.keys(selections || {}).length"
           :label="$texts('listing.clear_filters', 'Clear all filters')"
+          :button-class="themedClass('resetFiltersButtonButtonClass')"
+          :label-class="themedClass('resetFiltersButtonLabelClass')"
+          button-style="focus"
+          :color-scheme="colorScheme"
           @click="clearAll"
-          :buttonClass="themedClass('resetFiltersButtonButtonClass')"
-          :labelClass="themedClass('resetFiltersButtonLabelClass')"
-          buttonStyle="focus"
-          :colorScheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -319,18 +319,6 @@ const grouped = computed(() => {
   return map
 })
 
-// Flatten for utility lookups.
-const optionMap = computed(() => {
-  // Map key: filter string -> NormalizedFacetOption
-  const map = new Map<string, NormalizedFacetOption>()
-  for (const [, arr] of grouped.value) {
-    for (const opt of arr) {
-      map.set(opt.value, opt)
-    }
-  }
-  return map
-})
-
 // Stable array of [field, options[]] to simplify template & avoid calling entries() on undefined.
 // Array of [{ filter, label }, options[]] for template
 const groupEntries = computed(() =>
@@ -339,8 +327,8 @@ const groupEntries = computed(() =>
 
 // Per-field trigger labels
 function fieldTriggerLabel(fieldData: { field: string; label: string }) {
-  let field: string = fieldData.field
-  let label: string = fieldData.label
+  const field: string = fieldData.field
+  const label: string = fieldData.label
   const arr = selections.value[field] || []
   if (!arr.length) return props.placeholder || `${label}`
   return `${props.placeholder || label} (${arr.length})`
@@ -353,13 +341,19 @@ function toggle(field: string, value: string) {
   if (idx === -1) arr.push(value)
   else arr.splice(idx, 1)
   // Remove empty arrays to keep payload small.
-  if (!arr.length) delete selections.value[field]
+  if (!arr.length) removeField(field)
   emitAll()
 }
 
+function removeField(field: string) {
+  selections.value = Object.fromEntries(
+    Object.entries(selections.value).filter(([key]) => key !== field),
+  )
+}
+
 function clearField(field: string) {
   if (selections.value[field]) {
-    delete selections.value[field]
+    removeField(field)
     emitAll()
   }
 }

package/components/Search/Facets/FacetedSearchUI.vue

@@ -3,9 +3,8 @@
     <!-- Facets Section (only for 'all' listing type) -->
     <div v-if="listingType === 'all' && facets.length > 0">
       <SearchFacetsFacetDropdownUI
-        :facets="facetData"
         v-model="facetSelections"
-        @facets-change="onFacetsChange"
+        :facets="facetData"
         :total-count="totalCount"
         :displayed-count="
           props.groupResultsByFacet
@@ -16,29 +15,28 @@
             : displayedResults?.[0]?.results?.length
         "
         :loading="isLoading"
-        :colorScheme="colorScheme"
+        :color-scheme="colorScheme"
         :class="
           themedClass('listingTypeAllSearchFacetsFacetDropdownUIClass', 'mb-6')
         "
         :enable-text-search="enableTextSearch"
         :search-term="searchTerm"
-        :alignHorizontalFull="alignHorizontalFull"
+        :align-horizontal-full="alignHorizontalFull"
+        @facets-change="onFacetsChange"
         @update:search-term="onSearchTermChange"
       />
 
       <template v-if="debug">
         <!-- Debug info (only if enabled) -->
         <pre
-          class="mt-4 rounded-sm bg-gray-50 p-3 text-xs whitespace-pre"
           v-if="Object.keys(facetSelections).length"
-          >{{ JSON.stringify(facetSelections, null, 2) }}</pre
-        >
+          class="mt-4 rounded-sm bg-gray-50 p-3 text-xs whitespace-pre"
+          >{{ JSON.stringify(facetSelections, null, 2) }}</pre>
         <pre
-          class="mt-2 rounded-sm bg-blue-50 p-3 text-xs whitespace-pre"
           v-if="facetData.length"
+          class="mt-2 rounded-sm bg-blue-50 p-3 text-xs whitespace-pre"
         >
-Facets: {{ facetData.length }} items</pre
-        >
+Facets: {{ facetData.length }} items</pre>
       </template>
     </div>
 
@@ -47,8 +45,7 @@ Facets: {{ facetData.length }} items</pre
       <pre class="mb-4 rounded-sm bg-yellow-50 p-3 text-xs whitespace-pre">
         Active Filters ({{ listingType }}): {{
           JSON.stringify(activeFilters, null, 2)
-        }}</pre
-      >
+        }}</pre>
     </template>
 
     <!-- Results Section -->
@@ -103,21 +100,26 @@ Facets: {{ facetData.length }} items</pre
           >
             <slot
               name="group-load-more"
-              :loadMore="() => loadMoreGroup(group)"
+              :load-more="() => loadMoreGroup(group)"
               :loading="isGroupLoading(group)"
               :group="group"
             >
               <DesignSystemAtomsButton
-                :colorScheme="colorScheme"
-                buttonStyle="normal"
+                :color-scheme="colorScheme"
+                button-style="normal"
                 :label="
                   isGroupLoading(group)
                     ? defaultLoadingText
                     : defaultLoadMoreText
                 "
                 :disabled="isGroupLoading(group)"
-                :buttonClass="cn(themedClass('groupLoadMoreButtonClass'), loadMoreButtonClass)"
-                :labelClass="themedClass('groupLoadMoreLabelClass')"
+                :button-class="
+                  cn(
+                    themedClass('groupLoadMoreButtonClass'),
+                    loadMoreButtonClass,
+                  )
+                "
+                :label-class="themedClass('groupLoadMoreLabelClass')"
                 @click="loadMoreGroup(group)"
               />
             </slot>
@@ -150,7 +152,7 @@ Facets: {{ facetData.length }} items</pre
               )
             "
           >
-            <span :class="loadingText({ colorScheme })">
+            <span :class="loadingTextClass({ colorScheme })">
               {{ defaultLoadingText }}
             </span>
           </div>
@@ -168,17 +170,17 @@ Facets: {{ facetData.length }} items</pre
         )
       "
     >
-      <slot name="load-more" :loadMore="loadMore" :loading="loadingMore">
+      <slot name="load-more" :load-more="loadMore" :loading="loadingMore">
         <DesignSystemAtomsButton
           type="button"
-          :colorScheme="colorScheme"
-          buttonStyle="normal"
+          :color-scheme="colorScheme"
+          button-style="normal"
           :label="loadingMore ? defaultLoadingText : defaultLoadMoreText"
           :disabled="loadingMore"
-          :buttonClass="
+          :button-class="
             cn(themedClass('globalLoadMoreButtonClass'), loadMoreButtonClass)
           "
-          :labelClass="themedClass('globalLoadMoreLabelClass')"
+          :label-class="themedClass('globalLoadMoreLabelClass')"
           @click="loadMore"
         />
       </slot>
@@ -400,11 +402,29 @@ const buildSearchFilter = (
   }
 }
 
-// Initial query to get all available facets (only for 'all' listing type)
-const { data: initialFacetsData } = await useAsyncData(
-  props.listingType === 'all'
-    ? `facetedSearch-facets-${props.index}-${JSON.stringify(props.baseFilter)}-${searchTerm.value}`
-    : 'skip-facets',
+// A language switch is a client-side route change: the component instance is
+// reused and its setup does not re-run. The GraphQL client already sends the
+// current language per request, but the useAsyncData cache keys must include
+// the language so a language change triggers a refetch instead of serving the
+// previous language's cached payload.
+const currentLanguage = useCurrentLanguage()
+
+// Freeze the setup-time values in the keys: the available-facets list should
+// only refetch on language change, not on text-search input (unchanged
+// behavior); result updates for filter changes go through
+// updateSearchResults().
+const setupSearchTerm = searchTerm.value
+const setupActiveFilters = JSON.stringify(activeFilters.value)
+
+// Initial query to get all available facets (only for 'all' listing type).
+// Deferred to the client (server: false, lazy: true): the facet options are
+// interactive UI, not indexable content, and this query is expensive on the
+// backend — running it during SSR blocks navigation.
+const { data: initialFacetsData } = useAsyncData(
+  () =>
+    props.listingType === 'all'
+      ? `facetedSearch-facets-${props.index}-${JSON.stringify(props.baseFilter)}-${setupSearchTerm}-${currentLanguage.value}`
+      : 'skip-facets',
   async () => {
     if (props.listingType !== 'all') {
       return null
@@ -414,16 +434,21 @@ const { data: initialFacetsData } = await useAsyncData(
       facets: props.facets,
       filter: props.baseFilter,
       keys: searchTerm.value ?? '',
+      // Only the facets and the count are used from this query, but the
+      // backend loads up to 50 result entities unless a limit is set.
+      limit: 1,
     }).then((v) => {
       return v.data?.searchApiQuery ?? null
     })
   },
+  { server: false, lazy: true },
 )
 
 // Initial query to get search results
 const { data: initialResultsData, refresh: refreshResults } =
   await useAsyncData(
-    `facetedSearch-results-${props.index}-${props.listingType}-${JSON.stringify(props.baseFilter)}-${JSON.stringify(activeFilters.value)}`,
+    () =>
+      `facetedSearch-results-${props.index}-${props.listingType}-${JSON.stringify(props.baseFilter)}-${setupActiveFilters}-${currentLanguage.value}`,
     async () => {
       const filter = buildSearchFilter()
 
@@ -438,7 +463,10 @@ const { data: initialResultsData, refresh: refreshResults } =
       const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
         indexId: props.index,
         filter,
-        facets: props.facets,
+        // Facets (and their per-facet results) are only needed to group the
+        // results; the facet dropdown has its own query.
+        facets: props.groupResultsByFacet ? props.facets : undefined,
+        grouped: !!props.groupResultsByFacet,
         limit: props?.groupResultsByFacet
           ? props.itemsPerPage * 10
           : props.itemsPerPage,
@@ -486,13 +514,17 @@ const { data: initialResultsData, refresh: refreshResults } =
     },
   )
 
-// Initialize facets from initial query (only for 'all' listing type)
-if (initialFacetsData.value) {
-  const enrichedFacets = await useEnrichFacetLabels(
-    initialFacetsData.value.facets || [],
-  )
-  allFacets.value = enrichedFacets
-}
+// Initialize the facets once the deferred facets query resolves on the client
+// and re-enrich the labels after a refetch (e.g. language switch).
+watch(
+  initialFacetsData,
+  async (facetsData) => {
+    if (facetsData) {
+      allFacets.value = await useEnrichFacetLabels(facetsData.facets || [])
+    }
+  },
+  { immediate: true },
+)
 
 // Function to update search results when facets change (only for 'all' listing type)
 async function updateSearchResults(selections: Record<string, string[]>) {
@@ -521,7 +553,8 @@ async function updateSearchResults(selections: Record<string, string[]>) {
     const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
       indexId: props.index,
       filter,
-      facets: props.facets,
+      facets: props.groupResultsByFacet ? props.facets : undefined,
+      grouped: !!props.groupResultsByFacet,
       limit: props?.groupResultsByFacet
         ? props.itemsPerPage * 10
         : props.itemsPerPage,
@@ -851,7 +884,7 @@ async function loadMoreGroup(group: any) {
   }
 }
 
-const loadingText = tv({
+const loadingTextClass = tv({
   base: themedClass('loadingTextBase'),
   variants: {
     colorScheme: {
@@ -911,13 +944,4 @@ watchEffect(() => {
     }
   }
 })
-
-// Expose functions for parent components if needed
-defineExpose({
-  refreshResults,
-  loadMore,
-  facetSelections: readonly(facetSelections),
-  totalCount: readonly(totalCount),
-  displayedResults: readonly(displayedResults),
-})
 </script>

package/components/Search/Facets/fragment.graphql

@@ -1,14 +1,16 @@
 query layoutOverviewFacetsSearch(
-  $indexId: String!,
-  $facets: [String!],
-  $filter: SearchApiQueryFilterInput,
+  $indexId: String!
+  $facets: [String!]
+  $filter: SearchApiQueryFilterInput
   $keys: String
+  $limit: Int
 ) {
-	searchApiQuery(
-    indexId: $indexId,
-    facets: $facets,
-    filter: $filter,
+  searchApiQuery(
+    indexId: $indexId
+    facets: $facets
+    filter: $filter
     keys: $keys
+    limit: $limit
   ) {
     count
     facets {
@@ -24,16 +26,17 @@ query layoutOverviewFacetsSearch(
 }
 
 query layoutOverviewResultsSearch(
-  $indexId: String!,
-  $filter: SearchApiQueryFilterInput,
-  $limit: Int,
-  $offset: Int,
+  $indexId: String!
+  $filter: SearchApiQueryFilterInput
+  $limit: Int
+  $offset: Int
   $keys: String
-  $facets: [String!],
+  $facets: [String!]
   $sort: [SearchApiQuerySortInput!]
+  $grouped: Boolean = false
 ) {
-	searchApiQuery(
-    indexId: $indexId,
+  searchApiQuery(
+    indexId: $indexId
     filter: $filter
     facets: $facets
     limit: $limit
@@ -47,7 +50,9 @@ query layoutOverviewResultsSearch(
       ...entityTeaser
       ...paragraphTeaser
     }
-    facets {
+    # Per-facet result lists are only read when results are grouped by a
+    # facet; resolving them loads and renders every result entity per facet.
+    facets @include(if: $grouped) {
       field
       label
       filter {

package/components/Section/Footer/index.vue

@@ -18,18 +18,19 @@
           <Media
             v-if="companyLogo"
             :media="companyLogo"
-            :mediaClass="themedClass('mediaClass', 'mb-8 w-32')"
-            :figcaptionClass="themedClass('figcaptionClass')"
-            :elementClass="themedClass('elementClass')"
+            :media-class="themedClass('mediaClass', 'mb-8 w-32')"
+            :figcaption-class="themedClass('figcaptionClass')"
+            :element-class="themedClass('elementClass')"
           />
 
           <DesignSystemOrganismsContentBlock
+            v-if="companyName || companyDescription"
             :title="companyName"
-            :titleWeight="'p'"
-            :titleStyle="'heading-5'"
-            :titleClass="themedClass('companyNameClass')"
+            :title-weight="'p'"
+            :title-style="'heading-5'"
+            :title-class="themedClass('companyNameClass')"
             :text="companyDescription"
-            :textClass="themedClass('companyDescriptionClass')"
+            :text-class="themedClass('companyDescriptionClass')"
           />
         </div>
 
@@ -125,10 +126,14 @@
           "
         >
           <DesignSystemOrganismsContentBlock
+            v-if="address"
             :text="address"
-            :textClass="themedClass('addressClass')"
+            :text-class="themedClass('addressClass')"
           />
-          <div :class="themedClass('contactInfoContainerClass')">
+          <div
+            v-if="phoneNumber || emailAddress"
+            :class="themedClass('contactInfoContainerClass')"
+          >
             <NuxtLink
               v-if="phoneNumber"
               :to="`tel:${phoneNumber}`"
@@ -161,7 +166,7 @@
     </DesignSystemAtomsContainer>
 
     <DesignSystemAtomsContainer
-      v-if="socialMediaLinks?.length || footerMetaMenuLinks?.length"
+      v-if="socialMediaIcons.length || footerMetaMenuLinks?.length"
       :spacing="{ top: 'none', bottom: 'none' }"
       :class="themedClass('metaContainerClass', 'py-6')"
     >
@@ -175,24 +180,19 @@
           "
         >
           <div
-            :class="
-              themedClass(
-                'socialMediaContainerClass',
-                'flex gap-4 empty:hidden',
-              )
-            "
+            v-if="socialMediaIcons.length"
+            :class="themedClass('socialMediaContainerClass', 'flex gap-4')"
           >
-            <template v-for="(link, index) in socialMediaLinks" :key="index">
+            <template v-for="(icon, index) in socialMediaIcons" :key="index">
               <NuxtLink
-                v-if="link?.uri?.path"
-                :to="link?.uri?.path"
-                :title="getSocialMediaIconMeta(link.uri.path).title"
+                :to="icon.path"
+                :external="icon.external"
+                :title="icon.title"
                 target="_blank"
                 :class="themedClass('socialMediaIconLinkClass', 'group')"
               >
                 <SpriteSymbol
-                  v-if="getSocialMediaIconMeta(link.uri.path)?.sprite"
-                  :name="getSocialMediaIconMeta(link.uri.path).sprite"
+                  :name="icon.sprite"
                   :class="
                     themedClass(
                       'socialMediaIconClass',
@@ -205,7 +205,7 @@
           </div>
 
           <div
-            v-if="footerMetaMenuLinks"
+            v-if="footerMetaMenuLinks?.length"
             :class="
               themedClass('footerMetaMenuContainerClass', 'flex items-center')
             "
@@ -267,11 +267,6 @@ const {
   socialMediaLinks,
 } = await useGlobalConfig()
 
-interface SocialMediaIconMeta {
-  sprite: NuxtSvgSpriteSymbol
-  title: string
-}
-
 const socialIconsMap: Record<string, NuxtSvgSpriteSymbol> = {
   facebook: 'facebook',
   instagram: 'instagram',
@@ -281,9 +276,37 @@ const socialIconsMap: Record<string, NuxtSvgSpriteSymbol> = {
   pinterest: 'pinterest',
 }
 
-const getSocialMediaIconMeta = (url: string): SocialMediaIconMeta => {
-  const domain = new URL(url).hostname.split('.com')[0].split('.').slice(-1)[0]
-  const title = domain.charAt(0).toUpperCase() + domain.slice(1)
-  return { sprite: socialIconsMap[domain], title: title }
+/**
+ * Derive the icon and the label of a social media link from its domain, e.g.
+ * "https://www.instagram.com/foo" becomes the "instagram" sprite.
+ */
+const getSocialMediaIconMeta = (url: string) => {
+  const domain =
+    new URL(url).hostname.split('.com')[0]?.split('.').slice(-1)[0] ?? ''
+  return {
+    sprite: socialIconsMap[domain],
+    title: domain.charAt(0).toUpperCase() + domain.slice(1),
+  }
 }
+
+const socialMediaIcons = computed(() =>
+  (socialMediaLinks.value || []).flatMap((link) => {
+    const resolved = resolveLinkUrl(link?.uri)
+    if (!resolved.url) {
+      return []
+    }
+    const meta = getSocialMediaIconMeta(resolved.url)
+    if (!meta.sprite) {
+      return []
+    }
+    return [
+      {
+        path: resolved.url,
+        external: resolved.isFile,
+        ...meta,
+        sprite: meta.sprite,
+      },
+    ]
+  }),
+)
 </script>

package/components/Section/Header/Buttons.vue

@@ -11,17 +11,16 @@
       :link="link?.link?.uri?.path"
       :params="link?.params"
       :target-blank="link?.targetBlank"
-      :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
-      :labelClass="themedClass('labelClass')"
-      colorScheme="none"
-      buttonStyle="focus"
+      :button-class="themedClass('buttonClass', 'xs:w-fit')"
+      :label-class="themedClass('labelClass')"
+      color-scheme="none"
+      button-style="focus"
       @click="close()"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-
 defineProps<{
   buttons: any[] | undefined
 }>()

package/components/Section/Header/DesktopMainMenu.vue

@@ -16,13 +16,14 @@
     >
       <li
         v-for="item in menuItems"
+        :key="item.id"
+        :class="
+          themedClass('listItemClass', 'relative flex h-full items-stretch')
+        "
         @mouseenter="setOpen(item, true)"
         @mouseleave="setOpen(item, false)"
         @focusin="setOpen(item, true)"
         @focusout="setOpen(item, false)"
-        :class="
-          themedClass('listItemClass', 'relative flex h-full items-stretch')
-        "
       >
         <component :is="elementType(item)" v-bind="componentAttrs(item)">
           {{ item.label }}
@@ -79,7 +80,7 @@
           >
             <DesktopMainMenuDropdown
               :item="item"
-              :menuItemActive="menuItemActive"
+              :menu-item-active="menuItemActive"
             />
           </ul>
         </Transition>

package/components/Section/Header/DesktopMainMenuDropdown.vue

@@ -2,16 +2,16 @@
   <li
     v-for="child in item.children"
     :key="child.id"
-    @mouseenter="setOpen(child, true)"
-    @mouseleave="setOpen(child, false)"
-    @focusin="setOpen(child, true)"
-    @focusout="setOpen(child, false)"
     :class="
       themedClass(
         'listItemClass',
         'relative first-of-type:pt-1 last-of-type:pb-1',
       )
     "
+    @mouseenter="setOpen(child, true)"
+    @mouseleave="setOpen(child, false)"
+    @focusin="setOpen(child, true)"
+    @focusout="setOpen(child, false)"
   >
     <component :is="elementType(child)" v-bind="componentAttrs(child)">
       {{ child.label }}
@@ -68,7 +68,7 @@
       >
         <DesktopMainMenuDropdown
           :item="child"
-          :menuItemActive="menuItemActive"
+          :menu-item-active="menuItemActive"
         />
       </ul>
     </Transition>