GoalSummaryCard

A small title + key/value rows + edit button card — e.g. ProfilTab's "target calories/protein" summary. Deliberately its own component rather than reusing BodyMetricsCard: that component's body-fat reveal (flash/spring/pulse) is a distinct, more elaborate feature bolted onto a similar shell — duplicating the plain shell here matches how RecipeCard's confirm button duplicates MealReviewCard's rather than forcing a shared primitive from just two call sites.

Playground

Ziele

Kalorien2.400 kcal

Protein150 g

Click "Neu würfeln" — each value pops in on change, and the button briefly shows a checkmark + "Gespeichert".

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

const saved = ref(false)

async function saveGoals() {
  await supabase.auth.updateUser({ data: { targetCalories, targetProtein } })
  saved.value = true
  setTimeout(() => { saved.value = false }, 2000)
}
</script>

<template>
  <GoalSummaryCard
    title="Ziele"
    :rows="[
      { label: 'Kalorien', value: `${targetCalories} kcal` },
      { label: 'Protein', value: `${targetProtein} g` }
    ]"
    edit-label="Bearbeiten"
    saved-label="Gespeichert"
    :saved="saved"
    @edit="openGoalsDialog"
  />
</template>

Props

Prop	Type	Default	Description
title	string	—	Card heading.
rows	{ label: string; value: string }[]	—	Already-formatted key/value rows.
editLabel	string	—	Edit button label.
savedLabel	string	undefined	Shown (with a checkmark) instead of editLabel while saved is true.
saved	boolean	false	Swaps the edit button for a checkmark + savedLabel — the consumer flips this after its own save call resolves.

Events

Event	Payload	Fired when
edit	—	The edit button is clicked.

Behavior notes

• No goal-computation or editing/dialog logic lives here — rows are already-formatted strings, and the kit owns no editing UI (same rule as MetricRing's editable/BodyMetricsCard's edit) — the consumer opens whatever dialog it already has.
• Each row's value pops in on change (a <Transition> keyed on the value), rather than swapping instantly.
• prefers-reduced-motion: reduce keeps the value swap but drops the pop transform to a plain fade.