Quasar Touch Swipe Issues

Question

I have two problems, first one being the directives aren't working as expected.

I've grabbed the example of swiping only right:

<div class="q-pa-md row justify-center">
      <q-card
        v-touch-swipe.mouse.right="handleSwipe"
        class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
        style="min-height: 200px; min-width: 300px"
      >
        <div v-if="info" class="custom-info">
          <pre>{{ info }}</pre>
        </div>
        <div v-else>
          Swipe to right only
          <q-icon name="arrow_forward" />
        </div>
      </q-card>
</div>

setup() {
    const info = ref(null)

    return {
      info,
      handleSwipe({evt, ...newInfo}) {
        info.value = newInfo
      }
    }
  }

When I swipe left I get this:

I shouldn't be able to trigger this right? So imagine I want to slide through items horizontally, if I'm catching the up and down events, I mess up with scrolling, I can't even ignore them.

The other problem is using this with images, I've used the draggable="false" like stated in the docs, and it does not trigger the swipe. Example:

<div
      v-touch-swipe.horizontal="handleSwipe"
      class="flex row cursor-pointer"
      @click="$router.push({
      name: 'productDetails',
      params: {
        id: product.id
      }
      })"
    >
      <q-img
        :src="imageSource"
        :draggable="false"
        placeholder-src="~assets/placeholder.png"
        @dragstart.prevent
        loading="lazy"
        spinner-color="primary"
        :srcset="sourceSet"
        sizes="(max-width: 400px) 400w,
              (min-width: 400px) and (max-width: 800px) 800w,
              (min-width: 800px) and (max-width: 1200px) 1200w,
              (min-width: 1200px) 1600w"
      />
</div>

I can't reproduce this on jsfiddle though:

https://jsfiddle.net/andrempcosta/17d6uctw/1/

Docs: https://next.quasar.dev/vue-directives/touch-swipe#introduction

Answer 1

Upgraded to last RC, fixed the problem.