@vue-dnd-kit/core 2.1.3 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,201 +2,203 @@ import { ComponentPublicInstance, ComputedRef, Ref, ShallowRef } from 'vue';
2
2
  import { IPlacement, IPlacementMargins } from './placement';
3
3
  import { IDragEvent } from './provider';
4
4
  import { IHoveredDraggableContext } from './operations';
5
- export type TDnDNode = HTMLElement | ComponentPublicInstance | null;
6
- export type TDnDNodeRef = Readonly<Ref<TDnDNode>>;
7
- export type TDragAxis = 'x' | 'y' | 'both';
8
- /** Factory registered on a draggable: returns [index, items] */
9
- export type TDraggablePayload<T = any> = () => [number, T[]];
10
-
11
- /** Factory registered on a droppable zone: returns items array */
12
- export type TDroppablePayload<T = any> = () => T[];
13
-
14
- // ─── Public event types ────────────────────────────────────────────────────────
15
-
16
- /** One dragged item always carries its source array and position */
17
- export interface IDragItem<T = unknown> {
18
- /** Index of this item in `items` */
19
- index: number;
20
- /** The actual object: `items[index]` */
21
- item: T;
22
- /** Source array (same reference as passed to the draggable payload factory) */
23
- items: T[];
24
- /** Custom data from the `data` option (reactive, always up-to-date) */
25
- data?: unknown;
26
- }
27
-
28
- /** Drop zone context — present in onEnter / onDrop / onLeave */
29
- export interface IDropZoneContext<T = unknown> {
30
- items: T[];
31
- /** Cursor position relative to the zone boundary */
32
- placement: IPlacement | undefined;
33
- /** Custom data from the `data` option (reactive, always up-to-date) */
34
- data?: unknown;
35
- }
36
-
37
- export interface IBaseOptions {
38
- disabled?: boolean | Ref<boolean>;
39
- groups?: string[] | Ref<string[]>;
40
- }
41
-
42
- export interface IBaseEntity {
43
- disabled?: boolean;
44
- groups?: string[];
45
- }
46
-
47
- export interface IEntities {
48
- draggableMap: Map<HTMLElement, IDraggableEntity>;
49
- droppableMap: Map<HTMLElement, IDroppableEntity>;
50
-
51
- selectingArea?: HTMLElement;
52
- initiatingDraggable?: HTMLElement;
53
-
54
- selectableAreaMap: Map<HTMLElement, ISelectableAreaEntity>;
55
- constraintsAreaMap: Map<HTMLElement, IConstraintsAreaEntity>;
56
-
57
- draggingMap: Map<HTMLElement, IDraggingEntity>;
58
- selectedSet: Set<HTMLElement>;
59
- /** Snapshot of selectedSet taken at the start of a rubber-band selection session.
60
- * Elements in this set are preserved when the new rect doesn't cover them. */
61
- selectionBase: Set<HTMLElement>;
62
-
63
- modifiersDraggableSet: ComputedRef<Set<HTMLElement>>;
64
- modifiersSelectableAreaSet: ComputedRef<Set<HTMLElement>>;
65
-
66
- allowedDroppableSet: ComputedRef<Set<HTMLElement>>;
67
- allowedDraggableSet: ComputedRef<Set<HTMLElement>>;
68
-
69
- visibleDraggableSet: Set<HTMLElement>;
70
- visibleDroppableSet: Set<HTMLElement>;
71
- visibleSelectableAreaSet: Set<HTMLElement>;
72
- }
73
-
74
- export type TModifierMethod = 'every' | 'some';
75
- export type TModifierKeys = string[];
76
-
77
- export interface IModifier {
78
- keys: TModifierKeys;
79
- method: TModifierMethod;
80
- }
81
-
82
- export interface IModifierOptions {
83
- keys: TModifierKeys | Ref<TModifierKeys>;
84
- method: TModifierMethod | Ref<TModifierMethod>;
85
- }
86
-
87
- export interface ISelectableAreaEvents {
88
- /** Called when selection ends (pointer up) with selected elements */
89
- onSelected?: (selected: HTMLElement[]) => void;
90
- }
91
-
92
- export interface ISelectableAreaEntity extends IBaseEntity {
93
- modifier: IModifier;
94
- events?: ISelectableAreaEvents;
95
- }
96
-
97
- export interface IConstraintsAreaEntity {
98
- axis?: TDragAxis;
99
- restrictToArea?: boolean;
100
- }
101
-
102
- export interface IDraggableEvents {
103
- /** Dragged element(s) — identifies which element is being dragged */
104
- onSelfDragStart?: (event: IDragEvent) => void;
105
- onSelfDragMove?: (event: IDragEvent) => void;
106
- onSelfDragEnd?: (event: IDragEvent) => void;
107
- onSelfDragCancel?: (event: IDragEvent) => void;
108
-
109
- /** Element under cursor during drag — when another element is dragged over this one */
110
- onDragStart?: (event: IDragEvent) => void;
111
- onDragMove?: (event: IDragEvent) => void;
112
- onDragEnd?: (event: IDragEvent) => void;
113
- onDragCancel?: (event: IDragEvent) => void;
114
-
115
- /** Alias / shortcut: cursor enters this draggable during drag */
116
- onHover?: (event: IDragEvent) => void;
117
- /** Cursor leaves this draggable during drag */
118
- onLeave?: (event: IDragEvent) => void;
119
- }
120
-
121
- export interface IDropValidateEvent {
122
- /** Items whose groups are compatible with the zone's groups */
123
- validItems: IDragItem[];
124
- /** Items whose groups do NOT match the zone's groups */
125
- invalidItems: IDragItem[];
126
- dropZone: IDropZoneContext | undefined;
127
- hoveredDraggable?: IHoveredDraggableContext;
128
- }
129
-
130
- export interface IDroppableEvents {
131
- onEnter?: (event: IDragEvent) => void;
132
- /**
133
- * Called before `onDrop` when `groupMatch: 'some'` and some dragged items
134
- * don't match the zone's groups. Receives valid/invalid item split.
135
- *
136
- * Return:
137
- * - `void` — drop only `validItems` (default)
138
- * - `false` — decline this drop (drag stays active)
139
- * - `IDragItem[]` — drop exactly these items
140
- * - `Promise<...>`async (state becomes 'pending' while waiting)
141
- */
142
- onValidate?: (
143
- event: IDropValidateEvent
144
- ) => void | false | IDragItem[] | Promise<void | false | IDragItem[]>;
145
- onDrop?: (event: IDragEvent) => void | boolean | Promise<void | boolean>;
146
- onLeave?: (event: IDragEvent) => void;
147
- }
148
-
149
- export interface IDragActivationOptions {
150
- distance?:
151
- | {
152
- x?: number | Ref<number>;
153
- y?: number | Ref<number>;
154
- condition?: TCondition | Ref<TCondition>;
155
- }
156
- | number
157
- | Ref<number>;
158
- delay?: number | Ref<number>;
159
- }
160
-
161
- export interface IDragActivation {
162
- distance?:
163
- | {
164
- x?: number;
165
- y?: number;
166
- condition?: TCondition;
167
- }
168
- | number;
169
- delay?: number;
170
- condition?: TCondition;
171
- }
172
-
173
- export type TCondition = 'any' | 'both';
174
-
175
- export interface IDraggableEntity extends IBaseEntity {
176
- render?: Component;
177
- events?: IDraggableEvents;
178
- payload?: TDraggablePayload;
179
- data?: () => unknown;
180
- modifier?: IModifier;
181
- dragHandle?: string;
182
- activation?: IDragActivation;
183
- /** Margins for center zone. When pointer in center and element is also droppable, zone mode is used. */
184
- placementMargins?: IPlacementMargins;
185
- hoveredPlacement?: IPlacement;
186
- }
187
-
188
- export interface IDraggingEntity extends IDraggableEntity {
189
- initialHTML: string;
190
- initialRect: DOMRect;
191
- initialOuterHTML: string;
192
- }
193
-
194
- export interface IDroppableEntity extends IBaseEntity {
195
- /** 'every' — all dragged items must match zone groups (default).
196
- * 'some' — zone is accessible if at least one item matches. */
197
- groupMatch?: TModifierMethod;
198
- events?: IDroppableEvents;
199
- payload?: TDroppablePayload;
200
- data?: () => unknown;
201
- hoveredPlacement: IPlacement | undefined;
202
- }
5
+
6
+
7
+ export type TDnDNode = HTMLElement | ComponentPublicInstance | null;
8
+ export type TDnDNodeRef = Readonly<Ref<TDnDNode>>;
9
+ export type TDragAxis = 'x' | 'y' | 'both';
10
+ /** Factory registered on a draggable: returns [index, items] */
11
+ export type TDraggablePayload<T = any> = () => [number, T[]];
12
+
13
+ /** Factory registered on a droppable zone: returns items array */
14
+ export type TDroppablePayload<T = any> = () => T[];
15
+
16
+ // ─── Public event types ────────────────────────────────────────────────────────
17
+
18
+ /** One dragged item always carries its source array and position */
19
+ export interface IDragItem<T = unknown> {
20
+ /** Index of this item in `items` */
21
+ index: number;
22
+ /** The actual object: `items[index]` */
23
+ item: T;
24
+ /** Source array (same reference as passed to the draggable payload factory) */
25
+ items: T[];
26
+ /** Custom data from the `data` option (reactive, always up-to-date) */
27
+ data?: unknown;
28
+ }
29
+
30
+ /** Drop zone context — present in onEnter / onDrop / onLeave */
31
+ export interface IDropZoneContext<T = unknown> {
32
+ items: T[];
33
+ /** Cursor position relative to the zone boundary */
34
+ placement: IPlacement | undefined;
35
+ /** Custom data from the `data` option (reactive, always up-to-date) */
36
+ data?: unknown;
37
+ }
38
+
39
+ export interface IBaseOptions {
40
+ disabled?: boolean | Ref<boolean>;
41
+ groups?: string[] | Ref<string[]>;
42
+ }
43
+
44
+ export interface IBaseEntity {
45
+ disabled?: boolean;
46
+ groups?: string[];
47
+ }
48
+
49
+ export interface IEntities {
50
+ draggableMap: Map<HTMLElement, IDraggableEntity>;
51
+ droppableMap: Map<HTMLElement, IDroppableEntity>;
52
+
53
+ selectingArea?: HTMLElement;
54
+ initiatingDraggable?: HTMLElement;
55
+
56
+ selectableAreaMap: Map<HTMLElement, ISelectableAreaEntity>;
57
+ constraintsAreaMap: Map<HTMLElement, IConstraintsAreaEntity>;
58
+
59
+ draggingMap: Map<HTMLElement, IDraggingEntity>;
60
+ selectedSet: Set<HTMLElement>;
61
+ /** Snapshot of selectedSet taken at the start of a rubber-band selection session.
62
+ * Elements in this set are preserved when the new rect doesn't cover them. */
63
+ selectionBase: Set<HTMLElement>;
64
+
65
+ modifiersDraggableSet: ComputedRef<Set<HTMLElement>>;
66
+ modifiersSelectableAreaSet: ComputedRef<Set<HTMLElement>>;
67
+
68
+ allowedDroppableSet: ComputedRef<Set<HTMLElement>>;
69
+ allowedDraggableSet: ComputedRef<Set<HTMLElement>>;
70
+
71
+ visibleDraggableSet: Set<HTMLElement>;
72
+ visibleDroppableSet: Set<HTMLElement>;
73
+ visibleSelectableAreaSet: Set<HTMLElement>;
74
+ }
75
+
76
+ export type TModifierMethod = 'every' | 'some';
77
+ export type TModifierKeys = string[];
78
+
79
+ export interface IModifier {
80
+ keys: TModifierKeys;
81
+ method: TModifierMethod;
82
+ }
83
+
84
+ export interface IModifierOptions {
85
+ keys: TModifierKeys | Ref<TModifierKeys>;
86
+ method: TModifierMethod | Ref<TModifierMethod>;
87
+ }
88
+
89
+ export interface ISelectableAreaEvents {
90
+ /** Called when selection ends (pointer up) with selected elements */
91
+ onSelected?: (selected: HTMLElement[]) => void;
92
+ }
93
+
94
+ export interface ISelectableAreaEntity extends IBaseEntity {
95
+ modifier: IModifier;
96
+ events?: ISelectableAreaEvents;
97
+ }
98
+
99
+ export interface IConstraintsAreaEntity {
100
+ axis?: TDragAxis;
101
+ restrictToArea?: boolean;
102
+ }
103
+
104
+ export interface IDraggableEvents {
105
+ /** Dragged element(s) identifies which element is being dragged */
106
+ onSelfDragStart?: (event: IDragEvent) => void;
107
+ onSelfDragMove?: (event: IDragEvent) => void;
108
+ onSelfDragEnd?: (event: IDragEvent) => void;
109
+ onSelfDragCancel?: (event: IDragEvent) => void;
110
+
111
+ /** Element under cursor during drag — when another element is dragged over this one */
112
+ onDragStart?: (event: IDragEvent) => void;
113
+ onDragMove?: (event: IDragEvent) => void;
114
+ onDragEnd?: (event: IDragEvent) => void;
115
+ onDragCancel?: (event: IDragEvent) => void;
116
+
117
+ /** Alias / shortcut: cursor enters this draggable during drag */
118
+ onHover?: (event: IDragEvent) => void;
119
+ /** Cursor leaves this draggable during drag */
120
+ onLeave?: (event: IDragEvent) => void;
121
+ }
122
+
123
+ export interface IDropValidateEvent {
124
+ /** Items whose groups are compatible with the zone's groups */
125
+ validItems: IDragItem[];
126
+ /** Items whose groups do NOT match the zone's groups */
127
+ invalidItems: IDragItem[];
128
+ dropZone: IDropZoneContext | undefined;
129
+ hoveredDraggable?: IHoveredDraggableContext;
130
+ }
131
+
132
+ export interface IDroppableEvents {
133
+ onEnter?: (event: IDragEvent) => void;
134
+ /**
135
+ * Called before `onDrop` when `groupMatch: 'some'` and some dragged items
136
+ * don't match the zone's groups. Receives valid/invalid item split.
137
+ *
138
+ * Return:
139
+ * - `void` — drop only `validItems` (default)
140
+ * - `false`decline this drop (drag stays active)
141
+ * - `IDragItem[]` — drop exactly these items
142
+ * - `Promise<...>` — async (state becomes 'pending' while waiting)
143
+ */
144
+ onValidate?: (
145
+ event: IDropValidateEvent
146
+ ) => void | false | IDragItem[] | Promise<void | false | IDragItem[]>;
147
+ onDrop?: (event: IDragEvent) => void | boolean | Promise<void | boolean>;
148
+ onLeave?: (event: IDragEvent) => void;
149
+ }
150
+
151
+ export interface IDragActivationOptions {
152
+ distance?:
153
+ | {
154
+ x?: number | Ref<number>;
155
+ y?: number | Ref<number>;
156
+ condition?: TCondition | Ref<TCondition>;
157
+ }
158
+ | number
159
+ | Ref<number>;
160
+ delay?: number | Ref<number>;
161
+ }
162
+
163
+ export interface IDragActivation {
164
+ distance?:
165
+ | {
166
+ x?: number;
167
+ y?: number;
168
+ condition?: TCondition;
169
+ }
170
+ | number;
171
+ delay?: number;
172
+ condition?: TCondition;
173
+ }
174
+
175
+ export type TCondition = 'any' | 'both';
176
+
177
+ export interface IDraggableEntity extends IBaseEntity {
178
+ render?: Component;
179
+ events?: IDraggableEvents;
180
+ payload?: TDraggablePayload;
181
+ data?: () => unknown;
182
+ modifier?: IModifier;
183
+ dragHandle?: string;
184
+ activation?: IDragActivation;
185
+ /** Margins for center zone. When pointer in center and element is also droppable, zone mode is used. */
186
+ placementMargins?: IPlacementMargins;
187
+ hoveredPlacement?: IPlacement;
188
+ }
189
+
190
+ export interface IDraggingEntity extends IDraggableEntity {
191
+ initialHTML: string;
192
+ initialRect: DOMRect;
193
+ initialOuterHTML: string;
194
+ }
195
+
196
+ export interface IDroppableEntity extends IBaseEntity {
197
+ /** 'every' — all dragged items must match zone groups (default).
198
+ * 'some' — zone is accessible if at least one item matches. */
199
+ groupMatch?: TModifierMethod;
200
+ events?: IDroppableEvents;
201
+ payload?: TDroppablePayload;
202
+ data?: () => unknown;
203
+ hoveredPlacement: IPlacement | undefined;
204
+ }
@@ -1,5 +1,5 @@
1
- export type * from './pointer';
2
- export type * from './provider';
3
- export type * from './placement';
4
- export type * from './entities';
5
- export type * from './operations';
1
+ export type * from './pointer';
2
+ export type * from './provider';
3
+ export type * from './placement';
4
+ export type * from './entities';
5
+ export type * from './operations';