vuestic-ui/dist/types/composables/useSwipe.d.ts

Vue 3 UI Framework

import { PropType, ShallowRef, ExtractPropTypes } from 'vue';
type SwipeDirection = 'up' | 'down' | 'left' | 'right' | '';
export type SwipeState = {
    direction: SwipeDirection;
    duration: number;
};
type AllowedSwipeDirection = 'all' | 'horizontal' | 'vertical' | SwipeDirection;
/**
 * swipable - enables swiping.
 * swipeDistance - distance in px considered sufficient for the swipe event.
 * swipeDirection - allowed and handled swipe directions.
 */
export declare const useSwipeProps: {
    swipable: {
        type: BooleanConstructor;
        default: boolean;
    };
    swipeDistance: {
        type: NumberConstructor;
        default: number;
    };
    swipeDirection: {
        type: PropType<AllowedSwipeDirection>;
        default: string;
    };
};
/**
 * @description composable for handling swipes direction via mouse or touchpad.
 * @param props - use swipe props.
 * @param container - swipable container shallow ref.
 * @param cb - callback for every swipe event.
 * @example
 *  props: { ...useSwipeProps }
 *  const container = shallowRef<HTMLElement>()
 *  const onSwipe = () => { if(swipeState === 'left') { local component's logic } }
 *  const { swipeState } = useSwipe(props, container, onSwipe)
 */
export declare const useSwipe: (props: ExtractPropTypes<typeof useSwipeProps>, container: ShallowRef<HTMLElement | undefined>, cb: (state: SwipeState) => void) => {
    swipeState: SwipeState;
};
export {};