import type { Component } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { ComputedOptions } from 'vue';
import { ComputedRef } from 'vue';
import { ConcreteComponent } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { MethodOptions } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import type { VNode } from 'vue';

export declare interface AccessibilityOptions {
    announcements?: {
        start?: string;
        end?: string;
        cancel?: string;
    };
    liveRegion?: HTMLElement | string;
    keyboardNavigation?: boolean;
    focusManagement?: boolean;
}

export declare interface AutoScrollOptions {
    scroll?: boolean | HTMLElement;
    scrollSensitivity?: number;
    scrollSpeed?: number;
    bubbleScroll?: boolean;
}

export declare interface ComponentData {
    props?: Record<string, any>;
    attrs?: Record<string, any>;
    [key: string]: any;
}

export declare const DEFAULT_PROPS: Partial<VueDraggableNextProps>;

export declare interface DragChangeEvent<T = DraggableItem> {
    added?: {
        newIndex: number;
        element: T;
    };
    removed?: {
        oldIndex: number;
        element: T;
    };
    moved?: {
        newIndex: number;
        oldIndex: number;
        element: T;
    };
}

export declare interface DragContext<T = DraggableItem> {
    element: T;
    index: number;
    futureIndex?: number;
}

declare interface DragEvent_2 {
    item: HTMLElement & {
        _underlying_vm_?: any;
    };
    newIndex?: number;
    oldIndex?: number;
    from?: HTMLElement;
    to?: HTMLElement;
    pullMode?: string;
    clone?: HTMLElement;
    [key: string]: any;
}

export declare interface DraggableItem {
    [key: string]: any;
}

export declare interface DraggableUtils {
    closest: (element: HTMLElement, selector: string, context?: HTMLElement) => HTMLElement | null;
    on: (element: HTMLElement, event: string, handler: EventListener) => void;
    off: (element: HTMLElement, event: string, handler: EventListener) => void;
    css: (element: HTMLElement, prop: string, value?: string) => string | void;
    find: (context: HTMLElement, selector: string, all?: boolean) => HTMLElement | HTMLElement[] | null;
    index: (element: HTMLElement, selector?: string) => number;
    toggleClass: (element: HTMLElement, className: string, state?: boolean) => void;
}

export declare interface DropContext<T = DraggableItem> {
    element: T;
    index: number;
    list: T[];
    component: any;
}

export declare type EasingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic-bezier(n,n,n,n)';

declare interface ExtendedHTMLElement extends HTMLElement {
    __draggable_component__?: any;
}

export declare interface GlobalConfig {
    animation: number;
    easing: EasingFunction;
    ghostClass: string;
    chosenClass: string;
    dragClass: string;
    direction: 'horizontal' | 'vertical' | 'auto';
    touchStartThreshold: number;
    emptyInsertThreshold: number;
}

export declare type Group = GroupName | GroupSpec;

declare type GroupName = string;

export declare interface GroupSpec {
    name: GroupName;
    pull?: boolean | 'clone' | string[] | ((to: any, from: any, dragEl: HTMLElement, evt: Event) => boolean | string);
    put?: boolean | string[] | ((to: any, from: any, dragEl: HTMLElement, evt: Event) => boolean);
    revertClone?: boolean;
}

export declare function isChangeEvent<T>(event: any): event is DragChangeEvent<T>;

export declare function isDraggableEvent(event: any): event is SortableEvent;

export declare function isMoveEvent<T>(event: any): event is MoveEvent<T>;

export declare interface MoveEvent<T = DraggableItem> {
    to: HTMLElement;
    from: HTMLElement;
    dragged: HTMLElement;
    draggedRect: DOMRect;
    related: HTMLElement;
    relatedRect: DOMRect;
    willInsertAfter: boolean;
    originalEvent: Event;
    draggedContext: {
        index: number;
        element: T;
        futureIndex: number;
    };
    relatedContext: {
        index: number;
        element: T;
        list: T[];
        component: any;
    };
}

export declare interface MultiDragOptions {
    multiDrag?: boolean;
    selectedClass?: string;
    multiDragKey?: 'ctrl' | 'alt' | 'shift' | 'meta' | null;
    avoidImplicitDeselect?: boolean;
}

export declare interface OpenObject {
    [key: string]: any;
}

export declare interface PerformanceOptions {
    itemKey?: string | ((item: any) => string | number);
    preventDefaultOnMove?: boolean;
    optimizedUpdates?: boolean;
    debounceTime?: number;
}

export declare interface PluginDefinition {
    name: string;
    params?: any;
    initializePlugin?: (sortable: any) => void;
    eventProperties?: string[];
    [key: string]: any;
}

export declare interface SortableEvent {
    to: HTMLElement;
    from: HTMLElement;
    item: HTMLElement;
    clone?: HTMLElement;
    oldIndex?: number;
    newIndex?: number;
    oldDraggableIndex?: number;
    newDraggableIndex?: number;
    pullMode?: 'clone' | boolean;
}

export declare interface SwapOptions {
    swap?: boolean;
    swapClass?: string;
}

export declare function validateProps<T>(props: VueDraggableNextProps<T>): string[];

export declare const VueDraggableNext: DefineComponent<ExtractPropTypes<    {
options: ObjectConstructor;
list: {
type: ArrayConstructor;
required: false;
default: null;
};
noTransitionOnDrag: {
type: BooleanConstructor;
default: boolean;
};
clone: {
type: FunctionConstructor;
default: (original: any) => any;
};
tag: {
type: StringConstructor;
default: string;
};
move: {
type: FunctionConstructor;
default: null;
};
componentData: {
type: ObjectConstructor;
required: false;
default: null;
};
component: {
type: StringConstructor;
default: null;
};
modelValue: {
type: ArrayConstructor;
required: false;
default: null;
};
}>, {
getTag: () => string | ConcreteComponent<    {}, any, any, ComputedOptions, MethodOptions, {}, any>;
realList: ComputedRef<unknown[]>;
visibleIndexes: Ref<number[], number[]>;
noneFunctionalComponentMode: Ref<boolean, boolean>;
headerOffset: Ref<number, number>;
footerOffset: Ref<number, number>;
transitionMode: Ref<boolean, boolean>;
computeIndexes: () => Promise<void>;
updateOptions: (newOptionValue: OpenObject) => void;
getChildrenNodes: () => HTMLElement[];
getUnderlyingVm: (htmlElt: HTMLElement) => {
index: number;
element: any;
} | null;
emitChanges: (evt: OpenObject) => void;
alterList: (onList: any) => void;
spliceList: (...args: any[]) => void;
updatePosition: (oldIndex: number, newIndex: number) => void;
getVmIndex: (domIndex: number) => number;
getComponent: () => any;
resetTransitionData: (index: number) => void;
onDragStart: (evt: DragEvent_2) => void;
onDragAdd: (evt: DragEvent_2) => void;
onDragRemove: (evt: DragEvent_2) => void;
onDragUpdate: (evt: DragEvent_2) => void;
updateProperty: (evt: DragEvent_2, propertyName: string) => void;
onDragMove: (evt: any, originalEvent: any) => any;
onDragEnd: () => void;
mounted: () => void;
context: Ref<OpenObject | null, OpenObject | null>;
sortableInstance: Ref<any, any>;
getRelatedContextFromMoveEvent: ({ to, related, }: {
to: ExtendedHTMLElement;
related: HTMLElement;
}) => any;
getTargetedComponent: (htmlElement: ExtendedHTMLElement) => any;
computeFutureIndex: (relatedContext: any, evt: any) => any;
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, PublicProps, Readonly<ExtractPropTypes<    {
options: ObjectConstructor;
list: {
type: ArrayConstructor;
required: false;
default: null;
};
noTransitionOnDrag: {
type: BooleanConstructor;
default: boolean;
};
clone: {
type: FunctionConstructor;
default: (original: any) => any;
};
tag: {
type: StringConstructor;
default: string;
};
move: {
type: FunctionConstructor;
default: null;
};
componentData: {
type: ObjectConstructor;
required: false;
default: null;
};
component: {
type: StringConstructor;
default: null;
};
modelValue: {
type: ArrayConstructor;
required: false;
default: null;
};
}>> & Readonly<{
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
}>, {
clone: Function;
move: Function;
list: unknown[];
noTransitionOnDrag: boolean;
tag: string;
componentData: Record<string, any>;
component: string;
modelValue: unknown[];
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

export declare interface VueDraggableNextEvents<T = DraggableItem> {
    'update:modelValue': (value: T[]) => void;
    change: (event: DragChangeEvent<T>) => void;
    start: (event: SortableEvent) => void;
    end: (event: SortableEvent) => void;
    add: (event: SortableEvent) => void;
    remove: (event: SortableEvent) => void;
    update: (event: SortableEvent) => void;
    sort: (event: SortableEvent) => void;
    choose: (event: SortableEvent) => void;
    unchoose: (event: SortableEvent) => void;
    filter: (event: SortableEvent) => void;
    clone: (event: SortableEvent) => void;
    move: (event: MoveEvent<T>, originalEvent: Event) => boolean | void;
}

export declare interface VueDraggableNextInstance<T = DraggableItem> {
    option: (name: string, value?: any) => any;
    closest: (selector: string, context?: HTMLElement) => HTMLElement | null;
    toArray: () => string[];
    sort: (order: string[]) => void;
    save: () => void;
    destroy: () => void;
    readonly el: HTMLElement;
    readonly options: VueDraggableNextProps<T>;
}

export declare interface VueDraggableNextProps<T = DraggableItem> {
    modelValue?: T[];
    list?: T[];
    itemKey?: string | ((item: T) => string | number);
    tag?: string;
    component?: string | Component;
    componentData?: ComponentData;
    group?: Group;
    sort?: boolean;
    delay?: number;
    delayOnTouchStart?: boolean;
    touchStartThreshold?: number;
    disabled?: boolean;
    store?: any;
    animation?: number;
    easing?: EasingFunction;
    ghostClass?: string;
    chosenClass?: string;
    dragClass?: string;
    handle?: string;
    filter?: string;
    preventOnFilter?: boolean;
    draggable?: string;
    dataIdAttr?: string;
    swapThreshold?: number;
    invertSwap?: boolean;
    invertedSwapThreshold?: number;
    direction?: 'horizontal' | 'vertical' | 'auto';
    scroll?: boolean | HTMLElement;
    scrollSensitivity?: number;
    scrollSpeed?: number;
    bubbleScroll?: boolean;
    forceFallback?: boolean;
    fallbackClass?: string;
    fallbackOnBody?: boolean;
    fallbackTolerance?: number;
    multiDrag?: boolean;
    selectedClass?: string;
    multiDragKey?: string;
    clone?: (original: T) => T;
    move?: (event: MoveEvent<T>, originalEvent: Event) => boolean | void;
    removeOnSpill?: boolean;
    onSpill?: (event: SortableEvent) => void;
}

export declare interface VueDraggableNextSlots<T = DraggableItem> {
    default?: () => VNode[];
    item?: (props: {
        element: T;
        index: number;
    }) => VNode[];
    header?: () => VNode[];
    footer?: () => VNode[];
}

export { }