@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Search/Facets/FacetDropdownUI.vue

@@ -22,7 +22,7 @@
           :inputClass="
             themedClass(
               'textSearchInputClass',
-              'w-full pr-6 pl-12 py-3 border transition-all bg-white text-black border-0 selection:bg-primary selection:text-white border-1 border-gray-200 placeholder-gray-300',
+              'w-full pr-6 pl-12 py-3 border transition-all bg-white text-black border-0 selection:bg-primary-500 selection:text-white border-1 border-gray-200 placeholder-gray-300',
             )
           "
           :colorScheme="colorScheme"
@@ -41,86 +41,90 @@
           )
         "
       >
-        <Popover
-          @update:open="(open: boolean) => (openPopovers[field.field] = open)"
+        <UPopover
+          v-model:open="openPopovers[field.field]"
           :class="popover({ colorScheme })"
         >
-          <PopoverTrigger :class="popoverTrigger({ colorScheme })">
-            <span
-              :class="
-                themedClass('popoverTriggerLabelClass', 'text-h8 truncate')
-              "
-            >
-              {{ fieldTriggerLabel(field) }}
-            </span>
-            <SpriteSymbol
-              name="chevron-down"
-              aria-hidden="true"
-              :class="[
-                popoverTriggerIcon({ colorScheme }),
-                openPopovers[field.field] ? 'rotate-180' : 'rotate-0',
-              ]"
-            />
-          </PopoverTrigger>
-          <PopoverContent
-            :class="popoverContent({ colorScheme })"
-            align="start"
-          >
-            <!-- Filter options container -->
-            <div
-              :class="
-                themedClass(
-                  'filterOptionsContainerClass',
-                  'overflow-y-auto pt-1',
-                )
-              "
-            >
-              <!-- Filter options -->
-              <template v-for="opt in opts" :key="opt.value">
+          <template #trigger>
+            <button :class="popoverTrigger({ colorScheme })">
+              <span
+                :class="
+                  themedClass('popoverTriggerLabelClass', 'text-h8 truncate')
+                "
+              >
+                {{ fieldTriggerLabel(field) }}
+              </span>
+              <SpriteSymbol
+                name="chevron-down"
+                aria-hidden="true"
+                :class="[
+                  popoverTriggerIcon({ colorScheme }),
+                  openPopovers[field.field] ? 'rotate-180' : 'rotate-0',
+                ]"
+              />
+            </button>
+          </template>
+
+          <template #panel>
+            <div :class="popoverContent({ colorScheme })">
+              <!-- Filter options container -->
+              <div
+                :class="
+                  themedClass(
+                    'filterOptionsContainerClass',
+                    'overflow-y-auto pt-1',
+                  )
+                "
+              >
+                <!-- Filter options -->
+                <template v-for="opt in opts" :key="opt.value">
+                  <button
+                    type="button"
+                    @click="toggle(field.field, opt.value)"
+                    :class="filterOptionButton({ colorScheme })"
+                  >
+                    <UCheckbox
+                      :model-value="
+                        selections[field.field]?.includes(opt.value)
+                      "
+                      :class="checkbox({ colorScheme })"
+                      tabindex="-1"
+                      @click.stop
+                    />
+
+                    <span :class="filterOptionLabel({ colorScheme })">
+                      {{ opt.label }}
+                    </span>
+
+                    <span :class="filterOptionCount({ colorScheme })">
+                      {{ opt.count }}
+                    </span>
+                  </button>
+                </template>
+              </div>
+
+              <!-- Reset filter button -->
+              <div
+                :class="
+                  themedClass(
+                    'resetFilterContainerClass',
+                    'flex items-center gap-2 px-4 pt-3 pb-4',
+                  )
+                "
+              >
                 <button
-                  type="button"
-                  @click="toggle(field.field, opt.value)"
-                  :class="filterOptionButton({ colorScheme })"
+                  :disabled="
+                    !(selections[field.field] && selections[field.field].length)
+                  "
+                  @click="clearField(field.field)"
+                  :class="resetFilterButton({ colorScheme })"
                 >
-                  <Checkbox
-                    :checked="selections[field.field]?.includes(opt.value)"
-                    @update:checked="toggle(field.field, opt.value)"
-                    :class="checkbox({ colorScheme })"
-                    tabindex="-1"
-                  />
-
-                  <span :class="filterOptionLabel({ colorScheme })">
-                    {{ opt.label }}
-                  </span>
-
-                  <span :class="filterOptionCount({ colorScheme })">
-                    {{ opt.count }}
-                  </span>
+                  <span>{{ $texts('listing.clear_filter', 'Clear') }}</span>
                 </button>
-              </template>
+              </div>
             </div>
-
-            <!-- Reset filter button -->
-            <div
-              :class="
-                themedClass(
-                  'resetFilterContainerClass',
-                  'flex items-center gap-2 px-4 pb-4 pt-3',
-                )
-              "
-            >
-              <button
-                :disabled="
-                  !(selections[field.field] && selections[field.field].length)
-                "
-                @click="clearField(field.field)"
-                :class="resetFilterButton({ colorScheme })"
-              >
-                <span>{{ $texts('listing.clear_filter', 'Clear') }}</span>
-              </button>
-            </div>
-          </PopoverContent>
-        </Popover>
+          </template>
+        </UPopover>
       </div>
 
       <!-- Reset filters column -->
@@ -146,7 +150,10 @@
     </DesignSystemAtomsGridRow>
 
     <!-- Results Counter row -->
-    <div v-if="totalCount !== undefined" :class="resultsCount({ colorScheme })">
+    <div
+      v-if="totalCount !== undefined"
+      :class="cn(resultsCount({ colorScheme }), alignHorizontalFull)"
+    >
       <span v-if="loading" :class="themedClass('resultsCountLoadingClass')">
         {{ $texts('listing.loading', 'Loading...') }}
       </span>
@@ -159,12 +166,7 @@
         }}
         <span
           v-if="displayedCount && displayedCount < totalCount"
-          :class="
-            themedClass(
-              'resultsDisplayedCountClass',
-              'text-sm font-normal text-gray-600',
-            )
-          "
+          :class="resultsDisplayedCount({ colorScheme })"
         >
           ({{ $texts('listing.showing', 'result') }} {{ displayedCount }})
         </span>
@@ -175,11 +177,9 @@
 
 <script setup lang="ts">
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
-import Popover from '@iqual/nuxt-icms/components/ui/popover/Popover.vue'
-import PopoverContent from '@iqual/nuxt-icms/components/ui/popover/PopoverContent.vue'
-import PopoverTrigger from '@iqual/nuxt-icms/components/ui/popover/PopoverTrigger.vue'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const themedClass = useTheme('SearchFacetsFacetDropdownUI')
 
@@ -221,6 +221,8 @@ const props = defineProps<{
   enableTextSearch?: boolean
   /** Search term value */
   searchTerm?: string
+  /** Alignment classes to apply to results counter */
+  alignHorizontalFull?: string
 }>()
 
 const emit = defineEmits<{
@@ -388,7 +390,7 @@ const popover = tv({
 const popoverTrigger = tv({
   base: themedClass(
     'popoverTriggerBase',
-    'w-full flex items-center justify-between gap-4 cursor-pointer py-3 px-6 transition-all border-1 focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-2',
+    'w-full flex items-center justify-between gap-4 cursor-pointer py-3 px-6 transition-all border-1 focus-visible:outline-hidden focus-visible:shadow-none focus-visible:ring-2',
   ),
   variants: {
     colorScheme: {
@@ -406,7 +408,7 @@ const popoverTrigger = tv({
       ),
       accent: themedClass(
         'popoverTriggerVariantsColorSchemeAccent',
-        'bg-primary text-white border-primary focus-visible:ring-white',
+        'bg-primary-500 text-white border-primary-500 focus-visible:ring-white',
       ),
     },
   },
@@ -442,7 +444,7 @@ const popoverTriggerIcon = tv({
 const popoverContent = tv({
   base: themedClass(
     'popoverContentBase',
-    'w-[var(--radix-popper-anchor-width)] p-0 border-1 rounded-none shadow-none',
+    'w-[var(--reka-popper-anchor-width)] p-0 border-1 rounded-none shadow-none',
   ),
   variants: {
     colorScheme: {
@@ -460,7 +462,31 @@ const popoverContent = tv({
       ),
       accent: themedClass(
         'popoverContentVariantsColorSchemeAccent',
-        'bg-primary border-primary',
+        'bg-primary-500 border-primary',
+      ),
+    },
+  },
+})
+
+const resultsDisplayedCount = tv({
+  base: themedClass('resultsDisplayedCountBase', 'text-sm font-normal'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'resultsDisplayedCountVariantsColorSchemeNone',
+        'text-gray-600',
+      ),
+      dark: themedClass(
+        'resultsDisplayedCountVariantsColorSchemeDark',
+        'text-gray-600',
+      ),
+      light: themedClass(
+        'resultsDisplayedCountVariantsColorSchemeLight',
+        'text-gray-600',
+      ),
+      accent: themedClass(
+        'resultsDisplayedCountVariantsColorSchemeAccent',
+        'text-white',
       ),
     },
   },
@@ -481,21 +507,21 @@ const resultsCount = tv({
 const resetFilterButton = tv({
   base: themedClass(
     'resetFilterButtonBase',
-    '[&>span]:text-sm w-fit px-4 py-1 border-0 transition-all bg-white border-1 border-black focus:outline-none focus:ring-2 disabled:opacity-40',
+    '[&>span]:text-sm w-fit px-4 py-1 border-0 transition-all bg-white border-1 border-black focus:outline-hidden focus:ring-2 disabled:opacity-40',
   ),
   variants: {
     colorScheme: {
       none: themedClass(
         'resetFilterButtonVariantsColorSchemeNone',
-        'bg-primary border-primary focus:ring-black text-white enabled:hover:text-primary enabled:hover:bg-white enabled:hover:border-primary',
+        'bg-primary-500 border-primary-500 focus:ring-black text-white enabled:hover:text-primary-500 enabled:hover:bg-white enabled:hover:border-primary',
       ),
       dark: themedClass(
         'resetFilterButtonVariantsColorSchemeDark',
-        'bg-primary border-primary focus:ring-primary text-black enabled:hover:text-primary enabled:hover:bg-gray-900 enabled:hover:border-primary',
+        'bg-primary-500 border-primary-500 focus:ring-primary-500 text-black enabled:hover:text-primary-500 enabled:hover:bg-gray-900 enabled:hover:border-primary',
       ),
       light: themedClass(
         'resetFilterButtonVariantsColorSchemeLight',
-        'bg-primary border-primary focus:ring-black text-white enabled:hover:text-primary enabled:hover:bg-gray-50 enabled:hover:border-primary',
+        'bg-primary-500 border-primary-500 focus:ring-black text-white enabled:hover:text-primary-500 enabled:hover:bg-gray-50 enabled:hover:border-primary',
       ),
       accent: themedClass(
         'resetFilterButtonVariantsColorSchemeAccent',
@@ -508,21 +534,21 @@ const resetFilterButton = tv({
 const resetFiltersButton = tv({
   base: themedClass(
     'resetFiltersButtonBase',
-    'py-3 px-10 transition-all border-1 focus:outline-none focus:ring-2',
+    'py-3 px-10 transition-all border-1 focus:outline-hidden focus:ring-2',
   ),
   variants: {
     colorScheme: {
       none: themedClass(
         'resetFiltersButtonVariantsColorSchemeBase',
-        'bg-primary border-primary focus:ring-black text-white hover:text-primary hover:bg-white hover:border-primary',
+        'bg-primary-500 border-primary-500 focus:ring-black text-white hover:text-primary-500 hover:bg-white hover:border-primary',
       ),
       dark: themedClass(
         'resetFiltersButtonVariantsColorSchemeDark',
-        'bg-primary border-primary focus:ring-primary text-black hover:text-primary hover:bg-gray-950 hover:border-primary',
+        'bg-primary-500 border-primary-500 focus:ring-primary-500 text-black hover:text-primary-500 hover:bg-gray-950 hover:border-primary',
       ),
       light: themedClass(
         'resetFiltersButtonVariantsColorSchemeNone',
-        'bg-primary border-primary focus:ring-black text-white hover:text-primary hover:bg-gray-50 hover:border-primary',
+        'bg-primary-500 border-primary-500 focus:ring-black text-white hover:text-primary-500 hover:bg-gray-50 hover:border-primary',
       ),
       accent: themedClass(
         'resetFiltersButtonVariantsColorSchemeAccent',
@@ -541,15 +567,15 @@ const checkbox = tv({
     colorScheme: {
       none: themedClass(
         'checkboxVariantsColorSchemeNone',
-        'text-black border-gray-200 dark:border-gray-200 bg-white dark:bg-white data-[state=checked]:bg-primary dark:data-[state=checked]:bg-primary text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary dark:data-[state=checked]:border-primary',
+        'text-black border-gray-200 dark:border-gray-200 bg-white dark:bg-white data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-500 text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary-500 dark:data-[state=checked]:border-primary',
       ),
       dark: themedClass(
         'checkboxVariantsColorSchemeDark',
-        'text-gray-200 border-gray-800 dark:border-gray-800 bg-gray-800 dark:bg-gray-800 data-[state=checked]:bg-primary dark:data-[state=checked]:bg-primary text-gray-200 dark:text-gray-200 data-[state=checked]:text-gray-200 dark:data-[state=checked]:text-gray-200 data-[state=checked]:border-primary dark:data-[state=checked]:border-primary',
+        'text-gray-200 border-gray-800 dark:border-gray-800 bg-gray-800 dark:bg-gray-800 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-500 text-gray-200 dark:text-gray-200 data-[state=checked]:text-gray-200 dark:data-[state=checked]:text-gray-200 data-[state=checked]:border-primary-500 dark:data-[state=checked]:border-primary',
       ),
       light: themedClass(
         'checkboxVariantsColorSchemeLight',
-        'text-black border-gray-200 dark:border-gray-200 bg-gray-50 dark:bg-gray-50 data-[state=checked]:bg-primary dark:data-[state=checked]:bg-primary text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary dark:data-[state=checked]:border-primary',
+        'text-black border-gray-200 dark:border-gray-200 bg-gray-50 dark:bg-gray-50 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-500 text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary-500 dark:data-[state=checked]:border-primary',
       ),
       accent: themedClass(
         'checkboxVariantsColorSchemeAccent',
@@ -562,7 +588,7 @@ const checkbox = tv({
 const filterOptionButton = tv({
   base: themedClass(
     'filterOptionButtonBase',
-    'flex w-full items-center gap-4 px-4 py-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-offset-4',
+    'flex w-full items-center gap-4 px-4 py-3 text-left focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-offset-4',
   ),
   variants: {
     colorScheme: {
@@ -580,7 +606,7 @@ const filterOptionButton = tv({
       ),
       accent: themedClass(
         'filterOptionButtonVariantsColorSchemeAccent',
-        'focus-visible:ring-offset-primary focus-visible:ring-white',
+        'focus-visible:ring-offset-primary-500 focus-visible:ring-white',
       ),
     },
   },

package/components/Search/Facets/FacetedSearchUI.vue

@@ -22,18 +22,19 @@
         "
         :enable-text-search="enableTextSearch"
         :search-term="searchTerm"
+        :alignHorizontalFull="alignHorizontalFull"
         @update:search-term="onSearchTermChange"
       />
 
       <template v-if="debug">
         <!-- Debug info (only if enabled) -->
         <pre
-          class="mt-4 whitespace-pre rounded bg-gray-50 p-3 text-xs"
+          class="mt-4 rounded-sm bg-gray-50 p-3 text-xs whitespace-pre"
           v-if="Object.keys(facetSelections).length"
           >{{ JSON.stringify(facetSelections, null, 2) }}</pre
         >
         <pre
-          class="mt-2 whitespace-pre rounded bg-blue-50 p-3 text-xs"
+          class="mt-2 rounded-sm bg-blue-50 p-3 text-xs whitespace-pre"
           v-if="facetData.length"
         >
 Facets: {{ facetData.length }} items</pre
@@ -43,7 +44,7 @@ Facets: {{ facetData.length }} items</pre
 
     <template v-if="debug && listingType !== 'all'">
       <!-- Debug info for manual/contextual filters -->
-      <pre class="mb-4 whitespace-pre rounded bg-yellow-50 p-3 text-xs">
+      <pre class="mb-4 rounded-sm bg-yellow-50 p-3 text-xs whitespace-pre">
         Active Filters ({{ listingType }}): {{
           JSON.stringify(activeFilters, null, 2)
         }}</pre
@@ -79,7 +80,7 @@ Facets: {{ facetData.length }} items</pre
                 v-for="(result, index) in group?.results"
                 :key="`result-${index}`"
               >
-                <pre class="overflow-hidden rounded bg-gray-100 p-2 text-xs">
+                <pre class="overflow-hidden rounded-sm bg-gray-100 p-2 text-xs">
                   {{ JSON.stringify(result, null, 2) }}
                 </pre>
               </div>
@@ -238,6 +239,9 @@ export interface FacetedSearchUIProps {
   /** Maximum number of results to display per page */
   itemsPerPage?: number
 
+  /** Search API index to query. Defaults to 'content_search' */
+  index?: string
+
   /** Text labels for internationalization */
   noResultsText?: string
   loadingText?: string
@@ -260,6 +264,12 @@ export interface FacetedSearchUIProps {
 
   /** Conjunction operator for combining additional filter conditions (base conditions are always AND) */
   conjunction?: 'AND' | 'OR'
+
+  /** Sort configuration for search results. Defaults to weight DESC, created DESC */
+  sort?: Array<{ field: string; direction: 'ASC' | 'DESC' }>
+
+  /** Alignment classes to apply to result count display */
+  alignHorizontalFull?: string
 }
 
 const props = withDefaults(defineProps<FacetedSearchUIProps>(), {
@@ -268,8 +278,20 @@ const props = withDefaults(defineProps<FacetedSearchUIProps>(), {
   colorScheme: 'none',
   listingType: 'all',
   conjunction: 'AND',
+  index: 'content_search',
 })
 
+// Default sort order: weight DESC, then created DESC
+const defaultSort = [
+  { field: 'weight', direction: 'DESC' as const },
+  { field: 'created', direction: 'DESC' as const },
+]
+
+const effectiveSort = computed(() => props.sort || defaultSort)
+const emit = defineEmits<{
+  'results-updated': [hasResults: boolean, count: number]
+}>()
+
 const themedClass = useTheme('SearchFacetsFacetedSearchUI')
 
 // Get the $texts function for internationalization
@@ -397,13 +419,14 @@ const buildSearchFilter = (
 // Initial query to get all available facets (only for 'all' listing type)
 const { data: initialFacetsData } = await useAsyncData(
   props.listingType === 'all'
-    ? `facetedSearch-facets-${JSON.stringify(props.baseFilter)}-${searchTerm.value}`
+    ? `facetedSearch-facets-${props.index}-${JSON.stringify(props.baseFilter)}-${searchTerm.value}`
     : 'skip-facets',
   async () => {
     if (props.listingType !== 'all') {
       return null
     }
     return await useGraphqlQuery('layoutOverviewFacetsSearch', {
+      indexId: props.index,
       facets: props.facets,
       filter: props.baseFilter,
       keys: searchTerm.value ?? '',
@@ -416,7 +439,7 @@ const { data: initialFacetsData } = await useAsyncData(
 // Initial query to get search results
 const { data: initialResultsData, refresh: refreshResults } =
   await useAsyncData(
-    `facetedSearch-results-${props.listingType}-${JSON.stringify(props.baseFilter)}-${JSON.stringify(activeFilters.value)}`,
+    `facetedSearch-results-${props.index}-${props.listingType}-${JSON.stringify(props.baseFilter)}-${JSON.stringify(activeFilters.value)}`,
     async () => {
       const filter = buildSearchFilter()
 
@@ -429,6 +452,7 @@ const { data: initialResultsData, refresh: refreshResults } =
       }
 
       const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+        indexId: props.index,
         filter,
         facets: props.facets,
         limit: props?.groupResultsByFacet
@@ -436,8 +460,21 @@ const { data: initialResultsData, refresh: refreshResults } =
           : props.itemsPerPage,
         offset: 0,
         keys: searchTerm.value ?? '',
+        sort: effectiveSort.value,
       })
       isLoading.value = false
+
+      // Debug: Log the raw GraphQL response
+      if (props.debug) {
+        console.log('FacetedSearch - Raw GraphQL response:', {
+          fullResponse: response,
+          searchApiQuery: response?.data?.searchApiQuery,
+          results: response?.data?.searchApiQuery?.results,
+          facets: response?.data?.searchApiQuery?.facets,
+          count: response?.data?.searchApiQuery?.count,
+        })
+      }
+
       if (
         props?.groupResultsByFacet &&
         response?.data?.searchApiQuery?.facets
@@ -453,13 +490,24 @@ const { data: initialResultsData, refresh: refreshResults } =
             }
           })
       }
-      return response.data?.searchApiQuery ?? null
+
+      const returnValue = response.data?.searchApiQuery ?? null
+
+      // Debug: Log what's being returned from useAsyncData
+      if (props.debug) {
+        console.log('FacetedSearch - Returning from useAsyncData:', returnValue)
+      }
+
+      return returnValue
     },
   )
 
 // Initialize facets from initial query (only for 'all' listing type)
 if (initialFacetsData.value) {
-  allFacets.value = initialFacetsData.value.facets || []
+  const enrichedFacets = await useEnrichFacetLabels(
+    initialFacetsData.value.facets || [],
+  )
+  allFacets.value = enrichedFacets
 }
 
 // Function to update search results when facets change (only for 'all' listing type)
@@ -487,6 +535,7 @@ async function updateSearchResults(selections: Record<string, string[]>) {
     }
 
     const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+      indexId: props.index,
       filter,
       facets: props.facets,
       limit: props?.groupResultsByFacet
@@ -494,6 +543,7 @@ async function updateSearchResults(selections: Record<string, string[]>) {
         : props.itemsPerPage,
       offset: 0,
       keys: searchTerm.value ?? '',
+      sort: effectiveSort.value,
     })
 
     // Update the results data to reflect new search results
@@ -508,6 +558,8 @@ async function updateSearchResults(selections: Record<string, string[]>) {
           filter: f?.filter,
           results: f?.results?.slice(0, 4),
         }))
+        // Enrich facet labels with taxonomy term names
+        processedFacets = await useEnrichFacetLabels(processedFacets)
       }
 
       initialResultsData.value = {
@@ -526,6 +578,12 @@ async function updateSearchResults(selections: Record<string, string[]>) {
     console.error('Error updating search results:', error)
   } finally {
     isLoading.value = false
+    // Manually emit after update completes
+    await nextTick()
+    const resultsArray = displayedResults.value?.[0]?.results || []
+    const hasResults = resultsArray.length > 0
+    const count = totalCount.value
+    emit('results-updated', hasResults, count)
   }
 }
 
@@ -544,11 +602,24 @@ const displayedResults = computed(() => {
         }
       })
   }
-  return [
+
+  const results = [
     {
       results: initialResultsData.value?.results || [],
     },
   ]
+
+  // Debug logging
+  if (props.debug) {
+    console.log('FacetedSearch - displayedResults computed:', {
+      groupResultsByFacet: props?.groupResultsByFacet,
+      initialResultsDataResults: initialResultsData.value?.results,
+      initialResultsDataCount: initialResultsData.value?.count,
+      displayedResults: results,
+    })
+  }
+
+  return results
 })
 
 const totalCount = computed(() => {
@@ -638,6 +709,17 @@ watch(
   { immediate: false },
 )
 
+// Watch for manual filters changes and refresh results
+watch(
+  () => props.manualFilters,
+  () => {
+    if (props.listingType === 'manual') {
+      refreshResults()
+    }
+  },
+  { deep: true },
+)
+
 // Load more handler
 async function loadMore() {
   if (loadingMore.value || isLoading.value) return
@@ -651,10 +733,12 @@ async function loadMore() {
     const offset = currentPage.value * props.itemsPerPage
 
     const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+      indexId: props.index,
       filter,
       limit: props.itemsPerPage,
       offset,
       keys: searchTerm.value ?? '',
+      sort: effectiveSort.value,
     })
 
     if (response.data?.searchApiQuery?.results) {
@@ -735,10 +819,12 @@ async function loadMoreGroup(group: any) {
 
     // Use the current group result count as offset to load more
     const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+      indexId: props.index,
       filter: buildSearchFilter(facetSelections.value),
       limit: props.itemsPerPage,
       offset: currentCount,
       keys: searchTerm.value ?? '',
+      sort: effectiveSort.value,
     })
 
     if (response.data?.searchApiQuery?.results) {
@@ -832,6 +918,20 @@ const loadingText = tv({
   },
 })
 
+// Watch for results changes and emit events
+watch(
+  [initialResultsData, isLoading],
+  () => {
+    if (!isLoading.value) {
+      const resultsArray = displayedResults.value?.[0]?.results || []
+      const hasResults = resultsArray.length > 0
+      const count = totalCount.value
+      emit('results-updated', hasResults, count)
+    }
+  },
+  { immediate: true, deep: true },
+)
+
 // Debug logging
 watchEffect(() => {
   if (props.debug) {