SearchResultList

The result rows shown below SearchField — reworks meal-tracker's ad-hoc ErfassenTab result list (plain .result divs with no entrance animation) into a proper yemek component, using the same staggered entrance convention as ChoicePicker.

Playground

<script setup>
import { SearchResultList } from 'yemek'

function pickResult(id) {
  const product = searchResults.value.find((r) => r.id === id)
  // ... proceed with the picked product
}
</script>

<template>
  <SearchResultList
    :results="searchResults.map(r => ({ id: r.barcode ?? r.name, name: r.name, meta: `${r.caloriesPer100g} kcal / 100g` }))"
    @select="pickResult"
  />
</template>

Props

Prop	Type	Default	Description
results	{ id: string; name: string; meta?: string }[]	—	Already-searched/ranked results. meta is a pre-formatted string (e.g. "120 kcal / 100g") — no formatting/locale logic in the kit.

Slots

Slot	Scope	Description
trailing	{ result }	Optional trailing content per row (e.g. a "selected" checkmark or a source-badge icon).

Events

Event	Payload	Fired when
select	string (the picked result's id)	A row is clicked.

Behavior notes

• No search/matching/ranking logic lives here — the consumer already has the ordered results; this only renders and animates them in.
• Rows stagger in on appear (same per-row animation-delay pattern as ChoicePicker) and lift slightly + tint on hover, rather than a fully static list.
• Empty results renders nothing — the consumer decides whether/how to show a "no results" state (e.g. by not rendering SearchResultList at all when the array is empty).
• prefers-reduced-motion: reduce disables the entrance stagger and hover/active transforms.