@iqual/nuxt-icms 1.3.1 → 1.4.1

package/components/Section/Header/DesktopMainMenuDropdown.vue

@@ -0,0 +1,170 @@
+<template>
+  <li
+    v-for="child in item.children"
+    :key="child.id"
+    @mouseenter="setOpen(child, true)"
+    @mouseleave="setOpen(child, false)"
+    @focusin="setOpen(child, true)"
+    @focusout="setOpen(child, false)"
+    :class="
+      themedClass(
+        'listItemClass',
+        'relative first-of-type:pt-1 last-of-type:pb-1',
+      )
+    "
+  >
+    <component :is="elementType(child)" v-bind="componentAttrs(child)">
+      {{ child.label }}
+
+      <SpriteSymbol
+        v-if="hasSubmenu(child)"
+        name="chevron-down"
+        aria-hidden="true"
+        focusable="false"
+        :class="[
+          themedClass(
+            'dropdownToggleClass',
+            'size-5 shrink-0 -rotate-90 cursor-pointer text-black motion-safe:transition-transform motion-safe:duration-200',
+          ),
+        ]"
+      />
+    </component>
+
+    <Transition
+      :enter-active-class="
+        themedClass(
+          'transitionEnterActiveClass',
+          'transition-opacity duration-200 ease-in-out',
+        )
+      "
+      :enter-from-class="themedClass('transitionEnterFromClass', 'opacity-0')"
+      :enter-to-class="themedClass('transitionEnterToClass', 'opacity-100')"
+      :leave-active-class="
+        themedClass(
+          'transitionLeaveActiveClass',
+          'transition-opacity duration-200 ease-in-out',
+        )
+      "
+      :leave-from-class="themedClass('transitionLeaveFromClass', 'opacity-100')"
+      :leave-to-class="themedClass('transitionLeaveToClass', 'opacity-0')"
+    >
+      <ul
+        v-if="hasSubmenu(child) && isOpen(child)"
+        :id="submenuId(child)"
+        :class="
+          themedClass(
+            'listClass',
+            'absolute left-full top-0 -mt-px w-fit min-w-48 border border-gray-100 bg-white',
+          )
+        "
+      >
+        <DesktopMainMenuDropdown
+          :item="child"
+          :menuItemActive="menuItemActive"
+        />
+      </ul>
+    </Transition>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { MappedMenuLink } from '@iqual/nuxt-icms/plugins/initData'
+import { NuxtLink } from '#components'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const themedClass = useTheme('SectionHeaderDesktopMainMenuDropdown')
+
+const props = defineProps<{
+  item: MappedMenuLink
+  menuItemActive?: MappedMenuLink | undefined
+}>()
+
+const { item, menuItemActive } = props
+
+const hasSubmenu = (child: MappedMenuLink) => (child.children?.length ?? 0) > 0
+
+const submenuId = (child: MappedMenuLink) => `${child.id}-submenu`
+
+const isActive = (child: MappedMenuLink) => menuItemActive?.id === child.id
+
+const openMap = ref<Record<string, boolean>>({})
+const isOpen = (child: MappedMenuLink) => !!openMap.value[child.id]
+const setOpen = (child: MappedMenuLink, val: boolean) =>
+  (openMap.value[child.id] = val)
+
+/**
+ * Determines which element type to render for a menu item.
+ *
+ * @remarks
+ * - Returns `NuxtLink` if the item has a navigation link.
+ * - Returns `'button'` if the item opens a submenu but has no link.
+ * - Returns `'span'` if the item is non-interactive.
+ *
+ * @returns A computed reference containing either `NuxtLink`, `'button'`, or `'span'`.
+ */
+function elementType(child: MappedMenuLink) {
+  if (child.href) return NuxtLink
+  if (hasSubmenu(child)) return 'button'
+  return 'span'
+}
+
+/**
+ * Computes the appropriate HTML or component attributes for a menu item
+ * based on its computed element type.
+ *
+ * @returns A computed object containing attributes specific to the element type,
+ * including accessibility props and themed CSS classes.
+ */
+function componentAttrs(child: MappedMenuLink) {
+  const submenu = hasSubmenu(child)
+  const active = isActive(child)
+
+  switch (elementType(child)) {
+    case NuxtLink:
+      return {
+        id: child.id,
+        to: child.href,
+        rel: child.rel,
+        target: child.target,
+        'aria-haspopup': submenu ? 'menu' : undefined,
+        'aria-expanded': submenu ? isOpen(child) : undefined,
+        'aria-controls': submenu ? submenuId(child) : undefined,
+        'aria-current': active ? 'page' : undefined,
+        tabindex: 0,
+        'exact-active-class': 'text-primary',
+        class: cn(
+          themedClass(
+            'linkClass',
+            'w-full flex items-center justify-between gap-4 px-6 py-3 hover:text-primary duration-200 whitespace-normal break-keep hyphens-none',
+          ),
+          child.additionalClass,
+        ),
+      }
+
+    case 'button':
+      return {
+        id: child.id,
+        type: 'button',
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen(child),
+        'aria-controls': submenuId(child),
+        tabindex: 0,
+        class: themedClass(
+          'buttonClass',
+          'w-full flex items-center justify-between text-left gap-4 px-6 py-3 cursor-default whitespace-normal break-keep hyphens-none',
+        ),
+      }
+
+    default:
+      return {
+        id: child.id,
+        'aria-disabled': true,
+        class: themedClass(
+          'nolinkClass',
+          'text-gray-400 px-6 py-3 flex items-center whitespace-normal break-keep hyphens-none',
+        ),
+      }
+  }
+}
+</script>

package/components/Section/Header/LanguageDropdown.vue

@@ -1,90 +1,121 @@
 <template>
   <ClientOnly>
     <div
-      class="group relative z-40 mb-6 flex h-full items-center 2xl:mb-0 2xl:p-0 2xl:pl-8"
-      @mouseenter="!isMobile && (langSwitchDropdownOpen = true)"
-      @mouseleave="!isMobile && (langSwitchDropdownOpen = false)"
-      @click="isMobile && (langSwitchDropdownOpen = !langSwitchDropdownOpen)"
+      v-click-away="closeDropdown"
+      @keydown.esc="closeDropdown"
+      :class="themedClass('containerClass', 'relative py-2')"
     >
       <button
-        class="flex items-center gap-1"
-        aria-haspopup="true"
-        :aria-expanded="langSwitchDropdownOpen"
+        type="button"
+        aria-haspopup="menu"
+        :aria-expanded="isLangDropdownOpen"
         aria-controls="language-dropdown"
+        @click="toggleDropdown"
+        :class="
+          themedClass(
+            'currentLanguageLinkClass',
+            'flex cursor-pointer flex-nowrap items-center gap-1',
+          )
+        "
       >
-        <span
-          class="group-hover:text-primary-500 motion-safe:duration-250 font-medium motion-safe:transition-colors motion-safe:ease-in-out"
-          :class="{
-            'text-primary-500': langSwitchDropdownOpen,
-          }"
-        >
-          {{ currentLanguage.toUpperCase() }}
-        </span>
+        {{ currentLanguage.toUpperCase() }}
         <SpriteSymbol
           name="chevron-down"
-          class="motion-safe:duration-250 size-4 motion-safe:transition-all motion-safe:ease-in-out"
-          :class="{
-            'rotate-180': langSwitchDropdownOpen,
-          }"
+          :class="[
+            themedClass(
+              'currentLanguageLinkIconClass',
+              'motion-safe:duration-250 size-4 shrink-0 motion-safe:transition-all motion-safe:ease-in-out',
+            ),
+            { 'rotate-180': isLangDropdownOpen },
+          ]"
         />
       </button>
-      <div
-        v-show="langSwitchDropdownOpen"
-        class="motion-safe:duration-250 absolute left-0 top-full pt-2 motion-safe:transition-all motion-safe:ease-in-out 2xl:left-auto 2xl:right-0 2xl:pt-4"
+      <Transition
+        :enter-active-class="
+          themedClass(
+            'transitionEnterActiveClass',
+            'motion-safe:transition-opacity motion-safe:duration-300',
+          )
+        "
+        :enter-from-class="themedClass('transitionEnterFromClass', 'opacity-0')"
+        :enter-to-class="themedClass('transitionEnterToClass', 'opacity-100')"
+        :leave-active-class="
+          themedClass(
+            'transitionLeaveActiveClass',
+            'motion-safe:transition-opacity motion-safe:duration-300',
+          )
+        "
+        :leave-from-class="
+          themedClass('transitionLeaveFromClass', 'opacity-100')
+        "
+        :leave-to-class="themedClass('transitionLeaveToClass', 'opacity-0')"
       >
-        <ul
-          role="menu"
-          id="language-dropdown"
-          class="border border-gray-100 bg-white"
+        <div
+          v-show="isLangDropdownOpen"
+          :class="
+            themedClass(
+              'langDropdownContainerClass',
+              'absolute left-0 top-full -mt-[1px]',
+            )
+          "
         >
-          <li v-for="(lang, i) in links" :key="`lang_${i}`">
-            <NuxtLink
-              v-if="lang.enabled"
-              role="menuitem"
-              :to="lang.to"
-              :title="lang.label"
-              class="hover:text-primary-500 motion-safe:duration-250 flex items-center whitespace-nowrap px-4 py-3 text-sm font-medium motion-safe:transition-all motion-safe:ease-in-out"
-              @click="onLangDropdownLinkClick"
-            >
-              {{ lang.label }}
-            </NuxtLink>
-            <span
-              v-else
-              class="flex items-center whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-100"
+          <ul
+            id="language-dropdown"
+            :class="themedClass('listClass', 'border border-gray-100 bg-white')"
+          >
+            <li
+              v-for="(lang, i) in links"
+              :key="`lang_${i}`"
+              :class="themedClass('listItemClass')"
             >
-              {{ lang.label }}
-            </span>
-          </li>
-        </ul>
-      </div>
-      <transition name="fade"> </transition>
+              <NuxtLink
+                v-if="lang.enabled"
+                :to="lang.to"
+                :title="lang.label"
+                :class="
+                  themedClass(
+                    'linkClass',
+                    'hover:text-primary motion-safe:duration-250 flex items-center whitespace-nowrap px-4 py-3 text-sm font-medium motion-safe:transition-all motion-safe:ease-in-out',
+                  )
+                "
+                @click="closeDropdown"
+              >
+                {{ lang.label }}
+              </NuxtLink>
+              <span
+                v-else
+                aria-disabled="true"
+                :class="
+                  themedClass(
+                    'noLinkClass',
+                    'flex cursor-default items-center whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-300',
+                  )
+                "
+              >
+                {{ lang.label }}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </Transition>
     </div>
   </ClientOnly>
 </template>
 
 <script lang="ts" setup>
-const links = useLanguageLinks()
-
-const emit = defineEmits(['lang-dropdown:change'])
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
+const links = useLanguageLinks()
 const currentLanguage = useCurrentLanguage()
-const { isMobile } = useIsMobile()
+const themedClass = useTheme('SectionHeaderLanguageDropdown')
 
-const langSwitchDropdownOpen = ref(false)
+const isLangDropdownOpen = ref(false)
 
-const onLangDropdownLinkClick = () => {
-  emit('lang-dropdown:change')
-  langSwitchDropdownOpen.value = false
+const toggleDropdown = () => {
+  isLangDropdownOpen.value = !isLangDropdownOpen.value
 }
-</script>
 
-<style lang="postcss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-  @apply transition-opacity duration-200 ease-out;
+const closeDropdown = () => {
+  isLangDropdownOpen.value = false
 }
-.fade-enter,
-.fade-leave-active {
-  @apply opacity-0;
-}
-</style>
+</script>

package/components/Section/Header/LanguageLinks.vue

@@ -0,0 +1,39 @@
+<template>
+  <ClientOnly>
+    <div :class="themedClass('containerClass', 'flex items-center')">
+      <ul :class="themedClass('listClass', 'flex gap-4 uppercase')">
+        <li
+          v-for="(lang, i) in links"
+          :key="i"
+          :class="themedClass('listClass')"
+        >
+          <NuxtLink
+            v-if="lang.enabled"
+            :to="lang.to"
+            :class="[
+              themedClass('linkClass', 'block'),
+              { 'text-primary': lang.active },
+            ]"
+            @click="close()"
+          >
+            {{ lang.code }}
+          </NuxtLink>
+          <div
+            v-else
+            :class="themedClass('noLinkClass', 'cursor-default text-gray-400')"
+          >
+            {{ lang.code }}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const { close } = useMobileMenuOverlayBus()
+
+const links = useLanguageLinks()
+const themedClass = useTheme('SectionHeaderLanguageLinks')
+</script>

package/components/Section/Header/Logo.vue

@@ -0,0 +1,24 @@
+<template>
+  <NuxtLink
+    :to="`/${currentLanguage}`"
+    :title="companyName"
+    :class="themedClass('linkClass')"
+    @click="close()"
+    prefetch
+  >
+    <Media
+      v-if="companyLogo"
+      :media="companyLogo"
+      :mediaClass="themedClass('mediaClass', 'h-10 2xl:h-16')"
+    />
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const { companyLogo, companyName } = await useGlobalConfig()
+
+const themedClass = useTheme('SectionHeaderLogo')
+const currentLanguage = useCurrentLanguage()
+const { close } = useMobileMenuOverlayBus()
+</script>

package/components/Section/Header/MainButtons.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-if="contactButtons?.length !== 0"
+    :class="themedClass('containerClass', 'flex flex-col gap-2')"
+  >
+    <DesignSystemAtomsButton
+      v-for="(link, key) in contactButtons"
+      :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"
+      :textAlignment="link?.textAlignment"
+      :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
+      :labelClass="themedClass('labelClass')"
+      :sublineClass="themedClass('sublineClass')"
+      @click="close()"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const { contactButtons } = await useGlobalConfig()
+const themedClass = useTheme('SectionHeaderMainButtons')
+const { close } = useMobileMenuOverlayBus()
+</script>

package/components/Section/Header/MenuIcon.vue

@@ -1,60 +1,72 @@
 <template>
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    class="size-6 overflow-visible text-black"
-    aria-hidden
+  <button
+    :class="themedClass('hamburgerMenu', 'hamburger-menu ml-auto block')"
+    :aria-label="
+      $texts('mobile_main_menu.hamburger_menu_aria_label', 'Hamburger Menu')
+    "
+    @click="isInClosableState ? close() : open()"
   >
-    <rect
-      width="22"
-      height="2"
-      rx="2"
-      x="2"
-      y="4"
-      fill="currentColor"
-      stroke-width="0"
-      transform-origin="12.5 5"
-      :class="{
-        'close-icon-top-forwards': isInClosableState,
-        'close-icon-top-backwards': !isInClosableState,
-      }"
-    />
-    <rect
-      width="22"
-      height="2"
-      rx="2"
-      x="2"
-      y="11"
-      fill="currentColor"
-      stroke-width="0"
-      transform-origin="12.5 12"
-      :class="{
-        'close-icon-center-forwards': isInClosableState,
-        'close-icon-center-backwards': !isInClosableState,
-      }"
-    />
-    <rect
-      width="22"
-      height="2"
-      rx="2"
-      x="2"
-      y="18"
-      fill="currentColor"
-      stroke-width="0"
-      transform-origin="12.5 19"
-      :class="{
-        'close-icon-bottom-forwards': isInClosableState,
-        'close-icon-bottom-backwards': !isInClosableState,
-      }"
-    />
-  </svg>
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="size-6 overflow-visible text-black"
+      aria-hidden
+    >
+      <rect
+        width="22"
+        height="2"
+        rx="2"
+        x="2"
+        y="4"
+        fill="currentColor"
+        stroke-width="0"
+        transform-origin="12.5 5"
+        :class="{
+          'close-icon-top-forwards': isInClosableState,
+          'close-icon-top-backwards': !isInClosableState,
+        }"
+      />
+      <rect
+        width="22"
+        height="2"
+        rx="2"
+        x="2"
+        y="11"
+        fill="currentColor"
+        stroke-width="0"
+        transform-origin="12.5 12"
+        :class="{
+          'close-icon-center-forwards': isInClosableState,
+          'close-icon-center-backwards': !isInClosableState,
+        }"
+      />
+      <rect
+        width="22"
+        height="2"
+        rx="2"
+        x="2"
+        y="18"
+        fill="currentColor"
+        stroke-width="0"
+        transform-origin="12.5 19"
+        :class="{
+          'close-icon-bottom-forwards': isInClosableState,
+          'close-icon-bottom-backwards': !isInClosableState,
+        }"
+      />
+    </svg>
+  </button>
 </template>
 
 <script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 defineProps<{
   isInClosableState: boolean
 }>()
+
+const themedClass = useTheme('SectionHeaderMenuIcon')
+const { close, open } = useMobileMenuOverlayBus()
 </script>
 
 <style lang="postcss">

package/components/Section/Header/MetaButtons.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-if="metaLinks?.length !== 0"
+    :class="themedClass('containerClass', 'flex flex-col gap-2')"
+  >
+    <DesignSystemAtomsButton
+      v-for="(link, key) in metaLinks"
+      :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"
+      :textAlignment="link?.textAlignment"
+      :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
+      :labelClass="themedClass('labelClass')"
+      :sublineClass="themedClass('sublineClass')"
+      @click="close()"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const { metaLinks } = await useGlobalConfig()
+const themedClass = useTheme('SectionHeaderMetaButtons')
+const { close } = useMobileMenuOverlayBus()
+</script>