@iqual/nuxt-icms 1.3.1 → 1.4.0

package/components/Section/Header/index.vue

@@ -1,216 +1,212 @@
 <template>
   <header
-    ref="container"
-    class="z-30 flex flex-col bg-white"
-    :class="{
-      'max-h-[70px] !overflow-y-hidden 2xl:max-h-screen 2xl:!overflow-y-visible':
-        !isMenuOpen,
-      'max-h-screen overflow-y-auto': isMenuOpen,
-      'fixed size-full max-h-dvh': isGlobalSticky,
-      sticky: !isGlobalSticky,
+    :style="{
+      '--meta-height': metaHeight + 'px',
     }"
-    :style="computedStyle"
+    :class="
+      themedClass(
+        'headerClass',
+        'sticky top-0 z-[101] 2xl:-top-[var(--meta-height)]',
+      )
+    "
   >
-    <!-- Meta menu full-width container -->
-    <!-- Hidden on mobile -->
-    <div class="border-b-1 hidden border-b-gray-100 2xl:block">
-      <!-- Meta menu container -->
-      <DesignSystemAtomsGridRow
-        :class="'w-full max-w-full 2xl:max-w-screen-2xl'"
-      >
-        <div class="col-span-12">
+    <!-- Desktop Meta Container -->
+    <DesignSystemAtomsContainer
+      :spacing="{ top: 'none', bottom: 'none' }"
+      :class="
+        themedClass(
+          'metaContainerClass',
+          'hidden border-b border-gray-100 bg-white 2xl:block',
+        )
+      "
+    >
+      <div ref="metaContainer">
+        <DesignSystemAtomsGridRow
+          :class="
+            themedClass(
+              'metaRowClass',
+              'flex items-center justify-end gap-8 py-2',
+            )
+          "
+        >
+          <div :class="themedClass('metaMenuContainer')">
+            <SectionHeaderMetaMenu />
+          </div>
+          <div :class="themedClass('metaButtonsContainer')">
+            <SectionHeaderButtons :buttons="metaLinks" />
+          </div>
           <div
-            ref="metaRef"
-            class="flex max-w-full items-center justify-end py-4"
+            :class="
+              themedClass(
+                'languageDropdownContainer',
+                'flex h-full items-center',
+              )
+            "
           >
-            <!-- Meta menu -->
-            <SectionHeaderMetaMenu :links="metaLinks" />
-
-            <!-- Desktop Language dropdown -->
-            <SectionHeaderLanguageDropdown
-              class="hidden h-full 2xl:block"
-              @lang-dropdown:change="closeMenu"
-            />
+            <SectionHeaderLanguageDropdown />
           </div>
+        </DesignSystemAtomsGridRow>
+      </div>
+    </DesignSystemAtomsContainer>
+
+    <!-- Main Container -->
+    <DesignSystemAtomsContainer
+      :spacing="{ top: 'none', bottom: 'none' }"
+      :class="
+        themedClass('mainContainerClass', 'border-b border-gray-100 bg-white')
+      "
+    >
+      <DesignSystemAtomsGridRow
+        :class="
+          themedClass('mainRowClass', 'flex h-14 items-center gap-8 2xl:h-20')
+        "
+      >
+        <div :class="themedClass('logoContainer', 'shrink-0')">
+          <SectionHeaderLogo />
+        </div>
+        <div
+          :class="
+            themedClass(
+              'mainMenuContainer',
+              'ml-auto hidden 2xl:flex 2xl:h-full 2xl:items-center',
+            )
+          "
+        >
+          <SectionHeaderDesktopMainMenu />
+        </div>
+        <div :class="themedClass('mainButtonsContainer', 'hidden 2xl:block')">
+          <SectionHeaderButtons :buttons="contactButtons" />
+        </div>
+        <div
+          :class="
+            themedClass(
+              'mainMenuIconContainer',
+              'ml-auto flex items-center justify-center 2xl:hidden',
+            )
+          "
+        >
+          <SectionHeaderMenuIcon :is-in-closable-state="isMobileMenuOpen" />
         </div>
       </DesignSystemAtomsGridRow>
-    </div>
-
-    <!-- Main menu full-width container -->
-    <div class="border-b-1 h-[70px] shrink-0 border-b-gray-100 2xl:h-[110px]">
-      <!-- Main menu container -->
-      <div
-        class="flex h-full max-w-full items-center justify-between 2xl:justify-start"
+    </DesignSystemAtomsContainer>
+
+    <!-- Mobile Menu Overlay -->
+    <Teleport to="body">
+      <Transition
+        @after-enter="clickAwayArmed = true"
+        @after-leave="clickAwayArmed = false"
+        :enter-active-class="
+          themedClass(
+            'transitionEnterActiveClass',
+            'transition-opacity duration-200 md:motion-safe:transition-transform md:motion-safe:duration-300',
+          )
+        "
+        :enter-from-class="
+          themedClass(
+            'transitionEnterFromClass',
+            'opacity-0 md:opacity-100 md:translate-x-full',
+          )
+        "
+        :enter-to-class="
+          themedClass(
+            'transitionEnterToClass',
+            'opacity-100 md:opacity-100 md:translate-x-0',
+          )
+        "
+        :leave-active-class="
+          themedClass(
+            'transitionLeaveActiveClass',
+            'transition-opacity duration-200 md:motion-safe:transition-transform md:motion-safe:duration-300',
+          )
+        "
+        :leave-from-class="
+          themedClass(
+            'transitionLeaveFromClass',
+            'opacity-100 md:opacity-100 md:translate-x-0',
+          )
+        "
+        :leave-to-class="
+          themedClass(
+            'transitionLeaveToClass',
+            'opacity-0 md:opacity-100 md:translate-x-full',
+          )
+        "
       >
-        <DesignSystemAtomsGridRow
-          :class="'w-full max-w-full 2xl:max-w-screen-2xl'"
+        <DesignSystemAtomsContainer
+          v-show="isMobileMenuOpen"
+          :spacing="{ top: 'none', bottom: 'none' }"
+          v-click-away="clickAwayArmed && close"
+          :class="
+            themedClass(
+              'mobileMenuContainerClass',
+              'fixed inset-0 z-[102] flex h-dvh items-start justify-center overflow-y-auto bg-white md:left-auto md:w-[420px]',
+            )
+          "
         >
-          <div class="col-span-12 flex flex-nowrap justify-between">
-            <!-- Logo -->
-            <NuxtLink :to="`/${currentLanguage}`" :title="companyName" prefetch>
-              <Media
-                v-if="companyLogo"
-                :media="companyLogo"
-                mediaClass="h-10 2xl:h-16"
-              />
-            </NuxtLink>
-
-            <!-- Desktop Main navigation menu -->
-            <!-- Hidden on mobile -->
-            <SectionHeaderGlobalMenu
-              class="ml-auto hidden 2xl:block"
-              @menu:link-click="closeMenu"
-            />
-
-            <!-- Desktop Contact button -->
-            <!-- Hidden on mobile -->
+          <DesignSystemAtomsGridRow
+            :class="
+              themedClass(
+                'mobileMenuRowClass',
+                'flex w-full flex-col gap-10 pb-20',
+              )
+            "
+          >
             <div
-              v-if="contactButtons?.length"
-              class="ml-8 hidden items-center justify-center gap-8 2xl:flex"
+              :class="
+                themedClass(
+                  'mobileMenuHeaderContainer',
+                  'flex h-14 items-center',
+                )
+              "
             >
-              <DesignSystemAtomsButton
-                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"
+              <SectionHeaderLogo
+                :class="themedClass('mobileMenuLogoClass', 'md:hidden')"
               />
+              <SectionHeaderMenuIcon :is-in-closable-state="isMobileMenuOpen" />
             </div>
-
-            <!-- Hamburger menu -->
-            <!-- Hidden on desktop -->
-            <button
-              class="flex items-center gap-3 leading-none 2xl:hidden"
-              aria-label="Hamburger Menu"
-              @click="toggleNav"
-            >
-              <span
-                class="h-auto leading-none opacity-100"
-                :class="{
-                  'duration-250 opacity-0 transition-all ease-in-out':
-                    isMenuOpen,
-                }"
-              />
-              <SectionHeaderMenuIcon :is-in-closable-state="isMenuOpen" />
-            </button>
-          </div>
-        </DesignSystemAtomsGridRow>
-      </div>
-    </div>
-
-    <!-- Mobile Main/Meta menu container -->
-    <!-- Hidden on desktop -->
-    <!-- Initially hidden by overflow when menu closed -->
-    <div class="container w-full max-w-full 2xl:hidden">
-      <!-- Mobile Main navigation menu -->
-      <SectionHeaderGlobalMenu @menu:link-click="closeMenu" />
-
-      <!-- Mobile Language dropdown -->
-      <SectionHeaderLanguageSwitcher
-        @lang-dropdown:change="closeMenu"
-        class="mb-6"
-      />
-
-      <!-- Mobile Meta menu -->
-      <SectionHeaderMetaMenu
-        :links="metaLinks"
-        @lang-dropdown:change="closeMenu"
-      />
-
-      <!-- Mobile Contact button -->
-      <div v-if="contactButtons?.length" class="flex gap-8 2xl:ml-8">
-        <DesignSystemAtomsButton
-          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>
+            <SectionHeaderMobileMainMenu />
+            <SectionHeaderButtons :buttons="contactButtons" />
+            <SectionHeaderMetaMenu />
+            <SectionHeaderButtons :buttons="metaLinks" />
+            <SectionHeaderLanguageLinks />
+          </DesignSystemAtomsGridRow>
+        </DesignSystemAtomsContainer>
+      </Transition>
+    </Teleport>
   </header>
 </template>
 
 <script lang="ts" setup>
-const { companyLogo, companyName, contactButtons, metaLinks } =
-  await useGlobalConfig()
-
-const container = ref<HTMLElement | null>(null)
-const metaRef = useTemplateRef('metaRef')
-const metaHeight = ref<number | null>()
-const isGlobalSticky = ref(false)
-const isMenuOpen = ref(false)
-const isMetaHidden = ref(false)
+const { metaLinks, contactButtons } = await useGlobalConfig()
+const themedClass = useTheme()
+const { close, onOpen, onClose } = useMobileMenuOverlayBus()
 const viewport = useViewport()
-const { isMobile } = useIsMobile()
-const currentLanguage = useCurrentLanguage()
-const drupalUser = useDrupalUser()
-const isUserLoggedIn = drupalUser.value.accessToolbar
 
-onMounted(() => {
-  if (metaRef.value) {
-    metaHeight.value = metaRef.value.getBoundingClientRect().height
-  }
-})
+const isMobileMenuOpen = ref(false)
+const clickAwayArmed = ref(false)
 
-const computedStyle = computed(() => {
-  let style = null
-  if (!isMobile.value && isUserLoggedIn) {
-    style = { top: `-${metaHeight.value}px` }
-  } else {
-    style = { top: 0 }
-  }
-  return style
-})
-
-const emit = defineEmits([
-  'menu:open',
-  'menu:close:start',
-  'menu:close:finished',
-])
-
-function toggleNav() {
-  if (!isMenuOpen.value) {
-    openMenu()
-  } else {
-    closeMenu()
-  }
-}
-
-function openMenu() {
-  emit('menu:open')
-  isMenuOpen.value = true
-  isGlobalSticky.value = true
-}
-
-function closeMenu() {
-  emit('menu:close:start')
-  isMenuOpen.value = false
-  if (container.value) {
-    container.value.scrollTop = 0
-  }
+const metaContainer = ref<HTMLElement | null>(null)
+const metaHeight = ref(0)
 
-  setTimeout(() => {
-    emit('menu:close:finished')
-    isGlobalSticky.value = false
-  }, 250)
-}
+onOpen(() => {
+  isMobileMenuOpen.value = true
+  document.body.classList.toggle('overflow-y-hidden', isMobileMenuOpen.value)
+})
 
-function hideMeta() {
-  isMetaHidden.value = true
-}
+onClose(() => {
+  isMobileMenuOpen.value = false
+  document.body.classList.toggle('overflow-y-hidden', isMobileMenuOpen.value)
+})
 
 watch(viewport.breakpoint, (newValue: string) => {
   if (newValue === '2xl') {
-    isMenuOpen.value = false
+    isMobileMenuOpen.value = false
   }
 })
+
+onMounted(() => {
+  requestAnimationFrame(() => {
+    metaHeight.value = metaContainer.value?.offsetHeight ?? 0
+  })
+})
 </script>

package/composables/useMenu.ts

@@ -48,7 +48,7 @@ export async function useMenu(menuName: MenuName) {
     return null
   })
 
-  const menuTiemActiveLevel3 = computed(() => {
+  const menuItemActiveLevel3 = computed(() => {
     const activeSubtree = menuItemActiveLevel2.value?.children
     if (activeSubtree) {
       return activeSubtree.find((l) => isLinkTreeActive(l, currentRoute.path))
@@ -61,6 +61,6 @@ export async function useMenu(menuName: MenuName) {
     menuItemActive,
     menuItemActiveLevel1,
     menuItemActiveLevel2,
-    menuTiemActiveLevel3,
+    menuItemActiveLevel3,
   }
 }

package/composables/useMobileMenuOverlayBus.ts

@@ -0,0 +1,44 @@
+/**
+ * Mobile Menu Overlay Bus Composable
+ *
+ * Emits open/close events globally using a reactive event key.
+ */
+
+import { ref, watch } from 'vue'
+
+export enum MobileMenuOverlayEvent {
+  Open = 'open',
+  Close = 'close'
+}
+
+const mobileMenuOverlayBus = ref<MobileMenuOverlayEvent | null>(null)
+
+function open() {
+  mobileMenuOverlayBus.value = MobileMenuOverlayEvent.Open
+}
+
+function close() {
+  mobileMenuOverlayBus.value = MobileMenuOverlayEvent.Close
+}
+
+function onOpen(callback: () => void) {
+  watch(mobileMenuOverlayBus, (val) => {
+    if (val === MobileMenuOverlayEvent.Open) callback()
+  })
+}
+
+function onClose(callback: () => void) {
+  watch(mobileMenuOverlayBus, (val) => {
+    if (val === MobileMenuOverlayEvent.Close) callback()
+  })
+}
+
+export function useMobileMenuOverlayBus() {
+  return {
+    bus: mobileMenuOverlayBus,
+    open,
+    close,
+    onOpen,
+    onClose,
+  }
+}

package/composables/useNavigationOffset.ts

@@ -1,7 +1,7 @@
 import { useIsMobile } from './useIsMobile'
 
-const mobileNavHeight: number = 73
-const desktopNavHeight: number = 114
+const mobileNavHeight: number = 60 // actual height + 4
+const desktopNavHeight: number = 85 // actual height + 4
 
 export function useNavigationOffset(): { navigationOffset: ComputedRef<number> } {
   const { isMobile } = useIsMobile()

package/composables/useTheme.ts

@@ -0,0 +1,107 @@
+import { getCurrentInstance } from 'vue'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+/**
+ * Helper function that extracts a component name from a file path by converting the path structure to a component identifier.
+ * 
+ * @param filePath - The full file path of the component
+ * @returns The component name derived from the path (e.g., "Section/Header/index.vue" becomes "SectionHeader")
+ */
+function getComponentName(filePath: string): string {
+  if (!filePath.includes('/components/')) return 'Unknown'
+
+  return filePath.substring(filePath.indexOf('/components/') + 12)
+    .replace(/\.(vue|tsx?|jsx?)$/, '')
+    .replace(/\/index$/, '')
+    .split('/').join('')
+}
+
+interface UseThemeOptions {
+  componentName?: string
+  themeName?: string
+}
+
+/**
+ * A composable that provides theme-aware class generation for Vue components.
+ * Automatically detects the calling component and merges theme classes with component props and default classes.
+ * 
+ * @param options - Configuration options for the theme
+ * @param options.componentName - Optional component name to manually override auto-detection
+ * @param options.themeName - The name of the theme to use from app config (defaults to 'default')
+ * @returns A function that generates themed classes for component elements
+ * 
+ * @example
+ * ```vue
+ * <template>
+ *   <button :class="theme('button', 'px-4 py-2')">
+ *     <span :class="theme('label')">Click me</span>
+ *   </button>
+ * </template>
+ * 
+ * <script setup>
+ * // Auto-detects component name and uses default theme
+ * const theme = useTheme()
+ * 
+ * // Manually set component name
+ * const customTheme = useTheme({ componentName: 'CustomComponent' })
+ * 
+ * // Use a specific theme with auto-detection
+ * const darkTheme = useTheme({ themeName: 'dark' })
+ * 
+ * // Manually set component name with specific theme
+ * const customDarkTheme = useTheme({ 
+ *   componentName: 'CustomComponent', 
+ *   themeName: 'dark' 
+ * })
+ * 
+ * // The returned function merges:
+ * // 1. Default classes passed as second parameter
+ * // 2. Theme classes from app.config.ts
+ * // 3. Component prop classes (e.g., buttonClass, labelClass props)
+ * </script>
+ * ```
+ * 
+ * @remarks
+ * The composable expects theme configuration in app.config.ts structured as:
+ * ```typescript
+ * export default defineAppConfig({
+ *   theme: {
+ *     default: {
+ *       ComponentName: {
+ *         elementName: 'theme-classes-here'
+ *       }
+ *     }
+ *   }
+ * })
+ * ```
+ */
+export function useTheme(options: UseThemeOptions = {}) {
+  const { componentName, themeName = 'default' } = options
+  const instance = getCurrentInstance()
+  const { props } = instance || {}
+  const appConfig = useAppConfig()
+
+  const component = componentName || getComponentName(instance?.type?.__file || '')
+  const componentTheme = (appConfig?.theme as any)?.[themeName]?.[component] ?? {}
+
+  /**
+   * Generates themed classes by merging default classes, theme classes, and component prop classes.
+   * 
+   * @param elementName - The name of the element to style (should match theme config keys and props)
+   * @param defaultClass - Optional default CSS classes to include
+   * @returns Merged CSS class string using the cn() utility
+   * 
+   * @example
+   * ```typescript
+   * // Returns merged classes from theme config, props, and defaults
+   * const buttonClasses = theme('button', 'rounded-lg')
+   * 
+   * // Just use theme and prop classes without defaults  
+   * const labelClasses = theme('label')
+   * ```
+   */
+  return function (elementName: string, defaultClass?: string) {
+    return cn(defaultClass, componentTheme[elementName] as string, props?.[elementName] as string)
+  }
+}
+