anbraten/splitt-the-bill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 add env to useDb and apply prettier
tinyedge/deploy Deployed by TinyEdge
Details

Browse Source
This commit is contained in:
anbraten
2026-08-07 13:28:26 +02:00
parent 67727f96ab
commit cbe1b42f6e
54 changed files with 5492 additions and 2406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/AddExpenseForm.vue
+72 -38
View File
@@ -1,48 +1,60 @@
<script setup lang="ts">
import type { ExpenseView, ParticipantView } from '../types'
import type { ExpenseView, ParticipantView } from '../types';
const props = defineProps<{
participants: ParticipantView[]
currency: string
editing?: ExpenseView | null
defaultPayerId?: number
}>()
participants: ParticipantView[];
currency: string;
editing?: ExpenseView | null;
defaultPayerId?: number;
}>();
const emit = defineEmits<{
submit: [payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }]
cancel: []
}>()
submit: [
payload: {
description: string;
amountCents: number;
payerId: number;
participantIds: number[];
},
];
cancel: [];
}>();
const description = ref(props.editing?.description ?? '')
const amount = ref(props.editing ? fromCents(props.editing.amountCents).toString() : '')
const payerId = ref<number>(props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]!.id)
const selectedIds = ref<number[]>(props.editing?.participantIds ?? props.participants.map(p => p.id))
const error = ref('')
const description = ref(props.editing?.description ?? '');
const amount = ref(
props.editing ? fromCents(props.editing.amountCents).toString() : '',
);
const payerId = ref<number>(
props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]!.id,
);
const selectedIds = ref<number[]>(
props.editing?.participantIds ?? props.participants.map((p) => p.id),
);
const error = ref('');
function toggleParticipant(id: number) {
if (selectedIds.value.includes(id)) {
selectedIds.value = selectedIds.value.filter(existing => existing !== id)
}
else {
selectedIds.value = [...selectedIds.value, id]
selectedIds.value = selectedIds.value.filter((existing) => existing !== id);
} else {
selectedIds.value = [...selectedIds.value, id];
}
}
function onSubmit() {
error.value = ''
const amountCents = toCents(Number(amount.value))
error.value = '';
const amountCents = toCents(Number(amount.value));
if (!description.value.trim()) {
error.value = 'Description is required.'
return
error.value = 'Description is required.';
return;
}
if (!Number.isFinite(amountCents) || amountCents <= 0) {
error.value = 'Enter a valid amount.'
return
error.value = 'Enter a valid amount.';
return;
}
if (selectedIds.value.length === 0) {
error.value = 'Select at least one participant to split with.'
return
error.value = 'Select at least one participant to split with.';
return;
}
emit('submit', {
@@ -50,14 +62,21 @@ function onSubmit() {
amountCents,
payerId: payerId.value,
participantIds: selectedIds.value,
})
});
}
</script>
<template>
<form class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="onSubmit">
<form
class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900"
@submit.prevent="onSubmit"
>
<div>
<label for="description" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Description</label>
<label
for="description"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>Description</label
>
<input
id="description"
v-model="description"
@@ -65,11 +84,14 @@ function onSubmit() {
required
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
placeholder="Dinner, taxi, groceries…"
>
/>
</div>
<div>
<label for="amount" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
<label
for="amount"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>
Amount ({{ currency }})
</label>
<input
@@ -81,33 +103,45 @@ function onSubmit() {
required
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
placeholder="0.00"
>
/>
</div>
<div>
<label for="payer" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Paid by</label>
<label
for="payer"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>Paid by</label
>
<select
id="payer"
v-model="payerId"
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:focus:ring-orange-900"
>
<option v-for="participant in participants" :key="participant.id" :value="participant.id">
<option
v-for="participant in participants"
:key="participant.id"
:value="participant.id"
>
{{ participant.name }}
</option>
</select>
</div>
<div>
<span class="block text-sm font-medium text-stone-700 dark:text-stone-300">Split equally among</span>
<span class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>Split equally among</span
>
<div class="mt-2 flex flex-wrap gap-2">
<button
v-for="participant in participants"
:key="participant.id"
type="button"
class="rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
:class="selectedIds.includes(participant.id)
? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
: 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'"
:class="
selectedIds.includes(participant.id)
? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
: 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'
"
@click="toggleParticipant(participant.id)"
>
{{ participant.name }}
app/components/BalanceSummary.vue
+116 -63
View File
@@ -1,92 +1,97 @@
<script setup lang="ts">
import type { ParticipantView, SettlementView } from '../types'
import { isValidPaymentLink } from '~~/shared/utils/paymentLink'
import type { ParticipantView, SettlementView } from '../types';
import { isValidPaymentLink } from '~~/shared/utils/paymentLink';
const props = defineProps<{
slug: string
participants: ParticipantView[]
netBalances: Record<number, number>
settlements: SettlementView[]
currency: string
}>()
slug: string;
participants: ParticipantView[];
netBalances: Record<number, number>;
settlements: SettlementView[];
currency: string;
}>();
const emit = defineEmits<{ settled: [], updated: [] }>()
const emit = defineEmits<{ settled: []; updated: [] }>();
const { lastLink, rememberLink } = usePaymentLinkCache()
const { lastLink, rememberLink } = usePaymentLinkCache();
const settlingKey = ref<string | null>(null)
const editingId = ref<number | null>(null)
const editValue = ref('')
const editError = ref('')
const savingLink = ref(false)
const settlingKey = ref<string | null>(null);
const editingId = ref<number | null>(null);
const editValue = ref('');
const editError = ref('');
const savingLink = ref(false);
function nameOf(id: number) {
return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
return props.participants.find((p) => p.id === id)?.name ?? 'Unknown';
}
function paymentLinkOf(id: number) {
return props.participants.find(p => p.id === id)?.paymentLink || null
return props.participants.find((p) => p.id === id)?.paymentLink || null;
}
function initialOf(participantName: string) {
return participantName.trim().charAt(0).toUpperCase() || '?'
return participantName.trim().charAt(0).toUpperCase() || '?';
}
function keyOf(settlement: SettlementView) {
return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`;
}
function startEdit(participant: ParticipantView) {
editingId.value = participant.id
editValue.value = participant.paymentLink ?? lastLink.value ?? ''
editError.value = ''
editingId.value = participant.id;
editValue.value = participant.paymentLink ?? lastLink.value ?? '';
editError.value = '';
}
function cancelEdit() {
editingId.value = null
editError.value = ''
editingId.value = null;
editError.value = '';
}
async function saveEdit(participant: ParticipantView) {
const trimmed = editValue.value.trim()
const trimmed = editValue.value.trim();
if (trimmed && !isValidPaymentLink(trimmed)) {
editError.value = 'Enter a valid link starting with http:// or https://.'
return
editError.value = 'Enter a valid link starting with http:// or https://.';
return;
}
savingLink.value = true
savingLink.value = true;
try {
await $fetch(`/api/pots/${props.slug}/participants/${participant.id}`, {
method: 'PATCH',
body: { paymentLink: trimmed },
})
if (trimmed) rememberLink(trimmed)
editingId.value = null
emit('updated')
}
finally {
savingLink.value = false
});
if (trimmed) rememberLink(trimmed);
editingId.value = null;
emit('updated');
} finally {
savingLink.value = false;
}
}
async function markSettled(settlement: SettlementView) {
const key = keyOf(settlement)
settlingKey.value = key
const key = keyOf(settlement);
settlingKey.value = key;
try {
await $fetch(`/api/pots/${props.slug}/payments`, {
method: 'POST',
body: { fromId: settlement.fromId, toId: settlement.toId, amountCents: settlement.amountCents },
})
emit('settled')
}
finally {
settlingKey.value = null
body: {
fromId: settlement.fromId,
toId: settlement.toId,
amountCents: settlement.amountCents,
},
});
emit('settled');
} finally {
settlingKey.value = null;
}
}
</script>
<template>
<div class="space-y-4">
<p v-if="participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
<p
v-if="participants.length === 0"
class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400"
>
No one's in this Pot yet. Add people from the settings page.
</p>
@@ -100,12 +105,21 @@ async function markSettled(settlement: SettlementView) {
<button
type="button"
class="flex min-w-0 items-center gap-3 text-left"
@click="editingId === participant.id ? cancelEdit() : startEdit(participant)"
@click="
editingId === participant.id
? cancelEdit()
: startEdit(participant)
"
>
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
<div
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300"
>
{{ initialOf(participant.name) }}
</div>
<span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
<span
class="truncate font-medium text-stone-900 dark:text-stone-100"
>{{ participant.name }}</span
>
</button>
<div class="flex shrink-0 items-center gap-3">
<a
@@ -121,23 +135,37 @@ async function markSettled(settlement: SettlementView) {
<span
class="text-sm font-semibold"
:class="{
'text-emerald-600 dark:text-emerald-400': (netBalances[participant.id] ?? 0) > 0,
'text-rose-600 dark:text-rose-400': (netBalances[participant.id] ?? 0) < 0,
'text-stone-400 dark:text-stone-500': (netBalances[participant.id] ?? 0) === 0,
'text-emerald-600 dark:text-emerald-400':
(netBalances[participant.id] ?? 0) > 0,
'text-rose-600 dark:text-rose-400':
(netBalances[participant.id] ?? 0) < 0,
'text-stone-400 dark:text-stone-500':
(netBalances[participant.id] ?? 0) === 0,
}"
>
<template v-if="(netBalances[participant.id] ?? 0) === 0">
settled up
</template>
<template v-else>
{{ (netBalances[participant.id] ?? 0) > 0 ? '+' : '−' }}{{ formatCurrency(Math.abs(netBalances[participant.id] ?? 0), currency) }}
{{ (netBalances[participant.id] ?? 0) > 0 ? '+' : '−'
}}{{
formatCurrency(
Math.abs(netBalances[participant.id] ?? 0),
currency,
)
}}
</template>
</span>
</div>
</div>
<div v-if="editingId === participant.id" class="mt-3 space-y-2 border-t border-stone-100 pt-3 dark:border-stone-800">
<label class="block text-xs font-medium text-stone-500 dark:text-stone-400">
<div
v-if="editingId === participant.id"
class="mt-3 space-y-2 border-t border-stone-100 pt-3 dark:border-stone-800"
>
<label
class="block text-xs font-medium text-stone-500 dark:text-stone-400"
>
Payment link for {{ participant.name }}
</label>
<div class="flex gap-2">
@@ -147,7 +175,7 @@ async function markSettled(settlement: SettlementView) {
placeholder="https://paypal.me/yourname"
class="block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
@keyup.enter="saveEdit(participant)"
>
/>
<button
type="button"
:disabled="savingLink"
@@ -176,7 +204,10 @@ async function markSettled(settlement: SettlementView) {
Suggested payments
</h2>
<p v-if="settlements.length === 0" class="text-sm text-stone-500 dark:text-stone-400">
<p
v-if="settlements.length === 0"
class="text-sm text-stone-500 dark:text-stone-400"
>
Everyone is settled up.
</p>
<ul v-else class="space-y-2">
@@ -187,22 +218,42 @@ async function markSettled(settlement: SettlementView) {
>
<div class="flex items-center gap-2">
<div class="flex min-w-0 flex-1 items-center gap-2">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
<div
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800"
>
{{ initialOf(nameOf(settlement.fromId)) }}
</div>
<span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.fromId) }}</span>
<span
class="truncate text-sm font-medium text-stone-700 dark:text-stone-300"
>{{ nameOf(settlement.fromId) }}</span
>
<svg class="h-4 w-4 shrink-0 text-orange-400 dark:text-orange-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L11.29 6.15a.75.75 0 1 1 1.02-1.1l4.5 4.25a.75.75 0 0 1 0 1.1l-4.5 4.25a.75.75 0 1 1-1.02-1.1l3.098-3.1H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
<svg
class="h-4 w-4 shrink-0 text-orange-400 dark:text-orange-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3 10a.75.75 0 0 1 .75-.75h10.638L11.29 6.15a.75.75 0 1 1 1.02-1.1l4.5 4.25a.75.75 0 0 1 0 1.1l-4.5 4.25a.75.75 0 1 1-1.02-1.1l3.098-3.1H3.75A.75.75 0 0 1 3 10Z"
clip-rule="evenodd"
/>
</svg>
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
<div
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800"
>
{{ initialOf(nameOf(settlement.toId)) }}
</div>
<span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.toId) }}</span>
<span
class="truncate text-sm font-medium text-stone-700 dark:text-stone-300"
>{{ nameOf(settlement.toId) }}</span
>
</div>
<span class="shrink-0 rounded-full bg-white px-2.5 py-1 text-sm font-bold text-orange-700 shadow-sm dark:bg-stone-900 dark:text-orange-300">
<span
class="shrink-0 rounded-full bg-white px-2.5 py-1 text-sm font-bold text-orange-700 shadow-sm dark:bg-stone-900 dark:text-orange-300"
>
{{ formatCurrency(settlement.amountCents, currency) }}
</span>
</div>
@@ -223,7 +274,9 @@ async function markSettled(settlement: SettlementView) {
class="rounded-full bg-orange-500 px-3 py-1 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-orange-600 disabled:opacity-50"
@click="markSettled(settlement)"
>
{{ settlingKey === keyOf(settlement) ? 'Marking…' : 'Mark as paid' }}
{{
settlingKey === keyOf(settlement) ? 'Marking…' : 'Mark as paid'
}}
</button>
</div>
</li>
app/components/ExpenseList.vue
+68 -25
View File
@@ -1,34 +1,42 @@
<script setup lang="ts">
import type { ExpenseView, ParticipantView } from '../types'
import type { ExpenseView, ParticipantView } from '../types';
const props = defineProps<{
expenses: ExpenseView[]
participants: ParticipantView[]
currency: string
}>()
expenses: ExpenseView[];
participants: ParticipantView[];
currency: string;
}>();
const emit = defineEmits<{ edit: [expense: ExpenseView], remove: [id: number] }>()
const emit = defineEmits<{
edit: [expense: ExpenseView];
remove: [id: number];
}>();
const expandedId = ref<number | null>(null)
const expandedId = ref<number | null>(null);
function nameOf(id: number) {
return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
return props.participants.find((p) => p.id === id)?.name ?? 'Unknown';
}
function namesOf(ids: number[]) {
return ids.map(nameOf).join(', ')
return ids.map(nameOf).join(', ');
}
function toggle(id: number) {
expandedId.value = expandedId.value === id ? null : id
expandedId.value = expandedId.value === id ? null : id;
}
const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a.createdAt))
const sorted = computed(() =>
[...props.expenses].sort((a, b) => b.createdAt - a.createdAt),
);
</script>
<template>
<div class="space-y-3">
<p v-if="expenses.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
<p
v-if="expenses.length === 0"
class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400"
>
No expenses yet. Add the first one below.
</p>
@@ -36,17 +44,37 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
v-for="expense in sorted"
:key="expense.id"
class="rounded-2xl border p-4 shadow-sm"
:class="expense.type === 'payment'
? 'border-emerald-100 bg-emerald-50/60 dark:border-emerald-900/60 dark:bg-emerald-950/20'
: 'border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900'"
:class="
expense.type === 'payment'
? 'border-emerald-100 bg-emerald-50/60 dark:border-emerald-900/60 dark:bg-emerald-950/20'
: 'border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900'
"
>
<button type="button" class="flex w-full items-start justify-between gap-2 text-left" @click="toggle(expense.id)">
<div v-if="expense.type === 'payment'" class="flex min-w-0 items-center gap-2">
<svg class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
<button
type="button"
class="flex w-full items-start justify-between gap-2 text-left"
@click="toggle(expense.id)"
>
<div
v-if="expense.type === 'payment'"
class="flex min-w-0 items-center gap-2"
>
<svg
class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
<p class="truncate font-medium text-emerald-800 dark:text-emerald-300">
{{ nameOf(expense.payerId) }} paid {{ nameOf(expense.participantIds[0]!) }}
<p
class="truncate font-medium text-emerald-800 dark:text-emerald-300"
>
{{ nameOf(expense.payerId) }} paid
{{ nameOf(expense.participantIds[0]!) }}
</p>
</div>
<div v-else class="min-w-0">
@@ -60,7 +88,11 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
<div class="flex shrink-0 items-center gap-2">
<span
class="font-medium"
:class="expense.type === 'payment' ? 'text-emerald-700 dark:text-emerald-300' : 'text-stone-900 dark:text-stone-100'"
:class="
expense.type === 'payment'
? 'text-emerald-700 dark:text-emerald-300'
: 'text-stone-900 dark:text-stone-100'
"
>
{{ formatCurrency(expense.amountCents, currency) }}
</span>
@@ -70,7 +102,11 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
viewBox="0 0 20 20"
fill="currentColor"
>
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.148l3.71-3.918a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.148l3.71-3.918a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z"
clip-rule="evenodd"
/>
</svg>
</div>
</button>
@@ -78,9 +114,16 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
<div
v-if="expandedId === expense.id"
class="mt-3 space-y-3 border-t pt-3"
:class="expense.type === 'payment' ? 'border-emerald-100 dark:border-emerald-900/60' : 'border-stone-100 dark:border-stone-800'"
:class="
expense.type === 'payment'
? 'border-emerald-100 dark:border-emerald-900/60'
: 'border-stone-100 dark:border-stone-800'
"
>
<p v-if="expense.type === 'expense'" class="text-xs text-stone-400 dark:text-stone-500">
<p
v-if="expense.type === 'expense'"
class="text-xs text-stone-400 dark:text-stone-500"
>
split among {{ namesOf(expense.participantIds) }}
</p>
<div class="flex gap-3">
app/components/NameForm.vue
+11 -8
View File
@@ -1,20 +1,23 @@
<script setup lang="ts">
const props = defineProps<{ title?: string, buttonLabel?: string }>()
const emit = defineEmits<{ submit: [name: string] }>()
const props = defineProps<{ title?: string; buttonLabel?: string }>();
const emit = defineEmits<{ submit: [name: string] }>();
const name = ref('')
const name = ref('');
function onSubmit() {
if (!name.value.trim()) return
emit('submit', name.value.trim())
if (!name.value.trim()) return;
emit('submit', name.value.trim());
}
</script>
<template>
<form class="space-y-3" @submit.prevent="onSubmit">
<div>
<label for="name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
{{ props.title ?? 'What\'s your name?' }}
<label
for="name"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>
{{ props.title ?? "What's your name?" }}
</label>
<input
id="name"
@@ -24,7 +27,7 @@ function onSubmit() {
required
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
placeholder="Your name"
>
/>
</div>
<button
type="submit"