feat[QSlideItem] new composable incapsulating swipe reset

docs/src/assets/menu.js

@@ -696,6 +696,11 @@ export default [
         name: 'useSplitAttrs',
         badge: 'new',
         path: 'use-split-attrs'
+      },
+      {
+        name: 'useSlideItemSwipe',
+        badge: 'new',
+        path: 'use-slide-item-swipe'
       }
     ]
   },

docs/src/pages/vue-composables/use-slide-item-swipe.md

@@ -0,0 +1,47 @@
+---
+title: useSlideItemSwipe composable
+desc: What is useSlideItemSwipe() composable and how you can use it
+keys: useSlideItemSwipe
+badge: Quasar v2.15+
+---
+
+The `useSlideItemSwipe()` is designed to simplify usage of the [Slide Item](https://quasar.dev/vue-components/slide-item) component. This composable encapsulates invoking user defined method on swipe,
+setting timeout for reset, and resetting the `Slide Item` to initial state by the timer.
+
+The `Slide Item` component requires to set up timer and invoke integrated `reset()` method to return component to initial state.
+The `useSlideItemSwipe()` composable solves this problem and removes the timer in `onBeforeUnmount()` lifecycle hook.
+
+## Syntax
+
+```js
+import { useSlideItemSwipe } from 'quasar'
+
+const slideItemSwipeEventHandler1 = useSlideItemSwipe(
+  (customParam) => {console.log(`Slide Item swipe: ${customParam}`),
+  500}
+)
+
+const slideItemSwipeEventHandler2 = useSlideItemSwipe(() => {console.log('Slide Item swipe'), 700}
+)
+```
+
+```js
+export function useSlideItemSwipe({ resetFn, param }: { resetFn: () => void, param: any }) : void
+```
+
+## Example
+
+```html
+<template>
+    <q-slide-item @left="onLeft({ resetFn: $event.reset, param: 1234 })">List Item</q-slide-item>
+</template>
+```
+```js
+import { useSlideItemSwipe } from 'quasar'
+
+function doSomething(param?) {
+  console.log(`Wow! You just swiped left and passed value: ${param}`)
+  // will print out to console: "Wow! You just swiped left and passed value: 1234"
+}
+const onLeft = useSlideItemSwipe(doSomething, 300)
+```

ui/src/composables.js

@@ -10,6 +10,7 @@ import useRenderCache from './composables/use-render-cache/use-render-cache.js'
 import useSplitAttrs from './composables/use-split-attrs/use-split-attrs.js'
 import useTick from './composables/use-tick/use-tick.js'
 import useTimeout from './composables/use-timeout/use-timeout.js'
+import useSlideItemSwipe from "./composables/use-slide-item-swipe/use-slide-item-swipe.js";
 
 export {
   useDialogPluginComponent,
@@ -23,5 +24,6 @@ export {
   useRenderCache,
   useSplitAttrs,
   useTick,
-  useTimeout
+  useTimeout,
+  useSlideItemSwipe
 }

ui/src/composables/use-slide-item-swipe/use-slide-item-swipe.js

@@ -0,0 +1,50 @@
+import { onBeforeUnmount } from 'vue'
+
+/**
+ * Composable that encapsulates invoking user defined method on swipe, setting timeout for reset, and resetting
+ * of the <a href="https://quasar.dev/vue-components/slide-item">Slide Item</a>
+ * to the initial state by the timer.
+ * @param fn - method that should be invoked when item is swiped
+ * @param ms - time in milliseconds until the Slide Item will reset to initial state
+ * @return invokable method, that should be passed to the swipe event of the list item.
+ * This method accepts ({resetFn, param}), where:<br>
+ *    resetFn - is the method that passed from the event;<br>
+ *    param - parameter of any type that you want to pass
+ * @example
+ * <script setup>
+ *  import { useSlideItemSwipe } from 'quasar'
+ *  function doSomething(param?) {
+ *     console.log(`Wow! You just swiped left and passed value: ${param}`)
+ *     // will print out to console: "Wow! You just swiped left and passed value: 1234"
+ *  }
+ *  const onLeft = useSlideItemSwipe(doSomething, 300)
+ * <script>
+ * <template>
+ *    <q-slide-item @left="onLeft({ resetFn: $event.reset, param: 1234 })">List Item</q-slide-item>
+ * </template>
+ */
+export default function (fn, ms) {
+  let timer = null
+
+  function removeTimeout () {
+    if (timer !== null) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  function finalize (resetFn) {
+    timer = setTimeout(() => {
+      if (resetFn) resetFn()
+    }, ms)
+  }
+
+  onBeforeUnmount(() => {
+    removeTimeout()
+  })
+
+  return ({ resetFn, param }) => {
+    fn(param)
+    finalize(resetFn)
+  }
+}

ui/types/composables.d.ts

@@ -68,3 +68,8 @@ export function useTimeout(): {
   registerTimeout(fn: () => void, delay?: string | number): void;
   removeTimeout(): void;
 };
+
+export function useSlideItemSwipe<T>({ resetFn, param }: {
+  resetFn: () => void,
+  param?: T
+}) : void