@lyonbot/interactive-blocks/types/SlotHandler.d.ts

Make interactive selectable, drag-and-drop, copy-and-paste ready, Block and Slot components easily! Works with Vue, React and any MV* framework.

import type { IBCutAction, IBPasteAction } from "./action";
import type { BlockContext } from "./BlockContext";
import type { BlockHandler, BlockInfo } from "./BlockHandler";
import { EventKeyStyle } from "./utils";
export interface SlotInfo {
    /**
     * you can attach something (eg. `this` of component) as `slotHandler.ref`
     */
    ref?: any;
    onCut?(action: IBCutAction): void;
    onPaste?(action: IBPasteAction): void;
    /**
     * called when `isActive` or `hasFocus` is changed.
     *
     * when triggered, you shall update the appearance.
     */
    onStatusChange?(slot: SlotHandler): void;
}
export interface SlotDOMEventHandlers {
    pointerUp: (ev: Pick<PointerEvent, "eventPhase" | "currentTarget">) => void;
    dragOver?: (ev: Pick<DragEvent, "preventDefault" | "stopPropagation" | "dataTransfer">) => void;
    dragLeave?: (ev: Pick<DragEvent, "preventDefault" | "stopPropagation">) => void;
    drop?: (ev: Pick<DragEvent, "preventDefault" | "stopPropagation" | "dataTransfer">) => void;
}
export declare class SlotHandler {
    readonly type = "slot";
    readonly ctx: BlockContext;
    readonly ownerBlock: BlockHandler | null;
    readonly items: Set<BlockHandler>;
    info: SlotInfo;
    handlePointerUp: (ev?: Pick<PointerEvent, "eventPhase" | "currentTarget"> | undefined) => void;
    constructor(ctx: BlockContext, ownerBlock: BlockHandler | null, info: SlotInfo);
    createBlock(info: BlockInfo): BlockHandler;
    get ref(): any;
    private _isActive;
    get isActive(): boolean;
    get hasFocus(): boolean;
    /**
     * make this slot active and select all content, without focusing
     *
     * note: if BlockContent disabled `multipleSelect`, only the first block will be selected.
     *
     * @see {@link SlotHandler.focus} - is often used with
     */
    select(): void;
    /**
     * make this slot active and move the focus to this BlockContext.
     *
     * note: if another slot was active, all blocks will be unselected.
     *
     * @see {@link SlotHandler.select} - you can call this before `focus`
     */
    focus(): void;
    isDescendantOfBlock(block: BlockHandler): boolean;
    isDescendantOfSlot(slot: SlotHandler): boolean;
    getDOMEvents<S extends EventKeyStyle>(eventKeyStyle?: S, opt?: {
        draggable?: boolean;
    }): import("./utils").StyledEventLUT<SlotDOMEventHandlers, S | undefined>;
    dispose(): void;
}