@iqual/nuxt-icms 1.0.14 → 1.2.1

package/components/Paragraph/TextMedia/index.vue

@@ -1,7 +1,6 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-
       <div :class="textColumnClassList">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -42,30 +41,38 @@ defineProps<ParagraphIcmsLayoutTextMediaFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const reverseColumns = ref(false)
+
+watch(
+  () => options.value.reverseColumns,
+  (newVal) => {
+    reverseColumns.value = Boolean(Number(newVal))
+  },
+  { immediate: true },
+)
+
 const textColumnClassList = computed(() => {
   const classList = ['col-span-12']
+  const width = options.value.textWidth
 
-  if (options.value.textWidth === 'medium') {
+  if (width === 'medium') {
     classList.push('md:col-span-6')
-  } else if (options.value.textWidth === 'narrow') {
-    classList.push('md:col-span-4')
+  } else if (width === 'narrow') {
+    classList.push('md:col-span-5')
   } else {
-    classList.push('md:col-span-8')
+    classList.push('md:col-span-7')
   }
 
-  if (options.value.textAlign === 'right') {
-    classList.push(
-      'md:order-last',
-      options.value.textWidth === 'medium'
-        ? 'md:col-start-7 md:pl-6'
-        : options.value.textWidth === 'narrow'
-          ? 'md:col-start-8'
-          : 'md:col-start-5',
-    )
-  }
-  
-  if (options.value.textAlign === 'left' && options.value.textWidth === 'medium') {
-    classList.push('md:pr-6')
+  if (reverseColumns.value) {
+    classList.push('md:order-last')
+
+    if (width === 'medium') {
+      classList.push('md:col-start-7')
+    } else if (width === 'narrow') {
+      classList.push('md:col-start-8')
+    } else {
+      classList.push('md:col-start-6')
+    }
   }
 
   return classList
@@ -73,28 +80,28 @@ const textColumnClassList = computed(() => {
 
 const imageColumnClassList = computed(() => {
   const classList = ['col-span-12']
+  const width = options.value.textWidth
 
-  if (options.value.textWidth === 'medium') {
+  if (width === 'medium') {
     classList.push('md:col-span-6')
-  } else if (options.value.textWidth === 'narrow') {
+  } else if (width === 'narrow') {
     classList.push('md:col-span-7')
   } else {
-    classList.push('md:col-span-3')
+    classList.push('md:col-span-5')
   }
 
-  if (options.value.textAlign === 'left') {
-    classList.push(
-      'md:order-last',
-      options.value.textWidth === 'medium'
-        ? 'md:col-start-7 md:pl-6'
-        : options.value.textWidth === 'narrow'
-          ? 'md:col-start-6'
-          : 'md:col-start-10',
-    )
-  }
-
-  if (options.value.textAlign === 'right' && options.value.textWidth === 'medium') {
+  if (reverseColumns.value) {
     classList.push('md:pr-6')
+  } else {
+    classList.push('md:order-last', 'md:pl-6')
+
+    if (width === 'medium') {
+      classList.push('md:col-start-7')
+    } else if (width === 'narrow') {
+      classList.push('md:col-start-6')
+    } else {
+      classList.push('md:col-start-8')
+    }
   }
 
   return classList

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

@@ -0,0 +1,16 @@
+fragment paragraphIcmsTimelineElement on ParagraphIcmsTimelineElement {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+}

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

@@ -0,0 +1,31 @@
+<template>
+  <DesignSystemOrganismsTimelineElement
+    :pretitle="pretitle"
+    :title="title"
+    :title-style="titleStyle"
+    :title-weight="titleWeight"
+    :subtitle="subtitle"
+    :text="text"
+    :media="media"
+    :buttons="buttons"
+    :color-scheme="colorScheme"
+    :has-decorative-line="false"
+    :reverse-columns="reverseColumns"
+    :is-editing="isEditing"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsTimelineElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsTimelineElementFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const reverseColumns = computed(() => {
+  return Boolean(Number(options.value.reverseColumns))
+})
+
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

package/components/Paragraph/Timeline/Layout/fragment.graphql

@@ -0,0 +1,15 @@
+fragment paragraphIcmsLayoutTimeline on ParagraphIcmsLayoutTimeline {
+  id
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleStyle: fieldIcmsTitleStyle
+  titleWeight: fieldIcmsTitleWeight
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  timelineElements: fieldIcmsTimelineElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsTimelineElement
+    }
+  }
+}

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

@@ -0,0 +1,325 @@
+<template>
+  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing" :data-timeline="id">
+    <DesignSystemAtomsGridRow v-if="pretitle || title || subtitle || text">
+      <div class="col-span-12 md:col-span-8">
+        <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="${props.id}"] [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-8']
+})
+
+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>