@iqual/nuxt-icms 1.1.0 → 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/composables/useMessageBus.ts

@@ -0,0 +1,74 @@
+/**
+ * Message Bus Composable
+ *
+ * This composable provides a simple in-memory message bus for communication between components.
+ *
+ * Usage:
+ *   import { useMessageBus } from '#imports'
+ *   const { bus, send, receive } = useMessageBus()
+ *
+ *   // Send a message
+ *   send('Hello World', 'receiverId', 'typeId')
+ *
+ *   // Receive messages
+ *   const messages = receive('receiverId', 'typeId')
+ *
+ * API:
+ *   - bus: Ref<Array<BusMessage>>
+ *   - send(message, receiver?, type?)
+ *   - receive(receiver?, type?): BusMessage[]
+ *
+ * BusMessage:
+ *   - receiver?: string
+ *   - type?: string
+ *   - message: any
+ */
+
+/**
+ * Represents a message sent through the message bus.
+ */
+export type BusMessage = {
+  receiver?: string
+  type?: string
+  message?: any
+}
+
+const messageBus: Ref<Array<BusMessage>> = ref([]);
+
+/**
+ * Sends a message to the message bus.
+ *
+ * @param message - The message payload to send.
+ * @param receiver - Optional receiver identifier.
+ * @param type - Optional message type identifier.
+ */
+function send(message: any, receiver?: string, type?: string) {
+  messageBus.value.push({ receiver, type, message });
+}
+
+/**
+ * Retrieves messages from the message bus matching the given receiver and type.
+ * Returns a deep clone of the matched messages.
+ *
+ * @param receiver - Optional receiver identifier to filter messages.
+ * @param type - Optional type identifier to filter messages.
+ * @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)) }));
+}
+
+/**
+ * Provides access to the message bus, including send and receive functions.
+ *
+ * @returns An object containing the bus ref, send, and receive functions.
+ */
+export function useMessageBus() {
+  return {
+    bus: messageBus,
+    send,
+    receive,
+  };
+}

package/composables/useNavigationOffset.ts

@@ -1,4 +1,4 @@
-import { useIsMobile } from '@/composables/useIsMobile'
+import { useIsMobile } from './useIsMobile'
 
 const mobileNavHeight: number = 73
 const desktopNavHeight: number = 114

package/layouts/default.vue

@@ -6,9 +6,9 @@
       @menu:close:finished="menuCloseFinish"
     />
 
-    <NuxtPageDependency>
+    <!-- <NuxtPageDependency>
       <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
-    </NuxtPageDependency>
+    </NuxtPageDependency> -->
 
     <div>
       <ClientOnly>

package/layouts/error.vue

@@ -6,16 +6,15 @@
       @menu:close:finished="menuCloseFinish"
     />
 
-    <NuxtPageDependency>
+    <!-- <NuxtPageDependency>
       <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
-    </NuxtPageDependency>
+    </NuxtPageDependency> -->
 
     <div>
       <ClientOnly>
         <DrupalMessages v-if="!isEditing" />
       </ClientOnly>
 
-
       <div class="container mx-auto grid grid-cols-1 gap-6 py-12">
         <div class="ck-editor text-center">
           <h1>Whooops!</h1>
@@ -24,10 +23,10 @@
             class="mt-8 inline-block underline"
             :to="`/${currentLanguage}`"
             prefetch
-            >Go back to home</NuxtLink>
+            >Go back to home</NuxtLink
+          >
         </div>
       </div>
-
     </div>
     <SectionFooter />
   </div>
@@ -57,7 +56,7 @@ const error = useError()
 const errorCode = error.value?.statusCode || 'Unknown error'
 
 const errorMessages = {
-  404: 'We can\'t find the page \nyou are looking for.',
+  404: "We can't find the page \nyou are looking for.",
   500: 'An error occurred on the server. Please try again later.',
   'Unknown error': 'An unknown error occurred.',
 }
@@ -67,10 +66,10 @@ const errorMessage = computed(() => {
     return errorMessages[errorCode]
   }
   return errorMessages['Unknown error']
-});
+})
 
 useHead({
-  title: errorMessage
+  title: errorMessage,
 })
 
 const isMenuOpen = ref(false)
@@ -94,5 +93,4 @@ function menuCloseFinish() {
     hasMenuFinishedClosing.value = true
   }
 }
-
-</script>
+</script>

package/modules/dynamicEntityComponentResolver.ts

@@ -0,0 +1,162 @@
+/**
+ * Nuxt Layer Module: dynamicEntityComponentResolver
+ *
+ * Dynamically imports all Node components from every enabled Nuxt layer (including the main app),
+ * supports both single-file and index.vue conventions, and injects a dynamic resolver with
+ * proper override priority (main app overrides layers).
+ */
+
+import { defineNuxtModule, addPlugin, addTemplate, createResolver } from '@nuxt/kit'
+import { join } from 'pathe'
+
+export default defineNuxtModule({
+  meta: { name: 'dynamicEntityComponentResolver' },
+  setup(_options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+
+    // Gather all layer root directories (main app is always first)
+    const appRoot = nuxt.options.rootDir
+    const layerDirs = nuxt.options._layers
+      .map(layer => layer.cwd.replace(appRoot, '').length ? layer.cwd.replace(appRoot, '') : '/')
+
+    // Helper to get icms config from a layer
+    function getLayerPageComponentTypes(layer) {
+      return (layer.config && layer.config.icms && Array.isArray(layer.config.icms.pageComponentTypes))
+        ? layer.config.icms.pageComponentTypes
+        : [];
+    }
+
+    // Gather pageComponentTypes from all layers and main app
+    // @ts-ignore: allow access to icms
+    const allTypes = [Array.isArray(nuxt.options.icms?.pageComponentTypes) ? nuxt.options.icms.pageComponentTypes : []]
+      .concat(nuxt.options._layers.map(getLayerPageComponentTypes))
+      .flat()
+      .filter((v, i, arr) => arr.indexOf(v) === i); // dedupe
+
+    // Generate import.meta.glob for each layer's components for each type
+    const imports = layerDirs.map((dir, i) => {
+      return allTypes.map(type => {
+        const componentsPath = join(dir, `components/${type}/**/*.vue`)
+        return `const modules${i}_${type} = import.meta.glob(${JSON.stringify(componentsPath)});`;
+      }).join('\n');
+    }).join('\n');
+
+    // Merge logic (reverse order so main app overrides layers)
+    const mergeLogic = layerDirs
+      .map((_, i) => {
+        return allTypes.map(type => `
+          for (const path in modules${i}_${type}) {
+            const name = getComponentNameFromPath(path, "${type}");
+            if (name) componentMap[name] = defineAsyncComponent(modules${i}_${type}[path]);
+          }
+        `).join('\n');
+      })
+      .reverse()
+      .join('\n');
+
+    // Create the plugin template
+    addTemplate({
+      filename: 'dynamic-entity-component-resolver.plugin.mjs',
+      getContents: () => `
+        import { defineNuxtPlugin } from '#app'
+        import { defineAsyncComponent } from 'vue'
+
+        /**
+         * Extracts a normalized component name from a file path for dynamic component mapping.
+         *
+         * Supports both single-file and directory-based Vue component structures:
+         *   - /components/Type/Foo.vue                       -> TypeFoo
+         *   - /components/Type/Foo/index.vue                 -> TypeFoo
+         *   - /components/Type/Bar/Baz.vue                   -> TypeBarBaz
+         *   - /components/Type/Bar/Baz/index.vue             -> TypeBarBaz
+         *
+         * @param {string} path - The absolute or relative file path to the Vue component.
+         * @param {string} type - The entity type (e.g., 'Node', 'TaxonomyTerm').
+         * @returns {string|null} The normalized component name (e.g., 'NodeFoo' or 'TaxonomyTermBarBaz'), or null if the path does not match.
+         */
+        function getComponentNameFromPath(path, type) {
+          // Escape type for RegExp
+          var escType = type.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+          var re = new RegExp('/' + escType + '/(.+?)/?(index)?\\.vue$');
+          var match = path.match(re);
+          if (match) {
+            var parts = match[1].split('/').map(function(part) {
+              return part.charAt(0).toUpperCase() + part.slice(1);
+            });
+            return type + parts.join('');
+          }
+          return null;
+        }
+
+        export default defineNuxtPlugin(() => {
+          ${imports}
+          var componentMap = {};
+          ${mergeLogic}
+          return {
+            provide: {
+              resolveDynamicEntityComponent: function(name) { return componentMap[name] || null; }
+            }
+          };
+        });
+      `
+    })
+
+    // Register the generated plugin
+    addPlugin({
+      src: resolve(nuxt.options.buildDir, 'dynamic-entity-component-resolver.plugin.mjs')
+    })
+
+    // Private helper to extract unique fragment values from any routeQueries object
+    function extractFragments(routeQueries: any): string[] {
+      const fragments = new Set<string>();
+
+      function traverse(obj: any) {
+        if (Array.isArray(obj)) {
+          obj.forEach(item => traverse(item));
+        } else if (obj && typeof obj === 'object') {
+          for (const key in obj) {
+            if (key === 'fragments' && Array.isArray(obj[key])) {
+              obj[key].forEach(frag => {
+                if (typeof frag === 'string') fragments.add(frag);
+              });
+            } else {
+              traverse(obj[key]);
+            }
+          }
+        }
+      }
+
+      traverse(routeQueries);
+      return Array.from(fragments);
+    }
+
+    const entityFragments = nuxt.options._layers
+      .map((layer, idx) => {
+        const queries = layer.config?.vuepal?.drupalRoute?.routeQueries;
+        const fragments = extractFragments(queries);
+        return fragments;
+      })
+      .filter(arr => Array.isArray(arr) && arr.length)
+      .flat()
+      .filter(Boolean);
+
+    const entityTeaserFagment = `
+fragment entityTeaser on Entity {
+  __typename
+  ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}Teaser` : '').join('\n  ')}
+}
+    `
+    const entitySearchResultFagment = `
+fragment entitySearchResult on Entity {
+  __typename
+  ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}SearchResult` : '').join('\n  ')}
+}
+    `
+    nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
+      context.addDocument('fragment.entityTeaser.graphql', entityTeaserFagment)
+      context.addDocument('fragment.entitySearchResult.graphql', entitySearchResultFagment)
+    })
+  } 
+})
+
+

package/modules/dynamicParagraphResolver.ts

@@ -43,7 +43,7 @@ import { defineNuxtModule } from 'nuxt/kit'
  */
 export default defineNuxtModule({
   meta: {
-    name: 'nuxt-graphql-middleware-playground',
+    name: 'dynamicParagraphResolver',
   },
   setup(_options, nuxt) {
     // Collect all paragraph fragments from the Nuxt layers.