@iqual/nuxt-icms 1.1.0 → 1.2.2

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/LanguageDropdown.vue

@@ -1,92 +1,79 @@
 <template>
-  <div v-if="languageLinks.length">
-    <ClientOnly>
-      <div
-        class="group relative z-40 mb-6 flex h-full items-center lg:mb-0 lg:p-0 lg:pl-8"
-        @mouseenter="!isMobile && (langSwitchDropdownOpen = true)"
-        @mouseleave="!isMobile && (langSwitchDropdownOpen = false)"
-        @click="isMobile && (langSwitchDropdownOpen = !langSwitchDropdownOpen)"
+  <ClientOnly>
+    <div
+      class="group relative z-40 mb-6 flex h-full items-center lg:mb-0 lg:p-0 lg:pl-8"
+      @mouseenter="!isMobile && (langSwitchDropdownOpen = true)"
+      @mouseleave="!isMobile && (langSwitchDropdownOpen = false)"
+      @click="isMobile && (langSwitchDropdownOpen = !langSwitchDropdownOpen)"
+    >
+      <button
+        class="flex items-center gap-1"
+        aria-haspopup="true"
+        :aria-expanded="langSwitchDropdownOpen"
+        aria-controls="language-dropdown"
       >
-        <button
-          class="flex items-center gap-1"
-          aria-haspopup="true"
-          :aria-expanded="langSwitchDropdownOpen"
-          aria-controls="language-dropdown"
+        <span
+          class="font-medium group-hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-250 motion-safe:ease-in-out"
+          :class="{
+            'text-primary-500': langSwitchDropdownOpen,
+          }"
         >
-          <span
-            class="font-medium group-hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-250 motion-safe:ease-in-out"
-            :class="{
-              'text-primary-500': langSwitchDropdownOpen,
-            }"
-          >
-            {{ currentLanguage.toUpperCase() }}
-          </span>
-          <SpriteSymbol
-            name="chevron-down"
-            class="size-4 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
-            :class="{
-              'rotate-180': langSwitchDropdownOpen,
-            }"
-          />
-        </button>
-        <div
-          v-show="langSwitchDropdownOpen"
-          class="absolute left-0 top-full pt-2 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out lg:left-auto lg:right-0 lg:pt-4"
+          {{ currentLanguage.toUpperCase() }}
+        </span>
+        <SpriteSymbol
+          name="chevron-down"
+          class="size-4 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+          :class="{
+            'rotate-180': langSwitchDropdownOpen,
+          }"
+        />
+      </button>
+      <div
+        v-show="langSwitchDropdownOpen"
+        class="absolute left-0 top-full pt-2 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out lg:left-auto lg:right-0 lg:pt-4"
+      >
+        <ul
+          role="menu"
+          id="language-dropdown"
+          class="border border-gray-100 bg-white"
         >
-          <ul
-            role="menu"
-            id="language-dropdown"
-            class="border border-gray-100 bg-white"
-          >
-            <li v-for="(lang, i) in languageLinks" :key="`lang_${i}`">
-              <NuxtLink
-                role="menuitem"
-                :to="lang.to"
-                :title="getLanguageName(lang.code)"
-                class="flex items-center px-4 py-3 text-sm font-medium hover:text-primary-500 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
-                @click="onLangDropdownLinkClick"
-              >
-                {{ getLanguageName(lang.code) }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-        <transition name="fade"> </transition>
+          <li v-for="(lang, i) in links" :key="`lang_${i}`">
+            <NuxtLink
+              v-if="lang.enabled"
+              role="menuitem"
+              :to="lang.to"
+              :title="lang.label"
+              class="flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap hover:text-primary-500 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+              @click="onLangDropdownLinkClick"
+            >
+              {{ lang.label }}
+            </NuxtLink>
+            <span
+              v-else
+              class="flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap text-gray-100"
+            >
+              {{ lang.label }}
+            </span>
+          </li>
+        </ul>
       </div>
-    </ClientOnly>
-  </div>
+      <transition name="fade"> </transition>
+    </div>
+  </ClientOnly>
+
 </template>
 
 <script lang="ts" setup>
-type LanguageLink = {
-  code: string
-  active: boolean
-  to: string
-}
+
+const links = useLanguageLinks()
 
 const emit = defineEmits(['lang-dropdown:change'])
 
-const languages: ComputedRef<LanguageLink[]> = useLanguageLinks()
 const currentLanguage = useCurrentLanguage()
 const { isMobile } = useIsMobile()
 
-const languageLinks = computed(() => {
-  return languages.value.filter((l) => l.code !== currentLanguage.value)
-})
-
 const langSwitchDropdownOpen = ref(false)
 
-const getLanguageName = (code: string): string => {
-  const languageNames: Record<string, string> = {
-    en: 'English',
-    de: 'Deutsch',
-    fr: 'Français',
-    it: 'Italiano',
-  }
-
-  return languageNames[code] || code
-}
-
 const onLangDropdownLinkClick = () => {
   emit('lang-dropdown:change')
   langSwitchDropdownOpen.value = false

package/components/Section/Header/LanguageSwitcher.vue

@@ -0,0 +1,37 @@
+<template>
+  <ClientOnly>
+    <div class="flex items-center">
+      <ul class="flex uppercase gap-4">
+        <li v-for="(lang, i) in links" :key="i">
+          <NuxtLink
+            v-if="lang.enabled"
+            :to="lang.to"
+            class="hover:text-primary-500 block"
+            :class="{
+              'font-bold': lang.active,
+            }"
+            @click="onLangDropdownLinkClick"
+          >
+            {{ lang.code }}
+          </NuxtLink>
+          <div v-else class="cursor-not-allowed text-gray-300">
+            {{ lang.code }}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(['lang-dropdown:change'])
+const links = useLanguageLinks()
+
+const langSwitchDropdownOpen = ref(false)
+
+const onLangDropdownLinkClick = () => {
+  emit('lang-dropdown:change')
+  langSwitchDropdownOpen.value = false
+}
+</script>
+

package/components/Section/Header/MetaMenu.vue

@@ -5,53 +5,60 @@
       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"
     />
   </div>
 </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'])
+const emit = defineEmits(['meta:empty', 'lang-dropdown:change'])
 
-if (links.value?.length === 0) {
+if (menuItems.value?.length === 0) {
   emit('meta:empty')
 }
+
+const langSwitchDropdownOpen = ref(false)
+
+const onLangDropdownLinkClick = () => {
+  emit('lang-dropdown:change')
+  langSwitchDropdownOpen.value = false
+}
 </script>