[Feature Request] VTouchHold Directive for Long-Press of an Element

[185driver]

What problem does this feature solve?

Google's Tooltips MD spec mentions:

A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop).

Vuetify has the mouse hover method solved for tooltips on desktop, but does not yet provide a method to handle a finger long-press on mobile. Instead, a <v-tooltip> displays immediately on tap/click. This is sometimes the desired response, but other times it is not.

Adding a v-touch-hold type directive to vuetify would:

1. Align vuetify more closely to Google's MD spec for tooltips.
2. Potentially make it easy for developers to implement long-press functionality within a vuetify app anywhere it's needed. The current offerings elsewhere (other than here) do not seem a good match for vuetify use.

What is your proposed solution?

A v-touch-hold directive such as used by Quasar seems to have the best combination of features, simplicity, and effectiveness. It:

1. is a directive, so can be applied most anywhere directly
2. allows for custom long-press duration length v-touch-hold:2000, but has a reasonable default setting of 600ms
3. can be used for both mouse and touch events, or limited to just touch events v-touch-hold.noMouse, as desired
4. supports both .stop and .prevent modifier use, if needed
5. calls a method when the duration threshold has been reached v-touch-hold="myHandler"
6. passes the event to the handler, with the developer being able to glean the screen position and duration length (this feature may or may not be that useful)

Thanks for considering this request.

[bryden]

The current offerings elsewhere (other than here) do not seem a good match for vuetify use.

@185driver : have we considered hammerjs? In my opinion it's better aligned with the Google Material Design specs related to touch screen interaction.

Specifically, it has a framework for both tap and long-press, which I didn't see available using quasar's framework.

[johnleider]

I like to provide baseline functionality for users but also give them the ability to integrate third party libraries, such as hammerjs, which offer a full suite of functionality.

With that being said, we have lots of touch directives that we are going to add in version 3.

[jiangzik]

I use <v-list :items="historyList" lines="two" @click:select="goToChat" item-props v-touch="{ start: (item) => swipe('start',item), end: (item) => swipe('end',item), }"

, but I can’t get the item.value or id