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

package/components/Media/Image/index.vue

@@ -4,31 +4,37 @@
       v-if="imageSources.length === 1"
       :srcset="imageSources[0]?.srcset"
       :sizes="imageSources[0]?.sizes"
+      :width="imageSources[0]?.width"
+      :height="imageSources[0]?.height"
       :alt="media?.alt?.alt"
       :title="media?.title"
       :src="placeHolderImage"
       :loading="imageLoading"
       :class="themedClass('elementClass', 'w-full')"
     />
-    <source
-      v-if="imageSources.length > 1"
-      v-for="(source, key) in imageSources"
-      :key="key"
-      :srcset="source.srcset"
-      :media="source.media"
-    />
-    <img
-      v-if="imageSources.length > 1"
-      :src="placeHolderImage"
-      :alt="media?.alt?.alt"
-      :title="media?.title"
-      :loading="imageLoading"
-      :class="themedClass('elementClass', 'w-full')"
-    />
+    <template v-if="imageSources.length > 1">
+      <source
+        v-for="(source, key) in imageSources"
+        :key="key"
+        :srcset="source.srcset"
+        :media="source.media"
+        :width="source.width"
+        :height="source.height"
+      />
+      <img
+        :src="placeHolderImage"
+        :width="fallbackSource?.width"
+        :height="fallbackSource?.height"
+        :alt="media?.alt?.alt"
+        :title="media?.title"
+        :loading="imageLoading"
+        :class="themedClass('elementClass', 'w-full')"
+      />
+    </template>
     <figcaption
       v-if="showCaption && media?.caption"
-      v-text="media?.caption"
       :class="themedClass('figcaptionClass', 'mt-2 text-center italic')"
+      v-text="media?.caption"
     />
   </picture>
 </template>
@@ -73,7 +79,7 @@ const imageAspectRatios = computed(() => {
     return ''
   }
 
-  return
+  return ''
 })
 
 const { placeHolderImage, imageSources } = useImageSources({
@@ -81,4 +87,8 @@ const { placeHolderImage, imageSources } = useImageSources({
   imageAspectRatios: imageAspectRatios,
   imageSizes: toRef(props, 'imageSizes'),
 })
+
+// The <img> of a <picture> is used when no <source> matches: the last source
+// carries no media query and covers the widest screens.
+const fallbackSource = computed(() => imageSources.value.at(-1))
 </script>

package/components/Media/RemoteVideo/index.vue

@@ -16,13 +16,13 @@
 
       <button
         v-if="!isPlaying"
-        @click.prevent="isPlaying = true"
         :class="
           themedClass(
             'playButtonClass',
             'relative flex aspect-video w-full cursor-pointer items-center justify-center',
           )
         "
+        @click.prevent="isPlaying = true"
       >
         <img
           :src="thumbnailUrl"
@@ -30,7 +30,7 @@
           :class="
             themedClass(
               'thumbnailClass',
-              'absolute left-0 top-0 aspect-video size-full object-cover',
+              'absolute top-0 left-0 aspect-video size-full object-cover',
             )
           "
         />
@@ -43,8 +43,8 @@
 
       <figcaption
         v-if="showCaption && media?.caption"
-        v-text="media?.caption"
         :class="themedClass('figcaptionClass', 'mt-2 text-center italic')"
+        v-text="media?.caption"
       />
     </figure>
   </VuepalRemoteVideo>

package/components/Media/Video/index.vue

@@ -13,8 +13,8 @@
     </video>
     <figcaption
       v-if="showCaption && media?.caption"
-      v-text="media?.caption"
       :class="themedClass('figcaptionClass', 'mt-2 text-center italic')"
+      v-text="media?.caption"
     />
   </figure>
 </template>

package/components/Node/Icms/Page/SearchResult/fragment.graphql

@@ -7,4 +7,4 @@ fragment nodeIcmsPageSearchResult on NodeIcmsPage {
   link: url {
     path
   }
-}
+}

package/components/Node/Icms/Page/SearchResult/index.vue

@@ -8,5 +8,5 @@
 
 <script lang="ts" setup>
 import type { NodeIcmsPageSearchResultFragment } from '#graphql-operations'
-const props = defineProps<NodeIcmsPageSearchResultFragment>()
-</script>
+defineProps<NodeIcmsPageSearchResultFragment>()
+</script>

package/components/Node/Icms/Page/Teaser/index.vue

@@ -6,7 +6,7 @@
     :title="title || mainTitle"
     :text="text || mainText"
     :link="link"
-    :linkLabel="linkLabel || $texts('teaser.link_label', 'Read more')"
+    :link-label="linkLabel || $texts('teaser.link_label', 'Read more')"
   />
 </template>
 

package/components/Node/Icms/Page/index.vue

@@ -1,7 +1,11 @@
 <template>
   <main>
-    <BlokkliProvider v-slot="{ entity }" v-bind="blokkliProps" :entity="props">
-      <BlokkliField :list="paragraphs" name="field_icms_paragraphs" />
+    <BlokkliProvider v-bind="blokkliProps" :entity="props">
+      <BlokkliField
+        :list="paragraphs"
+        name="field_icms_paragraphs"
+        :allowed-fragments="allowedFragments"
+      />
     </BlokkliProvider>
   </main>
 </template>
@@ -11,6 +15,8 @@ import type { NodeIcmsPageFragment } from '#graphql-operations'
 
 const props = defineProps<NodeIcmsPageFragment>()
 
+const allowedFragments = useAllowedFragments()
+
 // Pass the topics of the article to the context, to be used in Layouts
 provide('topics', props.topics)
 </script>

package/components/Paragraph/Anchor/fragment.graphql

@@ -0,0 +1,4 @@
+fragment paragraphIcmsLayoutAnchor on ParagraphIcmsLayoutAnchor {
+  label: fieldIcmsTitle
+  anchor: fieldIcmsAnchor
+}

package/components/Paragraph/Anchor/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="isEditing"
+    :class="
+      themedClass(
+        'placeholderClass',
+        'flex items-center gap-2 p-4 text-sm text-gray-600',
+      )
+    "
+  >
+    <SpriteSymbol
+      name="anchor"
+      :class="themedClass('iconClass', 'size-6 shrink-0')"
+    />
+    <span>{{ label }}</span>
+    <span v-if="id" :class="themedClass('idClass', 'text-gray-400')">
+      #{{ id }}
+    </span>
+  </div>
+  <div v-else-if="id">
+    <!-- Wrapped, so the attributes blokkli sets on the root element can not
+    override the anchor's own id. -->
+    <span
+      :id="id"
+      :style="{ '--anchor-offset': `${anchorOffset}px` }"
+      :class="themedClass('anchorClass', 'scroll-mt-(--anchor-offset)')"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutAnchorFragment } from '#graphql-operations'
+import type { DefineBlokkliContext } from '#blokkli/types'
+import {
+  resolveAnchorId,
+  useAnchorOffset,
+} from '@iqual/nuxt-icms/composables/useAnchors'
+
+const props = defineProps<ParagraphIcmsLayoutAnchorFragment>()
+
+const themedClass = useTheme('ParagraphAnchor')
+
+const { isEditing } = useAttrs().blokkliData as DefineBlokkliContext
+
+const { anchorOffset } = useAnchorOffset()
+
+const id = computed(() => resolveAnchorId(props.label, props.anchor))
+</script>

package/components/Paragraph/AnchorNavigation/fragment.graphql

@@ -0,0 +1,3 @@
+fragment paragraphIcmsLayoutAnchorNavigation on ParagraphIcmsLayoutAnchorNavigation {
+  id
+}

package/components/Paragraph/AnchorNavigation/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <DesignSystemAtomsContainer
+    v-if="anchors.length"
+    :spacing="{ top: 'none', bottom: 'none' }"
+    :style="{ '--anchor-navigation-top': `${headerOffset}px` }"
+    :class="containerClass"
+  >
+    <DesignSystemAtomsGridRow>
+      <nav
+        :aria-label="
+          $texts('anchor_navigation.nav_aria_label', 'Anchor navigation')
+        "
+        :class="themedClass('navClass', 'col-span-12')"
+      >
+        <ul
+          :class="
+            themedClass('listClass', 'flex flex-nowrap gap-6 overflow-x-auto')
+          "
+        >
+          <li
+            v-for="anchor in anchors"
+            :key="anchor.id"
+            :class="themedClass('listItemClass', 'shrink-0')"
+          >
+            <a
+              :href="`#${anchor.id}`"
+              :aria-current="anchor.id === activeId ? 'true' : undefined"
+              :class="linkClass(anchor.id === activeId)"
+            >
+              {{ anchor.label }}
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+  <div
+    v-else-if="isEditing"
+    :class="
+      themedClass(
+        'placeholderClass',
+        'flex items-center gap-2 p-4 text-sm text-gray-600',
+      )
+    "
+  >
+    <SpriteSymbol
+      name="anchor"
+      :class="themedClass('iconClass', 'size-5 shrink-0')"
+    />
+    {{
+      $texts(
+        'anchor_navigation.editor_empty',
+        'Add anchor blocks to fill this navigation',
+      )
+    }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import type { DefineBlokkliContext } from '#blokkli/types'
+import {
+  resolveAnchorId,
+  useAnchorOffset,
+  type Anchor,
+} from '@iqual/nuxt-icms/composables/useAnchors'
+
+const themedClass = useTheme('ParagraphAnchorNavigation')
+
+const { $texts } = useNuxtApp()
+
+const { isEditing, rootBlocks } = useAttrs().blokkliData as DefineBlokkliContext
+
+const { headerOffset, anchorOffset } = useAnchorOffset()
+const activeId = ref('')
+
+// Anchors retrieved from Blokkli's rootBlocks without querying the DOM.
+// Already in the right order and available during SSR.
+const anchors = computed<Anchor[]>(() =>
+  rootBlocks.value.flatMap((block) => {
+    if (block.bundle !== 'icms_layout_anchor') {
+      return []
+    }
+
+    const label = block.props?.label?.trim() ?? ''
+    const id = resolveAnchorId(label, block.props?.anchor)
+
+    return id ? [{ id, label }] : []
+  }),
+)
+
+// Highlight the last anchor that scrolled past the bottom edge of the sticky bar.
+const updateActive = () => {
+  const line = anchorOffset.value + 1
+
+  activeId.value =
+    anchors.value.findLast((anchor) => {
+      const top = document
+        .getElementById(anchor.id)
+        ?.getBoundingClientRect().top
+
+      return top !== undefined && top <= line
+    })?.id ?? ''
+}
+
+// Throttle to one check per frame.
+let frame = 0
+const scheduleUpdate = () => {
+  if (frame) {
+    return
+  }
+
+  frame = requestAnimationFrame(() => {
+    frame = 0
+    updateActive()
+  })
+}
+
+// Editing the page changes the anchors, so recheck which one is active.
+watch(anchors, updateActive, { flush: 'post' })
+
+onMounted(() => {
+  updateActive()
+  window.addEventListener('scroll', scheduleUpdate, { passive: true })
+  window.addEventListener('resize', scheduleUpdate, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', scheduleUpdate)
+  window.removeEventListener('resize', scheduleUpdate)
+  cancelAnimationFrame(frame)
+})
+
+// Not sticky while editing, it would cover the blocks in the editor canvas.
+const containerClass = computed(() =>
+  cn(
+    themedClass('navigationContainerClass', 'border-b border-gray-100'),
+    isEditing
+      ? ''
+      : themedClass('stickyClass', 'sticky top-(--anchor-navigation-top) z-40'),
+  ),
+)
+
+const linkClass = (isActive: boolean) =>
+  cn(
+    themedClass(
+      'linkClass',
+      'hover:text-primary block py-4 text-sm whitespace-nowrap motion-safe:transition-colors',
+    ),
+    isActive
+      ? themedClass('linkActiveClass', 'text-primary font-semibold')
+      : themedClass('linkInactiveClass', 'text-gray-600'),
+  )
+</script>

package/components/Paragraph/BlokkliFragment/fragment.graphql

@@ -0,0 +1,5 @@
+# Placeholder paragraph for a frontend-defined fragment (defineBlokkliFragment).
+# @blokkli/editor's rendering component resolves the fragment component by `name`.
+fragment paragraphBlokkliFragment on ParagraphBlokkliFragment {
+  name: fieldBlokkliFragmentName
+}

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

@@ -3,7 +3,7 @@ fragment paragraphIcmsButtonElement on ParagraphIcmsButtonElement {
   title: fieldIcmsLinkTitle
   link: fieldIcmsLink {
     uri {
-      path
+      ...linkUrl
     }
   }
   params: fieldIcmsLinkParams

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

@@ -3,13 +3,14 @@
     <DesignSystemAtomsButton
       :label="label"
       :title="title"
-      :link="link?.uri?.path"
+      :link="buttonLink"
       :params="params"
-      :target-blank="targetBlank"
-      :buttonStyle="buttonStyle"
-      :colorScheme="colorScheme"
-      :buttonClass="themedClass('buttonClass')"
-      :labelClass="themedClass('labelClass')"
+      :external="isFileLink"
+      :target-blank="targetBlank || isFileLink"
+      :button-style="buttonStyle"
+      :color-scheme="colorScheme"
+      :button-class="themedClass('buttonClass')"
+      :label-class="themedClass('labelClass')"
     />
   </div>
 </template>
@@ -20,9 +21,13 @@ import type { ParagraphIcmsButtonElementFragment } from '#graphql-operations'
 
 const themedClass = useTheme('ParagraphButtonElement')
 
-const { options, isEditing } = useAttrs().blokkliData as any
+const { options } = useAttrs().blokkliData as any
 
-defineProps<ParagraphIcmsButtonElementFragment>()
+const props = defineProps<ParagraphIcmsButtonElementFragment>()
+
+const resolvedLink = computed(() => resolveLinkUrl(props.link?.uri))
+const isFileLink = computed(() => resolvedLink.value.isFile)
+const buttonLink = computed(() => resolvedLink.value.url)
 
 const buttonStyle = computed(() => {
   return options.value.buttonStyle

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

@@ -22,7 +22,7 @@ const getComponent = (variant: CardVariant) => {
     spotlight: DesignSystemOrganismsSpotlightCard,
     fact: DesignSystemOrganismsFactCard,
   }
-  return components[variant] || FeatureCard
+  return components[variant] || DesignSystemOrganismsFeatureCard
 }
 
 const variant = inject<CardVariant>('variant')

package/components/Paragraph/Card/Layout/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
@@ -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>

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

@@ -2,7 +2,7 @@
   <div v-if="isEditing" :class="title({ colorScheme })">
     <DesignSystemOrganismsContentBlock
       :text="collapsibleTitle"
-      :textClass="themedClass('textClass', 'text-sm mb-3')"
+      :text-class="themedClass('textClass', 'text-sm mb-3')"
     />
     <BlokkliField
       name="field_icms_collapsible_layouts"
@@ -38,7 +38,7 @@ import type { ParagraphIcmsCollapsibleElementFragment } from '#graphql-operation
 
 defineProps<ParagraphIcmsCollapsibleElementFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData as any
+const { isEditing } = useAttrs().blokkliData as any
 
 const themedClass = useTheme('ParagraphCollapsibleElement')
 

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer
     :spacing="spacing"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
@@ -17,9 +17,9 @@
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :titleClass="themedClass('titleClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :title-class="themedClass('titleClass')"
           :subtitle="subtitle"
           :text="text"
         />
@@ -32,7 +32,7 @@
         })
       "
     >
-      <div class="relative col-span-12" v-if="isEditing">
+      <div v-if="isEditing" class="relative col-span-12">
         <BlokkliField
           name="field_icms_collapsible_elements"
           :list="collapsibleElements"
@@ -41,15 +41,15 @@
       </div>
 
       <div
-        :class="themedClass('secondRowColumnClass', 'relative col-span-12')"
         v-else
+        :class="themedClass('secondRowColumnClass', 'relative col-span-12')"
       >
         <template v-if="collapsibleVariant === 'tabs'">
           <UTabs
             v-if="!isMobile"
             :items="tabItems"
             :default-index="0"
-            :unmountOnHide="false"
+            :unmount-on-hide="false"
             variant="link"
             :ui="{
               root: themedClass('tabsClass', 'gap-0'),
@@ -58,7 +58,7 @@
               indicator: tabIndicator({ colorScheme }),
             }"
           >
-            <template #content="{ item, index }">
+            <template #content="{ item }">
               <div :class="themedClass('tabsContentInnerClass', 'py-6')">
                 <BlokkliField
                   name="field_icms_collapsible_elements"
@@ -91,9 +91,9 @@
               content: themedClass('accordionContentClass'),
               trailingIcon: accordionTrailingIcon({ colorScheme }),
             }"
-            @update:modelValue="handleAccordionClick"
+            @update:model-value="handleAccordionClick"
           >
-            <template #content="{ item, index, open }">
+            <template #content="{ item }">
               <div :class="themedClass('accordionContentInnerClass', 'py-6')">
                 <BlokkliField
                   name="field_icms_collapsible_elements"
@@ -127,9 +127,9 @@
               content: accordionContent({ colorScheme }),
               trailingIcon: accordionTrailingIcon({ colorScheme }),
             }"
-            @update:modelValue="handleAccordionClick"
+            @update:model-value="handleAccordionClick"
           >
-            <template #content="{ item, index, open }">
+            <template #content="{ item }">
               <div :class="themedClass('accordionContentInnerClass', 'py-6')">
                 <BlokkliField
                   name="field_icms_collapsible_elements"
@@ -154,12 +154,11 @@
         <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"
+              next-icon="i-lucide-chevron-right"
+              prev-icon="i-lucide-chevron-left"
               :class="themedClass('carouselClass')"
               :ui="{
                 viewport: themedClass('carouselViewportClass', 'pt-8'),
@@ -188,7 +187,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>
@@ -238,8 +241,6 @@ const accordionItems = computed(() => {
 const accordionRef = ref()
 const { scrollToTrigger } = useAccordionScroll()
 
-const carouselIndex = ref(0)
-
 const handleAccordionClick = (
   payload: string | string[] | number | undefined,
 ): void => {