@iqual/nuxt-icms 1.1.0 → 1.2.1

package/components/Paragraph/Gallery/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-4">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,188 +11,57 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
           :colorScheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>
 
     <DesignSystemAtomsGridRow v-if="media?.length" class="mt-10 md:mt-20">
-      <!-- Modal -->
-      <Dialog>
-        <div
-          v-for="image in media"
-          :key="image.id"
-          class="gallery-item relative col-span-12 aspect-square overflow-hidden rounded-lg transition-shadow duration-300 ease-in-out md:col-span-6 lg:col-span-3"
-        >
-          <!-- Modal trigger -->
-          <DialogTrigger @click="handleImageClick(Number(image.id))">
-            <Media
-              v-if="image"
-              :media="image"
-              imageAspectRatios="1/1"
-              imageSizes="xs:100vw sm-100vw md:320px lg:400px"
-              mediaClass="size-full cursor-pointer object-cover"
-            />
-          </DialogTrigger>
-        </div>
-
-        <!-- Modal content -->
-        <DialogContent :class="dialogContent({ colorScheme })">
-          <!-- Close button -->
-          <DialogClose class="group" :class="dialogClose({ colorScheme })">
-            <X :class="dialogCloseX({ colorScheme })" />
-            <span class="sr-only">Close</span>
-          </DialogClose>
-
-          <!-- Required for screen readers -->
-          <VisuallyHidden>
-            <DialogHeader>
-              <DialogTitle>{{ dialogTitle }}</DialogTitle>
-              <DialogDescription>{{ dialogDescription }}</DialogDescription>
-            </DialogHeader>
-          </VisuallyHidden>
-
-          <!-- Carousel -->
-          <Carousel class="@container" @init-api="setApi">
-            <!-- Carousel content -->
-            <CarouselContent>
-              <!-- Carousel items -->
-              <CarouselItem
-                v-for="image in media"
-                :key="image.id"
-                class="flex flex-col justify-center pl-4"
-              >
-                <!-- Image -->
-                <Media 
-                  v-if="image"
-                  :media="image" 
-                  mediaClass="rounded-lg" 
-                />
-                <!-- Caption -->
-                <DesignSystemOrganismsContentBlock
-                  v-if="image.alt?.alt || image.title"
-                  :text="image.alt?.alt || image.title"
-                  textClass="text-sm text-center mt-4"
-                  :colorScheme="colorScheme"
-                />
-              </CarouselItem>
-            </CarouselContent>
-
-            <!-- Previous -->
-            <CarouselPrevious
-              class="left-6 md:left-12"
-              :class="carouselButton({ colorScheme })"
-            >
-              <ChevronLeft :size="24" :stroke-width="1" />
-            </CarouselPrevious>
-
-            <!-- Next -->
-            <CarouselNext
-              class="right-6 md:right-12"
-              :class="carouselButton({ colorScheme })"
-            >
-              <ChevronRight :size="24" :stroke-width="1" />
-            </CarouselNext>
-          </Carousel>
-        </DialogContent>
-      </Dialog>
+      <div
+        v-for="(image, index) in media"
+        :key="index"
+        class="gallery-item col-span-12 aspect-square overflow-hidden rounded-lg md:col-span-6 lg:col-span-3"
+        @click="openLightbox(index)"
+      >
+        <MediaImage
+          v-if="image"
+          :media="image"
+          imageAspectRatios="1/1"
+          imageSizes="xs:100vw sm-100vw md:320px lg:400px"
+          mediaClass="size-full cursor-pointer object-cover object-center"
+        />
+      </div>
+      <FsLightbox
+        :toggler="toggleLightbox"
+        :sources="sources"
+        :slide="currentSlide"
+        :customAttributes="customAttributes"
+        :captions="captions"
+      />
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
 </template>
 
 <script lang="ts" setup>
-import type { CarouselApi } from '@iqual/nuxt-icms/components/ui/carousel'
 import type { ParagraphIcmsLayoutGalleryFragment } from '#graphql-operations'
-import { VisuallyHidden } from 'radix-vue'
-import { tv } from 'tailwind-variants'
-import { ChevronLeft, ChevronRight, X } from 'lucide-vue-next'
-const { $texts } = useNuxtApp()
+import FsLightbox from 'fslightbox-vue'
 
 const { options } = useAttrs().blokkliData
 
 const props = defineProps<ParagraphIcmsLayoutGalleryFragment>()
 
-const dialogContent = tv({
-  base: 'dialog-content block max-w-[min(826px,90vw)] p-6 pt-16 md:p-8 lg:p-12 md:pt-16 lg:pt-16 mx-auto rounded-lg',
-  variants: {
-    colorScheme: {
-      none: 'bg-white dark:bg-white text-black dark:text-black',
-      dark: 'bg-gray-900 dark:bg-gray-900 text-white dark:text-white',
-      light: 'bg-white dark:bg-white text-black dark:text-black',
-      accent: 'bg-primary-500 dark:bg-primary-500 text-white dark:text-white',
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
-})
-
-const dialogClose = tv({
-  base: 'absolute flex size-7 right-4 top-4 items-center justify-center rounded-full transition-colors duration-300 z-10',
-  variants: {
-    colorScheme: {
-      none: 'bg-gray-100 hover:bg-black',
-      dark: 'bg-black hover:bg-white',
-      light: 'bg-gray-100 hover:bg-black',
-      accent: 'bg-primary-600 hover:bg-primary-700',
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
-})
-
-const dialogCloseX = tv({
-  base: 'size-4 transition-stroke duration-300',
-  variants: {
-    colorScheme: {
-      none: 'stroke-black group-hover:stroke-white',
-      dark: 'stroke-white group-hover:stroke-black',
-      light: 'stroke-black group-hover:stroke-white',
-      accent: 'stroke-white group-hover:stroke-white',
-    },
-  },
-  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-black text-white hover:bg-gray-50 hover:text-black dark:bg-black dark:text-white hover:dark:bg-gray-50 hover:dark:text-black',
-      light:
-        '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',
-      accent:
-        'bg-primary-600 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
-})
-
-const api = ref<CarouselApi>()
-function setApi(val: CarouselApi) {
-  api.value = val
-}
-
-const handleImageClick = (imageId: number) => {
-  if (!props.media) return
-  // Find the index of the image in the media array
-  const index = props.media.findIndex((image) => Number(image.id) === imageId)
-  nextTick(() => {
-    api.value?.scrollTo(index, true)
-  })
-}
+const {
+  toggleLightbox,
+  currentSlide,
+  openLightbox,
+  sources,
+  customAttributes,
+  captions,
+} = useLightbox(props.media)
 
 const colorScheme = computed(() => {
   return options.value.colorScheme
@@ -201,14 +70,6 @@ const colorScheme = computed(() => {
 const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
-
-const dialogTitle = computed(() => {
-  return $texts('gallery.title', 'Gallery slider')
-})
-
-const dialogDescription = computed(() => {
-  return $texts('gallery.description', 'Images in a slider')
-})
 </script>
 
 <style lang="css" scoped>

package/components/Paragraph/HeroImage/index.vue

@@ -67,6 +67,16 @@ const prefetch = provide('prefetch', true)
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const reverseColumns = ref(false)
+
+watch(
+  () => options.value.reverseColumns,
+  (newVal) => {
+    reverseColumns.value = Boolean(Number(newVal))
+  },
+  { immediate: true },
+)
+
 const containerClassList = computed(() => {
   const classList = []
   if (options.value.colorMode !== 'none') {
@@ -78,8 +88,8 @@ const containerClassList = computed(() => {
 const columnClassList = computed(() => {
   const classList = []
 
-  if (options.value.reverseColumns === true) {
-    classList.push('md:col-start-0')
+  if (reverseColumns.value) {
+    classList.push('md:col-start-1')
   } else {
     classList.push('md:col-start-7')
   }
@@ -92,10 +102,9 @@ const columnClassList = computed(() => {
 })
 
 const overlayClass = computed(() => {
-
   const classList = []
 
-  if (options.value.reverseColumns === true) {
+  if (reverseColumns.value) {
     classList.push('md:bg-gradient-to-l')
   } else {
     classList.push('md:bg-gradient-to-r')

package/components/Paragraph/Media/index.vue

@@ -14,8 +14,8 @@
         <Media
           v-else-if="media && media.length === 1 && media[0]"
           :media="media[0]"
-          imageSizes="xs:100vw sm:100vw md:100vw lg:1284px"
-          elementClass="rounded-lg"
+          :imageSizes="imageSizes"
+          :elementClass="elementClassList"
           showCaption
         />
       </div>
@@ -46,6 +46,11 @@ const mediaElementClassList = computed(() => {
   return classList.join(' ')
 })
 
+const elementClassList = computed(() => {
+  if (options.value.width === 'full') return ''
+  return 'rounded-lg'
+})
+
 const colorScheme = computed(() => {
   return options.value.colorScheme
 })

package/components/Paragraph/Table/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-6 lg:col-span-4">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :subtitle="subtitle"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 lg:col-start-7">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock :text="text" />
       </div>
     </DesignSystemAtomsGridRow>

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-6 lg:col-span-4">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -12,7 +12,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 lg:col-start-7">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :text="text"
           :colorScheme="colorScheme"

package/components/Paragraph/Teasers/fragment.graphql

@@ -6,20 +6,7 @@ fragment paragraphIcmsLayoutTeasers on ParagraphIcmsLayoutTeasers {
   titleStyle: fieldIcmsTitleStyle
   text: fieldIcmsText
   teasers: fieldIcmsContentEntities {
-    pretitle: fieldIcmsTeaserPretitle
-    title: fieldIcmsTeaserTitle
-    mainTitle: label
-    text: fieldIcmsTeaserText
-    mainText: body
-    image: fieldIcmsTeaserImage {
-      ...media
-    }
-    mainImage: fieldIcmsImage {
-      ...media
-    }
-    link: url {
-      path
-    }
-    linkLabel: fieldIcmsTeaserLinkLabel
+    bundle: __typename
+    ...entityTeaser
   }
 }

package/components/Paragraph/Teasers/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-4">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"
@@ -23,18 +23,7 @@
     </DesignSystemAtomsGridRow>
 
     <DesignSystemAtomsGridRow class="grid-4-col mt-10 md:mt-20">
-      <DesignSystemOrganismsTeaserCard
-        v-for="teaser in teasers"
-        :image="teaser?.image || teaser?.mainImage"
-        :pretitle="teaser?.pretitle"
-        :title="teaser?.title || teaser?.mainTitle"
-        :titleWeight="childTitleWeight"
-        :subtitle="teaser?.subtitle"
-        :text="teaser?.text || teaser?.mainText"
-        :link="teaser?.link?.path"
-        :link-label="teaser?.linkLabel"
-        :colorScheme="colorScheme"
-      />
+      <component v-for="teaser in teasers" :is="teaserComponent(teaser?.bundle)"  v-bind="teaser" />
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
 </template>
@@ -55,4 +44,12 @@ const spacing = computed(() => {
 })
 
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+const { $resolveDynamicEntityComponent } = useNuxtApp()
+const teaserComponent = (bundle) => {
+  return $resolveDynamicEntityComponent(`${bundle}Teaser`)
+}
+
+provide('colorScheme', colorScheme)
+provide('titleWeight', childTitleWeight)
 </script>

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/index.vue

@@ -23,7 +23,7 @@ defineProps<ParagraphIcmsTimelineElementFragment>()
 const { options, isEditing } = useAttrs().blokkliData
 
 const reverseColumns = computed(() => {
-  return options.value.reverseColumns
+  return Boolean(Number(options.value.reverseColumns))
 })
 
 const colorScheme = inject<string>('colorScheme')

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

@@ -1,4 +1,5 @@
 fragment paragraphIcmsLayoutTimeline on ParagraphIcmsLayoutTimeline {
+  id
   pretitle: fieldIcmsPretitle
   title: fieldIcmsTitle
   titleStyle: fieldIcmsTitleStyle

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

@@ -1,7 +1,7 @@
 <template>
-  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing">
+  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing" :data-timeline="id">
     <DesignSystemAtomsGridRow v-if="pretitle || title || subtitle || text">
-      <div class="col-span-12">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -172,8 +172,8 @@ const scrollToElement = (element: HTMLElement) => {
   })
 }
 
-const getTimelineElements = () =>
-  document.querySelectorAll('[data-timeline-element]')
+const getTimelineElements = () => 
+  document.querySelectorAll(`[data-timeline="${props.id}"] [data-timeline-element]`)
 
 const handleAnchorLinkClick = (index: number) => {
   if (isMobile.value) {

package/components/Paragraph/iFrame/index.vue

@@ -34,7 +34,7 @@ const textWrapperClassList = computed(() => {
   } 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']
+  return ['col-span-8']
 })
 
 const colorScheme = computed(() => {