Appearance

SearchFilter Component ​

File Information ​

  • Path: app/components/search/SearchFilter.vue
  • Purpose: Advanced search filter panel with tags, file types, date ranges, and custom fields. Supports infinite scroll pagination.
  • Type: Search Component

Overview ​

Advanced search filter panel with tags, file types, date ranges, and custom fields. Supports infinite scroll pagination.

Features ​

Level-1 menu items ​

The v-list.menu-list.searchFilterMenuList renders each entry of filterListLevel (from useSearchFilter) with the first matching branch:

  1. menu.is_divider - v-divider between the default filters and custom fields.
  2. Level 1 and slug === 'orientation' - item wrapped in a tooltip "Applicable to only Images".
  3. menu.is_tooltip (custom fields) - item wrapped in a bottom tooltip whose text is menu.tag_name (the full field label). Added in fdc9fcd.
  4. Anything else - plain v-list-item.

Disabled filters (disabledFilters[menu.slug]) ignore clicks; enabled ones call captureFilterOption(menu).

Since 6417154 menu.label is rendered inside a <v-list-item-title> in the default slot instead of a <span class="ml-2"> inside the #prepend slot. That moves the text into .v-list-item__content, where _menu-list.scss applies min-width: 0; overflow: hidden and the title gets white-space: nowrap; text-overflow: ellipsis. Combined with max-width: 230px on .searchFilterMenuList, long custom-field labels are cut with "..." and shown in full in the tooltip.

Props ​

Refer to the component source code for prop definitions. Components use TypeScript for type-safe props.

Events ​

Refer to the component source code for event definitions. Components emit typed events.

Usage Example ​

vue
<template>
  <SearchFilter />
</template>

<script setup lang="ts">
import SearchFilter from '~/components/search/SearchFilter.vue'
</script>