@iqual/nuxt-icms 1.2.1 → 1.2.3

package/components/Paragraph/Table/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :subtitle="subtitle"
         />
       </div>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-9">
         <DesignSystemOrganismsContentBlock :text="text" />
       </div>
     </DesignSystemAtomsGridRow>

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

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -12,7 +12,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-9">
         <DesignSystemOrganismsContentBlock
           :text="text"
           :colorScheme="colorScheme"

package/components/Paragraph/Teasers/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-9">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"
@@ -33,7 +33,7 @@ import type { ParagraphIcmsLayoutTeasersFragment } from '#graphql-operations'
 
 const props = defineProps<ParagraphIcmsLayoutTeasersFragment>()
 
-const { options, parentType } = useAttrs().blokkliData
+const { options, parentType } = useAttrs().blokkliData as any
 
 const colorScheme = computed(() => {
   return options.value.colorScheme

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

@@ -1,16 +1,19 @@
 <template>
   <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing" :data-timeline="id">
     <DesignSystemAtomsGridRow v-if="pretitle || title || subtitle || text">
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
           :titleStyle="titleStyle"
           :titleWeight="titleWeight"
           :subtitle="subtitle"
-          :text="text"
           :colorScheme="colorScheme"
-          :hasDecorativeLine="Boolean(subtitle || text)"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-9">
+        <DesignSystemOrganismsContentBlock
+          :text="text"
         />
       </div>
     </DesignSystemAtomsGridRow>

package/components/Paragraph/iFrame/index.vue

@@ -1,11 +1,16 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div :class="textWrapperClassList">
+      <div :class="titleWrapperClassList">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
           :titleWeight="titleWeight"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div :class="textWrapperClassList">
+        <DesignSystemOrganismsContentBlock
           :text="text"
           :colorScheme="colorScheme"
         />
@@ -28,13 +33,22 @@ const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const titleWrapperClassList = computed(() => {
+  if (options.value.textWidth === 'medium') {
+    return ['col-span-8', 'col-start-3']
+  } else if (options.value.textWidth === 'narrow') {
+    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+  }
+  return ['col-span-12']
+})
+
 const textWrapperClassList = computed(() => {
   if (options.value.textWidth === 'medium') {
     return ['col-span-8', 'col-start-3']
   } else if (options.value.textWidth === 'narrow') {
     return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
   }
-  return ['col-span-8']
+  return ['col-span-9']
 })
 
 const colorScheme = computed(() => {

package/components/Section/Footer/index.vue

@@ -24,19 +24,19 @@
           class="col-span-3 mb-6 flex flex-col gap-8 lg:col-span-1 lg:flex-row"
         >
           <ul v-for="(link, index) in footerMenuLinks" :key="index">
-            <p class="mb-5 font-bold" v-text="link.link.label" />
+            <p class="mb-5 font-bold" v-text="link.label" />
 
             <li
-              v-for="(subLink, index) in link.subtree"
+              v-for="(subLink, index) in link?.children"
               :key="index"
               class="mb-3 last:mb-0"
             >
               <NuxtLink
-                v-if="subLink.link.url"
-                :to="subLink.link.url.path"
-                :title="subLink.link.label"
+                v-if="subLink?.href"
+                :to="subLink?.href"
+                :title="subLink.label"
                 class="transition-colors hover:text-primary-500 focus:text-primary-500"
-              >{{ subLink.link.label }}</NuxtLink>
+              >{{ subLink.label }}</NuxtLink>
             </li>
           </ul>
         </div>
@@ -93,12 +93,12 @@
             <ul class="flex flex-col gap-4 md:flex-row md:gap-6">
               <li v-for="(link, index) in footerMetaMenuLinks" :key="index">
                 <NuxtLink
-                  v-if="link.link.url"
-                  :to="link.link.url.path"
-                  :title="link.link.label"
+                  v-if="link?.href"
+                  :to="link?.href"
+                  :title="link.label"
                   class="underline transition-colors hover:text-primary-500 focus:text-primary-500"
                   prefetch
-                >{{ link.link.label }}</NuxtLink>
+                >{{ link.label }}</NuxtLink>
               </li>
             </ul>
           </div>
@@ -109,9 +109,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { NuxtSvgSpriteSymbol } from '../../../../../.nuxt/nuxt-svg-sprite/runtime'
-const initData: Ref<InitData> = await useInitData()
-const { footerMenuLinks, footerMetaMenuLinks, globalConfig } = initData.value
+import type { NuxtSvgSpriteSymbol } from '#nuxt-svg-icon-sprite/runtime'
+
+const { menuItems: footerMenuLinks } = await useMenu('footerMenu')
+const { menuItems: footerMetaMenuLinks } = await useMenu('footerMenu')
 const {
   companyLogo,
   companyName,
@@ -120,7 +121,7 @@ const {
   phoneNumber,
   emailAddress,
   socialMediaLinks,
-} = globalConfig
+} = await useGlobalConfig()
 
 interface SocialMediaIconMeta {
   sprite: NuxtSvgSpriteSymbol

package/components/Section/Header/GlobalMenu.vue

@@ -9,19 +9,19 @@
       class="flex flex-col flex-wrap justify-end text-base lg:h-full lg:flex-row lg:items-center lg:gap-8 lg:border-0 lg:font-medium"
     >
       <li
-        v-for="(link, mainIndex) in links"
+        v-for="(link, mainIndex) in menuItems"
         :key="`global_${mainIndex}`"
         role="menuitem"
         class="group/main relative flex flex-col items-stretch lg:h-full lg:flex-row"
       >
         <VuepalLink
-          :to="link.link?.url?.path"
+          :to="link?.href"
           :aria-controls="'firstLevel-' + mainIndex"
           :aria-expanded="hoverMain === mainIndex"
-          :aria-haspopup="!!link.subtree?.length"
+          :aria-haspopup="!!link.children?.length"
           class="flex w-full items-center justify-between whitespace-nowrap group-hover/main:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:size-auto lg:py-0"
           :class="
-            link.link?.url?.path === currentActiveMainLink?.link.url?.path
+            link?.href === menuItemActive?.href
               ? 'text-primary-500'
               : 'text-black'
           "
@@ -29,7 +29,7 @@
           @mouseleave="!isMobile && onMouseLeave()"
           @click="onLinkClick"
         >
-          {{ link.link.label }}
+          {{ link.label }}
           <div
             class="grid size-10 place-content-center lg:size-auto"
             @click.prevent.stop="
@@ -37,7 +37,7 @@
             "
           >
             <SpriteSymbol
-              v-show="link.subtree.length"
+              v-show="link?.children?.length"
               name="chevron-down"
               :aria-label="
                 isMobile
@@ -57,27 +57,27 @@
         <!-- First level menu -->
         <transition :name="isMobile ? 'slideDown' : 'fade'">
           <div
-            v-show="link.subtree?.length && hoverMain === mainIndex"
+            v-show="link.children?.length && hoverMain === mainIndex"
             :id="'firstLevel-' + mainIndex"
             class="w-max min-w-full lg:absolute lg:left-0 lg:top-full lg:border lg:border-gray-100 lg:bg-white lg:text-sm"
           >
             <ul role="menu" class="ml-4 lg:ml-0">
               <li
-                v-for="(firstLevelLink, firstLevelIndex) in link.subtree"
+                v-for="(firstLevelLink, firstLevelIndex) in link.children"
                 :key="`firstLevel_${firstLevelIndex}`"
                 role="menuitem"
                 class="group/first relative"
                 @mouseleave="!isMobile && onMouseLeave()"
               >
                 <VuepalLink
-                  :to="firstLevelLink.link.url?.path"
+                  :to="firstLevelLink.href"
                   :aria-controls="'secondLevel-' + firstLevelIndex"
                   :aria-expanded="hoverFirst === firstLevelIndex"
-                  :aria-haspopup="!!firstLevelLink.subtree.length"
+                  :aria-haspopup="!!firstLevelLink?.children?.length"
                   class="flex w-full items-center justify-between whitespace-nowrap no-underline group-hover/first:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:px-4 lg:py-3"
                   :class="
-                    firstLevelLink.link?.url?.path ===
-                    activeFirstLevelLink?.link.url?.path
+                    firstLevelLink?.href ===
+                    menuItemActiveLevel1?.href
                       ? 'text-primary-500'
                       : 'text-black'
                   "
@@ -87,7 +87,7 @@
                   @mouseleave="!isMobile && onMouseLeave()"
                   @click="onLinkClick"
                 >
-                  {{ firstLevelLink.link.label }}
+                  {{ firstLevelLink.label }}
                   <div
                     class="grid size-10 place-content-center lg:size-auto"
                     @click.prevent.stop="
@@ -95,7 +95,7 @@
                     "
                   >
                     <SpriteSymbol
-                      v-show="firstLevelLink.subtree.length"
+                      v-show="firstLevelLink?.children?.length"
                       name="chevron-down"
                       :aria-label="
                         isMobile
@@ -117,7 +117,7 @@
                 <transition :name="isMobile ? 'slideDown' : 'fade'">
                   <div
                     v-show="
-                      firstLevelLink.subtree?.length &&
+                      firstLevelLink.children?.length &&
                       hoverFirst === firstLevelIndex
                     "
                     :id="'secondLevel-' + firstLevelIndex"
@@ -127,20 +127,20 @@
                       <li
                         v-for="(
                           secondLevelLink, secondLevelIndex
-                        ) in firstLevelLink.subtree"
+                        ) in firstLevelLink.children"
                         :key="`secondLevel_${secondLevelIndex}`"
                         role="menuitem"
                         class="group/second relative"
                       >
                         <VuepalLink
-                          :to="secondLevelLink.link.url?.path"
+                          :to="secondLevelLink.href"
                           :aria-controls="'thirdLevel-' + secondLevelIndex"
                           :aria-expanded="hoverSecond === secondLevelIndex"
-                          :aria-haspopup="!!secondLevelLink.subtree.length"
+                          :aria-haspopup="!!secondLevelLink?.children?.length"
                           class="flex w-full items-center justify-between whitespace-nowrap no-underline group-hover/second:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:px-4 lg:py-3"
                           :class="
-                            secondLevelLink.link?.url?.path ===
-                            activeSecondLevelLink?.link.url?.path
+                            secondLevelLink?.href ===
+                            menuItemActiveLevel2?.href
                               ? 'text-primary-500'
                               : 'text-black'
                           "
@@ -151,7 +151,7 @@
                           @mouseleave="!isMobile && onMouseLeave()"
                           @click="onLinkClick"
                         >
-                          {{ secondLevelLink.link.label }}
+                          {{ secondLevelLink.label }}
                           <div
                             class="grid size-10 place-content-center lg:size-auto"
                             @click.prevent.stop="
@@ -160,7 +160,7 @@
                             "
                           >
                             <SpriteSymbol
-                              v-show="secondLevelLink.subtree.length"
+                              v-show="secondLevelLink?.children?.length"
                               name="chevron-down"
                               :aria-label="
                                 isMobile
@@ -185,7 +185,7 @@
                         <transition :name="isMobile ? 'slideDown' : 'fade'">
                           <div
                             v-show="
-                              secondLevelLink.subtree?.length &&
+                              secondLevelLink.children?.length &&
                               hoverSecond === secondLevelIndex
                             "
                             :id="'thirdLevel-' + secondLevelIndex"
@@ -195,17 +195,17 @@
                               <li
                                 v-for="(
                                   thirdLevelLink, thirdLevelIndex
-                                ) in secondLevelLink.subtree"
+                                ) in secondLevelLink.children"
                                 :key="`thirdLevel_${thirdLevelIndex}`"
                                 role="menuitem"
                                 class="group/third relative"
                               >
                                 <VuepalLink
-                                  :to="thirdLevelLink.link.url?.path"
+                                  :to="thirdLevelLink.href"
                                   class="flex h-10 w-full items-center whitespace-nowrap no-underline group-hover/third:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:h-auto lg:px-4 lg:py-3"
                                   :class="
-                                    thirdLevelLink.link?.url?.path ===
-                                    activeThirdLevelLink?.link.url?.path
+                                    thirdLevelLink?.href ===
+                                    menuTiemActiveLevel3?.href
                                       ? 'text-primary-500'
                                       : 'text-black'
                                   "
@@ -214,7 +214,7 @@
                                   "
                                   @click="onLinkClick"
                                 >
-                                  {{ thirdLevelLink.link.label }}
+                                  {{ thirdLevelLink.label }}
                                 </VuepalLink>
                               </li>
                             </ul>
@@ -239,12 +239,12 @@ type menuLevel = 'main' | 'first' | 'second' | 'third'
 const globalMenu = ref<HTMLElement | null>(null)
 const { isMobile } = useIsMobile()
 const {
-  links,
-  currentActiveMainLink,
-  activeFirstLevelLink,
-  activeSecondLevelLink,
-  activeThirdLevelLink,
-} = await useMainMenuLinks()
+  menuItems,
+  menuItemActive,
+  menuItemActiveLevel1,
+  menuItemActiveLevel2,
+  menuTiemActiveLevel3,
+} = await useMenu('mainMenu')
 const hoverMain = ref(-1)
 const hoverFirst = ref(-1)
 const hoverSecond = ref(-1)

package/components/Section/Header/MetaMenu.vue

@@ -5,37 +5,35 @@
       class="flex size-full flex-col flex-wrap justify-end text-base lg:flex-row lg:items-center lg:gap-8 lg:font-medium"
     >
       <li
-        v-for="(link, index) in links"
+        v-for="(menuItem, index) in menuItems"
         :key="`meta_${index}`"
         role="menuitem"
         class="group/main relative flex flex-col items-stretch lg:flex-row"
       >
         <VuepalLink
-          :to="link.link?.url?.path"
+          :to="menuItem?.href"
           class="flex w-full items-center justify-between py-1 group-hover/main:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:size-auto lg:py-0"
           :class="
-            link.link?.url?.path === currentActiveMetaLink?.link.url?.path
-              ? 'text-primary-500'
-              : 'text-black'
+            menuItem?.href === menuItemActive?.href ? 'text-primary-500' : 'text-black'
           "
           @click="onLangDropdownLinkClick"
         >
-          {{ link.link.label }}
+          {{ menuItem.label }}
         </VuepalLink>
       </li>
     </ul>
   </nav>
   <div v-if="props.links?.length !== 0" class="mb-8 flex gap-8 lg:mb-0 lg:ml-8">
     <DesignSystemAtomsButton
-      v-for="link in props.links"
-      :key="link.uuid"
-      :label="link?.props?.label"
-      :subline="link?.props?.subline"
-      :title="link?.props?.title"
-      :link="link?.props?.link?.uri?.path"
-      :params="link?.props?.params"
-      :target-blank="link?.props?.targetBlank"
-      :style="link?.props?.buttonStyle"
+      v-for="(link, key) in links"
+      :key="key"
+      :label="link?.label"
+      :subline="link?.subline"
+      :title="link?.title"
+      :link="link?.link?.uri?.path"
+      :params="link?.params"
+      :target-blank="link?.targetBlank"
+      :style="link?.buttonStyle"
       buttonClass="no-underline"
       @click="onLangDropdownLinkClick"
     />
@@ -43,17 +41,17 @@
 </template>
 
 <script setup lang="ts">
-import type { ParagraphIcmsButtonElementFragment } from '#build/graphql-operations'
+import type { GlobalConfigFragment } from '#build/graphql-operations'
 
-const { links, currentActiveMetaLink } = await useMetaMenuLinks()
+const { menuItems, menuItemActive } = await useMenu('metaMenu')
 
 const props = defineProps<{
-  links: Array<ParagraphIcmsButtonElementFragment>
+  links?: GlobalConfigFragment['contactButtons']
 }>()
 
 const emit = defineEmits(['meta:empty', 'lang-dropdown:change'])
 
-if (links.value?.length === 0) {
+if (menuItems.value?.length === 0) {
   emit('meta:empty')
 }
 

package/components/Section/Header/index.vue

@@ -49,7 +49,7 @@
             <!-- Logo -->
             <NuxtLink
               :to="`/${currentLanguage}`"
-              :title="globalConfig.companyName"
+              :title="companyName"
               prefetch
             >
               <Media
@@ -73,15 +73,15 @@
               class="ml-8 hidden items-center justify-center gap-8 lg:flex"
             >
               <DesignSystemAtomsButton
-                v-for="contactButton in contactButtons"
-                :key="contactButton.uuid"
-                :label="contactButton?.props?.label"
-                :subline="contactButton?.props?.subline"
-                :title="contactButton?.props?.title"
-                :link="contactButton?.props?.link?.uri?.path"
-                :params="contactButton?.props?.params"
-                :targetBlank="contactButton?.props?.targetBlank"
-                :style="contactButton?.props?.buttonStyle"
+                v-for="(contactButton, key) in contactButtons"
+                :key="key"
+                :label="contactButton?.label"
+                :subline="contactButton?.subline"
+                :title="contactButton?.title"
+                :link="contactButton?.link?.uri?.path"
+                :params="contactButton?.params"
+                :targetBlank="contactButton?.targetBlank"
+                :style="contactButton?.buttonStyle"
               />
             </div>
 
@@ -125,15 +125,15 @@
       <!-- Mobile Contact button -->
       <div v-if="contactButtons?.length" class="flex gap-8 lg:ml-8">
         <DesignSystemAtomsButton
-          v-for="contactButton in contactButtons"
-          :key="contactButton.uuid"
-          :label="contactButton?.props?.label"
-          :subline="contactButton?.props?.subline"
-          :title="contactButton?.props?.title"
-          :link="contactButton?.props?.link?.uri?.path"
-          :params="contactButton?.props?.params"
-          :targetBlank="contactButton?.props?.targetBlank"
-          :style="contactButton?.props?.buttonStyle"
+          v-for="(contactButton, key) in contactButtons"
+          :key="key"
+          :label="contactButton?.label"
+          :subline="contactButton?.subline"
+          :title="contactButton?.title"
+          :link="contactButton?.link?.uri?.path"
+          :params="contactButton?.params"
+          :targetBlank="contactButton?.targetBlank"
+          :style="contactButton?.buttonStyle"
         />
       </div>
     </div>
@@ -141,9 +141,8 @@
 </template>
 
 <script lang="ts" setup>
-const initData: Ref<InitData> = await useInitData()
-const { globalConfig } = initData.value
-const { companyLogo, contactButtons, metaLinks } = globalConfig
+
+const { companyLogo, companyName, contactButtons, metaLinks } = await useGlobalConfig()
 
 const container = ref<HTMLElement | null>(null)
 const metaRef = useTemplateRef('metaRef')

package/composables/useGlobalConfig.ts

@@ -0,0 +1,57 @@
+
+export async function useGlobalConfig() {
+  const initData = useInitData()
+
+  const companyLogo = computed(() => {
+    return initData.globalConfig.value.companyLogo
+  })
+
+  const companyLogoAlt = computed(() => {
+    return initData.globalConfig.value.companyLogoAlt
+  })
+
+  const companyName = computed(() => {
+    return initData.globalConfig.value.companyName
+  })
+
+  const companyDescription = computed(() => {
+    return initData.globalConfig.value.companyDescription
+  })
+
+  const address = computed(() => {
+    return initData.globalConfig.value.address
+  })
+
+  const phoneNumber = computed(() => {
+    return initData.globalConfig.value.phoneNumber
+  })
+
+  const emailAddress = computed(() => {
+    return initData.globalConfig.value.emailAddress
+  })
+
+  const contactButtons = computed(() => {
+    return initData.globalConfig.value.contactButtons
+  })
+
+  const metaLinks = computed(() => {
+    return initData.globalConfig.value.metaLinks
+  })
+
+  const socialMediaLinks = computed(() => {
+    return initData.globalConfig.value.socialMediaLinks
+  })
+
+  return {
+    companyLogo,
+    companyLogoAlt, 
+    companyName,
+    companyDescription,
+    address,
+    phoneNumber,
+    emailAddress,
+    contactButtons,
+    metaLinks,
+    socialMediaLinks,
+  }
+}

package/composables/useGraphqlCacheability.ts

@@ -0,0 +1,22 @@
+import type { GraphqlResponseTyped } from '#nuxt-graphql-middleware/response'
+import type { H3Event } from 'h3'
+
+export function useGraphqlCacheability(
+  event: H3Event,
+  response?: GraphqlResponseTyped,
+) {
+  if (import.meta.server) {
+    useCDNHeaders((cdn) => {
+      const cacheability = response?.extensions.cacheability
+      if (!cacheability?.isCacheable) {
+        cdn.private()
+        return
+      }
+
+      cdn
+        .public()
+        .setNumeric('sharedMaxAge', cacheability.sharedMaxAge)
+        .addTags(cacheability.tagsCdn)
+    }, event)
+  }
+}