@iqual/nuxt-icms 1.3.1 → 1.4.1

package/components/Search/Facets/FacetedSearchUI.vue

@@ -7,12 +7,19 @@
         v-model="facetSelections"
         @facets-change="onFacetsChange"
         :total-count="totalCount"
-        :displayed-count="props.groupResultsByFacet ? 
-          displayedResults?.reduce((total, group) => total + (group?.results?.length || 0), 0) : 
-          displayedResults?.[0]?.results?.length"
+        :displayed-count="
+          props.groupResultsByFacet
+            ? displayedResults?.reduce(
+                (total, group) => total + (group?.results?.length || 0),
+                0,
+              )
+            : displayedResults?.[0]?.results?.length
+        "
         :loading="isLoading"
         :colorScheme="colorScheme"
-        class="mb-6"
+        :class="
+          themedClass('listingTypeAllSearchFacetsFacetDropdownUIClass', 'mb-6')
+        "
         :enable-text-search="enableTextSearch"
         :search-term="searchTerm"
         @update:search-term="onSearchTermChange"
@@ -26,7 +33,7 @@
           >{{ JSON.stringify(facetSelections, null, 2) }}</pre
         >
         <pre
-          class="bg-blue-50 mt-2 whitespace-pre rounded p-3 text-xs"
+          class="mt-2 whitespace-pre rounded bg-blue-50 p-3 text-xs"
           v-if="facetData.length"
         >
 Facets: {{ facetData.length }} items</pre
@@ -36,43 +43,92 @@ Facets: {{ facetData.length }} items</pre
 
     <template v-if="debug && listingType !== 'all'">
       <!-- Debug info for manual/contextual filters -->
-      <pre class="bg-yellow-50 mb-4 whitespace-pre rounded p-3 text-xs">
-Active Filters ({{ listingType }}): {{
+      <pre class="mb-4 whitespace-pre rounded bg-yellow-50 p-3 text-xs">
+        Active Filters ({{ listingType }}): {{
           JSON.stringify(activeFilters, null, 2)
         }}</pre
       >
     </template>
+
     <!-- Results Section -->
-    <div class="results-container">
+    <div :class="themedClass('resultsContainerClass')">
       <template v-if="displayedResults?.length">
         <div
           v-for="(group, groupIndex) in displayedResults"
           :key="`group-${groupIndex}`"
+          :class="themedClass('resultGroupClass')"
         >
           <slot name="results" :results="group" :loading="loadingMore">
-            <p v-if="props.groupResultsByFacet && 'label' in group && group?.label">{{ group?.label }} <span v-if="'count' in group && group?.count">({{ group?.count }})</span></p>
+            <p
+              v-if="
+                props.groupResultsByFacet && 'label' in group && group?.label
+              "
+              :class="themedClass('resultGroupLabelClass')"
+            >
+              {{ group?.label }}
+              <span
+                v-if="'count' in group && group?.count"
+                :class="themedClass('resultGroupCountClass')"
+              >
+                ({{ group?.count }})
+              </span>
+            </p>
             <!-- Default slot content if no slot is provided -->
             <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <div v-for="(result, index) in group?.results"
+              <div
+                v-for="(result, index) in group?.results"
                 :key="`result-${index}`"
               >
-                <pre class="rounded bg-gray-100 p-2 text-xs overflow-hidden">{{
-                  JSON.stringify(result, null, 2)
-                }}</pre>
+                <pre class="overflow-hidden rounded bg-gray-100 p-2 text-xs">
+                  {{ JSON.stringify(result, null, 2) }}
+                </pre>
               </div>
             </div>
           </slot>
-          
+
           <!-- Group-specific Load More Section (for grouped results) -->
-          <div v-if="props.groupResultsByFacet && 'label' in group && canGroupLoadMore(group)" class="mt-6 flex justify-center">
-            <slot name="group-load-more" :loadMore="() => loadMoreGroup(group)" :loading="isGroupLoading(group)" :group="group">
+          <div
+            v-if="
+              props.groupResultsByFacet &&
+              'label' in group &&
+              canGroupLoadMore(group)
+            "
+            :class="
+              themedClass(
+                'groupLoadMoreButtonContainerClass',
+                'mt-6 flex justify-center',
+              )
+            "
+          >
+            <slot
+              name="group-load-more"
+              :loadMore="() => loadMoreGroup(group)"
+              :loading="isGroupLoading(group)"
+              :group="group"
+            >
               <button
                 @click="loadMoreGroup(group)"
                 :disabled="isGroupLoading(group)"
-                :class="props.loadMoreButtonClass || defaultButtonClass"
+                :class="
+                  cn(
+                    button({ colorScheme }),
+                    themedClass('groupLoadMoreButtonClass'),
+                    props.loadMoreButtonClass,
+                  )
+                "
               >
-                <span v-if="!isGroupLoading(group)">{{ defaultLoadMoreText }}</span>
-                <span v-else>{{ defaultLoadingText }}</span>
+                <span
+                  v-if="!isGroupLoading(group)"
+                  :class="themedClass('groupLoadMoreButtonLabelClass')"
+                >
+                  {{ defaultLoadMoreText }}
+                </span>
+                <span
+                  v-else
+                  :class="themedClass('groupLoadMoreLoadingButtonLabelClass')"
+                >
+                  {{ defaultLoadingText }}
+                </span>
               </button>
             </slot>
           </div>
@@ -81,7 +137,14 @@ Active Filters ({{ listingType }}): {{
 
       <template v-else-if="!isLoading">
         <slot name="no-results">
-          <div class="col-span-12 py-8 text-center text-gray-500">
+          <div
+            :class="
+              themedClass(
+                'noResultsContainerClass',
+                'col-span-12 py-8 text-center text-gray-500',
+              )
+            "
+          >
             {{ defaultNoResultsText }}
           </div>
         </slot>
@@ -89,23 +152,47 @@ Active Filters ({{ listingType }}): {{
 
       <template v-if="isLoading">
         <slot name="loading">
-          <div class="col-span-12 py-8 text-center text-gray-500">
-            {{ defaultLoadingText }}
+          <div
+            :class="
+              themedClass(
+                'loadingContainerClass',
+                'col-span-12 py-8 text-center',
+              )
+            "
+          >
+            <span :class="loadingText({ colorScheme })">
+              {{ defaultLoadingText }}
+            </span>
           </div>
         </slot>
       </template>
     </div>
 
     <!-- Global Load More Section (for non-grouped results) -->
-    <div v-if="showLoadMore" class="mt-10 flex justify-center lg:mt-20">
+    <div
+      v-if="showLoadMore"
+      :class="
+        themedClass(
+          'globalLoadMoreButtonContainer',
+          'mt-10 flex justify-center lg:mt-20',
+        )
+      "
+    >
       <slot name="load-more" :loadMore="loadMore" :loading="loadingMore">
         <button
           @click="loadMore"
           :disabled="loadingMore"
-          :class="props.loadMoreButtonClass || defaultButtonClass"
+          :class="cn(button({ colorScheme }), loadMoreButtonClass)"
         >
-          <span v-if="!loadingMore">{{ defaultLoadMoreText }}</span>
-          <span v-else>{{ defaultLoadingText }}</span>
+          <span
+            v-if="!loadingMore"
+            :class="themedClass('globalLoadMoreButtonLabel')"
+          >
+            {{ defaultLoadMoreText }}
+          </span>
+          <span v-else :class="themedClass('globalLoadMoreLoadingButtonLabel')">
+            {{ defaultLoadingText }}
+          </span>
         </button>
       </slot>
     </div>
@@ -114,7 +201,11 @@ Active Filters ({{ listingType }}): {{
 
 <script lang="ts" setup>
 import { nextTick } from 'vue'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { SearchApiQueryFilterInput } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 export interface FacetFilterItem {
   id: string
@@ -156,7 +247,7 @@ export interface FacetedSearchUIProps {
   debug?: boolean
 
   /** Color scheme for default button styling */
-  colorScheme?: 'none' | 'dark' | 'light' | 'accent'
+  colorScheme?: ColorScheme
 
   /** Custom CSS classes for the load more button */
   loadMoreButtonClass?: string
@@ -179,6 +270,8 @@ const props = withDefaults(defineProps<FacetedSearchUIProps>(), {
   conjunction: 'AND',
 })
 
+const themedClass = useTheme('SearchFacetsFacetedSearchUI')
+
 // Get the $texts function for internationalization
 const { $texts } = useNuxtApp()
 
@@ -280,9 +373,9 @@ const buildSearchFilter = (
     return { conditions: baseConditions }
   } else if (baseConditions.length === 0) {
     // If no base conditions, return additional conditions with conjunction
-    return { 
+    return {
       conditions: additionalConditions,
-      conjunction: props.conjunction 
+      conjunction: props.conjunction,
     }
   } else {
     // Create the exact structure: base group AND additional group (with specified conjunction)
@@ -290,13 +383,13 @@ const buildSearchFilter = (
       conjunction: 'AND',
       groups: [
         {
-          conditions: baseConditions
+          conditions: baseConditions,
         },
         {
           conditions: additionalConditions,
-          conjunction: props.conjunction
-        }
-      ]
+          conjunction: props.conjunction,
+        },
+      ],
     }
   }
 }
@@ -326,34 +419,44 @@ const { data: initialResultsData, refresh: refreshResults } =
     `facetedSearch-results-${props.listingType}-${JSON.stringify(props.baseFilter)}-${JSON.stringify(activeFilters.value)}`,
     async () => {
       const filter = buildSearchFilter()
-      
+
       // Debug: Log the initial filter structure
       if (props.debug) {
-        console.log('FacetedSearch - Initial filter being sent:', JSON.stringify(filter, null, 2))
+        console.log(
+          'FacetedSearch - Initial filter being sent:',
+          JSON.stringify(filter, null, 2),
+        )
       }
-      
+
       const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
         filter,
         facets: props.facets,
-        limit: props?.groupResultsByFacet ? props.itemsPerPage * 10 : props.itemsPerPage,
+        limit: props?.groupResultsByFacet
+          ? props.itemsPerPage * 10
+          : props.itemsPerPage,
         offset: 0,
         keys: searchTerm.value ?? '',
       })
       isLoading.value = false
-      if (props?.groupResultsByFacet && response?.data?.searchApiQuery?.facets) {
-        response.data.searchApiQuery.facets = response.data?.searchApiQuery?.facets?.map(f => {return {
-          count: f?.count,
-          field: f?.field,
-          label: f?.label,
-          filter: f?.filter,
-          results: f?.results?.slice(0, 4)
-        }})
+      if (
+        props?.groupResultsByFacet &&
+        response?.data?.searchApiQuery?.facets
+      ) {
+        response.data.searchApiQuery.facets =
+          response.data?.searchApiQuery?.facets?.map((f) => {
+            return {
+              count: f?.count,
+              field: f?.field,
+              label: f?.label,
+              filter: f?.filter,
+              results: f?.results?.slice(0, 4),
+            }
+          })
       }
       return response.data?.searchApiQuery ?? null
     },
   )
 
-
 // Initialize facets from initial query (only for 'all' listing type)
 if (initialFacetsData.value) {
   allFacets.value = initialFacetsData.value.facets || []
@@ -368,22 +471,27 @@ async function updateSearchResults(selections: Record<string, string[]>) {
   try {
     isLoading.value = true
     currentPage.value = 1 // Reset pagination when filters change
-    
+
     // Reset group pagination states when filters change
     groupPagination.value = {}
     groupLoadingMore.value = {}
-    
+
     const filter = buildSearchFilter(selections)
 
     // Debug: Log the filter structure
     if (props.debug) {
-      console.log('FacetedSearch - Filter being sent:', JSON.stringify(filter, null, 2))
+      console.log(
+        'FacetedSearch - Filter being sent:',
+        JSON.stringify(filter, null, 2),
+      )
     }
 
     const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
       filter,
       facets: props.facets,
-      limit: props?.groupResultsByFacet ? props.itemsPerPage * 10 : props.itemsPerPage,
+      limit: props?.groupResultsByFacet
+        ? props.itemsPerPage * 10
+        : props.itemsPerPage,
       offset: 0,
       keys: searchTerm.value ?? '',
     })
@@ -393,29 +501,27 @@ async function updateSearchResults(selections: Record<string, string[]>) {
       // Apply the same transformation as in the initial query
       let processedFacets = response?.data?.searchApiQuery?.facets
       if (processedFacets) {
-        processedFacets = processedFacets.map(f => ({
+        processedFacets = processedFacets.map((f) => ({
           count: f?.count,
           field: f?.field,
           label: f?.label,
           filter: f?.filter,
-          results: f?.results?.slice(0, 4)
+          results: f?.results?.slice(0, 4),
         }))
       }
-      
+
       initialResultsData.value = {
         ...initialResultsData.value,
         facets: processedFacets,
         count: response?.data?.searchApiQuery?.count,
       }
-    }
-    else {
+    } else {
       initialResultsData.value = {
         ...initialResultsData.value,
         results: response?.data?.searchApiQuery?.results,
         count: response?.data?.searchApiQuery?.count,
       }
     }
-
   } catch (error) {
     console.error('Error updating search results:', error)
   } finally {
@@ -426,19 +532,23 @@ async function updateSearchResults(selections: Record<string, string[]>) {
 // Computed properties
 const displayedResults = computed(() => {
   if (props?.groupResultsByFacet) {
-    return initialResultsData.value?.facets?.filter((facet) => {
-      return facet?.field == props?.groupResultsByFacet
-    }).map((facet) => {
-      return {
-        'label': facet?.filter?.label,
-        'count': facet?.count,
-        'results': facet?.results || [],
-      }
-    })
+    return initialResultsData.value?.facets
+      ?.filter((facet) => {
+        return facet?.field == props?.groupResultsByFacet
+      })
+      .map((facet) => {
+        return {
+          label: facet?.filter?.label,
+          count: facet?.count,
+          results: facet?.results || [],
+        }
+      })
   }
-  return  [{
-    'results': initialResultsData.value?.results || []
-  }]
+  return [
+    {
+      results: initialResultsData.value?.results || [],
+    },
+  ]
 })
 
 const totalCount = computed(() => {
@@ -525,24 +635,9 @@ watch(
       refreshResults()
     }
   },
-  { immediate: false }
+  { immediate: false },
 )
 
-// Default button styling based on color scheme
-const defaultButtonClass = computed(() => {
-  const baseClasses =
-    'shadow-none h-auto block text-h7 font-medium py-3 px-20 rounded-full duration-300 ease-in-out w-full md:w-fit border disabled:opacity-50 disabled:cursor-not-allowed'
-
-  const colorSchemeClasses = {
-    none: 'bg-white text-black hover:bg-black hover:text-white border-black',
-    dark: 'bg-white text-black hover:bg-black hover:text-white border-black',
-    light: 'bg-gray-50 text-black hover:bg-black hover:text-white border-black',
-    accent: 'bg-white text-black hover:bg-black hover:text-white border-black',
-  }
-
-  return `${baseClasses} ${colorSchemeClasses[props.colorScheme] || colorSchemeClasses.none}`
-})
-
 // Load more handler
 async function loadMore() {
   if (loadingMore.value || isLoading.value) return
@@ -585,16 +680,19 @@ async function loadMore() {
 // Load more handler for specific group
 async function loadMoreGroup(group: any) {
   if (!props.groupResultsByFacet || !group || !('label' in group)) return
-  
+
   const groupKey = getGroupKey(group)
   if (groupLoadingMore.value[groupKey] || isLoading.value) return
-  
+
   groupLoadingMore.value[groupKey] = true
 
   try {
     // Find the facet filter value that corresponds to this group
-    const groupFacetValue = initialResultsData.value?.facets?.find(f => 
-      f && f.field === props.groupResultsByFacet && f.filter?.label === group.label
+    const groupFacetValue = initialResultsData.value?.facets?.find(
+      (f) =>
+        f &&
+        f.field === props.groupResultsByFacet &&
+        f.filter?.label === group.label,
     )?.filter?.id
 
     if (!groupFacetValue) {
@@ -610,28 +708,31 @@ async function loadMoreGroup(group: any) {
       // Step 1: First apply the facet filter and wait for it to complete
       const updatedSelections = {
         ...facetSelections.value,
-        [props.groupResultsByFacet]: [groupFacetValue]
+        [props.groupResultsByFacet]: [groupFacetValue],
       }
-      
+
       // Update facetSelections and trigger the normal facet change flow
       facetSelections.value = updatedSelections
       onFacetsChange(updatedSelections)
-      
+
       // Wait for the facet change to complete
       await nextTick()
       // Wait a bit more to ensure the search results have been updated
-      await new Promise(resolve => setTimeout(resolve, 100))
+      await new Promise((resolve) => setTimeout(resolve, 100))
     }
 
     // Step 2: Now do the load more operation
     // For grouped results, find the current results for this specific group
-    const currentGroupData = initialResultsData.value?.facets?.find(f => 
-      f && f.field === props.groupResultsByFacet && f.filter?.label === group.label
+    const currentGroupData = initialResultsData.value?.facets?.find(
+      (f) =>
+        f &&
+        f.field === props.groupResultsByFacet &&
+        f.filter?.label === group.label,
     )
-    
+
     const currentGroupResults = currentGroupData?.results || []
     const currentCount = currentGroupResults.length
-    
+
     // Use the current group result count as offset to load more
     const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
       filter: buildSearchFilter(facetSelections.value),
@@ -643,19 +744,23 @@ async function loadMoreGroup(group: any) {
     if (response.data?.searchApiQuery?.results) {
       // Append new results to the existing group results
       const newResults = response.data.searchApiQuery.results
-      
+
       // Update the specific group's results in the facets array
       if (initialResultsData.value?.facets && currentGroupData) {
-        const updatedFacets = initialResultsData.value.facets.map(facet => {
-          if (facet && facet.field === props.groupResultsByFacet && facet.filter?.label === group.label) {
+        const updatedFacets = initialResultsData.value.facets.map((facet) => {
+          if (
+            facet &&
+            facet.field === props.groupResultsByFacet &&
+            facet.filter?.label === group.label
+          ) {
             return {
               ...facet,
-              results: [...currentGroupResults, ...newResults]
+              results: [...currentGroupResults, ...newResults],
             }
           }
           return facet
         })
-        
+
         initialResultsData.value = {
           ...initialResultsData.value,
           facets: updatedFacets,
@@ -676,6 +781,57 @@ async function loadMoreGroup(group: any) {
   }
 }
 
+const button = tv({
+  base: themedClass(
+    'buttonBase',
+    'shadow-none h-auto block text-h7 font-medium py-3 px-20 rounded-full duration-300 ease-in-out w-full md:w-fit border disabled:opacity-50 disabled:cursor-not-allowed',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'buttonVariantsColorSchemeNone',
+        'bg-white text-black hover:bg-black hover:text-white border-black',
+      ),
+      dark: themedClass(
+        'buttonVariantsColorSchemeDark',
+        'bg-white text-black hover:bg-black hover:text-white border-black',
+      ),
+      light: themedClass(
+        'buttonVariantsColorSchemeLight',
+        'bg-gray-50 text-black hover:bg-black hover:text-white border-black',
+      ),
+      accent: themedClass(
+        'buttonVariantsColorSchemeAccent',
+        'bg-white text-black hover:bg-black hover:text-white border-black',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const loadingText = tv({
+  base: themedClass('loadingTextBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass('loadingTextVariantsColorSchemeNone', 'text-gray-500'),
+      dark: themedClass('loadingTextVariantsColorSchemeDark', 'text-gray-500'),
+      light: themedClass(
+        'loadingTextVariantsColorSchemeLight',
+        'text-gray-500',
+      ),
+      accent: themedClass(
+        'loadingTextVariantsColorSchemeAccent',
+        'text-gray-500',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
 // Debug logging
 watchEffect(() => {
   if (props.debug) {

package/components/Search/Facets/fragment.graphql

@@ -32,10 +32,14 @@ query layoutOverviewResultsSearch(
 	searchApiQuery(
     indexId: "content_search",
     filter: $filter
-    facets: $facets,
+    facets: $facets
     limit: $limit
     offset: $offset
     keys: $keys
+    sort: [
+      {field: "weight", direction:DESC},
+      {field: "created", direction:DESC}
+    ]
   ) {
     count
     results {