@iqual/nuxt-icms 1.1.0 → 1.2.2

package/components/Node/Icms/Page/SearchResult/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <DesignSystemAtomsLinkListItem
+    :link="link?.path"
+    :title="title"
+    :description="description"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { NodeIcmsPageSearchResultFragment } from '#graphql-operations'
+const props = defineProps<NodeIcmsPageSearchResultFragment>()
+</script>

package/components/Node/Icms/Page/Teaser/fragment.graphql

@@ -0,0 +1,17 @@
+fragment nodeIcmsPageTeaser on NodeIcmsPage {
+  pretitle: fieldIcmsTeaserPretitle
+  title: fieldIcmsTeaserTitle
+  mainTitle: label
+  text: fieldIcmsTeaserText
+  mainText: body
+  image: fieldIcmsTeaserImage {
+    ...media
+  }
+  mainImage: fieldIcmsImage {
+    ...media
+  }
+  link: url {
+    path
+  }
+  linkLabel: fieldIcmsTeaserLinkLabel
+}

package/components/Node/Icms/Page/Teaser/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <DesignSystemOrganismsTeaserCard
+    :image="image || mainImage"
+    :pretitle="pretitle"
+    :title="title || mainTitle"
+    :titleWeight="titleWeight"
+    :text="text || mainText"
+    :link="link?.path"
+    :link-label="linkLabel"
+    :colorScheme="colorScheme"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { NodeIcmsPageTeaserFragment } from '#graphql-operations'
+const props = defineProps<NodeIcmsPageTeaserFragment>()
+const { $texts } = useNuxtApp()
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

package/components/Node/Icms/Page/fragment.graphql

@@ -15,3 +15,21 @@ fragment nodeIcmsPage on NodeIcmsPage {
     }
   }
 }
+
+fragment nodeIcmsPageTeaser on NodeIcmsPage {
+  pretitle: fieldIcmsTeaserPretitle
+  title: fieldIcmsTeaserTitle
+  mainTitle: label
+  text: fieldIcmsTeaserText
+  mainText: body
+  image: fieldIcmsTeaserImage {
+    ...media
+  }
+  mainImage: fieldIcmsImage {
+    ...media
+  }
+  link: url {
+    path
+  }
+  linkLabel: fieldIcmsTeaserLinkLabel
+}

package/components/Node/Icms/Page/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <BlokkliProvider v-slot="{ entity }" v-bind="blokkliProps" :entity="props">
-    <BlokkliField :list="paragraphs" name="field_icms_paragraphs" />
-  </BlokkliProvider>
+  <div>
+    <BlokkliProvider v-slot="{ entity }" v-bind="blokkliProps" :entity="props">
+      <BlokkliField :list="paragraphs" name="field_icms_paragraphs" />
+    </BlokkliProvider>
+  </div>
 </template>
 
 <script lang="ts" setup>

package/components/Paragraph/CallToAction/index.vue

@@ -9,9 +9,9 @@
         <Media
           v-if="image"
           :media="image"
-          imageSizes="xs:60px xl:320px"
+          imageSizes="xs:175px xl:350px"
           imageAspectRatios="1/1"
-          mediaClass="-mt-12 -40 xl:w-full"
+          mediaClass="-mt-12 xl:w-full"
           elementClass="size-full object-cover object-center aspect-square rounded-lg xl:rounded-none xl:rounded-t-lg"
         />
       </div>
@@ -22,12 +22,16 @@
           v-html="text"
         />
       </div>
-      <BlokkliField
-        name="field_icms_buttons"
-        :list="buttons"
-        class="col-span-12 flex items-center md:col-span-3 xl:col-span-3"
-        :class="{ droptarget: isEditing }"
-      />
+      <div
+        class="col-span-12 flex items-center justify-center md:col-span-3 xl:col-span-3"
+      >
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="flex flex-wrap items-center justify-center gap-4"
+          :class="{ droptarget: isEditing }"
+        />
+      </div>
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow v-if="pretitle || title">
-      <div class="col-span-12 md:col-span-4">
+      <div class="col-span-12 md:col-span-12">
         <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-9">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"

package/components/Paragraph/Contact/index.vue

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

package/components/Paragraph/Downloads/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-5">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -10,7 +10,6 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-7"></div>
       <div class="col-span-12 md:col-span-5">
         <DesignSystemOrganismsContentBlock
           :media="media"
@@ -30,21 +29,10 @@
               :class="download({ colorScheme })"
             >
               <div :class="downloadIcon({ colorScheme })">
-                <svg
+                <SpriteSymbol
+                  name="download"
                   class="size-5"
-                  width="auto"
-                  height="auto"
-                  viewBox="0 0 16 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9.66634 0.666656V3.99999C9.66634 4.44202 9.84194 4.86594 10.1545 5.1785C10.4671 5.49106 10.891 5.66666 11.333 5.66666H14.6663M10.4997 0.666656H2.99967C2.55765 0.666656 2.13372 0.842251 1.82116 1.15481C1.5086 1.46737 1.33301 1.8913 1.33301 2.33332V15.6667C1.33301 16.1087 1.5086 16.5326 1.82116 16.8452C2.13372 17.1577 2.55765 17.3333 2.99967 17.3333H12.9997C13.4417 17.3333 13.8656 17.1577 14.1782 16.8452C14.4907 16.5326 14.6663 16.1087 14.6663 15.6667V4.83332L10.4997 0.666656Z"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
+                />
               </div>
               <DesignSystemOrganismsContentBlock :text="document.name" />
             </a>

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-5">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -12,7 +12,6 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-7"></div>
       <div class="col-span-12 md:col-span-5">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
@@ -47,7 +46,7 @@
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutFaqFragment } from '#graphql-operations'
 
-defineProps<ParagraphIcmsLayoutFaqFragment>()
+const props = defineProps<ParagraphIcmsLayoutFaqFragment>()
 
 const defaultValue = computed(() => {
   if (!isEditing) {
@@ -81,4 +80,26 @@ const buttonAlignment = computed(() => {
 })
 
 provide('colorScheme', colorScheme)
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: (props.faqElements || []).map((faq) => ({
+    '@type': 'Question',
+    name: faq?.props?.question?.trim() ?? '',
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: faq?.props?.answer?.replace(/<[^>]+>/g, '').trim() ?? '',
+    },
+  })),
+}
+
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify(faqJsonLd, null, 2),
+    },
+  ],
+})
 </script>

package/components/Paragraph/FlipTeasers/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-12">
         <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-9">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"

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-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,188 +11,59 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <div class="col-span-12 md:col-span-9">
         <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>
+      <DesignSystemMoleculesMediaLightbox
+        :media-objects="(media?.filter((item): item is MediaFragment => Boolean(item)) || [])"
+        :is-open="isOpen"
+        :current-index="currentIndex"
+        :captions="captions"
+        @close="closeLightbox"
+        @update:current-index="setCurrentIndex"
+      />
     </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 type { MediaFragment } from '#graphql-operations'
+import { useMediaLightbox } from '@iqual/nuxt-icms/composables/useMediaLightbox'
 
-const { options } = useAttrs().blokkliData
+const { options } = useAttrs().blokkliData as any
 
 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 {
+  isOpen,
+  currentIndex,
+  openLightbox,
+  closeLightbox,
+  setCurrentIndex,
+  captions,
+} = useMediaLightbox(props.media)
 
 const colorScheme = computed(() => {
   return options.value.colorScheme
@@ -201,14 +72,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/IconText/Layout/index.vue

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

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-12">
         <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-9">
         <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-12">
         <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-9">
         <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
   }
 }