@vdnd/v3/dist/index.d.ts

Easy used vue drag and drop component library.

import * as vue from 'vue';
import { PropType, Ref, Plugin } from 'vue';

interface DndElementMatcher<Value = any> {
    /**
     * The internal id of the element must be the specified.
     */
    id?: number;
    /**
     * The element must play the specified role.
     */
    role?: 'source' | 'dropzone' | '*';
    /**
     * The label of the element must be one of the specified.
     */
    label?: string | string[];
    /**
     * The value of the element must be the specified, vdnd will use `Object.is` to compare.
     */
    value?: Value;
    /**
     * The nativeEl of the element must be one of the specified.
     */
    nativeEl?: HTMLElement | HTMLElement[];
    /**
     * The the element must be droppable or not.
     */
    droppable?: boolean;
    /**
     * The the element must be draggable or not.
     */
    draggable?: boolean;
}
declare class DndElement<Value = any> {
    parent: DndElement<Value> | null;
    nativeEl: HTMLElement | null;
    label: string | undefined;
    value: Value | undefined;
    draggable: boolean;
    droppable: boolean;
    /** internal id */
    id: number;
    role: {
        /** true, if as source */
        source: boolean;
        /** true, if as dropzone */
        dropzone: boolean;
    };
    children: DndElement<Value>[];
    constructor(parent: DndElement<Value> | null, nativeEl: HTMLElement | null, label?: string | undefined, value?: Value | undefined, source?: boolean, draggable?: boolean, dropzone?: boolean, droppable?: boolean);
    /**
     * Returns true, if the element satisfies specified matcher.
     */
    matches(matcher: DndElementMatcher): boolean;
}

interface DndEvent<V = any, E extends Event | null = Event | null> {
    type: string;
    /** The current source. */
    source: DndElement<V>;
    /** The root element rendered by DndProvider(NativeDnd, MouseDnd, TouchDnd). */
    container: HTMLElement;
    originalEvent: E;
}
interface DragEvent$1<V = any, E extends Event | null = Event | null> extends DndEvent<V, E> {
    type: 'drag';
    /** The current drop target. */
    over?: DndElement<V> | null;
}
interface DragStartEvent<V = any, E extends Event = Event> extends DndEvent<V, E> {
    type: 'drag:start';
    originalEvent: E;
}
interface DragPreventEvent<V = any, E extends Event = Event> extends DndEvent<V, E> {
    type: 'drag:prevent';
    /** The source attempting to drag. */
    source: DndElement<V>;
    originalEvent: E;
}
interface DragEnterEvent<V = any, E extends Event = Event> extends DndEvent<V, E> {
    type: 'drag:enter';
    /** The dropzone which is about to become the current drop target. */
    enter: DndElement<V>;
    originalEvent: E;
}
interface DragOverEvent<V = any, E extends Event | null = Event | null> extends DndEvent<V, E> {
    type: 'drag:over';
    /** The current drop target. */
    over: DndElement<V>;
}
interface DragLeaveEvent<V = any, E extends Event = Event> extends DndEvent<V, E> {
    type: 'drag:leave';
    /**
     * The previous current drop target or the current drop target.
     * */
    leave: DndElement<V>;
    originalEvent: E;
}
interface DropEvent<V = any, E extends Event = Event> extends DndEvent<V, E> {
    type: 'drop';
    /** The current drop target. */
    dropzone: DndElement<V>;
    originalEvent: E;
}
interface DragEndEvent<V = any, E extends Event | null = Event | null> extends DndEvent<V, E> {
    type: 'drag:end';
    /** The current drop target. */
    over: DndElement<V> | null;
}

type MirrorCreator<V = any, E extends Event = Event> = (params: {
    /** The current source. */
    source: DndElement<V>;
    /** The root element rendered by DndProvider(NativeDnd, MouseDnd, TouchDnd). */
    container: HTMLElement;
    originalEvent: E;
}) => Node;
type CSSSelector = string;
type MirrorAppendTo<V = any, E extends Event = Event> = CSSSelector | Node | ((params: {
    /** The current source. */
    source: DndElement<V>;
    /** The root element rendered by DndProvider(NativeDnd, MouseDnd, TouchDnd). */
    container: HTMLElement;
    originalEvent: E;
}) => Node);
type MirrorOptions<V = any, E extends Event = Event> = {
    /**
     * Creates the mirror.
     */
    create?: MirrorCreator<V, E>;
    /** Classes of the mirror, default is 'dnd-mirror'. */
    className?: string | string[];
    /**
     * Keeps the dimensions(width and height) of the mirror consistent with that of the current source,
     * default is false.
     */
    constrainDimensions?: boolean;
    /**
     * The implementation of cursorOffsetX refers to:
     * https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage
     */
    cursorOffsetX?: number;
    /**
     * The implementation of cursorOffsetY refers to:
     * https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage
     */
    cursorOffsetY?: number;
    /**
     * The parent node used when inserting the mirror.
     */
    appendTo?: MirrorAppendTo<V, E>;
};
type DndType = 'native' | 'mouse' | 'touch';
interface DndClasses {
    'source:dragging': string | string[];
    'source:draggable': string | string[];
    'source:disabled': string | string[];
    'dropzone:over': string | string[];
    'dropzone:droppable': string | string[];
    'dropzone:disabled': string | string[];
}
interface CommonDndOptions {
    type: DndType;
    /**
     * Enables debugging mode or not,
     * debug mode: vdnd will display properties of `DndSource` and `DndDropzone` in DOM.
     */
    debug?: boolean | ('id' | 'label' | 'value' | 'value-type' | 'role' | 'draggable' | 'droppable')[];
    /**
     * Enables strict mode or not,
     * strict mode: the current source will not act as the current drop target.
     */
    strict?: boolean;
    /** Class of the root element rendered by `DndSource`. */
    source?: string;
    /** Class of the root element rendered by `DndDropzone`. */
    dropzone?: string;
    /** Class of the root element rendered by `DndHandle`. */
    handle?: string;
    /**
     * Classes attached to source or dropzone based on drag and drop interaction states.
     *
     * https://www.npmjs.com/package/@vdnd/v3
     */
    classes?: Partial<DndClasses>;
}
interface MouseDndOptions<V = any> extends CommonDndOptions {
    type: 'mouse';
    mirror?: MirrorOptions<V, MouseEvent>;
    /**
     * @experimental
     * Suppresses `UIEvent` or not while dragging.
     */
    suppressUIEvent?: boolean;
}
interface TouchDndOptions<V = any> extends CommonDndOptions {
    type: 'touch';
    mirror?: MirrorOptions<V, TouchEvent>;
    /**
     * https://www.npmjs.com/package/@vdnd/v3
     */
    delay?: number;
}
interface NativeDndOptions extends CommonDndOptions {
    type: 'native';
}
type DndOptions = NativeDndOptions | MouseDndOptions | TouchDndOptions;
type MapDndType<O extends DndOptions> = O extends NativeDndOptions ? 'native' : O extends MouseDndOptions ? 'mouse' : O extends TouchDndOptions ? 'touch' : never;

type NativeDragEvent = globalThis.DragEvent;
type DndEventTable<O extends DndOptions = DndOptions, V = any> = O extends MouseDndOptions ? DndEventTableForMouse<V> : O extends TouchDndOptions ? DndEventTableForTouch<V> : O extends NativeDndOptions ? DndEventTableForNative<V> : never;
type DndEventTableForMouse<V = any> = {
    drag: DragEvent$1<V, null>;
    'drag:start': DragStartEvent<V, MouseEvent>;
    'drag:prevent': DragPreventEvent<V, MouseEvent>;
    'drag:enter': DragEnterEvent<V, MouseEvent>;
    'drag:over': DragOverEvent<V, null>;
    'drag:leave': DragLeaveEvent<V, MouseEvent | KeyboardEvent>;
    'drag:end': DragEndEvent<V, MouseEvent | KeyboardEvent>;
    drop: DropEvent<V, MouseEvent>;
};
type DndEventTableForTouch<V = any> = {
    drag: DragEvent$1<V, null>;
    'drag:start': DragStartEvent<V, TouchEvent>;
    'drag:prevent': DragPreventEvent<V, TouchEvent>;
    'drag:enter': DragEnterEvent<V, TouchEvent>;
    'drag:over': DragOverEvent<V, null>;
    'drag:leave': DragLeaveEvent<V, TouchEvent>;
    'drag:end': DragEndEvent<V, TouchEvent>;
    drop: DropEvent<V, TouchEvent>;
};
type DndEventTableForNative<V = any> = {
    drag: DragEvent$1<V, NativeDragEvent>;
    'drag:start': DragStartEvent<V, NativeDragEvent>;
    'drag:prevent': DragPreventEvent<V, NativeDragEvent>;
    'drag:enter': DragEnterEvent<V, NativeDragEvent>;
    'drag:over': DragOverEvent<V, NativeDragEvent>;
    'drag:leave': DragLeaveEvent<V, NativeDragEvent>;
    'drag:end': DragEndEvent<V, NativeDragEvent>;
    drop: DropEvent<V, NativeDragEvent>;
};
type DndInstance<O extends DndOptions = DndOptions, V = any> = {
    type: MapDndType<O>;
    options: Omit<O, 'type'>;
    /**
     * The current source.
     */
    source: DndElement<V> | null;
    /**
     * The current drop target.
     */
    over: DndElement<V> | null;
    /**
     * The root element of the DndElementTree composed by sources and dropzones in DndProvider(NativeDnd, MouseDnd, TouchDnd).
     */
    rootDndElement: DndElement<V>;
    /**
     * Returns true, if the current source exists.
     */
    isDragging(): boolean;
    /**
     * Returns true, if label of the current source is specified label.
     */
    isDragging(label: string): boolean;
    /**
     * Returns true, if label of the current source is one of specified labels.
     */
    isDragging(labels: string[]): boolean;
    /**
     * Returns true, if the current source satisfies specified matcher.
     */
    isDragging(matcher: DndElementMatcher): boolean;
    /**
     * Returns true, if the current drop target exists.
     */
    isOver(): boolean;
    /**
     * Returns true, if label of the current drop target is equal to specified label.
     */
    isOver(label: string): boolean;
    /**
     * Returns true, if label of the current drop target is one of specified labels.
     */
    isOver(labels: string[]): boolean;
    /**
     * Returns true, if the current drop target satisfies specified matcher.
     */
    isOver(matcher: DndElementMatcher): boolean;
    on<K extends keyof DndEventTable<O, V>>(type: K, callback: (event: DndEventTable<O, V>[K]) => void): void;
    once<K extends keyof DndEventTable<O, V>>(type: K, callback: (event: DndEventTable<O, V>[K]) => void): void;
    off<K extends keyof DndEventTable<O, V>>(type: K, callback: (event: DndEventTable<O, V>[K]) => void): void;
    /** @internal */
    $setOver(over: DndElement<V> | null): void;
    /** @internal */
    $setSource(source: DndElement<V> | null): void;
    /** @internal */
    $setRootDndElement(rootDndElement: DndElement<V>): void;
    /** @internal */
    $emit<K extends keyof DndEventTable<O, V>>(type: K, payload: DndEventTable<O, V>[K]): void;
    /** @internal */
    $destroy(): void;
};

declare const NativeDnd: vue.DefineComponent<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    instance: {
        type: PropType<DndInstance<NativeDndOptions>>;
        required: true;
    };
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
    drag: (_e: DndEventTableForNative["drag"]) => true;
    'drag:start': (_e: DndEventTableForNative["drag:start"]) => true;
    'drag:prevent': (_e: DndEventTableForNative["drag:prevent"]) => true;
    'drag:enter': (_e: DndEventTableForNative["drag:enter"]) => true;
    'drag:over': (_e: DndEventTableForNative["drag:over"]) => true;
    'drag:leave': (_e: DndEventTableForNative["drag:leave"]) => true;
    drop: (_e: DndEventTableForNative["drop"]) => true;
    'drag:end': (_e: DndEventTableForNative["drag:end"]) => true;
    initialized: () => true;
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    instance: {
        type: PropType<DndInstance<NativeDndOptions>>;
        required: true;
    };
}>> & Readonly<{
    onDrag?: ((_e: DragEvent$1<any, DragEvent>) => any) | undefined;
    "onDrag:start"?: ((_e: DragStartEvent<any, DragEvent>) => any) | undefined;
    "onDrag:prevent"?: ((_e: DragPreventEvent<any, DragEvent>) => any) | undefined;
    "onDrag:enter"?: ((_e: DragEnterEvent<any, DragEvent>) => any) | undefined;
    "onDrag:over"?: ((_e: DragOverEvent<any, DragEvent>) => any) | undefined;
    "onDrag:leave"?: ((_e: DragLeaveEvent<any, DragEvent>) => any) | undefined;
    onDrop?: ((_e: DropEvent<any, DragEvent>) => any) | undefined;
    "onDrag:end"?: ((_e: DragEndEvent<any, DragEvent>) => any) | undefined;
    onInitialized?: (() => any) | undefined;
}>, {
    tag: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const MouseDnd: vue.DefineComponent<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    instance: {
        type: PropType<DndInstance<MouseDndOptions>>;
        required: true;
    };
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
    drag: (_e: DndEventTableForMouse["drag"]) => true;
    'drag:start': (_e: DndEventTableForMouse["drag:start"]) => true;
    'drag:prevent': (_e: DndEventTableForMouse["drag:prevent"]) => true;
    'drag:enter': (_e: DndEventTableForMouse["drag:enter"]) => true;
    'drag:over': (_e: DndEventTableForMouse["drag:over"]) => true;
    'drag:leave': (_e: DndEventTableForMouse["drag:leave"]) => true;
    drop: (_e: DndEventTableForMouse["drop"]) => true;
    'drag:end': (_e: DndEventTableForMouse["drag:end"]) => true;
    initialized: () => true;
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    instance: {
        type: PropType<DndInstance<MouseDndOptions>>;
        required: true;
    };
}>> & Readonly<{
    onDrag?: ((_e: DragEvent$1<any, null>) => any) | undefined;
    "onDrag:start"?: ((_e: DragStartEvent<any, MouseEvent>) => any) | undefined;
    "onDrag:prevent"?: ((_e: DragPreventEvent<any, MouseEvent>) => any) | undefined;
    "onDrag:enter"?: ((_e: DragEnterEvent<any, MouseEvent>) => any) | undefined;
    "onDrag:over"?: ((_e: DragOverEvent<any, null>) => any) | undefined;
    "onDrag:leave"?: ((_e: DragLeaveEvent<any, MouseEvent | KeyboardEvent>) => any) | undefined;
    onDrop?: ((_e: DropEvent<any, MouseEvent>) => any) | undefined;
    "onDrag:end"?: ((_e: DragEndEvent<any, MouseEvent | KeyboardEvent>) => any) | undefined;
    onInitialized?: (() => any) | undefined;
}>, {
    tag: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const TouchDnd: vue.DefineComponent<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    instance: {
        type: PropType<DndInstance<TouchDndOptions>>;
        required: true;
    };
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
    drag: (_e: DndEventTableForTouch["drag"]) => true;
    'drag:start': (_e: DndEventTableForTouch["drag:start"]) => true;
    'drag:prevent': (_e: DndEventTableForTouch["drag:prevent"]) => true;
    'drag:enter': (_e: DndEventTableForTouch["drag:enter"]) => true;
    'drag:over': (_e: DndEventTableForTouch["drag:over"]) => true;
    'drag:leave': (_e: DndEventTableForTouch["drag:leave"]) => true;
    drop: (_e: DndEventTableForTouch["drop"]) => true;
    'drag:end': (_e: DndEventTableForTouch["drag:end"]) => true;
    initialized: () => true;
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    instance: {
        type: PropType<DndInstance<TouchDndOptions>>;
        required: true;
    };
}>> & Readonly<{
    onDrag?: ((_e: DragEvent$1<any, null>) => any) | undefined;
    "onDrag:start"?: ((_e: DragStartEvent<any, TouchEvent>) => any) | undefined;
    "onDrag:prevent"?: ((_e: DragPreventEvent<any, TouchEvent>) => any) | undefined;
    "onDrag:enter"?: ((_e: DragEnterEvent<any, TouchEvent>) => any) | undefined;
    "onDrag:over"?: ((_e: DragOverEvent<any, null>) => any) | undefined;
    "onDrag:leave"?: ((_e: DragLeaveEvent<any, TouchEvent>) => any) | undefined;
    onDrop?: ((_e: DropEvent<any, TouchEvent>) => any) | undefined;
    "onDrag:end"?: ((_e: DragEndEvent<any, TouchEvent>) => any) | undefined;
    onInitialized?: (() => any) | undefined;
}>, {
    tag: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const DndSource: vue.DefineComponent<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    label: StringConstructor;
    value: null;
    draggable: {
        type: BooleanConstructor;
        default: boolean;
    };
    dropzone: BooleanConstructor;
    droppable: {
        type: BooleanConstructor;
        default: undefined;
    };
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    label: StringConstructor;
    value: null;
    draggable: {
        type: BooleanConstructor;
        default: boolean;
    };
    dropzone: BooleanConstructor;
    droppable: {
        type: BooleanConstructor;
        default: undefined;
    };
}>> & Readonly<{}>, {
    dropzone: boolean;
    droppable: boolean;
    draggable: boolean;
    tag: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const DndDropzone: vue.DefineComponent<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    label: StringConstructor;
    value: null;
    droppable: {
        type: BooleanConstructor;
        default: boolean;
    };
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    label: StringConstructor;
    value: null;
    droppable: {
        type: BooleanConstructor;
        default: boolean;
    };
}>> & Readonly<{}>, {
    droppable: boolean;
    tag: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const DndHandle: vue.DefineComponent<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
}>> & Readonly<{}>, {
    tag: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const defaultDndClasses: DndClasses;
declare const defaultMirrorOptions: MirrorOptions;

declare function useDndInstance<O extends DndOptions, V>(options: O): DndInstance<O, V>;
declare function useMouseDnd<V = any>(options?: Omit<MouseDndOptions<V>, 'type'>): DndInstance<MouseDndOptions<V>, V>;
declare function useTouchDnd<V = any>(options?: Omit<TouchDndOptions<V>, 'type'>): DndInstance<TouchDndOptions<V>, V>;
declare function useNativeDnd<V = any>(options?: Omit<NativeDndOptions, 'type'>): DndInstance<NativeDndOptions, V>;

type MaybeRef<T> = T | Ref<T>;
/**
 * Inserts new elements at the start of an array, and returns the new length of the array.
 * @param array The array.
 * @param items Elements to insert at the start of the array.
 */
declare function unshift<T = unknown>(array: MaybeRef<T[]>, ...items: T[]): number;
/**
 * Removes the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
 * @param array The array.
 */
declare function shift<T = unknown>(array: MaybeRef<T[]>): T | undefined;
/**
 * Appends new elements to the end of an array, and returns the new length of the array.
 * @param array The array.
 * @param items New elements to add to the array.
 */
declare function push<T = unknown>(array: MaybeRef<T[]>, ...items: T[]): number;
/**
 * Removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
 * @param array The array.
 */
declare function pop<T = unknown>(array: MaybeRef<T[]>): T | undefined;
/**
 * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
 * @param array The array.
 * @param start The zero-based location in the array from which to start removing elements.
 * @param deleteCount The number of elements to remove.
 * @returns An array containing the elements that were deleted.
 */
declare function splice<T = unknown>(array: MaybeRef<T[]>, start: number, deleteCount?: number): T[];
/**
 * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
 * @param array The array.
 * @param start The zero-based location in the array from which to start removing elements.
 * @param deleteCount The number of elements to remove.
 * @param items Elements to insert into the array in place of the deleted elements.
 * @returns An array containing the elements that were deleted.
 */
declare function splice<T = unknown>(array: MaybeRef<T[]>, start: number, deleteCount: number, ...items: T[]): T[];
/**
 * Returns the value of the first element in the array where predicate is true, and undefined otherwise.
 * @param array The array.
 * @param predicate find calls predicate once for each element of the array, in ascending
 * order, until it finds one where predicate returns true. If such an element is found,
 * find immediately returns that element value. Otherwise, find returns undefined.
 */
declare function find<T = unknown>(array: MaybeRef<T[]>, predicate: (value: T, index: number, obj: T[]) => unknown): T | undefined;
/**
 * Returns the value of the last element in the array where predicate is true, and undefined otherwise.
 * @param array The array.
 * @param predicate findLast calls predicate once for each element of the array, in descending
 * order, until it finds one where predicate returns true. If such an element is found,
 * findLast immediately returns that element value. Otherwise, find returns undefined.
 */
declare function findLast<T = unknown>(array: MaybeRef<T[]>, predicate: (value: T, index: number, obj: T[]) => unknown): T | undefined;
/**
 * Returns the index of the first element in the array where predicate is true, and -1 otherwise.
 * @param array The array.
 * @param predicate findIndex calls predicate once for each element of the array, in ascending
 * order, until it finds one where predicate returns true. If such an element is found,
 * findIndex immediately returns that element index. Otherwise, findIndex returns -1.
 */
declare function findIndex<T = unknown>(array: MaybeRef<T[]>, predicate: (value: T, index: number, obj: T[]) => unknown): number;
/**
 * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
 * @param array The array.
 * @param predicate findLastIndex calls predicate once for each element of the array, in descending
 * order, until it finds one where predicate returns true. If such an element is found,
 * findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
 */
declare function findLastIndex<T = unknown>(array: MaybeRef<T[]>, predicate: (value: T, index: number, obj: T[]) => unknown): number;
/**
 * Swaps elements in an array, and returns true if successfully swapped, and false otherwise.
 * @param array The array.
 * @param where1 The first location of the element to be swapped in the array,
 * supports index and predicate function to find index.
 * @param where2 The second location of the element to be swapped in the array,
 * supports index and predicate function to find index.
 */
declare function swap<T = unknown>(array: MaybeRef<T[]>, where1: number | ((value: T, index: number, obj: T[]) => unknown), where2: number | ((value: T, index: number, obj: T[]) => unknown)): boolean;
/**
 * Swaps elements between two arrays, and returns true if successfully swapped, and false otherwise.
 * @param array1 The first array.
 * @param where1 The location of the element to be swapped in the first array, supports index and predicate function to find index.
 * @param array2 The second array.
 * @param where1 The location of the element to be swapped in the second array, supports index and predicate function to find index.
 */
declare function swap<T = unknown>(array1: MaybeRef<T[]>, where1: number | ((value: T, index: number, obj: T[]) => unknown), array2: MaybeRef<T[]>, where2: number | ((value: T, index: number, obj: T[]) => unknown)): boolean;
/**
 * Removes a element from an array, and returns it if successfully removed, and undefined otherwise.
 * @param array - The array.
 * @param where - The location of the element to be removed, supports index and predicate function to find index.
 */
declare function remove<T = unknown>(array: MaybeRef<T[]>, where: number | ((value: T, index: number, obj: T[]) => unknown)): T | undefined;
/**
 * Inserts elements at specified position in an array, and returns the new length of the array.
 * @param array - The array.
 * @param where - The insertion location, supports index and predicate function to find index.
 * @param direction - Insert at the front or at the back of the insertion location.
 * @param items Elements to insert into the array.
 */
declare function insert<T = unknown>(array: MaybeRef<T[]>, where: number | ((value: T, index: number, obj: T[]) => unknown), direction: 'before' | 'after' | -1 | 1, ...items: T[]): number;

type DndProvider = typeof NativeDnd | typeof MouseDnd | typeof TouchDnd;

/**
 * Registers global components: NativeDnd, DndSource, DndDropzone, DndHandle.
 */
declare const NativeDndPlugin: Plugin;
/**
 * Registers global components: MouseDnd, DndSource, DndDropzone, DndHandle.
 */
declare const MouseDndPlugin: Plugin;
/**
 * Registers global components: TouchDnd, DndSource, DndDropzone, DndHandle.
 */
declare const TouchDndPlugin: Plugin;

export { type CommonDndOptions, type DndClasses, DndDropzone, DndElement, type DndElementMatcher, type DndEvent, DndHandle, type DndInstance, type DndOptions, type DndProvider, DndSource, type DndType, type DragEndEvent, type DragEnterEvent, type DragEvent$1 as DragEvent, type DragLeaveEvent, type DragOverEvent, type DragPreventEvent, type DragStartEvent, type DropEvent, type MirrorAppendTo, type MirrorCreator, type MirrorOptions, MouseDnd, type MouseDndOptions, MouseDndPlugin, NativeDnd, type NativeDndOptions, NativeDndPlugin, TouchDnd, type TouchDndOptions, TouchDndPlugin, defaultDndClasses, defaultMirrorOptions, find, findIndex, findLast, findLastIndex, insert, pop, push, remove, shift, splice, swap, unshift, useDndInstance as useDnd, useMouseDnd, useNativeDnd, useTouchDnd };