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

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer
     :spacing="spacing"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
@@ -19,16 +19,16 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass')"
+          :title-class="themedClass('titleClass')"
           :text="text"
-          :textClass="themedClass('textClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
+          :text-class="themedClass('textClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :colorScheme="colorScheme"
+          :subtitle-class="themedClass('subtitleClass')"
+          :color-scheme="colorScheme"
         />
 
         <BlokkliField
@@ -51,20 +51,18 @@
         <!-- Slider -->
         <div :class="carousel({ colorScheme })">
           <BlokkliField
-            v-slot="{ items }"
+            v-if="isEditing"
             name="field_icms_testimonial_elements"
             :list="testimonialElements"
             class="droptarget"
-            v-if="isEditing"
           />
 
           <UCarousel
             v-else
-            v-model="carouselIndex"
             :items="testimonialElements || []"
             :arrows="(testimonialElements?.length ?? 0) > 1"
-            prevIcon="i-lucide-chevron-left"
-            nextIcon="i-lucide-chevron-right"
+            prev-icon="i-lucide-chevron-left"
+            next-icon="i-lucide-chevron-right"
             :ui="{
               root: themedClass('carouselRootClass'),
               viewport: themedClass('carouselViewportClass'),
@@ -73,11 +71,17 @@
               controls: themedClass('carouselControlsClass'),
               arrows: themedClass('carouselArrowsClass'),
               prev: cn(
-                themedClass('carouselButtonPrevClass', '-start-12 sm:-start-12 xl:-start-24'),
+                themedClass(
+                  'carouselButtonPrevClass',
+                  '-start-12 sm:-start-12 xl:-start-24',
+                ),
                 carouselButton({ colorScheme }),
               ),
               next: cn(
-                themedClass('carouselButtonNextClass', '-end-12 sm:-end-12 xl:-end-24'),
+                themedClass(
+                  'carouselButtonNextClass',
+                  '-end-12 sm:-end-12 xl:-end-24',
+                ),
                 carouselButton({ colorScheme }),
               ),
               dots: themedClass('carouselDotsClass'),
@@ -91,7 +95,11 @@
                 :list="[item]"
                 proxy-mode
               >
-                <BlokkliItem v-for="fieldItem in items" v-bind="fieldItem" />
+                <BlokkliItem
+                  v-for="fieldItem in items"
+                  :key="fieldItem.uuid"
+                  v-bind="fieldItem"
+                />
               </BlokkliField>
             </template>
           </UCarousel>
@@ -112,8 +120,6 @@ const { options, isEditing } = useAttrs().blokkliData as any
 
 const themedClass = useTheme('ParagraphTestimonialLayout')
 
-const carouselIndex = ref(0)
-
 const carousel = tv({
   base: themedClass('carouselBase', 'px-16 py-8 xl:px-40 xl:py-12'),
   variants: {

package/components/Paragraph/Text/fragment.graphql

@@ -11,4 +11,4 @@ fragment paragraphIcmsLayoutText on ParagraphIcmsLayoutText {
       ...paragraphIcmsButtonElement
     }
   }
-}
+}

package/components/Paragraph/Text/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -15,17 +15,17 @@
       >
         <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"
+          :text-class="themedClass('textClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
           :text-columns="textColumns"
-          :colorScheme="colorScheme"
+          :color-scheme="colorScheme"
         />
         <BlokkliField
           name="field_icms_buttons"

package/components/Paragraph/TextMedia/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -8,16 +8,16 @@
       <div :class="themedClass('firstColumnClass', textColumnClassList)">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass', 'mb-2.5')"
+          :pretitle-class="themedClass('pretitleClass', 'mb-2.5')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-5')"
+          :title-class="themedClass('titleClass', 'mb-5')"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
+          :subtitle-class="themedClass('subtitleClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
           :text="text"
-          :textClass="themedClass('textClass')"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :color-scheme="colorScheme"
         />
         <BlokkliField
           name="field_icms_buttons"
@@ -37,24 +37,24 @@
         <DesignSystemMoleculesMediaSlider
           v-if="media && media.length"
           :media="media"
-          imageSizes="xs:100vw sm:100vw md:50vw lg:640px"
-          :imageFormat="imageFormat"
-          :containerClass="themedClass('containerClass', 'my-0')"
-          :mediaClass="themedClass('mediaClass')"
-          :elementClass="themedClass('elementClass')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :carouselClass="themedClass('carouselClass')"
-          :carouselContentClass="themedClass('carouselContentClass')"
-          :carouselItemClass="themedClass('carouselItemClass')"
-          :carouselButtonPrevClass="themedClass('carouselButtonPrevClass')"
-          :carouselButtonPrevIconClass="
+          image-sizes="xs:100vw sm:100vw md:50vw lg:640px"
+          :image-format="imageFormat"
+          :container-class="themedClass('containerClass', 'my-0')"
+          :media-class="themedClass('mediaClass')"
+          :element-class="themedClass('elementClass')"
+          :figcaption-class="themedClass('figcaptionClass')"
+          :carousel-class="themedClass('carouselClass')"
+          :carousel-content-class="themedClass('carouselContentClass')"
+          :carousel-item-class="themedClass('carouselItemClass')"
+          :carousel-button-prev-class="themedClass('carouselButtonPrevClass')"
+          :carousel-button-prev-icon-class="
             themedClass('carouselButtonPrevIconClass')
           "
-          :carouselButtonNextClass="themedClass('carouselButtonNextClass')"
-          :carouselButtonNextIconClass="
+          :carousel-button-next-class="themedClass('carouselButtonNextClass')"
+          :carousel-button-next-icon-class="
             themedClass('carouselButtonNextIconClass')
           "
-          :colorScheme="colorScheme"
+          :color-scheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>

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

@@ -2,29 +2,29 @@
   <DesignSystemOrganismsTimelineElement
     :pretitle="pretitle"
     :title="title"
-    :titleStyle="titleStyle"
-    :titleWeight="titleWeight"
+    :title-style="titleStyle"
+    :title-weight="titleWeight"
     :subtitle="subtitle"
     :text="text"
     :media="media"
     :buttons="buttons"
-    :colorCcheme="colorScheme"
-    :hasDecorativeLine="false"
-    :reverseColumns="reverseColumns"
-    :isEditing="isEditing"
-    :imageFormat="imageFormat"
-    :containerClass="themedClass('containerClass')"
-    :firstColumnClass="themedClass('firstColumnClass')"
-    :secondColumnClass="themedClass('secondColumnClass')"
-    :pretitleClass="themedClass('pretitleClass')"
-    :titleClass="themedClass('titleClass')"
-    :subtitleClass="themedClass('subtitleClass')"
-    :textClass="themedClass('textClass')"
-    :buttonsContainerClass="themedClass('buttonsContainerClass')"
-    :mediaContainerClass="themedClass('mediaContainerClass')"
-    :mediaClass="themedClass('mediaClass')"
-    :figcaptionClass="themedClass('figcaptionClass')"
-    :elementClass="themedClass('elementClass')"
+    :color-ccheme="colorScheme"
+    :has-decorative-line="false"
+    :reverse-columns="reverseColumns"
+    :is-editing="isEditing"
+    :image-format="imageFormat"
+    :container-class="themedClass('containerClass')"
+    :first-column-class="themedClass('firstColumnClass')"
+    :second-column-class="themedClass('secondColumnClass')"
+    :pretitle-class="themedClass('pretitleClass')"
+    :title-class="themedClass('titleClass')"
+    :subtitle-class="themedClass('subtitleClass')"
+    :text-class="themedClass('textClass')"
+    :buttons-container-class="themedClass('buttonsContainerClass')"
+    :media-container-class="themedClass('mediaContainerClass')"
+    :media-class="themedClass('mediaClass')"
+    :figcaption-class="themedClass('figcaptionClass')"
+    :element-class="themedClass('elementClass')"
   />
 </template>
 

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

@@ -22,14 +22,14 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass')"
-          :titleStyle="titleStyle"
-          :titleWeight="titleWeight"
+          :title-class="themedClass('titleClass')"
+          :title-style="titleStyle"
+          :title-weight="titleWeight"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :colorScheme="colorScheme"
+          :subtitle-class="themedClass('subtitleClass')"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -45,7 +45,7 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
+          :text-class="themedClass('textClass')"
         />
 
         <BlokkliField
@@ -83,12 +83,11 @@
           "
         >
           <li
-            v-for="(item, index) in props.timelineElements"
+            v-for="(title, index) in elementTitles"
             :key="index"
             :class="themedClass('anchorNavigationListItemClass')"
           >
             <button
-              @click="handleAnchorLinkClick(Number(index))"
               :class="
                 cn(
                   themedClass(
@@ -103,8 +102,9 @@
                   },
                 )
               "
+              @click="handleAnchorLinkClick(Number(index))"
             >
-              {{ item?.props?.title }}
+              {{ title }}
             </button>
           </li>
         </ul>
@@ -140,14 +140,14 @@
               "
             >
               <button
-                @click="handleAnchorLinkClick(Number(index))"
                 :class="
                   carouselDot({
                     colorScheme,
                     active: currentIndex === Number(index),
                   })
                 "
-              ></button>
+                @click="handleAnchorLinkClick(Number(index))"
+              />
             </li>
           </ul>
         </div>
@@ -158,9 +158,8 @@
             ref="carouselRef"
             :items="timelineElements || []"
             :arrows="(timelineElements?.length ?? 0) > 1"
-            prevIcon="i-lucide-chevron-left"
-            nextIcon="i-lucide-chevron-right"
-            @select="setCurrentIndex"
+            prev-icon="i-lucide-chevron-left"
+            next-icon="i-lucide-chevron-right"
             :ui="{
               viewport: themedClass('carouselViewportClass', 'pb-10'),
               item: 'basis-full',
@@ -175,6 +174,7 @@
               ),
             }"
             class="overflow-hidden"
+            @select="setCurrentIndex"
           >
             <template #default="{ item }">
               <BlokkliField
@@ -183,7 +183,11 @@
                 :list="[item]"
                 proxy-mode
               >
-                <BlokkliItem v-for="fieldItem in items" v-bind="fieldItem" />
+                <BlokkliItem
+                  v-for="fieldItem in items"
+                  :key="fieldItem.uuid"
+                  v-bind="fieldItem"
+                />
               </BlokkliField>
             </template>
           </UCarousel>
@@ -209,7 +213,7 @@
                 decorativeCircle({ colorScheme }),
               )
             "
-          ></div>
+          />
           <div
             :class="
               cn(
@@ -220,7 +224,7 @@
                 ),
               )
             "
-          ></div>
+          />
           <div
             :class="
               cn(
@@ -231,7 +235,7 @@
                 decorativeCircle({ colorScheme }),
               )
             "
-          ></div>
+          />
         </template>
       </div>
     </DesignSystemAtomsGridRow>
@@ -239,12 +243,33 @@
 </template>
 
 <script lang="ts" setup>
-import type { ParagraphIcmsLayoutTimelineFragment } from '#graphql-operations'
+import type {
+  ParagraphIcmsLayoutTimelineFragment,
+  ParagraphIcmsTimelineElementFragment,
+} from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const props = defineProps<ParagraphIcmsLayoutTimelineFragment>()
 
+/**
+ * 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 timeline elements,
+ * so narrowing on one of their own fields is enough.
+ */
+function isTimelineElement(
+  itemProps: object | null | undefined,
+): itemProps is ParagraphIcmsTimelineElementFragment {
+  return !!itemProps && 'title' in itemProps
+}
+
+const elementTitles = computed(() =>
+  (props.timelineElements || []).map((item) =>
+    isTimelineElement(item?.props) ? item.props.title : undefined,
+  ),
+)
+
 const { options, isEditing } = useAttrs().blokkliData as any
 
 const themedClass = useTheme('ParagraphTimelineLayout')
@@ -457,6 +482,12 @@ const carouselDot = tv({
         'bg-primary-600 border-white',
       ),
     },
+    // Declared without classes of its own — the active state is styled per
+    // colour scheme in the compound variants below.
+    active: {
+      true: '',
+      false: '',
+    },
   },
   compoundVariants: [
     {

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

@@ -1,27 +1,27 @@
 <template>
   <DesignSystemOrganismsTwoColumnTextElement
     :pretitle="pretitle"
-    :pretitleClass="themedClass('pretitleClass')"
+    :pretitle-class="themedClass('pretitleClass')"
     :title="title"
-    :titleClass="themedClass('titleClass', 'mb-0')"
-    :titleWeight="titleWeight"
-    :titleStyle="titleStyle"
+    :title-class="themedClass('titleClass', 'mb-0')"
+    :title-weight="titleWeight"
+    :title-style="titleStyle"
     :subtitle="subtitle"
-    :subtitleClass="themedClass('subtitleClass')"
+    :subtitle-class="themedClass('subtitleClass')"
     :text="text"
-    :textClass="themedClass('textClass')"
-    :containerClass="
+    :text-class="themedClass('textClass')"
+    :container-class="
       themedClass('containerClass', twoColumnTextElementClassList)
     "
-    :firstColumnClass="themedClass('firstColumnClass')"
-    :secondColumnClass="themedClass('secondColumnClass')"
-    :titleCompositionFirstContainerClass="
+    :first-column-class="themedClass('firstColumnClass')"
+    :second-column-class="themedClass('secondColumnClass')"
+    :title-composition-first-container-class="
       themedClass('titleCompositionFirstContainerClass')
     "
-    :titleCompositionSecondContainerClass="
+    :title-composition-second-container-class="
       themedClass('titleCompositionSecondContainerClass')
     "
-    :textContainerClass="themedClass('textContainerClass')"
+    :text-container-class="themedClass('textContainerClass')"
   />
 </template>
 
@@ -30,7 +30,7 @@ import type { ParagraphIcms2ColTextElementFragment } from '#graphql-operations'
 
 defineProps<ParagraphIcms2ColTextElementFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData as any
+const { options } = useAttrs().blokkliData as any
 
 const themedClass = useTheme('ParagraphTwoColumnTextElement')
 

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer
     :spacing="spacing"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :class="themedClass('containerClass')"
   >
     <BlokkliField

package/components/Paragraph/iFrame/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -16,11 +16,11 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -34,13 +34,12 @@
         <DesignSystemOrganismsContentBlock
           v-if="text"
           :text="text"
-          :textClass="themedClass('textClass')"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :color-scheme="colorScheme"
         />
 
         <div
           v-if="embed"
-          v-html="embed"
           :class="
             themedClass(
               'embedContainer',
@@ -48,6 +47,7 @@
             )
           "
           :style="{ '--iframe-height': `${props.height || 600}px` }"
+          v-html="embed"
         />
       </div>
     </DesignSystemAtomsGridRow>