@iqual/nuxt-icms 1.2.1 → 1.2.2

package/composables/useInitData.ts

@@ -1,118 +1,26 @@
-import type {
-  GlobalConfigFragment,
-  InitDataQuery,
-  MenuLinkTreeElementFirstFragment,
-} from '#graphql-operations'
-
-export interface InitData {
-  metaMenuLinks: MenuLinkTreeElementFirstFragment[]
-  mainMenuLinks: MenuLinkTreeElementFirstFragment[]
-  footerMenuLinks: MenuLinkTreeElementFirstFragment[]
-  footerMetaMenuLinks: MenuLinkTreeElementFirstFragment[]
-  translations: Record<string, string | [string, string]>
-  globalConfig: {
-    companyLogo?: GlobalConfigFragment['companyLogo']
-    companyLogoAlt?: GlobalConfigFragment['companyLogoAlt']
-    companyName?: GlobalConfigFragment['companyName']
-    companyDescription?: GlobalConfigFragment['companyDescription']
-    address?: GlobalConfigFragment['address']
-    phoneNumber?: GlobalConfigFragment['phoneNumber']
-    emailAddress?: GlobalConfigFragment['emailAddress']
-    metaLinks?: GlobalConfigFragment['metaLinks']
-    contactButtons?: GlobalConfigFragment['contactButtons']
-    socialMediaLinks?: GlobalConfigFragment['socialMediaLinks']
+import type { InitData, MappedMenuLink } from '../plugins/initData'
+
+export type UseInitData = {
+  globalConfig: ComputedRef<InitData['globalConfig']>
+  menus: {
+    metaMenu: ComputedRef<MappedMenuLink[]>
+    mainMenu: ComputedRef<MappedMenuLink[]>
+    footerMenu: ComputedRef<MappedMenuLink[]>
+    footerMetaMenu: ComputedRef<MappedMenuLink[]>
   }
 }
 
-function getTranslations(
-  v?: InitDataQuery,
-): Record<string, string | [string, string]> {
-  if (!v) {
-    return {}
-  }
-  return Object.entries(
-    (v.translations || {}) as Record<
-      string,
-      string | { singular?: string; plural?: string }
-    >,
-  ).reduce<Record<string, string | [string, string]>>(
-    (acc, [fullKey, value]) => {
-      const keyWithDots = fullKey.replace('__', '.')
-      if (typeof value === 'string') {
-        acc[keyWithDots] = value
-      } else if (typeof value === 'object' && value.plural && value.singular) {
-        acc[keyWithDots] = [value.singular, value.plural]
-      }
-      return acc
-    },
-    {},
-  )
-}
+export default function (): UseInitData {
+  const data = useState<InitData | null>('initData', () => null)
 
-export default async function (): Promise<Ref<InitData>> {
-  const currentLanguage = useCurrentLanguage()
-  const data = useState<InitData>('initData')
-
-  // Let's try to fetch the data from the cache first.
-  const event = useRequestEvent()
-  const { value, addToCache } = await useDataCache<InitData>(
-    'initData_' + currentLanguage.value,
-    event,
-  )
-  if (value) {
-    data.value = value
-    return data
-  }
-
-  // If the data is not in the cache, we fetch it from the payload / useState().
-  if (data.value) {
-    return data
-  }
-
-  const config = useRuntimeConfig()
-  // Read the host from .env NUXT_HOST to support multisite setup.
-  // Read the host from .env NUXT_HOST to support multisite setup.
-  const url = useRequestURL()
-  let host = url.hostname
-  if (import.meta.server) {
-    host = config.requestHost
-  }
-
-  // Fetch the data from the server.
-  data.value = await useGraphqlQuery({
-    name: 'initData',
-    fetchOptions: {
-      query: {
-        language: currentLanguage.value,
-        __server: 'true',
-      },
-      headers: {
-        host,
-        'x-forwarded-host': host,
-      },
-    },
-  }).then((v) => {
-    const initData = {
-      metaMenuLinks: v.data.metaMenu?.links || [],
-      mainMenuLinks: v.data.mainMenu?.links || [],
-      footerMenuLinks: v.data.footerMenu?.links || [],
-      footerMetaMenuLinks: v.data.footerMetaMenu?.links || [],
-      globalConfig: v.data.globalConfig || {},
-      translations: getTranslations(v.data),
-    }
-
-    // The cache tags are coming from the onServerResponse() function in the graphqlMiddleware.
-
-    if (
-      import.meta.server &&
-      v.__cacheability?.isCacheable &&
-      v.__cacheability.tagsNuxt
-    ) {
-      addToCache(initData, v.__cacheability.tagsNuxt)
+  return {
+    globalConfig: computed(() => data.value?.globalConfig || {}),
+    menus: {
+      metaMenu: computed(() => data.value?.metaMenuLinks || []),
+      mainMenu: computed(() => data.value?.mainMenuLinks || []),
+      footerMenu: computed(() => data.value?.footerMenuLinks || []),
+      footerMetaMenu: computed(() => data.value?.footerMetaMenuLinks || []),
     }
-
-    return initData
-  })
-
-  return data
+  }
 }
+

package/composables/useMediaLightbox.ts

@@ -0,0 +1,114 @@
+import type { MediaFragment } from '#graphql-operations'
+
+export function useMediaLightbox(media: (MediaFragment | null)[] | undefined) {
+  const isOpen = ref(false)
+  const currentIndex = ref(0)
+
+  const openLightbox = (index: number) => {
+    currentIndex.value = index
+    isOpen.value = true
+  }
+
+  const closeLightbox = () => {
+    isOpen.value = false
+  }
+
+  const setCurrentIndex = (index: number) => {
+    currentIndex.value = index
+  }
+
+  // For backward compatibility with the old fsLightbox API
+  const toggleLightbox = computed({
+    get: () => isOpen.value,
+    set: (value: boolean) => {
+      isOpen.value = value
+    }
+  })
+
+  // For backward compatibility - fsLightbox used 1-based indexing
+  const currentSlide = computed({
+    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) || []
+  )
+
+  // 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 || ''
+          }
+
+        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
+          }
+
+        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 || '') || []
+  )
+
+  return {
+    // New API for custom lightbox
+    isOpen: readonly(isOpen),
+    currentIndex: readonly(currentIndex),
+    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
+  }
+}

package/composables/useMenu.ts

@@ -0,0 +1,66 @@
+import type { MappedMenuLink } from '../plugins/initData'
+import type { MenuName } from '../types/initData'
+
+function isLinkTreeActive(
+  tree: MappedMenuLink & { subtree?: Array<MappedMenuLink> },
+  currentRoutePath: string,
+): boolean {
+  if (tree.href === currentRoutePath) {
+    return true
+  }
+
+  if (tree.subtree) {
+    return tree.subtree.some((subtreeEl) =>
+      isLinkTreeActive(subtreeEl, currentRoutePath),
+    )
+  }
+
+  return false
+}
+
+export async function useMenu(menuName: MenuName) {
+  const { menus } = useInitData()
+
+  const menuLinks = menus[menuName]
+  const currentRoute = useRoute()
+
+  const menuItems = computed(() => {
+    return menuLinks.value
+  })
+
+  const menuItemActive = computed(() => {
+    return menuLinks.value.find((l) =>
+      isLinkTreeActive(l, currentRoute.path),
+    )
+  })
+
+  const menuItemActiveLevel1 = computed(() => {
+    return menuItemActive.value?.children?.find((l) =>
+      isLinkTreeActive(l, currentRoute.path),
+    )
+  })
+
+  const menuItemActiveLevel2 = computed(() => {
+    const activeSubtree = menuItemActiveLevel1.value?.children
+    if (activeSubtree) {
+      return activeSubtree.find((l) => isLinkTreeActive(l, currentRoute.path))
+    }
+    return null
+  })
+
+  const menuTiemActiveLevel3 = computed(() => {
+    const activeSubtree = menuItemActiveLevel2.value?.children
+    if (activeSubtree) {
+      return activeSubtree.find((l) => isLinkTreeActive(l, currentRoute.path))
+    }
+    return null
+  })
+
+  return {
+    menuItems,
+    menuItemActive,
+    menuItemActiveLevel1,
+    menuItemActiveLevel2,
+    menuTiemActiveLevel3,
+  }
+}

package/modules/dynamicEntityComponentResolver.ts

@@ -106,26 +106,6 @@ export default defineNuxtModule({
       src: resolve(nuxt.options.buildDir, 'dynamic-entity-component-resolver.plugin.mjs')
     })
 
-    // Collect all page teaser fragments from the Nuxt layers.
-    const paragraphFragments = nuxt.options._layers
-      .map(layer => layer.config?.icms?.components?.fragments)
-      .filter(Boolean)
-      .flat()
-      .map((fragmentName) => {
-        return `...${fragmentName}`
-      })
-
-    const fragment = `
-fragment paragraph on Paragraph {
-  id
-  parentId
-  ${paragraphFragments.join('\n  ')}
-}
-    `
-    nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
-      context.addDocument('fragment.paragraph.graphql', fragment)
-    })
-
     // Private helper to extract unique fragment values from any routeQueries object
     function extractFragments(routeQueries: any): string[] {
       const fragments = new Set<string>();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "ICMS Base",
   "type": "module",
   "private": false,
@@ -26,7 +26,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-vue": "^8.6.0",
-    "fslightbox-vue": "^2.2.1",
     "lucide-vue-next": "^0.469.0",
     "nuxt-easy-texts": "^2.0.0",
     "nuxt-graphql-middleware": "^5.1.0",

package/plugins/graphqlMiddleware.ts

@@ -1,7 +1,7 @@
 import { defineNuxtPlugin } from 'nuxt/app'
-import type { DrupalMessage } from '~/composables/useDrupalMessages'
-import { useCDNHeaders } from '#nuxt-multi-cache/composables'
-import type { GraphqlResponseTyped } from '#graphql-middleware-server-options-build'
+import type { DrupalMessage } from '../composables/useDrupalMessages'
+import type { GraphqlResponseTyped } from '#nuxt-graphql-middleware/response'
+import { buildProxyRequestHeaders } from '~/shared/request'
 
 type GraphqlMessengerMessage = {
   type: string
@@ -30,21 +30,24 @@ function extractMessages(data: GraphqlResponseTyped): DrupalMessage[] {
  * This is only called when performing a query or mutation from within the nuxt
  * app (e.g. not via custom server routes).
  */
-export default defineNuxtPlugin(() => {
-  const state = useGraphqlState()
-  const { messages } = useDrupalMessages()
-  const language = useCurrentLanguage()
-  const config = useRuntimeConfig()
+export default defineNuxtPlugin({
+  name: 'starterkit:graphql-plugin',
+  dependsOn: ['nuxt-graphql-middleware-provide-state', 'nuxt:router'],
+  setup() {
+    const state = useGraphqlState()
+    const { messages } = useDrupalMessages()
 
-  if (!state) {
-    return
-  }
+    const event = import.meta.server ? useRequestEvent() : undefined
+
+    if (!state) {
+      throw new Error('Missing nuxt-graphql-middleware state.')
+    }
 
-  state.fetchOptions = {
-    /**
-     * Interceptor called whenever a GraphQL response arrives.
-     */
-    onResponse(result) {
+    if (import.meta.server && event) {
+      state.fetchOptions.headers = buildProxyRequestHeaders(event)
+    }
+
+    state.fetchOptions.onResponse = (result) => {
       const data = result.response?._data
       if (!data) {
         return
@@ -56,60 +59,16 @@ export default defineNuxtPlugin(() => {
         if (!exists) {
           messages.value.push(v)
 
-          // When there are messages, we have to make the whole request uncacheable.
-          useCDNHeaders((v) => v.private())
-        }
-      })
-
-      if (import.meta.server) {
-        const event = useRequestEvent()
-
-        useCDNHeaders((helper) => {
-          if (!data.__cacheability?.isCacheable) {
-            helper.private()
-            return
+          if (import.meta.server) {
+            // When there are messages, we have to make the whole request uncacheable.
+            useCDNHeaders((v) => v.private())
           }
-
-          helper
-            .public()
-            .setNumeric('sharedMaxAge', data.__cacheability.sharedMaxAge)
-            .addTags(data.__cacheability.tagsCdn)
-        }, event)
-      }
-    },
-
-    onRequest({ options, request }) {
-      // if (import.meta.server && import.meta.dev) {
-      //   console.log('GraphQL Query: ' + request)
-      // }
-      try {
-        if (!options.params) {
-          options.params = {}
-        }
-
-        /*
-        // Add the build hash to every GraphQL request.
-        // We do this so that after a deployment, if the user is using the
-        // "new" version of the app, the request URL issued is now different
-        // than the previous one and thus will not be served from cache.
-        options.params.__h = config.public.buildHash
-
-        // Add the current language to the URL
-        options.params.__l = language.value
-
-        if (import.meta.server) {
-          options.params.__server = 'true'
         }
-        */
+      })
 
-        const requestHeaders = useRequestHeaders()
-        Object.keys(requestHeaders).forEach((key) => {
-          options.headers?.append(key, requestHeaders[key])
-        })
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (e) {
-        // Do nothing.
+      if (import.meta.server && event) {
+        useGraphqlCacheability(event, result.response?._data)
       }
-    },
-  }
+    }
+  },
 })

package/plugins/initData.ts

@@ -0,0 +1,105 @@
+
+import type {
+  GlobalConfigFragment,
+  InitDataQuery,
+  MenuLinkTreeElementFirstFragment,
+  MenuLinkTreeFragment,
+} from '#graphql-operations'
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response'
+type InitDataResponse = GraphqlResponse<InitDataQuery>
+export type MappedMenuLink = {
+  id: string
+  label: string
+  href?: string
+  children?: MappedMenuLink[]
+}
+export interface InitData {
+  metaMenuLinks: MappedMenuLink[]
+  mainMenuLinks: MappedMenuLink[]
+  footerMenuLinks: MappedMenuLink[]
+  footerMetaMenuLinks: MappedMenuLink[]
+  globalConfig: GlobalConfigFragment
+}
+/**
+ * Maps a MenuLinkTreeElementFirstFragment array to a MappedMenuLink array.
+ */
+export function mapMenuLinkTree(
+  menuLinks?: (MenuLinkTreeFragment | MenuLinkTreeElementFirstFragment)[],
+  context: { count: number } = { count: 0 },
+): MappedMenuLink[] {
+  if (!menuLinks) {
+    return []
+  }
+  return menuLinks.map((menuLink) => {
+    const id = `menu-item-${context.count++}`
+    // Extract the basic properties
+    const label = menuLink.link.label
+    const href = menuLink.link.url?.path
+    // Process children if they exist
+    const children =
+      'subtree' in menuLink && menuLink.subtree && menuLink.subtree.length > 0
+        ? mapMenuLinkTree(menuLink.subtree, context)
+        : undefined
+    // Return the mapped menu link
+    return {
+      id,
+      label,
+      href,
+      children,
+    }
+  })
+}
+function mapInitData(response: InitDataResponse): InitData {
+  if (response.data) {
+    return {
+      metaMenuLinks: mapMenuLinkTree(response.data.metaMenu?.links),
+      mainMenuLinks: mapMenuLinkTree(response.data.mainMenu?.links),
+      footerMenuLinks: mapMenuLinkTree(response.data.footerMenu?.links),
+      footerMetaMenuLinks: mapMenuLinkTree(response.data.footerMetaMenu?.links),
+      globalConfig: response.data.globalConfig || {},
+    }
+  }
+  throw new Error('Failed to load init data.')
+}
+export default defineNuxtPlugin({
+  name: 'starterkit:init-data',
+  dependsOn: [
+    'nuxt-graphql-middleware-provide-state',
+    'starterkit:graphql-plugin',
+    'nuxt:router',
+  ],
+  async setup() {
+    const data = useState<InitData | null>('initData', () => null)
+    if (import.meta.server) {
+      const event = useRequestEvent()
+      const language = useCurrentLanguage()
+      if (!event) {
+        throw new Error('Missing request event.')
+      }
+      const { value: cachedResponse, addToCache } =
+        await useDataCache<InitDataResponse>(
+          'initData_' + language.value,
+          event,
+        )
+      const response = cachedResponse || (await useGraphqlQuery('initData'))
+      data.value = mapInitData(response)
+      if (!cachedResponse && response.extensions.cacheability?.isCacheable) {
+        await addToCache(response, response.extensions.cacheability?.tagsNuxt)
+      }
+    }
+    if (import.meta.client) {
+      async function loadInitData() {
+        data.value = await useGraphqlQuery('initData', null, {
+          graphqlCaching: {
+            client: true,
+          },
+        }).then(mapInitData)
+      }
+      if (!data.value) {
+        await loadInitData()
+      }
+      const language = useCurrentLanguage()
+      watch(language, loadInitData)
+    }
+  },
+})

package/{composables → queries}/query.initData.graphql

@@ -83,16 +83,10 @@ fragment globalConfig on TranslatableConfigPagesGlobal {
   phoneNumber: fieldIcmsPhoneNumber
   emailAddress: fieldIcmsEmailAddress
   contactButtons: fieldIcmsContactButtons {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsButtonElement
-    }
+    ...paragraphIcmsButtonElement
   }
   metaLinks: fieldIcmsMetaLinks {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsButtonElement
-    }
+    ...paragraphIcmsButtonElement
   }
   socialMediaLinks: fieldIcmsSocialMediaLinks {
     uri {

package/queries/query.loadTranslations.graphql

@@ -0,0 +1,5 @@
+query loadTranslations {
+  translations: textsLoader {
+    ...easyTexts
+  }
+}

package/types/initData.ts

@@ -0,0 +1 @@
+export type MenuName = 'metaMenu' | 'mainMenu' | 'footerMenu' | 'footerMetaMenu'

package/components/Section/Header/SearchLink.vue

@@ -1,26 +0,0 @@
-<template>
-  <div
-    class="pr-4 font-medium lg:pr-12"
-    :class="{
-      'sticky top-0': isSticky,
-    }"
-  >
-    <nuxt-link
-      :to="{ name: 'search' }"
-      class="flex h-10 items-center gap-1 px-3 text-primary-500 lg:h-[50px]"
-    >
-      <span class="sr-only lg:not-sr-only">
-        {{ $texts('header.search', 'Suche') }}
-      </span>
-      <SpriteSymbol name="magnifyingglass" class="size-5" />
-    </nuxt-link>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps<{
-  isSticky: boolean
-}>()
-
-const { $texts } = useNuxtApp()
-</script>