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

package/components/DesignSystem/Organisms/FacetedListing.vue

@@ -30,12 +30,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -51,8 +51,8 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :color-scheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -79,12 +79,12 @@
           :load-more-text="$texts('listing.load_more', 'Load more')"
           :color-scheme="colorScheme"
           :debug="false"
-          :alignHorizontalFull="alignHorizontalFull"
-          @results-updated="onResultsUpdated"
+          :align-horizontal-full="alignHorizontalFull"
           :conjunction="conjunction"
+          @results-updated="onResultsUpdated"
         >
           <template #results="{ results }">
-            <slot name="preResults" :results="results"></slot>
+            <slot name="preResults" :results="results" />
             <div
               v-if="!slider"
               :class="
@@ -95,19 +95,19 @@
               "
             >
               <component
-                v-for="teaser in results?.results"
                 :is="teaserComponent(teaser?.bundle)"
+                v-for="(teaser, teaserIndex) in results?.results"
+                :key="`${teaser?.bundle}-${teaserIndex}`"
                 v-bind="teaser"
               />
             </div>
             <div v-else class="relative mt-10">
               <UCarousel
-                v-model="carouselIndex"
                 :items="results?.results || []"
                 :arrows="(results?.results?.length || 0) > sliderColumns"
                 :watch-drag="(results?.results?.length || 0) > sliderColumns"
-                nextIcon="i-lucide-chevron-right"
-                prevIcon="i-lucide-chevron-left"
+                next-icon="i-lucide-chevron-right"
+                prev-icon="i-lucide-chevron-left"
                 :ui="{
                   viewport: themedClass('carouselViewport'),
                   item: sliderItemClass,
@@ -166,6 +166,15 @@ const props = withDefaults(
     prefilter?: Record<string, Array<{ id?: string; name?: string } | null>>
     availableFacets?: string[]
     contentTypeFilter?: string[]
+    /**
+     * Whether to exclude the node the listing sits on from its own results.
+     *
+     * Only meaningful for indexes whose datasource is nodes: the condition
+     * filters on `nid`, and search_api rejects a query naming a field the
+     * index does not have. Listings over another entity type — the event
+     * bundle indexes occurrence paragraphs — must switch it off.
+     */
+    excludeCurrentNode?: boolean
     additionalFilters?: Array<{ field: string; value: any; operator?: string }>
     containerClass?: string
     firstRowClass?: string
@@ -187,8 +196,11 @@ const props = withDefaults(
   }>(),
   {
     availableFacets: () => ['topics'],
+    excludeCurrentNode: true,
     index: 'content_search',
     debug: false,
+    prefilter: () => ({}),
+    sliderColumns: 1,
   },
 )
 
@@ -199,7 +211,7 @@ const { $texts } = useNuxtApp()
 const hasResults = ref(true)
 
 // Handle results updates from SearchFacetsFacetedSearchUI
-const onResultsUpdated = (hasResultsValue: boolean, count: number) => {
+const onResultsUpdated = (hasResultsValue: boolean, _count: number) => {
   hasResults.value = hasResultsValue
 }
 
@@ -230,6 +242,8 @@ const listingType = computed(() => {
   return 'all' // default fallback
 })
 
+const currentNodeId = useCurrentNodeId()
+
 // Configuration for the faceted search
 const baseFilter = computed(() => {
   const conditions: any[] = []
@@ -239,6 +253,15 @@ const baseFilter = computed(() => {
     conditions.push({ field: 'type', value: props?.contentTypeFilter })
   }
 
+  // Exclude the node the listing is placed on from its own results
+  if (props.excludeCurrentNode && currentNodeId.value) {
+    conditions.push({
+      field: 'nid',
+      value: [currentNodeId.value],
+      operator: 'NOT_EQUAL',
+    })
+  }
+
   // Add custom field conditions
   if (props?.additionalFilters && props.additionalFilters.length > 0) {
     conditions.push(...props.additionalFilters)
@@ -273,8 +296,6 @@ const teaserComponent = (bundle?: string) => {
   return null
 }
 
-const carouselIndex = ref(0)
-
 const viewport = useViewport()
 
 const sliderItemClass = computed(() => {

package/components/DesignSystem/Organisms/FactCard.vue

@@ -3,13 +3,13 @@
     <div :class="card({ colorScheme })">
       <slot name="content">
         <DesignSystemOrganismsContentBlock
-          :containerClass="'flex h-full flex-col justify-between'"
+          :container-class="'flex h-full flex-col justify-between'"
           :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="'heading-2'"
-          :titleClass="themedClass('titleClass', 'mb-6 font-bold')"
+          :title-weight="titleWeight"
+          :title-style="'heading-2'"
+          :title-class="themedClass('titleClass', 'mb-6 font-bold')"
           :text="text"
-          :textClass="
+          :text-class="
             themedClass(
               'textClass',
               'text-sm mt-auto [&>p:last-of-type]:mb-0 opacity-60',
@@ -17,14 +17,13 @@
           "
         />
       </slot>
-      <slot name="links"></slot>
+      <slot name="links" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
-import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 
 const themedClass = useTheme('DesignSystemOrganismsFactCard')

package/components/DesignSystem/Organisms/FeatureCard.vue

@@ -11,11 +11,11 @@
         <Media
           v-if="image"
           :media="image"
-          imageAspectRatios="16/9"
-          imageSizes="xs:100vw sm:100vw md:50vw lg:50vw"
-          :mediaClass="themedClass('mediaClass')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :elementClass="themedClass('elementClass')"
+          image-aspect-ratios="16/9"
+          image-sizes="xs:100vw sm:100vw md:50vw lg:50vw"
+          :media-class="themedClass('mediaClass')"
+          :figcaption-class="themedClass('figcaptionClass')"
+          :element-class="themedClass('elementClass')"
         />
         <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
           <Media :media="icon" />
@@ -38,23 +38,23 @@
         <slot name="content">
           <DesignSystemOrganismsContentBlock
             :pretitle="pretitle"
-            :pretitleClass="
+            :pretitle-class="
               themedClass(
                 'pretitleClass',
                 'text-center @xl:text-left [&>p:last-of-type]:mb-0 text-base lg:text-base font-medium',
               )
             "
             :title="title"
-            :titleWeight="titleWeight"
-            :titleStyle="'heading-5'"
-            :titleClass="
+            :title-weight="titleWeight"
+            :title-style="'heading-5'"
+            :title-class="
               themedClass(
                 'titleClass',
                 'mb-2 text-center @xl:text-left font-semibold',
               )
             "
             :text="text"
-            :textClass="
+            :text-class="
               themedClass(
                 'textClass',
                 'text-center @xl:text-left [&>p:last-of-type]:mb-0',
@@ -78,10 +78,10 @@
               :title="$texts('teaser_card.link_label', 'Read more')"
               :link="link?.path"
               :target-blank="false"
-              :buttonStyle="'focus'"
-              :colorScheme="colorScheme"
-              :buttonClass="themedClass('buttonClass')"
-              :labelClass="themedClass('labelClass')"
+              :button-style="'focus'"
+              :color-scheme="colorScheme"
+              :button-class="themedClass('buttonClass')"
+              :label-class="themedClass('labelClass')"
             />
           </div>
         </slot>

package/components/DesignSystem/Organisms/FlipTeaser.vue

@@ -10,11 +10,11 @@
       <Media
         v-if="image"
         :media="image"
-        imageSizes="xs:100vw sm:100vw md:50vw lg:320px"
-        imageAspectRatios="1/1"
-        :mediaClass="themedClass('mediaClass', 'w-full')"
-        :figcaptionClass="themedClass('figcaptionClass')"
-        :elementClass="themedClass('elementClass')"
+        image-sizes="xs:100vw sm:100vw md:50vw lg:320px"
+        image-aspect-ratios="1/1"
+        :media-class="themedClass('mediaClass', 'w-full')"
+        :figcaption-class="themedClass('figcaptionClass')"
+        :element-class="themedClass('elementClass')"
       />
       <!-- Opaque Overlay -->
       <div :class="opaqueOverlay({ colorScheme })" />
@@ -33,7 +33,7 @@
       <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
         <Media
           :media="icon"
-          :mediaClass="
+          :media-class="
             themedClass(
               'iconMediaClass',
               'w-full h-full object-scale-down object-center',
@@ -42,11 +42,11 @@
         />
       </div>
       <DesignSystemOrganismsContentBlock
-        containerClass="mt-auto"
+        container-class="mt-auto"
         :title="title"
-        :titleWeight="titleWeight"
-        :titleStyle="'heading-5'"
-        :titleClass="themedClass('titleClass', 'font-semibold mb-0')"
+        :title-weight="titleWeight"
+        :title-style="'heading-5'"
+        :title-class="themedClass('titleClass', 'font-semibold mb-0')"
       />
     </div>
 
@@ -65,30 +65,30 @@
           <div>
             <DesignSystemOrganismsContentBlock
               :pretitle="pretitle"
-              :pretitleClass="
+              :pretitle-class="
                 themedClass(
                   'overlayPretitleClass',
                   'text-gray-300 font-medium text-base lg:text-base mb-2',
                 )
               "
               :title="title"
-              :titleStyle="'heading-5'"
-              :titleWeight="titleWeight"
-              :titleClass="themedClass('overlayTitleClass', 'mb-2')"
+              :title-style="'heading-5'"
+              :title-weight="titleWeight"
+              :title-class="themedClass('overlayTitleClass', 'mb-2')"
               :subtitle="subtitle"
-              :subtitleClass="themedClass('overlaySubtitleClass')"
+              :subtitle-class="themedClass('overlaySubtitleClass')"
               :text="text"
-              :textClass="
+              :text-class="
                 themedClass(
                   'overlayTextClass',
                   'text-sm line-clamp-3 [&>p:last-of-type]:mb-0',
                 )
               "
-              :colorScheme="colorScheme"
+              :color-scheme="colorScheme"
             />
           </div>
 
-          <slot name="links"></slot>
+          <slot name="links" />
         </div>
       </slot>
 
@@ -113,7 +113,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const themedClass = useTheme('DesignSystemOrganismsFlipTeaser')
 
-const props = defineProps<{
+defineProps<{
   image?: MediaFragment
   icon?: MediaFragment
   pretitle?: string

package/components/DesignSystem/Organisms/HeaderHero.vue

@@ -13,13 +13,13 @@
     <Media
       v-if="image"
       :media="image"
-      imageSizes="xs:100vw sm:100vw md:100vw lg:100vw"
-      imageAspectRatios="xs:1/1 sm:1/1 md:16/9 lg:16/9"
-      :mediaClass="
+      image-sizes="xs:100vw sm:100vw md:100vw lg:100vw"
+      image-aspect-ratios="xs:1/1 sm:1/1 md:16/9 lg:16/9"
+      :media-class="
         themedClass('mediaClass', 'header-grid-item max-h-[1080px] h-full')
       "
-      :figcaptionClass="themedClass('figcaptionClass')"
-      :elementClass="
+      :figcaption-class="themedClass('figcaptionClass')"
+      :element-class="
         themedClass('elementClass', 'size-full object-cover object-center')
       "
     />
@@ -33,7 +33,7 @@
           'header-grid-item z-10 w-full self-stretch bg-black opacity-50',
         )
       "
-    ></div>
+    />
 
     <!-- Content row -->
     <DesignSystemAtomsGridRow
@@ -42,11 +42,11 @@
       <div :class="themedClass('columnClass', 'col-span-12')">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          titleWeight="h1"
-          colorScheme="dark"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          title-weight="h1"
+          color-scheme="dark"
         />
 
         <slot name="subtitle">
@@ -109,7 +109,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type MediaFragment } from '#graphql-operations'
+import type { MediaFragment } from '#graphql-operations'
 
 defineProps<{
   title?: string

package/components/DesignSystem/Organisms/HeaderTextImage.vue

@@ -12,13 +12,13 @@
         <slot name="content">
           <DesignSystemOrganismsContentBlock
             :title="title"
-            titleWeight="p"
-            :titleClass="themedClass('titleClass', 'text-h1 mb-4')"
+            title-weight="p"
+            :title-class="themedClass('titleClass', 'text-h1 mb-4')"
             :text="description"
-            :textClass="themedClass('textClass', 'text-h6')"
+            :text-class="themedClass('textClass', 'text-h6')"
           />
         </slot>
-        <slot name="extra"></slot>
+        <slot name="extra" />
       </div>
 
       <div
@@ -32,11 +32,11 @@
         <Media
           v-if="image"
           :media="image"
-          imageSizes="xs:100vw sm:100vw md:800px lg:800px"
-          :mediaClass="themedClass('mediaClass')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :elementClass="themedClass('elementClass', 'rounded-lg')"
-          imageAspectRatios="4/3"
+          image-sizes="xs:100vw sm:100vw md:800px lg:800px"
+          :media-class="themedClass('mediaClass')"
+          :figcaption-class="themedClass('figcaptionClass')"
+          :element-class="themedClass('elementClass', 'rounded-lg')"
+          image-aspect-ratios="4/3"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type MediaFragment } from '#graphql-operations'
+import type { MediaFragment } from '#graphql-operations'
 
 defineProps<{
   title?: string

package/components/DesignSystem/Organisms/LinkList.vue

@@ -2,19 +2,21 @@
   <div :class="linkList({ colorScheme, teaserStyle })">
     <DesignSystemOrganismsContentBlock
       :title="title"
-      :titleWeight="titleWeight"
-      :titleStyle="'heading-5'"
-      :titleClass="themedClass('titleClass', 'mb-0 font-semibold')"
+      :title-weight="titleWeight"
+      :title-style="'heading-5'"
+      :title-class="themedClass('titleClass', 'mb-0 font-semibold')"
     />
 
     <ul :class="themedClass('listClass', 'flex flex-col gap-2')">
       <li
-        v-for="link in links"
-        :key="link?.uri?.path + '-' + link?.title"
+        v-for="link in resolvedLinks"
+        :key="link.url + '-' + link.title"
         :class="themedClass('listItemClass')"
       >
         <NuxtLink
-          :to="link?.uri?.path"
+          :to="link.url"
+          :external="link.isFile"
+          :target="link.isFile ? '_blank' : undefined"
           :class="linkLabel({ colorScheme, teaserStyle })"
         >
           <div :class="bulletPointContainer({ colorScheme, teaserStyle })">
@@ -29,9 +31,9 @@
     </ul>
 
     <DesignSystemOrganismsContentBlock
-      containerClass="mt-auto"
+      container-class="mt-auto"
       :text="text"
-      :textClass="
+      :text-class="
         themedClass(
           'textClass',
           'mt-6 text-xs [&>p:last-of-type]:mb-0 opacity-75',
@@ -43,24 +45,30 @@
 
 <script lang="ts" setup>
 import type { ColorScheme, TeaserStyle } from '@iqual/nuxt-icms/types/global'
+import type { LinkFieldUri } from '@iqual/nuxt-icms/composables/useLinkUrl'
 import { tv } from 'tailwind-variants'
 
 const themedClass = useTheme('DesignSystemOrganismsLinkList')
 
-defineProps<{
+const props = defineProps<{
   title?: string
   titleWeight?: string
   text?: string
   links?: ({
     title?: string
-    uri?: {
-      path?: string
-    }
+    uri?: LinkFieldUri
   } | null)[]
   colorScheme?: ColorScheme
   teaserStyle?: TeaserStyle
 }>()
 
+const resolvedLinks = computed(() =>
+  (props.links ?? []).map((link) => ({
+    title: link?.title,
+    ...resolveLinkUrl(link?.uri),
+  })),
+)
+
 const linkList = tv({
   base: themedClass('linkListBase', 'flex flex-col gap-8 p-8'),
   variants: {

package/components/DesignSystem/Organisms/LogoElement.vue

@@ -2,16 +2,17 @@
   <NuxtLink
     :to="link"
     :title="title"
+    :external="external"
     :target="targetBlank ? '_blank' : '_self'"
     :class="logoElement({ colorScheme })"
   >
     <Media
       v-if="logo"
       :media="logo"
-      imageSizes="xs:200px"
-      :mediaClass="themedClass('mediaClass', 'w-full h-full')"
-      :figcaptionClass="themedClass('figcaptionClass')"
-      :elementClass="
+      image-sizes="xs:200px"
+      :media-class="themedClass('mediaClass', 'w-full h-full')"
+      :figcaption-class="themedClass('figcaptionClass')"
+      :element-class="
         themedClass('elementClass', 'w-full h-full object-scale-down')
       "
     />
@@ -29,6 +30,8 @@ defineProps<{
   logo?: MediaFragment
   link?: string
   title?: string
+  /** Force a native browser navigation (bypasses the Vue router), e.g. for file downloads. */
+  external?: boolean
   targetBlank?: boolean
   colorScheme?: ColorScheme
   mediaClass?: string

package/components/DesignSystem/Organisms/Map.vue

@@ -24,7 +24,7 @@
         >
           <mgl-popup>
             <h6>{{ location.label }}</h6>
-            <div v-html="location.description"></div>
+            <div v-html="location.description" />
           </mgl-popup>
         </mgl-marker>
       </MglMap>

package/components/DesignSystem/Organisms/SearchResults.vue

@@ -13,22 +13,31 @@
       </span>
     </p>
     <component
-      v-for="teaser in results?.results"
       :is="teaserComponent(teaser?.bundle!)"
+      v-for="(teaser, index) in results?.results"
+      :key="`${teaser?.bundle}-${index}`"
       v-bind="teaser"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ContentSearchQuery } from '#graphql-operations'
+import type { LayoutOverviewResultsSearchQuery } from '#graphql-operations'
 
-type GroupedSearchResults = NonNullable<
-  NonNullable<ContentSearchQuery['searchApiQuery']>['facets']
->[number]
+/**
+ * One display group as passed by FacetedSearchUI: either a facet group, which
+ * adds a label and a count, or the ungrouped result list.
+ */
+type SearchResultGroup = {
+  label?: string
+  count?: number
+  results: NonNullable<
+    LayoutOverviewResultsSearchQuery['searchApiQuery']
+  >['results']
+}
 
 defineProps<{
-  results: GroupedSearchResults
+  results: SearchResultGroup
 }>()
 
 const themedClass = useTheme('DesignSystemOrganismsSearchResults')

package/components/DesignSystem/Organisms/SpotlightCard.vue

@@ -11,15 +11,15 @@
         <Media
           v-if="image"
           :media="image"
-          imageAspectRatios="3/4"
-          imageSizes="xs:100vw sm:100vw md:50vw lg:33vw"
-          :mediaClass="themedClass('mediaClass')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :elementClass="themedClass('elementClass')"
+          image-aspect-ratios="3/4"
+          image-sizes="xs:100vw sm:100vw md:50vw lg:33vw"
+          :media-class="themedClass('mediaClass')"
+          :figcaption-class="themedClass('figcaptionClass')"
+          :element-class="themedClass('elementClass')"
         />
       </div>
 
-      <div v-if="image" :class="overlay({ colorScheme })"></div>
+      <div v-if="image" :class="overlay({ colorScheme })" />
 
       <div
         :class="
@@ -32,7 +32,7 @@
         <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
           <Media
             :media="icon"
-            :mediaClass="
+            :media-class="
               themedClass(
                 'iconMediaClass',
                 'w-full h-full object-scale-down object-center',
@@ -44,21 +44,21 @@
           <DesignSystemOrganismsContentBlock
             class="mt-auto"
             :pretitle="pretitle"
-            :pretitleClass="
+            :pretitle-class="
               themedClass(
                 'pretitleClass',
                 '[&>p:last-of-type]:mb-0 text-base lg:text-base font-medium',
               )
             "
             :title="title"
-            :titleWeight="titleWeight"
-            :titleStyle="'heading-5'"
-            :titleClass="themedClass('titleClass', 'mb-2 font-semibold')"
+            :title-weight="titleWeight"
+            :title-style="'heading-5'"
+            :title-class="themedClass('titleClass', 'mb-2 font-semibold')"
             :text="text"
-            :textClass="themedClass('textClass', '[&>p:last-of-type]:mb-0')"
+            :text-class="themedClass('textClass', '[&>p:last-of-type]:mb-0')"
           />
         </slot>
-        <slot name="links"></slot>
+        <slot name="links" />
       </div>
     </div>
   </div>
@@ -71,7 +71,7 @@ import { tv } from 'tailwind-variants'
 
 const themedClass = useTheme('DesignSystemOrganismsSpotlightCard')
 
-const props = defineProps<{
+defineProps<{
   pretitle?: string
   title?: string
   text?: string
@@ -140,19 +140,19 @@ const overlay = tv({
     colorScheme: {
       none: themedClass(
         'overlayVariantsColorSchemeNone',
-        'bg-gradient-to-t from-white/90 via-white/50 to-white/0',
+        'bg-linear-to-t from-white/90 via-white/50 to-white/0',
       ),
       dark: themedClass(
         'overlayVariantsColorSchemeDark',
-        'bg-gradient-to-t from-black/90 via-black/50 to-black/0',
+        'bg-linear-to-t from-black/90 via-black/50 to-black/0',
       ),
       light: themedClass(
         'overlayVariantsColorSchemeLight',
-        'bg-gradient-to-t from-white/90 via-white/50 to-white/0',
+        'bg-linear-to-t from-white/90 via-white/50 to-white/0',
       ),
       accent: themedClass(
         'overlayVariantsColorSchemeAccent',
-        'bg-gradient-to-t from-black/90 via-black/50 to-black/0',
+        'bg-linear-to-t from-black/90 via-black/50 to-black/0',
       ),
     },
   },