SearchLibraryItems Component

File Information

• Path: app/components/search/SearchLibraryItems.vue
• Purpose: Renders collage and folder search results (grid or list) in the search overlay and on the search results page.
• Type: Search Component

Overview

Displays the Collages and Folders result tabs. Each item shows its name, a count label, dates and any SearchMatchChip badges from item.search_matches. Items have share and (for folders) download actions. Logic lives in useSearchLibraryItems.

When flag is 'search-bar', a preview image whose URL starts with runtimeConfig.public.backendUrl is treated as a placeholder (isPlaceholderPreview).

Props

Prop	Type	Default	Description
type	SearchLibraryType ('collages' | 'folders')	required	Which result set is rendered
items	any[]	required	Result entries
mode	'grid' | 'list'	'grid'	Layout
flag	'search-bar' | 'results-page'	'results-page'	Where the component is mounted; also sets the analytics source
matchColumn	boolean | null	null	Forces the "Matched In" column on/off; null falls back to "any item has matches beyond its name" (340c6e0)
loading	boolean	false	Hides the list/grid and renders SearchListSkeleton (list) or SearchGridAssetsSkeleton (grid) instead (340c6e0)

Events

None declared.

Usage Example

<!-- SearchBar.vue (overlay) -->
<SearchLibraryItems type="folders" :items="folders" mode="list" flag="search-bar" :match-column="hasMatchColumn" />

<!-- search.vue (results page) -->
<SearchLibraryItems type="collages" :items="collageResults" :mode="assetsMode" flag="results-page" :loading="tabSkeleton('collages')" />

Related

• useSearchLibraryItems
• SearchMatchChip
• Search page