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

package/components/Blokkli/Testimonial/Element/index.vue

@@ -10,5 +10,4 @@ const props = defineProps<ParagraphIcmsTestimonialElementFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_testimonial_element',
 })
-
 </script>

package/components/Blokkli/Text/index.vue

@@ -17,5 +17,4 @@ const blokkliData = defineBlokkli({
     'colorScheme',
   ],
 })
-
 </script>

package/components/DesignSystem/Atoms/Button.vue

@@ -4,6 +4,7 @@
     :type="type"
     :label="label"
     :title="title"
+    :external="external"
     :target="targetBlank ? '_blank' : '_self'"
     :ui="{
       base: cn(
@@ -34,6 +35,8 @@ const props = defineProps<{
   title?: string
   link?: string
   params?: string
+  /** Force a native browser navigation (bypasses the Vue router), e.g. for file downloads. */
+  external?: boolean
   targetBlank?: boolean
   buttonStyle?: ButtonStyle
   colorScheme?: ColorScheme

package/components/DesignSystem/Atoms/GridRow.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="themedClass('class', 'container mx-auto grid grid-cols-12 gap-6')">
+  <div
+    :class="themedClass('class', 'container mx-auto grid grid-cols-12 gap-6')"
+  >
     <slot />
   </div>
 </template>

package/components/DesignSystem/Molecules/ButtonGroup.vue

@@ -9,15 +9,16 @@
     "
   >
     <DesignSystemAtomsButton
-      v-for="link in links"
+      v-for="(link, index) in links"
+      :key="`${link?.props.link?.uri.path}-${index}`"
       :label="link?.props.label"
       :link="link?.props.link?.uri.path"
       :params="link?.props.params"
       :target-blank="link?.props.targetBlank"
       :title="link?.props.title"
-      :colorScheme="colorScheme"
-      :buttonClass="themedClass('buttonClass')"
-      :labelClass="themedClass('labelClass')"
+      :color-scheme="colorScheme"
+      :button-class="themedClass('buttonClass')"
+      :label-class="themedClass('labelClass')"
     />
   </div>
 </template>

package/components/DesignSystem/Molecules/IconText.vue

@@ -4,19 +4,19 @@
       <Media
         v-if="icon"
         :media="icon"
-        :mediaClass="themedClass('mediaClass', 'size-10')"
-        :figcaptionClass="themedClass('figcaptionClass')"
-        :elementClass="themedClass('elementClass')"
+        :media-class="themedClass('mediaClass', 'size-10')"
+        :figcaption-class="themedClass('figcaptionClass')"
+        :element-class="themedClass('elementClass')"
       />
     </div>
     <DesignSystemOrganismsContentBlock
       :title="title"
-      :titleWeight="titleWeight"
-      :titleClass="
+      :title-weight="titleWeight"
+      :title-class="
         themedClass('titleClass', 'text-xl lg:text-xl font-semibold mb-2')
       "
       :text="text"
-      :textClass="themedClass('textClass')"
+      :text-class="themedClass('textClass')"
     />
   </div>
 </template>

package/components/DesignSystem/Molecules/MediaLightbox.vue

@@ -21,13 +21,13 @@
       <div
         v-if="isOpen"
         ref="lightboxContainer"
-        @click.self="$emit('close')"
         :class="
           themedClass(
             'lightboxContainerClass',
             'fixed inset-0 z-103 flex items-center justify-center bg-black/90 backdrop-blur-xs',
           )
         "
+        @click.self="$emit('close')"
       >
         <!-- Close button -->
         <button
@@ -35,13 +35,13 @@
           :aria-label="
             $texts('lightbox.close_button_aria_label', 'Close lightbox')
           "
-          @click="$emit('close')"
           :class="
             themedClass(
               'lightboxCloseButtonClass',
               'absolute top-4 right-4 z-10 cursor-pointer rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden',
             )
           "
+          @click="$emit('close')"
         >
           <X :size="24" :class="themedClass('lightboxCloseButtonIconClass')" />
         </button>
@@ -67,7 +67,7 @@
                 'h-8 w-8 animate-spin rounded-full border-2 border-white border-t-transparent',
               )
             "
-          ></div>
+          />
         </div>
 
         <!-- Carousel-based media container -->
@@ -86,9 +86,8 @@
             :start-index="currentIndex"
             :arrows="mediaObjects.length > 1"
             :watch-drag="mediaObjects.length > 1"
-            nextIcon="i-lucide-chevron-right"
-            prevIcon="i-lucide-chevron-left"
-            @select="onCarouselSelect"
+            next-icon="i-lucide-chevron-right"
+            prev-icon="i-lucide-chevron-left"
             :ui="{
               root: themedClass('carouselClass', 'flex h-full w-full flex-col'),
               item: themedClass('carouselClass', 'basis-full h-full'),
@@ -102,6 +101,7 @@
                 'absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black disabled:bg-black aria-disabled:bg-black active:bg-black ring-black p-2 text-white transition-colors hover:bg-black focus:outline-hidden focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
               ),
             }"
+            @select="onCarouselSelect"
           >
             <template #default="{ item, index }">
               <div
@@ -121,10 +121,10 @@
                   "
                   :video-muted="true"
                   :video-controls="true"
+                  :media-class="getMediaWrapperClass(item)"
+                  :element-class="getMediaElementClass(item)"
                   @load="handleMediaLoad"
                   @error="handleMediaError"
-                  :mediaClass="getMediaWrapperClass(item)"
-                  :elementClass="getMediaElementClass(item)"
                 />
 
                 <!-- Fallback/error state -->

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -3,12 +3,11 @@
     <UCarousel
       v-if="media"
       ref="carouselRef"
-      v-model="carouselIndex"
       :items="media"
       :arrows="media.length > 1"
       :watch-drag="media.length > 1"
-      nextIcon="i-lucide-chevron-right"
-      prevIcon="i-lucide-chevron-left"
+      next-icon="i-lucide-chevron-right"
+      prev-icon="i-lucide-chevron-left"
       :class="themedClass('carouselClass')"
       :ui="{
         item: 'basis-full',
@@ -42,15 +41,15 @@
           <Media
             v-if="item"
             :media="item"
-            :imageSizes="imageSizes"
-            :imageAspectRatios="imageAspectRatios"
-            :imageFormat="imageFormat"
-            :showCaption="showCaption"
-            :mediaClass="themedClass('mediaClass')"
-            :figcaptionClass="
+            :image-sizes="imageSizes"
+            :image-aspect-ratios="imageAspectRatios"
+            :image-format="imageFormat"
+            :show-caption="showCaption"
+            :media-class="themedClass('mediaClass')"
+            :figcaption-class="
               themedClass('figcaptionClass', 'mt-2 italic text-center')
             "
-            :elementClass="themedClass('elementClass', 'w-full')"
+            :element-class="themedClass('elementClass', 'w-full')"
           />
         </div>
       </template>
@@ -100,7 +99,6 @@ const props = defineProps<{
 }>()
 
 const carouselRef = ref()
-const carouselIndex = ref(0)
 
 const {
   isOpen,

package/components/DesignSystem/Molecules/Partnership.vue

@@ -3,16 +3,17 @@
     <NuxtLink
       :to="link"
       :title="title"
+      :external="external"
       :target="targetBlank ? '_blank' : '_self'"
       :class="themedClass('linkClass')"
     >
       <Media
         v-if="logo"
         :media="logo"
-        imageSizes="xs:100vw sm:100vw md:50vw lg:580px"
-        :mediaClass="themedClass('mediaClass', 'h-full')"
-        :figcaptionClass="themedClass('figcaptionClass')"
-        :elementClass="themedClass('elementClass')"
+        image-sizes="xs:100vw sm:100vw md:50vw lg:580px"
+        :media-class="themedClass('mediaClass', 'h-full')"
+        :figcaption-class="themedClass('figcaptionClass')"
+        :element-class="themedClass('elementClass')"
       />
     </NuxtLink>
   </div>
@@ -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
   linkClass?: string
   mediaClass?: string

package/components/DesignSystem/Molecules/Table.vue

@@ -35,8 +35,8 @@
                 <span v-if="part.type === 'text'">{{ part.content }}</span>
                 <span v-else-if="part.type === 'html'" v-html="part.content" />
                 <component
-                  v-else-if="part.type === 'icon'"
                   :is="part.component"
+                  v-else-if="part.type === 'icon'"
                   :size="part.size || 24"
                   :stroke-width="part.strokeWidth || 2"
                   class="inline-block"
@@ -73,10 +73,29 @@
 </template>
 
 <script lang="ts" setup>
+import type { Component } from 'vue'
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { tv } from 'tailwind-variants'
 import * as LucideIcons from 'lucide-vue-next'
 
+/**
+ * A cell is rendered either as a single value or, when it mixes text and
+ * inline icons, as a list of parts.
+ */
+type TableCellPart =
+  | { type: 'text'; content: unknown }
+  | { type: 'html'; content: string }
+  | { type: 'icon'; component: Component; size: number; strokeWidth: number }
+
+type TableCell = TableCellPart | TableCellPart[]
+
+function hasContent(part: TableCellPart): boolean {
+  if (part.type === 'icon') {
+    return true
+  }
+  return !!part.content && String(part.content).trim() !== ''
+}
+
 const themedClass = useTheme('DesignSystemMoleculesTable')
 
 const props = defineProps<{
@@ -193,11 +212,15 @@ const customSvgIcons: Record<string, string> = {
   cross: crossIcon,
 }
 
+type ResolvedIcon =
+  { type: 'custom'; svg: string } | { type: 'lucide'; component: Component }
+
 // Helper to resolve icon from lucide or custom registry
-const resolveIcon = (iconName: string) => {
+const resolveIcon = (iconName: string): ResolvedIcon | null => {
   // Check if it's a custom SVG icon first
-  if (customSvgIcons[iconName]) {
-    return { type: 'custom', svg: customSvgIcons[iconName] }
+  const customSvg = customSvgIcons[iconName]
+  if (customSvg) {
+    return { type: 'custom', svg: customSvg }
   }
 
   // Convert kebab-case to PascalCase for Lucide icon lookup
@@ -294,7 +317,7 @@ const tableRows = computed(() => {
     .sort((a, b) => a.weight - b.weight)
     .map(({ data }) => {
       const { weight, ...rowWithoutWeight } = data
-      return Object.values(rowWithoutWeight).map((item) => {
+      return Object.values(rowWithoutWeight).map((item): TableCell => {
         if (typeof item !== 'string') {
           return { type: 'text', content: item }
         }
@@ -309,11 +332,14 @@ const tableRows = computed(() => {
         }
 
         // Build array of parts (text and icons mixed)
-        const parts: any[] = []
+        const parts: TableCellPart[] = []
         let lastIndex = 0
 
         for (const match of matches) {
           const iconName = match[1]
+          if (!iconName) {
+            continue
+          }
           const matchStart = match.index! + (match[0].startsWith(' ') ? 1 : 0)
           const matchEnd = match.index! + match[0].length
 
@@ -356,19 +382,9 @@ const tableRows = computed(() => {
       })
     })
     .filter((row) =>
-      row.some((cell) => {
-        if (Array.isArray(cell)) {
-          return cell.some(
-            (part) =>
-              part.type === 'icon' ||
-              (part.content && String(part.content).trim() !== ''),
-          )
-        }
-        return (
-          cell.type === 'icon' ||
-          (cell.content && String(cell.content).trim() !== '')
-        )
-      }),
+      row.some((cell) =>
+        Array.isArray(cell) ? cell.some(hasContent) : hasContent(cell),
+      ),
     )
 })
 </script>

package/components/DesignSystem/Molecules/TitleComposition.vue

@@ -1,28 +1,59 @@
 <template>
-  <div v-if="pretitle || title || subtitle" :class="themedClass('containerClass')">
+  <div
+    v-if="pretitle || title || subtitle"
+    :class="themedClass('containerClass')"
+  >
     <p
       v-if="pretitle"
       :class="
         themedClass('pretitleClass', 'mb-2 text-xl font-semibold lg:text-2xl')
       "
-    >
-      {{ pretitle }}
-    </p>
-    <h1 v-if="title && weight === 'h1'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h1>
-    <h2 v-if="title && weight === 'h2'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h2>
-    <h3 v-if="title && weight === 'h3'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h3>
-    <h4 v-if="title && weight === 'h4'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h4>
-    <h5 v-if="title && weight === 'h5'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h5>
-    <h6 v-if="title && weight === 'h6'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h6>
-    <p v-if="title && weight === 'p'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></p>
-    <p v-if="subtitle" :class="themedClass('subtitleClass', 'mb-2 font-semibold')">
-      {{ subtitle }}
-    </p>
+      v-html="pretitle.replace(/\n/g, '<br>')"
+    />
+    <h1
+      v-if="title && weight === 'h1'"
+      :class="themedClass('titleClass', titleClassList)"
+      v-html="title.replace(/\n/g, '<br>')"
+    />
+    <h2
+      v-if="title && weight === 'h2'"
+      :class="themedClass('titleClass', titleClassList)"
+      v-html="title.replace(/\n/g, '<br>')"
+    />
+    <h3
+      v-if="title && weight === 'h3'"
+      :class="themedClass('titleClass', titleClassList)"
+      v-html="title.replace(/\n/g, '<br>')"
+    />
+    <h4
+      v-if="title && weight === 'h4'"
+      :class="themedClass('titleClass', titleClassList)"
+      v-html="title.replace(/\n/g, '<br>')"
+    />
+    <h5
+      v-if="title && weight === 'h5'"
+      :class="themedClass('titleClass', titleClassList)"
+      v-html="title.replace(/\n/g, '<br>')"
+    />
+    <h6
+      v-if="title && weight === 'h6'"
+      :class="themedClass('titleClass', titleClassList)"
+      v-html="title.replace(/\n/g, '<br>')"
+    />
+    <p
+      v-if="title && weight === 'p'"
+      :class="themedClass('titleClass', titleClassList)"
+      v-html="title.replace(/\n/g, '<br>')"
+    />
+    <p
+      v-if="subtitle"
+      :class="themedClass('subtitleClass', 'mb-2 font-semibold')"
+      v-html="subtitle.replace(/\n/g, '<br>')"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-
 const themedClass = useTheme('DesignSystemMoleculesTitleComposition')
 
 const props = withDefaults(

package/components/DesignSystem/Molecules/iFrame.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative">
-    <div v-if="isEditing" class="absolute inset-0 z-10 h-full w-full"></div>
+    <div v-if="isEditing" class="absolute inset-0 z-10 h-full w-full" />
     <iframe
       class="h-full w-full"
       :title="title"
@@ -8,7 +8,7 @@
       :style="{ height: height ? `${height}px` : '600px' }"
       frameborder="0"
       loading="lazy"
-    ></iframe>
+    />
   </div>
 </template>
 

package/components/DesignSystem/Organisms/CallToAction.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -15,13 +15,13 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="cn(themedClass('pretitleClass'), alignmentClassList)"
+          :pretitle-class="cn(themedClass('pretitleClass'), alignmentClassList)"
           :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :titleClass="cn(themedClass('titleClass'), alignmentClassList)"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :title-class="cn(themedClass('titleClass'), alignmentClassList)"
           :text="text"
-          :textClass="
+          :text-class="
             cn(
               themedClass('textClass', 'text-lg xl:text-2xl [&>p]:mb-0!'),
               alignmentClassList,
@@ -58,6 +58,7 @@
 
 <script setup lang="ts">
 import type { MediaFragment } from '#graphql-operations'
+import type { FieldListItem } from '#blokkli/types'
 import type {
   ColorScheme,
   AlignHorizontalFull,
@@ -75,7 +76,7 @@ defineProps<{
   subtitle?: string
   text?: string
   image?: MediaFragment
-  buttons?: Array<object>
+  buttons?: Array<FieldListItem | null>
   containerClass?: string
   rowClass?: string
   firstColumnClass?: string

package/components/DesignSystem/Organisms/CallToActionFeature.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass', 'relative z-1')"
   >
@@ -16,11 +16,11 @@
       >
         <Media
           :media="image"
-          imageSizes="xs:175px xl:350px"
-          imageAspectRatios="1/1"
-          :mediaClass="themedClass('mediaClass', '-mt-12 xl:w-full')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :elementClass="themedClass('elementClass')"
+          image-sizes="xs:175px xl:350px"
+          image-aspect-ratios="1/1"
+          :media-class="themedClass('mediaClass', '-mt-12 xl:w-full')"
+          :figcaption-class="themedClass('figcaptionClass')"
+          :element-class="themedClass('elementClass')"
         />
       </div>
       <div
@@ -74,6 +74,7 @@
 
 <script setup lang="ts">
 import type { MediaFragment } from '#graphql-operations'
+import type { FieldListItem } from '#blokkli/types'
 import type {
   ColorScheme,
   AlignHorizontalFull,
@@ -84,7 +85,7 @@ const themedClass = useTheme('DesignSystemOrganismsCallToActionFeature')
 defineProps<{
   text?: string
   image?: MediaFragment
-  buttons?: Array<object>
+  buttons?: Array<FieldListItem | null>
   containerClass?: string
   rowClass?: string
   firstColumnClass?: string

package/components/DesignSystem/Organisms/CallToActionFullwidth.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass', 'call-to-action relative')"
   >
@@ -21,15 +21,15 @@
         "
       >
         <DesignSystemOrganismsContentBlock
-          containerClass="w-full"
+          container-class="w-full"
           :pretitle="pretitle"
-          :pretitleClass="cn(themedClass('pretitleClass'), alignmentClassList)"
+          :pretitle-class="cn(themedClass('pretitleClass'), alignmentClassList)"
           :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :titleClass="cn(themedClass('titleClass'), alignmentClassList)"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :title-class="cn(themedClass('titleClass'), alignmentClassList)"
           :text="text"
-          :textClass="
+          :text-class="
             cn(
               themedClass('textClass', 'text-lg xl:text-2xl'),
               alignmentClassList,
@@ -57,6 +57,7 @@
 
 <script setup lang="ts">
 import type { MediaFragment } from '#graphql-operations'
+import type { FieldListItem } from '#blokkli/types'
 import type {
   ColorScheme,
   AlignHorizontalFull,
@@ -73,7 +74,7 @@ defineProps<{
   subtitle?: string
   text?: string
   image?: MediaFragment
-  buttons?: Array<object>
+  buttons?: Array<FieldListItem | null>
   containerClass?: string
   rowClass?: string
   firstColumnClass?: string

package/components/DesignSystem/Organisms/ContentBlock.vue

@@ -2,11 +2,11 @@
   <div :class="themedClass('containerClass', 'w-full')">
     <DesignSystemMoleculesTitleComposition
       :pretitle="pretitle"
-      :pretitleClass="themedClass('pretitleClass')"
+      :pretitle-class="themedClass('pretitleClass')"
       :title="title"
-      :titleClass="themedClass('titleClass')"
+      :title-class="themedClass('titleClass')"
       :subtitle="subtitle"
-      :subtitleClass="themedClass('subtitleClass')"
+      :subtitle-class="themedClass('subtitleClass')"
       :weight="titleWeight"
       :style="titleStyle"
     />
@@ -14,12 +14,12 @@
     <DesignSystemMoleculesMediaSlider
       v-if="media && media.length"
       :media="media"
-      :imageFormat="imageFormat"
-      :imageSizes="imageSizes"
-      :colorScheme="colorScheme"
-      :mediaClass="themedClass('mediaClass')"
-      :containerClass="themedClass('mediaContainerClass')"
-      :elementClass="themedClass('mediaElementClass')"
+      :image-format="imageFormat"
+      :image-sizes="imageSizes"
+      :color-scheme="colorScheme"
+      :media-class="themedClass('mediaClass')"
+      :container-class="themedClass('mediaContainerClass')"
+      :element-class="themedClass('mediaElementClass')"
     />
 
     <div
@@ -33,16 +33,16 @@
           textColumnClass,
         )
       "
-      v-html="text"
+      v-html="processedText"
     />
 
     <DesignSystemMoleculesButtonGroup
       :links="links"
-      :colorScheme="colorScheme"
-      :containerClass="themedClass('buttonGroupContainerClass')"
-      :buttonAlignment="buttonAlignment"
-      :buttonClass="themedClass('buttonClass')"
-      :labelClass="themedClass('labelClass')"
+      :color-scheme="colorScheme"
+      :container-class="themedClass('buttonGroupContainerClass')"
+      :button-alignment="buttonAlignment"
+      :button-class="themedClass('buttonClass')"
+      :label-class="themedClass('labelClass')"
     />
   </div>
 </template>
@@ -83,7 +83,7 @@ const props = defineProps<{
   textColumns?: string
   titleWeight?: string
   titleStyle?: string
-  media?: MediaFragment[]
+  media?: (MediaFragment | null)[]
   imageAspectRatios?: string
   imageSizes?: string
   imageLoading?: 'lazy' | 'eager' | undefined
@@ -104,6 +104,16 @@ const props = defineProps<{
   labelClass?: string
 }>()
 
+// Rich text from CKEditor already contains markup, but plain multi-line
+// content (e.g. entered before an editor was attached to the format) keeps
+// raw newlines which HTML collapses - convert those to <br>.
+const processedText = computed(() => {
+  if (!props.text || props.text.includes('<')) {
+    return props.text
+  }
+  return props.text.replace(/\n/g, '<br>')
+})
+
 const textColumnClass = computed(() => {
   if (props?.textColumns === 'two') {
     return 'md:column-count-2'