add: new list layout design

New design, custom uuid, better handling of swipe
This commit is contained in:
Fiona Lena Urban 2025-05-10 13:32:28 +02:00
parent 628659c39d
commit 11bcdce6cb
7 changed files with 21 additions and 36 deletions

View file

@ -1,5 +1,5 @@
<template>
<article class="PriceCard card">
<article class="PriceCard">
<div class="bottom">
<div class="bg-edit">
<Icon class="icon" name="uil:pen" mode="svg" />
@ -75,15 +75,16 @@ const intl = Intl.NumberFormat('de-DE', {
currency: 'EUR',
})
const { lengthX, isSwiping } = useSwipe(top, {
passive: false,
const { lengthX, direction, isSwiping } = useSwipe(top, {
passive: true,
threshold: 30,
onSwipe() {
if (lengthX.value > 50 || lengthX.value < -50) {
left.value = `${-clamp(lengthX.value, -100, 100)}px`
}
console.log(direction.value)
if (['down', 'up'].includes(direction.value)) return
left.value = `${-clamp(lengthX.value, -100, 100)}px`
},
onSwipeEnd() {
if (['down', 'up'].includes(direction.value)) return
if (lengthX.value < -50) update()
if (lengthX.value > 50) deleteCard()
left.value = '0'