@iqual/nuxt-icms 1.3.1 → 1.4.0

package/components/Search/Facets/FacetDropdownUI.vue

@@ -1,33 +1,63 @@
 <template>
-  <div class="facets-ui space-y-5" v-if="groupEntries.length">
-    <!-- Clear Filters Button -->
-
-    <DesignSystemAtomsGridRow class="w-full p-0">
+  <div
+    :class="themedClass('containerClass', 'facets-ui space-y-5')"
+    v-if="groupEntries.length"
+  >
+    <!-- Filters row -->
+    <DesignSystemAtomsGridRow
+      :class="themedClass('filtersRowClass', 'w-full p-0')"
+    >
+      <!-- Text search input column -->
       <div
         v-if="enableTextSearch"
-        class="col-span-12 md:col-span-6 lg:col-span-3"
+        :class="
+          themedClass(
+            'textSearchInputColumnClass',
+            'col-span-12 md:col-span-6 lg:col-span-3',
+          )
+        "
       >
+        <!-- Text search input -->
         <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"
+          :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',
+            )
+          "
+          :colorScheme="colorScheme"
           v-model="internalSearchTerm"
         />
       </div>
 
+      <!-- Filters column -->
       <div
         v-for="[field, opts] in groupEntries"
         :key="field.field"
-        class="col-span-12 md:col-span-6 lg:col-span-3"
+        :class="
+          themedClass(
+            'filtersColumnClass',
+            'col-span-12 md:col-span-6 lg:col-span-3',
+          )
+        "
       >
         <Popover
           @update:open="(open: boolean) => (openPopovers[field.field] = open)"
+          :class="popover({ colorScheme })"
         >
-          <PopoverTrigger :class="popover({ colorScheme })">
-            <span class="truncate text-h8">{{ fieldTriggerLabel(field) }}</span>
+          <PopoverTrigger :class="popoverTrigger({ colorScheme })">
+            <span
+              :class="
+                themedClass('popoverTriggerLabelClass', 'text-h8 truncate')
+              "
+            >
+              {{ fieldTriggerLabel(field) }}
+            </span>
             <SpriteSymbol
               name="chevron-down"
               aria-hidden="true"
               :class="[
-                'size-6 text-primary-500 transition-all duration-300',
+                popoverTriggerIcon({ colorScheme }),
                 openPopovers[field.field] ? 'rotate-180' : 'rotate-0',
               ]"
             />
@@ -36,81 +66,123 @@
             :class="popoverContent({ colorScheme })"
             align="start"
           >
-            <div class="max-h-72 overflow-y-auto pt-1">
+            <!-- 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"
-                  class="flex w-full items-center gap-4 px-4 py-3 text-left focus:outline-none"
                   @click="toggle(field.field, opt.value)"
+                  :class="filterOptionButton({ colorScheme })"
                 >
                   <Checkbox
                     :checked="selections[field.field]?.includes(opt.value)"
                     @update:checked="toggle(field.field, opt.value)"
                     :class="checkbox({ colorScheme })"
+                    tabindex="-1"
                   />
-                  <span class="flex-1 truncate text-h9 font-normal">{{
-                    opt.label
-                  }}</span>
-                  <span class="mt-0.5 text-sm tabular-nums">{{
-                    opt.count
-                  }}</span>
+
+                  <span :class="filterOptionLabel({ colorScheme })">
+                    {{ opt.label }}
+                  </span>
+
+                  <span :class="filterOptionCount({ colorScheme })">
+                    {{ opt.count }}
+                  </span>
                 </button>
               </template>
             </div>
-            <div class="flex items-center gap-2 px-4 pb-4 pt-3">
-              <DesignSystemAtomsButton
+
+            <!-- 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)
                 "
-                :label="$texts('listing.clear_filter', 'Clear')"
                 @click="clearField(field.field)"
-                :color-scheme="colorScheme"
-                :button-class="resetFilterButton({ colorScheme })"
-              />
+                :class="resetFilterButton({ colorScheme })"
+              >
+                <span>{{ $texts('listing.clear_filter', 'Clear') }}</span>
+              </button>
             </div>
           </PopoverContent>
         </Popover>
       </div>
 
-      <div class="col-span-12 flex items-center md:col-span-6 lg:col-span-3">
-        <DesignSystemAtomsButton
+      <!-- Reset filters column -->
+      <div
+        :class="
+          themedClass(
+            'resetFiltersColumnClass',
+            'col-span-12 flex items-center md:col-span-6 lg:col-span-3',
+          )
+        "
+      >
+        <!-- Reset filters button -->
+        <button
           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"
-        />
+          :class="resetFiltersButton({ colorScheme })"
+        >
+          <span>
+            {{ $texts('listing.clear_filters', 'Clear all filters') }}
+          </span>
+        </button>
       </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>
+    <!-- Results Counter row -->
+    <div v-if="totalCount !== undefined" :class="resultsCount({ colorScheme })">
+      <span v-if="loading" :class="themedClass('resultsCountLoadingClass')">
+        {{ $texts('listing.loading', 'Loading...') }}
+      </span>
+      <span v-else :class="themedClass('resultsTotalCountClass')">
+        {{ totalCount }}
+        {{
+          totalCount === 1
+            ? $texts('listing.result', 'result')
+            : $texts('listing.results', 'results')
+        }}
+        <span
+          v-if="displayedCount && displayedCount < totalCount"
+          :class="
+            themedClass(
+              'resultsDisplayedCountClass',
+              'text-sm font-normal text-gray-600',
+            )
+          "
+        >
+          ({{ $texts('listing.showing', 'result') }} {{ displayedCount }})
         </span>
-      </div>
+      </span>
     </div>
   </div>
 </template>
+
 <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'
 
+const themedClass = useTheme()
+
 // Incoming facet shape from GraphQL API.
 export interface GraphQLFacetItem {
   field: string
@@ -143,7 +215,7 @@ const props = defineProps<{
   displayedCount?: number
   /** Loading state */
   loading?: boolean
-  colorScheme?: 'none' | 'dark' | 'light' | 'accent'
+  colorScheme?: ColorScheme
 
   /** Enable fulltext search */
   enableTextSearch?: boolean
@@ -302,63 +374,265 @@ watch(
 )
 
 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',
+  base: themedClass('popoverBase'),
   variants: {
     colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-white text-black',
-      light: 'bg-white text-black',
-      accent: 'bg-white text-black',
+      none: themedClass('popoverVariantsColorSchemeNone'),
+      dark: themedClass('popoverVariantsColorSchemeDark'),
+      light: themedClass('popoverVariantsColorSchemeLight'),
+      accent: themedClass('popoverVariantsColorSchemeAccent'),
+    },
+  },
+})
+
+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',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'popoverTriggerVariantsColorSchemeNone',
+        'bg-white text-black border-gray-200 focus-visible:ring-primary',
+      ),
+      dark: themedClass(
+        'popoverTriggerVariantsColorSchemeDark',
+        'bg-gray-900 text-white border-gray-800 focus-visible:ring-primary',
+      ),
+      light: themedClass(
+        'popoverTriggerVariantsColorSchemeLight',
+        'bg-gray-50 text-black border-gray-200 focus-visible:ring-primary',
+      ),
+      accent: themedClass(
+        'popoverTriggerVariantsColorSchemeAccent',
+        'bg-primary text-white border-primary focus-visible:ring-white',
+      ),
+    },
+  },
+})
+
+const popoverTriggerIcon = tv({
+  base: themedClass(
+    'popoverTriggerIconBase',
+    'size-6 transition-all duration-300',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'popoverTriggerIconVariantsColorSchemeNone',
+        'text-primary',
+      ),
+      dark: themedClass(
+        'popoverTriggerIconVariantsColorSchemeDark',
+        'text-primary',
+      ),
+      light: themedClass(
+        'popoverTriggerIconVariantsColorSchemeLight',
+        'text-primary',
+      ),
+      accent: themedClass(
+        'popoverTriggerIconVariantsColorSchemeAccent',
+        'text-white',
+      ),
     },
   },
 })
 
 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',
+  base: themedClass(
+    'popoverContentBase',
+    'w-[var(--radix-popper-anchor-width)] p-0 border-1 rounded-none shadow-none',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-white',
-      light: 'bg-white',
-      accent: 'bg-white',
+      none: themedClass(
+        'popoverContentVariantsColorSchemeNone',
+        'bg-white border-gray-200',
+      ),
+      dark: themedClass(
+        'popoverContentVariantsColorSchemeDark',
+        'bg-gray-900 border-gray-800',
+      ),
+      light: themedClass(
+        'popoverContentVariantsColorSchemeLight',
+        'bg-gray-50 border-gray-200',
+      ),
+      accent: themedClass(
+        'popoverContentVariantsColorSchemeAccent',
+        'bg-primary border-primary',
+      ),
     },
   },
 })
 
-const noResultsText = tv({
-  base: 'text-lg font-medium',
+const resultsCount = tv({
+  base: themedClass('resultsTextBase', 'mb-4 text-lg font-medium'),
   variants: {
     colorScheme: {
-      none: 'text-black',
-      dark: 'text-white',
-      light: 'text-black',
-      accent: 'text-white',
+      none: themedClass('resultsTextVariantsColorSchemeNone', 'text-black'),
+      dark: themedClass('resultsTextVariantsColorSchemeDark', 'text-white'),
+      light: themedClass('resultsTextVariantsColorSchemeLight', 'text-black'),
+      accent: themedClass('resultsTextVariantsColorSchemeAccent', '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',
+  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',
+  ),
+  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',
+      ),
+      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',
+      ),
+      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',
+      ),
+      accent: themedClass(
+        'resetFilterButtonVariantsColorSchemeAccent',
+        'bg-gray-950 border-gray-950 focus:ring-white text-white enabled:hover:text-black enabled:hover:bg-white enabled:hover:border-white',
+      ),
+    },
+  },
+})
+
+const resetFiltersButton = tv({
+  base: themedClass(
+    'resetFiltersButtonBase',
+    'py-3 px-10 transition-all border-1 focus:outline-none focus:ring-2',
+  ),
   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',
+      none: themedClass(
+        'resetFiltersButtonVariantsColorSchemeBase',
+        'bg-primary border-primary focus:ring-black text-white hover:text-primary 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',
+      ),
+      light: themedClass(
+        'resetFiltersButtonVariantsColorSchemeNone',
+        'bg-primary border-primary focus:ring-black text-white hover:text-primary hover:bg-gray-50 hover:border-primary',
+      ),
+      accent: themedClass(
+        'resetFiltersButtonVariantsColorSchemeAccent',
+        'bg-gray-950 border-gray-950 focus:ring-white text-white hover:text-black hover:bg-white hover:border-white',
+      ),
     },
   },
 })
 
 const checkbox = tv({
-  base: 'pointer-events-none w-[18px] h-[18px] mt-0.5 transition-all duration-200',
+  base: themedClass(
+    'checkboxBase',
+    'pointer-events-none w-[18px] h-[18px] mt-0.5 transition-all duration-200',
+  ),
+  variants: {
+    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',
+      ),
+      dark: themedClass(
+        'checkboxVariantsColorSchemeDark',
+        'text-white 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-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: 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',
+      ),
+      accent: themedClass(
+        'checkboxVariantsColorSchemeAccent',
+        'text-white border-primary-600 dark:border-primary-600 bg-primary-600 dark:bg-primary-600 data-[state=checked]:bg-primary-600 dark:data-[state=checked]:bg-primary-600 text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary-600 dark:data-[state=checked]:border-primary-600',
+      ),
+    },
+  },
+})
+
+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',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'filterOptionButtonVariantsColorSchemeNone',
+        'focus-visible:ring-offset-white focus-visible:ring-primary',
+      ),
+      dark: themedClass(
+        'filterOptionButtonVariantsColorSchemeDark',
+        'focus-visible:ring-offset-gray-900 focus-visible:ring-primary',
+      ),
+      light: themedClass(
+        'filterOptionButtonVariantsColorSchemeLight',
+        'focus-visible:ring-offset-gray-50 focus-visible:ring-primary',
+      ),
+      accent: themedClass(
+        'filterOptionButtonVariantsColorSchemeAccent',
+        'focus-visible:ring-offset-primary focus-visible:ring-white',
+      ),
+    },
+  },
+})
+
+const filterOptionLabel = tv({
+  base: themedClass(
+    'filterOptionLabelBase',
+    'text-h9 flex-1 truncate font-normal',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'filterOptionLabelVariantsColorSchemeNone',
+        'text-black',
+      ),
+      dark: themedClass(
+        'filterOptionLabelVariantsColorSchemeDark',
+        'text-white',
+      ),
+      light: themedClass(
+        'filterOptionLabelVariantsColorSchemeLight',
+        'text-black',
+      ),
+      accent: themedClass(
+        'filterOptionLabelVariantsColorSchemeAccent',
+        'text-white',
+      ),
+    },
+  },
+})
+
+const filterOptionCount = tv({
+  base: themedClass('filterOptionCountBase', 'mt-0.5 text-sm tabular-nums'),
   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',
+      none: themedClass(
+        'filterOptionCountVariantsColorSchemeNone',
+        'text-black',
+      ),
+      dark: themedClass(
+        'filterOptionCountVariantsColorSchemeDark',
+        'text-white',
+      ),
+      light: themedClass(
+        'filterOptionCountVariantsColorSchemeLight',
+        'text-black',
+      ),
+      accent: themedClass(
+        'filterOptionCountVariantsColorSchemeAccent',
+        'text-white',
+      ),
     },
   },
 })