@iqual/nuxt-icms 1.4.10 → 1.5.1

package/components/DesignSystem/Organisms/FacetedListing.vue

@@ -1,93 +1,152 @@
 <template>
-  <div>
-    <DesignSystemAtomsContainer
-      :color-scheme="colorScheme"
-      :spacing="spacing"
-      :class="themedClass('containerClass')"
-    >
-      <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
-        <div
-          :class="
+  <DesignSystemAtomsContainer
+    v-show="isEditing || hasResults"
+    :color-scheme="colorScheme"
+    :spacing="spacing"
+    :class="
+      cn([
+        themedClass('containerClass'),
+        slider && themedClass('sliderContainerClass'),
+        { 'opacity-50': isEditing && !hasResults },
+      ])
+    "
+    :style="
+      isEditing && !hasResults
+        ? 'background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,0,0,0.08) 8px, rgba(255,0,0,0.08) 16px);'
+        : ''
+    "
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
+      <div
+        :class="
+          cn(
             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="
+              'col-span-12 md:col-span-9',
+            ),
+            alignHorizontalFull,
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
+          :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div
+        :class="
+          cn(
             themedClass(
               'firstRowSecondColumnClass',
               'col-span-12 md:col-span-9',
+            ),
+            alignHorizontalFull,
+          )
+        "
+      >
+        <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"
+          :index="index"
+          :sort="sort"
+          :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"
+          :alignHorizontalFull="alignHorizontalFull"
+          @results-updated="onResultsUpdated"
         >
-          <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',
-                  )
-                "
+          <template #results="{ results }">
+            <slot name="preResults" :results="results"></slot>
+            <div
+              v-if="!slider"
+              :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>
+            <div v-else class="relative mt-10">
+              <UCarousel
+                v-model="carouselIndex"
+                :items="results?.results || []"
+                :arrows="(results?.results?.length || 0) > sliderColumns"
+                :watch-drag="(results?.results?.length || 0) > sliderColumns"
+                nextIcon="i-lucide-chevron-right"
+                prevIcon="i-lucide-chevron-left"
+                :ui="{
+                  viewport: themedClass('carouselViewport'),
+                  item: sliderItemClass,
+                  container: 'gap-6',
+                  prev: cn(
+                    carouselButton({ colorScheme }),
+                    themedClass(
+                      'carouselButtonPrevClass',
+                      'start-0 sm:start-0 2xl:-start-16',
+                    ),
+                  ),
+                  next: cn(
+                    carouselButton({ colorScheme }),
+                    themedClass(
+                      'carouselButtonNextClass',
+                      'start-12 sm:start-12 2xl:start-auto 2xl:-end-16',
+                    ),
+                  ),
+                }"
               >
-                <component
-                  v-for="teaser in results?.results"
-                  :is="teaserComponent(teaser?.bundle)"
-                  v-bind="teaser"
-                />
-              </div>
-            </template>
-          </SearchFacetsFacetedSearchUI>
-        </div>
-      </DesignSystemAtomsGridRow>
-    </DesignSystemAtomsContainer>
-  </div>
+                <template #default="{ item }">
+                  <component
+                    :is="teaserComponent(item?.bundle)"
+                    v-bind="item"
+                  />
+                </template>
+              </UCarousel>
+            </div>
+          </template>
+        </SearchFacetsFacetedSearchUI>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
 </template>
 
 <script lang="ts" setup>
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { tv } from 'tailwind-variants'
 
 const props = withDefaults(
   defineProps<{
@@ -96,6 +155,7 @@ const props = withDefaults(
       top: string
       bottom: string
     }
+    alignHorizontalFull?: string
     pretitle?: string
     title?: string
     titleWeight?: string
@@ -108,6 +168,7 @@ const props = withDefaults(
     } | null)[]
     availableFacets?: string[]
     contentTypeFilter?: string[]
+    additionalFilters?: Array<{ field: string; value: any; operator?: string }>
     containerClass?: string
     firstRowClass?: string
     firstRowFirstColumnClass?: string
@@ -118,18 +179,38 @@ const props = withDefaults(
     titleClass?: string
     textClass?: string
     resultsGridClass?: string
+    sort?: Array<{ field: string; direction: 'ASC' | 'DESC' }>
+    /** Search API index to query. Defaults to 'content_search' */
+    index?: string
+    /** Enable debug logging for troubleshooting */
+    debug?: boolean
+    slider?: boolean
+    sliderColumns?: number
   }>(),
   {
     availableFacets: () => ['topics'],
+    index: 'content_search',
+    debug: false,
   },
 )
 
 const themedClass = useTheme('DesignSystemOrganismsFacetedListing')
 const { $texts } = useNuxtApp()
 
+// Track whether there are search results
+const hasResults = ref(true)
+
+// Handle results updates from SearchFacetsFacetedSearchUI
+const onResultsUpdated = (hasResultsValue: boolean, count: number) => {
+  hasResults.value = hasResultsValue
+}
+
 // Helper function to filter valid items
 const filterValidItems = (items?: any[]) =>
-  (items || []).filter(item => item?.id && item?.name) as { id: string; name: string }[]
+  (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(() => ({
@@ -147,24 +228,95 @@ const listingType = computed(() => {
 
 // Configuration for the faceted search
 const baseFilter = computed(() => {
+  const conditions: any[] = []
+
+  // Add content type filter
   if (props?.contentTypeFilter) {
-    return {
-      conditions: [{ field: 'type', value: props?.contentTypeFilter }],
-    }
+    conditions.push({ field: 'type', value: props?.contentTypeFilter })
   }
-  return {}
+
+  // Add custom field conditions
+  if (props?.additionalFilters && props.additionalFilters.length > 0) {
+    conditions.push(...props.additionalFilters)
+  }
+
+  const result = conditions.length > 0 ? { conditions } : {}
+
+  // Debug logging
+  if (props.debug) {
+    console.log('FacetedListing - baseFilter computed:', {
+      hasContentTypeFilter: !!props?.contentTypeFilter,
+      hasAdditionalFilters: !!(
+        props?.additionalFilters && props.additionalFilters.length > 0
+      ),
+      additionalFilters: props?.additionalFilters,
+      conditions,
+      result,
+    })
+  }
+
+  return result
 })
 
 // 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 { get } = useEntityRegistry()
+const teaserComponent = (bundle?: string) => {
+  if (bundle) {
+    return get(`${bundle}Teaser`)
+  }
+  return null
 }
 
+const carouselIndex = ref(0)
+
+const viewport = useViewport()
+
+const sliderItemClass = computed(() => {
+  if (viewport.isLessThan('sm')) return 'basis-full'
+  if (viewport.isLessThan('lg')) return 'basis-[calc((100%_-_1.5rem)_/_2)]'
+  const columns = props.sliderColumns || 1
+  const map: Record<number, string> = {
+    1: 'basis-full',
+    2: 'basis-[calc((100%_-_1.5rem)_/_2)]',
+    3: 'basis-[calc((100%_-_3rem)_/_3)]',
+    4: 'basis-[calc((100%_-_4.5rem)_/_4)]',
+  }
+  return map[columns] || 'basis-full'
+})
+
+const carouselButton = tv({
+  base: themedClass(
+    'carouselButtonBase',
+    'w-fit border-0 ring-0 shadow-none absolute cursor-pointer top-auto -bottom-16 2xl:bottom-auto 2xl:top-1/2',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'carouselButtonVariantsColorSchemeNone',
+        'disabled:bg-gray-50 bg-gray-50 text-gray-950 hover:bg-gray-200 active:bg-gray-200',
+      ),
+      dark: themedClass(
+        'carouselButtonVariantsColorSchemeDark',
+        'disabled:bg-gray-800 bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-900',
+      ),
+      light: themedClass(
+        'carouselButtonVariantsColorSchemeLight',
+        'disabled:bg-gray-50 bg-gray-50 text-gray-950 hover:bg-gray-200 active:bg-gray-200',
+      ),
+      accent: themedClass(
+        'carouselButtonVariantsColorSchemeAccent',
+        'disabled:bg-white bg-white text-primary-500 hover:bg-gray-100 active:bg-gray-100',
+      ),
+    },
+  },
+})
+
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '0')
 
-provide('colorScheme', props.colorScheme)
+const isEditing = inject<Ref<boolean>>('isEditing', ref(false))
+
+provide('colorScheme', toRef(props, 'colorScheme'))
 provide('titleWeight', childTitleWeight)
 </script>

package/components/DesignSystem/Organisms/FactCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="themedClass('containerClass', '@container relative')">
+    <div :class="card({ colorScheme })">
+      <slot name="content">
+        <DesignSystemOrganismsContentBlock
+          :containerClass="'flex h-full flex-col justify-between'"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="'heading-2'"
+          :titleClass="themedClass('titleClass', 'mb-6 font-bold')"
+          :text="text"
+          :textClass="
+            themedClass(
+              'textClass',
+              'text-sm mt-auto [&>p:last-of-type]:mb-0 opacity-60',
+            )
+          "
+        />
+      </slot>
+      <slot name="links"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
+
+const themedClass = useTheme('DesignSystemOrganismsFactCard')
+
+defineProps<{
+  title?: string
+  text?: string
+  containerClass?: string
+  pretitleClass?: string
+  titleClass?: string
+  textClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+
+const card = tv({
+  base: themedClass(
+    'cardBase',
+    'flex aspect-square md:aspect-3/4 @xl:aspect-3/2 @3xl:aspect-3/1 h-full flex-col gap-4 p-6 lg:p-8 justify-between',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('cardVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('cardVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('cardVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass('cardVariantsColorSchemeAccent', 'bg-primary-700'),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>

package/components/DesignSystem/Organisms/FeatureCard.vue

@@ -0,0 +1,191 @@
+<template>
+  <div :class="themedClass('containerClass', '@container relative')">
+    <a
+      v-if="link?.path"
+      :href="link?.path"
+      :title="linkLabel"
+      :class="themedClass('linkOverlayClass', 'absolute inset-0 z-1')"
+    />
+    <div :class="card({ colorScheme })">
+      <div :class="mediaContainer({ colorScheme })">
+        <Media
+          v-if="image"
+          :media="image"
+          imageAspectRatios="16/9"
+          imageSizes="xs:100vw sm:100vw md:50vw lg:50vw"
+          :mediaClass="themedClass('mediaClass')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="themedClass('elementClass')"
+        />
+        <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
+          <Media :media="icon" />
+        </div>
+      </div>
+
+      <div
+        :class="
+          cn(
+            themedClass(
+              'contentContainerClass',
+              'flex h-full w-full flex-col justify-between p-6 pt-0 lg:p-8 lg:pt-0 @xl:w-1/2 @xl:shrink-0 @xl:p-8 @7xl:p-16',
+            ),
+            {
+              [themedClass('iconOffsetClass', 'pt-12 lg:pt-12')]: icon,
+            },
+          )
+        "
+      >
+        <slot name="content">
+          <DesignSystemOrganismsContentBlock
+            :pretitle="pretitle"
+            :pretitleClass="
+              themedClass(
+                'pretitleClass',
+                'text-center @xl:text-left [&>p:last-of-type]:mb-0 text-base lg:text-base font-medium',
+              )
+            "
+            :title="title"
+            :titleWeight="titleWeight"
+            :titleStyle="'heading-5'"
+            :titleClass="
+              themedClass(
+                'titleClass',
+                'mb-2 text-center @xl:text-left font-semibold',
+              )
+            "
+            :text="text"
+            :textClass="
+              themedClass(
+                'textClass',
+                'text-center @xl:text-left [&>p:last-of-type]:mb-0',
+              )
+            "
+          />
+        </slot>
+
+        <slot name="links">
+          <div
+            v-if="link?.path"
+            :class="
+              themedClass(
+                'linksContainerClass',
+                'relative z-2 mt-4 flex flex-wrap items-center justify-center gap-4',
+              )
+            "
+          >
+            <DesignSystemAtomsButton
+              :label="$texts('teaser_card.link_label', 'Read more')"
+              :title="$texts('teaser_card.link_label', 'Read more')"
+              :link="link?.path"
+              :target-blank="false"
+              :buttonStyle="'focus'"
+              :colorScheme="colorScheme"
+              :buttonClass="themedClass('buttonClass')"
+              :labelClass="themedClass('labelClass')"
+            />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const themedClass = useTheme('DesignSystemOrganismsFeatureCard')
+
+defineProps<{
+  pretitle?: string
+  title?: string
+  text?: string
+  image?: MediaFragment
+  icon?: MediaFragment
+  link?: { path?: string }
+  linkLabel?: string
+  email?: string
+  phone?: string
+  linkExtra?: string
+  linkLinkedin?: string
+  containerClass?: string
+  pretitleClass?: string
+  titleClass?: string
+  textClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+
+const card = tv({
+  base: themedClass(
+    'cardBase',
+    'flex h-full gap-6 flex-col @xl:flex-row @xl:gap-0 @xl:p-0',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('cardVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('cardVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('cardVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass('cardVariantsColorSchemeAccent', 'bg-primary-700'),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const mediaContainer = tv({
+  base: themedClass(
+    'mediaContainerBase',
+    'relative @xl:w-1/2 @xl:shrink-0 aspect-video',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('mediaContainerVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('mediaContainerVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('mediaContainerVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'mediaContainerVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const cardIconWrapper = tv({
+  base: themedClass(
+    'cardIconWrapperBase',
+    'absolute -bottom-12 left-1/2 flex size-24 -translate-x-1/2 items-center justify-center rounded-full p-6',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'cardIconWrapperVariantsColorSchemeNone',
+        'bg-white @xl:bg-gray-50',
+      ),
+      dark: themedClass(
+        'cardIconWrapperVariantsColorSchemeDark',
+        'bg-gray-950 @xl:bg-gray-900',
+      ),
+      light: themedClass(
+        'cardIconWrapperVariantsColorSchemeLight',
+        'bg-gray-50 @xl:bg-white',
+      ),
+      accent: themedClass(
+        'cardIconWrapperVariantsColorSchemeAccent',
+        'bg-primary-600 @xl:bg-primary-700',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>