@iqual/nuxt-icms 1.0.14 → 1.2.1

package/nuxt.config.ts

@@ -78,7 +78,6 @@ export default defineNuxtConfig({
     'nuxt-easy-texts',
     'nuxt-page-dependencies',
     'nuxt-multi-cache',
-    'nuxt-plugin-order',
     'vuepal',
     'nuxt-language-negotiation',
     'nuxt-svg-icon-sprite',
@@ -88,7 +87,8 @@ export default defineNuxtConfig({
     '@nuxt/image',
     'shadcn-nuxt',
     '@iqual/nuxt-icms/modules/dynamicParagraphResolver',
-    '@iqual/nuxt-icms/modules/dynamicNodeResolver'
+    '@iqual/nuxt-icms/modules/dynamicEntityComponentResolver',
+    'nuxt-maplibre',
   ],
 
   easyTexts: {
@@ -133,26 +133,6 @@ export default defineNuxtConfig({
     checkComposableCalled: true,
   },
 
-  pluginOrder: {
-    order: [
-      // Match plugins by their file path.
-      // Note that only a single plugin may match.
-      // The match is performed as "plugin.src.includes(v.pathMatch)".
-      { pathMatch: 'plugins/language.ts' },
-      { pathMatch: '@blokkli/editor/dist/runtime/plugins/blokkliEditable.js' },
-      { pathMatch: 'staticNodes.mjs' },
-      { pathMatch: 'formkitSSRPlugin.mjs' },
-      { pathMatch: 'clickaway.ts' },
-      { pathMatch: 'graphqlMiddleware.ts' },
-      { pathMatch: 'forceHttps.js' },
-      { pathMatch: 'nuxt-easy-texts/dist/runtime/plugins/texts.mjs' },
-      { pathMatch: 'drupalUser.ts' },
-      { pathMatch: 'dynamic-node-resolver.plugin.mjs' },
-    ],
-
-    logSortedPlugins: false,
-  },
-
   vuepal: {
     frontendRouting: {
       enabled: IS_DEV,
@@ -165,18 +145,27 @@ export default defineNuxtConfig({
     localTasks: {
       enabled: true,
     },
+    languageSwitchLinks: {
+      enabled: true,
+    },
     drupalRoute: {
       enabled: true,
       routeQueries: {
-        nodeIcmsPage: { fragments: [
-          'nodeIcmsPage'
-        ] },
-        slug: { fragments: [
-          'nodeIcmsPage',
-        ]},
-        nodeCanonical: { fragments: [
-          'nodeIcmsPage',
-        ]},
+        nodeIcmsPage: {
+          fragments: [
+            'nodeIcmsPage'
+          ]
+        },
+        slug: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
+        nodeCanonical: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
       },
     },
     devMode: {
@@ -191,6 +180,7 @@ export default defineNuxtConfig({
   },
 
   icms: {
+    pageComponentTypes: ['Node'],
     components: {
       fragments: [
         // Layout components
@@ -217,6 +207,7 @@ export default defineNuxtConfig({
         'paragraphIcmsLayoutMedia',
         'paragraphIcmsLayoutDownloads',
         'paragraphIcmsLayoutIframe',
+        'paragraphIcmsLayoutTimeline',
         // Element components
         'paragraphIcmsButtonElement',
         'paragraphIcmsCardElement',
@@ -228,7 +219,12 @@ export default defineNuxtConfig({
         'paragraphIcms2ColTextElement',
         'paragraphIcmsLogoElement',
         'paragraphIcmsPartnershipElement',
-        'paragraphIcmsIframeElement',
+        'paragraphIcmsTimelineElement',
+      ]
+    },
+    searchResults: {
+      fragments: [
+        'nodeIcmsPageSearchResult',
       ]
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.0.14",
+  "version": "1.2.1",
   "description": "ICMS Base",
   "type": "module",
   "private": false,
@@ -26,13 +26,14 @@
     "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",
     "nuxt-language-negotiation": "^2.0.0",
+    "nuxt-maplibre": "^1.1.1",
     "nuxt-multi-cache": "^3.4.0",
     "nuxt-page-dependencies": "^1.1.0",
-    "nuxt-plugin-order": "^1.0.0",
     "nuxt-svg-icon-sprite": "^2.0.0",
     "patch-package": "^8.0.0",
     "radix-vue": "^1.9.17",

package/pages/[...slug]/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 
-const { $resolveDynamicNodeComponent } = useNuxtApp()
+const { $resolveDynamicEntityComponent } = useNuxtApp()
 
 defineOptions({
   name: 'PageSlug',
@@ -20,7 +20,7 @@ const { entity: node } = await useDrupalRouteQuery('slug')
 const contentType = computed(() => node.value?.__typename)
 
 const pageComponent = computed(() => {
-  return $resolveDynamicNodeComponent(contentType.value)
+  return $resolveDynamicEntityComponent(contentType.value)
 })
 
 await renderPageDependencies()

package/pages/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 
-const { $resolveDynamicNodeComponent } = useNuxtApp()
+const { $resolveDynamicEntityComponent } = useNuxtApp()
 
 defineOptions({
   name: 'Homepage',
@@ -20,7 +20,7 @@ const { entity: node } = await useDrupalRouteQuery('slug')
 const contentType = computed(() => node.value?.__typename)
 
 const pageComponent = computed(() => {
-  return $resolveDynamicNodeComponent(contentType.value)
+  return $resolveDynamicEntityComponent(contentType.value)
 })
 
 await renderPageDependencies()

package/pages/node/[nid]/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 
-const { $resolveDynamicNodeComponent } = useNuxtApp()
+const { $resolveDynamicEntityComponent } = useNuxtApp()
 
 defineOptions({
   name: 'PageNodeCanonical',
@@ -18,7 +18,7 @@ const { entity: node } = await useDrupalRouteQuery('nodeCanonical')
 const contentType = computed(() => node.value?.__typename)
 
 const pageComponent = computed(() => {
-  return $resolveDynamicNodeComponent(contentType.value)
+  return $resolveDynamicEntityComponent(contentType.value)
 })
 
 await renderPageDependencies()

package/queries/query.contentSearch.graphql

@@ -0,0 +1,17 @@
+query contentSearch($keys: String!, $language: String, $facets: [String!], $filter: SearchApiQueryFilterInput, $limit: Int, $offset: Int) {
+	searchApiQuery(indexId: "content_search", keys: $keys, language: $language, facets: $facets, filter: $filter, limit: $limit, offset: $offset) {
+    count
+    facets {
+      field
+      filter {
+        id
+        label
+      }
+      count
+      results {
+        bundle: __typename
+        ...entitySearchResult
+      }
+    }
+  }
+}

package/tailwind.config.ts

@@ -222,6 +222,7 @@ const config: Config = {
   ],
   corePlugins: {
     textOpacity: false,
+    container: false,
   },
 }
 

package/types/fslightbox-vue.d.ts

@@ -0,0 +1 @@
+declare module 'fslightbox-vue'

package/components/Blokkli/iFrame/Element/icon.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:none!important;">
-<path d="M6 1L1.80023 6.03972C1.33667 6.59599 1.33667 7.40401 1.80023 7.96028L6 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M12 13L16.1998 7.96028C16.6633 7.40401 16.6633 6.59599 16.1998 6.03972L12 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M7.5 10.5L10.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-</svg>

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

@@ -1,14 +0,0 @@
-<template>
-  <ParagraphIFrameElement v-bind="props" :blokkliData="blokkliData" />
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsIframeElementFragment } from '#graphql-operations'
-
-const props = defineProps<ParagraphIcmsIframeElementFragment>()
-
-const blokkliData = defineBlokkli({
-  bundle: 'icms_iframe_element',
-})
-
-</script>

package/components/Paragraph/iFrame/Element/fragment.graphql

@@ -1,9 +0,0 @@
-fragment paragraphIcmsIframeElement on ParagraphIcmsIframeElement {
-  title: fieldIcmsTitle
-  link: fieldIcmsLink {
-    uri {
-      path
-    }
-  }
-  height: fieldIcmsNumber
-}

package/components/Paragraph/iFrame/Element/index.vue

@@ -1,16 +0,0 @@
-<template>
-  <DesignSystemMoleculesIFrame
-    :title="title"
-    :link="link?.uri?.path"
-    :height="height"
-    :is-editing="isEditing"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsIframeElementFragment } from '#graphql-operations'
-
-defineProps<ParagraphIcmsIframeElementFragment>()
-
-const isEditing = inject<boolean>('isEditing')
-</script>

package/components/Paragraph/iFrame/Layout/index.vue

@@ -1,161 +0,0 @@
-<template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow class="pb-14 md:pb-0">
-      <div class="col-span-12 md:col-span-6" v-if="title">
-        <DesignSystemOrganismsContentBlock
-          :pretitle="pretitle"
-          :title="title"
-          :titleWeight="titleWeight"
-          :text="text"
-          :colorScheme="colorScheme"
-        />
-      </div>
-
-      <div v-if="isEditing" class="col-span-12">
-        <BlokkliField
-          name="field_icms_iframe_elements"
-          :list="iFrameElements"
-          :class="{ droptarget: isEditing }"
-        />
-      </div>
-
-      <div v-else class="col-span-12">
-        <template v-if="iFrameElements && iFrameElements.length === 1">
-          <DesignSystemMoleculesIFrame
-            :title="iFrameElements[0].props?.title"
-            :link="iFrameElements[0].props?.link?.uri?.path"
-            :height="iFrameElements[0].props?.height"
-          />
-        </template>
-
-        <Tabs
-          v-if="!isMobile && iFrameElements && iFrameElements.length > 1"
-          default-value="tab-1"
-          class="rounded-lg shadow-custom"
-        >
-          <TabsList
-            class="flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent"
-          >
-            <TabsTrigger
-              v-for="(iFrameElement, key) in iFrameElements"
-              :key="key"
-              :value="`tab-${key + 1}`"
-              :class="tabTrigger({ colorScheme })"
-            >
-              {{ iFrameElement?.props?.title }}
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent
-            forceMount
-            v-for="(iFrameElement, key) in iFrameElements"
-            :key="key"
-            :value="`tab-${key + 1}`"
-            :class="tabContent({ colorScheme })"
-          >
-            <DesignSystemMoleculesIFrame
-              :title="iFrameElement.props?.title"
-              :link="iFrameElement.props?.link?.uri?.path"
-              :height="iFrameElement.props?.height"
-            />
-          </TabsContent>
-        </Tabs>
-
-        <Accordion
-          v-if="isMobile && iFrameElements && iFrameElements.length > 1"
-          type="single"
-          class="w-full"
-          collapsible
-          default-value="accordion-1"
-        >
-          <AccordionItem
-            v-for="(iFrameElement, key) in iFrameElements"
-            :key="key"
-            :value="`accordion-${key + 1}`"
-            class="mb-1 border-none [&>h3]:mb-0"
-          >
-            <AccordionTrigger
-              :ref="(el: any) => (triggerRefs[key] = el)"
-              :class="accordionTrigger({ colorScheme })"
-              @click="handleClick(key)"
-            >
-              {{ iFrameElement?.props?.title }}
-            </AccordionTrigger>
-            <AccordionContent class="p-4 pb-6 text-base">
-              <DesignSystemMoleculesIFrame
-                :title="iFrameElement.props?.title"
-                :link="iFrameElement.props?.link?.uri?.path"
-                :height="iFrameElement.props?.height"
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
-    </DesignSystemAtomsGridRow>
-  </DesignSystemAtomsContainer>
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
-import { tv } from 'tailwind-variants'
-
-defineProps<ParagraphIcmsLayoutIframeFragment>()
-
-const { isMobile } = useIsMobile()
-
-const { options, isEditing } = useAttrs().blokkliData
-
-const tabTrigger = tv({
-  base: 'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none rounded-t-lg py-4 text-base shadow-custom-inner transition-all disabled:pointer-events-none lg:w-fit data-[state=active]:shadow-none',
-  variants: {
-    colorScheme: {
-      none: 'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      dark: 'bg-gray-700 dark:bg-gray-700 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white',
-      light:
-        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      accent:
-        'bg-primary-600 dark:bg-primary-600 text-white dark:text-white data-[state=active]:bg-primary-700 dark:data-[state=active]:bg-primary-700 data-[state=active]:text-white',
-    },
-  },
-})
-
-const tabContent = tv({
-  base: 'm-0 rounded-b-lg p-8 text-black md:p-16',
-  variants: {
-    colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white text-black',
-      accent: 'bg-primary-700 text-white',
-    },
-  },
-})
-
-const accordionTrigger = tv({
-  base: 'items-center rounded-lg px-6 py-4 shadow-custom-small hover:no-underline gap-4 text-left text-base',
-  variants: {
-    colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white text-black',
-      accent: 'bg-primary-700 text-white',
-    },
-  },
-})
-
-const triggerRefs = ref<Array<ComponentPublicInstance>>([])
-
-const handleClick = (index: number): void => {
-  const { handleAccordionOpen } = useAccordionScroll(triggerRefs.value[index])
-  handleAccordionOpen()
-}
-
-const colorScheme = computed(() => {
-  return options.value.colorScheme
-})
-
-const spacing = computed(() => {
-  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
-})
-
-provide('isEditing', isEditing)
-</script>

package/composables/languageLinks.ts

@@ -1,31 +0,0 @@
-import type {
-  LanguageSwitchLinkFragment,
-  RouteQuery,
-} from '#graphql-operations'
-
-export function setLanguageLinksFromFragment(
-  links: LanguageSwitchLinkFragment[],
-) {
-  const route = useRoute()
-
-  definePageLanguageLinks(
-    route.path,
-    links.reduce<Record<string, string>>((acc, v) => {
-      if (v.language.id && v.url.path) {
-        acc[v.language.id] = v.url.path
-      }
-      return acc
-    }, {}),
-  )
-}
-
-export function setLanguageLinksFromRoute(
-  query?: RouteQuery | undefined | null,
-) {
-  if (query && query.route && 'languageSwitchLinks' in query.route) {
-    setLanguageLinksFromFragment(query.route.languageSwitchLinks)
-    return
-  }
-  const route = useRoute()
-  definePageLanguageLinks(route.path, {})
-}

package/modules/dynamicNodeResolver.ts

@@ -1,95 +0,0 @@
-/**
- * Nuxt Layer Module: dynamicNodeResolver
- *
- * 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 { root } from 'happy-dom/lib/PropertySymbol.js'
-import { join } from 'pathe'
-import { rootDir } from 'vitest/node'
-
-export default defineNuxtModule({
-  meta: { name: 'dynamicNodeResolver' },
-  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, '') : '/')
-
-    // Generate import.meta.glob for each layer's Node components
-    const imports = layerDirs.map((dir, i) => {
-      const componentsPath = join(dir, 'components/Node/**/*.vue')
-      return `const modules${i} = import.meta.glob(${JSON.stringify(componentsPath)});`
-    }).join('\n')
-
-    // Merge logic (reverse order so main app overrides layers)
-    const mergeLogic = layerDirs
-      .map((_, i) => `
-        for (const path in modules${i}) {
-          const name = getComponentNameFromPath(path);
-          if (name) componentMap[name] = defineAsyncComponent(modules${i}[path]);
-        }
-      `)
-      .reverse()
-      .join('\n')
-
-    // Create the plugin template
-    addTemplate({
-      filename: 'dynamic-node-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/Node/Foo.vue                       -> NodeFoo
-         *   - /components/Node/Foo/index.vue                 -> NodeFoo
-         *   - /components/Node/Bar/Baz.vue                   -> NodeBarBaz
-         *   - /components/Node/Bar/Baz/index.vue             -> NodeBarBaz
-         *
-         * @param {string} path - The absolute or relative file path to the Vue component.
-         * @returns {string|null} The normalized component name (e.g., 'NodeFoo' or 'NodeBarBaz'), or null if the path does not match.
-         */
-        function getComponentNameFromPath(path) {
-          // Match everything after /Node/ up to .vue, splitting by /
-          //const match = path.match(/\\/Node\\/([^/]+?)(?:\\/index)?\\.vue$/)
-          const match = path.match(/\\/Node\\/(.+?)\\/?(index)?\\.vue$/)
-
-          if (match) {
-            // match[1] is the path after /Node/ up to the file (could be nested)
-            // Split by '/', capitalize each part, and join
-            const parts = match[1].split('/').map(
-              part => part.charAt(0).toUpperCase() + part.slice(1)
-            )
-            return 'Node' + parts.join('')
-          }
-          return null
-        }
-
-
-        export default defineNuxtPlugin(() => {
-          ${imports}
-          const componentMap = {};
-          ${mergeLogic}
-          return {
-            provide: {
-              resolveDynamicNodeComponent: (name) => componentMap[name] || null
-            }
-          }
-        })
-      `
-    })
-
-    // Register the generated plugin
-    addPlugin({
-      src: resolve(nuxt.options.buildDir, 'dynamic-node-resolver.plugin.mjs')
-    })
-  }
-})

package/pages/search/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <main :class="{ 'cursor-wait': pending }">
-    <section class="flex">
-      <div class="container">
-        <h1 v-if="node" class="pb-3 text-4xl lg:pb-6 lg:text-7xl">
-          {{ node.title }}
-        </h1>
-        <form @submit.prevent>
-          <SearchInput v-model="searchTerm" />
-        </form>
-      </div>
-    </section>
-    <template v-if="data && searchTerm">
-      <Container>
-        <ol class="mt-10">
-          <SearchResult v-for="hit in data" v-bind="hit" :key="hit.id" />
-        </ol>
-      </Container>
-    </template>
-  </main>
-</template>
-
-<script lang="ts" setup>
-import type { NodeIcmsPageFragment } from '#graphql-operations'
-
-definePageMeta({
-  name: 'search',
-  drupalFrontendRoute: true,
-  path: '/suche',
-  languageMapping: {
-    fr: '/chercher',
-    en: '/search',
-  },
-})
-
-const nuxtRoute = useRoute()
-const searchTerm = useQueryString('text')
-const language = useCurrentLanguage()
-
-const searchQuery = computed(() => {
-  return {
-    langcode: language.value,
-    size: 16,
-    text: searchTerm.value || undefined,
-  }
-})
-
-const { data, pending } = await useFetch('/api/content-search', {
-  query: searchQuery,
-})
-
-// Get the data.
-const { data: query } = await useAsyncData(nuxtRoute.path, () => {
-  return useGraphqlQuery('route', {
-    path: nuxtRoute.path,
-  }).then((v) => v.data)
-})
-
-// Handles redirects and metatags.
-const { entity: node } = await useDrupalRoute<NodeIcmsPageFragment>(
-  query.value,
-  {
-    noError: true,
-  },
-)
-setBreadcrumbLinksFromRoute(query.value)
-setLanguageLinksFromRoute(query.value)
-await renderPageDependencies()
-</script>

package/pages/static-page/example.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="container">
-    <h1 class="mb-10 text-4xl">Static Page example</h1>
-    <h2>{{ node.title }}</h2>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { NodePageFragment } from '#graphql-operations'
-
-defineOptions({
-  name: 'StaticPageExample',
-})
-
-definePageMeta({
-  name: 'static-page-example',
-  drupalFrontendRoute: true,
-  path: '/statisch',
-  languageMapping: {
-    fr: '/statique',
-    en: '/static',
-  },
-})
-
-const nuxtRoute = useRoute()
-
-// Get the data.
-const { data: query } = await useAsyncData('staticPageExample', async () => {
-  return await useGraphqlQuery('route', {
-    path: nuxtRoute.path,
-  }).then((v) => v.data)
-})
-
-// Handles redirects and metatags.
-const { entity: node } = await useDrupalRoute<NodePageFragment>(query.value)
-
-setBreadcrumbLinks()
-setLanguageLinksFromRoute(query.value)
-await renderPageDependencies()
-</script>