@iqual/nuxt-icms 1.4.10 → 1.5.0

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

@@ -0,0 +1,476 @@
+<template>
+  <DesignSystemAtomsContainer
+    :spacing="spacing"
+    :colorScheme="colorScheme"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
+      <div
+        v-if="pretitle || title || text"
+        :class="
+          cn(
+            themedClass('firstRowColumnClass', 'col-span-12'),
+            alignmentClassList,
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :titleClass="themedClass('titleClass')"
+          :subtitle="subtitle"
+          :text="text"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+    <DesignSystemAtomsGridRow
+      :class="
+        cn(themedClass('secondRowClass'), {
+          'mt-10': pretitle || title || text,
+        })
+      "
+    >
+      <div class="relative col-span-12" v-if="isEditing">
+        <BlokkliField
+          name="field_icms_collapsible_elements"
+          :list="collapsibleElements"
+          :class="{ droptarget: isEditing }"
+        />
+      </div>
+
+      <div
+        :class="themedClass('secondRowColumnClass', 'relative col-span-12')"
+        v-else
+      >
+        <template v-if="collapsibleVariant === 'tabs'">
+          <UTabs
+            v-if="!isMobile"
+            :items="tabItems"
+            :default-index="0"
+            :unmountOnHide="false"
+            variant="link"
+            :ui="{
+              root: themedClass('tabsClass', 'gap-0'),
+              list: tabList({ colorScheme }),
+              trigger: tabTrigger({ colorScheme }),
+              indicator: tabIndicator({ colorScheme }),
+            }"
+          >
+            <template #content="{ item, index }">
+              <div :class="themedClass('accordionContentInnerClass', 'py-6')">
+                <BlokkliField
+                  name="field_icms_collapsible_elements"
+                  :list="[item.element]"
+                  :class="
+                    cn(
+                      themedClass(
+                        'tabElementsContainerClass',
+                        'flex flex-col gap-6',
+                      ),
+                      {
+                        droptarget: isEditing,
+                      },
+                    )
+                  "
+                />
+              </div>
+            </template>
+          </UTabs>
+
+          <UAccordion
+            v-else
+            ref="accordionRef"
+            :items="accordionItems"
+            :default-open="'0'"
+            :class="themedClass('accordionClass', 'w-full')"
+            :ui="{
+              trigger: accordionTrigger({ colorScheme }),
+              item: accordionItem({ colorScheme }),
+              content: themedClass('accordionContentClass'),
+              trailingIcon: accordionTrailingIcon({ colorScheme }),
+            }"
+            @update:modelValue="handleAccordionClick"
+          >
+            <template #content="{ item, index, open }">
+              <div :class="themedClass('accordionContentInnerClass', 'py-6')">
+                <BlokkliField
+                  name="field_icms_collapsible_elements"
+                  :list="[item.element]"
+                  :class="
+                    cn(
+                      themedClass(
+                        'accordionElementsContainerClass',
+                        'flex flex-col gap-6',
+                      ),
+                      {
+                        droptarget: isEditing,
+                      },
+                    )
+                  "
+                />
+              </div>
+            </template>
+          </UAccordion>
+        </template>
+
+        <template v-if="collapsibleVariant === 'accordion'">
+          <UAccordion
+            ref="accordionRef"
+            :items="accordionItems"
+            :default-open="'0'"
+            :class="accordion({ colorScheme })"
+            :ui="{
+              trigger: accordionTrigger({ colorScheme }),
+              item: accordionItem({ colorScheme }),
+              content: accordionContent({ colorScheme }),
+              trailingIcon: accordionTrailingIcon({ colorScheme }),
+            }"
+            @update:modelValue="handleAccordionClick"
+          >
+            <template #content="{ item, index, open }">
+              <div :class="themedClass('accordionContentInnerClass', 'py-6')">
+                <BlokkliField
+                  name="field_icms_collapsible_elements"
+                  :list="[item.element]"
+                  :class="
+                    cn(
+                      themedClass(
+                        'accordionElementsContainerClass',
+                        'flex flex-col gap-6',
+                      ),
+                      {
+                        droptarget: isEditing,
+                      },
+                    )
+                  "
+                />
+              </div>
+            </template>
+          </UAccordion>
+        </template>
+
+        <template v-if="collapsibleVariant === 'carousel'">
+          <div :class="carousel({ colorScheme })">
+            <UCarousel
+              v-model="carouselIndex"
+              :items="collapsibleElements || []"
+              :arrows="(collapsibleElements?.length || 0) > 1"
+              :watch-drag="(collapsibleElements?.length || 0) > 1"
+              nextIcon="i-lucide-chevron-right"
+              prevIcon="i-lucide-chevron-left"
+              :class="themedClass('carouselClass')"
+              :ui="{
+                viewport: themedClass('carouselViewportClass', 'pt-8'),
+                item: 'basis-full',
+                container: themedClass('carouselContentClass', 'gap-8'),
+                prev: cn(
+                  carouselButton({ colorScheme }),
+                  themedClass(
+                    'carouselButtonPrevClass',
+                    'start-0 sm:start-0 2xl:-start-16',
+                  ),
+                ),
+                next: cn(
+                  carouselButton({ colorScheme }),
+                  themedClass(
+                    'carouselButtonNextClass',
+                    'start-12 sm:start-12 2xl:start-auto 2xl:-end-16',
+                  ),
+                ),
+              }"
+            >
+              <template #default="{ item }">
+                <BlokkliField
+                  v-slot="{ items }"
+                  name="field_icms_collapsible_elements"
+                  :list="[item]"
+                  proxy-mode
+                >
+                  <BlokkliItem v-for="fieldItem in items" v-bind="fieldItem" />
+                </BlokkliField>
+              </template>
+            </UCarousel>
+          </div>
+        </template>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+import type {
+  ParagraphIcmsLayoutCollapsibleFragment,
+  ParagraphIcmsCollapsibleElementFragment,
+} from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutCollapsibleFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData as any
+
+const themedClass = useTheme('ParagraphCollapsibleLayout')
+const { isMobile } = useIsMobile()
+
+// Transform tabElements into UTabs format
+const tabItems = computed(() => {
+  return (props.collapsibleElements || []).map((collapsibleElement) => ({
+    label:
+      (collapsibleElement?.props as ParagraphIcmsCollapsibleElementFragment)
+        ?.collapsibleTitle || '',
+    element: collapsibleElement,
+  }))
+})
+
+// Transform collapsibleElements into UAccordion format
+const accordionItems = computed(() => {
+  return (props.collapsibleElements || []).map((collapsibleElement) => ({
+    label:
+      (collapsibleElement?.props as ParagraphIcmsCollapsibleElementFragment)
+        ?.collapsibleTitle || '',
+    element: collapsibleElement,
+  }))
+})
+
+const accordionRef = ref()
+const { scrollToTrigger } = useAccordionScroll()
+
+const carouselIndex = ref(0)
+
+const handleAccordionClick = (
+  payload: string | string[] | number | undefined,
+): void => {
+  if (payload === undefined) return
+
+  const index =
+    typeof payload === 'string' ? parseInt(payload) : Number(payload)
+  scrollToTrigger(accordionRef.value?.$el, index)
+}
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const collapsibleVariant = computed(() => {
+  return options.value.collapsibleVariant
+})
+
+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(' ')
+})
+
+const tabList = tv({
+  base: themedClass('tabListBase', 'p-0 justify-center'),
+  variants: {
+    colorScheme: {
+      none: themedClass('tabListVariantsColorSchemeNone', 'border-gray-200'),
+      dark: themedClass('tabListVariantsColorSchemeDark', 'border-gray-700'),
+      light: themedClass('tabListVariantsColorSchemeLight', 'border-gray-200'),
+      accent: themedClass(
+        'tabListVariantsColorSchemeAccent',
+        'border-primary-400',
+      ),
+    },
+  },
+})
+
+const tabTrigger = tv({
+  base: themedClass(
+    'tabTriggerBase',
+    'flex-1 text-base cursor-pointer px-4 py-3',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'tabTriggerVariantsColorSchemeNone',
+        'data-[state=inactive]:text-gray-950 hover:data-[state=inactive]:not-disabled:text-primary-500',
+      ),
+      dark: themedClass(
+        'tabTriggerVariantsColorSchemeDark',
+        'data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:not-disabled:text-white',
+      ),
+      light: themedClass(
+        'tabTriggerVariantsColorSchemeLight',
+        'data-[state=inactive]:text-gray-950 hover:data-[state=inactive]:not-disabled:text-primary-500',
+      ),
+      accent: themedClass(
+        'tabTriggerVariantsColorSchemeAccent',
+        'data-[state=inactive]:text-primary-400 hover:data-[state=inactive]:not-disabled:text-white data-[state=active]:text-white',
+      ),
+    },
+  },
+})
+
+const tabIndicator = tv({
+  base: themedClass('tabIndicatorBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'tabIndicatorVariantsColorSchemeNone',
+        'bg-primary-500',
+      ),
+      dark: themedClass(
+        'tabIndicatorVariantsColorSchemeDark',
+        'bg-primary-500',
+      ),
+      light: themedClass(
+        'tabIndicatorVariantsColorSchemeLight',
+        'bg-primary-500',
+      ),
+      accent: themedClass('tabIndicatorVariantsColorSchemeAccent', 'bg-white'),
+    },
+  },
+})
+
+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-0 border-t -mb-px'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'accordionItemVariantsColorSchemeNone',
+        'border-gray-200',
+      ),
+      dark: themedClass(
+        'accordionItemVariantsColorSchemeDark',
+        'border-gray-400',
+      ),
+      light: themedClass(
+        'accordionItemVariantsColorSchemeLight',
+        'border-gray-200',
+      ),
+      accent: themedClass(
+        'accordionItemVariantsColorSchemeAccent',
+        'border-white',
+      ),
+    },
+  },
+})
+
+const accordionTrigger = tv({
+  base: themedClass('accordionTriggerBase', 'text-base cursor-pointer'),
+  variants: {
+    colorScheme: {
+      none: themedClass('accordionTriggerVariantsColorSchemeNone'),
+      dark: themedClass('accordionTriggerVariantsColorSchemeDark'),
+      light: themedClass('accordionTriggerVariantsColorSchemeLight'),
+      accent: themedClass('accordionTriggerVariantsColorSchemeAccent'),
+    },
+  },
+})
+
+const accordionTrailingIcon = tv({
+  base: themedClass(
+    'accordionTrailingIconBase',
+    'text-base border-b cursor-pointer',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'accordionTrailingIconVariantsColorSchemeNone',
+        'text-gray-950',
+      ),
+      dark: themedClass(
+        'accordionTrailingIconVariantsColorSchemeDark',
+        'text-gray-400',
+      ),
+      light: themedClass(
+        'accordionTrailingIconVariantsColorSchemeLight',
+        'text-gray-950',
+      ),
+      accent: themedClass(
+        'accordionTrailingIconVariantsColorSchemeAccent',
+        'text-white',
+      ),
+    },
+  },
+})
+
+const accordionContent = tv({
+  base: themedClass('accordionContentBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass('accordionContentVariantsColorSchemeNone'),
+      dark: themedClass('accordionContentVariantsColorSchemeDark'),
+      light: themedClass('accordionContentVariantsColorSchemeLight'),
+      accent: themedClass('accordionContentVariantsColorSchemeAccent'),
+    },
+  },
+})
+
+const carousel = tv({
+  base: themedClass('carouselBase', 'relative'),
+  variants: {
+    colorScheme: {
+      none: themedClass('carouselVariantsColorSchemeNone', ''),
+      dark: themedClass('carouselVariantsColorSchemeDark', ''),
+      light: themedClass('carouselVariantsColorSchemeLight', ''),
+      accent: themedClass('carouselVariantsColorSchemeAccent', ''),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const carouselButton = tv({
+  base: themedClass(
+    'carouselButtonBase',
+    'w-fit border-0 ring-0 shadow-none absolute cursor-pointer top-0 2xl:top-1/2',
+  ),
+  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',
+      ),
+    },
+  },
+})
+
+provide('colorScheme', colorScheme)
+provide('childTitleWeight', childTitleWeight)
+</script>

package/components/Paragraph/Contact/fragment.graphql

@@ -14,7 +14,7 @@ fragment paragraphIcmsLayoutContact on ParagraphIcmsLayoutContact {
   media: fieldIcmsMediaElements {
     ...media
   }
-  contactWebform: fieldIcmsWebform {
+  webform: fieldIcmsWebform {
     id
   }
 }

package/components/Paragraph/Contact/index.vue

@@ -5,9 +5,15 @@
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <!-- First column -->
       <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"
@@ -21,6 +27,8 @@
           :colorScheme="colorScheme"
         />
       </div>
+
+      <!-- Second column -->
       <div
         v-if="text || media?.length"
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
@@ -32,6 +40,7 @@
           :mediaClass="themedClass('mediaClass')"
           :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :colorScheme="colorScheme"
+          :imageFormat="imageFormat"
         />
 
         <BlokkliField
@@ -46,6 +55,8 @@
           ]"
         />
       </div>
+
+      <!-- Third column -->
       <div
         :class="
           themedClass(
@@ -57,13 +68,12 @@
         "
       >
         <DrupalWebform
-          v-if="contactWebform?.id"
-          :formId="contactWebform?.id"
-          :wrapperClass="themedClass('wrapperClass')"
-          :formWrapperClass="themedClass('formWrapperClass')"
-          :messagesClass="themedClass('messagesClass')"
-          :elementWrapperClass="themedClass('elementWrapperClass')"
-          :elementClass="themedClass('elementClass')"
+          v-if="webform?.id"
+          :formId="webform?.id"
+          :containerClass="themedClass('containerClass')"
+          :formClass="themedClass('formClass')"
+          :colorScheme="colorScheme"
+          :debug="false"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -73,6 +83,7 @@
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutContactFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const props = defineProps<ParagraphIcmsLayoutContactFragment>()
 
@@ -88,5 +99,23 @@ const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+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(' ')
+})
+
 provide('colorScheme', colorScheme)
 </script>

package/components/Paragraph/Downloads/fragment.graphql

@@ -7,6 +7,12 @@ fragment paragraphIcmsLayoutDownloads on ParagraphIcmsLayoutDownloads {
   media: fieldIcmsMediaElements {
     ...media
   }
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
   documents: fieldIcmsDocuments {
     name
     mediaFileUrl {

package/components/Paragraph/Downloads/index.vue

@@ -7,7 +7,12 @@
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
         v-if="pretitle || title"
-        :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"
@@ -24,13 +29,26 @@
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
       >
         <DesignSystemOrganismsContentBlock
+          :text="text"
+          :textClass="themedClass('textClass')"
           :media="media"
+          :imageFormat="imageFormat"
           :mediaClass="themedClass('mediaClass')"
           :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
-          :text="text"
-          :textClass="themedClass('textClass')"
           :colorScheme="colorScheme"
         />
+
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="[
+            themedClass(
+              'buttonsContainerClass',
+              'mt-6 flex flex-wrap items-center gap-6',
+            ),
+            { droptarget: isEditing },
+          ]"
+        />
       </div>
       <div
         :class="
@@ -62,7 +80,7 @@
             </div>
             <DesignSystemOrganismsContentBlock
               :text="document?.name"
-              :class="themedClass('downloadFileNameClass')"
+              :textClass="themedClass('downloadFileNameClass')"
             />
           </a>
         </div>
@@ -72,21 +90,35 @@
 </template>
 
 <script lang="ts" setup>
-import { tv } from 'tailwind-variants'
 import type { ParagraphIcmsLayoutDownloadsFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutDownloadsFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData
 const themedClass = useTheme('ParagraphDownloads')
 
-const colorScheme = computed(() => options.value.colorScheme)
+const { options, isEditing } = useAttrs().blokkliData as any
+
+const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
+const colorScheme = computed(() => {
+  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 download = tv({
   base: themedClass(
     'downloadBase',
@@ -141,6 +173,20 @@ const downloadIconContainer = 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(' ')
+})
+
 provide('colorScheme', colorScheme)
 provide('isEditing', isEditing)
 </script>