PopularFilterPills Component

File Information

• Path: app/components/search/PopularFilterPills.vue
• Purpose: Renders quick-access filter pills for the top custom fields on collage and folder detail pages, allowing users to apply filters without opening the full SearchFilter panel.
• Type: Search Component

Overview

Displays a row of pill buttons for the most-used custom fields (sorted by assets_count descending). Each pill opens a ListLevelThree dropdown inline. Only pills for fields not already active in the current filter set are shown. When a user selects values and closes the dropdown the filter is emitted to the parent page.

Props

Prop	Type	Required	Description
popularFilters	CustomFieldItem[]	Yes	Custom fields to display as pills, pre-sorted by assets_count desc
searchLoading	boolean	No	Disables pills while a search is in progress
appliedFilters	{ level1, level2?, level3 }[]	No	Currently active filters; used to hide pills for already-applied fields
fileTypes	any[]	Yes	File type options passed to ListLevelThree
tagsList	any[]	Yes	Tags list passed to ListLevelThree
customFields	CustomFieldItem[]	Yes	Full custom fields list passed to ListLevelThree
tagsPaginationEnd	boolean	No	Whether tags list has reached the end
fileTypePaginationEnd	boolean	No	Whether file types list has reached the end

Events

Event	Payload	Description
apply-popular-filter	{ fieldId: number; values: string[] }	Emitted when user selects values for a pill filter

Behavior

• Pills are hidden for any field whose id already appears in appliedFilters (via isFieldActive).
• Each pill initializes a reactive filterObjects entry on mount (via a watcher on popularFilters) so ListLevelThree always receives a stable reactive reference.
• When the dropdown closes (capture-filter-close) the same handler fires as on selection (capture-filter), ensuring values are committed on close.

Usage Example

<template>
  <PopularFilterPills
    :popularFilters="popularCustomFields"
    :searchLoading="isLoading"
    :appliedFilters="currentFilters"
    :fileTypes="fileTypes"
    :tagsList="tags"
    :customFields="allCustomFields"
    @apply-popular-filter="onPopularFilter"
  />
</template>

Related Components

• SearchFilter - Full filter panel
• ListLevelThree - Dropdown used by each pill
• AddedFilterOption - Chip display for active filters

Related Documentation

• Components Overview - All components
• Types - CustomFieldItem, SearchFilterObject