webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: new price card design

Browse source 
Bigger header, icons for deletion and edit, form validation
This commit is contained in:
Fiona Lena Urban 2025-05-05 20:40:17 +02:00
parent 7aa21c1c19
commit 8f924151da
11 changed files with 290 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/components/Pp/PriceCard.vue
View file

@ -7,11 +7,16 @@
<header class="padding">
<div class="name-price">
<span>{{ card.name || 'Kein Name' }}</span>
<span>{{ intl.format(card.price)}}</span>
<span>{{ intl.format(+replaceComma(card.price))}}</span>
</div>
<div class="flex-row gap-default">
<PpButton class="icon-button" @click="update()">
<Icon class="icon" name="uil:pen" mode="svg" />
</PpButton>
<PpButton class="icon-button" @click="deleteCard()">
<Icon class="icon" name="uil:times" mode="svg" />
</PpButton>
</div>
<PpButton class="text-white" @click="update()">
<Icon class="icon" name="uil:ellipsis-v" mode="svg" />
</PpButton>
</header>
<main class="wrapper padding">
<div class="info flex-col">
@ -60,8 +65,5 @@ const intl = Intl.NumberFormat('de-DE', {
const update = () => emit('update')
const deleteCard = async () => {
root.value?.addEventListener('transitionend', () => emit('remove'))
deleting.value = true
}
const deleteCard = () => emit('remove')
</script>