@storipress/vue-slicksort/dist/vue-slicksort.cjs.d.ts

Set of mixins to turn any list into a sortable, touch-friendly, animated list

/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { PropType, Directive, Plugin } from "vue";
type XY = {
    x: number;
    y: number;
};
type TopLeft = {
    top: number;
    left: number;
};
type BottomRight = {
    bottom: number;
    right: number;
};
type WidthHeight = {
    width: number;
    height: number;
};
type PointEvent = MouseEvent | TouchEvent;
declare function arrayMove<T>(arr: T[], previousIndex: number, newIndex: number): (T | undefined)[];
interface SortableNode extends HTMLElement {
    sortableInfo: {
        index: number;
        manager: Manager;
    };
    sortableHandle?: boolean;
}
interface ItemRef {
    node: SortableNode;
    index?: number;
    edgeOffset?: TopLeft | null;
}
declare class Manager {
    private refs;
    active: {
        index: number;
    } | null;
    add(ref: ItemRef): void;
    remove(ref: ItemRef): void;
    isActive(): boolean;
    getActive(): ItemRef | null;
    getIndex(ref: ItemRef): number;
    getRefs(): ItemRef[];
    getOrderedRefs(): ItemRef[];
}
interface ComponentData {
    manager: Manager;
    ref: ItemRef;
}
// Export Sortable Element Component Mixin
declare const ElementMixin: import("vue").DefineComponent<{
    index: {
        type: NumberConstructor;
        required: true;
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
}, unknown, ComponentData, {}, {
    setDraggable(index: number): void;
    removeDraggable(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    index: {
        type: NumberConstructor;
        required: true;
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
}>>, {
    disabled: boolean;
}>;
interface ContainerRef {
    id: string;
    group: string;
    accept: AcceptProp | null;
    block: string[];
    container: HTMLElement;
    newIndex: number;
    manager: Manager;
    sortableGhost: HTMLElement | null;
    handleDragIn(e: PointEvent, ghost: HTMLElement | null, helper: HTMLElement | null): void;
    handleDragOut(): void;
    handleDragEnd(): void;
    handleSortEnd(e: PointEvent): void;
    handleDropIn(payload: unknown): void;
    handleDropOut(): unknown;
    updatePosition(e: PointEvent): void;
    animateNodes(): void;
    autoscroll(): void;
}
type AcceptPropArgs = {
    source: ContainerRef;
    dest: ContainerRef;
    payload: unknown;
};
type AcceptProp = boolean | string[] | ((args: AcceptPropArgs) => boolean);
declare class SlicksortHub {
    helper: HTMLElement | null;
    ghost: HTMLElement | null;
    private refs;
    private source;
    private dest;
    getId(): string;
    isSource({ id }: ContainerRef): boolean;
    getSource(): ContainerRef | null;
    isDest({ id }: ContainerRef): boolean;
    getDest(): ContainerRef | null;
    addContainer(ref: ContainerRef): void;
    removeContainer(ref: ContainerRef): void;
    sortStart(ref: ContainerRef): void;
    handleSortMove(e: PointEvent, payload: unknown): void;
    handleSortEnd(): void;
    reset(): void;
    cancel(): void;
}
type PointEventListener = (e: PointEvent) => unknown;
type Timer$0 = number | null;
interface ComponentProps {
    list: unknown[];
    axis: "x" | "y" | "xy" | "yx"; // 'x', 'y', 'xy'
    distance: number;
    pressDelay: number;
    pressThreshold: number;
    useDragHandle: boolean;
    useWindowAsScrollContainer: boolean;
    hideSortableGhost: boolean;
    lockToContainerEdges: boolean;
    lockOffset: string | number | string[];
    transitionDuration: number;
    appendTo: string;
    draggedSettlingDuration: number;
    group: string;
    accept: boolean | string[] | ((ctx: {
        source: ContainerRef;
        dest: ContainerRef;
        payload: unknown;
    }) => boolean);
    cancelKey: string;
    block: string[];
    lockAxis: string;
    helperClass: string;
    contentWindow: Window;
    shouldCancelStart: (e: PointEvent) => boolean;
    getHelperDimensions: (ref: ItemRef) => {
        width: number;
        height: number;
    };
    setHelperStyle: (el: HTMLElement | null, data?: {
        targetX: number;
        targetY: number;
        duration: number;
    }) => void;
}
interface ComponentData$0 extends ComponentProps {
    id: string;
    // usually thi.$el
    container: HTMLElement;
    // ref to document
    document: Document;
    // Provided for sortable elements to register
    manager: Manager;
    // ref to window
    _window: Window;
    // window or container
    // TODO make this a prop
    scrollContainer: {
        scrollTop: number;
        scrollLeft: number;
    };
    // Injected and used for drag and drop between lists
    hub?: SlicksortHub;
    // Normalized events for mouse and touch devices
    events: Record<string, PointEventListener>;
    // MOusedown or touchstart occurred
    _touched: boolean;
    // initial point of contact
    _pos: XY;
    // distance from _pos to current pointer position
    // Used for drag threshold, aka `distance`
    _delta: XY;
    // Data structure for `axis` prop
    _axis: {
        x: boolean;
        y: boolean;
    };
    // timer for press threshold
    pressTimer: Timer$0;
    // used to wait until next tick to cancel
    cancelTimer: Timer$0;
    // dragout transition timer
    dragendTimer: Timer$0;
    // Used for repeating autoscroll
    autoscrollInterval: Timer$0;
    // The translation applied to the helper
    translate: XY;
    // The minmax values of translate before starting autoscroll
    minTranslate: Partial<XY>;
    maxTranslate: Partial<XY>;
    // Is the user currently sorting
    sorting: boolean;
    // The user has initiated a cancel action
    canceling: boolean;
    // The active node that was originally clicked
    node: SortableNode;
    // The measurements of the node that have to be calculated separately
    margin: TopLeft & BottomRight;
    width: number;
    height: number;
    // space added around the active node
    marginOffset: XY;
    // Initial offset of the cursor
    initialOffset: XY;
    // Initial scroll position of the container and window
    initialScroll: TopLeft;
    initialWindowScroll: TopLeft;
    // The top-left offset of the node from the offsetParent of the *container*
    // Its important to use the container as a source for the offsetParent so all nodes have the same reference point
    offsetEdge: TopLeft;
    // client rect for the node and container
    boundingClientRect: ClientRect;
    containerBoundingRect: ClientRect;
    // Starting index (use last index for drag in operations)
    index: number | null;
    // Target index for dropping
    newIndex: number | null;
    // The node that follows the mouse
    helper: HTMLElement | null;
    // The node that stays in the list and is hidden
    sortableGhost: HTMLElement | null;
    // The element that we listen to for events
    listenerNode: GlobalEventHandlers;
}
// Export Sortable Container Component Mixin
declare const ContainerMixin: import("vue").DefineComponent<{
    list: {
        type: PropType<unknown[]>;
        required: true;
    };
    axis: {
        type: StringConstructor;
        default: string;
    };
    distance: {
        type: NumberConstructor;
        default: number;
    };
    pressDelay: {
        type: NumberConstructor;
        default: number;
    };
    pressThreshold: {
        type: NumberConstructor;
        default: number;
    };
    useDragHandle: {
        type: BooleanConstructor;
        default: boolean;
    };
    useWindowAsScrollContainer: {
        type: BooleanConstructor;
        default: boolean;
    };
    hideSortableGhost: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockToContainerEdges: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockOffset: {
        type: PropType<string | number | number[]>;
        default: string;
    };
    transitionDuration: {
        type: NumberConstructor;
        default: number;
    };
    appendTo: {
        type: StringConstructor;
        default: string;
    };
    draggedSettlingDuration: {
        type: NumberConstructor;
        default: null;
    };
    group: {
        type: StringConstructor;
        default: string;
    };
    accept: {
        type: PropType<AcceptProp>;
        default: null;
    };
    cancelKey: {
        type: StringConstructor;
        default: string;
    };
    block: {
        type: PropType<string[]>;
        default: () => never[];
    };
    lockAxis: {
        type: StringConstructor;
        default: string;
    };
    helperClass: {
        type: StringConstructor;
        default: string;
    };
    contentWindow: {
        type: PropType<Window>;
        default: null;
    };
    shouldCancelStart: {
        type: PropType<PointEventListener>;
        default: (e: PointEvent) => boolean;
    };
    getHelperDimensions: {
        type: PropType<(arg: ItemRef) => WidthHeight>;
        default: ({ node }: ItemRef) => {
            width: number;
            height: number;
        };
    };
    setHelperStyle: {
        type: PropType<(el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void>;
        default: (el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void;
    };
}, unknown, ComponentData$0, {}, {
    handleStart(e: PointEvent): false | undefined;
    nodeIsChild(node: SortableNode): boolean;
    handleMove(e: PointEvent): void;
    handleEnd(): void;
    cancel(): void;
    handleSortCancel(e: KeyboardEvent | TouchEvent): void;
    handlePress(e: PointEvent): void;
    handleSortMove(e: PointEvent): void;
    handleDropOut(): unknown;
    handleDropIn(payload: unknown): void;
    handleDragOut(): void;
    handleDragEnd(): void;
    intializeOffsets(e: PointEvent, clientRect: ClientRect): void;
    handleDragIn(e: PointEvent, sortableGhost: SortableNode, helper: SortableNode): void;
    handleSortEnd(e: PointEvent | KeyboardEvent): void;
    transitionHelperIntoPlace(nodes: ItemRef[], cb: () => void): Promise<void> | undefined;
    updatePosition(e: PointEvent): void;
    animateNodes(): void;
    autoscroll(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("sort-start" | "sort-move" | "sort-end" | "sort-cancel" | "sort-insert" | "sort-remove" | "drag-in" | "drag-out" | "drag-end" | "update:list")[], "sort-start" | "sort-move" | "sort-end" | "sort-cancel" | "sort-insert" | "sort-remove" | "drag-in" | "drag-out" | "drag-end" | "update:list", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    list: {
        type: PropType<unknown[]>;
        required: true;
    };
    axis: {
        type: StringConstructor;
        default: string;
    };
    distance: {
        type: NumberConstructor;
        default: number;
    };
    pressDelay: {
        type: NumberConstructor;
        default: number;
    };
    pressThreshold: {
        type: NumberConstructor;
        default: number;
    };
    useDragHandle: {
        type: BooleanConstructor;
        default: boolean;
    };
    useWindowAsScrollContainer: {
        type: BooleanConstructor;
        default: boolean;
    };
    hideSortableGhost: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockToContainerEdges: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockOffset: {
        type: PropType<string | number | number[]>;
        default: string;
    };
    transitionDuration: {
        type: NumberConstructor;
        default: number;
    };
    appendTo: {
        type: StringConstructor;
        default: string;
    };
    draggedSettlingDuration: {
        type: NumberConstructor;
        default: null;
    };
    group: {
        type: StringConstructor;
        default: string;
    };
    accept: {
        type: PropType<AcceptProp>;
        default: null;
    };
    cancelKey: {
        type: StringConstructor;
        default: string;
    };
    block: {
        type: PropType<string[]>;
        default: () => never[];
    };
    lockAxis: {
        type: StringConstructor;
        default: string;
    };
    helperClass: {
        type: StringConstructor;
        default: string;
    };
    contentWindow: {
        type: PropType<Window>;
        default: null;
    };
    shouldCancelStart: {
        type: PropType<PointEventListener>;
        default: (e: PointEvent) => boolean;
    };
    getHelperDimensions: {
        type: PropType<(arg: ItemRef) => WidthHeight>;
        default: ({ node }: ItemRef) => {
            width: number;
            height: number;
        };
    };
    setHelperStyle: {
        type: PropType<(el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void>;
        default: (el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void;
    };
}>> & {
    "onSort-start"?: ((...args: any[]) => any) | undefined;
    "onSort-move"?: ((...args: any[]) => any) | undefined;
    "onSort-end"?: ((...args: any[]) => any) | undefined;
    "onSort-cancel"?: ((...args: any[]) => any) | undefined;
    "onSort-insert"?: ((...args: any[]) => any) | undefined;
    "onSort-remove"?: ((...args: any[]) => any) | undefined;
    "onDrag-in"?: ((...args: any[]) => any) | undefined;
    "onDrag-out"?: ((...args: any[]) => any) | undefined;
    "onDrag-end"?: ((...args: any[]) => any) | undefined;
    "onUpdate:list"?: ((...args: any[]) => any) | undefined;
}, {
    accept: AcceptProp;
    transitionDuration: number;
    setHelperStyle: (el: HTMLElement | null, data?: {
        targetX: number;
        targetY: number;
        duration: number;
    } | undefined) => void;
    axis: string;
    distance: number;
    pressDelay: number;
    pressThreshold: number;
    useDragHandle: boolean;
    useWindowAsScrollContainer: boolean;
    hideSortableGhost: boolean;
    lockToContainerEdges: boolean;
    lockOffset: string | number | number[];
    appendTo: string;
    draggedSettlingDuration: number;
    group: string;
    cancelKey: string;
    block: string[];
    lockAxis: string;
    helperClass: string;
    contentWindow: Window;
    shouldCancelStart: PointEventListener;
    getHelperDimensions: (arg: ItemRef) => WidthHeight;
}>;
// Export Sortable Element Handle Directive
declare const HandleDirective: Directive;
declare const SlickList: import("vue").DefineComponent<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    itemKey: {
        type: PropType<string | ((item: unknown) => string)>;
        default: string;
    };
}, unknown, unknown, {}, {}, import("vue").DefineComponent<{
    list: {
        type: PropType<unknown[]>;
        required: true;
    };
    axis: {
        type: StringConstructor;
        default: string;
    };
    distance: {
        type: NumberConstructor;
        default: number;
    };
    pressDelay: {
        type: NumberConstructor;
        default: number;
    };
    pressThreshold: {
        type: NumberConstructor;
        default: number;
    };
    useDragHandle: {
        type: BooleanConstructor;
        default: boolean;
    };
    useWindowAsScrollContainer: {
        type: BooleanConstructor;
        default: boolean;
    };
    hideSortableGhost: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockToContainerEdges: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockOffset: {
        type: PropType<string | number | number[]>;
        default: string;
    };
    transitionDuration: {
        type: NumberConstructor;
        default: number;
    };
    appendTo: {
        type: StringConstructor;
        default: string;
    };
    draggedSettlingDuration: {
        type: NumberConstructor;
        default: null;
    };
    group: {
        type: StringConstructor;
        default: string;
    };
    accept: {
        type: PropType<AcceptProp>;
        default: null;
    };
    cancelKey: {
        type: StringConstructor;
        default: string;
    };
    block: {
        type: PropType<string[]>;
        default: () => never[];
    };
    lockAxis: {
        type: StringConstructor;
        default: string;
    };
    helperClass: {
        type: StringConstructor;
        default: string;
    };
    contentWindow: {
        type: PropType<Window>;
        default: null;
    };
    shouldCancelStart: {
        type: PropType<(e: PointEvent) => unknown>;
        default: (e: PointEvent) => boolean;
    };
    getHelperDimensions: {
        type: PropType<(arg: ItemRef) => WidthHeight>;
        default: ({ node }: ItemRef) => {
            width: number;
            height: number;
        };
    };
    setHelperStyle: {
        type: PropType<(el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void>;
        default: (el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void;
    };
}, unknown, ComponentData$0, {}, {
    handleStart(e: PointEvent): false | undefined;
    nodeIsChild(node: SortableNode): boolean;
    handleMove(e: PointEvent): void;
    handleEnd(): void;
    cancel(): void;
    handleSortCancel(e: TouchEvent | KeyboardEvent): void;
    handlePress(e: PointEvent): void;
    handleSortMove(e: PointEvent): void;
    handleDropOut(): unknown;
    handleDropIn(payload: unknown): void;
    handleDragOut(): void;
    handleDragEnd(): void;
    intializeOffsets(e: PointEvent, clientRect: ClientRect): void;
    handleDragIn(e: PointEvent, sortableGhost: SortableNode, helper: SortableNode): void;
    handleSortEnd(e: PointEvent | KeyboardEvent): void;
    transitionHelperIntoPlace(nodes: ItemRef[], cb: () => void): Promise<void> | undefined;
    updatePosition(e: PointEvent): void;
    animateNodes(): void;
    autoscroll(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("sort-start" | "sort-move" | "sort-end" | "sort-cancel" | "sort-insert" | "sort-remove" | "drag-in" | "drag-out" | "drag-end" | "update:list")[], "sort-start" | "sort-move" | "sort-end" | "sort-cancel" | "sort-insert" | "sort-remove" | "drag-in" | "drag-out" | "drag-end" | "update:list", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    list: {
        type: PropType<unknown[]>;
        required: true;
    };
    axis: {
        type: StringConstructor;
        default: string;
    };
    distance: {
        type: NumberConstructor;
        default: number;
    };
    pressDelay: {
        type: NumberConstructor;
        default: number;
    };
    pressThreshold: {
        type: NumberConstructor;
        default: number;
    };
    useDragHandle: {
        type: BooleanConstructor;
        default: boolean;
    };
    useWindowAsScrollContainer: {
        type: BooleanConstructor;
        default: boolean;
    };
    hideSortableGhost: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockToContainerEdges: {
        type: BooleanConstructor;
        default: boolean;
    };
    lockOffset: {
        type: PropType<string | number | number[]>;
        default: string;
    };
    transitionDuration: {
        type: NumberConstructor;
        default: number;
    };
    appendTo: {
        type: StringConstructor;
        default: string;
    };
    draggedSettlingDuration: {
        type: NumberConstructor;
        default: null;
    };
    group: {
        type: StringConstructor;
        default: string;
    };
    accept: {
        type: PropType<AcceptProp>;
        default: null;
    };
    cancelKey: {
        type: StringConstructor;
        default: string;
    };
    block: {
        type: PropType<string[]>;
        default: () => never[];
    };
    lockAxis: {
        type: StringConstructor;
        default: string;
    };
    helperClass: {
        type: StringConstructor;
        default: string;
    };
    contentWindow: {
        type: PropType<Window>;
        default: null;
    };
    shouldCancelStart: {
        type: PropType<(e: PointEvent) => unknown>;
        default: (e: PointEvent) => boolean;
    };
    getHelperDimensions: {
        type: PropType<(arg: ItemRef) => WidthHeight>;
        default: ({ node }: ItemRef) => {
            width: number;
            height: number;
        };
    };
    setHelperStyle: {
        type: PropType<(el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void>;
        default: (el: HTMLElement | null, data?: {
            targetX: number;
            targetY: number;
            duration: number;
        } | undefined) => void;
    };
}>> & {
    "onSort-start"?: ((...args: any[]) => any) | undefined;
    "onSort-move"?: ((...args: any[]) => any) | undefined;
    "onSort-end"?: ((...args: any[]) => any) | undefined;
    "onSort-cancel"?: ((...args: any[]) => any) | undefined;
    "onSort-insert"?: ((...args: any[]) => any) | undefined;
    "onSort-remove"?: ((...args: any[]) => any) | undefined;
    "onDrag-in"?: ((...args: any[]) => any) | undefined;
    "onDrag-out"?: ((...args: any[]) => any) | undefined;
    "onDrag-end"?: ((...args: any[]) => any) | undefined;
    "onUpdate:list"?: ((...args: any[]) => any) | undefined;
}, {
    accept: AcceptProp;
    transitionDuration: number;
    setHelperStyle: (el: HTMLElement | null, data?: {
        targetX: number;
        targetY: number;
        duration: number;
    } | undefined) => void;
    axis: string;
    distance: number;
    pressDelay: number;
    pressThreshold: number;
    useDragHandle: boolean;
    useWindowAsScrollContainer: boolean;
    hideSortableGhost: boolean;
    lockToContainerEdges: boolean;
    lockOffset: string | number | number[];
    appendTo: string;
    draggedSettlingDuration: number;
    group: string;
    cancelKey: string;
    block: string[];
    lockAxis: string;
    helperClass: string;
    contentWindow: Window;
    shouldCancelStart: (e: PointEvent) => unknown;
    getHelperDimensions: (arg: ItemRef) => WidthHeight;
}>, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
    itemKey: {
        type: PropType<string | ((item: unknown) => string)>;
        default: string;
    };
}>>, {
    tag: string;
    itemKey: string | ((item: unknown) => string);
}>;
declare const SlickItem: import("vue").DefineComponent<{
    tag: {
        type: StringConstructor;
        default: string;
    };
}, unknown, unknown, {}, {}, import("vue").DefineComponent<{
    index: {
        type: NumberConstructor;
        required: true;
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
}, unknown, ComponentData, {}, {
    setDraggable(index: number): void;
    removeDraggable(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    index: {
        type: NumberConstructor;
        required: true;
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
}>>, {
    disabled: boolean;
}>, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
}>>, {
    tag: string;
}>;
declare const DragHandle: import("vue").DefineComponent<{
    tag: {
        type: StringConstructor;
        default: string;
    };
}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    tag: {
        type: StringConstructor;
        default: string;
    };
}>>, {
    tag: string;
}>;
declare const plugin: Plugin;
export { ElementMixin, ContainerMixin, HandleDirective, SlickList, SlickItem, DragHandle, arrayMove, plugin };