@tresjs/leches/dist/composables/useDraggable/index.d.ts

Tasty GUI for Vue controls 🍰

import { MaybeRefOrGetter } from '@vueuse/shared';
export declare const defaultWindow: (Window & typeof globalThis) | undefined;
export interface Position {
    x: number;
    y: number;
}
export interface RenderableComponent {
    /**
       * The element that the component should be rendered as
       *
       * @default 'div'
       */
    as?: object | string;
}
export type PointerType = 'mouse' | 'touch' | 'pen';
export interface UseDraggableOptions {
    /**
     * Only start the dragging when click on the element directly
     *
     * @default false
     */
    exact?: MaybeRefOrGetter<boolean>;
    /**
     * Prevent events defaults
     *
     * @default false
     */
    preventDefault?: MaybeRefOrGetter<boolean>;
    /**
     * Prevent events propagation
     *
     * @default false
     */
    stopPropagation?: MaybeRefOrGetter<boolean>;
    /**
     * Whether dispatch events in capturing phase
     *
     * @default true
     */
    capture?: boolean;
    /**
     * Element to attach `pointermove` and `pointerup` events to.
     *
     * @default window
     */
    draggingElement?: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>;
    /**
     * Handle that triggers the drag event
     *
     * @default target
     */
    handle?: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>;
    /**
     * Pointer types that listen to.
     *
     * @default ['mouse', 'touch', 'pen']
     */
    pointerTypes?: PointerType[];
    /**
     * Initial position of the element.
     *
     * @default { x: 0, y: 0 }
     */
    initialValue?: MaybeRefOrGetter<Position>;
    /**
     * Callback when the dragging starts. Return `false` to prevent dragging.
     */
    onStart?: (position: Position, event: PointerEvent) => void | false;
    /**
     * Callback during dragging.
     */
    onMove?: (position: Position, event: PointerEvent) => void;
    /**
     * Callback when dragging end.
     */
    onEnd?: (position: Position, event: PointerEvent) => void;
    /**
     * Axis to drag on.
     *
     * @default 'both'
     */
    axis?: 'x' | 'y' | 'both';
}
/**
 * Make elements draggable.
 *
 * @see https://vueuse.org/useDraggable
 * @param target
 * @param options
 */
export declare function useDraggable(target: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>, options?: UseDraggableOptions): {
    position: import('vue').Ref<{
        x: number;
        y: number;
    }, Position | {
        x: number;
        y: number;
    }>;
    isDragging: import('vue').ComputedRef<boolean>;
    style: import('vue').ComputedRef<string>;
    x: import('vue').Ref<number, number>;
    y: import('vue').Ref<number, number>;
} | {
    position: import('vue').Ref<{
        x: number;
        y: number;
    }, Position | {
        x: number;
        y: number;
    }>;
    isDragging: import('vue').ComputedRef<boolean>;
    style: import('vue').ComputedRef<string>;
    x: import('vue').Ref<number, number>;
    y: import('vue').Ref<number, number>;
};
export type UseDraggableReturn = ReturnType<typeof useDraggable>;