@iqual/nuxt-icms 1.3.1 → 1.4.1

package/components/Search/Input/index.vue

@@ -1,24 +1,25 @@
 <template>
-  <label for="searchterm" class="sr-only">
+  <label for="searchterm" :class="label({ colorScheme })">
     {{ $texts('search.search_field_label', 'Suchbegriff') }}
   </label>
-  <div v-click-away="clickAway" class="relative flex" role="search">
-    <SpriteSymbol
-      name="magnifyingglass"
-      class="absolute left-4 top-1/2 size-5 -translate-y-1/2 text-primary"
-    />
+  <div
+    v-click-away="clickAway"
+    :class="themedClass('containerClass', 'relative flex')"
+    role="search"
+  >
+    <SpriteSymbol name="magnifyingglass" :class="icon({ colorScheme })" />
     <input
       id="searchInput"
-      ref="input"
+      ref="inputElement"
       v-model="searchTermInternal"
       type="search"
       autocomplete="off"
       name="searchterm"
-      :class="inputClass"
+      :class="cn(input({ colorScheme }), inputClass)"
       spellcheck="false"
       role="searchbox"
       aria-owns="searchterm-suggestions"
-      aria-label="Search input"
+      :aria-label="$texts('search.search_field_aria_label', 'Search input')"
       :placeholder="
         $texts('search.search_field_placeholder', 'Suchbegriff eingeben')
       "
@@ -29,19 +30,22 @@
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | null
-    inputClass?: string
-  }>(),
-  {
-    inputClass: 'rounded-lg bg-gray-50 py-3 pr-3 pl-12',
-  },
-)
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const props = defineProps<{
+  modelValue?: string | null
+  inputClass?: string
+  colorScheme?: ColorScheme
+}>()
+
+const themedClass = useTheme('SearchInput')
 
 const searchTermInternal = ref('')
 const isFocused = ref(false)
-const input = ref<HTMLInputElement | null>(null)
+const inputElement = ref<HTMLInputElement | null>(null)
 const { $texts } = useNuxtApp()
 
 const emit = defineEmits(['update:modelValue'])
@@ -61,7 +65,61 @@ function clickAway() {
   isFocused.value = false
 }
 
+const label = tv({
+  base: themedClass('labelBase', 'sr-only'),
+  variants: {
+    colorScheme: {
+      none: themedClass('labelVariantsColorSchemeNone'),
+      dark: themedClass('labelVariantsColorSchemeDark'),
+      light: themedClass('labelVariantsColorSchemeLight'),
+      accent: themedClass('labelVariantsColorSchemeAccent'),
+    },
+  },
+})
+
+const icon = tv({
+  base: themedClass(
+    'iconBase',
+    'absolute left-4 top-1/2 size-5 -translate-y-1/2',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('iconVariantsColorSchemeNone', 'text-primary'),
+      dark: themedClass('iconVariantsColorSchemeDark', 'text-white'),
+      light: themedClass('iconVariantsColorSchemeLight', 'text-primary'),
+      accent: themedClass('iconVariantsColorSchemeAccent', 'text-black'),
+    },
+  },
+})
+
+const input = tv({
+  base: themedClass(
+    'inputBase',
+    'py-3 pl-12 pr-3 focus:outline-none focus-visible:ring-2',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'inputVariantsColorSchemeNone',
+        'bg-gray-50 focus-visible:ring-primary',
+      ),
+      dark: themedClass(
+        'inputVariantsColorSchemeDark',
+        'bg-white focus-visible:ring-primary',
+      ),
+      light: themedClass(
+        'inputVariantsColorSchemeLight',
+        'bg-gray-100 focus-visible:ring-primary',
+      ),
+      accent: themedClass(
+        'inputVariantsColorSchemeAccent',
+        'bg-white focus-visible:ring-white',
+      ),
+    },
+  },
+})
+
 onMounted(() => {
   searchTermInternal.value = props.modelValue || ''
 })
-</script>
+</script>

package/components/Section/Footer/index.vue

@@ -2,52 +2,144 @@
   <footer>
     <DesignSystemAtomsContainer
       :spacing="{ top: 'none', bottom: 'none' }"
-      class="border-y border-y-gray-100 pb-10 pt-16"
+      :class="
+        themedClass('containerClass', 'border-y border-y-gray-100 pb-10 pt-16')
+      "
     >
-      <DesignSystemAtomsGridRow class="grid-cols-3 lg:gap-36">
-        <div class="col-span-3 mb-6 lg:col-span-1">
+      <DesignSystemAtomsGridRow
+        :class="themedClass('rowClass', 'grid-cols-3 lg:gap-36')"
+      >
+        <!-- First column -->
+        <div
+          :class="
+            themedClass('firstColumnClass', 'col-span-3 mb-6 lg:col-span-1')
+          "
+        >
           <Media
             v-if="companyLogo"
             :media="companyLogo"
-            mediaClass="mb-8 w-32"
             imageSizes="xs:128px"
+            :mediaClass="themedClass('mediaClass', 'mb-8 w-32')"
+            :figcaptionClass="themedClass('figcaptionClass')"
+            :elementClass="themedClass('elementClass')"
           />
 
           <DesignSystemOrganismsContentBlock
             :title="companyName"
-            :titleWeight="'h5'"
+            :titleWeight="'p'"
             :titleStyle="'heading-5'"
+            :titleClass="themedClass('companyNameClass')"
             :text="companyDescription"
+            :textClass="themedClass('companyDescriptionClass')"
           />
         </div>
+
+        <!-- Second column -->
         <div
-          class="col-span-3 mb-6 flex flex-col gap-8 lg:col-span-1 lg:flex-row"
+          :class="
+            themedClass(
+              'secondColumnClass',
+              '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.label" />
+          <ul
+            v-for="(link, index) in footerMenuLinks"
+            :key="index"
+            :class="themedClass('listClass')"
+          >
+            <li :class="themedClass('listItemClass', 'mb-4')">
+              <template v-if="link.href">
+                <NuxtLink
+                  :to="link.href"
+                  :title="link.label"
+                  :rel="link.rel"
+                  :target="link.target"
+                  :class="
+                    cn(
+                      themedClass(
+                        'linkClass',
+                        'hover:text-primary transition-colors',
+                      ),
+                      link.additionalClass,
+                    )
+                  "
+                >
+                  {{ link.label }}
+                </NuxtLink>
+              </template>
+              <template v-else>
+                <span
+                  aria-disabled="true"
+                  :class="
+                    themedClass('noLinkClass', 'cursor-default font-bold')
+                  "
+                >
+                  {{ link.label }}
+                </span>
+              </template>
+            </li>
 
+            <!-- Sub-links -->
             <li
-              v-for="(subLink, index) in link?.children"
-              :key="index"
-              class="mb-3 last:mb-0"
+              v-for="(subLink, subIndex) in link?.children"
+              :key="subIndex"
+              :class="themedClass('subListItemClass', 'mb-4 last:mb-0')"
             >
               <NuxtLink
                 v-if="subLink?.href"
-                :to="subLink?.href"
+                :to="subLink.href"
                 :title="subLink.label"
-                class="transition-colors hover:text-primary-500 focus:text-primary-500"
-              >{{ subLink.label }}</NuxtLink>
+                :rel="subLink.rel"
+                :target="subLink.target"
+                :class="
+                  cn(
+                    themedClass(
+                      'subLinkClass',
+                      'hover:text-primary transition-colors',
+                    ),
+                    subLink.additionalClass,
+                  )
+                "
+              >
+                {{ subLink.label }}
+              </NuxtLink>
+              <template v-else>
+                <span
+                  aria-disabled="true"
+                  :class="themedClass('subNoLinkClass', 'cursor-default')"
+                >
+                  {{ subLink.label }}
+                </span>
+              </template>
             </li>
           </ul>
         </div>
-        <div class="col-span-3 mb-6 flex flex-col gap-6 lg:col-span-1">
-          <DesignSystemOrganismsContentBlock :text="address" />
-          <div>
+
+        <!-- Third column -->
+        <div
+          :class="
+            themedClass(
+              'thirdColumnClass',
+              'col-span-3 mb-6 flex flex-col gap-6 lg:col-span-1',
+            )
+          "
+        >
+          <DesignSystemOrganismsContentBlock
+            :text="address"
+            :textClass="themedClass('addressClass')"
+          />
+          <div :class="themedClass('contactInfoContainerClass')">
             <NuxtLink
               v-if="phoneNumber"
               :to="`tel:${phoneNumber}`"
               :title="phoneNumber"
-              class="mb-2 block w-fit font-medium text-black hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-200"
+              :class="
+                themedClass(
+                  'phoneNumberClass',
+                  'hover:text-primary mb-2 block w-fit font-medium text-black motion-safe:transition-colors motion-safe:duration-200',
+                )
+              "
             >
               {{ phoneNumber }}
             </NuxtLink>
@@ -55,7 +147,12 @@
               v-if="emailAddress"
               :to="`mailto:${emailAddress}`"
               :title="emailAddress"
-              class="mb-2 block w-fit font-medium text-black hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-200"
+              :class="
+                themedClass(
+                  'emailAddressClass',
+                  'hover:text-primary mb-2 block w-fit font-medium text-black motion-safe:transition-colors motion-safe:duration-200',
+                )
+              "
             >
               {{ emailAddress }}
             </NuxtLink>
@@ -63,42 +160,82 @@
         </div>
       </DesignSystemAtomsGridRow>
     </DesignSystemAtomsContainer>
+
     <DesignSystemAtomsContainer
       v-if="socialMediaLinks || footerMetaMenuLinks"
       :spacing="{ top: 'none', bottom: 'none' }"
-      class="py-6"
+      :class="themedClass('metaContainerClass', 'py-6')"
     >
-      <DesignSystemAtomsGridRow>
+      <DesignSystemAtomsGridRow :class="themedClass('metaRowClass')">
         <div
-          class="col-span-12 flex flex-col-reverse justify-between gap-6 lg:flex-row"
+          :class="
+            themedClass(
+              'metaColumnClass',
+              'col-span-12 flex flex-col-reverse justify-between gap-6 lg:flex-row',
+            )
+          "
         >
-          <div class="flex gap-4">
+          <div :class="themedClass('socialMediaContainerClass', 'flex gap-4')">
             <template v-for="(link, index) in socialMediaLinks" :key="index">
               <NuxtLink
                 v-if="link?.uri?.path"
                 :to="link?.uri?.path"
                 :title="getSocialMediaIconMeta(link.uri.path).title"
                 target="_blank"
-                class="group"
+                :class="themedClass('socialMediaIconLinkClass', 'group')"
               >
                 <SpriteSymbol
                   v-if="getSocialMediaIconMeta(link.uri.path)?.sprite"
                   :name="getSocialMediaIconMeta(link.uri.path).sprite"
-                  class="size-8 transition-colors group-hover:text-primary-500"
+                  :class="
+                    themedClass(
+                      'socialMediaIconClass',
+                      'group-hover:text-primary size-8 transition-colors',
+                    )
+                  "
                 />
               </NuxtLink>
             </template>
           </div>
-          <div v-if="footerMetaMenuLinks" class="flex items-center">
-            <ul class="flex flex-col gap-4 md:flex-row md:gap-6">
-              <li v-for="(link, index) in footerMetaMenuLinks" :key="index">
+
+          <div
+            v-if="footerMetaMenuLinks"
+            :class="
+              themedClass('footerMetaMenuContainerClass', 'flex items-center')
+            "
+          >
+            <ul
+              :class="
+                themedClass(
+                  'footerMetaMenuListClass',
+                  'flex flex-col gap-4 md:flex-row md:gap-6',
+                )
+              "
+            >
+              <li
+                v-for="(link, index) in footerMetaMenuLinks"
+                :key="index"
+                :class="themedClass('footerMetaMenuListItemClass')"
+              >
                 <NuxtLink
                   v-if="link?.href"
                   :to="link?.href"
                   :title="link.label"
-                  class="underline transition-colors hover:text-primary-500 focus:text-primary-500"
+                  :rel="link.rel"
+                  :target="link.target"
+                  :class="
+                    cn(
+                      themedClass(
+                        'footerMetaMenuLinkClass',
+                        'hover:text-primary focus:text-primary underline transition-colors',
+                      ),
+                      link.additionalClass,
+                    )
+                  "
                   prefetch
-                >{{ link.label }}</NuxtLink>
+                >
+                  {{ link.label }}
+                </NuxtLink>
               </li>
             </ul>
           </div>
@@ -110,7 +247,10 @@
 
 <script lang="ts" setup>
 import type { NuxtSvgSpriteSymbol } from '#nuxt-svg-icon-sprite/runtime'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
+const themedClass = useTheme('SectionFooter')
 const { menuItems: footerMenuLinks } = await useMenu('footerMenu')
 const { menuItems: footerMetaMenuLinks } = await useMenu('footerMetaMenu')
 const {

package/components/Section/Header/Buttons.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    v-if="buttons?.length"
+    :class="themedClass('containerClass', 'flex flex-col gap-2')"
+  >
+    <DesignSystemAtomsButton
+      v-for="(link, key) in buttons"
+      :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'
+
+defineProps<{
+  buttons: any[] | undefined
+}>()
+
+const themedClass = useTheme('SectionHeaderButtons')
+const { close } = useMobileMenuOverlayBus()
+</script>

package/components/Section/Header/DesktopMainMenu.vue

@@ -0,0 +1,160 @@
+<template>
+  <nav
+    :aria-label="$texts('main_menu.nav_aria_label', 'Main navigation')"
+    :class="themedClass('containerClass', 'flex h-full')"
+  >
+    <ul
+      :class="themedClass('listClass', 'flex items-stretch justify-end gap-8')"
+    >
+      <li
+        v-for="item in menuItems"
+        @mouseenter="setOpen(item, true)"
+        @mouseleave="setOpen(item, false)"
+        @focusin="setOpen(item, true)"
+        @focusout="setOpen(item, false)"
+        :class="
+          themedClass('listItemClass', 'relative flex h-full items-stretch')
+        "
+      >
+        <component :is="elementType(item)" v-bind="componentAttrs(item)">
+          {{ item.label }}
+          <SpriteSymbol
+            v-if="hasSubmenu(item)"
+            name="chevron-down"
+            aria-hidden="true"
+            focusable="false"
+            :class="[
+              themedClass(
+                'submenuToggleClass',
+                'size-5 shrink-0 cursor-pointer text-black motion-safe:transition-transform motion-safe:duration-300',
+              ),
+              { 'rotate-180': isOpen(item) },
+            ]"
+          />
+        </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(item) && isOpen(item)"
+            :id="submenuId(item)"
+            :class="
+              themedClass(
+                'listClass',
+                'absolute left-0 top-full w-fit min-w-48 border border-gray-100 bg-white',
+              )
+            "
+          >
+            <DesktopMainMenuDropdown
+              :item="item"
+              :menuItemActive="menuItemActive"
+            />
+          </ul>
+        </Transition>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import type { MappedMenuLink } from '@iqual/nuxt-icms/plugins/initData'
+import { NuxtLink } from '#components'
+import DesktopMainMenuDropdown from './DesktopMainMenuDropdown.vue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const { menuItems, menuItemActive } = await useMenu('mainMenu')
+
+const themedClass = useTheme('SectionHeaderDesktopMainMenu')
+
+const isActive = (item: MappedMenuLink) => menuItemActive.value?.id === item.id
+const hasSubmenu = (item: MappedMenuLink) => (item.children?.length ?? 0) > 0
+const submenuId = (item: MappedMenuLink) => `${item.id}-submenu`
+
+const openMap = ref<Record<string, boolean>>({})
+const isOpen = (item: MappedMenuLink) => !!openMap.value[item.id]
+const setOpen = (item: MappedMenuLink, value: boolean) =>
+  (openMap.value[item.id] = value)
+
+function elementType(item: MappedMenuLink) {
+  if (item.href) return NuxtLink
+  if (item.children?.length) return 'button'
+  return 'span'
+}
+
+function componentAttrs(item: MappedMenuLink) {
+  const type = elementType(item)
+  const active = isActive(item)
+  const submenu = hasSubmenu(item)
+
+  switch (type) {
+    case NuxtLink:
+      return {
+        id: item.id,
+        to: item.href,
+        rel: item.rel,
+        target: item.target,
+        'aria-haspopup': submenu ? 'menu' : undefined,
+        'aria-expanded': submenu ? isOpen(item) : undefined,
+        'aria-controls': submenu ? submenuId(item) : undefined,
+        'aria-current': active ? 'page' : undefined,
+        tabindex: 0,
+        class: cn(
+          themedClass(
+            'linkClass',
+            'flex items-center justify-between gap-1 hover:text-primary duration-200 whitespace-normal break-keep hyphens-none',
+          ),
+          item.additionalClass,
+        ),
+        'exact-active-class': 'text-primary',
+      }
+
+    case 'button':
+      return {
+        id: item.id,
+        type: 'button',
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen(item),
+        'aria-controls': submenuId(item),
+        tabindex: 0,
+        class: themedClass(
+          'buttonClass',
+          'flex items-center justify-between gap-1 cursor-default whitespace-normal break-keep hyphens-none',
+        ),
+      }
+
+    case 'span':
+      return {
+        id: item.id,
+        'aria-disabled': true,
+        class: themedClass(
+          'nolinkClass',
+          'flex items-center text-gray-400 whitespace-normal break-keep hyphens-none',
+        ),
+      }
+
+    default:
+      return {}
+  }
+}
+</script>