@iqual/nuxt-icms 1.0.2

package/components/Paragraph/FlipTeasers/fragment.graphql

@@ -0,0 +1,25 @@
+fragment paragraphIcmsLayoutFlipTeasers on ParagraphIcmsLayoutFlipTeasers {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  flipTeasers: fieldIcmsContentEntities {
+    pretitle: fieldIcmsTeaserPretitle
+    title: fieldIcmsTeaserTitle
+    mainTitle: label
+    text: fieldIcmsTeaserText
+    mainText: body
+    image: fieldIcmsTeaserImage {
+      ...media
+    }
+    mainImage: fieldIcmsImage {
+      ...media
+    }
+    link: path {
+      alias
+    }
+    linkLabel: fieldIcmsTeaserLinkLabel
+  }
+}

package/components/Paragraph/FlipTeasers/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-4">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-6 md:col-start-7">
+        <DesignSystemOrganismsContentBlock
+          :subtitle="subtitle"
+          :text="text"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :colorScheme="colorScheme"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <DesignSystemAtomsGridRow class="mt-10 md:mt-20">
+      <DesignSystemOrganismsFlipTeaser
+        v-for="flipTeaser in flipTeasers"
+        :image="flipTeaser?.image || flipTeaser?.mainImage"
+        :pretitle="flipTeaser?.pretitle"
+        :title="flipTeaser?.title || flipTeaser?.mainTitle"
+        :titleWeight="childTitleWeight"
+        :subtitle="flipTeaser?.subtitle"
+        :text="flipTeaser?.text || flipTeaser?.mainText"
+        :link="flipTeaser?.link?.alias"
+        :link-label="flipTeaser?.linkLabel"
+      />
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutFlipTeasersFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutFlipTeasersFragment>()
+
+const { options, parentType } = useAttrs().blokkliData
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+provide('colorScheme', colorScheme)
+</script>

package/components/Paragraph/Gallery/fragment.graphql

@@ -0,0 +1,11 @@
+fragment paragraphIcmsLayoutGallery on ParagraphIcmsLayoutGallery {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+}

package/components/Paragraph/Gallery/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-4">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-6 md:col-start-7">
+        <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>
+    </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()
+
+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 colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+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>
+.gallery-item {
+  display: grid;
+  grid-template-areas: 'content';
+}
+
+.gallery-item-grid-item {
+  grid-area: content;
+}
+</style>

package/components/Paragraph/HeroImage/fragment.graphql

@@ -0,0 +1,17 @@
+fragment paragraphIcmsLayoutHeroImage on ParagraphIcmsLayoutHeroImage {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  medium: fieldIcmsMediaElement {
+    ...media
+  }
+}

package/components/Paragraph/HeroImage/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <DesignSystemAtomsContainer
+    :spacing="{ top: 'none', bottom: 'none' }"
+    :class="containerClassList"
+    class="relative flex min-h-[400] items-center md:min-h-[700px]"
+  >
+    <!-- Overlay -->
+    <div
+      v-if="options.colorMode !== 'none'"
+      class="absolute inset-0 z-10"
+      :class="overlayClass"
+    />
+
+    <!-- Image/video wrapper -->
+    <div class="absolute inset-0">
+      <Media
+        v-if="medium"
+        :media="medium"
+        mediaClass="size-full object-cover"
+        imageAspectRatios="xs:1/1 md:16/9"
+        imageSizes="xs:100vw sm:100vw md:100vw lg:100vw xl:100vw xxl:100vw"
+        imageLoading="eager"
+        :videoControls="false"
+        videoAutoplay
+        videoMuted
+        videoLoop
+      />
+      <div class="absolute inset-0" />
+    </div>
+
+    <!-- Text row -->
+    <DesignSystemAtomsGridRow
+      v-if="pretitle || title || subtitle"
+      class="relative z-10 px-4 py-12 md:px-12 md:py-32"
+    >
+      <div class="col-span-12 md:col-span-6" :class="columnClassList">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="textShadow"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :titleClass="textShadow"
+          :subtitle="subtitle"
+          :subtitleClass="textShadow"
+          :text="text"
+          :textClass="textShadow"
+        />
+
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="mt-6 flex flex-wrap gap-6"
+          :class="[buttonAlignment, { droptarget: isEditing }]"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutHeroImageFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutHeroImageFragment>()
+
+const prefetch = provide('prefetch', true)
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const containerClassList = computed(() => {
+  const classList = []
+  if (options.value.colorMode !== 'none') {
+    classList.push(options.value.colorMode)
+  }
+  return classList.join(' ')
+})
+
+const columnClassList = computed(() => {
+  const classList = []
+
+  if (options.value.reverseColumns === true) {
+    classList.push('md:col-start-0')
+  } else {
+    classList.push('md:col-start-7')
+  }
+
+  if (options.value.colorMode === 'dark') {
+    classList.push('text-white')
+  }
+
+  return classList.join(' ')
+})
+
+const overlayClass = computed(() => {
+
+  const classList = []
+
+  if (options.value.reverseColumns === true) {
+    classList.push('md:bg-gradient-to-l')
+  } else {
+    classList.push('md:bg-gradient-to-r')
+  }
+
+  classList.push('md:bg-transparent md:from-transparent md:from-25%')
+
+  if (options.value.colorMode === 'light') {
+    classList.push(
+      'md:to-[rgba(255,255,255,0.75)]',
+      'bg-[rgba(255,255,255,0.3)]',
+    )
+  } else if (options.value.colorMode === 'dark') {
+    classList.push('md:to-[rgba(17,17,17,0.75)]', 'bg-[rgba(17,17,17,0.3)]')
+  }
+
+  return classList.join(' ')
+})
+
+const textShadow = computed(() => {
+  if (options.value.textShadow === 'light') {
+    return 'text-shadow-sm'
+  }
+
+  if (options.value.textShadow === 'dark') {
+    return 'text-shadow-md'
+  }
+
+  if (options.value.textShadow === 'darker') {
+    return 'text-shadow-lg'
+  }
+
+  return ''
+})
+
+const buttonAlignment = computed(() => {
+  switch (options.value.buttonAlignment) {
+    case 'left':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'right':
+      return 'justify-end'
+    default:
+      return 'justify-start'
+  }
+})
+provide('colorScheme', options.value.colorMode ?? 'none')
+</script>

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

@@ -0,0 +1,8 @@
+fragment paragraphIcmsIconTextElement on ParagraphIcmsIconTextElement {
+  parentId
+  title: fieldIcmsTitle
+  text: fieldIcmsTextPlain
+  icon: fieldIcmsIcon {
+    ...media
+  }
+}

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

@@ -0,0 +1,18 @@
+<template>
+  <DesignSystemMoleculesIconText
+    :title="title"
+    :titleWeight="titleWeight"
+    :text="text"
+    :icon="icon"
+    :colorScheme="colorScheme"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsIconTextElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsIconTextElementFragment>()
+
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

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

@@ -0,0 +1,23 @@
+fragment paragraphIcmsLayoutTextcolIconlist on ParagraphIcmsLayoutTextcolIconlist {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  subtitle: fieldIcmsSubtitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+  iconTextElements: fieldIcmsIconTextElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsIconTextElement
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-5">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :subtitle="subtitle"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :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"
+          :text="text"
+          :media="media"
+          mediaClass="size-full rounded-lg overflow-hidden"
+          mediaSliderClass="mt-0 rounded-lg overflow-hidden"
+          :colorScheme="colorScheme"
+        />
+
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="mt-6 flex flex-wrap gap-6"
+          :class="[buttonAlignment, { droptarget: isEditing }]"
+        />
+      </div>
+      <BlokkliField
+        name="field_icms_icon_text_elements"
+        :list="iconTextElements"
+        class="col-span-12 mt-4 flex flex-col gap-6 md:col-span-6 md:col-start-7 md:mt-0"
+        :class="{ droptarget: isEditing }"
+      />
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextcolIconlistFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTextcolIconlistFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const buttonAlignment = computed(() => {
+  switch (options.value.buttonAlignment) {
+    case 'left':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'right':
+      return 'justify-end'
+    default:
+      return 'justify-start'
+  }
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+provide('colorScheme', colorScheme)
+provide('isEditing', isEditing)
+provide('titleWeight', childTitleWeight)
+</script>

package/components/Paragraph/Introduction/fragment.graphql

@@ -0,0 +1,20 @@
+fragment paragraphIcmsLayoutTextImageIntro on ParagraphIcmsLayoutTextImageIntro {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  subtitle: fieldIcmsSubtitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  image: fieldIcmsMediaElement {
+    ...media
+  }
+  signature: fieldIcmsSignature {
+    ...media
+  }
+}