SearchMatchDetails Component

File Information

• Path: app/components/search/SearchMatchDetails.vue
• Purpose: Body of the "Matched In" hover menu: lists the tags, custom fields or description text that made a search result match.
• Type: Search Component

Overview

Rendered inside the v-menu of SearchMatchChip. It takes one SearchMatch and renders one of three layouts. All derived state comes from useSearchMatchDetails.

match.kind	Title	Body
tag	Matched tags	one v-chip per tag (match.value first, then match.others). A tag with a built link renders as <a target="_blank" rel="noopener noreferrer"> to /{brand}/search?q=<encrypted>; without one it is plain text
custom_field	Matched custom fields	one v-chip.chip-custom per field, shown as Label: value; the label part is omitted when label is empty
description	Matched in description	the full description as match.parts; runs with hit: true are wrapped in <mark class="search-match-hit">

Tag links open in a new tab so the current search is not lost. Clicking a linked tag fires the Amplitude TAG_CLICKED event ('tag clicked') with source: 'search-match'.

Props

Prop	Type	Required	Description
match	SearchMatch	Yes	One entry from the asset's search_matches
assetId	string | number	No	Sent as asset_id on the tag-click event (stringified, null when absent)

SearchMatch (app/types/search.ts):

type SearchMatch =
  | { kind: 'tag'; value: string; others: string[] }
  | { kind: 'custom_field'; label: string; value: string; others: CustomFieldMatch[] }
  | { kind: 'description'; snippet: string; parts: TextPart[] }

Events

None.

Usage Example

<!-- SearchMatchChip.vue -->
<SearchMatchDetails :match="match" :asset-id="assetId" />

Related

• useSearchMatchDetails
• SearchMatchChip