@iqual/nuxt-icms 1.0.13 → 1.1.0

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

@@ -0,0 +1,325 @@
+<template>
+  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow v-if="pretitle || title || subtitle || text">
+      <div class="col-span-12">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleStyle="titleStyle"
+          :titleWeight="titleWeight"
+          :subtitle="subtitle"
+          :text="text"
+          :colorScheme="colorScheme"
+          :hasDecorativeLine="Boolean(subtitle || text)"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <DesignSystemAtomsGridRow class="mt-10 lg:mt-20">
+      <!-- Anchor navigation -->
+      <div class="relative col-span-12 mb-6 lg:col-span-4 lg:mb-0">
+        <ul
+          v-if="!isEditing"
+          class="sticky left-0 top-32 z-10 flex flex-col gap-2"
+        >
+          <li v-for="(item, index) in props.timelineElements" :key="index">
+            <button
+              @click="handleAnchorLinkClick(Number(index))"
+              class="cursor-pointer transition-colors duration-200 ease-in-out"
+              :class="{
+                'font-semibold': currentIndex === Number(index),
+              }"
+            >
+              {{ item.props?.title }}
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      <div class="relative col-span-12 lg:col-span-8">
+        <!-- Mobile slider navigation -->
+        <div
+          v-if="isMobile && !isEditing"
+          class="relative col-span-12 mb-10 lg:col-span-4"
+        >
+          <ul
+            :class="decorativeLine({ colorScheme })"
+            class="flex h-0.5 flex-nowrap items-center justify-between"
+          >
+            <li
+              v-for="(_, index) in props.timelineElements"
+              :key="index"
+              class="p-4 first:-translate-x-4 last:translate-x-4"
+            >
+              <button
+                @click="handleAnchorLinkClick(Number(index))"
+                :class="
+                  carouselDot({
+                    colorScheme,
+                    active: currentIndex === Number(index),
+                  })
+                "
+              ></button>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Mobile slider -->
+        <Carousel
+          v-if="isMobile && !isEditing"
+          @init-api="setApi"
+          :class="carousel({ colorScheme })"
+        >
+          <BlokkliField
+            v-slot="{ items }"
+            name="field_icms_timeline_elements"
+            :list="timelineElements"
+            proxy-mode
+          >
+            <CarouselContent class="m-0 gap-8">
+              <BlokkliItem v-for="item in items" v-bind="item" />
+            </CarouselContent>
+          </BlokkliField>
+          <CarouselPrevious
+            class="-bottom-[90px] left-0 top-auto xl:bottom-auto xl:left-16 xl:top-1/2"
+            :class="carouselButton({ colorScheme })"
+          >
+            <ChevronLeft :size="24" :stroke-width="1" />
+          </CarouselPrevious>
+          <CarouselNext
+            class="-bottom-[90px] left-[66px] top-auto xl:bottom-auto xl:left-auto xl:right-16 xl:top-1/2"
+            :class="carouselButton({ colorScheme })"
+          >
+            <ChevronRight :size="24" :stroke-width="1" />
+          </CarouselNext>
+        </Carousel>
+
+        <!-- Desktop timeline -->
+        <BlokkliField
+          v-if="isEditing || !isMobile"
+          name="field_icms_timeline_elements"
+          :list="timelineElements"
+          class="flex flex-col gap-32"
+          :class="{ droptarget: isEditing }"
+        />
+
+        <!-- Desktop line -->
+        <template v-if="!isMobile && !isEditing">
+          <div :class="decorativeCircle({ colorScheme })" class="top-0"></div>
+          <div
+            :class="decorativeLine({ colorScheme })"
+            class="absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2"
+          ></div>
+          <div
+            :class="decorativeCircle({ colorScheme })"
+            class="bottom-0"
+          ></div>
+        </template>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTimelineFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import type { CarouselApi } from '@iqual/nuxt-icms/components/ui/carousel'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<ParagraphIcmsLayoutTimelineFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const { isMobile } = useIsMobile()
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+const api = ref<CarouselApi>()
+function setApi(val: CarouselApi) {
+  api.value = val
+
+  val?.on('select', () => {
+    const selectedIndex = val.selectedScrollSnap()
+    setCurrentIndex(selectedIndex)
+  })
+}
+
+const currentIndex = ref(0)
+const setCurrentIndex = (index: number) => {
+  if (index < 0 || index >= (props.timelineElements?.length ?? 0)) return
+  currentIndex.value = index
+}
+
+const scrollToCarousel = (index: number) => {
+  if (!index && !api.value) return
+  nextTick(() => {
+    api.value?.scrollTo(index)
+  })
+}
+
+const scrollToElement = (element: HTMLElement) => {
+  if (!element) return
+  nextTick(() => {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  })
+}
+
+const getTimelineElements = () =>
+  document.querySelectorAll('[data-timeline-element]')
+
+const handleAnchorLinkClick = (index: number) => {
+  if (isMobile.value) {
+    setCurrentIndex(index)
+    scrollToCarousel(index)
+  } else {
+    const elements = getTimelineElements()
+    scrollToElement(elements[index] as HTMLElement)
+  }
+}
+
+const timelineObserver = ref<IntersectionObserver | null>(null)
+
+onMounted(() => {
+  if (isEditing || isMobile.value) return
+
+  const elements = getTimelineElements()
+
+  timelineObserver.value = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const index = Array.from(elements).indexOf(
+            entry.target as HTMLElement,
+          )
+          if (index !== -1) {
+            setCurrentIndex(index)
+          }
+        }
+      })
+    },
+    {
+      rootMargin: '-10% 0px -80% 0px',
+      threshold: 0,
+    },
+  )
+
+  elements.forEach((element) => {
+    timelineObserver.value?.observe(element)
+  })
+})
+
+onUnmounted(() => {
+  timelineObserver.value?.disconnect()
+})
+
+const carousel = tv({
+  base: 'rounded-lg',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-950',
+      light: 'bg-gray-50',
+      accent: 'bg-primary-600',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const carouselButton = tv({
+  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size-16 [&_svg]:size-auto',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      dark: 'bg-white text-black hover:bg-gray-100 hover:text-black dark:bg-white dark:text-black hover:dark:bg-gray-100 hover:dark:text-black',
+      light:
+        'bg-gray-100 text-black hover:bg-black hover:text-white dark:bg-gray-100 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      accent:
+        'bg-primary-700 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-700 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const decorativeLine = tv({
+  base: '',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-200',
+      dark: 'bg-white',
+      light: 'bg-gray-200',
+      accent: 'bg-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const decorativeCircle = tv({
+  base: 'absolute left-1/2 size-4 -translate-x-1/2 border-2 rounded-full z-10',
+  variants: {
+    colorScheme: {
+      none: 'border-gray-200 bg-white',
+      dark: 'border-white bg-gray-950',
+      light: 'border-gray-200 bg-gray-50',
+      accent: 'border-white bg-primary-600',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const carouselDot = tv({
+  base: 'cursor-pointer transition-colors duration-200 ease-in-out size-4 border-2 rounded-full',
+  variants: {
+    colorScheme: {
+      none: 'bg-white border-gray-200',
+      dark: 'bg-gray-950 border-white',
+      light: 'bg-gray-50 border-gray-200',
+      accent: 'bg-primary-600 border-white',
+    },
+  },
+  compoundVariants: [
+    {
+      colorScheme: 'none',
+      active: true,
+      class: 'bg-gray-200',
+    },
+    {
+      colorScheme: 'dark',
+      active: true,
+      class: 'bg-white',
+    },
+    {
+      colorScheme: 'light',
+      active: true,
+      class: 'bg-gray-200',
+    },
+    {
+      colorScheme: 'accent',
+      active: true,
+      class: 'bg-white',
+    },
+  ],
+  defaultVariants: {
+    colorScheme: 'none',
+    active: false,
+  },
+})
+
+provide('colorScheme', colorScheme)
+provide('titleWeight', childTitleWeight)
+</script>

package/components/Paragraph/iFrame/{Layout/fragment.graphql → fragment.graphql}

@@ -4,10 +4,6 @@ fragment paragraphIcmsLayoutIframe on ParagraphIcmsLayoutIframe {
   titleWeight: fieldIcmsTitleWeight
   titleStyle: fieldIcmsTitleStyle
   text: fieldIcmsText
-  iFrameElements: fieldIcmsIframeElements {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsIframeElement
-    }
-  }
+  embed: fieldIcmsEmbedCode
+  height: fieldIcmsIframeHeight
 }

package/components/Paragraph/iFrame/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div :class="textWrapperClassList">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :text="text"
+          :colorScheme="colorScheme"
+        />
+
+        <div
+          v-if="embed"
+          v-html="embed"
+          class="embed-wrapper mt-10"
+          :style="{ '--iframe-height': `${props.height || 600}px` }"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const textWrapperClassList = computed(() => {
+  if (options.value.textWidth === 'medium') {
+    return ['col-span-8', 'col-start-3']
+  } else if (options.value.textWidth === 'narrow') {
+    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+  }
+  return ['col-span-12']
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+provide('isEditing', isEditing)
+</script>
+
+<style>
+.embed-wrapper > iframe {
+  width: 100%;
+  height: var(--iframe-height, 600px);
+}
+</style>

package/nuxt.config.ts

@@ -168,15 +168,21 @@ export default defineNuxtConfig({
     drupalRoute: {
       enabled: true,
       routeQueries: {
-        nodeIcmsPage: { fragments: [
-          'nodeIcmsPage'
-        ] },
-        slug: { fragments: [
-          'nodeIcmsPage',
-        ]},
-        nodeCanonical: { fragments: [
-          'nodeIcmsPage',
-        ]},
+        nodeIcmsPage: {
+          fragments: [
+            'nodeIcmsPage'
+          ]
+        },
+        slug: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
+        nodeCanonical: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
       },
     },
     devMode: {
@@ -217,6 +223,7 @@ export default defineNuxtConfig({
         'paragraphIcmsLayoutMedia',
         'paragraphIcmsLayoutDownloads',
         'paragraphIcmsLayoutIframe',
+        'paragraphIcmsLayoutTimeline',
         // Element components
         'paragraphIcmsButtonElement',
         'paragraphIcmsCardElement',
@@ -228,7 +235,7 @@ export default defineNuxtConfig({
         'paragraphIcms2ColTextElement',
         'paragraphIcmsLogoElement',
         'paragraphIcmsPartnershipElement',
-        'paragraphIcmsIframeElement',
+        'paragraphIcmsTimelineElement',
       ]
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "ICMS Base",
   "type": "module",
   "private": false,

package/server/graphqlMiddleware.serverOptions.ts

@@ -1,8 +1,8 @@
 import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
-import { extractCacheability } from '~/packages/nuxt-icms/server/utils/cacheability'
-import type { GraphqlCacheability } from '~/packages/nuxt-icms/server/helpers'
+import { extractCacheability } from '@iqual/nuxt-icms/server/utils/cacheability'
+import type { GraphqlCacheability } from '@iqual/nuxt-icms/server/helpers'
 import { defaultLangcode, langcodes } from '#nuxt-language-negotiation/config'
-import { buildProxyRequestHeaders } from '~/packages/nuxt-icms/server/helpers/request'
+import { buildProxyRequestHeaders } from '@iqual/nuxt-icms/server/helpers/request'
 
 export default defineGraphqlServerOptions<{
   extensions: {

package/tests/pages.spec.ts

@@ -0,0 +1,101 @@
+import path from 'path'
+import { promises as fsp } from 'fs'
+import { describe, it, expect } from 'vitest'
+import * as ts from 'typescript'
+import { parse as parseSfc } from '@vue/compiler-sfc'
+
+// Recursively find all Vue files in a directory
+async function findVueFiles(
+  dir: string,
+  ignorePatterns: string[] = [],
+): Promise<string[]> {
+  const entries = await fsp.readdir(dir, { withFileTypes: true })
+  const files: string[] = []
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+
+    // Skip if path matches any ignore pattern
+    if (ignorePatterns.some((pattern) => fullPath.includes(pattern))) {
+      continue
+    }
+
+    if (entry.isDirectory()) {
+      const subFiles = await findVueFiles(fullPath, ignorePatterns)
+      files.push(...subFiles)
+    } else if (entry.name.endsWith('.vue')) {
+      files.push(fullPath)
+    }
+  }
+
+  return files
+}
+
+// Parse a Vue SFC and check if the component's script calls the given function at least once.
+function functionIsCalledAtLeastOnce(
+  vueFileContents: string,
+  functionName: string,
+): boolean {
+  const result = parseSfc(vueFileContents)
+  const script = result.descriptor.scriptSetup?.content
+  if (!script) {
+    return false
+  }
+  const sourceFile = ts.createSourceFile(
+    'temp.ts',
+    script,
+    ts.ScriptTarget.ES2015,
+    true,
+  )
+
+  let isCalled = false
+
+  function visit(node: ts.Node) {
+    if (
+      ts.isCallExpression(node) &&
+      node.expression.getText(sourceFile) === functionName
+    ) {
+      isCalled = true
+    }
+
+    if (!isCalled) {
+      ts.forEachChild(node, visit)
+    }
+  }
+
+  ts.forEachChild(sourceFile, visit)
+
+  return isCalled
+}
+
+describe('The Nuxt page component', async () => {
+  const rootDir = path.resolve(__dirname, './../app/pages')
+  const ignorePatterns = ['blokkli']
+
+  const pageFilePaths = await findVueFiles(rootDir, ignorePatterns)
+  console.log(pageFilePaths)
+
+  const pageComponentFiles = await Promise.all(
+    pageFilePaths.map((filePath) => {
+      return fsp.readFile(filePath, { encoding: 'utf8' }).then((content) => {
+        return {
+          filePath,
+          content,
+        }
+      })
+    }),
+  )
+
+  pageComponentFiles.forEach(({ filePath, content }) => {
+    it(`"${filePath}" should call useDrupalRouteQuery()`, () => {
+      expect(
+        functionIsCalledAtLeastOnce(content, 'useDrupalRouteQuery'),
+      ).toEqual(true)
+    })
+    it(`"${filePath}" should call renderPageDependencies()`, () => {
+      expect(
+        functionIsCalledAtLeastOnce(content, 'renderPageDependencies'),
+      ).toEqual(true)
+    })
+  })
+})

package/vitest.config.mts

@@ -6,9 +6,9 @@ export default defineVitestConfig({
     globals: true,
     environment: 'nuxt',
     alias: {
-      '~': path.resolve(__dirname, './'),
+      '~': path.resolve(__dirname, './app'),
+      '~~': path.resolve(__dirname, './'),
     },
-    include: ['**/__tests__/*.*'],
     coverage: {
       all: true,
       provider: 'v8',

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>