import { AllowedComponentProps } from 'vue';
import { ComponentCustomProps } from 'vue';
import { ComputedRef } from 'vue';
import { MaybeRefOrGetter } from 'vue';
import { Ref } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import { ShallowUnwrapRef } from 'vue';
import { VNode } from 'vue';
import { VNodeProps } from 'vue';

declare const _default: <Thumbnail extends ThumbnailDefinition>(__VLS_props: {
    radius?: ThumbnailRadius | undefined;
    draggable?: boolean | undefined;
    removable?: boolean | undefined;
    thumbnails?: Thumbnail[] | undefined;
    activeThumbnail?: number | undefined;
    readonly onDragStart?: ((event: SortableOnDragStartEvent) => any) | undefined;
    readonly onDragEnd?: ((event: SortableDragEvent) => any) | undefined;
    readonly "onUpdate:thumbnails"?: ((thumbnails: Thumbnail[]) => any) | undefined;
    showEmpty?: boolean | undefined;
    emptyOptions?: ThumbnailEmptyOptions | undefined;
} & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: {
    attrs: any;
    slots: {
        default?(_: {
            activeThumbnail: number;
            isDragging: boolean;
        }): any;
    };
    emit: ((evt: "dragStart", event: SortableOnDragStartEvent) => void) & ((evt: "dragEnd", event: SortableDragEvent) => void) & ((evt: "update:thumbnails", thumbnails: Thumbnail[]) => void);
} | undefined, __VLS_expose?: ((exposed: ShallowUnwrapRef<    {}>) => void) | undefined, __VLS_setup?: Promise<{
    props: {
        radius?: ThumbnailRadius | undefined;
        draggable?: boolean | undefined;
        removable?: boolean | undefined;
        thumbnails?: Thumbnail[] | undefined;
        activeThumbnail?: number | undefined;
        readonly onDragStart?: ((event: SortableOnDragStartEvent) => any) | undefined;
        readonly onDragEnd?: ((event: SortableDragEvent) => any) | undefined;
        readonly "onUpdate:thumbnails"?: ((thumbnails: Thumbnail[]) => any) | undefined;
        showEmpty?: boolean | undefined;
        emptyOptions?: ThumbnailEmptyOptions | undefined;
    } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
    expose(exposed: ShallowUnwrapRef<    {}>): void;
    attrs: any;
    slots: {
        default?(_: {
            activeThumbnail: number;
            isDragging: boolean;
        }): any;
    };
    emit: ((evt: "dragStart", event: SortableOnDragStartEvent) => void) & ((evt: "dragEnd", event: SortableDragEvent) => void) & ((evt: "update:thumbnails", thumbnails: Thumbnail[]) => void);
}>) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}> & {
    __ctx?: {
        props: {
            radius?: ThumbnailRadius | undefined;
            draggable?: boolean | undefined;
            removable?: boolean | undefined;
            thumbnails?: Thumbnail[] | undefined;
            activeThumbnail?: number | undefined;
            readonly onDragStart?: ((event: SortableOnDragStartEvent) => any) | undefined;
            readonly onDragEnd?: ((event: SortableDragEvent) => any) | undefined;
            readonly "onUpdate:thumbnails"?: ((thumbnails: Thumbnail[]) => any) | undefined;
            showEmpty?: boolean | undefined;
            emptyOptions?: ThumbnailEmptyOptions | undefined;
        } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
        expose(exposed: ShallowUnwrapRef<    {}>): void;
        attrs: any;
        slots: {
            default?(_: {
                activeThumbnail: number;
                isDragging: boolean;
            }): any;
        };
        emit: ((evt: "dragStart", event: SortableOnDragStartEvent) => void) & ((evt: "dragEnd", event: SortableDragEvent) => void) & ((evt: "update:thumbnails", thumbnails: Thumbnail[]) => void);
    } | undefined;
};
export default _default;

/**
 * Move sortable elements in the list
 * @param list List of sortable elements
 * @param from Original element position
 * @param to New element position
 */
export declare function moveSortableElements<ListItem>({ list, from, to }: MoveSortableElementsOptions<ListItem>): void;

export declare interface MoveSortableElementsOptions<T> {
    list: RefOrGetter<T[]>;
    from: number;
    to: number;
}

/**
 * Like the MaybeRefOrGetter type from Vue, but without the Maybe. Can be used to ensure the most up-to-date value is available.
 */
declare type RefOrGetter<T> = Ref<T> | (() => T);

export declare interface SortableDragEvent extends DragEvent {
    /**
     * The old index of the dragged element
     */
    oldIndex: number;
    /**
     * The new index of the dragged element
     */
    newIndex: number;
}

export declare type SortableOnDragEndEvent = SortableDragEvent;

export declare type SortableOnDragStartEvent = Omit<SortableDragEvent, 'newIndex'>;

declare interface ThumbnailDefinition {
    id: number | string;
    imageUrl: string;
}

export declare interface ThumbnailEmptyOptions {
    max: number;
}

export declare interface ThumbnailInjection<Thumbnail> {
    isDragging: MaybeRefOrGetter<boolean>;
    radius: ThumbnailRadius;
    draggable: ComputedRef<boolean>;
    removable: MaybeRefOrGetter<boolean>;
    thumbnails: MaybeRefOrGetter<Thumbnail[]>;
    activeThumbnail: Ref<number | undefined>;
}

export declare type ThumbnailRadius = 'rounded' | 'circle';

export declare interface UseSortableOptions<SortableItem> {
    /**
     * The parent element of the sortable elements
     */
    ref: Ref<HTMLElement | null>;
    /**
     * The list of sortable elements to be sorted
     */
    list: Ref<SortableItem[]>;
    /**
     * Enables/Disables drag and drop sorting
     * @default true
     */
    isEnabled?: boolean;
    /**
     * Class name for the ghost element
     * @default ''
     */
    ghostClass?: string;
    /**
     * Class name for the chosen element
     * @default ''
     */
    chosenClass?: string;
    /**
     * Sort the list in place
     * @default true
     */
    sortInPlace?: boolean;
    /**
     * Callback when the dragging starts
     */
    onDragStart?: (e: SortableOnDragStartEvent) => void;
    /**
     * Callback when the dragging ends
     */
    onDragEnd?: (e: SortableOnDragEndEvent) => void;
}

export declare interface UseSortableReturn {
    /**
     * Whether the element is currently being dragged
     */
    isDragging: Ref<boolean>;
    /**
     * The new position of the dragged element
     */
    newIndex: Ref<number>;
    /**
     * The original position of the dragged element
     */
    oldIndex: Ref<number>;
}

export { }