@iqual/nuxt-icms 1.4.9 → 1.5.0

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

@@ -1,23 +1,14 @@
 <template>
-  <AccordionItem
-    :key="index"
-    :value="`accordion-${index + 1}`"
+  <div
     :class="
-      themedClass('accordionItemClass', 'not-last:mb-1 border-none [&>h3]:mb-0')
+      themedClass('accordionItemClass', 'not-last:mb-1 border-none p-4 pb-6')
     "
     v-bind="computedProps"
   >
-    <AccordionTrigger
-      :ref="(el: any) => (triggerRefs[index] = el)"
-      :class="accordionTrigger({ colorScheme })"
-      @click="handleClick(index)"
-    >
+    <div :class="accordionTrigger({ colorScheme })">
       {{ question }}
-    </AccordionTrigger>
-    <AccordionContent
-      :class="themedClass('accordionContentClass', 'p-4 pb-6 text-base')"
-      ref="contentRef"
-    >
+    </div>
+    <div :class="themedClass('accordionContentClass', 'p-4 pb-6 text-base')">
       <div v-html="answer" :class="themedClass('contentClass')" />
       <BlokkliField
         name="field_icms_buttons"
@@ -30,17 +21,15 @@
           { droptarget: isEditing },
         ]"
       />
-    </AccordionContent>
-  </AccordionItem>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import type { ComponentPublicInstance } from 'vue'
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { ParagraphIcmsFaqElementFragment } from '#graphql-operations'
-import { tv } from 'tailwind-variants'
-import { useAccordionScroll } from '@iqual/nuxt-icms/composables/useAccordionScroll'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
 
 defineProps<ParagraphIcmsFaqElementFragment>()
 
@@ -73,22 +62,12 @@ const accordionTrigger = tv({
   },
 })
 
-const { index, isEditing } = useAttrs().blokkliData
-
-const triggerRefs = ref<Array<ComponentPublicInstance>>([])
-
-const handleClick = (index: number): void => {
-  const { handleAccordionOpen } = useAccordionScroll(triggerRefs.value[index])
-  handleAccordionOpen()
-}
-
+const { isEditing } = useAttrs().blokkliData
 const colorScheme = inject<ColorScheme>('colorScheme')
 
 const computedProps = computed(() => {
   if (isEditing) {
-    return {
-      open: true,
-    }
+    return {}
   }
   return {}
 })

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

@@ -7,7 +7,12 @@
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
         v-if="pretitle || title || subtitle"
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
+        :class="
+          cn(
+            themedClass('firstColumnClass', 'col-span-12 md:col-span-9'),
+            alignmentClassList,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -23,12 +28,18 @@
       </div>
       <div
         v-if="text || media?.length || buttons?.length"
-        :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
+        :class="
+          themedClass(
+            'secondColumnClass',
+            'col-span-12 flex flex-col gap-6 md:col-span-5',
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
           :textClass="themedClass('textClass')"
           :media="media"
+          :imageFormat="imageFormat"
           :mediaClass="themedClass('mediaClass')"
           :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :colorScheme="colorScheme"
@@ -40,9 +51,7 @@
             cn(
               themedClass(
                 'buttonsContainerClass',
-                pretitle || title || subtitle || text || media?.length
-                  ? 'mt-6 flex flex-wrap items-center gap-6'
-                  : 'flex flex-wrap items-center gap-6',
+                'flex flex-wrap items-center gap-6',
               ),
               buttonAlignment,
               { droptarget: isEditing },
@@ -60,11 +69,7 @@
           )
         "
       >
-        <Accordion
-          :default-value="defaultValue"
-          :collapsible="true"
-          :class="themedClass('accordionClass')"
-        >
+        <div v-if="isEditing" :class="themedClass('accordionClass')">
           <BlokkliField
             name="field_icms_faq_elements"
             :list="faqElements"
@@ -73,7 +78,32 @@
               { droptarget: isEditing },
             ]"
           />
-        </Accordion>
+        </div>
+        <UAccordion
+          v-else
+          :items="accordionItems"
+          :default-value="'0'"
+          :class="accordion({ colorScheme })"
+          :ui="{
+            item: accordionItem({ colorScheme }),
+            trigger: accordionTrigger({ colorScheme }),
+            content: accordionContent({ colorScheme }),
+          }"
+        >
+          <template #content="{ item }">
+            <div v-html="item.answer" :class="themedClass('contentClass')" />
+            <BlokkliField
+              name="field_icms_buttons"
+              :list="item.buttons"
+              :class="[
+                themedClass(
+                  'buttonsContainerClass',
+                  'mt-6 flex flex-wrap items-center gap-6',
+                ),
+              ]"
+            />
+          </template>
+        </UAccordion>
       </div>
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
@@ -83,20 +113,85 @@
 import type { ParagraphIcmsLayoutFaqFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
+import { tv } from 'tailwind-variants'
 
 const props = defineProps<ParagraphIcmsLayoutFaqFragment>()
 
 const themedClass = useTheme('ParagraphFAQLayout')
 
-const defaultValue = computed(() => {
-  if (!isEditing) {
-    return 'accordion-1'
-  } else {
-    return ''
-  }
+const { options, isEditing } = useAttrs().blokkliData
+
+// Transform faqElements into UAccordion format
+const accordionItems = computed(() => {
+  return (props.faqElements || []).map((faq) => ({
+    label: faq?.props?.question || '',
+    answer: faq?.props?.answer || '',
+    buttons: faq?.props?.buttons || [],
+  }))
 })
 
-const { options, isEditing } = useAttrs().blokkliData
+const accordion = tv({
+  base: themedClass('accordionBase', ''),
+  variants: {
+    colorScheme: {
+      none: themedClass('accordionVariantsColorSchemeNone'),
+      dark: themedClass('accordionVariantsColorSchemeDark'),
+      light: themedClass('accordionVariantsColorSchemeLight'),
+      accent: themedClass('accordionVariantsColorSchemeAccent'),
+    },
+  },
+})
+
+const accordionItem = tv({
+  base: themedClass('accordionItemBase', 'border-none not-last:mb-1'),
+  variants: {
+    colorScheme: {
+      none: themedClass('accordionItemVariantsColorSchemeNone'),
+      dark: themedClass('accordionItemVariantsColorSchemeDark'),
+      light: themedClass('accordionItemVariantsColorSchemeLight'),
+      accent: themedClass('accordionItemVariantsColorSchemeAccent'),
+    },
+  },
+})
+
+const accordionTrigger = tv({
+  base: themedClass(
+    'accordionTriggerBase',
+    'items-center py-4 hover:no-underline gap-4 text-left text-base cursor-pointer',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'accordionTriggerVariantsColorSchemeNone',
+        'bg-gray-50 text-black',
+      ),
+      dark: themedClass(
+        'accordionTriggerVariantsColorSchemeDark',
+        'bg-gray-900 text-gray-200',
+      ),
+      light: themedClass(
+        'accordionTriggerVariantsColorSchemeLight',
+        'bg-white text-black',
+      ),
+      accent: themedClass(
+        'accordionTriggerVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
+    },
+  },
+})
+
+const accordionContent = tv({
+  base: themedClass('accordionContentBase', 'p-4 pb-6 text-base'),
+  variants: {
+    colorScheme: {
+      none: themedClass('accordionContentVariantsColorSchemeNone'),
+      dark: themedClass('accordionContentVariantsColorSchemeDark'),
+      light: themedClass('accordionContentVariantsColorSchemeLight'),
+      accent: themedClass('accordionContentVariantsColorSchemeAccent'),
+    },
+  },
+})
 
 const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
@@ -106,6 +201,24 @@ const colorScheme = computed(() => {
   return options.value.colorScheme
 })
 
+const imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
+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 buttonAlignment = computed(() => {
   switch (options.value.buttonAlignment) {
     case 'left':

package/components/Paragraph/Gallery/index.vue

@@ -8,7 +8,13 @@
       <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
@@ -22,8 +28,15 @@
         />
       </div>
       <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
@@ -38,7 +51,12 @@
 
     <DesignSystemAtomsGridRow
       v-if="media?.length"
-      :class="themedClass('secondRowClass', pretitle || title ? 'mt-10' : '')"
+      :class="
+        cn(
+          themedClass('secondRowClass'),
+          pretitle || title ? themedClass('secondRowOffsetClass', 'mt-10') : '',
+        )
+      "
     >
       <div
         v-for="(image, index) in media"
@@ -78,8 +96,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { ParagraphIcmsLayoutGalleryFragment } from '#graphql-operations'
-import type { MediaFragment } from '#graphql-operations'
+import type {
+  ParagraphIcmsLayoutGalleryFragment,
+  MediaFragment,
+} 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'
 import { useMediaLightbox } from '@iqual/nuxt-icms/composables/useMediaLightbox'
 
@@ -98,8 +120,27 @@ const {
   captions,
 } = useMediaLightbox(props.media)
 
+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(() => {

package/components/Paragraph/HeroImage/index.vue

@@ -5,7 +5,7 @@
       cn(
         themedClass(
           'containerClass',
-          'relative flex min-h-[400px] items-center md:min-h-[700px]',
+          'relative flex min-h-100 items-center md:min-h-175',
         ),
         containerClassList,
       )
@@ -78,8 +78,8 @@
                 'buttonsContainerClass',
                 'mt-6 flex flex-wrap items-center gap-6',
               ),
-              buttonAlignment,
               { droptarget: isEditing },
+              { 'justify-center':  (alignHorizontal == 'center')}
             )
           "
         />
@@ -97,19 +97,11 @@ defineProps<ParagraphIcmsLayoutHeroImageFragment>()
 
 const themedClass = useTheme('ParagraphHeroImage')
 
-const prefetch = provide('prefetch', true)
+const { options, isEditing } = useAttrs().blokkliData as any
 
-const { options, isEditing } = useAttrs().blokkliData
-
-const reverseColumns = ref(false)
-
-watch(
-  () => options.value.reverseColumns,
-  (newVal) => {
-    reverseColumns.value = Boolean(Number(newVal))
-  },
-  { immediate: true },
-)
+const alignHorizontal = computed(() => {
+  return options.value.alignHorizontalFull
+})
 
 const containerClassList = computed(() => {
   const classList = []
@@ -122,10 +114,12 @@ const containerClassList = computed(() => {
 const columnClassList = computed(() => {
   const classList = []
 
-  if (reverseColumns.value) {
+  if (alignHorizontal.value === 'left') {
     classList.push('md:col-start-1')
-  } else {
+  } else if (alignHorizontal.value === 'right') {
     classList.push('md:col-start-7')
+  } else {
+    classList.push('md:col-start-4 text-center')
   }
 
   if (options.value.colorMode === 'dark') {
@@ -138,21 +132,33 @@ const columnClassList = computed(() => {
 const overlayClass = computed(() => {
   const classList = []
 
-  if (reverseColumns.value) {
+  if (alignHorizontal.value === 'left') {
     classList.push('md:bg-gradient-to-l')
-  } else {
+  } else if (alignHorizontal.value === 'right') {
     classList.push('md:bg-gradient-to-r')
   }
 
-  classList.push('md:bg-transparent md:from-transparent md:from-25%')
+  if (alignHorizontal.value === 'center') {
+    if (options.value.colorMode === 'light') {
+      classList.push(
+        'md:bg-[linear-gradient(90deg,rgba(255,255,255,0)_10%,rgba(255,255,255,0.5)_50%,rgba(255,255,255,0)_90%)]',
+        'bg-[rgba(255,255,255,0.3)]',
+      )
+    } else if (options.value.colorMode === 'dark') {
+      classList.push(
+        'md:bg-[linear-gradient(90deg,rgba(17,17,17,0)_10%,rgba(17,17,17,0.5)_50%,rgba(17,17,17,0)_90%)]',
+        'bg-[rgba(17,17,17,0.3)]',
+      )
+    }
+  } else {
+    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)]')
+    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(' ')
@@ -174,19 +180,6 @@ const textShadow = computed(() => {
   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'
-  }
-})
-
 const elementClass = computed(() => {
   const classList = ['size-full object-cover']
   if (options.value.imageAlignment === 'top') {

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

@@ -7,7 +7,9 @@
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
         v-if="pretitle || title || subtitle"
-        :class="themedClass('firstColumnClass', 'col-span-9')"
+        :class="
+          cn(themedClass('firstColumnClass', 'col-span-9'), alignmentClassList)
+        "
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -29,6 +31,7 @@
           :text="text"
           :textClass="themedClass('textClass')"
           :media="media"
+          :imageFormat="imageFormat"
           :mediaClass="themedClass('mediaClass')"
           :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :colorScheme="colorScheme"
@@ -70,6 +73,7 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextcolIconlistFragment } 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'
 
@@ -79,14 +83,23 @@ const themedClass = useTheme('ParagraphIconTextLayout')
 
 const { options, isEditing } = useAttrs().blokkliData
 
+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 imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
 const buttonAlignment = computed(() => {
   switch (options.value.buttonAlignment) {
     case 'left':
@@ -102,6 +115,20 @@ const buttonAlignment = computed(() => {
 
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 
+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(' ')
+})
+
 provide('colorScheme', colorScheme)
 provide('isEditing', isEditing)
 provide('titleWeight', childTitleWeight)