add: new list layout design
New design, custom uuid, better handling of swipe
This commit is contained in:
parent
628659c39d
commit
11bcdce6cb
7 changed files with 21 additions and 36 deletions
|
@ -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'
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue