@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Paragraph/Teasers/index.vue

@@ -2,13 +2,24 @@
   <DesignSystemAtomsContainer
     :colorScheme="colorScheme"
     :spacing="spacing"
-    :class="themedClass('containerClass')"
+    :class="
+      cn(
+        themedClass('containerClass'),
+        slider && themedClass('sliderContainerClass'),
+      )
+    "
   >
     <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
       <div
         v-if="pretitle || title"
         :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
+          cn(
+            themedClass(
+              'firstRowFirstColumnClass',
+              'col-span-12 md:col-span-9',
+            ),
+            alignmentClassList,
+          )
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -24,7 +35,13 @@
       <div
         v-if="subtitle || text"
         :class="
-          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
+          cn(
+            themedClass(
+              'firstRowSecondColumnClass',
+              'col-span-12 md:col-span-9',
+            ),
+            alignmentClassList,
+          )
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -40,33 +57,80 @@
     </DesignSystemAtomsGridRow>
 
     <DesignSystemAtomsGridRow
+      v-if="!slider"
       :class="
-        themedClass(
-          'secondRowClass',
+        cn(
+          themedClass('secondRowClass', 'grid-4-col gap-y-12'),
           pretitle || title || subtitle || text
-            ? 'grid-4-col mt-10 gap-y-12'
-            : 'grid-4-col gap-y-12',
+            ? themedClass('secondRowOffsetClass', 'mt-10')
+            : '',
         )
       "
     >
       <component
-        v-for="teaser in teasers"
-        :is="teaserComponent(teaser?.bundle)"
+        v-for="(teaser, index) in teasers"
+        :is="teaserComponent(teaser?.__typename)"
+        :key="teaser?.__typename + '-' + teaserVariant + '-' + index"
         v-bind="teaser"
       />
     </DesignSystemAtomsGridRow>
+
+    <DesignSystemAtomsGridRow
+      v-else
+      :class="
+        cn(
+          pretitle || title || subtitle || text
+            ? themedClass('secondRowOffsetClass', 'mt-10')
+            : '',
+        )
+      "
+    >
+      <div :class="themedClass('carouselContainer', 'relative col-span-12')">
+        <UCarousel
+          v-model="carouselIndex"
+          :items="teasers || []"
+          :arrows="(teasers?.length || 0) > sliderColumns"
+          :watch-drag="(teasers?.length || 0) > sliderColumns"
+          nextIcon="i-lucide-chevron-right"
+          prevIcon="i-lucide-chevron-left"
+          :ui="{
+            viewport: themedClass('carouselViewport'),
+            item: sliderItemClass,
+            container: 'gap-6',
+            prev: cn(
+              carouselButton({ colorScheme }),
+              themedClass('carouselButtonPrevClass', 'start-0 sm:start-0'),
+            ),
+            next: cn(
+              carouselButton({ colorScheme }),
+              themedClass('carouselButtonNextClass', 'start-12 sm:start-12'),
+            ),
+          }"
+        >
+          <template #default="{ item, index }">
+            <component
+              :is="teaserComponent(item?.__typename)"
+              :key="item?.__typename + '-' + teaserVariant + '-' + index"
+              v-bind="item"
+            />
+          </template>
+        </UCarousel>
+      </div>
+    </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTeasersFragment } from '#graphql-operations'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
 
 const props = defineProps<ParagraphIcmsLayoutTeasersFragment>()
 
 const themedClass = useTheme('ParagraphTeasers')
 
-const { options, parentType } = useAttrs().blokkliData as any
+const { options } = useAttrs().blokkliData as any
 
 const colorScheme = computed(() => {
   return options.value.colorScheme
@@ -76,13 +140,92 @@ const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+const teaserVariant = computed(() => {
+  return options.value.teaserVariant
+})
+
+const slider = computed(() => {
+  return options.value.slider
+})
+
+const sliderColumns = computed(() => {
+  return options.value.sliderColumns
+})
+
+const alignHorizontalFull = computed(() => {
+  return options.value.alignHorizontalFull
+})
+
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (alignHorizontalFull.value == 'center') {
+    classList.push('text-center')
+    classList.push('md:col-span-8')
+    classList.push('md:col-start-3')
+  }
+  if (alignHorizontalFull.value == 'right') {
+    classList.push('text-right')
+    classList.push('md:col-start-4')
+  }
+  return classList.join(' ')
+})
+
+const carouselIndex = ref(0)
+
+const viewport = useViewport()
+
+const sliderItemClass = computed(() => {
+  if (viewport.isLessThan('sm')) return 'basis-full'
+  if (viewport.isLessThan('lg')) return 'basis-[calc((100%_-_1.5rem)_/_2)]'
+  const columns = sliderColumns.value || 1
+  const map: Record<number, string> = {
+    1: 'basis-full',
+    2: 'basis-[calc((100%_-_1.5rem)_/_2)]',
+    3: 'basis-[calc((100%_-_3rem)_/_3)]',
+    4: 'basis-[calc((100%_-_4.5rem)_/_4)]',
+  }
+  return map[columns] || 'basis-full'
+})
+
+const carouselButton = tv({
+  base: themedClass(
+    'carouselButtonBase',
+    'w-fit border-0 ring-0 shadow-none absolute cursor-pointer -top-9',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'carouselButtonVariantsColorSchemeNone',
+        'disabled:bg-gray-50 bg-gray-50 text-gray-950 hover:bg-gray-200 active:bg-gray-200',
+      ),
+      dark: themedClass(
+        'carouselButtonVariantsColorSchemeDark',
+        'disabled:bg-gray-800 bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-900',
+      ),
+      light: themedClass(
+        'carouselButtonVariantsColorSchemeLight',
+        'disabled:bg-gray-50 bg-gray-50 text-gray-950 hover:bg-gray-200 active:bg-gray-200',
+      ),
+      accent: themedClass(
+        'carouselButtonVariantsColorSchemeAccent',
+        'disabled:bg-white bg-white text-primary-500 hover:bg-gray-100 active:bg-gray-100',
+      ),
+    },
+  },
+})
+
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 
-const { $resolveDynamicEntityComponent } = useNuxtApp()
-const teaserComponent = (bundle) => {
-  return $resolveDynamicEntityComponent(`${bundle}Teaser`)
+const { get } = useEntityRegistry()
+const teaserComponent = (bundle?: string) => {
+  if (bundle) {
+    return get(`${bundle}Teaser`)
+  }
+
+  return null
 }
 
 provide('colorScheme', colorScheme)
 provide('titleWeight', childTitleWeight)
+provide('teaserVariant', teaserVariant)
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <CarouselItem
+  <div
     :class="
       cn(
         themedClass(
@@ -34,7 +34,7 @@
       :logoFigcaptionClass="themedClass('logoFigcaptionClass')"
       :logoElementClass="themedClass('logoElementClass')"
     />
-  </CarouselItem>
+  </div>
 </template>
 
 <script lang="ts" setup>

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

@@ -4,6 +4,13 @@ fragment paragraphIcmsLayoutTestimonials on ParagraphIcmsLayoutTestimonials {
   titleWeight: fieldIcmsTitleWeight
   titleStyle: fieldIcmsTitleStyle
   subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
   testimonialElements: fieldIcmsTestimonialElements {
     ...paragraphsFieldItem
     props {

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

@@ -7,32 +7,48 @@
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
         v-if="pretitle || title || subtitle"
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-4')"
+        :class="
+          cn(
+            themedClass(
+              'firstColumnClass',
+              'col-span-12 space-y-6 md:col-span-4',
+            ),
+            firstColumnClass,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :pretitleClass="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
+          :text="text"
+          :titleClass="themedClass('titleClass')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
           :subtitle="subtitle"
           :subtitleClass="themedClass('subtitleClass')"
           :colorScheme="colorScheme"
         />
+
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="[
+            themedClass(
+              'buttonsContainerClass',
+              'flex flex-wrap items-center gap-6',
+            ),
+            { droptarget: isEditing },
+          ]"
+        />
       </div>
       <div
         :class="
-          themedClass(
-            'secondColumnClass',
-            pretitle || title || subtitle
-              ? 'col-span-12 md:col-span-7 md:col-start-6'
-              : 'col-span-12',
-          )
+          cn(themedClass('secondColumnClass', 'col-span-12'), secondColumnClass)
         "
       >
         <!-- Slider -->
-        <Carousel :class="carousel({ colorScheme })">
+        <div :class="carousel({ colorScheme })">
           <BlokkliField
             v-slot="{ items }"
             name="field_icms_testimonial_elements"
@@ -41,46 +57,38 @@
             v-if="isEditing"
           />
 
-          <BlokkliField
-            v-slot="{ items }"
-            name="field_icms_testimonial_elements"
-            :list="testimonialElements"
-            proxy-mode
+          <UCarousel
             v-else
-          >
-            <CarouselContent :class="themedClass('carouselContent')">
-              <BlokkliItem v-for="item in items" v-bind="item" />
-            </CarouselContent>
-          </BlokkliField>
-          <CarouselPrevious
-            :class="
-              cn(
-                themedClass('carouselButtonPrevClass', 'left-3 xl:left-16'),
+            v-model="carouselIndex"
+            :items="testimonialElements || []"
+            :arrows="(testimonialElements?.length ?? 0) > 1"
+            prevIcon="i-lucide-chevron-left"
+            nextIcon="i-lucide-chevron-right"
+            :ui="{
+              item: 'basis-full',
+              container: themedClass('carouselContent'),
+              prev: cn(
+                themedClass('carouselButtonPrevClass', 'sm:-start-24'),
                 carouselButton({ colorScheme }),
-              )
-            "
-          >
-            <ChevronLeft
-              :size="24"
-              :stroke-width="1"
-              :class="themedClass('carouselButtonPrevIconClass')"
-            />
-          </CarouselPrevious>
-          <CarouselNext
-            :class="
-              cn(
-                themedClass('carouselButtonNextClass', 'right-3 xl:right-16'),
+              ),
+              next: cn(
+                themedClass('carouselButtonNextClass', 'sm:-end-24'),
                 carouselButton({ colorScheme }),
-              )
-            "
+              ),
+            }"
           >
-            <ChevronRight
-              :size="24"
-              :stroke-width="1"
-              :class="themedClass('carouselButtonNextIconClass')"
-            />
-          </CarouselNext>
-        </Carousel>
+            <template #default="{ item }">
+              <BlokkliField
+                v-slot="{ items }"
+                name="field_icms_testimonial_elements"
+                :list="[item]"
+                proxy-mode
+              >
+                <BlokkliItem v-for="fieldItem in items" v-bind="fieldItem" />
+              </BlokkliField>
+            </template>
+          </UCarousel>
+        </div>
       </div>
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
@@ -91,14 +99,15 @@ import type { ParagraphIcmsLayoutTestimonialsFragment } from '#graphql-operation
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<ParagraphIcmsLayoutTestimonialsFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData
+const { options, isEditing } = useAttrs().blokkliData as any
 
 const themedClass = useTheme('ParagraphTestimonialLayout')
 
+const carouselIndex = ref(0)
+
 const carousel = tv({
   base: themedClass('carouselBase', 'px-16 py-8 xl:px-40 xl:py-12'),
   variants: {
@@ -123,25 +132,25 @@ const carousel = tv({
 const carouselButton = tv({
   base: themedClass(
     'carouselButtonBase',
-    'shadow-none size-10 border-none disabled:opacity-40 @sm:size:12 @md:size-16 [&_svg]:size-auto',
+    'w-fit border-0 ring-0 shadow-none absolute cursor-pointer',
   ),
   variants: {
     colorScheme: {
       none: themedClass(
         'carouselButtonVariantsColorSchemeNone',
-        'bg-white text-black hover:bg-gray-100 dark:bg-white dark:text-black hover:dark:bg-gray-100',
+        'disabled:bg-white bg-white text-gray-950 hover:bg-gray-200 active:bg-gray-200',
       ),
       dark: themedClass(
         'carouselButtonVariantsColorSchemeDark',
-        'bg-gray-800 text-gray-200 hover:bg-gray-950 dark:bg-gray-800 dark:text-gray-200 hover:dark:bg-gray-950',
+        'disabled:bg-gray-800 bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-900',
       ),
       light: themedClass(
         'carouselButtonVariantsColorSchemeLight',
-        'bg-gray-50 text-black hover:bg-gray-100 dark:bg-gray-50 dark:text-black hover:dark:bg-gray-100',
+        'disabled:bg-gray-50 bg-gray-50 text-gray-950 hover:bg-gray-200 active:bg-gray-200',
       ),
       accent: themedClass(
         'carouselButtonVariantsColorSchemeAccent',
-        'bg-primary-600 text-white hover:bg-primary-800 dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800',
+        'disabled:bg-white bg-white text-primary-500 hover:bg-gray-100 active:bg-gray-100',
       ),
     },
   },
@@ -158,6 +167,27 @@ const colorScheme = computed(() => {
   return options.value.colorScheme
 })
 
+const hasTextColumn = computed(() => {
+  return props.pretitle || props.title || props.subtitle
+})
+
+const firstColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-start-9 md:order-2'
+  }
+  return 'md:col-start-1 md:order-1'
+})
+
+const secondColumnClass = computed(() => {
+  if (!hasTextColumn.value) {
+    return ''
+  }
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-span-7 md:col-start-1 md:order-1'
+  }
+  return 'md:col-span-7 md:col-start-6 md:order-2'
+})
+
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 
 provide('colorScheme', colorScheme)

package/components/Paragraph/Text/index.vue

@@ -5,7 +5,14 @@
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
-      <div :class="themedClass('columnClass', textWrapperClassList)">
+      <div
+        :class="
+          cn(
+            themedClass('columnClass', textWrapperClassList),
+            alignmentClassList,
+          )
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :pretitleClass="themedClass('pretitleClass')"
@@ -43,6 +50,7 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
@@ -50,12 +58,12 @@ defineProps<ParagraphIcmsLayoutTextFragment>()
 
 const themedClass = useTheme('ParagraphText')
 
-const { options, isEditing } = useAttrs().blokkliData
+const { options, isEditing } = useAttrs().blokkliData as any
 
 const textWrapperClassList = computed(() => {
-  if (options.value.textWidth === 'medium') {
+  if (options.value.width === 'medium') {
     return 'col-span-8 col-start-3'
-  } else if (options.value.textWidth === 'narrow') {
+  } else if (options.value.width === 'narrow') {
     return 'col-span-8 col-start-3 md:col-span-6 md:col-start-4'
   }
   return 'col-span-12'
@@ -65,8 +73,30 @@ const textColumns = computed(() => {
   return options.value.textColumns
 })
 
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (
+    options.value.alignHorizontalFull == 'center' &&
+    textColumns.value === 'one'
+  ) {
+    classList.push('text-center')
+  }
+  if (
+    options.value.alignHorizontalFull == 'right' &&
+    textColumns.value === 'one'
+  ) {
+    classList.push('text-right')
+  }
+  return classList.join(' ')
+})
+
+const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
 const colorScheme = computed(() => {
-  return options.value.colorScheme
+  if (options.value.colorScheme !== undefined) {
+    return options.value.colorScheme
+  } else {
+    return unref(parentColorScheme)
+  }
 })
 
 const spacing = computed(() => {
@@ -74,7 +104,7 @@ const spacing = computed(() => {
 })
 
 const buttonAlignment = computed(() => {
-  switch (options.value.buttonAlignment) {
+  switch (options.value.alignHorizontalFull) {
     case 'left':
       return 'justify-start'
     case 'center':

package/components/Paragraph/TextMedia/index.vue

@@ -28,7 +28,6 @@
                 'buttonsContainerClass',
                 'mt-6 flex flex-wrap items-center gap-6',
               ),
-              buttonAlignment,
               { droptarget: isEditing },
             )
           "
@@ -55,7 +54,7 @@
           :carouselButtonNextIconClass="
             themedClass('carouselButtonNextIconClass')
           "
-          colorScheme="none"
+          :colorScheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -64,6 +63,7 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
@@ -72,20 +72,10 @@ defineProps<ParagraphIcmsLayoutTextMediaFragment>()
 const { options, isEditing } = useAttrs().blokkliData
 
 const themedClass = useTheme('ParagraphTextMedia')
-
-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
+  const width = options.value.width
+  const align = options.value.alignHorizontalReduced
 
   if (width === 'medium') {
     classList.push('md:col-span-6')
@@ -95,7 +85,7 @@ const textColumnClassList = computed(() => {
     classList.push('md:col-span-7')
   }
 
-  if (reverseColumns.value) {
+  if (align === 'right') {
     classList.push('md:order-last')
 
     if (width === 'medium') {
@@ -112,7 +102,8 @@ const textColumnClassList = computed(() => {
 
 const imageColumnClassList = computed(() => {
   const classList = ['col-span-12']
-  const width = options.value.textWidth
+  const width = options.value.width
+  const align = options.value.alignHorizontalReduced
 
   if (width === 'medium') {
     classList.push('md:col-span-6')
@@ -122,7 +113,7 @@ const imageColumnClassList = computed(() => {
     classList.push('md:col-span-5')
   }
 
-  if (reverseColumns.value) {
+  if (align === 'right') {
     classList.push('md:pr-6')
   } else {
     classList.push('md:order-last', 'md:pl-6')
@@ -152,26 +143,18 @@ const imageAspectRatios = computed(() => {
   }
 })
 
+const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
 const colorScheme = computed(() => {
-  return options.value.colorScheme
+  if (options.value.colorScheme !== undefined) {
+    return options.value.colorScheme
+  } else {
+    return unref(parentColorScheme)
+  }
 })
 
 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'
-  }
-})
-
 provide('colorScheme', colorScheme)
 </script>

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

@@ -39,7 +39,7 @@ const themedClass = useTheme('ParagraphTimelineElement')
 const { options, isEditing } = useAttrs().blokkliData
 
 const reverseColumns = computed(() => {
-  return Boolean(Number(options.value.reverseColumns))
+  return options.value.alignHorizontalReduced === 'right' ? true : false
 })
 
 const colorScheme = inject<ColorScheme>('colorScheme')

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

@@ -6,6 +6,12 @@ fragment paragraphIcmsLayoutTimeline on ParagraphIcmsLayoutTimeline {
   titleWeight: fieldIcmsTitleWeight
   subtitle: fieldIcmsSubtitle
   text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
   timelineElements: fieldIcmsTimelineElements {
     ...paragraphsFieldItem
     props {