MealEntry

A single logged-meal row (e.g. meal-tracker's "today's meals" list): name, calories, a calorie-weighted macro bar with a dot legend, and an optional remove action.

Oatmeal with berries

320 kcal

10g Protein 52g Carbs 7g Fat

08:12

1× Chicken breast with rice

550 kcal

42g Protein 60g Carbs 12g Fat

13:17

Protein shake

180 kcal

30g Protein 6g Carbs 3g Fat

16:40

Click a row's remove button, or log a new meal above — both drive the real component's remove event and props, not a mock.

vue

<script setup>
import { MealEntry } from 'yemek'
</script>

<template>
  <MealEntry
    name="Chicken breast with rice"
    :calories="550"
    :protein="42"
    :carbs="60"
    :fat="12"
    portion-label="1×"
    time="13:17"
    removable
    @remove="removeMeal"
  />
</template>

Props

Prop	Type	Default	Description
`name`	`string`	—	Meal name.
`calories`	`number`	—	Total calories.
`protein`	`number`	—	Grams of protein.
`carbs`	`number`	`undefined`	Grams of carbs. Optional — not every logged meal has this (e.g. an AI recognition that only returned calories/protein).
`fat`	`number`	`undefined`	Grams of fat. Optional, same reasoning as `carbs`.
`portionLabel`	`string`	`undefined`	Already-formatted portion text, e.g. `"0.5×"` — no portion math in the component.
`time`	`string`	`undefined`	Already-formatted time, e.g. `"13:17"` — no date/locale logic in the component.
`removable`	`boolean`	`false`	Shows a remove button.

Events

Event	Payload	Fired when
`remove`	—	The remove button is clicked (only rendered when `removable` is `true`).

Behavior notes

Macro bar is calorie-weighted, not gram-weighted (protein 4 kcal/g, carbs 4 kcal/g, fat 9 kcal/g) — shows where the calories actually come from, matching how other nutrition apps frame a "macro split". Can differ slightly from the meal's own calories total (rounding, or a meal missing carbs/fat) — this is a visual approximation, not a recomputation of the real total.
The legend uses colored dot swatches + neutral text + full words (not colored text or letter abbreviations) — color sitting directly on small text was found to be hard to read.
New entries animate in.

MealEntry ​