vue-ts-responsive-grid-layout/dist/types/components/Grid/DragItem.vue.d.ts

Vue 3 Responsive & Dynamic Grid / Dashboard layout with drag, drop and resizable actions.

import { TLayoutItem, TLayout } from './layout-definition';
import GridLayout from './GridLayout.vue';
import { PropType } from 'vue';
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    enableEditMode: {
        type: BooleanConstructor;
        default: boolean;
    };
    isDraggable: {
        type: BooleanConstructor;
        default: boolean;
    };
    testLayout: {
        type: PropType<TLayoutItem[]>;
        default: () => never[];
    };
    colNum: {
        type: NumberConstructor;
        default: number;
    };
    refLayout: {
        type: PropType<typeof GridLayout | null>;
        default: null;
    };
    mapCache: {
        type: PropType<Map<string, any> | null>;
        default: null;
    };
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    enableEditMode: {
        type: BooleanConstructor;
        default: boolean;
    };
    isDraggable: {
        type: BooleanConstructor;
        default: boolean;
    };
    testLayout: {
        type: PropType<TLayoutItem[]>;
        default: () => never[];
    };
    colNum: {
        type: NumberConstructor;
        default: number;
    };
    refLayout: {
        type: PropType<typeof GridLayout | null>;
        default: null;
    };
    mapCache: {
        type: PropType<Map<string, any> | null>;
        default: null;
    };
}>> & Readonly<{}>, {
    enableEditMode: boolean;
    isDraggable: boolean;
    colNum: number;
    testLayout: TLayoutItem[];
    refLayout: ({
        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./GridLayout.vue").IGridLayoutProps> & Readonly<{
            [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
        }>, {
            defaultGridItem: import("vue").Ref<any, any>;
            dragEvent: (eventName?: import("mitt").EventType, id?: string | number, x?: number, y?: number, h?: number, w?: number) => void;
            erd: import("vue").Ref<{
                listenTo: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeListener: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeAllListeners: (element: HTMLElement) => void;
                uninstall: (element: HTMLElement) => void;
            } | null, import("element-resize-detector").Erd | {
                listenTo: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeListener: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeAllListeners: (element: HTMLElement) => void;
                uninstall: (element: HTMLElement) => void;
            } | null>;
            isDragging: import("vue").Ref<boolean, boolean>;
            lastBreakpoint: import("vue").Ref<string | null, string | null>;
            lastLayoutLength: import("vue").Ref<number, number>;
            layouts: import("vue").Ref<{
                [key: string]: any;
            }, {
                [key: string]: any;
            }>;
            mergeStyle: import("vue").Ref<{
                [key: string]: string;
            }, {
                [key: string]: string;
            }>;
            originalLayout: import("vue").Ref<TLayout | undefined, TLayout | undefined>;
            placeholder: import("vue").Ref<{
                h: number;
                i: number | string;
                x: number;
                y: number;
                w: number;
            }, import("../../core/gridlayout/interfaces/layout-data.interface").IPlaceholder | {
                h: number;
                i: number | string;
                x: number;
                y: number;
                w: number;
            }>;
            width: import("vue").Ref<number | null, number | null>;
            layout: TLayout;
            autoSize: boolean;
            borderRadiusPx: number;
            breakpoints: import("./grid-layout-props.interface").IBreakpoints;
            colNum: number;
            cols: import("./grid-layout-props.interface").IColumns;
            distributeEvenly: boolean;
            horizontalShift: boolean;
            isBounded: boolean;
            isDraggable: boolean;
            isMirrored: boolean;
            isResizable: boolean;
            margin: number[];
            maxRows: number;
            preventCollision: boolean;
            responsive: boolean;
            responsiveLayouts: {
                [key: string]: TLayout;
            };
            restoreOnDrag: boolean;
            rowHeight: number;
            showCloseButton: boolean;
            showGridLines: boolean;
            transformScale: number;
            useBorderRadius: boolean;
            useCssTransforms: boolean;
            verticalCompact: boolean;
        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
            [x: string]: any;
        } & {
            [x: string]: any;
        }, import("vue").PublicProps, {
            borderRadiusPx: number;
            isBounded: boolean;
            isDraggable: boolean;
            isMirrored: boolean;
            isResizable: boolean;
            showCloseButton: boolean;
            useBorderRadius: boolean;
            autoSize: boolean;
            responsive: boolean;
            cols: import("./grid-layout-props.interface").IColumns;
            colNum: number;
            rowHeight: number;
            margin: number[];
            maxRows: number;
            transformScale: number;
            breakpoints: import("./grid-layout-props.interface").IBreakpoints;
            distributeEvenly: boolean;
            horizontalShift: boolean;
            preventCollision: boolean;
            responsiveLayouts: {
                [key: string]: TLayout;
            };
            restoreOnDrag: boolean;
            showGridLines: boolean;
            useCssTransforms: boolean;
            verticalCompact: boolean;
        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import("./GridLayout.vue").IGridLayoutProps> & Readonly<{
            [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
        }>, {
            defaultGridItem: import("vue").Ref<any, any>;
            dragEvent: (eventName?: import("mitt").EventType, id?: string | number, x?: number, y?: number, h?: number, w?: number) => void;
            erd: import("vue").Ref<{
                listenTo: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeListener: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeAllListeners: (element: HTMLElement) => void;
                uninstall: (element: HTMLElement) => void;
            } | null, import("element-resize-detector").Erd | {
                listenTo: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeListener: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
                removeAllListeners: (element: HTMLElement) => void;
                uninstall: (element: HTMLElement) => void;
            } | null>;
            isDragging: import("vue").Ref<boolean, boolean>;
            lastBreakpoint: import("vue").Ref<string | null, string | null>;
            lastLayoutLength: import("vue").Ref<number, number>;
            layouts: import("vue").Ref<{
                [key: string]: any;
            }, {
                [key: string]: any;
            }>;
            mergeStyle: import("vue").Ref<{
                [key: string]: string;
            }, {
                [key: string]: string;
            }>;
            originalLayout: import("vue").Ref<TLayout | undefined, TLayout | undefined>;
            placeholder: import("vue").Ref<{
                h: number;
                i: number | string;
                x: number;
                y: number;
                w: number;
            }, import("../../core/gridlayout/interfaces/layout-data.interface").IPlaceholder | {
                h: number;
                i: number | string;
                x: number;
                y: number;
                w: number;
            }>;
            width: import("vue").Ref<number | null, number | null>;
            layout: TLayout;
            autoSize: boolean;
            borderRadiusPx: number;
            breakpoints: import("./grid-layout-props.interface").IBreakpoints;
            colNum: number;
            cols: import("./grid-layout-props.interface").IColumns;
            distributeEvenly: boolean;
            horizontalShift: boolean;
            isBounded: boolean;
            isDraggable: boolean;
            isMirrored: boolean;
            isResizable: boolean;
            margin: number[];
            maxRows: number;
            preventCollision: boolean;
            responsive: boolean;
            responsiveLayouts: {
                [key: string]: TLayout;
            };
            restoreOnDrag: boolean;
            rowHeight: number;
            showCloseButton: boolean;
            showGridLines: boolean;
            transformScale: number;
            useBorderRadius: boolean;
            useCssTransforms: boolean;
            verticalCompact: boolean;
        }, {}, {}, {}, {
            borderRadiusPx: number;
            isBounded: boolean;
            isDraggable: boolean;
            isMirrored: boolean;
            isResizable: boolean;
            showCloseButton: boolean;
            useBorderRadius: boolean;
            autoSize: boolean;
            responsive: boolean;
            cols: import("./grid-layout-props.interface").IColumns;
            colNum: number;
            rowHeight: number;
            margin: number[];
            maxRows: number;
            transformScale: number;
            breakpoints: import("./grid-layout-props.interface").IBreakpoints;
            distributeEvenly: boolean;
            horizontalShift: boolean;
            preventCollision: boolean;
            responsiveLayouts: {
                [key: string]: TLayout;
            };
            restoreOnDrag: boolean;
            showGridLines: boolean;
            useCssTransforms: boolean;
            verticalCompact: boolean;
        }>;
        __isFragment?: never;
        __isTeleport?: never;
        __isSuspense?: never;
    } & import("vue").ComponentOptionsBase<Readonly<import("./GridLayout.vue").IGridLayoutProps> & Readonly<{
        [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
    }>, {
        defaultGridItem: import("vue").Ref<any, any>;
        dragEvent: (eventName?: import("mitt").EventType, id?: string | number, x?: number, y?: number, h?: number, w?: number) => void;
        erd: import("vue").Ref<{
            listenTo: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
            removeListener: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
            removeAllListeners: (element: HTMLElement) => void;
            uninstall: (element: HTMLElement) => void;
        } | null, import("element-resize-detector").Erd | {
            listenTo: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
            removeListener: (element: HTMLElement, callback: (elem: HTMLElement) => void) => void;
            removeAllListeners: (element: HTMLElement) => void;
            uninstall: (element: HTMLElement) => void;
        } | null>;
        isDragging: import("vue").Ref<boolean, boolean>;
        lastBreakpoint: import("vue").Ref<string | null, string | null>;
        lastLayoutLength: import("vue").Ref<number, number>;
        layouts: import("vue").Ref<{
            [key: string]: any;
        }, {
            [key: string]: any;
        }>;
        mergeStyle: import("vue").Ref<{
            [key: string]: string;
        }, {
            [key: string]: string;
        }>;
        originalLayout: import("vue").Ref<TLayout | undefined, TLayout | undefined>;
        placeholder: import("vue").Ref<{
            h: number;
            i: number | string;
            x: number;
            y: number;
            w: number;
        }, import("../../core/gridlayout/interfaces/layout-data.interface").IPlaceholder | {
            h: number;
            i: number | string;
            x: number;
            y: number;
            w: number;
        }>;
        width: import("vue").Ref<number | null, number | null>;
        layout: TLayout;
        autoSize: boolean;
        borderRadiusPx: number;
        breakpoints: import("./grid-layout-props.interface").IBreakpoints;
        colNum: number;
        cols: import("./grid-layout-props.interface").IColumns;
        distributeEvenly: boolean;
        horizontalShift: boolean;
        isBounded: boolean;
        isDraggable: boolean;
        isMirrored: boolean;
        isResizable: boolean;
        margin: number[];
        maxRows: number;
        preventCollision: boolean;
        responsive: boolean;
        responsiveLayouts: {
            [key: string]: TLayout;
        };
        restoreOnDrag: boolean;
        rowHeight: number;
        showCloseButton: boolean;
        showGridLines: boolean;
        transformScale: number;
        useBorderRadius: boolean;
        useCssTransforms: boolean;
        verticalCompact: boolean;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
        [x: string]: any;
    } & {
        [x: string]: any;
    }, string, {
        borderRadiusPx: number;
        isBounded: boolean;
        isDraggable: boolean;
        isMirrored: boolean;
        isResizable: boolean;
        showCloseButton: boolean;
        useBorderRadius: boolean;
        autoSize: boolean;
        responsive: boolean;
        cols: import("./grid-layout-props.interface").IColumns;
        colNum: number;
        rowHeight: number;
        margin: number[];
        maxRows: number;
        transformScale: number;
        breakpoints: import("./grid-layout-props.interface").IBreakpoints;
        distributeEvenly: boolean;
        horizontalShift: boolean;
        preventCollision: boolean;
        responsiveLayouts: {
            [key: string]: TLayout;
        };
        restoreOnDrag: boolean;
        showGridLines: boolean;
        useCssTransforms: boolean;
        verticalCompact: boolean;
    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
        $slots: {
            default?: (props: {}) => any;
        };
    })) | null;
    mapCache: Map<string, any> | null;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
    default?: (props: {}) => any;
}>;
export default _default;
type __VLS_WithSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};