Skip to content

useSearchMatchChip Composable ​

File Information ​

  • Path: app/composables/core/components/search/useSearchMatchChip.ts
  • Purpose: Icon, label, count and hover-open state for SearchMatchChip
  • Type: Core Composable (Search Component)

Overview ​

Maps match.kind to an icon and title (tag -> tagsIcon, custom_field -> customFieldsIcon, description -> infoIcon). The count is 1 + match.others.length, or 0 for description so that badge shows the icon only.

Only one match menu is open at a time across the page: open state is kept in the shared useState('search-match-open-menu') and compared with this chip's useId(). Hovering opens the menu after HOVER_OPEN_DELAY (120 ms) and leaving closes it after HOVER_CLOSE_DELAY (150 ms); moving the pointer into the menu content cancels the close. Timers are cleared in onBeforeUnmount.

Parameters ​

NameTypeDescription
props.matchSearchMatchMatch entry
props.assetIdstring | number (optional)Asset ID

Return Type ​

KeyDescription
compactIconComputed icon name
compactTitleComputed accessible label
compactCountComputed badge count (0 hides the number)
menuOpenWritable computed bound to the v-menu
onHoverEnter(), onHoverLeave()Badge hover handlers
contentHover{ onMouseenter, onMouseleave } passed as the menu's content-props

Usage ​

typescript
const { compactIcon, compactTitle, compactCount, menuOpen, onHoverEnter, onHoverLeave, contentHover } =
  useSearchMatchChip(props)