@iqual/nuxt-icms 1.2.2 → 1.3.0

package/components/Search/Facets/FacetDropdownUI.vue

@@ -1,8 +1,115 @@
-<script setup lang="ts">
+<template>
+  <div class="facets-ui space-y-5" v-if="groupEntries.length">
+    <!-- Clear Filters Button -->
+
+    <DesignSystemAtomsGridRow class="w-full p-0">
+      <div
+        v-if="enableTextSearch"
+        class="col-span-12 md:col-span-6 lg:col-span-3"
+      >
+        <SearchInput
+          inputClass="w-full pr-6 pl-12 py-4 border rounded-lg transition-all bg-white text-black border-0 shadow-custom-small focus:outline-none focus:ring-2 focus:ring-primary-500 selection:bg-primary-500 selection:text-white border-1 border-gray-200 placeholder-gray-300"
+          v-model="internalSearchTerm"
+        />
+      </div>
+
+      <div
+        v-for="[field, opts] in groupEntries"
+        :key="field.field"
+        class="col-span-12 md:col-span-6 lg:col-span-3"
+      >
+        <Popover
+          @update:open="(open: boolean) => (openPopovers[field.field] = open)"
+        >
+          <PopoverTrigger :class="popover({ colorScheme })">
+            <span class="truncate text-h8">{{ fieldTriggerLabel(field) }}</span>
+            <SpriteSymbol
+              name="chevron-down"
+              aria-hidden="true"
+              :class="[
+                'size-6 text-primary-500 transition-all duration-300',
+                openPopovers[field.field] ? 'rotate-180' : 'rotate-0',
+              ]"
+            />
+          </PopoverTrigger>
+          <PopoverContent
+            :class="popoverContent({ colorScheme })"
+            align="start"
+          >
+            <div class="max-h-72 overflow-y-auto pt-1">
+              <template v-for="opt in opts" :key="opt.value">
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-4 px-4 py-3 text-left focus:outline-none"
+                  @click="toggle(field.field, opt.value)"
+                >
+                  <Checkbox
+                    :checked="selections[field.field]?.includes(opt.value)"
+                    @update:checked="toggle(field.field, opt.value)"
+                    :class="checkbox({ colorScheme })"
+                  />
+                  <span class="flex-1 truncate text-h9 font-normal">{{
+                    opt.label
+                  }}</span>
+                  <span class="mt-0.5 text-sm tabular-nums">{{
+                    opt.count
+                  }}</span>
+                </button>
+              </template>
+            </div>
+            <div class="flex items-center gap-2 px-4 pb-4 pt-3">
+              <DesignSystemAtomsButton
+                :disabled="
+                  !(selections[field.field] && selections[field.field].length)
+                "
+                :label="$texts('listing.clear_filter', 'Clear')"
+                @click="clearField(field.field)"
+                :color-scheme="colorScheme"
+                :button-class="resetFilterButton({ colorScheme })"
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
 
-import Popover from '@/components/ui/popover/Popover.vue'
-import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
-import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue'
+      <div class="col-span-12 flex items-center md:col-span-6 lg:col-span-3">
+        <DesignSystemAtomsButton
+          v-if="selections && Object.keys(selections || {}).length"
+          :label="$texts('listing.clear_filters', 'Clear all filters')"
+          @click="clearAll"
+          :color-scheme="colorScheme"
+          button-class="px-6 py-4 rounded-lg transition-all bg-white border-gray-200 border-1 shadow-custom-small focus:outline-none focus:ring-2 focus:ring-primary-500 placeholder-gray-300 [&>span]:font-normal text-black hover:text-white hover:bg-black"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <!-- Results Counter -->
+    <div v-if="totalCount !== undefined" class="mb-4">
+      <div :class="noResultsText({ colorScheme })">
+        <span v-if="loading">Loading...</span>
+        <span v-else>
+          {{ totalCount }}
+          {{
+            totalCount === 1
+              ? $texts('listing.result', 'result')
+              : $texts('listing.results', 'results')
+          }}
+          <span
+            v-if="displayedCount && displayedCount < totalCount"
+            class="text-sm font-normal text-gray-600"
+          >
+            ({{ $texts('listing.showing', 'result') }} {{ displayedCount }})
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+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 { tv } from 'tailwind-variants'
 
 // Incoming facet shape from GraphQL API.
 export interface GraphQLFacetItem {
@@ -16,7 +123,11 @@ export interface GraphQLFacetItem {
 }
 
 // Internal normalized option shape (label == filter by default; could be mapped later)
-interface NormalizedFacetOption { value: string; label: string; count: number }
+interface NormalizedFacetOption {
+  value: string
+  label: string
+  count: number
+}
 
 type FacetSelections = Record<string, string[]>
 
@@ -32,12 +143,19 @@ const props = defineProps<{
   displayedCount?: number
   /** Loading state */
   loading?: boolean
+  colorScheme?: 'none' | 'dark' | 'light' | 'accent'
+
+  /** Enable fulltext search */
+  enableTextSearch?: boolean
+  /** Search term value */
+  searchTerm?: string
 }>()
 
 const emit = defineEmits<{
   'update:modelValue': [FacetSelections]
   /** Emitted whenever a selection changes so parent can notify siblings */
   'facets-change': [FacetSelections]
+  'update:searchTerm': [string]
 }>()
 
 // Simple deep clone utility (data is plain: Record<string, string[]>)
@@ -56,19 +174,54 @@ const selections = ref<FacetSelections>(cloneSelections(props.modelValue))
 // Track open state for each popover to handle chevron rotation
 const openPopovers = ref<Record<string, boolean>>({})
 
+// Internal search term state
+const internalSearchTerm = ref(props.searchTerm || '')
+
+// Watch for external search term changes
+watch(
+  () => props.searchTerm,
+  (newValue) => {
+    if (newValue !== internalSearchTerm.value) {
+      internalSearchTerm.value = newValue || ''
+    }
+  },
+)
+
+// Debounce timer for search updates
+let searchTimeout: NodeJS.Timeout | null = null
+
+// Function to handle search term changes with debouncing
+const handleSearchChange = () => {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+  }
+  searchTimeout = setTimeout(() => {
+    emit('update:searchTerm', internalSearchTerm.value)
+  }, 1000)
+}
+
+// Watch internal search term changes and debounce updates
+watch(internalSearchTerm, handleSearchChange)
+
 // Group facets by field.
 const grouped = computed(() => {
   // Map key: { field, label } (label is fieldLabel if present, else field)
-  const map = new Map<{ field: string, label: string }, NormalizedFacetOption[]>()
+  const map = new Map<
+    { field: string; label: string },
+    NormalizedFacetOption[]
+  >()
   const source = props.facets || []
   for (const item of source) {
     const field = item.field
-    const key = Array.from(map.keys()).find(k => k.field === field) || { field, label: item.label }
+    const key = Array.from(map.keys()).find((k) => k.field === field) || {
+      field,
+      label: item.label,
+    }
     if (!map.has(key)) map.set(key, [])
-    map.get(key)!.push({ 
-      "value": item.filter.id, 
-      "label": item.filter.label, 
-      "count": item.count ,
+    map.get(key)!.push({
+      value: item.filter.id,
+      label: item.filter.label,
+      count: item.count,
     })
   }
   // Sort each group alphabetically by label for stable UI.
@@ -90,16 +243,17 @@ const optionMap = computed(() => {
 
 // Stable array of [field, options[]] to simplify template & avoid calling entries() on undefined.
 // Array of [{ filter, label }, options[]] for template
-const groupEntries = computed(() => Array.from(grouped.value?.entries?.() || []))
+const groupEntries = computed(() =>
+  Array.from(grouped.value?.entries?.() || []),
+)
 
 // Per-field trigger labels
-function fieldTriggerLabel(fieldData: { field: string, label: string }) {
+function fieldTriggerLabel(fieldData: { field: string; label: string }) {
   let field: string = fieldData.field
   let label: string = fieldData.label
   const arr = selections.value[field] || []
-  if (!arr.length) return props.placeholder || `Select ${label}`
-  if (arr.length === 1) return optionMap.value.get(arr[0])?.label || arr[0]
-  return `${arr.length} selected`
+  if (!arr.length) return props.placeholder || `${label}`
+  return `${props.placeholder || label} (${arr.length})`
 }
 
 function toggle(field: string, value: string) {
@@ -129,7 +283,10 @@ function clearAll() {
 
 function emitAll() {
   // Clone to avoid mutation issues in parent watchers.
-  const base = selections.value && typeof selections.value === 'object' ? selections.value : {}
+  const base =
+    selections.value && typeof selections.value === 'object'
+      ? selections.value
+      : {}
   const payload: FacetSelections = JSON.parse(JSON.stringify(base))
   emit('update:modelValue', payload)
   emit('facets-change', payload)
@@ -141,82 +298,68 @@ watch(
   (val) => {
     if (val) selections.value = cloneSelections(val)
   },
-  { deep: true }
+  { deep: true },
 )
-</script>
 
-<template>
-  <div class="facets-ui space-y-4" v-if="groupEntries.length">
-    <!-- Clear Filters Button -->
-    <div class="flex">
-      <Button
-        variant="ghost"
-        size="sm"
-        :disabled="!(selections && Object.keys(selections || {}).length)"
-        @click="clearAll"
-        class="flex items-center gap-2"
-      >
-        {{ $texts('listing.clear_filters', 'Clear all filters') }}
-      </Button>
-    </div>
+const popover = tv({
+  base: 'w-full flex items-center justify-between gap-4 cursor-pointer px-6 py-4 rounded-lg transition-all bg-white border-1 shadow-custom-small focus:outline-none focus:ring-2 focus:ring-primary-500 placeholder-gray-300',
+  variants: {
+    colorScheme: {
+      none: 'bg-white text-black',
+      dark: 'bg-white text-black',
+      light: 'bg-white text-black',
+      accent: 'bg-white text-black',
+    },
+  },
+})
 
-    <!-- Facet Groups -->
-    <div class="flex flex-wrap gap-4">
-      <template v-for="([key, opts]) in groupEntries" :key="key.field + '-' + key.label">
-        <div class="w-72">
-          <Label class="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ key.label }}</Label>
-          <Popover @update:open="(open: boolean) => openPopovers[key.field] = open">
-            <PopoverTrigger as-child>
-              <Button variant="outline" class="w-full justify-between" :aria-label="`Facet ${key.label}`">
-                <span>{{ fieldTriggerLabel(key) }}</span>
-                <SpriteSymbol
-                  name="chevron-down"
-                  aria-hidden="true"
-                  :class="[
-                    'size-7 cursor-pointer text-black transition-all duration-300 group-hover/main:text-primary-500',
-                    openPopovers[key.field] ? 'rotate-180' : 'rotate-0'
-                  ]"
-                />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent class="p-0 w-72 bg-white" align="start">
-              <div class="max-h-72 overflow-y-auto py-1">
-                <template v-for="opt in opts" :key="opt.value">
-                  <button
-                    type="button"
-                    class="flex w-full items-center gap-3 px-3 py-2 text-left text-sm hover:bg-muted/60 focus:bg-muted/70 focus:outline-none"
-                    @click="toggle(key.field, opt.value)"
-                  >
-                    <Checkbox
-                      :checked="selections[key.field]?.includes(opt.value)"
-                      @update:checked="toggle(key.field, opt.value)"
-                      class="pointer-events-none"
-                    />
-                    <span class="flex-1 truncate">{{ opt.label }}</span>
-                    <span class="tabular-nums text-muted-foreground text-xs">{{ opt.count }}</span>
-                  </button>
-                </template>
-              </div>
-              <div class="flex items-center justify-between border-t px-2 py-1.5 gap-2">
-                <Button size="sm" variant="ghost" :disabled="!(selections[key.field] && selections[key.field].length)" @click="clearField(key.field)">Clear</Button>
-              </div>
-            </PopoverContent>
-            </Popover>
-        </div>
-      </template>
-    </div>
+const popoverContent = tv({
+  base: 'w-[380px] md:w-[340px] lg:w-[214px] xl:w-[278px] 2xl:w-96 p-0 border-1 shadow-custom-small',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-white',
+      light: 'bg-white',
+      accent: 'bg-white',
+    },
+  },
+})
 
-    <!-- Results Counter -->
-    <div v-if="totalCount !== undefined" class="mb-4">
-      <div class="text-lg font-medium text-gray-900">
-        <span v-if="loading">Loading...</span>
-        <span v-else>
-          {{ totalCount }} {{ totalCount === 1 ? $texts('listing.result', 'result') : $texts('listing.results', 'results') }}
-          <span v-if="displayedCount && displayedCount < totalCount" class="text-sm font-normal text-gray-600">
-            ({{ $texts('listing.showing', 'result') }} {{ displayedCount }})
-          </span>
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
+const noResultsText = tv({
+  base: 'text-lg font-medium',
+  variants: {
+    colorScheme: {
+      none: 'text-black',
+      dark: 'text-white',
+      light: 'text-black',
+      accent: 'text-white',
+    },
+  },
+})
+
+const resetFilterButton = tv({
+  base: '[&>span]:text-sm w-fit px-4 py-1 border-0 rounded-lg transition-all bg-white border-1 border-black shadow-custom-small focus:outline-none focus:ring-2 focus:ring-primary-500 placeholder-gray-300',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50 text-black hover:bg-black hover:text-white',
+      dark: 'bg-gray-50 text-black hover:bg-black hover:text-white',
+      light: 'bg-gray-50 text-black hover:bg-black hover:text-white',
+      accent: 'bg-gray-50 text-black hover:bg-black hover:text-white',
+    },
+  },
+})
+
+const checkbox = tv({
+  base: 'pointer-events-none w-[18px] h-[18px] mt-0.5 transition-all duration-200',
+  variants: {
+    colorScheme: {
+      none: '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',
+      dark: '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',
+      light:
+        'border-gray-300 dark:border-gray-300 bg-gray-100 dark:bg-gray-100 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',
+      accent:
+        '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',
+    },
+  },
+})
+</script>