@iqual/nuxt-icms 1.3.1 → 1.4.1

package/components/DesignSystem/Molecules/Partnership.vue

@@ -1,34 +1,65 @@
 <template>
   <div :class="partnershipElement({ colorScheme })">
-    <NuxtLink :to="link" :title="title">
+    <NuxtLink
+      :to="link"
+      :title="title"
+      :target="targetBlank ? '_blank' : '_self'"
+      :class="themedClass('linkClass')"
+    >
       <Media
         v-if="logo"
         :media="logo"
         imageSizes="xs:100vw sm:100vw md:50vw lg:580px"
-        mediaClass="h-full"
+        :mediaClass="themedClass('mediaClass', 'h-full')"
+        :figcaptionClass="themedClass('figcaptionClass')"
+        :elementClass="themedClass('elementClass')"
       />
     </NuxtLink>
   </div>
 </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('DesignSystemMoleculesPartnership')
 
 defineProps<{
   logo?: MediaFragment
   link?: string
   title?: string
+  targetBlank?: boolean
+  linkClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
 }>()
 
 const partnershipElement = tv({
-  base: 'flex md:min-h-32 w-1/2 xl:w-auto xl:flex-1 justify-center p-4',
+  base: themedClass(
+    'partnershipElementBase',
+    'flex md:min-h-32 w-1/2 xl:w-auto xl:flex-1 justify-center p-4',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass(
+        'partnershipElementVariantsColorSchemeNone',
+        'bg-gray-50',
+      ),
+      dark: themedClass(
+        'partnershipElementVariantsColorSchemeDark',
+        'bg-gray-900',
+      ),
+      light: themedClass(
+        'partnershipElementBaseVariantsColorSchemeLight',
+        'bg-white',
+      ),
+      accent: themedClass(
+        'partnershipElementBaseVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
     },
   },
   defaultVariants: {
@@ -36,5 +67,5 @@ const partnershipElement = tv({
   },
 })
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 </script>

package/components/DesignSystem/Molecules/Table.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="overflow-x-auto rounded-lg shadow-custom-offset">
+  <div :class="themedClass('containerClass', 'overflow-x-auto')">
     <table
-      class="w-full min-w-[600px] table-auto border-collapse text-left text-sm"
+      :class="
+        themedClass(
+          'tableClass',
+          'w-full min-w-[600px] table-auto border-collapse text-left text-sm',
+        )
+      "
     >
       <thead>
         <tr>
@@ -30,7 +35,7 @@
       </tbody>
       <caption
         v-if="tableData?.value.caption"
-        class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-center text-xs italic"
+        :class="caption({ colorScheme })"
       >
         {{
           tableData?.value.caption
@@ -41,16 +46,27 @@
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemMoleculesTable')
+
+const props = defineProps<{
+  tableData?: Record<string, any>
+  colorScheme?: ColorScheme
+  containerClass?: string
+  tableClass?: string
+}>()
 
 const tr = tv({
-  base: 'border-b last:border-0',
+  base: themedClass('tableTrBase', 'border-b last:border-0'),
   variants: {
     colorScheme: {
-      none: 'border-gray-100',
-      dark: 'border-gray-700',
-      light: 'border-gray-200',
-      accent: 'border-primary-500',
+      none: themedClass('tableTrVariantsColorSchemeNone', 'border-gray-100'),
+      dark: themedClass('tableTrVariantsColorSchemeDark', 'border-gray-700'),
+      light: themedClass('tableTrVariantsColorSchemeLight', 'border-gray-200'),
+      accent: themedClass('tableTrVariantsColorSchemeAccent', 'border-primary'),
     },
   },
   defaultVariants: {
@@ -59,13 +75,28 @@ const tr = tv({
 })
 
 const th = tv({
-  base: 'first:z-1 px-4 py-8 text-center text-sm first:sticky first:left-0 first:min-w-48 even:rounded-t-lg',
+  base: themedClass(
+    'tableThBase',
+    'first:z-1 px-4 py-8 text-center text-sm first:sticky first:left-0 first:min-w-32',
+  ),
   variants: {
     colorScheme: {
-      none: 'odd:bg-white even:bg-gray-50',
-      dark: 'odd:bg-black even:bg-gray-900',
-      light: 'odd:bg-gray-50 even:bg-gray-100',
-      accent: 'odd:bg-primary-600 even:bg-primary-700',
+      none: themedClass(
+        'tableThVariantsColorSchemeNone',
+        'odd:bg-white even:bg-gray-50',
+      ),
+      dark: themedClass(
+        'tableThVariantsColorSchemeDark',
+        'odd:bg-gray-950 even:bg-gray-900',
+      ),
+      light: themedClass(
+        'tableThVariantsColorSchemeLight',
+        'odd:bg-gray-50 even:bg-gray-100',
+      ),
+      accent: themedClass(
+        'tableThVariantsColorSchemeAccent',
+        'odd:bg-primary-600 even:bg-primary-700',
+      ),
     },
   },
   defaultVariants: {
@@ -74,13 +105,52 @@ const th = tv({
 })
 
 const td = tv({
-  base: 'first:z-1 h-14 px-4 py-3 text-center leading-6 first:sticky first:left-0 first:min-w-48 first:max-w-40 first:text-left first:text-sm first:font-bold',
+  base: themedClass(
+    'tableTdBase',
+    'first:z-1 h-14 px-4 py-3 text-center leading-6 first:sticky first:left-0 first:min-w-32 first:max-w-40 first:text-left first:text-sm first:font-bold',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'tableTdVariantsColorSchemeNone',
+        'odd:bg-white even:bg-gray-50',
+      ),
+      dark: themedClass(
+        'tableTdVariantsColorSchemeDark',
+        'odd:bg-gray-950 even:bg-gray-900',
+      ),
+      light: themedClass(
+        'tableTdVariantsColorSchemeLight',
+        'odd:bg-gray-50 even:bg-gray-100',
+      ),
+      accent: themedClass(
+        'tableTdVariantsColorSchemeAccent',
+        'odd:bg-primary-600 even:bg-primary-700',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const caption = tv({
+  base: themedClass(
+    'tableCaptionBase',
+    'absolute -bottom-8 left-1/2 -translate-x-1/2 text-center text-xs italic',
+  ),
   variants: {
     colorScheme: {
-      none: 'odd:bg-white even:bg-gray-50',
-      dark: 'odd:bg-black even:bg-gray-900',
-      light: 'odd:bg-gray-50 even:bg-gray-100',
-      accent: 'odd:bg-primary-600 even:bg-primary-700',
+      none: themedClass('tableCaptionVariantsColorSchemeNone', 'text-gray-400'),
+      dark: themedClass('tableCaptionVariantsColorSchemeDark', 'text-white'),
+      light: themedClass(
+        'tableCaptionVariantsColorSchemeLight',
+        'text-gray-500',
+      ),
+      accent: themedClass(
+        'tableCaptionVariantsColorSchemeAccent',
+        'text-white',
+      ),
     },
   },
   defaultVariants: {
@@ -89,14 +159,9 @@ const td = tv({
 })
 
 const xIcon =
-  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto">><path d="M18 6L6 18M6 6L18 18" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto"><path d="M18 6L6 18M6 6L18 18" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
 const checkIcon =
-  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto;">><path d="M20.5 6L9.5 17L4.5 12" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
-
-const props = defineProps<{
-  tableData?: Record<string, any>
-  colorScheme?: string
-}>()
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto;"><path d="M20.5 6L9.5 17L4.5 12" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
 
 const parseWeight = (weight: any) => {
   const num = parseFloat(weight)

package/components/DesignSystem/Molecules/TitleComposition.vue

@@ -1,28 +1,30 @@
 <template>
-  <div v-if="pretitle || title || subtitle">
+  <div v-if="pretitle || title || subtitle" :class="themedClass('containerClass')">
     <p
       v-if="pretitle"
       :class="
-        cn('mb-2 text-xl font-semibold lg:text-2xl', props.pretitleClass)
+        themedClass('pretitleClass', 'mb-2 text-xl font-semibold lg:text-2xl')
       "
     >
       {{ pretitle }}
     </p>
-    <h1 v-if="title && weight === 'h1'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h1>
-    <h2 v-if="title && weight === 'h2'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h2>
-    <h3 v-if="title && weight === 'h3'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h3>
-    <h4 v-if="title && weight === 'h4'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h4>
-    <h5 v-if="title && weight === 'h5'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h5>
-    <h6 v-if="title && weight === 'h6'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h6>
-    <p v-if="title && weight === 'p'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></p>
-    <p v-if="subtitle" :class="cn('mb-2 font-semibold', props.subtitleClass)">
+    <h1 v-if="title && weight === 'h1'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h1>
+    <h2 v-if="title && weight === 'h2'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h2>
+    <h3 v-if="title && weight === 'h3'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h3>
+    <h4 v-if="title && weight === 'h4'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h4>
+    <h5 v-if="title && weight === 'h5'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h5>
+    <h6 v-if="title && weight === 'h6'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></h6>
+    <p v-if="title && weight === 'p'" :class="themedClass('titleClass', titleClassList)" v-html="title.replace(/\n/g, '<br>')"></p>
+    <p v-if="subtitle" :class="themedClass('subtitleClass', 'mb-2 font-semibold')">
       {{ subtitle }}
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemMoleculesTitleComposition')
 
 const props = withDefaults(
   defineProps<{
@@ -34,6 +36,7 @@ const props = withDefaults(
     subtitleClass?: string
     weight?: string
     style?: string
+    containerClass?: string
   }>(),
   {
     weight: 'h2',
@@ -61,6 +64,6 @@ const titleClassList = computed(() => {
   if (props.style == 'heading-6') {
     classList.push('h6')
   }
-  return classList
+  return classList.join(' ')
 })
 </script>

package/components/DesignSystem/Organisms/ContentBlock.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <div :class="themedClass('containerClass')">
     <DesignSystemMoleculesTitleComposition
       :pretitle="pretitle"
-      :pretitleClass="pretitleClass"
+      :pretitleClass="themedClass('pretitleClass')"
       :title="title"
-      :titleClass="titleClass"
+      :titleClass="themedClass('titleClass')"
       :subtitle="subtitle"
-      :subtitleClass="subtitleClass"
+      :subtitleClass="themedClass('subtitleClass')"
       :weight="titleWeight"
       :style="titleStyle"
     />
@@ -14,31 +14,63 @@
     <DesignSystemMoleculesMediaSlider
       v-if="media && media.length"
       :media="media"
+      imageAspectRatios="4/3"
+      imageSizes="xs:100vw sm:100vw md:50vw lg:50vw"
       :colorScheme="colorScheme"
-      :mediaClass="mediaClass"
-      :sliderClass="mediaSliderClass"
-      :elementClass="mediaElementClass"
+      :mediaClass="themedClass('mediaClass')"
+      :containerClass="themedClass('mediaContainerClass')"
+      :elementClass="themedClass('mediaElementClass')"
     />
 
     <div
       v-if="text"
-      class="ck-content hyphens-auto text-base lg:hyphens-none"
-      :class="cn(textColumnClass, textClass)"
+      :class="
+        cn(
+          themedClass(
+            'textClass',
+            'ck-content hyphens-auto text-base lg:hyphens-none',
+          ),
+          textColumnClass,
+        )
+      "
       v-html="text"
     />
 
     <DesignSystemMoleculesButtonGroup
       :links="links"
       :colorScheme="colorScheme"
-      :wrapperClass="buttonWrapperClass"
+      :containerClass="themedClass('buttonGroupContainerClass')"
       :buttonAlignment="buttonAlignment"
+      :buttonClass="themedClass('buttonClass')"
+      :labelClass="themedClass('labelClass')"
+      :sublineClass="themedClass('sublineClass')"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import cn from '@iqual/nuxt-icms/composables/useCn'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsContentBlock')
+
+type Link = {
+  props: {
+    label?: string
+    subline?: string
+    link?: {
+      uri: {
+        path: string
+      }
+    }
+    params?: string
+    buttonStyle?: string
+    targetBlank?: boolean
+    title?: string
+  }
+}
 
 const props = defineProps<{
   pretitle?: string
@@ -49,17 +81,31 @@ const props = defineProps<{
   subtitleClass?: string
   text?: string
   textClass?: string
-  links?: Array<object>
+  links?: Array<Link>
   buttonAlignment?: string
-  buttonWrapperClass?: string
+  buttonGroupContainerClass?: string
   textColumns?: string
   titleWeight?: string
   titleStyle?: string
   media?: MediaFragment[]
+  imageAspectRatios?: string
+  imageSizes?: string
+  imageLoading?: 'lazy' | 'eager' | undefined
   mediaClass?: string
-  colorScheme?: string
-  mediaSliderClass?: string
+  elementClass?: string
+  figcaptionClass?: string
+  carouselClass?: string
+  carouselContentClass?: string
+  carouselItemClass?: string
+  carouselButtonPrevClass?: string
+  carouselButtonNextClass?: string
+  colorScheme?: ColorScheme
+  mediaContainerClass?: string
   mediaElementClass?: string
+  containerClass?: string
+  buttonClass?: string
+  labelClass?: string
+  sublineClass?: string
 }>()
 
 const textColumnClass = computed(() => {

package/components/DesignSystem/Organisms/FacetedListing.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <DesignSystemAtomsContainer
+      :color-scheme="colorScheme"
+      :spacing="spacing"
+      :class="themedClass('containerClass')"
+    >
+      <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
+        <div
+          :class="
+            themedClass(
+              'firstRowFirstColumnClass',
+              'col-span-12 md:col-span-12',
+            )
+          "
+        >
+          <DesignSystemOrganismsContentBlock
+            :pretitle="pretitle"
+            :pretitleClass="themedClass('pretitleClass')"
+            :title="title"
+            :titleClass="themedClass('titleClass', 'mb-0')"
+            :titleWeight="titleWeight"
+            :titleStyle="titleStyle"
+            :colorScheme="colorScheme"
+          />
+        </div>
+        <div
+          :class="
+            themedClass(
+              'firstRowSecondColumnClass',
+              'col-span-12 md:col-span-9',
+            )
+          "
+        >
+          <DesignSystemOrganismsContentBlock
+            :text="text"
+            :textClass="themedClass('textClass')"
+            :colorScheme="colorScheme"
+          />
+        </div>
+      </DesignSystemAtomsGridRow>
+
+      <DesignSystemAtomsGridRow
+        :class="themedClass('secondRowClass', 'grid-3-col mt-10')"
+      >
+        <div :class="themedClass('secondRowColumnClass', 'col-span-12')">
+          <SearchFacetsFacetedSearchUI
+            :base-filter="baseFilter"
+            :facets="availableFacets"
+            :listing-type="listingType"
+            :manual-filters="manualFilters"
+            :items-per-page="maxResults"
+            :no-results-text="
+              $texts(
+                'listing.no_results',
+                'Currently there is no content available.',
+              )
+            "
+            :loading-text="$texts('listing.loading', 'Loading...')"
+            :load-more-text="$texts('listing.load_more', 'Load more')"
+            :color-scheme="colorScheme"
+            :debug="false"
+          >
+            <template #results="{ results }">
+              <slot name="preResults" :results="results"></slot>
+              <div
+                :class="
+                  themedClass(
+                    'resultsGridClass',
+                    'grid-3-col mx-auto mt-10 grid grid-cols-12 gap-x-6 gap-y-12',
+                  )
+                "
+              >
+                <component
+                  v-for="teaser in results?.results"
+                  :is="teaserComponent(teaser?.bundle)"
+                  v-bind="teaser"
+                />
+              </div>
+            </template>
+          </SearchFacetsFacetedSearchUI>
+        </div>
+      </DesignSystemAtomsGridRow>
+    </DesignSystemAtomsContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const props = withDefaults(
+  defineProps<{
+    colorScheme?: ColorScheme
+    spacing: {
+      top: string
+      bottom: string
+    }
+    pretitle?: string
+    title?: string
+    titleWeight?: string
+    titleStyle?: string
+    text?: string
+    listingType?: string
+    topics?: ({
+      id?: string
+      name?: string
+    } | null)[]
+    availableFacets?: string[]
+    contentTypeFilter?: string[]
+    containerClass?: string
+    firstRowClass?: string
+    firstRowFirstColumnClass?: string
+    firstRowSecondColumnClass?: string
+    secondRowClass?: string
+    secondRowColumnClass?: string
+    pretitleClass?: string
+    titleClass?: string
+    textClass?: string
+    resultsGridClass?: string
+  }>(),
+  {
+    availableFacets: () => ['topics'],
+  },
+)
+
+const themedClass = useTheme('DesignSystemOrganismsFacetedListing')
+const { $texts } = useNuxtApp()
+
+// Helper function to filter valid items
+const filterValidItems = (items?: any[]) =>
+  (items || []).filter(item => item?.id && item?.name) as { id: string; name: string }[]
+
+// Build manual filters object from props for 'manual' listing type
+const manualFilters = computed(() => ({
+  topics: filterValidItems(props.topics),
+}))
+
+// Get the valid listing type
+const listingType = computed(() => {
+  const type = props.listingType
+  if (type === 'all' || type === 'manual' || type === 'contextual') {
+    return type
+  }
+  return 'all' // default fallback
+})
+
+// Configuration for the faceted search
+const baseFilter = computed(() => {
+  if (props?.contentTypeFilter) {
+    return {
+      conditions: [{ field: 'type', value: props?.contentTypeFilter }],
+    }
+  }
+  return {}
+})
+
+// Set the maximum number of teasers to display per "page"
+const maxResults = props.listingType === 'all' ? 12 : 3
+
+const { $resolveDynamicEntityComponent } = useNuxtApp()
+const teaserComponent = (bundle) => {
+  return $resolveDynamicEntityComponent(`${bundle}Teaser`)
+}
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '0')
+
+provide('colorScheme', props.colorScheme)
+provide('titleWeight', childTitleWeight)
+</script>