@vue-dnd-kit/core 1.7.0 → 2.0.0-alpha10

package/dist/external/types/entities.d.ts

@@ -0,0 +1,157 @@
+import { ComponentPublicInstance, ComputedRef, Ref } from 'vue';
+import { IPlacementMargins } from './placement';
+import { IDragEvent } from './provider';
+export type TDnDNode = HTMLElement | ComponentPublicInstance | null;
+export type TDnDNodeRef = Readonly<Ref<TDnDNode>>;
+export type TDragAxis = 'x' | 'y' | 'both';
+export type TDraggablePayload<T = any, D = any> = () => [number, T[], D?];
+
+/** Resolved payload from TDraggablePayload (index + items + optional dropData) */
+export interface IDragPayload<T = unknown, D = unknown> {
+  index: number;
+  items: T[];
+  dropData?: D;
+}
+
+export type TDroppablePayload<T = any, U = any> = () => [T[], U?];
+
+/** Resolved payload from TDroppablePayload (items + optional userData) */
+export interface IDropZonePayload<T = unknown, U = unknown> {
+  items: T[];
+  userData?: U;
+}
+
+export interface IBaseOptions {
+  disabled?: boolean | Ref<boolean>;
+  groups?: string[] | Ref<string[]>;
+}
+
+export interface IBaseEntity {
+  disabled?: boolean;
+  groups?: string[];
+}
+
+export interface IEntities {
+  draggableMap: Map<HTMLElement, IDraggableEntity>;
+  droppableMap: Map<HTMLElement, IDroppableEntity>;
+
+  selectingArea?: HTMLElement;
+  initiatingDraggable?: HTMLElement;
+
+  selectableAreaMap: Map<HTMLElement, ISelectableAreaEntity>;
+  constraintsAreaMap: Map<HTMLElement, IConstraintsAreaEntity>;
+
+  draggingMap: Map<HTMLElement, IDraggingEntity>;
+  selectedSet: Set<HTMLElement>;
+
+  modifiersDraggableSet: ComputedRef<Set<HTMLElement>>;
+  modifiersSelectableAreaSet: ComputedRef<Set<HTMLElement>>;
+
+  allowedDroppableSet: ComputedRef<Set<HTMLElement>>;
+  allowedDraggableSet: ComputedRef<Set<HTMLElement>>;
+
+  visibleDraggableSet: Set<HTMLElement>;
+  visibleDroppableSet: Set<HTMLElement>;
+  visibleSelectableAreaSet: Set<HTMLElement>;
+}
+
+export type TModifierMethod = 'every' | 'some';
+export type TModifierKeys = string[];
+
+export interface IModifier {
+  keys: TModifierKeys;
+  method: TModifierMethod;
+}
+
+export interface IModifierOptions {
+  keys: TModifierKeys | Ref<TModifierKeys>;
+  method: TModifierMethod | Ref<TModifierMethod>;
+}
+
+export interface ISelectableAreaEvents {
+  /** Called when selection ends (pointer up) with selected elements */
+  onSelected?: (selected: HTMLElement[]) => void;
+}
+
+export interface ISelectableAreaEntity extends IBaseEntity {
+  modifier: IModifier;
+  events?: ISelectableAreaEvents;
+}
+
+export interface IConstraintsAreaEntity {
+  axis?: TDragAxis;
+  restrictToArea?: boolean;
+}
+
+export interface IDraggableEvents {
+  /** Dragged element(s) — identifies which element is being dragged */
+  onSelfDragStart?: (event: IDragEvent) => void;
+  onSelfDragMove?: (event: IDragEvent) => void;
+  onSelfDragEnd?: (event: IDragEvent) => void;
+  onSelfDragCancel?: (event: IDragEvent) => void;
+
+  /** Element under cursor during drag — when another element is dragged over this one */
+  onDragStart?: (event: IDragEvent) => void;
+  onDragMove?: (event: IDragEvent) => void;
+  onDragEnd?: (event: IDragEvent) => void;
+  onDragCancel?: (event: IDragEvent) => void;
+
+  /** Alias / shortcut: cursor enters this draggable during drag */
+  onHover?: (event: IDragEvent) => void;
+  /** Cursor leaves this draggable during drag */
+  onLeave?: (event: IDragEvent) => void;
+}
+
+export interface IDroppableEvents {
+  onEnter?: (event: IDragEvent) => void;
+  onDrop?: (event: IDragEvent) => void | Promise<void>;
+  onLeave?: (event: IDragEvent) => void;
+}
+
+export interface IDragActivationOptions {
+  distance?:
+    | {
+        x?: number | Ref<number>;
+        y?: number | Ref<number>;
+        condition?: TCondition | Ref<TCondition>;
+      }
+    | number
+    | Ref<number>;
+  delay?: number | Ref<number>;
+}
+
+export interface IDragActivation {
+  distance?:
+    | {
+        x?: number;
+        y?: number;
+        condition?: TCondition;
+      }
+    | number;
+  delay?: number;
+  condition?: TCondition;
+}
+
+export type TCondition = 'any' | 'both';
+
+export interface IDraggableEntity extends IBaseEntity {
+  render?: Component;
+  events?: IDraggableEvents;
+  payload?: TDraggablePayload;
+  modifier?: IModifier;
+  dragHandle?: string;
+  activation?: IDragActivation;
+  /** Margins for center zone. When pointer in center and element is also droppable, zone mode is used. */
+  placementMargins?: IPlacementMargins;
+}
+
+export interface IDraggingEntity extends IDraggableEntity {
+  initialHTML: string;
+  initialRect: DOMRect;
+  initialOuterHTML: string;
+}
+
+export interface IDroppableEntity extends IBaseEntity {
+  events?: IDroppableEvents;
+  payload?: TDroppablePayload;
+}

package/dist/external/types/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './pointer';
+export type * from './provider';
+export type * from './placement';
+export type * from './entities';

package/dist/external/types/placement.d.ts

@@ -0,0 +1,22 @@
+export interface IPlacement {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+  /** True when pointer is in center zone (inside placementMargins). Used for dual-role draggable+zone. */
+  center: boolean;
+}
+
+export interface IPlacementMargins {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+/** Options for makeAutoScroll and DnDProvider autoScrollViewport prop */
+export interface IAutoScrollOptions {
+  threshold?: number | IPlacementMargins;
+  speed?: number;
+  disabled?: boolean;
+}

package/dist/external/types/pointer.d.ts

@@ -0,0 +1,10 @@
+export interface ICoordinates {
+  x: number;
+  y: number;
+}
+
+export type TPointerState = {
+  start: ICoordinates;
+  current: ICoordinates;
+  offset: ICoordinates;
+} | undefined | null

package/dist/external/types/provider.d.ts

@@ -0,0 +1,84 @@
+import { IConstraintsAreaEntity, IDragPayload, IDropZonePayload, IDraggableEntity, IDroppableEntity, IEntities, ISelectableAreaEntity, TDnDNode } from './entities';
+import { ICoordinates, TPointerState } from './pointer';
+import { IAutoScrollOptions, IPlacement } from './placement';
+import { Component, ComputedRef, CSSProperties, Reactive, Ref, ShallowRef, WritableComputedRef } from 'vue';
+/** Event object passed to drag/drop handlers */
+export interface IDragEvent<
+  T = unknown,
+  D = unknown,
+  U = unknown,
+  V = unknown,
+> {
+  /** Payload from the dragged item (draggable payload) */
+  payload: IDragPayload<T, D> | undefined;
+  /** Payload from the drop zone (droppable payload), set for onEnter/onDrop/onLeave */
+  dropZonePayload?: IDropZonePayload<U, V>;
+  provider: IDnDProviderExternal;
+}
+
+/** Map element → placement for elements under cursor during drag */
+export type THoveredMap = Map<HTMLElement, IPlacement>;
+
+export interface IHovered {
+  draggable: THoveredMap;
+  droppable: THoveredMap;
+}
+
+export interface IDnDProviderExternal {
+  state: Ref<TDnDState | undefined>;
+  pointer: Ref<TPointerState | undefined>;
+  entities: Reactive<IEntities>;
+  keyboard: {
+    keys: {
+      pressedKeys: Ref<Set<string>>;
+      forDrag: string[];
+      forCancel: string[];
+      forDrop: string[];
+      forMove: string[];
+      forMoveFaster: string[];
+    };
+    step: number;
+    moveFaster: number;
+  };
+  scrollPosition: Reactive<ICoordinates>;
+  delay: Reactive<IDelay>;
+  distanceProgress: ComputedRef<number>;
+  overlay: {
+    ref: Ref<HTMLElement | null>;
+    position: ComputedRef<ICoordinates>;
+    size: Ref<DOMRect | null>;
+    render: Ref<Component | undefined>;
+    to: WritableComputedRef<string | false | null | undefined>;
+  };
+  hovered: IHovered;
+  collision: {
+    run?: (provider: any) => {
+      elements: HTMLElement[];
+      zones: HTMLElement[];
+    };
+    throttle: Ref<number>;
+  };
+  autoScrollViewport: ComputedRef<
+    IAutoScrollOptions | true | false | null | undefined
+  >;
+}
+
+export interface IDelay {
+  progress: number;
+  startTime: number;
+}
+
+export type TDnDState =
+  | 'dragging'
+  | 'selecting'
+  | 'activating'
+  | null
+  | undefined;
+
+/** DnDProvider props */
+export interface IDnDProviderProps {
+  /** Enable viewport auto-scroll: true = defaults, object = options. false | null | undefined = disabled. */
+  autoScrollViewport?: IAutoScrollOptions | true | false | null;
+  /** Teleport overlay to element: 'body' = defaults, string = element id. false | null | undefined = disabled. */
+  overlayTo?: string | false | null;
+}