@shopware-ag/meteor-component-library/dist/common/directives/dragdrop.directive.d.ts

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import { Directive } from 'vue';
export interface DragConfig<DATA = unknown> {
    delay: number;
    dragGroup: number | string;
    draggableCls: string;
    draggingStateCls: string;
    dragElementCls: string;
    validDragCls: string;
    invalidDragCls: string;
    preventEvent: boolean;
    validateDrop: null | ((dragConfigData: DragConfig<DATA>["data"], dropConfigData: DropConfig<DATA>["data"]) => boolean);
    validateDrag: null | ((dragConfigData: DragConfig<DATA>["data"], dropConfigData: DropConfig<DATA>["data"]) => boolean);
    validateDragStart: null | ((dragConfigData: DragConfig<DATA>["data"], el: HTMLElement, event: MouseEvent | TouchEvent) => boolean);
    onDragStart: null | ((dragConfig: DragConfig<DATA>, el: HTMLElement, dragElement: HTMLElement) => void);
    onDragEnter: null | ((dragConfigData: DragConfig<DATA>["data"], dropConfigData: DropConfig<DATA>["data"], valid: boolean) => void);
    onDragLeave: null | ((dragConfigData: DragConfig<DATA>["data"], dropConfigData: DropConfig<DATA>["data"]) => void);
    onDrop: null | ((dragConfigData: DragConfig<DATA>["data"], dropConfigData: DropConfig<DATA>["data"]) => void);
    data: null | DATA;
    disabled: boolean;
}
export interface DropConfig<DATA = unknown> {
    dragGroup: number | string;
    droppableCls: string;
    validDropCls: string;
    invalidDropCls: string;
    validateDrop: null | ((dragConfigData: DragConfig<DATA>["data"], dropConfigData: DropConfig<DATA>["data"]) => boolean);
    onDrop: null | ((dragConfigData: DragConfig<DATA>["data"], dropConfigData: DropConfig<DATA>["data"]) => void);
    data: null | DATA;
}
export interface DropZone {
    el: HTMLElement;
    dropConfig: DropConfig;
}
/**
 * Directive for making elements draggable.
 *
 * Usage:
 * <div v-draggable="{ data: {...}, onDrop() {...} }"></div>
 *
 * See the {DragConfig} for all possible config options.
 */
export declare const draggable: Directive;
/**
 * Directive to define an element as a drop zone.
 *
 * Usage:
 * <div v-droppable="{ data: {...}, onDrop() {...} }"></div>
 *
 * See the {dropConfig} for all possible config options.
 */
export declare const droppable: Directive;