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 + +``` +```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 + *