@iqual/nuxt-icms 1.4.9 → 1.5.0

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

@@ -4,83 +4,97 @@
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
-    <DesignSystemAtomsGridRow :class="themedClass('rowClass', 'md:pr-24')">
-      <div :class="themedClass('columnClass', 'col-span-12')">
-        <DesignSystemAtomsGridRow :class="partnershipsRow({ colorScheme })">
-          <div
-            :class="
-              themedClass(
-                'partnershipsRowFirstColumnClass',
-                'col-span-12 md:col-span-6',
-              )
-            "
-          >
-            <DesignSystemOrganismsContentBlock
-              :pretitle="pretitle"
-              :pretitleClass="themedClass('pretitleClass')"
-              :title="title"
-              :titleClass="themedClass('titleClass')"
-              :titleWeight="titleWeight"
-              :colorScheme="colorScheme"
-            />
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div
+        :class="
+          cn(
+            themedClass(
+              'partnershipsRowFirstColumnClass',
+              'col-span-12 flex flex-col gap-6 md:col-span-6',
+            ),
+            firstColumnClass,
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
+          :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
+          :titleWeight="titleWeight"
+          :colorScheme="colorScheme"
+        />
 
-            <ul :class="themedClass('textRowsClass', 'flex flex-col gap-4')">
-              <li
-                v-for="(textRow, index) in textRows"
-                :key="index"
-                :class="themedClass('textRowClass', 'flex items-start gap-2')"
-              >
-                <SpriteSymbol
-                  name="chevron-right"
-                  :class="bulletPoint({ colorScheme })"
-                />
-                {{ textRow }}
-              </li>
-            </ul>
-          </div>
-
-          <div
-            :class="
-              themedClass(
-                'partnershipsRowSecondColumnClass',
-                'col-span-12 md:col-span-6 md:col-start-8',
-              )
-            "
+        <ul :class="themedClass('textRowsClass', 'flex flex-col gap-4')">
+          <li
+            v-for="(textRow, index) in textRows"
+            :key="index"
+            :class="themedClass('textRowClass', 'flex items-start gap-2')"
           >
-            <Media
-              v-if="image"
-              :media="image"
-              imageAspectRatios="xs:16/9 sm:16/9 md:1/1 lg:16/9"
-              imageSizes="xs:100vw sm:100vw md:50vw lg:600px"
-              :mediaClass="themedClass('mediaClass')"
-              :elementClass="themedClass('elementClass')"
-              :figcaptionClass="themedClass('figcaptionClass')"
+            <SpriteSymbol
+              name="chevron-right"
+              :class="bulletPoint({ colorScheme })"
             />
+            {{ textRow }}
+          </li>
+        </ul>
 
-            <div :class="partnershipsOffsetRow({ colorScheme })">
-              <DesignSystemOrganismsContentBlock
-                :pretitle="overlayTitle"
-                :pretitleClass="themedClass('overlayTitle')"
-                :text="overlayText"
-                :textClass="themedClass('overlayText')"
-                :colorScheme="colorScheme"
-              />
-
-              <BlokkliField
-                v-if="partnershipElements"
-                name="field_icms_partnership_elements"
-                :list="partnershipElements"
-                :class="[
-                  themedClass(
-                    'partnershipsContainerClass',
-                    'mt-8 flex flex-wrap xl:flex-nowrap',
-                  ),
-                  { droptarget: isEditing },
-                ]"
-              />
-            </div>
-          </div>
-        </DesignSystemAtomsGridRow>
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="[
+            themedClass(
+              'buttonsContainerClass',
+              'flex flex-wrap items-center gap-6',
+            ),
+            { droptarget: isEditing },
+          ]"
+        />
+      </div>
+
+      <div
+        :class="
+          cn(
+            themedClass(
+              'partnershipsRowSecondColumnClass',
+              'col-span-12 md:col-span-5',
+            ),
+            secondColumnClass,
+          )
+        "
+      >
+        <Media
+          v-if="image"
+          :media="image"
+          :imageFormat="imageFormat"
+          imageSizes="xs:100vw sm:100vw md:50vw lg:600px"
+          :mediaClass="themedClass('mediaClass')"
+          :elementClass="themedClass('elementClass')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+        />
+
+        <div :class="partnershipsOffsetRow({ colorScheme })">
+          <DesignSystemOrganismsContentBlock
+            :pretitle="overlayTitle"
+            :pretitleClass="themedClass('overlayTitle')"
+            :text="overlayText"
+            :textClass="themedClass('overlayText')"
+            :colorScheme="colorScheme"
+          />
+
+          <BlokkliField
+            v-if="partnershipElements"
+            name="field_icms_partnership_elements"
+            :list="partnershipElements"
+            :class="[
+              themedClass(
+                'partnershipsContainerClass',
+                'mt-8 flex flex-wrap xl:flex-nowrap',
+              ),
+              { droptarget: isEditing },
+            ]"
+          />
+        </div>
       </div>
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
@@ -88,8 +102,10 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutPartnershipsFragment } from '#graphql-operations'
-import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutPartnershipsFragment>()
 
@@ -97,30 +113,6 @@ const { options, isEditing } = useAttrs().blokkliData
 
 const themedClass = useTheme('ParagraphPartnershipsLayout')
 
-const partnershipsRow = tv({
-  base: themedClass('partnershipsRowBase', 'w-full p-0'),
-  variants: {
-    colorScheme: {
-      none: themedClass('partnershipsRowVariantsColorSchemeNone', 'bg-white'),
-      dark: themedClass(
-        'partnershipsRowVariantsColorSchemeDark',
-        'bg-gray-950',
-      ),
-      light: themedClass(
-        'partnershipsRowVariantsColorSchemeLight',
-        'bg-gray-50',
-      ),
-      accent: themedClass(
-        'partnershipsRowVariantsColorSchemeAccent',
-        'bg-primary-600',
-      ),
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
-})
-
 const partnershipsOffsetRow = tv({
   base: themedClass(
     'partnershipsOffsetRowBase',
@@ -152,7 +144,7 @@ const partnershipsOffsetRow = tv({
 })
 
 const bulletPoint = tv({
-  base: themedClass('bulletPointBase', 'size-6 flex-shrink-0'),
+  base: themedClass('bulletPointBase', 'size-6 shrink-0'),
   variants: {
     colorScheme: {
       none: themedClass('bulletPointVariantsColorSchemeNone', 'text-gray-950'),
@@ -169,13 +161,36 @@ const bulletPoint = tv({
   },
 })
 
+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 firstColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-start-7 md:order-2'
+  }
+  return 'md:col-start-1 md:order-1'
+})
+
+const secondColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-start-1 md:order-1'
+  }
+  return 'md:col-start-8 md:order-2'
+})
+
 provide('colorScheme', colorScheme)
 </script>

package/components/Paragraph/SingleTestimonial/index.vue

@@ -6,7 +6,12 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-5')"
+        :class="
+          cn(
+            themedClass('firstColumnClass', 'col-span-12 md:col-span-5'),
+            firstColumnClass,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -20,9 +25,12 @@
       </div>
       <div
         :class="
-          themedClass(
-            'secondColumnClass',
-            'col-span-12 flex items-end md:col-span-6 md:col-start-7',
+          cn(
+            themedClass(
+              'secondColumnClass',
+              'col-span-12 flex items-end md:col-span-6',
+            ),
+            secondColumnClass,
           )
         "
       >
@@ -32,7 +40,12 @@
         />
       </div>
       <div
-        :class="themedClass('thirdColumnClass', 'col-span-12 md:col-span-5')"
+        :class="
+          cn(
+            themedClass('thirdColumnClass', 'col-span-12 md:col-span-5'),
+            thirdColumnClass,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
@@ -40,6 +53,7 @@
           :text="text"
           :textClass="themedClass('textClass')"
           :media="media"
+          :imageFormat="imageFormat"
           :mediaClass="themedClass('mediaClass')"
           :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :colorScheme="colorScheme"
@@ -54,7 +68,6 @@
                 'buttonsContainerClass',
                 'mt-6 flex flex-wrap items-center gap-6',
               ),
-              buttonAlignment,
               { droptarget: isEditing },
             )
           "
@@ -62,9 +75,12 @@
       </div>
       <div
         :class="
-          themedClass(
-            'fourthColumnClass',
-            'col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0',
+          cn(
+            themedClass(
+              'fourthColumnClass',
+              'col-span-12 mt-4 md:col-span-6 md:mt-0',
+            ),
+            fourthColumnClass,
           )
         "
       >
@@ -88,12 +104,13 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTestimonialFragment } 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'
 
 defineProps<ParagraphIcmsLayoutTestimonialFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData
+const { options, isEditing } = useAttrs().blokkliData as any
 
 const themedClass = useTheme('ParagraphSingleTestimonial')
 
@@ -101,21 +118,45 @@ const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+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 imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
+const firstColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-start-8 md:order-2'
+  }
+  return 'md:col-start-1'
+})
+
+const secondColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-start-1 md:order-1'
+  }
+  return 'md:col-start-7'
+})
+
+const thirdColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-start-8 md:order-4'
+  }
+  return 'md:col-start-1'
 })
 
-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 fourthColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:col-start-1 md:order-3'
   }
+  return 'md:col-start-7'
 })
 
 provide('colorScheme', colorScheme)

package/components/Paragraph/Table/index.vue

@@ -8,7 +8,13 @@
       <div
         v-if="pretitle || title || subtitle"
         :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
+          cn(
+            themedClass(
+              'firstRowFirstColumnClass',
+              'col-span-12 md:col-span-9',
+            ),
+            alignmentClassList,
+          )
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -25,7 +31,13 @@
       <div
         v-if="text"
         :class="
-          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
+          cn(
+            themedClass(
+              'firstRowSecondColumnClass',
+              'col-span-12 md:col-span-9',
+            ),
+            alignmentClassList,
+          )
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -36,9 +48,11 @@
     </DesignSystemAtomsGridRow>
     <DesignSystemAtomsGridRow
       :class="
-        themedClass(
-          'secondRowClass',
-          pretitle || title || subtitle || text ? 'mt-10' : '',
+        cn(
+          themedClass('secondRowClass'),
+          pretitle || title || subtitle || text
+            ? themedClass('secondRowOffsetClass', 'mt-10')
+            : '',
         )
       "
     >
@@ -56,18 +70,39 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTableFragment } 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'
 
 defineProps<ParagraphIcmsLayoutTableFragment>()
 const themedClass = useTheme('ParagraphTable')
 
-const { options, parentType } = useAttrs().blokkliData
+const { options, parentType } = useAttrs().blokkliData as any
 
 const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+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 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(' ')
 })
 </script>

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

@@ -22,7 +22,6 @@
     :buttonsContainerClass="themedClass('buttonsContainerClass')"
     :buttonClass="themedClass('buttonClass')"
     :labelClass="themedClass('labelClass')"
-    :sublineClass="themedClass('sublineClass')"
   />
 </template>
 

package/components/Paragraph/Team/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,7 +28,12 @@
       </div>
       <div
         v-if="text"
-        :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-9')"
+        :class="
+          cn(
+            themedClass('secondColumnClass', 'col-span-12 md:col-span-9'),
+            alignmentClassList,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
@@ -73,6 +83,20 @@ const spacing = 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('titleWeight', childTitleWeight)
 </script>