@iqual/nuxt-icms 1.3.0 → 1.4.0

package/components/DesignSystem/Organisms/FlipTeaser.vue

@@ -1,36 +1,54 @@
 <template>
   <div
-    :class="{ 'shadow-custom-small': open }"
-    class="flip-teaser relative col-span-12 aspect-square overflow-hidden rounded-lg transition-shadow duration-300 ease-in-out hover:shadow-custom-small md:col-span-6 xl:col-span-3"
-    @mouseenter="open = true"
-    @mouseleave="open = false"
+    class="flip-teaser relative"
+    :class="[
+      themedClass(
+        'containerClass',
+        'col-span-12 aspect-square md:col-span-6 xl:col-span-3',
+      ),
+    ]"
+    @mouseenter="active = true"
+    @mouseleave="active = false"
   >
     <!-- Image -->
-    <div class="flip-teaser-grid-item">
+    <div :class="themedClass('imageContainerClass', 'flip-teaser-grid-item')">
       <Media
         v-if="image"
         :media="image"
         imageSizes="xs:100vw sm:100vw md:50vw lg:320px"
+        imageAspectRatios="1/1"
+        :mediaClass="themedClass('mediaClass', 'w-full')"
+        :figcaptionClass="themedClass('figcaptionClass')"
+        :elementClass="themedClass('elementClass')"
       />
       <!-- Opaque Overlay -->
-      <div :class="flipTeaserOpaqueOverlay({ colorScheme })" />
+      <div :class="opaqueOverlay({ colorScheme })" />
     </div>
 
     <!-- Title -->
-    <div class="flip-teaser-grid-item relative flex items-end px-6 py-7">
+    <div
+      :class="[
+        themedClass(
+          'titleContainerClass',
+          'flip-teaser-grid-item relative flex items-end px-6 py-7 transition-opacity',
+        ),
+        { 'opacity-0': active },
+      ]"
+    >
       <DesignSystemOrganismsContentBlock
         :title="title"
         :titleWeight="titleWeight"
         :titleStyle="'heading-5'"
-        titleClass="font-semibold mb-0"
+        :titleClass="themedClass('titleClass', 'font-semibold mb-0')"
       />
     </div>
 
     <!-- Overlay -->
     <div
       :class="
-        cn(flipTeaserOverlay({ colorScheme }), {
-          '!cursor-default opacity-100': open,
+        cn(overlay({ colorScheme }), {
+          [themedClass('overlayActiveClass', '!cursor-default opacity-85')]:
+            active,
         })
       "
     >
@@ -38,37 +56,44 @@
       <div>
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          pretitleClass="text-gray-300 font-medium text-base lg:text-base mb-2"
+          :pretitleClass="
+            themedClass(
+              'overlayPretitleClass',
+              'text-gray-300 font-medium text-base lg:text-base mb-2',
+            )
+          "
           :title="title"
+          :titleStyle="'heading-5'"
           :titleWeight="titleWeight"
-          titleClass="mb-2"
+          :titleClass="themedClass('overlayTitleClass', 'mb-2')"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('overlaySubtitleClass')"
           :text="text"
-          textClass="text-sm line-clamp-3"
-          :titleStyle="'heading-5'"
+          :textClass="themedClass('overlayTextClass', 'text-sm line-clamp-3')"
           :colorScheme="colorScheme"
         />
       </div>
 
       <!-- Decorative arrow -->
       <NuxtLink
-        :class="flipTeaserIconWrapper({ colorScheme })"
+        :class="iconWrapper({ colorScheme })"
         :to="link === '' ? language : language + link"
         :title="linkLabel"
       >
-        <SpriteSymbol
-          name="chevron-down"
-          :class="flipTeaserIcon({ colorScheme })"
-        />
+        <SpriteSymbol name="chevron-down" :class="icon({ colorScheme })" />
       </NuxtLink>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
-import type { MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme()
 
 defineProps<{
   image?: MediaFragment
@@ -79,16 +104,31 @@ defineProps<{
   text?: string
   link?: string
   linkLabel?: string
+  containerClass?: string
+  titleContainerClass?: string
+  titleClass?: string
+  imageContainerClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  overlayActiveClass?: string
+  overlayPretitleClass?: string
+  overlayTitleClass?: string
+  overlaySubtitleClass?: string
+  overlayTextClass?: string
 }>()
 
-const flipTeaserOverlay = tv({
-  base: 'flip-teaser-grid-item absolute inset-0 flex cursor-pointer flex-col justify-between gap-4 p-6 opacity-0 transition-opacity duration-300 ease-in-out',
+const overlay = tv({
+  base: themedClass(
+    'overlayBase',
+    'flip-teaser-grid-item absolute inset-0 flex cursor-pointer flex-col justify-between gap-4 p-6 opacity-0 transition-opacity duration-300 ease-in-out',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-gray-50',
-      accent: 'bg-primary-700',
+      none: themedClass('overlayVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('overlayVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('overlayVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass('overlayVariantsColorSchemeAccent', 'bg-primary-700'),
     },
   },
   defaultVariants: {
@@ -96,14 +136,20 @@ const flipTeaserOverlay = tv({
   },
 })
 
-const flipTeaserOpaqueOverlay = tv({
-  base: 'pointer-events-none absolute inset-0 opacity-60',
+const opaqueOverlay = tv({
+  base: themedClass(
+    'opaqueOverlayBase',
+    'pointer-events-none absolute inset-0 opacity-60',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-gray-50',
-      accent: 'bg-primary-700',
+      none: themedClass('opaqueOverlayVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass('opaqueOverlayVariantsColorSchemeDark', 'bg-black'),
+      light: themedClass('opaqueOverlayVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'opaqueOverlayVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
     },
   },
   defaultVariants: {
@@ -111,14 +157,29 @@ const flipTeaserOpaqueOverlay = tv({
   },
 })
 
-const flipTeaserIconWrapper = tv({
-  base: 'group ml-auto grid size-12 shrink-0 cursor-pointer place-content-center rounded-full transition-all',
+const iconWrapper = tv({
+  base: themedClass(
+    'iconWrapperBase',
+    'group ml-auto grid size-12 shrink-0 cursor-pointer place-content-center rounded-full transition-all',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-gray-50 hover:bg-black',
-      dark: 'bg-black hover:bg-white',
-      light: 'bg-gray-100 hover:bg-black',
-      accent: 'bg-primary-600 hover:bg-primary-800',
+      none: themedClass(
+        'iconWrapperVariantsColorSchemeNone',
+        'bg-gray-100 hover:bg-black',
+      ),
+      dark: themedClass(
+        'iconWrapperVariantsColorSchemeDark',
+        'bg-gray-950 hover:bg-white',
+      ),
+      light: themedClass(
+        'iconWrapperVariantsColorSchemeLight',
+        'bg-gray-50 hover:bg-gray-950',
+      ),
+      accent: themedClass(
+        'iconWrapperVariantsColorSchemeAccent',
+        'bg-primary-600 hover:bg-primary-800',
+      ),
     },
   },
   defaultVariants: {
@@ -126,14 +187,26 @@ const flipTeaserIconWrapper = tv({
   },
 })
 
-const flipTeaserIcon = tv({
-  base: 'size-8 -rotate-90 transition-all duration-300 ease-in-out',
+const icon = tv({
+  base: themedClass(
+    'iconBase',
+    'size-8 -rotate-90 transition-all duration-300 ease-in-out',
+  ),
   variants: {
     colorScheme: {
-      none: 'text-black group-hover:text-white',
-      dark: 'text-white group-hover:text-black',
-      light: 'text-black group-hover:text-white',
-      accent: 'text-white',
+      none: themedClass(
+        'iconVariantsColorSchemeNone',
+        'text-black group-hover:text-white',
+      ),
+      dark: themedClass(
+        'iconVariantsColorSchemeDark',
+        'text-white group-hover:text-black',
+      ),
+      light: themedClass(
+        'iconVariantsColorSchemeLight',
+        'text-black group-hover:text-white',
+      ),
+      accent: themedClass('iconVariantsColorSchemeAccent', 'text-white'),
     },
   },
   defaultVariants: {
@@ -141,11 +214,10 @@ const flipTeaserIcon = tv({
   },
 })
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 
-const open = ref(false)
+const active = ref(false)
 const language = ref(useCurrentLanguage())
-
 </script>
 
 <style lang="css" scoped>

package/components/DesignSystem/Organisms/HeaderHero.vue

@@ -0,0 +1,167 @@
+<template>
+  <DesignSystemAtomsContainer
+    :color-scheme="'dark'"
+    :spacing="{ top: '', bottom: '' }"
+    :class="
+      themedClass(
+        'containerClass',
+        'header-grid aspect-square max-h-[1080px] w-full items-center md:aspect-video',
+      )
+    "
+  >
+    <!-- Image -->
+    <Media
+      v-if="image"
+      :media="image"
+      imageSizes="xs:100vw sm:100vw md:100vw lg:100vw"
+      imageAspectRatios="xs:1/1 md:16/9"
+      :mediaClass="
+        themedClass('mediaClass', 'header-grid-item max-h-[1080px] h-full')
+      "
+      :figcaptionClass="themedClass('figcaptionClass')"
+      :elementClass="
+        themedClass('elementClass', 'size-full object-cover object-center')
+      "
+    />
+
+    <!-- Image overlay -->
+    <div
+      v-if="image"
+      :class="
+        themedClass(
+          'imageOverlayClass',
+          'header-grid-item z-10 w-full self-stretch bg-black opacity-50',
+        )
+      "
+    ></div>
+
+    <!-- Content row -->
+    <DesignSystemAtomsGridRow
+      :class="themedClass('rowClass', 'header-grid-item relative z-20 mx-auto')"
+    >
+      <div :class="themedClass('columnClass', 'col-span-12')">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
+          :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
+          titleWeight="h1"
+          colorScheme="dark"
+        />
+
+        <slot name="subtitle">
+          <div
+            :class="
+              themedClass(
+                'metaContainerClass',
+                'mt-4 flex flex-col flex-nowrap justify-between gap-4 lg:mt-10 lg:flex-row lg:items-center',
+              )
+            "
+          >
+            <div
+              v-if="author"
+              :class="
+                themedClass('authorContainerClass', 'flex items-center gap-4')
+              "
+            >
+              <img
+                v-if="author?.userPicture"
+                :src="
+                  author?.userPicture?.entity?.uri?.replace(
+                    'public://',
+                    '/sites/default/files/',
+                  )
+                "
+                :alt="`${$texts('bundle.profile_picture_of', 'Profile picture of') + ' ' + author?.label || author?.name}`"
+                width="64"
+                :class="
+                  themedClass(
+                    'authorImageClass',
+                    'size-12 rounded-full object-cover object-center md:size-16',
+                  )
+                "
+              />
+              <span
+                :class="themedClass('authorNameClass', 'text-lg font-semibold')"
+              >
+                {{ author?.label || author?.name }}
+              </span>
+            </div>
+
+            <div
+              v-if="publishingDate"
+              :class="themedClass('publishingDateContainerClass', 'text-lg')"
+            >
+              <span>
+                {{ $texts('page.published_on', 'Published on') }}
+              </span>
+              <span>{{ ' ' + publishingDate?.first?.formatted }}</span>
+            </div>
+
+            <div :class="themedClass('subtitleContainerClass', 'text-lg')">
+              <span>{{ subtitle }}</span>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import { type MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+defineProps<{
+  title?: string
+  image?: MediaFragment
+  pretitle?: string
+  subtitle?: string
+  publishingDate?: {
+    first?: {
+      value?: string
+      formatted: string
+    }
+  }
+  author?: {
+    id?: string
+    label?: string
+    name?: string
+    userPicture?: {
+      entity?: {
+        uri?: string
+      }
+    }
+  }
+  containerClass?: string
+  rowClass?: string
+  columnClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  imageOverlayClass?: string
+  pretitleClass?: string
+  titleClass?: string
+  subtitleClass?: string
+  metaContainerClass?: string
+  authorContainerClass?: string
+  authorImageClass?: string
+  authorNameClass?: string
+  publishingDateContainerClass?: string
+  subtitleContainerClass?: string
+}>()
+
+const themedClass = useTheme()
+const { $texts } = useNuxtApp()
+</script>
+
+<style scoped>
+.header-grid {
+  display: grid;
+  grid-template-areas: 'content';
+}
+
+.header-grid-item {
+  grid-area: content;
+}
+</style>

package/components/DesignSystem/Organisms/HeaderTextImage.vue

@@ -0,0 +1,71 @@
+<template>
+  <DesignSystemAtomsContainer
+    :spacing="{ top: 'large', bottom: 'large' }"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow
+      :class="themedClass('rowClass', 'flex flex-col-reverse lg:grid')"
+    >
+      <div
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-5')"
+      >
+        <slot name="content">
+          <DesignSystemOrganismsContentBlock
+            :title="title"
+            titleWeight="p"
+            :titleClass="themedClass('titleClass', 'text-h1 mb-4')"
+            :text="description"
+            :textClass="themedClass('textClass', 'text-h6')"
+          />
+        </slot>
+        <slot name="extra"></slot>
+      </div>
+
+      <div
+        :class="
+          themedClass(
+            'secondColumnClass',
+            'col-span-12 md:col-span-5 md:col-start-8',
+          )
+        "
+      >
+        <Media
+          v-if="image"
+          :media="image"
+          imageSizes="xs:100vw sm:100vw md:800px lg:800px"
+          :mediaClass="themedClass('mediaClass')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="
+            themedClass(
+              'elementClass',
+              'aspect-4/3 object-cover object-center rounded-lg',
+            )
+          "
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import { type MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+defineProps<{
+  title?: string
+  image?: MediaFragment
+  description?: string
+  containerClass?: string
+  rowClass?: string
+  firstColumnClass?: string
+  secondColumnClass?: string
+  titleClass?: string
+  subtitleClass?: string
+  textClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+}>()
+
+const themedClass = useTheme()
+</script>

package/components/DesignSystem/Organisms/LogoElement.vue

@@ -1,33 +1,56 @@
 <template>
-  <NuxtLink :class="logoElement({ colorScheme })" :to="link" :title="title">
-    <Media 
+  <NuxtLink
+    :to="link"
+    :title="title"
+    :target="targetBlank ? '_blank' : '_self'"
+    :class="logoElement({ colorScheme })"
+  >
+    <Media
       v-if="logo"
       :media="logo"
-      mediaClass="h-full"
       imageSizes="xs:200px"
+      :mediaClass="themedClass('mediaClass', 'w-full h-full')"
+      :figcaptionClass="themedClass('figcaptionClass')"
+      :elementClass="
+        themedClass('elementClass', 'w-full h-full object-scale-down')
+      "
     />
   </NuxtLink>
 </template>
 
 <script lang="ts" setup>
-import { tv } from 'tailwind-variants'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme()
 
 defineProps<{
   logo?: MediaFragment
   link?: string
   title?: string
-  colorScheme?: string
+  targetBlank?: boolean
+  colorScheme?: ColorScheme
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
 }>()
 
 const logoElement = tv({
-  base: 'flex h-[160px] w-full items-center justify-center rounded-lg bg-white p-8 shadow-custom',
+  base: themedClass(
+    'logoElementBase',
+    'flex h-[160px] w-full items-center justify-center p-8',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass('logoElementVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('logoElementVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('logoElementVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'logoElementVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
     },
   },
   defaultVariants: {

package/components/DesignSystem/Organisms/Map.vue

@@ -10,13 +10,16 @@
         :center="props.center"
         :zoom="props.zoom"
         :height="props.height"
-        >
+      >
         <MglNavigationControl />
 
         <mgl-marker
-          v-for="(location, index) in (locations || [])"
+          v-for="(location, index) in locations || []"
           :key="index"
-          :coordinates="[location.coordinates?.lng || 0, location.coordinates?.lat || 0]"
+          :coordinates="[
+            location.coordinates?.lng || 0,
+            location.coordinates?.lat || 0,
+          ]"
           :color="location.color || props.markerColor"
         >
           <mgl-popup>
@@ -30,6 +33,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+
 interface Location {
   label?: string
   coordinates?: {
@@ -46,7 +51,7 @@ interface Props {
   center?: [number, number]
   height?: string
   locations?: Location[]
-  colorScheme?: string
+  colorScheme?: ColorScheme
   isEditing?: boolean
   markerColor?: string
 }
@@ -56,6 +61,6 @@ const props = withDefaults(defineProps<Props>(), {
   center: () => [8.2267, 46.8011],
   zoom: 12,
   height: '500px',
-  markerColor: '#e95e27'
+  markerColor: '#e95e27',
 })
-</script>
+</script>

package/components/DesignSystem/Organisms/SearchResults.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="themedClass('resultsContainerClass', 'mt-10 md:mt-20')">
+    <p
+      v-if="results && 'label' in results && results.label"
+      :class="themedClass('resultLabelClass', 'h3 mb-4')"
+    >
+      {{ results.label }}
+      <span
+        v-if="results?.count"
+        :class="themedClass('resultCountClass', 'text-base text-gray-500')"
+      >
+        ({{ results.count }})
+      </span>
+    </p>
+    <component
+      v-for="teaser in results?.results"
+      :is="searchComponent(teaser?.bundle!)"
+      v-bind="teaser"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContentSearchQuery } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+type GroupedSearchResults = NonNullable<
+  NonNullable<ContentSearchQuery['searchApiQuery']>['facets']
+>[number]
+
+defineProps<{
+  results: GroupedSearchResults
+}>()
+
+const themedClass = useTheme()
+
+const { $resolveDynamicEntityComponent } = useNuxtApp()
+const searchComponent = (bundle: string) => {
+  return $resolveDynamicEntityComponent(`${bundle}SearchResult`)
+}
+</script>