3c30d1f35a
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 2m17s
58 lines
1.6 KiB
Svelte
58 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { ShoppingListRow } from '$lib/server/shopping/repository';
|
|
import { formatQuantity } from '$lib/quantity-format';
|
|
|
|
let { row, onToggle }: {
|
|
row: ShoppingListRow;
|
|
onToggle: (row: ShoppingListRow, next: boolean) => void;
|
|
} = $props();
|
|
|
|
const qtyStr = $derived(formatQuantity(row.total_quantity));
|
|
const hasUnit = $derived(!!row.display_unit && row.display_unit.trim().length > 0);
|
|
</script>
|
|
|
|
<label class="row" class:checked={row.checked}>
|
|
<input
|
|
type="checkbox"
|
|
checked={row.checked === 1}
|
|
onchange={(e) => onToggle(row, (e.currentTarget as HTMLInputElement).checked)}
|
|
/>
|
|
<span class="text">
|
|
<span class="name">
|
|
{#if qtyStr}
|
|
<span class="qty">{qtyStr}{hasUnit ? ` ${row.display_unit}` : ''}</span>
|
|
{/if}
|
|
{row.display_name}
|
|
</span>
|
|
<span class="src">aus {row.from_recipes}</span>
|
|
</span>
|
|
</label>
|
|
|
|
<style>
|
|
.row {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
padding: 0.75rem;
|
|
border: 1px solid #e4eae7;
|
|
border-radius: 10px;
|
|
background: white;
|
|
cursor: pointer;
|
|
min-height: 60px;
|
|
}
|
|
.row input {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-top: 0.1rem;
|
|
flex-shrink: 0;
|
|
accent-color: #2b6a3d;
|
|
}
|
|
.text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
|
|
.name { font-size: 1rem; }
|
|
.qty { font-weight: 600; margin-right: 0.3rem; }
|
|
.src { color: #888; font-size: 0.82rem; }
|
|
.row.checked { background: #f6f8f7; }
|
|
.row.checked .name,
|
|
.row.checked .qty { text-decoration: line-through; color: #888; }
|
|
</style>
|