@iqual/nuxt-icms 1.4.10 → 1.5.1

package/components/Paragraph/Introduction/index.vue

@@ -4,74 +4,75 @@
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
-    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
-      <div :class="themedClass('columnClass', 'col-span-12')">
-        <DesignSystemAtomsGridRow :class="introductionRow({ colorScheme })">
-          <div
-            :class="
-              themedClass(
-                'introductionRowFirstColumnClass',
-                'col-span-12 md:col-span-5',
-              )
-            "
-          >
-            <Media
-              v-if="image"
-              :media="image"
-              imageAspectRatios="16/9"
-              imageSizes="xs:100vw sm:100vw md:320px lg:380px"
-              :mediaClass="themedClass('mediaClass')"
-              :elementClass="themedClass('elementClass')"
-              :figcaptionClass="themedClass('figcaptionClass')"
-            />
-          </div>
-          <div
-            :class="
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass', 'w-full p-0')">
+      <div
+        :class="
+          cn(
+            themedClass(
+              'introductionRowFirstColumnClass',
+              'col-span-12 md:col-span-5',
+            ),
+            firstColumnClass,
+          )
+        "
+      >
+        <Media
+          v-if="image"
+          :media="image"
+          :imageFormat="imageFormat"
+          imageSizes="xs:100vw sm:100vw md:320px lg:380px"
+          :mediaClass="themedClass('mediaClass')"
+          :elementClass="themedClass('elementClass')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+        />
+      </div>
+      <div
+        :class="
+          cn(
+            themedClass(
+              'introductionRowSecondColumnClass',
+              'col-span-12 flex flex-col md:col-span-7',
+            ),
+            secondColumnClass,
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
+          :title="title"
+          :titleClass="themedClass('titleClass')"
+          :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
+          :text="text"
+          :textClass="themedClass('textClass')"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :colorScheme="colorScheme"
+        />
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="
+            cn(
               themedClass(
-                'introductionRowSecondColumnClass',
-                'col-span-12 flex flex-col md:col-span-7 md:pl-5 lg:pl-12',
-              )
-            "
-          >
-            <DesignSystemOrganismsContentBlock
-              :pretitle="pretitle"
-              :pretitleClass="themedClass('pretitleClass')"
-              :title="title"
-              :titleClass="themedClass('titleClass')"
-              :subtitle="subtitle"
-              :subtitleClass="themedClass('subtitleClass')"
-              :text="text"
-              :textClass="themedClass('textClass')"
-              :titleWeight="titleWeight"
-              :titleStyle="titleStyle"
-              :colorScheme="colorScheme"
-            />
-            <BlokkliField
-              name="field_icms_buttons"
-              :list="buttons"
-              :class="
-                cn(
-                  themedClass(
-                    'buttonsContainerClass',
-                    'order-1 mt-6 flex flex-wrap items-center gap-6 md:order-none',
-                  ),
-                  buttonAlignment,
-                  { droptarget: isEditing },
-                )
-              "
-            />
-            <Media
-              v-if="signature"
-              :media="signature"
-              imageSizes="xs:180px"
-              :mediaClass="
-                themedClass('secondMediaClass', 'ml-auto mr-6 mt-6 max-w-44')
-              "
-              :figcaptionClass="themedClass('secondFigcaptionClass')"
-              :elementClass="themedClass('secondElementClass')"
-            />
-          </div>
-        </DesignSystemAtomsGridRow>
+                'buttonsContainerClass',
+                'order-1 mt-6 flex flex-wrap items-center gap-6 md:order-0',
+              ),
+              { droptarget: isEditing },
+            )
+          "
+        />
+        <Media
+          v-if="signature"
+          :media="signature"
+          imageSizes="xs:180px"
+          :mediaClass="
+            themedClass('secondMediaClass', 'ml-auto mr-6 mt-6 max-w-44')
+          "
+          :figcaptionClass="themedClass('secondFigcaptionClass')"
+          :elementClass="themedClass('secondElementClass')"
+        />
       </div>
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
@@ -79,8 +80,8 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextImageIntroFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsLayoutTextImageIntroFragment>()
@@ -89,40 +90,35 @@ const { options, isEditing } = useAttrs().blokkliData
 
 const themedClass = useTheme('ParagraphIntroduction')
 
-const introductionRow = tv({
-  base: themedClass('introductionRowBase', 'w-full p-0'),
-  variants: {
-    colorScheme: {
-      none: themedClass('introductionRowVariantsColorSchemeNone'),
-      dark: themedClass('introductionRowVariantsColorSchemeDark'),
-      light: themedClass('introductionRowVariantsColorSchemeLight'),
-      accent: themedClass('introductionRowVariantsColorSchemeAccent'),
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
-})
-
+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 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 imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
+const firstColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return 'md:order-2'
+  }
+  return 'md:order-1'
+})
+
+const secondColumnClass = computed(() => {
+  if (options.value.alignHorizontalReduced === 'right') {
+    return ' md:pr-5 lg:pr-12 md:order-1'
   }
+  return 'md:pl-5 lg:pl-12 md:order-2'
 })
 
 provide('colorScheme', colorScheme)

package/components/Paragraph/LinkLists/Element/fragment.graphql

@@ -0,0 +1,10 @@
+fragment paragraphIcmsLinkListElement on ParagraphIcmsLinkListElement {
+  title: fieldIcmsTitle
+  text: fieldIcmsText
+  links: fieldIcmsLinks {
+    title
+    uri {
+      path
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+<template>
+  <DesignSystemOrganismsLinkList
+    :title="title"
+    :titleWeight="titleWeight"
+    :text="text"
+    :links="links"
+    :colorScheme="colorScheme"
+    :teaserStyle="teaserStyle"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { ParagraphIcmsLinkListElementFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLinkListElementFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const teaserStyle = computed(() => {
+  return options.value.teaserStyle
+})
+
+const colorScheme = inject<ColorScheme>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

package/components/Paragraph/LinkLists/Layout/fragment.graphql

@@ -0,0 +1,14 @@
+fragment paragraphIcmsLayoutLinkLists on ParagraphIcmsLayoutLinkLists {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  linkListElements: fieldIcmsLinkListElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsLinkListElement
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+<template>
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass', 'flex flex-col gap-6')"
+  >
+    <DesignSystemAtomsGridRow
+      v-if="pretitle || title || subtitle || text"
+      :class="themedClass('rowClass')"
+    >
+      <div
+        v-if="pretitle || title"
+        :class="
+          cn(
+            themedClass('firstColumnClass', 'col-span-12 md:col-span-9'),
+            alignmentClassList,
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
+          :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div
+        v-if="subtitle || text"
+        :class="
+          cn(
+            themedClass('secondColumnClass', 'col-span-12 md:col-span-9'),
+            alignmentClassList,
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
+          :text="text"
+          :textClass="themedClass('textClass')"
+          :colorScheme="colorScheme"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <BlokkliField
+      name="field_icms_link_list_elements"
+      :list="linkListElements"
+      :class="
+        cn(
+          themedClass(
+            'linkListsContainerClass',
+            'grid-3-col container mx-auto grid grid-cols-12 gap-6',
+          ),
+          { droptarget: isEditing },
+          {
+            [themedClass('linkListsContainerOffsetClass', 'mt-10')]:
+              subtitle || text,
+          },
+        )
+      "
+    />
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutLinkListsFragment } 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'
+const themedClass = useTheme('ParagraphLinkListsLayout')
+
+const props = defineProps<ParagraphIcmsLayoutLinkListsFragment>()
+
+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 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 childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+provide('colorScheme', colorScheme)
+provide('isEditing', isEditing)
+provide('titleWeight', childTitleWeight)
+</script>

package/components/Paragraph/Media/index.vue

@@ -11,7 +11,7 @@
           :media="media"
           :imageSizes="imageSizes"
           :imageAspectRatios="imageAspectRatios"
-          :containerClass="themedClass('mediaSliderContainerClass', 'my-0')"
+          :containerClass="themedClass('mediaSliderContainerClass')"
           :mediaClass="themedClass('mediaSliderMediaClass')"
           :elementClass="
             themedClass('mediaSliderElementClass', 'block w-full h-auto')
@@ -47,6 +47,7 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutMediaFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutMediaFragment>()
@@ -55,8 +56,13 @@ const themedClass = useTheme('ParagraphMedia')
 
 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(() => {
@@ -69,7 +75,7 @@ const showCaptions = computed(() => {
 
 const rowClassList = computed(() => {
   const classList = ['grid grid-cols-12 gap-6']
-  if (options.value.width === 'full') {
+  if (options.value.width === 'wide') {
     return classList.join(' ')
   }
   classList.push('container mx-auto')
@@ -78,11 +84,11 @@ const rowClassList = computed(() => {
 })
 
 const imageSizes = computed(() => {
-  if (options.value.width === 'full') {
+  if (options.value.width === 'wide') {
     return 'xs:100vw sm:100vw md:100vw lg:100vw'
   }
 
-  if (options.value.width === 'page') {
+  if (options.value.width === 'medium') {
     return 'xs:100vw sm:100vw md:100vw lg:1280px'
   }
 
@@ -90,11 +96,11 @@ const imageSizes = computed(() => {
 })
 
 const imageAspectRatios = computed(() => {
-  if (options.value.width === 'full') {
+  if (options.value.width === 'wide') {
     return '3/1'
   }
 
-  if (options.value.width === 'page') {
+  if (options.value.width === 'medium') {
     return '16/9'
   }
 

package/components/Paragraph/Partnerships/Layout/fragment.graphql

@@ -3,6 +3,13 @@ fragment paragraphIcmsLayoutPartnerships on ParagraphIcmsLayoutPartnerships {
   title: fieldIcmsTitle
   titleWeight: fieldIcmsTitleWeight
   textRows: fieldIcmsTextRows
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
   image: fieldIcmsMediaElement {
     ...media
   }