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

add: only delete swipe, edit on tap

Browse source 
Edit price cards on tap, only delete swipe exists, fixed dialogs, add ripple
This commit is contained in:
Fiona Lena Urban 2025-05-12 14:56:05 +02:00
parent 1a5dd102e0
commit 38cd37cf74
9 changed files with 145 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<article class="PriceCard roboto-condensed">
<article class="PriceCard roboto-condensed" v-ripple="{ color: 'rgba(0, 0, 0, 0.1)' }">
<div class="bottom">
<div class="bg-edit">
<Icon class="icon" name="uil:pen" mode="svg" />
@ -13,6 +13,7 @@
class="top flex-col"
:class="{ 'animated' : !isSwiping }"
:style="{ left }"
@click="update"
>
<header>
<div class="name-price">
@ -20,10 +21,10 @@
<span>{{ intl.format(+replaceComma(card.price))}}</span>
</div>
<div v-if="$device.isDesktop" class="flex-row gap-default">
<PpButton class="icon-button" @click="update()">
<PpButton class="icon-button" @click="update">
<Icon class="icon" name="uil:pen" mode="svg" />
</PpButton>
<PpButton class="icon-button" @click="deleteCard()">
<PpButton class="icon-button" @click="deleteCard">
<Icon class="icon" name="uil:trash-alt" mode="svg" />
</PpButton>
</div>
@ -78,14 +79,13 @@ const intl = Intl.NumberFormat('de-DE', {
const { lengthX, direction, isSwiping } = useSwipe(top, {
passive: true,
threshold: 30,
threshold: 20,
onSwipe() {
if (['down', 'up'].includes(direction.value)) return
left.value = `${-clamp(lengthX.value, -100, 100)}px`
left.value = `${-clamp(lengthX.value, 0, 100)}px`
},
onSwipeEnd() {
if (['down', 'up'].includes(direction.value)) return
if (lengthX.value < -50) update()
if (lengthX.value > 50) deleteCard()
vibrate(100)
left.value = '0'
@ -98,7 +98,6 @@ const pps = computed(() => (ppr.value / +card.sheets) * 100)
const ppl = computed(() => (pps.value / +card.layers) * 10)
const update = () => emit('update')
const deleteCard = () => emit('remove')
defineExpose({