diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
index c8dc38f970f..58d7400b9d7 100644
--- a/docs/src/assets/menu.js
+++ b/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'
}
]
},
diff --git a/docs/src/pages/vue-composables/use-slide-item-swipe.md b/docs/src/pages/vue-composables/use-slide-item-swipe.md
new file mode 100644
index 00000000000..cfdcb5c7b8a
--- /dev/null
+++ b/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
+
+ List Item
+
+```
+```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)
+```
diff --git a/ui/src/composables.js b/ui/src/composables.js
index c6e8d8a9b96..0f133c2b8b6 100644
--- a/ui/src/composables.js
+++ b/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
}
diff --git a/ui/src/composables/use-slide-item-swipe/use-slide-item-swipe.js b/ui/src/composables/use-slide-item-swipe/use-slide-item-swipe.js
new file mode 100644
index 00000000000..ec8efb1ce81
--- /dev/null
+++ b/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 Slide Item
+ * 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:
+ * resetFn - is the method that passed from the event;
+ * param - parameter of any type that you want to pass
+ * @example
+ *