@iqual/nuxt-icms 1.3.1 → 1.4.1

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

@@ -1,37 +1,80 @@
 <template>
-  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing" :data-timeline="id">
-    <DesignSystemAtomsGridRow v-if="pretitle || title || subtitle || text">
-      <div class="col-span-12 md:col-span-12">
+  <DesignSystemAtomsContainer
+    :color-scheme="colorScheme"
+    :spacing="spacing"
+    :data-timeline="id"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow
+      v-if="pretitle || title || subtitle || text"
+      :class="themedClass('firstRowClass')"
+    >
+      <div
+        :class="
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass')"
           :titleStyle="titleStyle"
           :titleWeight="titleWeight"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-9">
+      <div
+        :class="
+          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :text="text"
+          :textClass="themedClass('textClass')"
         />
       </div>
     </DesignSystemAtomsGridRow>
 
-    <DesignSystemAtomsGridRow class="mt-10 lg:mt-20">
+    <DesignSystemAtomsGridRow
+      :class="themedClass('secondRowClass', 'mt-10 lg:mt-20')"
+    >
       <!-- Anchor navigation -->
-      <div class="relative col-span-12 mb-6 lg:col-span-4 lg:mb-0">
+      <div
+        :class="
+          themedClass(
+            'secondRowFirstColumnClass',
+            'relative col-span-12 mb-6 lg:col-span-4 lg:mb-0',
+          )
+        "
+      >
         <ul
           v-if="!isEditing"
-          class="sticky left-0 top-32 z-10 flex flex-col gap-2"
+          :class="
+            themedClass(
+              'anchorNavigationListClass',
+              'sticky left-0 top-32 z-10 flex flex-col gap-2',
+            )
+          "
         >
-          <li v-for="(item, index) in props.timelineElements" :key="index">
+          <li
+            v-for="(item, index) in props.timelineElements"
+            :key="index"
+            :class="themedClass('anchorNavigationListItemClass')"
+          >
             <button
               @click="handleAnchorLinkClick(Number(index))"
-              class="cursor-pointer transition-colors duration-200 ease-in-out"
-              :class="{
-                'font-semibold': currentIndex === Number(index),
-              }"
+              :class="
+                cn(
+                  themedClass(
+                    'anchorNavigationButtonClass',
+                    'cursor-pointer transition-colors duration-200 ease-in-out',
+                  ),
+                  { 'font-semibold': currentIndex === Number(index) },
+                )
+              "
             >
               {{ item.props?.title }}
             </button>
@@ -39,20 +82,34 @@
         </ul>
       </div>
 
-      <div class="relative col-span-12 lg:col-span-8">
+      <div
+        :class="
+          themedClass(
+            'secondRowSecondColumnClass',
+            'relative col-span-12 lg:col-span-8',
+          )
+        "
+      >
         <!-- Mobile slider navigation -->
         <div
           v-if="isMobile && !isEditing"
-          class="relative col-span-12 mb-10 lg:col-span-4"
+          :class="
+            themedClass(
+              'mobileSliderNavigationContainerClass',
+              'relative col-span-12 mb-10 lg:col-span-4',
+            )
+          "
         >
-          <ul
-            :class="decorativeLine({ colorScheme })"
-            class="flex h-0.5 flex-nowrap items-center justify-between"
-          >
+          <ul :class="decorativeLine({ colorScheme })">
             <li
               v-for="(_, index) in props.timelineElements"
               :key="index"
-              class="p-4 first:-translate-x-4 last:translate-x-4"
+              :class="
+                themedClass(
+                  'mobileSliderNavigationListItemClass',
+                  'p-4 first:-translate-x-4 last:translate-x-4',
+                )
+              "
             >
               <button
                 @click="handleAnchorLinkClick(Number(index))"
@@ -79,21 +136,45 @@
             :list="timelineElements"
             proxy-mode
           >
-            <CarouselContent class="m-0 gap-8">
+            <CarouselContent
+              :class="themedClass('carouselContentClass', 'm-0 gap-8')"
+            >
               <BlokkliItem v-for="item in items" v-bind="item" />
             </CarouselContent>
           </BlokkliField>
           <CarouselPrevious
-            class="-bottom-[90px] left-0 top-auto xl:bottom-auto xl:left-16 xl:top-1/2"
-            :class="carouselButton({ colorScheme })"
+            :class="
+              cn(
+                themedClass(
+                  'carouselButtonPrevClass',
+                  '-bottom-[90px] left-0 top-auto xl:bottom-auto xl:left-16 xl:top-1/2',
+                ),
+                carouselButton({ colorScheme }),
+              )
+            "
           >
-            <ChevronLeft :size="24" :stroke-width="1" />
+            <ChevronLeft
+              :size="24"
+              :stroke-width="1"
+              :class="themedClass('carouselButtonPrevIconClass')"
+            />
           </CarouselPrevious>
           <CarouselNext
-            class="-bottom-[90px] left-[66px] top-auto xl:bottom-auto xl:left-auto xl:right-16 xl:top-1/2"
-            :class="carouselButton({ colorScheme })"
+            :class="
+              cn(
+                themedClass(
+                  'carouselButtonNextClass',
+                  '-bottom-[90px] left-[66px] top-auto xl:bottom-auto xl:left-auto xl:right-16 xl:top-1/2',
+                ),
+                carouselButton({ colorScheme }),
+              )
+            "
           >
-            <ChevronRight :size="24" :stroke-width="1" />
+            <ChevronRight
+              :size="24"
+              :stroke-width="1"
+              :class="themedClass('carouselButtonNextIconClass')"
+            />
           </CarouselNext>
         </Carousel>
 
@@ -102,20 +183,43 @@
           v-if="isEditing || !isMobile"
           name="field_icms_timeline_elements"
           :list="timelineElements"
-          class="flex flex-col gap-32"
-          :class="{ droptarget: isEditing }"
+          :class="[
+            themedClass('timelineContainerClass', 'flex flex-col gap-32'),
+            { droptarget: isEditing },
+          ]"
         />
 
         <!-- Desktop line -->
         <template v-if="!isMobile && !isEditing">
-          <div :class="decorativeCircle({ colorScheme })" class="top-0"></div>
           <div
-            :class="decorativeLine({ colorScheme })"
-            class="absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2"
+            :class="
+              cn(
+                themedClass('timelineDesktopTopDecorativeCircleClass', 'top-0'),
+                decorativeCircle({ colorScheme }),
+              )
+            "
           ></div>
           <div
-            :class="decorativeCircle({ colorScheme })"
-            class="bottom-0"
+            :class="
+              cn(
+                decorativeLine({ colorScheme }),
+                themedClass(
+                  'timelineDesktopDecorativeLine',
+                  'absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2',
+                ),
+              )
+            "
+          ></div>
+          <div
+            :class="
+              cn(
+                themedClass(
+                  'timelineDesktopBottomDecorativeCircleClass',
+                  'bottom-0',
+                ),
+                decorativeCircle({ colorScheme }),
+              )
+            "
           ></div>
         </template>
       </div>
@@ -125,14 +229,17 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTimelineFragment } from '#graphql-operations'
-import { tv } from 'tailwind-variants'
 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>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme('ParagraphTimelineLayout')
 const { isMobile } = useIsMobile()
 
 const colorScheme = computed(() => {
@@ -175,14 +282,17 @@ const scrollToElement = (element: HTMLElement) => {
   })
 }
 
-const getTimelineElements = () => 
-  document.querySelectorAll(`[data-timeline="${props.id}"] [data-timeline-element]`)
+const getTimelineElements = () =>
+  document.querySelectorAll(
+    `[data-timeline="${props.id}"] [data-timeline-element]`,
+  )
 
 const handleAnchorLinkClick = (index: number) => {
   if (isMobile.value) {
     setCurrentIndex(index)
     scrollToCarousel(index)
   } else {
+    setCurrentIndex(index)
     const elements = getTimelineElements()
     scrollToElement(elements[index] as HTMLElement)
   }
@@ -224,13 +334,16 @@ onUnmounted(() => {
 })
 
 const carousel = tv({
-  base: 'rounded-lg',
+  base: themedClass('carouselBase'),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-950',
-      light: 'bg-gray-50',
-      accent: 'bg-primary-600',
+      none: themedClass('carouselVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass('carouselVariantsColorSchemeDark', 'bg-gray-950'),
+      light: themedClass('carouselVariantsColorSchemeLight', 'bg-gray-50'),
+      accent: themedClass(
+        'carouselVariantsColorSchemeAccent',
+        'bg-primary-600',
+      ),
     },
   },
   defaultVariants: {
@@ -239,15 +352,28 @@ const carousel = tv({
 })
 
 const carouselButton = tv({
-  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size-16 [&_svg]:size-auto',
+  base: themedClass(
+    'carouselButtonBase',
+    'shadow-none 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-white text-black hover:bg-gray-100 hover:text-black dark:bg-white dark:text-black hover:dark:bg-gray-100 hover:dark:text-black',
-      light:
-        'bg-gray-100 text-black hover:bg-black hover:text-white dark:bg-gray-100 dark:text-black hover:dark:bg-black hover:dark:text-white',
-      accent:
-        'bg-primary-700 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-700 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
+      none: themedClass(
+        'carouselButtonVariantsColorSchemeNone',
+        'bg-gray-50 text-black dark:bg-gray-50 dark:text-black',
+      ),
+      dark: themedClass(
+        'carouselButtonVariantsColorSchemeDark',
+        'bg-gray-800 text-white dark:bg-gray-800 dark:text-white',
+      ),
+      light: themedClass(
+        'carouselButtonVariantsColorSchemeLight',
+        'bg-white text-black dark:bg-white dark:text-black',
+      ),
+      accent: themedClass(
+        'carouselButtonVariantsColorSchemeAccent',
+        'bg-primary-500 text-white dark:bg-primary-500 dark:text-white',
+      ),
     },
   },
   defaultVariants: {
@@ -256,13 +382,22 @@ const carouselButton = tv({
 })
 
 const decorativeLine = tv({
-  base: '',
+  base: themedClass(
+    'decorativeLineBase',
+    'flex h-0.5 flex-nowrap items-center justify-between',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-gray-200',
-      dark: 'bg-white',
-      light: 'bg-gray-200',
-      accent: 'bg-white',
+      none: themedClass('decorativeLineVariantsColorSchemeNone', 'bg-gray-200'),
+      dark: themedClass('decorativeLineVariantsColorSchemeDark', 'bg-white'),
+      light: themedClass(
+        'decorativeLineVariantsColorSchemeLight',
+        'bg-gray-200',
+      ),
+      accent: themedClass(
+        'decorativeLineVariantsColorSchemeAccent',
+        'bg-white',
+      ),
     },
   },
   defaultVariants: {
@@ -271,13 +406,28 @@ const decorativeLine = tv({
 })
 
 const decorativeCircle = tv({
-  base: 'absolute left-1/2 size-4 -translate-x-1/2 border-2 rounded-full z-10',
+  base: themedClass(
+    'decorativeCircleBase',
+    'absolute left-1/2 size-4 -translate-x-1/2 border-2 rounded-full z-10',
+  ),
   variants: {
     colorScheme: {
-      none: 'border-gray-200 bg-white',
-      dark: 'border-white bg-gray-950',
-      light: 'border-gray-200 bg-gray-50',
-      accent: 'border-white bg-primary-600',
+      none: themedClass(
+        'decorativeCircleVariantsColorSchemeNone',
+        'border-gray-200 bg-white',
+      ),
+      dark: themedClass(
+        'decorativeCircleVariantsColorSchemeDark',
+        'border-white bg-gray-950',
+      ),
+      light: themedClass(
+        'decorativeCircleVariantsColorSchemeLight',
+        'border-gray-200 bg-gray-50',
+      ),
+      accent: themedClass(
+        'decorativeCircleVariantsColorSchemeAccent',
+        'border-white bg-primary-600',
+      ),
     },
   },
   defaultVariants: {
@@ -286,35 +436,50 @@ const decorativeCircle = tv({
 })
 
 const carouselDot = tv({
-  base: 'cursor-pointer transition-colors duration-200 ease-in-out size-4 border-2 rounded-full',
+  base: themedClass(
+    'carouselDotBase',
+    'cursor-pointer transition-colors duration-200 ease-in-out size-4 border-2 rounded-full',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white border-gray-200',
-      dark: 'bg-gray-950 border-white',
-      light: 'bg-gray-50 border-gray-200',
-      accent: 'bg-primary-600 border-white',
+      none: themedClass(
+        'carouselDotVariantsColorSchemeNone',
+        'bg-white border-gray-200',
+      ),
+      dark: themedClass(
+        'carouselDotVariantsColorSchemeDark',
+        'bg-gray-950 border-white',
+      ),
+      light: themedClass(
+        'carouselDotVariantsColorSchemeLight',
+        'bg-gray-50 border-gray-200',
+      ),
+      accent: themedClass(
+        'carouselDotVariantsColorSchemeAccent',
+        'bg-primary-600 border-white',
+      ),
     },
   },
   compoundVariants: [
     {
       colorScheme: 'none',
       active: true,
-      class: 'bg-gray-200',
+      class: themedClass('carouselDotCompoundVariantsNoneTrue', 'bg-gray-200'),
     },
     {
       colorScheme: 'dark',
       active: true,
-      class: 'bg-white',
+      class: themedClass('carouselDotCompoundVariantsDarkTrue', 'bg-white'),
     },
     {
       colorScheme: 'light',
       active: true,
-      class: 'bg-gray-200',
+      class: themedClass('carouselDotCompoundVariantsLightTrue', 'bg-gray-200'),
     },
     {
       colorScheme: 'accent',
       active: true,
-      class: 'bg-white',
+      class: themedClass('carouselDotCompoundVariantsAccentTrue', 'bg-white'),
     },
   ],
   defaultVariants: {

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

@@ -1,23 +1,40 @@
 <template>
   <DesignSystemOrganismsTwoColumnTextElement
     :pretitle="pretitle"
+    :pretitleClass="themedClass('pretitleClass')"
     :title="title"
+    :titleClass="themedClass('titleClass', 'mb-0')"
     :titleWeight="titleWeight"
     :titleStyle="titleStyle"
-    titleClass="mb-0"
     :subtitle="subtitle"
+    :subtitleClass="themedClass('subtitleClass')"
     :text="text"
-    :class="twoColumnTextElementClassList"
+    :textClass="themedClass('textClass')"
+    :containerClass="
+      themedClass('containerClass', twoColumnTextElementClassList)
+    "
+    :firstColumnClass="themedClass('firstColumnClass')"
+    :secondColumnClass="themedClass('secondColumnClass')"
+    :titleCompositionFirstContainerClass="
+      themedClass('titleCompositionFirstContainerClass')
+    "
+    :titleCompositionSecondContainerClass="
+      themedClass('titleCompositionSecondContainerClass')
+    "
+    :textContainerClass="themedClass('textContainerClass')"
   />
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcms2ColTextElementFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcms2ColTextElementFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme('ParagraphTwoColumnTextElement')
+
 const twoColumnTextElementClassList = computed(() => {
   const classList = []
   if (options.value.spacingBottom === 'small') {
@@ -26,6 +43,6 @@ const twoColumnTextElementClassList = computed(() => {
   if (options.value.spacingBottom === 'large') {
     classList.push('mb-32')
   }
-  return classList
+  return classList.join(' ')
 })
 </script>

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

@@ -1,5 +1,9 @@
 <template>
-  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
+  <DesignSystemAtomsContainer
+    :spacing="spacing"
+    :colorScheme="colorScheme"
+    :class="themedClass('containerClass')"
+  >
     <BlokkliField
       name="field_icms_2_col_text_elements"
       :list="twoColumnTextElements"
@@ -10,11 +14,14 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayout2ColTextElementsFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayout2ColTextElementsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme('ParagraphTwoColumnTextLayout')
+
 const colorScheme = computed(() => {
   return options.value.colorScheme
 })

package/components/Paragraph/iFrame/index.vue

@@ -1,24 +1,31 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow>
-      <div :class="titleWrapperClassList">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div :class="themedClass('firstColumnClass', titleWrapperClassList)">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :titleWeight="titleWeight"
           :colorScheme="colorScheme"
         />
       </div>
-      <div :class="textWrapperClassList">
+      <div :class="themedClass('secondColumnClass', textWrapperClassList)">
         <DesignSystemOrganismsContentBlock
           :text="text"
+          :textClass="themedClass('textClass')"
           :colorScheme="colorScheme"
         />
 
         <div
           v-if="embed"
           v-html="embed"
-          class="embed-wrapper mt-10"
+          :class="themedClass('emberContainer', 'embed-wrapper mt-10')"
           :style="{ '--iframe-height': `${props.height || 600}px` }"
         />
       </div>
@@ -28,27 +35,40 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
 
+const themedClass = useTheme('ParagraphiFrame')
+
 const { options, isEditing } = useAttrs().blokkliData
 
 const titleWrapperClassList = computed(() => {
   if (options.value.textWidth === 'medium') {
-    return ['col-span-8', 'col-start-3']
+    return ['col-span-8', 'col-start-3'].join(' ')
   } else if (options.value.textWidth === 'narrow') {
-    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+    return [
+      'col-span-8',
+      'col-start-3',
+      'md:col-span-6',
+      'md:col-start-4',
+    ].join(' ')
   }
-  return ['col-span-12']
+  return ['col-span-12'].join(' ')
 })
 
 const textWrapperClassList = computed(() => {
   if (options.value.textWidth === 'medium') {
-    return ['col-span-8', 'col-start-3']
+    return ['col-span-8', 'col-start-3'].join(' ')
   } else if (options.value.textWidth === 'narrow') {
-    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+    return [
+      'col-span-8',
+      'col-start-3',
+      'md:col-span-6',
+      'md:col-start-4',
+    ].join(' ')
   }
-  return ['col-span-9']
+  return ['col-span-9'].join(' ')
 })
 
 const colorScheme = computed(() => {