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

package/composables/useImageSources.ts

@@ -5,6 +5,12 @@ interface ImageSource {
   sizes?: string
   srcset: string
   media?: string
+  /**
+   * Intrinsic size of the largest candidate, rendered as the width/height
+   * attributes so the browser reserves the box before the image has loaded.
+   */
+  width?: number
+  height?: number
 }
 
 interface UseImageSourcesOptions {
@@ -14,15 +20,18 @@ interface UseImageSourcesOptions {
 }
 
 // Local implementation of parseSizes from @nuxt/image
-function parseSizes(input: Record<string, string | number> | string): Record<string, string> {
+function parseSizes(
+  input: Record<string, string | number> | string,
+): Record<string, string> {
   const sizes: Record<string, string> = {}
-  if (typeof input === "string") {
+  if (typeof input === 'string') {
     for (const entry of input.split(/[\s,]+/).filter((e) => e)) {
-      const s = entry.split(":")
+      const s = entry.split(':')
+      const [key = '', value = ''] = s
       if (s.length !== 2) {
-        sizes["1px"] = s[0].trim()
+        sizes['1px'] = key.trim()
       } else {
-        sizes[s[0].trim()] = s[1].trim()
+        sizes[key.trim()] = value.trim()
       }
     }
   } else {
@@ -32,8 +41,14 @@ function parseSizes(input: Record<string, string | number> | string): Record<str
 }
 
 // Helper function, copied from NuxtImage.
-function getSizesVariant(key: string, size: string, hwRatio: number, img: any): ImageSizesVariant | undefined {
-  const screenMaxWidth = (img.options.screens && img.options.screens[key]) || Number.parseInt(key)
+function getSizesVariant(
+  key: string,
+  size: string,
+  hwRatio: number,
+  img: any,
+): ImageSizesVariant | undefined {
+  const screenMaxWidth =
+    (img.options.screens && img.options.screens[key]) || Number.parseInt(key)
   const isFluid = size.endsWith('vw')
   if (!isFluid && /^\d+$/.test(size)) {
     size = size + 'px'
@@ -112,44 +127,56 @@ export function useImageSources(options: UseImageSourcesOptions) {
     if (!sourceImage || sourceImage === baseUrl) return []
 
     const sources: ImageSource[] = []
-    const imgSizes = imageSizesRef.value ?? Object.keys(img.options.screens).map(key => `${key}:100vw`).join(' ')
+    const imgSizes =
+      imageSizesRef.value ??
+      Object.keys(img.options.screens)
+        .map((key) => `${key}:100vw`)
+        .join(' ')
 
     // No aspect ratios provided.
     if (!imageAspectRatiosRef.value) {
       const imageSize = img.getSizes(sourceImage, {
         sizes: imgSizes,
         modifiers: {
-          format: 'webp'
-        }
+          format: 'webp',
+        },
+      })
+      // Cast the ImageSizes result to our ImageSource interface; the natural
+      // aspect ratio comes from the original file.
+      sources.push({
+        ...(imageSize as ImageSource),
+        width: mediaRef.value?.dimensions?.width ?? undefined,
+        height: mediaRef.value?.dimensions?.height ?? undefined,
       })
-      // Cast the ImageSizes result to our ImageSource interface
-      sources.push(imageSize as ImageSource)
       return sources
     }
 
     // Aspect ratios provided.
     const parsedAspectRatios = parseSizes(imageAspectRatiosRef.value)
     const parsedImageSizes = parseSizes(imgSizes)
-    const densities = img.options.densities
-    const keys = Object.keys(parsedImageSizes)
-    const lastKey = keys[keys.length - 1]
 
-    for (const keyAspectRatios in parsedAspectRatios) {
-      const [l, h] = parsedAspectRatios[keyAspectRatios].split('/').map(Number)
-      const hwRatio = (l && h) ? h / l : 0
+    for (const [keyAspectRatios, aspectRatio] of Object.entries(
+      parsedAspectRatios,
+    )) {
+      const [l, h] = aspectRatio.split('/').map(Number)
+      const hwRatio = l && h ? h / l : 0
       const sizeVariants = []
       const srcsetVariants = []
 
       let screenSizes = Object.keys(parsedImageSizes)
       if (Object.keys(parsedImageSizes).includes(keyAspectRatios)) {
-        const minSizeIndex = Object.keys(parsedImageSizes).indexOf(keyAspectRatios)
+        const minSizeIndex =
+          Object.keys(parsedImageSizes).indexOf(keyAspectRatios)
         screenSizes = Object.keys(parsedImageSizes).slice(minSizeIndex)
       }
 
-      for (const index in screenSizes) {
-        const screenSize = screenSizes[index]
-
-        const variant = getSizesVariant(screenSize, String(parsedImageSizes[screenSize]), hwRatio, img)
+      for (const screenSize of screenSizes) {
+        const variant = getSizesVariant(
+          screenSize,
+          String(parsedImageSizes[screenSize]),
+          hwRatio,
+          img,
+        )
         if (variant === undefined) {
           continue
         }
@@ -164,17 +191,23 @@ export function useImageSources(options: UseImageSourcesOptions) {
         // Add srcset variants and ignore densities (for current 'size' processed).
         srcsetVariants.push({
           width: variant._cWidth,
+          height: variant._cHeight,
           src: img(sourceImage, {
             width: variant._cWidth ? variant._cWidth : undefined,
             height: variant._cHeight ? variant._cHeight : undefined,
             fit: 'cover',
             format: 'webp',
-            gravity: mediaRef.value?.focalPoint?.focalPoint ? `${mediaRef.value?.focalPoint?.focalPoint?.x}x${mediaRef.value?.focalPoint?.focalPoint?.y}` : 'auto'
+            gravity: mediaRef.value?.focalPoint?.focalPoint
+              ? `${mediaRef.value?.focalPoint?.focalPoint?.x}x${mediaRef.value?.focalPoint?.focalPoint?.y}`
+              : 'auto',
           }),
         })
 
         // Make sure to not create duplicate size variants for the same screen size.
-        if (keyAspectRatios != screenSize && Object.keys(parsedAspectRatios).includes(screenSize)) {
+        if (
+          keyAspectRatios != screenSize &&
+          Object.keys(parsedAspectRatios).includes(screenSize)
+        ) {
           break
         }
       }
@@ -183,13 +216,22 @@ export function useImageSources(options: UseImageSourcesOptions) {
       finaliseSizeVariants(sizeVariants)
       finaliseSrcsetVariants(srcsetVariants)
 
-      const sizesVal = sizeVariants.length ? sizeVariants.map(v => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ') : undefined
+      const sizesVal = sizeVariants.length
+        ? sizeVariants
+            .map((v) => `${v.media ? v.media + ' ' : ''}${v.size}`)
+            .join(', ')
+        : undefined
       const suffix = sizesVal ? 'w' : 'x'
-      const srcsetVal = srcsetVariants.map(v => `${v.src} ${v.width}${suffix}`).join(', ')
+      const srcsetVal = srcsetVariants
+        .map((v) => `${v.src} ${v.width}${suffix}`)
+        .join(', ')
 
+      const largest = srcsetVariants[srcsetVariants.length - 1]
       const source: ImageSource = {
         sizes: sizesVal,
         srcset: srcsetVal,
+        width: largest?.height ? largest.width : undefined,
+        height: largest?.height ? largest.height : undefined,
       }
 
       if (keyAspectRatios != Object.keys(parsedAspectRatios).slice(-1)[0]) {
@@ -202,7 +244,7 @@ export function useImageSources(options: UseImageSourcesOptions) {
 
   return {
     placeHolderImage,
-    imageSources
+    imageSources,
   }
 }
 

package/composables/useInitData.ts

@@ -20,7 +20,6 @@ export default function (): UseInitData {
       mainMenu: computed(() => data.value?.mainMenuLinks || []),
       footerMenu: computed(() => data.value?.footerMenuLinks || []),
       footerMetaMenu: computed(() => data.value?.footerMetaMenuLinks || []),
-    }
+    },
   }
 }
-

package/composables/useIsHomepage.ts

@@ -1,4 +1,4 @@
 export function useIsHomepage() {
   const route = useRoute()
   return computed(() => route.name === 'home')
-}
+}

package/composables/useLinkUrl.ts

@@ -0,0 +1,30 @@
+export interface LinkFieldUri {
+  path?: string | null
+  entity?: {
+    /** Only selected for media entities by the `linkUrl` fragment. */
+    id?: string | null
+  } | null
+}
+
+export interface ResolvedLinkUrl {
+  /** The URL to render. */
+  url?: string
+  /** True when the link points to a media file (e.g. a document picked via linkit). */
+  isFile: boolean
+}
+
+/**
+ * Resolves the target URL of a link field queried with the `linkUrl` fragment.
+ *
+ * Links referencing a media entity (ICMS-595) resolve to its canonical
+ * /media/{id} path, which the backend serves as the file currently attached
+ * to that media. Unlike the file URL, it stays valid when the file is
+ * replaced. Such links must bypass the Vue router (NuxtLink `external`) since
+ * they are served by the backend.
+ */
+export function resolveLinkUrl(uri?: LinkFieldUri | null): ResolvedLinkUrl {
+  return {
+    url: uri?.path || undefined,
+    isFile: !!uri?.entity?.id,
+  }
+}

package/composables/useMediaLightbox.ts

@@ -22,7 +22,7 @@ export function useMediaLightbox(media: (MediaFragment | null)[] | undefined) {
     get: () => isOpen.value,
     set: (value: boolean) => {
       isOpen.value = value
-    }
+    },
   })
 
   // For backward compatibility - fsLightbox used 1-based indexing
@@ -30,65 +30,77 @@ export function useMediaLightbox(media: (MediaFragment | null)[] | undefined) {
     get: () => currentIndex.value + 1,
     set: (value: number) => {
       currentIndex.value = value - 1
-    }
+    },
   })
 
   // Copy exact logic from the working composable
-  const computedMedia = computed(() =>
-    media?.map(item => {
-      if (!item) return ''
-      switch (item.type) {
-        case 'MediaImage':
-          return (item as any).sourceUrl?.path || ''
-        case 'MediaVideo':
-          return (item as any).url?.path || ''
-        case 'MediaRemoteVideo':
-          return (item as any).link || ''
-        default:
-          return ''
-      }
-    }).filter(Boolean) || []
+  const computedMedia = computed(
+    () =>
+      media
+        ?.map((item) => {
+          if (!item) return ''
+          switch (item.type) {
+            case 'MediaImage':
+              return (item as any).sourceUrl?.path || ''
+            case 'MediaVideo':
+              return (item as any).url?.path || ''
+            case 'MediaRemoteVideo':
+              return (item as any).link || ''
+            default:
+              return ''
+          }
+        })
+        .filter(Boolean) || [],
   )
 
   // Expose filtered media objects for Media components
   const mediaObjects = computed(() => media?.filter(Boolean) || [])
 
   // Copy exact logic from the working composable
-  const computedCustomAttributes = computed(() =>
-    media?.map(item => {
-      if (!item) return {}
-
-      switch (item.type) {
-        case 'MediaImage':
-          return {
-            alt: (item as any).alt?.alt || '',
-            title: item.title || ''
-          }
+  const computedCustomAttributes = computed(
+    () =>
+      media?.map((item) => {
+        if (!item) return {}
 
-        case 'MediaVideo':
-          return {
-            alt: ((item as any).thumbnailOverride || (item as any).thumbnail)?.alt || '',
-            title: item.title || '',
-            poster: ((item as any).thumbnailOverride || (item as any).thumbnail)?.entity?.uri?.first?.url || '',
-            controls: true
-          }
+        switch (item.type) {
+          case 'MediaImage':
+            return {
+              alt: (item as any).alt?.alt || '',
+              title: item.title || '',
+            }
 
-        case 'MediaRemoteVideo':
-          return {
-            alt: ((item as any).thumbnailOverride || (item as any).thumbnail)?.alt || '',
-            title: item.title || '',
-            poster: ((item as any).thumbnailOverride || (item as any).thumbnail)?.entity?.uri?.first?.url || ''
-          }
+          case 'MediaVideo':
+            return {
+              alt:
+                ((item as any).thumbnailOverride || (item as any).thumbnail)
+                  ?.alt || '',
+              title: item.title || '',
+              poster:
+                ((item as any).thumbnailOverride || (item as any).thumbnail)
+                  ?.entity?.uri?.first?.url || '',
+              controls: true,
+            }
 
-        default:
-          return {}
-      }
-    }) || []
+          case 'MediaRemoteVideo':
+            return {
+              alt:
+                ((item as any).thumbnailOverride || (item as any).thumbnail)
+                  ?.alt || '',
+              title: item.title || '',
+              poster:
+                ((item as any).thumbnailOverride || (item as any).thumbnail)
+                  ?.entity?.uri?.first?.url || '',
+            }
+
+          default:
+            return {}
+        }
+      }) || [],
   )
 
   // Copy exact logic from the working composable
-  const computedCaptions = computed(() =>
-    media?.map(item => (item as any)?.caption || '') || []
+  const computedCaptions = computed(
+    () => media?.map((item) => (item as any)?.caption || '') || [],
   )
 
   return {
@@ -98,17 +110,17 @@ export function useMediaLightbox(media: (MediaFragment | null)[] | undefined) {
     openLightbox,
     closeLightbox,
     setCurrentIndex,
-    
+
     // Backward compatibility with fsLightbox API
     toggleLightbox,
     currentSlide,
-    
+
     // Data for lightbox component
     sources: computedMedia,
     customAttributes: computedCustomAttributes,
     captions: computedCaptions,
-    
+
     // Media objects for Media components
-    mediaObjects
+    mediaObjects,
   }
-}
+}

package/composables/useMenu.ts

@@ -29,9 +29,7 @@ export async function useMenu(menuName: MenuName) {
   })
 
   const menuItemActive = computed(() => {
-    return menuLinks.value.find((l) =>
-      isLinkTreeActive(l, currentRoute.path),
-    )
+    return menuLinks.value.find((l) => isLinkTreeActive(l, currentRoute.path))
   })
 
   const menuItemActiveLevel1 = computed(() => {

package/composables/useMessageBus.ts

@@ -33,7 +33,7 @@ export type BusMessage = {
   message?: any
 }
 
-const messageBus: Ref<Array<BusMessage>> = ref([]);
+const messageBus: Ref<Array<BusMessage>> = ref([])
 
 /**
  * Sends a message to the message bus.
@@ -43,7 +43,7 @@ const messageBus: Ref<Array<BusMessage>> = ref([]);
  * @param type - Optional message type identifier.
  */
 function send(message: any, receiver?: string, type?: string) {
-  messageBus.value.push({ receiver, type, message });
+  messageBus.value.push({ receiver, type, message })
 }
 
 /**
@@ -55,9 +55,16 @@ function send(message: any, receiver?: string, type?: string) {
  * @returns Array of matching BusMessage objects (deep cloned).
  */
 function receive(receiver?: string, type?: string): BusMessage[] {
-  return messageBus.value.filter(
-    msg => (receiver === undefined || msg.receiver === receiver) && (type === undefined || msg.type === type)
-  ).map(msg => ({ ...msg, message: JSON.parse(JSON.stringify(msg.message)) }));
+  return messageBus.value
+    .filter(
+      (msg) =>
+        (receiver === undefined || msg.receiver === receiver) &&
+        (type === undefined || msg.type === type),
+    )
+    .map((msg) => ({
+      ...msg,
+      message: JSON.parse(JSON.stringify(msg.message)),
+    }))
 }
 
 /**
@@ -70,5 +77,5 @@ export function useMessageBus() {
     bus: messageBus,
     send,
     receive,
-  };
-}
+  }
+}

package/composables/useMobileMenuOverlayBus.ts

@@ -8,7 +8,7 @@ import { ref, watch } from 'vue'
 
 export enum MobileMenuOverlayEvent {
   Open = 'open',
-  Close = 'close'
+  Close = 'close',
 }
 
 const mobileMenuOverlayBus = ref<MobileMenuOverlayEvent | null>(null)

package/composables/useNavigationOffset.ts

@@ -1,14 +1,57 @@
 import { useIsMobile } from '@iqual/nuxt-icms/composables/useIsMobile'
 
-const mobileNavHeight: number = 57 + 4
-const desktopNavHeight: number = 80 + 66 + 4
+// Used during SSR and until the header has been measured.
+const fallbackMainHeightMobile = 57
+const fallbackMainHeightDesktop = 81
+const fallbackMetaHeight = 66
 
-export function useNavigationOffset(): { navigationOffset: ComputedRef<number> } {
+// Helper function for retrieving the element's height
+const measure = (selector: string) =>
+  document.querySelector<HTMLElement>(selector)?.offsetHeight ?? 0
+
+export function useNavigationOffset(): {
+  metaHeight: ComputedRef<number>
+  headerHeight: ComputedRef<number>
+  navigationOffset: ComputedRef<number>
+} {
   const { isMobile } = useIsMobile()
 
-  const navigationOffset = computed(() => {
-    return isMobile.value ? mobileNavHeight : desktopNavHeight
+  // null until measured, so a non-existent element stays 0
+  const mainHeight = ref<number | null>(null)
+  const metaHeight = ref<number | null>(null)
+
+  const update = () => {
+    mainHeight.value = measure('[data-navigation-main]')
+    metaHeight.value = measure('[data-navigation-meta]')
+  }
+
+  onMounted(() => {
+    requestAnimationFrame(update)
+    window.addEventListener('resize', update, { passive: true })
   })
 
-  return { navigationOffset }
+  onBeforeUnmount(() => window.removeEventListener('resize', update))
+
+  // The part of the header that stays on screen. The meta row is pulled out of
+  // view by the header's negative top offset, so it does not count.
+  const headerHeight = computed(
+    () =>
+      mainHeight.value ??
+      (isMobile.value ? fallbackMainHeightMobile : fallbackMainHeightDesktop),
+  )
+
+  // The whole header, for scrolling something to just below it.
+  const navigationOffset = computed(
+    () =>
+      headerHeight.value +
+      (isMobile.value ? 0 : (metaHeight.value ?? fallbackMetaHeight)) +
+      4,
+  )
+
+  return {
+    // Only what was measured, so the header does not shift on the first frame.
+    metaHeight: computed(() => metaHeight.value ?? 0),
+    headerHeight,
+    navigationOffset,
+  }
 }

package/composables/usePageCache.ts

@@ -0,0 +1,33 @@
+/**
+ * Opt the current page into the in-memory route (full page) cache.
+ *
+ * The page is only stored if every GraphQL response that went into it was
+ * cacheable (see useGraphqlCacheability) and it rendered with status 200.
+ * Requests with a Drupal session and blökkli requests never reach the route
+ * cache. In `varnish` mode the route cache stays off: Varnish caches the
+ * page instead.
+ */
+export function usePageCache() {
+  if (!import.meta.server) {
+    return
+  }
+
+  const config = resolvePageCacheConfig(useRuntimeConfig().pageCache)
+  if (config.mode === 'varnish' || !config.routeMaxSize) {
+    return
+  }
+
+  useRouteCache((helper) => {
+    helper.setCacheable().setMaxAge(config.routeMaxAge)
+  })
+
+  // The cached page is served for every URL with the same cache key, which
+  // ignores tracking parameters (utm_*, gclid, …). Nuxt embeds the rendered
+  // URL in the payload, and on hydration the client router prefers it over
+  // the browser URL whenever they differ — it would hand the first visitor's
+  // click IDs to everyone. Without a query the client router takes the query
+  // from the browser instead. The server render itself still sees the full
+  // URL, so redirects keep the parameters.
+  const nuxtApp = useNuxtApp()
+  nuxtApp.payload.path = nuxtApp.payload.path?.split('?')[0]
+}

package/composables/useSiteShell.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether the frontend is shown inside the Drupal backend's site shell.
+ *
+ * Editors browse the frontend in an iframe of the backend (Drupal keeps its
+ * navigation and top bar), so the frontend hides its own admin UI then.
+ */
+export default function useSiteShell() {
+  return useState<{ framed: boolean }>('icmsSiteShell', () => ({
+    framed: false,
+  }))
+}

package/composables/useTheme.ts

@@ -4,11 +4,11 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 /**
  * A composable that provides theme-aware class generation for Vue components.
  * Automatically detects the calling component and merges theme classes with component props and default classes.
- * 
+ *
  * @param componentName - Component name to manually override auto-detection
  * @param themeName - The name of the theme to use from app config (defaults to 'default')
  * @returns A function that generates themed classes for component elements
- * 
+ *
  * @example
  * ```vue
  * <template>
@@ -16,21 +16,21 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
  *     <span :class="theme('label')">Click me</span>
  *   </button>
  * </template>
- * 
+ *
  * <script setup>
  * // Uses default theme
  * const customTheme = useTheme('CustomComponent')
- * 
+ *
  * // Use a specific theme
  * const darkTheme = useTheme('CustomComponent', 'dark')
- * 
+ *
  * // The returned function merges:
  * // 1. Default classes passed as second parameter
  * // 2. Theme classes from app.config.ts
  * // 3. Component prop classes (e.g., buttonClass, labelClass props)
  * </script>
  * ```
- * 
+ *
  * @remarks
  * The composable expects theme configuration in app.config.ts structured as:
  * ```typescript
@@ -50,26 +50,30 @@ export function useTheme(componentName: string, themeName: string = 'default') {
   const { props } = instance || {}
   const appConfig = useAppConfig()
 
-  const componentTheme = (appConfig?.theme as any)?.[themeName]?.[componentName] ?? {}
+  const componentTheme =
+    (appConfig?.theme as any)?.[themeName]?.[componentName] ?? {}
 
   /**
    * Generates themed classes by merging default classes, theme classes, and component prop classes.
-   * 
+   *
    * @param elementName - The name of the element to style (should match theme config keys and props)
    * @param defaultClass - Optional default CSS classes to include
    * @returns Merged CSS class string using the cn() utility
-   * 
+   *
    * @example
    * ```typescript
    * // Returns merged classes from theme config, props, and defaults
    * const buttonClasses = theme('button', 'rounded-lg')
-   * 
-   * // Just use theme and prop classes without defaults  
+   *
+   * // Just use theme and prop classes without defaults
    * const labelClasses = theme('label')
    * ```
    */
   return function (elementName: string, defaultClass?: string) {
-    return cn(defaultClass, componentTheme[elementName] as string, props?.[elementName] as string)
+    return cn(
+      defaultClass,
+      componentTheme[elementName] as string,
+      props?.[elementName] as string,
+    )
   }
 }
-

package/config/__tests__/stubs/nuxt-multi-cache-config.ts

@@ -4,3 +4,5 @@
 export const cdnCacheControlHeader = ''
 export const cdnCacheTagHeader = ''
 export const cdnEnabled = true
+// Tag purges run immediately in tests instead of being batched.
+export const cacheTagInvalidationDelay = 0