Appearance

SearchAssets Component ​

File Information ​

  • Path: app/components/search/SearchAssets.vue
  • Purpose: Search results display component with grid/list view, pagination, and asset cards.
  • Type: Search Component

Overview ​

Search results display component with grid/list view, pagination, and asset cards.

Features ​

  • List view (localMode === 'list' && !loading): one v-list-item.table-list-item per asset, with an optional checkbox column and a "Matched In" cell when hasMatchColumn is true.
  • Grid view (localMode === 'grid' && !loading): v-row.gap-24 of asset cards.
  • Loading skeletons (340c6e0): when loading is true the list/grid is not rendered and the component shows SearchListSkeleton (list) or SearchGridAssetsSkeleton :loading="true" (grid) itself. The search page used to render these skeletons next to the component; it now passes :loading="tabSkeleton('assets')" instead.
  • Matched In column: hasMatchColumn = props.matchColumn ?? <any row has search matches beyond its name>. Passing matchColumn forces the column on or off; null/omitted keeps the per-list check.
  • Share and download dialogs are mounted inside <ClientOnly>.

Props ​

SearchAssetsProps (app/types/search.ts):

PropTypeDefault
digitalAssetsSearchAssetsDigitalAsset[]required
totalcountnumber-
mode'list' | 'grid''list'
modeshowbooleanfalse
selected_itemsany[]-
checkboxbooleanfalse
flagstring'search-bar'
lastIndexnumber-1
matchColumnboolean | null- (treated as null)
loadingbooleanfalse

Events ​

EventPayload
update:selected_itemsany[]
view-all-
update:mode'list' | 'grid'
update-asset:selectedItemsany[]
update-last-indexnumber
save-search-key-
save-search-filter-
trackasset

Usage Example ​

vue
<!-- app/pages/[brand_name]/search.vue -->
<SearchAssets
  v-if="tabContent('assets') || tabSkeleton('assets')"
  :digitalAssets="digitalAssets"
  :mode="assetsMode"
  flag="results-page"
  :checkbox="true"
  :loading="tabSkeleton('assets')"
  :selected_items="assetsSelectedItems"
  :lastIndex="lastIndexAssets"
/>

<!-- SearchBar.vue dropdown -->
<SearchAssets :digitalAssets="assets" :totalcount="assetCount" flag="search-bar" :match-column="hasMatchColumn" @view-all="redirectToSearch('assets')" />