@iqual/nuxt-icms 1.0.13 → 1.1.0

package/components/Blokkli/Timeline/Element/icms_timeline_element.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 8L9 22" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="9" cy="11" r="1" fill="black"/>
+<circle cx="9" cy="19" r="1" fill="black"/>
+<rect x="12.25" y="9.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+<rect x="12.25" y="17.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+</svg>

package/components/Blokkli/Timeline/Element/icon.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 8L9 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="9" cy="11" r="1" fill="none"/>
+<circle cx="9" cy="19" r="1" fill="none"/>
+<rect x="12.25" y="9.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" stroke-width="1.5" fill="none"/>
+<rect x="12.25" y="17.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" stroke-width="1.5" fill="none"/>
+</svg>

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

@@ -0,0 +1,14 @@
+<template>
+  <ParagraphTimelineElement v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsTimelineElementFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsTimelineElementFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_timeline_element',
+  globalOptions: ['reverseColumns'],
+})
+</script>

package/components/Blokkli/Timeline/Layout/icms_layout_timeline.svg

@@ -0,0 +1,16 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_286_20)">
+<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M7 10L7 24" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="7" cy="13" r="1" fill="black"/>
+<circle cx="7" cy="21" r="1" fill="black"/>
+<rect x="10.25" y="11.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+<rect x="10.25" y="19.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_286_20">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/Blokkli/Timeline/Layout/icon.svg

@@ -0,0 +1,16 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_286_20)">
+<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M7 10L7 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="7" cy="13" r="1" fill="none"/>
+<circle cx="7" cy="21" r="1" fill="none"/>
+<rect x="10.25" y="11.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" fill="none" stroke-width="1.5"/>
+<rect x="10.25" y="19.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" fill="none" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_286_20">
+<rect width="30" height="30" fill="none"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,14 @@
+<template>
+  <ParagraphTimelineLayout v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTimelineFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTimelineFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_timeline',
+  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+})
+</script>

package/components/Blokkli/iFrame/icon-blokkli-option-large-spacing-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="5.95" x="2" y="14.29" class="bk-option-icon-fill-strong" rx=".53" ry=".53" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-large-spacing-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="5.95" x="2" y="3.5" class="bk-option-icon-fill-strong" rx=".53" ry=".53" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-no-spacing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-small-spacing-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="3.53" x="2" y="14.29" class="bk-option-icon-fill-strong" rx=".52" ry=".52" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-small-spacing-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="3.53" x="2" y="5.92" class="bk-option-icon-fill-strong" rx=".52" ry=".52" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/{Layout/index.vue → index.vue}

@@ -1,5 +1,5 @@
 <template>
-  <ParagraphIFrameLayout v-bind="props" :blokkliData="blokkliData" />
+  <ParagraphIFrame v-bind="props" :blokkliData="blokkliData" />
 </template>
 
 <script lang="ts" setup>
@@ -9,10 +9,6 @@ const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_iframe',
-  globalOptions: [
-    'spacingBottom',
-    'spacingTop',
-  ],
+  globalOptions: ['textWidth', 'spacingBottom', 'spacingTop', 'colorScheme'],
 })
-
 </script>

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -0,0 +1,92 @@
+<template>
+  <DesignSystemAtomsGridRow
+    class="flex w-full shrink-0 flex-col-reverse justify-end p-0 lg:grid lg:scroll-mt-32"
+    data-timeline-element
+  >
+    <!-- Text column -->
+    <div :class="textColumnClasses">
+      <DesignSystemOrganismsContentBlock
+        :pretitle="pretitle"
+        :title="title"
+        :titleStyle="titleStyle"
+        :titleWeight="titleWeight"
+        titleClass="mb-2"
+        :subtitle="subtitle"
+        subtitleClass="font-semibold"
+        :text="text"
+        :colorScheme="colorScheme"
+        :hasDecorativeLine="false"
+      />
+      <BlokkliField
+        name="field_icms_buttons"
+        :list="buttons"
+        class="mt-6 flex flex-wrap gap-6"
+        :class="[{ droptarget: isEditing }]"
+      />
+    </div>
+
+    <!-- Media column -->
+    <div :class="mediaColumnClasses">
+      <DesignSystemMoleculesMediaSlider
+        v-if="media"
+        :media="media"
+        :colorScheme="colorScheme"
+        sliderClass="my-0"
+        imageSizes="xs:750px sm:750px md:750px lg:750px"
+        mediaClass="my-0 w-full rounded-lg overflow-hidden"
+      />
+    </div>
+  </DesignSystemAtomsGridRow>
+</template>
+
+<script lang="ts" setup>
+import type { MediaFragment } from '#graphql-operations'
+const props = defineProps<{
+  pretitle?: string
+  title?: string
+  titleStyle?: string
+  titleWeight?: string
+  subtitle?: string
+  text?: string
+  media?: (MediaFragment | null)[] | undefined
+  buttons?: Array<object>
+  colorScheme?: string
+  hasDecorativeLine?: boolean
+  reverseColumns?: boolean
+  isEditing?: boolean
+}>()
+
+const reverseColumns = ref(false)
+
+watch(
+  () => props.reverseColumns,
+  (newVal) => {
+    reverseColumns.value = Boolean(Number(newVal))
+  },
+  { immediate: true },
+)
+
+const textColumnClasses = computed(() => {
+  const classList = ['col-span-12', 'lg:col-span-5']
+
+  if (reverseColumns.value) {
+    classList.push('lg:order-last', 'lg:col-start-8')
+  } else {
+    classList.push('lg:order-first', 'lg:col-start-1')
+  }
+
+  return classList.join(' ')
+})
+
+const mediaColumnClasses = computed(() => {
+  const classList = ['col-span-12', 'lg:col-span-5']
+
+  if (reverseColumns.value) {
+    classList.push('lg:order-first', 'lg:col-start-1')
+  } else {
+    classList.push('lg:order-last', 'lg:col-start-8')
+  }
+
+  return classList.join(' ')
+})
+</script>

package/components/Media/Image/index.vue

@@ -46,7 +46,7 @@ const props = withDefaults(
   }>(),
   {
     imageLoading: 'lazy',
-    figcaptionClass: 'pt-1 text-center',
+    figcaptionClass: 'mt-2 italic text-center',
     elementClass: 'size-full object-cover object-center',
   },
 )

package/components/Media/RemoteVideo/index.vue

@@ -18,7 +18,7 @@
       >
         <img
           :src="thumbnailUrl"
-          class="absolute left-0 top-0 size-full object-cover aspect-video"
+          class="absolute left-0 top-0 aspect-video size-full object-cover"
           :class="elementClass"
           :alt="thumbnailAlt"
         />
@@ -26,9 +26,11 @@
         <SpriteSymbol name="play" class="z-10 size-[75px]" />
       </button>
 
-      <figcaption v-if="showCaption && media?.caption" 
-        v-text="media?.caption" 
-        :class="figcaptionClass" />
+      <figcaption
+        v-if="showCaption && media?.caption"
+        v-text="media?.caption"
+        :class="figcaptionClass"
+      />
     </figure>
   </VuepalRemoteVideo>
 </template>
@@ -36,13 +38,18 @@
 <script lang="ts" setup>
 import type { MediaRemoteVideoFragment } from '#graphql-operations'
 
-const props = defineProps<{
-  media: MediaRemoteVideoFragment
-  mediaClass?: string
-  elementClass?: string
-  showCaption?: boolean
-  figcaptionClass?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    media: MediaRemoteVideoFragment
+    mediaClass?: string
+    elementClass?: string
+    showCaption?: boolean
+    figcaptionClass?: string
+  }>(),
+  {
+    figcaptionClass: 'mt-2 italic text-center',
+  },
+)
 
 const isPlaying = ref(false)
 

package/components/Media/Video/index.vue

@@ -12,14 +12,15 @@
       <source v-if="media?.url?.path" :src="media.url.path" type="video/mp4" />
       Your browser does not support the video tag.
     </video>
-    <figcaption v-if="showCaption && media?.caption" 
-    v-text="media?.caption" 
-    :class="figcaptionClass" />
+    <figcaption
+      v-if="showCaption && media?.caption"
+      v-text="media?.caption"
+      :class="figcaptionClass"
+    />
   </figure>
 </template>
 
 <script lang="ts" setup>
-
 import type { MediaVideoFragment } from '#graphql-operations'
 
 withDefaults(
@@ -39,6 +40,7 @@ withDefaults(
     videoMuted: true,
     videoAutoplay: true,
     videoLoop: false,
+    figcaptionClass: 'mt-2 italic text-center',
   },
 )
 </script>

package/components/Paragraph/Media/index.vue

@@ -3,13 +3,20 @@
     <div :class="rowClassList">
       <div :class="columnClassList">
         <DesignSystemMoleculesMediaSlider
-          v-if="media && media.length"
+          v-if="media && media.length > 1"
           :media="media"
           :colorScheme="colorScheme"
-          :showCaption="true"
+          showCaption
           :sliderClass="mediaSliderClassList"
           :elementClass="mediaElementClassList"
-          
+        />
+
+        <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"
+          showCaption
         />
       </div>
     </div>
@@ -17,14 +24,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
+import type { ParagraphIcmsLayoutMediaFragment } from '#graphql-operations'
 
-defineProps<ParagraphIcmsLayoutTextMediaFragment>()
+defineProps<ParagraphIcmsLayoutMediaFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
 const mediaSliderClassList = computed(() => {
-  const classList = []
+  const classList = ['my-0']
   if (options.value.width !== 'full') {
     classList.push('rounded-lg overflow-hidden')
   }
@@ -58,7 +65,6 @@ const rowClassList = computed(() => {
 })
 
 const imageSizes = computed(() => {
-
   if (options.value.width === 'full') {
     return 'xs:100vw sm:100vw md:100vw lg:100vw'
   }
@@ -79,5 +85,4 @@ const columnClassList = computed(() => {
 
   return classList
 })
-
 </script>

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 options.value.reverseColumns
+})
+
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

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

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