How to make a swipe right gesture swipe back left in Vue 3

Question

I'm new to swipe actions and furthermore dealing with these kinds of mobile-style gestures in the browser. I'm currently using a composable from the vueuse library called useSwipe to create a kind of 'swipe right to reveal buttons, swipe left to hide buttons' thing.

Below you'll see code that works for swiping right but can't figure out how to swipe back left. For a quick idea of the goal I'm trying to achieve check this demo out from a vue2 swiper library -> demo of a library that achieves desired result

<script setup>
const target = ref(null)
const container = ref(null)
const containerWidth = computed(() => container.value?.offsetWidth)
const left = ref('0')

const { isSwiping, lengthX } = useSwipe(target, {
  passive: false,
  onSwipe() {
    if (containerWidth.value) {
      if (lengthX.value < 0) {
        const length = Math.abs(lengthX.value)
        left.value = `${length}px`
      } else {
        left.value = '0'
      }
    }
  },
  onSwipeEnd() {
    if (
      lengthX.value < 0 &&
      containerWidth.value &&
      Math.abs(lengthX.value) / containerWidth.value >= 0.5
    ) {
      left.value = '50%'
    } else {
      left.value = '0'
    }
  }
})
</script>

<template>
<div class="relative flex items-center h-full w-full overflow-hidden p-10 border-b border-b-neutral-200" ref="container">

  // here's the two buttons that will be shown when swiping right

  <div class="flex h-full absolute top-0 left-0">
    <div class="flex justify-center items-center space-x-2 bg-alert w-36 py-7 px-3">
      <p class="uppercase text-white">delete</p>
      <i-outline-trash class="text-white"></i-outline-trash>
    </div>
    <div class="flex justify-center items-center space-x-2 bg-warn w-36 py-7 px-3">
      <p class="uppercase text-white">edit</p>
      <i-outline-pencil-alt class="text-white"></i-outline-pencil-alt>
    </div>
  </div>

  // the part to be swiped right then left

  <div class="flex w-full h-full bg-white space-x-5 absolute p-5 top-0 left-0 z-20" ref="target" :class="{ &quot;transition-all ease-in-out duration-500&quot;: !isSwiping }" :style="{ left }">
    <div class="space-y-2">
      <div class="w-[6px] h-[6px] rounded-full bg-neutral-200"></div>
      <div class="w-[6px] h-[6px] rounded-full bg-neutral-200"></div>
      <div class="w-[6px] h-[6px] rounded-full bg-neutral-200"></div>
    </div>
    <div>1</div>
    <div class="w-full h-full">
      <div class="flex justify-between mb-1">
        <h3>item<span class="ml-2 text-neutral-contrast-light">(variant)</span></h3>
        <p>{{ itemPrice }}</p>
      </div>
      <div class="flex justify-between text-xs">
        <p>+ name</p>
        <p>price</p>
      </div>
    </div>
  </div>
</div>
</template>