@iqual/nuxt-icms 1.4.9 → 1.5.0

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

@@ -11,7 +11,13 @@
     >
       <div
         :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
+          cn(
+            themedClass(
+              'firstRowFirstColumnClass',
+              'col-span-12 md:col-span-9',
+            ),
+            alignmentClassList,
+          )
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -28,13 +34,32 @@
       </div>
       <div
         :class="
-          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
+          cn(
+            themedClass(
+              'firstRowSecondColumnClass',
+              'col-span-12 md:col-span-9',
+            ),
+            alignmentClassList,
+          )
         "
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
           :textClass="themedClass('textClass')"
         />
+
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="[
+            themedClass(
+              'buttonsContainerClass',
+              'mt-6 flex flex-wrap items-center gap-6',
+            ),
+            { droptarget: isEditing },
+            buttonAlignmentClassList,
+          ]"
+        />
       </div>
     </DesignSystemAtomsGridRow>
 
@@ -53,7 +78,7 @@
           :class="
             themedClass(
               'anchorNavigationListClass',
-              'sticky left-0 top-32 z-10 flex flex-col gap-2',
+              'sticky top-32 left-0 z-10 flex flex-col gap-2',
             )
           "
         >
@@ -70,11 +95,16 @@
                     'anchorNavigationButtonClass',
                     'cursor-pointer transition-colors duration-200 ease-in-out',
                   ),
-                  { 'font-semibold': currentIndex === Number(index) },
+                  {
+                    [themedClass(
+                      'anchorNavigationButtonActiveClass',
+                      'font-semibold',
+                    )]: currentIndex === Number(index),
+                  },
                 )
               "
             >
-              {{ item.props?.title }}
+              {{ item?.props?.title }}
             </button>
           </li>
         </ul>
@@ -123,58 +153,41 @@
         </div>
 
         <!-- Mobile slider -->
-        <Carousel
-          v-if="isMobile && !isEditing"
-          @init-api="setApi"
-          :class="carousel({ colorScheme })"
-        >
-          <BlokkliField
-            v-slot="{ items }"
-            name="field_icms_timeline_elements"
-            :list="timelineElements"
-            proxy-mode
-          >
-            <CarouselContent
-              :class="themedClass('carouselContentClass', 'm-0 gap-8')"
-            >
-              <BlokkliItem v-for="item in items" v-bind="item" />
-            </CarouselContent>
-          </BlokkliField>
-          <CarouselPrevious
-            :class="
-              cn(
-                themedClass(
-                  'carouselButtonPrevClass',
-                  '-bottom-[90px] left-0 top-auto',
-                ),
+        <div v-if="isMobile && !isEditing" :class="carousel({ colorScheme })">
+          <UCarousel
+            ref="carouselRef"
+            :items="timelineElements || []"
+            :arrows="(timelineElements?.length ?? 0) > 1"
+            prevIcon="i-lucide-chevron-left"
+            nextIcon="i-lucide-chevron-right"
+            @select="setCurrentIndex"
+            :ui="{
+              viewport: themedClass('carouselViewportClass', 'pb-10'),
+              item: 'basis-full',
+              container: themedClass('carouselContentClass', 'gap-8'),
+              prev: cn(
+                themedClass('carouselButtonPrevClass', 'start-0!'),
                 carouselButton({ colorScheme }),
-              )
-            "
-          >
-            <ChevronLeft
-              :size="24"
-              :stroke-width="1"
-              :class="themedClass('carouselButtonPrevIconClass')"
-            />
-          </CarouselPrevious>
-          <CarouselNext
-            :class="
-              cn(
-                themedClass(
-                  'carouselButtonNextClass',
-                  '-bottom-[90px] left-[66px] top-auto',
-                ),
+              ),
+              next: cn(
+                themedClass('carouselButtonNextClass', 'start-12!'),
                 carouselButton({ colorScheme }),
-              )
-            "
+              ),
+            }"
+            class="overflow-hidden"
           >
-            <ChevronRight
-              :size="24"
-              :stroke-width="1"
-              :class="themedClass('carouselButtonNextIconClass')"
-            />
-          </CarouselNext>
-        </Carousel>
+            <template #default="{ item }">
+              <BlokkliField
+                v-slot="{ items }"
+                name="field_icms_timeline_elements"
+                :list="[item]"
+                proxy-mode
+              >
+                <BlokkliItem v-for="fieldItem in items" v-bind="fieldItem" />
+              </BlokkliField>
+            </template>
+          </UCarousel>
+        </div>
 
         <!-- Desktop timeline -->
         <BlokkliField
@@ -203,7 +216,7 @@
                 decorativeLine({ colorScheme }),
                 themedClass(
                   'timelineDesktopDecorativeLine',
-                  'absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2',
+                  'absolute top-0 left-1/2 h-full w-0.5 -translate-x-1/2',
                 ),
               )
             "
@@ -227,11 +240,9 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTimelineFragment } from '#graphql-operations'
-import type { CarouselApi } from '@iqual/nuxt-icms/components/ui/carousel'
 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<ParagraphIcmsLayoutTimelineFragment>()
 
@@ -250,15 +261,7 @@ const spacing = computed(() => {
 
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 
-const api = ref<CarouselApi>()
-function setApi(val: CarouselApi) {
-  api.value = val
-
-  val?.on('select', () => {
-    const selectedIndex = val.selectedScrollSnap()
-    setCurrentIndex(selectedIndex)
-  })
-}
+const carouselRef = ref()
 
 const currentIndex = ref(0)
 const setCurrentIndex = (index: number) => {
@@ -267,10 +270,8 @@ const setCurrentIndex = (index: number) => {
 }
 
 const scrollToCarousel = (index: number) => {
-  if (!index && !api.value) return
-  nextTick(() => {
-    api.value?.scrollTo(index)
-  })
+  if (!carouselRef.value) return
+  carouselRef.value.emblaApi?.scrollTo(index)
 }
 
 const scrollToElement = (element: HTMLElement) => {
@@ -352,25 +353,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 top-auto -bottom-3',
   ),
   variants: {
     colorScheme: {
       none: themedClass(
         'carouselButtonVariantsColorSchemeNone',
-        'bg-gray-50 text-black dark:bg-gray-50 dark:text-black',
+        'disabled:bg-gray-50 bg-gray-50 text-gray-950 hover:bg-gray-200 active:bg-gray-200',
       ),
       dark: themedClass(
         'carouselButtonVariantsColorSchemeDark',
-        'bg-gray-800 text-gray-200 dark:bg-gray-800 dark:text-gray-200',
+        'disabled:bg-gray-800 bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-900',
       ),
       light: themedClass(
         'carouselButtonVariantsColorSchemeLight',
-        'bg-white text-black dark:bg-white dark:text-black',
+        'disabled:bg-gray-50 bg-gray-50 text-gray-950 hover:bg-gray-200 active:bg-gray-200',
       ),
       accent: themedClass(
         'carouselButtonVariantsColorSchemeAccent',
-        'bg-primary-500 text-white dark:bg-primary-500 dark:text-white',
+        'disabled:bg-white bg-white text-primary-500 hover:bg-gray-100 active:bg-gray-100',
       ),
     },
   },
@@ -486,6 +487,32 @@ const carouselDot = tv({
   },
 })
 
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (options.value.alignHorizontalFull == 'center') {
+    classList.push('text-center')
+    classList.push('md:col-span-8')
+    classList.push('md:col-start-3')
+  }
+  if (options.value.alignHorizontalFull == 'right') {
+    classList.push('text-right')
+    classList.push('md:col-start-4')
+  }
+  return classList.join(' ')
+})
+
+const buttonAlignmentClassList = computed(() => {
+  const classList = []
+  if (options.value.alignHorizontalFull == 'center') {
+    classList.push('justify-center')
+  }
+  if (options.value.alignHorizontalFull == 'right') {
+    classList.push('justify-end')
+  }
+
+  return classList.join(' ')
+})
+
 provide('colorScheme', colorScheme)
 provide('titleWeight', childTitleWeight)
 </script>

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

@@ -45,4 +45,10 @@ const twoColumnTextElementClassList = computed(() => {
   }
   return classList.join(' ')
 })
+
+const alignHorizontalReduced = computed(() => {
+  return options.value.alignHorizontalReduced
+})
+
+provide('alignHorizontalReduced', alignHorizontalReduced)
 </script>

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

@@ -14,6 +14,7 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayout2ColTextElementsFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayout2ColTextElementsFragment>()
@@ -22,8 +23,13 @@ const { options, isEditing } = useAttrs().blokkliData
 
 const themedClass = useTheme('ParagraphTwoColumnTextLayout')
 
+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(() => {

package/components/Paragraph/iFrame/index.vue

@@ -7,7 +7,12 @@
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
         v-if="pretitle || title"
-        :class="themedClass('firstColumnClass', titleWrapperClassList)"
+        :class="
+          cn(
+            themedClass('firstColumnClass', titleWrapperClassList),
+            alignmentClassList,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -18,7 +23,14 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div :class="themedClass('secondColumnClass', textWrapperClassList)">
+      <div
+        :class="
+          cn(
+            themedClass('secondColumnClass', textWrapperClassList),
+            alignmentClassList,
+          )
+        "
+      >
         <DesignSystemOrganismsContentBlock
           v-if="text"
           :text="text"
@@ -44,6 +56,8 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
@@ -53,9 +67,9 @@ const themedClass = useTheme('ParagraphiFrame')
 const { options, isEditing } = useAttrs().blokkliData
 
 const titleWrapperClassList = computed(() => {
-  if (options.value.textWidth === 'medium') {
+  if (options.value.width === 'medium') {
     return ['col-span-8', 'col-start-3'].join(' ')
-  } else if (options.value.textWidth === 'narrow') {
+  } else if (options.value.width === 'narrow') {
     return [
       'col-span-8',
       'col-start-3',
@@ -67,9 +81,9 @@ const titleWrapperClassList = computed(() => {
 })
 
 const textWrapperClassList = computed(() => {
-  if (options.value.textWidth === 'medium') {
+  if (options.value.width === 'medium') {
     return ['col-span-8', 'col-start-3'].join(' ')
-  } else if (options.value.textWidth === 'narrow') {
+  } else if (options.value.width === 'narrow') {
     return [
       'col-span-8',
       'col-start-3',
@@ -80,8 +94,27 @@ const textWrapperClassList = computed(() => {
   return ['col-span-12'].join(' ')
 })
 
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (options.value.alignHorizontalFull == 'center') {
+    classList.push('text-center')
+    classList.push('md:col-span-8')
+    classList.push('md:col-start-3')
+  }
+  if (options.value.alignHorizontalFull == 'right') {
+    classList.push('text-right')
+    classList.push('md:col-start-4')
+  }
+  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(() => {