@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/components/Paragraph/Contact/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -17,14 +17,14 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
+          :title-class="themedClass('titleClass', 'mb-0')"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :subtitle-class="themedClass('subtitleClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
 
@@ -35,12 +35,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
+          :text-class="themedClass('textClass')"
           :media="media"
-          :mediaClass="themedClass('mediaClass')"
-          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
-          :colorScheme="colorScheme"
-          :imageFormat="imageFormat"
+          :media-class="themedClass('mediaClass')"
+          :media-container-class="themedClass('mediaContainerClass', 'mt-0')"
+          :color-scheme="colorScheme"
+          :image-format="imageFormat"
         />
 
         <BlokkliField
@@ -69,10 +69,10 @@
       >
         <DrupalWebform
           v-if="webform?.id"
-          :formId="webform?.id"
-          :containerClass="themedClass('containerClass')"
-          :formClass="themedClass('formClass')"
-          :colorScheme="colorScheme"
+          :form-id="webform?.id"
+          :container-class="themedClass('containerClass')"
+          :form-class="themedClass('formClass')"
+          :color-scheme="colorScheme"
           :debug="false"
         />
       </div>
@@ -84,7 +84,7 @@
 import type { ParagraphIcmsLayoutContactFragment } from '#graphql-operations'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
-const props = defineProps<ParagraphIcmsLayoutContactFragment>()
+defineProps<ParagraphIcmsLayoutContactFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData as any
 

package/components/Paragraph/Downloads/fragment.graphql

@@ -15,7 +15,7 @@ fragment paragraphIcmsLayoutDownloads on ParagraphIcmsLayoutDownloads {
   }
   documents: fieldIcmsDocuments {
     name
-    mediaFileUrl {
+    url {
       path
     }
   }

package/components/Paragraph/Downloads/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -16,12 +16,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -30,12 +30,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
+          :text-class="themedClass('textClass')"
           :media="media"
-          :imageFormat="imageFormat"
-          :mediaClass="themedClass('mediaClass')"
-          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
-          :colorScheme="colorScheme"
+          :image-format="imageFormat"
+          :media-class="themedClass('mediaClass')"
+          :media-container-class="themedClass('mediaContainerClass', 'mt-0')"
+          :color-scheme="colorScheme"
         />
 
         <BlokkliField
@@ -67,7 +67,7 @@
           <a
             v-for="(document, index) in documents"
             :key="index"
-            :href="document?.mediaFileUrl?.path"
+            :href="document?.url?.path"
             target="_blank"
             rel="noopener noreferrer"
             :class="download({ colorScheme })"
@@ -80,7 +80,7 @@
             </div>
             <DesignSystemOrganismsContentBlock
               :text="document?.name"
-              :textClass="themedClass('downloadFileNameClass')"
+              :text-class="themedClass('downloadFileNameClass')"
             />
           </a>
         </div>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="
-      themedClass('accordionItemClass', 'not-last:mb-1 border-none p-4 pb-6')
+      themedClass('accordionItemClass', 'border-none p-4 pb-6 not-last:mb-1')
     "
     v-bind="computedProps"
   >
@@ -9,7 +9,7 @@
       {{ question }}
     </div>
     <div :class="themedClass('accordionContentClass', 'p-4 pb-6 text-base')">
-      <div v-html="answer" :class="themedClass('contentClass')" />
+      <div :class="themedClass('contentClass')" v-html="answer" />
       <BlokkliField
         name="field_icms_buttons"
         :list="buttons"
@@ -27,6 +27,7 @@
 
 <script lang="ts" setup>
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { DefineBlokkliContext } from '#blokkli/types'
 import type { ParagraphIcmsFaqElementFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 
@@ -61,7 +62,7 @@ const accordionTrigger = tv({
   },
 })
 
-const { isEditing } = useAttrs().blokkliData
+const { isEditing } = useAttrs().blokkliData as DefineBlokkliContext
 const colorScheme = inject<ColorScheme>('colorScheme')
 
 const computedProps = computed(() => {

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer
     :spacing="spacing"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
@@ -16,14 +16,14 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
+          :title-class="themedClass('titleClass', 'mb-0')"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :subtitle-class="themedClass('subtitleClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -37,12 +37,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
+          :text-class="themedClass('textClass')"
           :media="media"
-          :imageFormat="imageFormat"
-          :mediaClass="themedClass('mediaClass')"
-          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
-          :colorScheme="colorScheme"
+          :image-format="imageFormat"
+          :media-class="themedClass('mediaClass')"
+          :media-container-class="themedClass('mediaContainerClass', 'mt-0')"
+          :color-scheme="colorScheme"
         />
         <BlokkliField
           name="field_icms_buttons"
@@ -91,7 +91,7 @@
           }"
         >
           <template #content="{ item }">
-            <div v-html="item.answer" :class="themedClass('contentClass')" />
+            <div :class="themedClass('contentClass')" v-html="item.answer" />
             <BlokkliField
               name="field_icms_buttons"
               :list="item.buttons"
@@ -110,7 +110,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { ParagraphIcmsLayoutFaqFragment } from '#graphql-operations'
+import type {
+  ParagraphIcmsFaqElementFragment,
+  ParagraphIcmsLayoutFaqFragment,
+} from '#graphql-operations'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { tv } from 'tailwind-variants'
 
@@ -120,12 +123,30 @@ const themedClass = useTheme('ParagraphFAQLayout')
 
 const { options, isEditing } = useAttrs().blokkliData as any
 
+/**
+ * A field item's `props` is generated as a union with `object`, because the
+ * field is declared on the Paragraph interface and the inline fragment only
+ * covers one bundle of it. The Drupal field only accepts FAQ elements, so
+ * narrowing on one of their own fields is enough.
+ */
+function isFaqElement(
+  itemProps: object | null | undefined,
+): itemProps is ParagraphIcmsFaqElementFragment {
+  return !!itemProps && 'question' in itemProps
+}
+
+const faqElementProps = computed(() =>
+  (props.faqElements || []).map((faq) =>
+    isFaqElement(faq?.props) ? faq.props : undefined,
+  ),
+)
+
 // 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 || [],
+  return faqElementProps.value.map((element) => ({
+    label: element?.question || '',
+    answer: element?.answer || '',
+    buttons: element?.buttons || [],
   }))
 })
 
@@ -240,12 +261,12 @@ provide('colorScheme', colorScheme)
 const faqJsonLd = {
   '@context': 'https://schema.org',
   '@type': 'FAQPage',
-  mainEntity: (props.faqElements || []).map((faq) => ({
+  mainEntity: faqElementProps.value.map((element) => ({
     '@type': 'Question',
-    name: faq?.props?.question?.trim() ?? '',
+    name: element?.question?.trim() ?? '',
     acceptedAnswer: {
       '@type': 'Answer',
-      text: faq?.props?.answer?.replace(/<[^>]+>/g, '').trim() ?? '',
+      text: element?.answer?.replace(/<[^>]+>/g, '').trim() ?? '',
     },
   })),
 }

package/components/Paragraph/FromLibrary/fragment.graphql

@@ -0,0 +1,17 @@
+# The from_library wrapper blökkli places for a reusable block. Its rendering
+# component ships with @blokkli/editor and expects the referenced library item
+# as `libraryItem` with the wrapped block in `block`. The nested block spreads
+# `paragraphInLibrary` (generated by dynamicParagraphResolver): the full
+# `paragraph` fragment would contain this one and GraphQL forbids the cycle.
+fragment paragraphFromLibrary on ParagraphFromLibrary {
+  libraryItem: fieldReusableParagraph {
+    uuid
+    label
+    block: paragraphs {
+      ...paragraphsFieldItem
+      props {
+        ...paragraphInLibrary
+      }
+    }
+  }
+}

package/components/Paragraph/Gallery/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -19,12 +19,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -41,10 +41,10 @@
       >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
+          :subtitle-class="themedClass('subtitleClass')"
           :text="text"
-          :textClass="themedClass('textClass')"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :color-scheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -73,11 +73,11 @@
         <MediaImage
           v-if="image"
           :media="image"
-          imageAspectRatios="1/1"
-          imageSizes="xs:100vw sm:100vw md:320px lg:400px"
-          :mediaClass="themedClass('mediaClass', 'w-full cursor-pointer')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :elementClass="themedClass('elementClass')"
+          image-aspect-ratios="1/1"
+          image-sizes="xs:100vw sm:100vw md:320px lg:400px"
+          :media-class="themedClass('mediaClass', 'w-full cursor-pointer')"
+          :figcaption-class="themedClass('figcaptionClass')"
+          :element-class="themedClass('elementClass')"
         />
       </div>
 

package/components/Paragraph/HeroImage/index.vue

@@ -20,25 +20,32 @@
     />
 
     <!-- Image/video wrapper -->
-    <div :class="themedClass('mediaContainerClass', 'absolute inset-0')">
+    <!-- overflow-hidden + size-full crop videos to the hero bounds, since
+         unlike images they have no aspect-ratio handling of their own and
+         would otherwise overlap the following layouts. -->
+    <div
+      :class="
+        themedClass('mediaContainerClass', 'absolute inset-0 overflow-hidden')
+      "
+    >
       <Media
         v-if="medium"
         :media="medium"
-        imageAspectRatios="xs:1/1 sm:1/1 md:16/9 lg:16/9 xl:16/9 xxl:16/9"
-        imageSizes="xs:100vw sm:100vw md:100vw lg:100vw xl:100vw xxl:100vw"
-        imageLoading="eager"
-        :videoControls="false"
-        videoAutoplay
-        videoMuted
-        videoLoop
-        :mediaClass="themedClass('mediaClass')"
-        :elementClass="
+        image-aspect-ratios="xs:1/1 sm:1/1 md:16/9 lg:16/9 xl:16/9 xxl:16/9"
+        image-sizes="xs:100vw sm:100vw md:100vw lg:100vw xl:100vw xxl:100vw"
+        image-loading="eager"
+        :video-controls="false"
+        video-autoplay
+        video-muted
+        video-loop
+        :media-class="themedClass('mediaClass', 'flex size-full items-center')"
+        :element-class="
           cn(
             themedClass('elementClass', 'size-full object-cover'),
             elementClass,
           )
         "
-        :figcaptionClass="themedClass('figcaptionClass')"
+        :figcaption-class="themedClass('figcaptionClass')"
       />
     </div>
 
@@ -59,15 +66,15 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="cn(themedClass('pretitleClass'), textShadow)"
+          :pretitle-class="cn(themedClass('pretitleClass'), textShadow)"
           :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :titleClass="cn(themedClass('titleClass'), textShadow)"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :title-class="cn(themedClass('titleClass'), textShadow)"
           :subtitle="subtitle"
-          :subtitleClass="cn(themedClass('subtitleClass'), textShadow)"
+          :subtitle-class="cn(themedClass('subtitleClass'), textShadow)"
           :text="text"
-          :textClass="cn(themedClass('textClass'), textShadow)"
+          :text-class="cn(themedClass('textClass'), textShadow)"
         />
         <BlokkliField
           name="field_icms_buttons"
@@ -144,11 +151,11 @@ const overlayClass = computed(() => {
 
   if (alignHorizontal.value === 'left') {
     classList.push(
-      themedClass('overlayClassAlignLeftClass', 'md:bg-gradient-to-l'),
+      themedClass('overlayClassAlignLeftClass', 'md:bg-linear-to-l'),
     )
   } else if (alignHorizontal.value === 'right') {
     classList.push(
-      themedClass('overlayClassAlignRightClass', 'md:bg-gradient-to-r'),
+      themedClass('overlayClassAlignRightClass', 'md:bg-linear-to-r'),
     )
   }
 

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

@@ -1,12 +1,12 @@
 <template>
   <DesignSystemMoleculesIconText
     :title="title"
-    :titleClass="themedClass('titleClass')"
-    :titleWeight="titleWeight"
+    :title-class="themedClass('titleClass')"
+    :title-weight="titleWeight"
     :text="text"
-    :textClass="themedClass('textClass')"
+    :text-class="themedClass('textClass')"
     :icon="icon"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
   />
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -13,14 +13,14 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
+          :title-class="themedClass('titleClass', 'mb-0')"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :subtitle-class="themedClass('subtitleClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -29,12 +29,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
+          :text-class="themedClass('textClass')"
           :media="media"
-          :imageFormat="imageFormat"
-          :mediaClass="themedClass('mediaClass')"
-          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
-          :colorScheme="colorScheme"
+          :image-format="imageFormat"
+          :media-class="themedClass('mediaClass')"
+          :media-container-class="themedClass('mediaContainerClass', 'mt-0')"
+          :color-scheme="colorScheme"
         />
 
         <BlokkliField

package/components/Paragraph/Introduction/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -19,11 +19,11 @@
         <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')"
+          :image-format="imageFormat"
+          image-sizes="xs:100vw sm:100vw md:320px lg:380px"
+          :media-class="themedClass('mediaClass')"
+          :element-class="themedClass('elementClass')"
+          :figcaption-class="themedClass('figcaptionClass')"
         />
       </div>
       <div
@@ -39,16 +39,16 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass')"
+          :title-class="themedClass('titleClass')"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
+          :subtitle-class="themedClass('subtitleClass')"
           :text="text"
-          :textClass="themedClass('textClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
         <BlokkliField
           name="field_icms_buttons"
@@ -66,12 +66,12 @@
         <Media
           v-if="signature"
           :media="signature"
-          imageSizes="xs:180px"
-          :mediaClass="
+          image-sizes="xs:180px"
+          :media-class="
             themedClass('secondMediaClass', 'ml-auto mr-6 mt-6 max-w-44')
           "
-          :figcaptionClass="themedClass('secondFigcaptionClass')"
-          :elementClass="themedClass('secondElementClass')"
+          :figcaption-class="themedClass('secondFigcaptionClass')"
+          :element-class="themedClass('secondElementClass')"
         />
       </div>
     </DesignSystemAtomsGridRow>

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

@@ -4,7 +4,7 @@ fragment paragraphIcmsLinkListElement on ParagraphIcmsLinkListElement {
   links: fieldIcmsLinks {
     title
     uri {
-      path
+      ...linkUrl
     }
   }
 }

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

@@ -1,11 +1,11 @@
 <template>
   <DesignSystemOrganismsLinkList
     :title="title"
-    :titleWeight="titleWeight"
+    :title-weight="titleWeight"
     :text="text"
     :links="links"
-    :colorScheme="colorScheme"
-    :teaserStyle="teaserStyle"
+    :color-scheme="colorScheme"
+    :teaser-style="teaserStyle"
   />
 </template>
 
@@ -13,9 +13,9 @@
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { ParagraphIcmsLinkListElementFragment } from '#graphql-operations'
 
-const props = defineProps<ParagraphIcmsLinkListElementFragment>()
+defineProps<ParagraphIcmsLinkListElementFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData as any
+const { options } = useAttrs().blokkliData as any
 
 const teaserStyle = computed(() => {
   return options.value.teaserStyle

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

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass', 'flex flex-col gap-6')"
   >
@@ -19,12 +19,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -38,10 +38,10 @@
       >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
+          :subtitle-class="themedClass('subtitleClass')"
           :text="text"
-          :textClass="themedClass('textClass')"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :color-scheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>