@vue-dnd-kit/core 2.0.0-alpha2 → 2.0.0-alpha4
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.
- package/README.md +72 -3
- package/dist/external/components/DefaultOverlay.vue.d.ts +0 -1
- package/dist/external/components/DnDProvider.vue.d.ts +0 -1
- package/dist/external/composables/makeConstraintArea.d.ts +7 -0
- package/dist/external/composables/makeDraggable.d.ts +0 -1
- package/dist/external/composables/makeDroppable.d.ts +4 -3
- package/dist/external/composables/{makeSelectableArea.d.ts → makeSelectionArea.d.ts} +2 -3
- package/dist/external/composables/useDnDProvider.d.ts +0 -1
- package/dist/external/index.d.ts +2 -3
- package/dist/external/types/entities.d.ts +10 -0
- package/dist/external/types/provider.d.ts +5 -2
- package/dist/internal/composables/useDnDProviderEvents.d.ts +0 -1
- package/dist/internal/composables/useDnDProviderInternal.d.ts +0 -1
- package/dist/internal/composables/useDnDProviderState.d.ts +0 -1
- package/dist/internal/composables/useSizeObserver.d.ts +0 -1
- package/dist/internal/logic/hover.d.ts +0 -1
- package/dist/internal/logic/keyboard.d.ts +0 -1
- package/dist/internal/logic/payload.d.ts +6 -2
- package/dist/internal/logic/pointer.d.ts +0 -1
- package/dist/internal/logic/scroll.d.ts +0 -1
- package/dist/internal/sensors/defaultCollision.d.ts +0 -1
- package/dist/internal/sensors/index.d.ts +0 -1
- package/dist/internal/sensors/sensor.d.ts +0 -1
- package/dist/internal/sensors/steps.d.ts +0 -1
- package/dist/internal/utils/constraints.d.ts +0 -1
- package/dist/internal/utils/disabled.d.ts +0 -1
- package/dist/internal/utils/dom.d.ts +0 -1
- package/dist/internal/utils/drag-activation.d.ts +0 -1
- package/dist/internal/utils/events.d.ts +2 -2
- package/dist/internal/utils/geometry.d.ts +0 -1
- package/dist/internal/utils/groups.d.ts +0 -1
- package/dist/internal/utils/keyboard.d.ts +0 -1
- package/dist/internal/utils/namespaces.d.ts +0 -1
- package/dist/internal/utils/observer.d.ts +0 -1
- package/dist/internal/utils/placement.d.ts +0 -1
- package/dist/internal/utils/pointer.d.ts +0 -1
- package/dist/internal/utils/provider.d.ts +0 -1
- package/dist/internal/utils/selection.d.ts +0 -1
- package/dist/internal/utils/session.d.ts +0 -1
- package/dist/vue-dnd-kit-core.cjs.js +2 -3
- package/dist/vue-dnd-kit-core.es.js +181 -164
- package/package.json +4 -4
- package/dist/external/components/DefaultOverlay.vue.d.ts.map +0 -1
- package/dist/external/components/DnDProvider.vue.d.ts.map +0 -1
- package/dist/external/composables/makeBoundingBox.d.ts +0 -8
- package/dist/external/composables/makeBoundingBox.d.ts.map +0 -1
- package/dist/external/composables/makeCustomOverlay.d.ts +0 -2
- package/dist/external/composables/makeCustomOverlay.d.ts.map +0 -1
- package/dist/external/composables/makeDraggable.d.ts.map +0 -1
- package/dist/external/composables/makeDroppable.d.ts.map +0 -1
- package/dist/external/composables/makeSelectableArea.d.ts.map +0 -1
- package/dist/external/composables/useDnDProvider.d.ts.map +0 -1
- package/dist/external/index.d.ts.map +0 -1
- package/dist/internal/composables/useDnDProviderEvents.d.ts.map +0 -1
- package/dist/internal/composables/useDnDProviderInternal.d.ts.map +0 -1
- package/dist/internal/composables/useDnDProviderState.d.ts.map +0 -1
- package/dist/internal/composables/useSizeObserver.d.ts.map +0 -1
- package/dist/internal/logic/hover.d.ts.map +0 -1
- package/dist/internal/logic/keyboard.d.ts.map +0 -1
- package/dist/internal/logic/payload.d.ts.map +0 -1
- package/dist/internal/logic/pointer.d.ts.map +0 -1
- package/dist/internal/logic/scroll.d.ts.map +0 -1
- package/dist/internal/sensors/defaultCollision.d.ts.map +0 -1
- package/dist/internal/sensors/index.d.ts.map +0 -1
- package/dist/internal/sensors/sensor.d.ts.map +0 -1
- package/dist/internal/sensors/steps.d.ts.map +0 -1
- package/dist/internal/utils/constraints.d.ts.map +0 -1
- package/dist/internal/utils/disabled.d.ts.map +0 -1
- package/dist/internal/utils/dom.d.ts.map +0 -1
- package/dist/internal/utils/drag-activation.d.ts.map +0 -1
- package/dist/internal/utils/events.d.ts.map +0 -1
- package/dist/internal/utils/geometry.d.ts.map +0 -1
- package/dist/internal/utils/groups.d.ts.map +0 -1
- package/dist/internal/utils/keyboard.d.ts.map +0 -1
- package/dist/internal/utils/namespaces.d.ts.map +0 -1
- package/dist/internal/utils/observer.d.ts.map +0 -1
- package/dist/internal/utils/placement.d.ts.map +0 -1
- package/dist/internal/utils/pointer.d.ts.map +0 -1
- package/dist/internal/utils/provider.d.ts.map +0 -1
- package/dist/internal/utils/selection.d.ts.map +0 -1
- package/dist/internal/utils/session.d.ts.map +0 -1
- package/dist/vue-dnd-kit-core.cjs.js.map +0 -1
- package/dist/vue-dnd-kit-core.es.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,5 +1,74 @@
|
|
|
1
|
-
# Vue
|
|
1
|
+
# Vue DnD Kit - Core Package
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://github.com/zizigy/vue-dnd-kit)
|
|
4
|
+
[](https://www.npmjs.com/package/@vue-dnd-kit/core)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://zizigy.github.io/vue-dnd-kit/">
|
|
8
|
+
<img src="https://raw.githubusercontent.com/ZiZiGY/vue-dnd-kit/v2/public/logo.svg" width="400" alt="Vue Drag & Drop Logo">
|
|
9
|
+
</a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p align="center">
|
|
13
|
+
Core package of the Vue Drag & Drop library with composables and provider-based API.
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<p align="center">
|
|
17
|
+
<a href="https://zizigy.github.io/vue-dnd-kit/" target="_blank">
|
|
18
|
+
<img src="https://img.shields.io/badge/Documentation-Visit-blue?style=flat-square" alt="Documentation">
|
|
19
|
+
</a>
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
<p align="center">
|
|
23
|
+
Inspired by <a href="https://dndkit.com/" target="_blank">React DnD Kit</a>, adapted for Vue.js
|
|
24
|
+
</p>
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## About
|
|
29
|
+
|
|
30
|
+
**Vue DnD Kit** — lightweight drag & drop library for Vue 3. Built around a provider (`DnDProvider`) and composables: `makeDraggable`, `makeDroppable`, `makeSelectionArea`, `makeConstraintArea`.
|
|
31
|
+
|
|
32
|
+
- **Lightweight** — small bundle size, no extra dependencies (Vue as peer only)
|
|
33
|
+
- **Flexible** — works with any layout and design system
|
|
34
|
+
- **Accessible** — full keyboard support (start, move, cancel, drop)
|
|
35
|
+
- **TypeScript** — fully typed
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Features
|
|
40
|
+
|
|
41
|
+
- **Composables API** — `makeDraggable`, `makeDroppable`, `makeSelectionArea`, `makeConstraintArea`
|
|
42
|
+
- **Provider-based** — `DnDProvider` + `useDnDProvider` for state access
|
|
43
|
+
- **Keyboard support** — Enter/Space for start and drop, arrows for movement, Escape to cancel
|
|
44
|
+
- **Modifier keys** — drag only when modifier held (e.g. Ctrl)
|
|
45
|
+
- **Custom overlay** — custom drag preview via slot or `render` option
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Installation
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
npm install @vue-dnd-kit/core
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
yarn add @vue-dnd-kit/core
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
pnpm add @vue-dnd-kit/core
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
**Peer dependency:** Vue 3
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
[MIT](LICENSE) © [ZiZiGY](https://github.com/ZiZiGY)
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
<p align="center">🎉 Congratulations on the official release! 🎉</p>
|
|
74
|
+
<p align="center">Made with ❤️ for the Vue.js community</p>
|
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
2
2
|
export default _default;
|
|
3
|
-
//# sourceMappingURL=DefaultOverlay.vue.d.ts.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TDnDNodeRef, TDragAxis } from '../types';
|
|
2
|
+
import { Ref } from 'vue';
|
|
3
|
+
export interface IMakeConstraintAreaOptions {
|
|
4
|
+
axis?: TDragAxis | Ref<TDragAxis>;
|
|
5
|
+
restrictToArea?: boolean | Ref<boolean>;
|
|
6
|
+
}
|
|
7
|
+
export declare function makeConstraintArea(ref: TDnDNodeRef, options?: IMakeConstraintAreaOptions): {};
|
|
@@ -14,4 +14,3 @@ interface IMakeDraggableReturnType {
|
|
|
14
14
|
export declare function makeDraggable(ref: TDnDNodeRef, payload?: TDraggablePayload): IMakeDraggableReturnType;
|
|
15
15
|
export declare function makeDraggable(ref: TDnDNodeRef, options: IMakeDraggableOptions, payload?: TDraggablePayload): IMakeDraggableReturnType;
|
|
16
16
|
export {};
|
|
17
|
-
//# sourceMappingURL=makeDraggable.d.ts.map
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { IBaseOptions, IDroppableEvents, TDnDNodeRef } from '../types';
|
|
1
|
+
import { IBaseOptions, IDroppableEvents, TDnDNodeRef, TDroppablePayload } from '../types';
|
|
2
2
|
interface IMakeDroppableOptions extends IBaseOptions {
|
|
3
3
|
events?: IDroppableEvents;
|
|
4
4
|
}
|
|
5
|
-
export declare function makeDroppable(ref: TDnDNodeRef
|
|
5
|
+
export declare function makeDroppable(ref: TDnDNodeRef): void;
|
|
6
|
+
export declare function makeDroppable(ref: TDnDNodeRef, options: IMakeDroppableOptions, payload?: TDroppablePayload): void;
|
|
7
|
+
export declare function makeDroppable(ref: TDnDNodeRef, payload: TDroppablePayload): void;
|
|
6
8
|
export {};
|
|
7
|
-
//# sourceMappingURL=makeDroppable.d.ts.map
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
2
|
import { IBaseOptions, ISelectableAreaEvents, TDnDNodeRef, TModifierKeys, TModifierMethod } from '../types';
|
|
3
|
-
interface
|
|
3
|
+
interface ISelectionAreaOptions extends IBaseOptions {
|
|
4
4
|
modifier?: {
|
|
5
5
|
keys: TModifierKeys | Ref<TModifierKeys>;
|
|
6
6
|
method: TModifierMethod | Ref<TModifierMethod>;
|
|
7
7
|
};
|
|
8
8
|
events?: ISelectableAreaEvents;
|
|
9
9
|
}
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const makeSelectionArea: (nodeRef: TDnDNodeRef, options?: ISelectionAreaOptions) => {
|
|
11
11
|
isSelecting: import('vue').ComputedRef<boolean>;
|
|
12
12
|
style: import('vue').ComputedRef<import('vue').CSSProperties>;
|
|
13
13
|
};
|
|
14
14
|
export {};
|
|
15
|
-
//# sourceMappingURL=makeSelectableArea.d.ts.map
|
package/dist/external/index.d.ts
CHANGED
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
export { default as DnDProvider } from './components/DnDProvider.vue';
|
|
6
6
|
export { makeDraggable } from './composables/makeDraggable';
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
7
|
+
export { makeSelectionArea } from './composables/makeSelectionArea';
|
|
8
|
+
export { makeConstraintArea } from './composables/makeConstraintArea';
|
|
9
9
|
export { makeDroppable } from './composables/makeDroppable';
|
|
10
10
|
export { useDnDProvider } from './composables/useDnDProvider';
|
|
11
11
|
export type * from './types';
|
|
12
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -13,6 +13,14 @@ export interface IDragPayload<T = unknown, D = unknown> {
|
|
|
13
13
|
dropData?: D;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
export type TDroppablePayload<T = any, U = any> = () => [T[], U?];
|
|
17
|
+
|
|
18
|
+
/** Resolved payload from TDroppablePayload (items + optional userData) */
|
|
19
|
+
export interface IDropZonePayload<T = unknown, U = unknown> {
|
|
20
|
+
items: T[];
|
|
21
|
+
userData?: U;
|
|
22
|
+
}
|
|
23
|
+
|
|
16
24
|
export interface IBaseOptions {
|
|
17
25
|
disabled?: boolean | Ref<boolean>;
|
|
18
26
|
groups?: string[] | Ref<string[]>;
|
|
@@ -137,8 +145,10 @@ export interface IDraggableEntity extends IBaseEntity {
|
|
|
137
145
|
export interface IDraggingEntity extends IDraggableEntity {
|
|
138
146
|
initialHTML: string;
|
|
139
147
|
initialRect: DOMRect;
|
|
148
|
+
initialOuterHTML: string;
|
|
140
149
|
}
|
|
141
150
|
|
|
142
151
|
export interface IDroppableEntity extends IBaseEntity {
|
|
143
152
|
events?: IDroppableEvents;
|
|
153
|
+
payload?: TDroppablePayload;
|
|
144
154
|
}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { IConstraintsAreaEntity, IDragPayload, IDraggableEntity, IDroppableEntity, IEntities, ISelectableAreaEntity, TDnDNode } from './entities';
|
|
1
|
+
import { IConstraintsAreaEntity, IDragPayload, IDropZonePayload, IDraggableEntity, IDroppableEntity, IEntities, ISelectableAreaEntity, TDnDNode } from './entities';
|
|
2
2
|
import { ICoordinates, TPointerState } from './pointer';
|
|
3
3
|
import { IPlacement } from './placement';
|
|
4
4
|
import { Component, ComputedRef, CSSProperties, Reactive, Ref, ShallowRef } from 'vue';
|
|
5
5
|
/** Event object passed to drag/drop handlers */
|
|
6
|
-
export interface IDragEvent<T = unknown, D = unknown> {
|
|
6
|
+
export interface IDragEvent<T = unknown, D = unknown, U = unknown, V = unknown> {
|
|
7
|
+
/** Payload from the dragged item (draggable payload) */
|
|
7
8
|
payload: IDragPayload<T, D> | undefined;
|
|
9
|
+
/** Payload from the drop zone (droppable payload), set for onEnter/onDrop/onLeave */
|
|
10
|
+
dropZonePayload?: IDropZonePayload<U, V>;
|
|
8
11
|
provider: IDnDProviderExternal;
|
|
9
12
|
}
|
|
10
13
|
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
import { IDragPayload } from '../../external/types';
|
|
1
|
+
import { IDragPayload, IDropZonePayload } from '../../external/types';
|
|
2
2
|
import { IDnDProviderInternal } from '../types/provider';
|
|
3
3
|
/**
|
|
4
4
|
* Resolves payload from initiating draggable.
|
|
5
5
|
* Calls entity.payload() and returns { index, items, dropData }.
|
|
6
6
|
*/
|
|
7
7
|
export declare const createDragPayload: (provider: IDnDProviderInternal) => IDragPayload | undefined;
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Resolves payload from a droppable zone.
|
|
10
|
+
* Calls zone entity.payload() and returns { items, userData }.
|
|
11
|
+
*/
|
|
12
|
+
export declare const createDropZonePayload: (provider: IDnDProviderInternal, zone: HTMLElement) => IDropZonePayload | undefined;
|
|
@@ -24,4 +24,3 @@ export declare const pointerInElementCollision: TCollisionCheckFn;
|
|
|
24
24
|
export declare const sortByDepth: TSortCompareFn;
|
|
25
25
|
/** Sort: pointer-in-element + depth when pointer INSIDE container; overlap % + centerDistance when OUTSIDE */
|
|
26
26
|
export declare const sortByOverlapAndPointer: TSortCompareFn;
|
|
27
|
-
//# sourceMappingURL=steps.d.ts.map
|
|
@@ -7,4 +7,3 @@ export type IEffectivelyDisabledContext = {
|
|
|
7
7
|
export declare const isEffectivelyDisabledDraggable: (node: HTMLElement, ctx: IEffectivelyDisabledContext) => boolean;
|
|
8
8
|
/** True if node is disabled as droppable (self or inside disabled droppable). O(droppableMap.size) */
|
|
9
9
|
export declare const isEffectivelyDisabledDroppable: (node: HTMLElement, ctx: IEffectivelyDisabledContext) => boolean;
|
|
10
|
-
//# sourceMappingURL=disabled.d.ts.map
|
|
@@ -27,4 +27,3 @@ export declare function tryStartDragIfActivationComplete(provider: IDnDProviderI
|
|
|
27
27
|
export declare function createActivationDelayTimer(provider: IDnDProviderInternal, onComplete: () => void): {
|
|
28
28
|
cancel: () => void;
|
|
29
29
|
};
|
|
30
|
-
//# sourceMappingURL=drag-activation.d.ts.map
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { IDnDProviderInternal } from '../types/provider';
|
|
2
|
-
import { IHovered } from '../../external/types/provider';
|
|
2
|
+
import { IDragEvent, IHovered } from '../../external/types/provider';
|
|
3
3
|
export type TSelfDragEvent = 'onSelfDragStart' | 'onSelfDragMove' | 'onSelfDragEnd' | 'onSelfDragCancel';
|
|
4
4
|
/** First key from Map or undefined */
|
|
5
5
|
export declare const getFirstKey: <K>(map: Map<K, unknown>) => K | undefined;
|
|
6
6
|
/** Closest draggable from event target */
|
|
7
7
|
export declare const getClosestDraggableFromEvent: (event: PointerEvent) => HTMLElement | null;
|
|
8
|
+
export declare const getDragEvent: (provider: IDnDProviderInternal, dropZone?: HTMLElement) => IDragEvent;
|
|
8
9
|
/** Triggers onSelf* for element from event if it's in draggingMap */
|
|
9
10
|
export declare const triggerSelfDragFromEvent: (provider: IDnDProviderInternal, event: PointerEvent, eventName: TSelfDragEvent) => void;
|
|
10
11
|
/** Triggers onSelf* only for the initiating element (event.target.closest), skip if disabled */
|
|
@@ -19,4 +20,3 @@ export declare const triggerDraggableHoverChange: (provider: IDnDProviderInterna
|
|
|
19
20
|
export declare const triggerZoneLeave: (provider: IDnDProviderInternal, hovered: IHovered) => void;
|
|
20
21
|
/** Triggers zone onLeave on drop failure, skip disabled */
|
|
21
22
|
export declare const triggerDropCancelEvents: (provider: IDnDProviderInternal, hovered: IHovered) => void;
|
|
22
|
-
//# sourceMappingURL=events.d.ts.map
|
|
@@ -21,4 +21,3 @@ export declare const getCenter: (box: IBoundingBox) => IPoint;
|
|
|
21
21
|
export declare const getDistance: (pointA: IPoint, pointB: IPoint) => number;
|
|
22
22
|
export declare const getOverlapPercent: (boxA: IBoundingBox, boxB: IBoundingBox) => number;
|
|
23
23
|
export declare const containsPoint: (box: IBoundingBox, x: number, y: number) => boolean;
|
|
24
|
-
//# sourceMappingURL=geometry.d.ts.map
|
|
@@ -26,4 +26,3 @@ export declare const getPointerBoxFromProvider: (provider: IDnDProviderExternal)
|
|
|
26
26
|
* Else exactly one of top/right/bottom/left is true.
|
|
27
27
|
*/
|
|
28
28
|
export declare const getClosestPlacement: (pointerBox: IRect, elementRect: DOMRect, margins?: IPlacementMargins) => IPlacement;
|
|
29
|
-
//# sourceMappingURL=placement.d.ts.map
|
|
@@ -31,4 +31,3 @@ export declare function startDraggingForProvider(provider: IDnDProviderInternal)
|
|
|
31
31
|
* Initializes dragging (chooses between selection and single element)
|
|
32
32
|
*/
|
|
33
33
|
export declare function initializeDragging(initiatingElement: HTMLElement, selectedSet: Set<HTMLElement>, draggableMap: Map<HTMLElement, IDraggableEntity>, draggingMap: Map<HTMLElement, IDraggingEntity>): void;
|
|
34
|
-
//# sourceMappingURL=pointer.d.ts.map
|
|
@@ -10,4 +10,3 @@ import { Ref } from 'vue';
|
|
|
10
10
|
* @returns Set of filtered nodes with matching modifiers
|
|
11
11
|
*/
|
|
12
12
|
export declare const filterByModifiers: (entityMap: Map<HTMLElement, IDraggableEntity | ISelectableAreaEntity>, visibleSet: Set<HTMLElement>, modifiers: Ref<Set<string>>, isDisabled?: (node: HTMLElement) => boolean) => Set<HTMLElement>;
|
|
13
|
-
//# sourceMappingURL=provider.d.ts.map
|
|
@@ -25,4 +25,3 @@ export declare const updateSelectionByBox: (provider: IDnDProviderInternal) => v
|
|
|
25
25
|
* Creates a DOMRect for the selection box from pointer coordinates
|
|
26
26
|
*/
|
|
27
27
|
export declare const getSelectionBoxRect: (start: ICoordinates, current: ICoordinates) => DOMRect;
|
|
28
|
-
//# sourceMappingURL=selection.d.ts.map
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dnd-kit-default-overlay{transform:translate3d(var(--position-x),var(--position-y),0)}
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),v={SELECT_AREA:"data-dnd-kit-select-area",DRAGGABLE:"data-dnd-kit-draggable",DROPPABLE:"data-dnd-kit-droppable",CONSTRAINT_AREA:"data-dnd-kit-constraint-area"},k={SELECT_AREA:`[${v.SELECT_AREA}]`,DRAGGABLE:`[${v.DRAGGABLE}]`,CONSTRAINT_AREA:`[${v.CONSTRAINT_AREA}]`},Z="VueDnDKitProvider",$=(e,t,n,s)=>{const i=new Set;return t.forEach(a=>{const o=e.get(a),l=s?s(a):o?.disabled;if(!o||l)return;const c=o.modifier?.keys,u=o.modifier?.method;if(!c||!u||c.length===0){i.add(a);return}c[u](f=>n.value.has(f))&&i.add(a)}),i};let ee="",ue="",ge="";const z=e=>e.value?e.value instanceof HTMLElement?e.value:e.value.$el:null,C=(e,t)=>e!==t&&e.contains(t),fe=(e,t)=>!(e.right<t.left||e.left>t.right||e.bottom<t.top||e.top>t.bottom),G=()=>{const e=document.body;ee=e.style.userSelect,e.style.userSelect="none",window.addEventListener("contextmenu",h),window.addEventListener("selectstart",h),window.addEventListener("touchstart",h),window.addEventListener("touchmove",h)},H=()=>{const e=document.body;e.style.userSelect=ee,e.style.touchAction=ue,e.style.overscrollBehavior=ge,window.removeEventListener("contextmenu",h),window.removeEventListener("selectstart",h),window.removeEventListener("touchstart",h),window.removeEventListener("touchmove",h)},h=e=>e.preventDefault(),E=(e,t)=>{if(t.entities.draggableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.draggableMap)if(i.disabled&&C(s,e))return!0;return!1},w=(e,t)=>{if(t.entities.droppableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.droppableMap)if(i.disabled&&C(s,e))return!0;return!1},F=e=>{const t=new IntersectionObserver(n=>{n.forEach(s=>{const i=s.target;e[s.isIntersecting?"add":"delete"](i)})});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},de=e=>{const t=new ResizeObserver(n=>{const s=n[0];if(!s)return;const{width:i,height:a}=s.contentRect;e.value={width:i,height:a}});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},ye=e=>{const t=r.ref(null),n=de(t),s=r.watch(e,a=>{n.disconnect(),a&&n.observe(a)},{immediate:!0});return{overlaySize:t,overlaySizeObserver:{disconnect:()=>{s(),n.disconnect()}}}};function N(e,t=0,n=0){return{start:{x:e.clientX,y:e.clientY},current:{x:e.clientX,y:e.clientY},offset:{x:t,y:n}}}function te(e,t){const n=t.getBoundingClientRect(),s=n.width>0?(e.clientX-n.left)/n.width:.5,i=n.height>0?(e.clientY-n.top)/n.height:.5;return{x:s,y:i}}function ne(e,t){return{...t,initialHTML:e.innerHTML,initialRect:e.getBoundingClientRect()}}function me(e,t,n){e.forEach(s=>{const i=t.get(s);n.set(s,ne(s,i))}),e.clear()}function be(e,t,n){n.clear();const s=t.get(e);n.set(e,ne(e,s))}function O(e){e.entities.initiatingDraggable&&(e.state.value="dragging",he(e.entities.initiatingDraggable,e.entities.selectedSet,e.entities.draggableMap,e.entities.draggingMap))}function he(e,t,n,s){t.has(e)?me(t,n,s):(t.clear(),be(e,n,s))}function se(e,t,n,s){if(s||!n)return!0;const i=e.closest(n);return i?t.contains(i):!1}function De(e,t){if(!e||!t)return 1;const n=Math.abs(e.current.x-e.start.x),s=Math.abs(e.current.y-e.start.y);if(typeof t=="number"){const u=Math.sqrt(n*n+s*s);return Math.min(u/t,1)}const{x:i=0,y:a=0,condition:o="any"}=t;if(i===0&&a===0)return 1;const l=i>0?Math.min(n/i,1):1,c=a>0?Math.min(s/a,1):1;return o==="both"?Math.min(l,c):Math.max(l,c)}function ie(e,t,n){if(!n)return!0;const s=n.distance!=null,i=n.delay!=null;return!s&&!i?!0:s&&!i?e>=1:!s&&i?t>=1:(n.condition??"both")==="both"?e>=1&&t>=1:e>=1||t>=1}function pe(e){if(e.state.value!=="activating"||!e.entities.initiatingDraggable)return!1;const t=e.entities.draggableMap.get(e.entities.initiatingDraggable);return ie(e.distanceProgress.value,e.delay.progress,t?.activation)?(O(e),!0):!1}function ve(e,t){let n=null;const s=()=>{if(e.state.value!=="activating"||!e.entities.initiatingDraggable){n=null;return}const i=e.entities.draggableMap.get(e.entities.initiatingDraggable),a=i?.activation?.delay;if(!a){n=null;return}e.delay.progress=Math.min((Date.now()-e.delay.startTime)/(a*1e3),1),ie(e.distanceProgress.value,e.delay.progress,i?.activation)?(t(),n=null):n=requestAnimationFrame(s)};return n=requestAnimationFrame(s),{cancel:()=>{n!==null&&(cancelAnimationFrame(n),n=null)}}}function Ee(e,t){const n=e.closest(k.CONSTRAINT_AREA);return!n||!t.has(n)?null:{element:n,entity:t.get(n)}}function Me(e,t,n,s){return n==="x"?{x:e,y:s.top}:n==="y"?{x:s.left,y:t}:{x:e,y:t}}function Se(e,t,n,s,i){let a=e,o=t;return n!=="y"&&(a=Math.max(s.left,Math.min(s.right-i.width,e))),n!=="x"&&(o=Math.max(s.top,Math.min(s.bottom-i.height,t))),{x:a,y:o}}function Ae(e,t,n,s,i){if(!e||!t)return{x:0,y:0};const a=t.getBoundingClientRect(),o=a.width||i?.width||0,l=a.height||i?.height||0;let c=e.current.x-o*e.offset.x,u=e.current.y-l*e.offset.y;if(!n)return{x:c,y:u};const d=Ee(n,s);if(!d)return{x:c,y:u};const{element:f,entity:y}=d,g=f.getBoundingClientRect(),m=n.getBoundingClientRect(),b=Me(c,u,y.axis||"both",m);return y.restrictToArea?Se(b.x,b.y,y.axis||"both",g,a):b}const x={forDrag:["Enter","Space"],forCancel:["Escape"],forDrop:["Enter","Space"],forMove:["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","KeyW","KeyA","KeyS","KeyD"],forMoveFaster:["ShiftLeft","ShiftRight"]};function we(e){const t=r.shallowRef(),n=r.ref(),i={keys:{pressedKeys:r.ref(new Set),forDrag:[...x.forDrag],forCancel:[...x.forCancel],forDrop:[...x.forDrop],forMove:[...x.forMove],forMoveFaster:[...x.forMoveFaster]},step:8,moveFaster:4},a=r.reactive({draggableMap:new Map,droppableMap:new Map,selectableAreaMap:new Map,constraintsAreaMap:new Map,initiatingDraggable:void 0,selectingArea:void 0,draggingMap:new Map,selectedSet:new Set,modifiersSelectableAreaSet:r.computed(()=>$(a.selectableAreaMap,a.visibleSelectableAreaSet,i.keys.pressedKeys)),modifiersDraggableSet:r.computed(()=>$(a.draggableMap,a.visibleDraggableSet,i.keys.pressedKeys,R=>E(R,{entities:a}))),visibleDraggableSet:new Set,visibleDroppableSet:new Set,visibleSelectableAreaSet:new Set}),o=r.reactive({x:window.scrollX,y:window.scrollY}),l=r.reactive({progress:0,startTime:0}),c=r.computed(()=>{if(!n.value||!a.initiatingDraggable)return 0;const R=a.draggableMap.get(a.initiatingDraggable)?.activation?.distance;return R?De(n.value,R):1}),u=F(a.visibleDraggableSet),d=F(a.visibleDroppableSet),f=F(a.visibleSelectableAreaSet),{overlaySize:y,overlaySizeObserver:g}=ye(e),m=r.ref(),b=r.reactive({draggable:new Map,droppable:new Map}),p={throttle:r.shallowRef(0)},L=r.computed(()=>{o.y,o.x;const B=a.initiatingDraggable;return Ae(n.value,e.value,B||null,a.constraintsAreaMap,y.value)});return{state:t,pointer:n,entities:a,keyboard:i,scrollPosition:o,delay:l,distanceProgress:c,hovered:b,collision:p,overlay:{size:y,style:L,render:m,ref:e},lib:{draggableObserver:u,droppableObserver:d,selectableAreaObserver:f,overlaySizeObserver:g}}}const T=e=>{e.pointer.value=void 0,e.state.value=void 0,e.entities.selectingArea=void 0,e.entities.initiatingDraggable=void 0,e.delay.progress=0,e.delay.startTime=0,e.entities.draggingMap.clear(),e.hovered.draggable.clear(),e.hovered.droppable.clear()},ae=e=>{const t=e.entities.initiatingDraggable;if(!t)return;const s=e.entities.draggableMap.get(t)?.payload;if(!s)return;const i=s();if(!Array.isArray(i)||i.length<2)return;const[a,o,l]=i;return{index:Number(a),items:Array.isArray(o)?o:[],dropData:l}},S=e=>e.keys().next().value,xe=e=>e.target.closest(k.DRAGGABLE),M=e=>({payload:ae(e),provider:e}),I=(e,t,n)=>{const s=xe(t);if(!s||!e.entities.draggingMap.has(s))return;const i=M(e);e.entities.draggingMap.get(s)?.events?.[n]?.(i)},A=(e,t,n)=>{if(!t||E(t,e))return;const s=M(e);e.entities.draggableMap.get(t)?.events?.[n]?.(s)},D=(e,t)=>{const n=M(e);e.entities.draggableMap.forEach((s,i)=>{E(i,e)||s.events?.[t]?.(n)})},ke=(e,t,n)=>{if(t!==n){const s=M(e);t&&!w(t,e)&&e.entities.droppableMap.get(t)?.events?.onLeave?.(s),n&&!w(n,e)&&e.entities.droppableMap.get(n)?.events?.onEnter?.(s)}},Ce=(e,t,n)=>{if(t!==n){const s=M(e);t&&!E(t,e)&&e.entities.draggableMap.get(t)?.events?.onLeave?.(s),n&&!E(n,e)&&e.entities.draggableMap.get(n)?.events?.onHover?.(s)}},Le=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=M(e);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},oe=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=M(e);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},Be=(e,t)=>!e.length||!t.length?!0:e.some(n=>t.includes(n)),Re=(e,t,n)=>{if(!n)return{};const s=n.getBoundingClientRect(),i=Math.max(s.left,Math.min(e.x,t.x)),a=Math.max(s.top,Math.min(e.y,t.y)),o=Math.min(s.right,Math.max(e.x,t.x)),l=Math.min(s.bottom,Math.max(e.y,t.y)),c=Math.max(0,o-i),u=Math.max(0,l-a);return{left:`${i}px`,top:`${a}px`,width:`${c}px`,height:`${u}px`,position:"fixed",pointerEvents:"none",border:"1px solid #3b82f6",backgroundColor:"#3b82f61a"}},Pe=e=>{if(!e.pointer.value||!e.entities.selectingArea)return;const{selectingArea:t}=e.entities,n=Oe(e.pointer.value.start,e.pointer.value.current),s=e.entities.selectableAreaMap.get(t)?.groups??[];e.entities.visibleDraggableSet.forEach(i=>{if(!t.contains(i))return;if(E(i,e)){e.entities.selectedSet.delete(i);return}const o=e.entities.draggableMap.get(i)?.groups??[];if(!Be(s,o)){e.entities.selectedSet.delete(i);return}fe(n,i.getBoundingClientRect())?e.entities.selectedSet.add(i):e.entities.selectedSet.delete(i)})},Oe=(e,t)=>{const n=Math.min(e.x,t.x),s=Math.min(e.y,t.y),i=Math.max(e.x,t.x),a=Math.max(e.y,t.y),o=i-n,l=a-s;return new DOMRect(n,s,o,l)},Te=(e,t,n=5)=>{const s=n/2;return{left:e-s,top:t-s,width:n,height:n}},ze=e=>{const t=e.pointer.value?.current,n=t?.x??0,s=t?.y??0;return Te(n,s,5)},P=(e,t,n)=>{const s=e.left+e.width/2,i=e.top+e.height/2;if(n){const d=n.top??0,f=n.right??0,y=n.bottom??0,g=n.left??0,m=t.left+g,b=t.right-f,p=t.top+d,L=t.bottom-y;if(m<b&&p<L&&s>=m&&s<=b&&i>=p&&i<=L)return{top:!1,right:!1,bottom:!1,left:!1,center:!0}}const a=i-t.top,o=t.bottom-i,l=s-t.left,c=t.right-s,u=Math.min(a,o,l,c);return{top:a===u,bottom:o===u,left:l===u,right:c===u}},_e=(e,t)=>e.find(n=>n!==t&&C(t,n)),U=(e,t,n)=>{const s=S(t.droppable),i=S(t.draggable);t.draggable.clear(),t.droppable.clear();const a=ze(e),o=n.zones[0],l=n.elements[0];if(o&&l&&o===l&&e.entities.droppableMap.has(o)&&o){const f=o.getBoundingClientRect(),y=e.entities.draggableMap.get(o)?.placementMargins,g=P(a,f,y);if(g.center){t.droppable.set(o,g);const m=_e(n.elements,o);if(m){const b=m.getBoundingClientRect();t.draggable.set(m,P(a,b,void 0))}}else t.draggable.set(l,g),t.droppable.set(o,g)}else{if(o){const f=o.getBoundingClientRect();t.droppable.set(o,P(a,f))}if(l){const f=l.getBoundingClientRect(),y=e.entities.draggableMap.get(l)?.placementMargins;t.draggable.set(l,P(a,f,y))}}const u=S(t.droppable),d=S(t.draggable);ke(e,s,u),Ce(e,i,d)},Fe=(e,t)=>e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y,X=e=>{if(!e)return{x:0,y:0,width:0,height:0,top:0,left:0,right:0,bottom:0};const t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height,top:t.top,left:t.left,right:t.right,bottom:t.bottom}},q=e=>({x:e.x+e.width/2,y:e.y+e.height/2}),Ie=(e,t)=>Math.hypot(t.x-e.x,t.y-e.y),Ke=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),s=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y)),i=n*s,a=e.width*e.height,o=t.width*t.height;return a===0||o===0?0:(i/a*100+i/o*100)/2},Ge=(e,t,n)=>t>=e.x&&t<=e.x+e.width&&n>=e.y&&n<=e.y+e.height,V=()=>!0,j=()=>0,He=()=>{const e={filterElements:V,filterZones:V,sortElements:j,sortZones:j},t=(s,i,a,o,l,c,u)=>{const d=new Set(o),f={containerBox:i,pointer:a},y=[...o].filter(g=>l(g,s)).map(g=>{const m=X(g);if(!u(m,f))return null;let b=0;for(const p of d)p!==g&&C(p,g)&&b++;return{node:g,box:m,meta:{isPointerInElement:Ge(m,a.x,a.y),overlapPercent:Ke(m,i),depth:b,centerDistance:Ie(q(i),q(m))}}}).filter(g=>g!==null);return y.sort((g,m)=>c(g,m,f)),y.map(g=>g.node)},n={container(s){return e.container=s,n},containerBox(s){return e.containerBox=s,n},elements(s){return e.elements=s,n},zones(s){return e.zones=s,n},filterElements(s){return e.filterElements=s,n},filterZones(s){return e.filterZones=s,n},collision(s){return e.collision=s,n},sortElements(s){return e.sortElements=s,n},sortZones(s){return e.sortZones=s,n},build(){const s=e;if(!s.container||!s.elements||!s.zones||!s.collision)throw new Error("sensor: container, elements, zones, collision are required");return i=>{const a=s.container(i);if(!a)return{elements:[],zones:[]};const o=s.containerBox?s.containerBox(i):X(a),l=i.pointer.value?.current??{x:0,y:0};return{elements:t(i,o,l,s.elements(i),s.filterElements,s.sortElements,s.collision),zones:t(i,o,l,s.zones(i),s.filterZones,s.sortZones,s.collision)}}}};return n},Ne=()=>He(),Ue=e=>e.overlay.ref?.value??null,Ye=e=>{const t=e.overlay.style?.value??{x:0,y:0},n=e.overlay.size?.value??null,{x:s,y:i}=t,a=n?.width??0,o=n?.height??0;return{x:s,y:i,width:a,height:o,top:i,left:s,right:s+a,bottom:i+o}},Ze=e=>e.entities.visibleDraggableSet,$e=e=>e.entities.visibleDroppableSet,Xe=(e,t)=>!t.entities.draggingMap.has(e),qe=(e,t)=>![...t.entities.draggingMap.keys()].some(n=>C(n,e)),Ve=(e,t)=>t.entities.draggableMap.has(e)?!E(e,t):t.entities.droppableMap.has(e)?!w(e,t):!0,W=(e,t)=>Xe(e,t)&&qe(e,t)&&Ve(e,t),je=(e,t)=>Fe(e,t.containerBox),J=(e,t,n)=>{if(n.pointer.x>=n.containerBox.x&&n.pointer.x<=n.containerBox.x+n.containerBox.width&&n.pointer.y>=n.containerBox.y&&n.pointer.y<=n.containerBox.y+n.containerBox.height){if(e.meta.isPointerInElement&&t.meta.isPointerInElement)return t.meta.depth-e.meta.depth;if(e.meta.isPointerInElement!==t.meta.isPointerInElement)return e.meta.isPointerInElement?-1:1}return Math.abs(e.meta.overlapPercent-t.meta.overlapPercent)<=1?e.meta.centerDistance-t.meta.centerDistance:t.meta.overlapPercent-e.meta.overlapPercent},Y=Ne().container(Ue).containerBox(Ye).elements(Ze).zones($e).filterElements(W).filterZones(W).collision(je).sortElements(J).sortZones(J).build();function Q(e){const n=(e.collision?.run??Y)(e);U(e,e.hovered,n)}function We(e,t){const n=e.collision?.throttle?.value??0;if(n<=0){Q(e);return}const s=Date.now();s-t.value>=n&&(t.value=s,Q(e))}async function re(e){const t=e.hovered.droppable.keys().next().value;if(!t||w(t,e))return!0;const n=e.entities.droppableMap.get(t),s={payload:ae(e),provider:e},i=n?.events?.onDrop?.(s);if(i!=null&&typeof i.then=="function")try{return await i,!0}catch{const o=e.entities.initiatingDraggable;return A(e,o,"onSelfDragCancel"),D(e,"onDragCancel"),oe(e,e.hovered),!1}return!0}function le(e){const t=e.entities.initiatingDraggable;A(e,t,"onSelfDragEnd"),D(e,"onDragEnd"),Le(e,e.hovered)}function Je(e){const t=e.entities.selectingArea;if(!t)return;const n=e.entities.selectableAreaMap.get(t),s=[...e.entities.selectedSet];n?.events?.onSelected?.(s)}const Qe=e=>{const t={current:null},n={value:0},s=async()=>{H(),t.current?.cancel(),t.current=null;const l=e.state.value;if(l==="dragging"){if(!await re(e)){T(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i);return}le(e)}else l==="selecting"&&Je(e);T(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i)},i=l=>{if(e.pointer.value){if(e.pointer.value.current={x:l.clientX,y:l.clientY},pe(e)){I(e,l,"onSelfDragStart"),D(e,"onDragStart");return}if(e.state.value==="dragging"){We(e,n);const c=e.entities.initiatingDraggable;A(e,c,"onSelfDragMove"),D(e,"onDragMove")}e.state.value==="selecting"&&Pe(e)}};return{pointerDown:l=>{document.addEventListener("pointerup",s),document.addEventListener("pointermove",i);const c=l.target,u=c.closest(k.SELECT_AREA),d=c.closest(k.DRAGGABLE);if(e.entities.modifiersSelectableAreaSet.size>0&&e.entities.modifiersSelectableAreaSet.has(u)){G(),e.pointer.value=N(l),e.state.value="selecting",e.entities.selectingArea=u;return}if(e.entities.modifiersDraggableSet.size>0&&e.entities.modifiersDraggableSet.has(d)){const f=e.entities.draggableMap.get(d);if(!se(c,d,f?.dragHandle))return;G(),e.entities.initiatingDraggable=d;const y=te(l,d);e.pointer.value=N(l,y.x,y.y),f?.activation?.distance||f?.activation?.delay?(e.state.value="activating",f?.activation?.delay&&(e.delay.startTime=Date.now(),t.current=ve(e,()=>{O(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart")}))):(O(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart"))}},pointerUp:s,pointerMove:i,cleanup:()=>{t.current?.cancel(),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i),e.lib.draggableObserver.disconnect(),e.lib.droppableObserver.disconnect(),e.lib.selectableAreaObserver.disconnect(),e.lib.overlaySizeObserver.disconnect()}}},et={ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1},ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},KeyW:{dx:0,dy:-1},KeyA:{dx:-1,dy:0},KeyS:{dx:0,dy:1},KeyD:{dx:1,dy:0}},tt=e=>t=>{const{keys:n}=e.keyboard;if(n.pressedKeys.value.add(t.code),e.state.value==="dragging"){if(n.forCancel.includes(t.code)){t.preventDefault(),H(),A(e,e.entities.initiatingDraggable,"onSelfDragCancel"),D(e,"onDragCancel"),oe(e,e.hovered),T(e);return}if(n.forDrop.includes(t.code)){t.preventDefault(),(async()=>(await re(e)&&le(e),H(),T(e)))();return}const i=et[t.code];if(i&&n.forMove.includes(t.code)&&e.pointer.value){t.preventDefault();const a=n.forMoveFaster.some(u=>n.pressedKeys.value.has(u)),o=e.keyboard.step*(a?e.keyboard.moveFaster:1);e.pointer.value.current={x:e.pointer.value.current.x+i.dx*o,y:e.pointer.value.current.y+i.dy*o};const c=(e.collision?.run??Y)(e);U(e,e.hovered,c),A(e,e.entities.initiatingDraggable,"onSelfDragMove"),D(e,"onDragMove");return}return}if(n.forDrag.includes(t.code)){const i=document.activeElement;if(!i)return;const a=i.closest(k.DRAGGABLE);if(!a||e.entities.modifiersDraggableSet.size===0||!e.entities.modifiersDraggableSet.has(a))return;const o=e.entities.draggableMap.get(a);if(!se(i,a,o?.dragHandle,!0))return;t.preventDefault(),G();const l=a.getBoundingClientRect(),c=l.left+l.width/2,u=l.top+l.height/2,d={clientX:c,clientY:u};e.entities.initiatingDraggable=a;const f=te(d,a);e.pointer.value=N(d,f.x,f.y),O(e);const g=(e.collision?.run??Y)(e);U(e,e.hovered,g),A(e,a,"onSelfDragStart"),D(e,"onDragStart")}},nt=e=>t=>{e.keyboard.keys.pressedKeys.value.delete(t.code)},st=e=>()=>{e.keyboard.keys.pressedKeys.value.clear()},K={keyDown:tt,keyUp:nt,clear:st},it=e=>()=>{e.state.value&&(e.scrollPosition.x=window.scrollX,e.scrollPosition.y=window.scrollY)},at=e=>{const t=Qe(e),n=K.keyDown(e),s=K.keyUp(e),i=K.clear(e),a=it(e);r.onMounted(()=>{document.addEventListener("pointerdown",t.pointerDown),document.addEventListener("keydown",n),document.addEventListener("keyup",s),document.addEventListener("blur",i),document.addEventListener("scroll",a,!0)}),r.onBeforeUnmount(()=>{document.removeEventListener("pointerdown",t.pointerDown),document.removeEventListener("pointerup",t.pointerUp),document.removeEventListener("pointermove",t.pointerMove),document.removeEventListener("keydown",n),document.removeEventListener("keyup",s),document.removeEventListener("blur",i),document.removeEventListener("scroll",a,!0),t.cleanup()})},_=()=>{const e=r.inject(Z);if(!e)throw Error("DnD provider not found");return e},ce=()=>{const e=_();return{overlay:e.overlay,delay:e.delay,distanceProgress:e.distanceProgress,entities:e.entities,pointer:e.pointer,state:e.state,scrollPosition:e.scrollPosition,keyboard:e.keyboard,hovered:e.hovered,collision:e.collision}},ot=r.defineComponent({__name:"DefaultOverlay",setup(e){const{entities:t,state:n,overlay:s}=ce();return(i,a)=>r.unref(n)==="dragging"?(r.openBlock(),r.createElementBlock("div",{key:0,class:"dnd-kit-default-overlay",style:r.normalizeStyle({"--position-x":r.unref(s).style.value.x+"px","--position-y":r.unref(s).style.value.y+"px"})},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(r.unref(t).draggingMap,([o,l])=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.unref(t).draggableMap.get(o)?.render?(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(t).draggableMap.get(o)?.render),{key:0,class:"test"})):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(o.tagName),{key:1,innerHTML:l.initialHTML,class:"test",style:r.normalizeStyle({width:l.initialRect.width+"px",height:l.initialRect.height+"px"})},null,8,["innerHTML","style"]))],64))),256))],4)):r.createCommentVNode("",!0)}}),rt=r.defineComponent({__name:"DnDProvider",setup(e){const t=r.useTemplateRef("overlayRef"),n=we(t);at(n);const s=r.computed(()=>n.overlay.render.value??ot);return r.provide(Z,n),(i,a)=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.renderSlot(i.$slots,"default"),r.createElementVNode("div",{ref_key:"overlayRef",ref:t,class:"dnd-kit-overlay-container"},[r.renderSlot(i.$slots,"overlay",{overlay:s.value},()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(s.value)))])],512)],64))}});function lt(e,t,n){const s=_();let i,a,o;return typeof t=="function"?(i={},a=t):(i=t??{},a=n),r.onMounted(()=>{o=z(e),o&&(o.addEventListener("dragstart",h),o.addEventListener("drag",h),o.addEventListener("dragend",h),o.setAttribute(v.DRAGGABLE,""),s.lib.draggableObserver.observe(o),s.entities.draggableMap.set(o,{render:i.render,disabled:i.disabled??!1,groups:i.groups??[],modifier:i.modifier,events:i.events,payload:a,dragHandle:i.dragHandle,activation:i.activation,placementMargins:i.placementMargins}))}),r.onBeforeUnmount(()=>{o&&(s.lib.draggableObserver.unobserve(o),s.entities.visibleDraggableSet.delete(o),s.entities.draggableMap.delete(o),s.entities.modifiersDraggableSet.delete(o))}),{}}const ct=(e,t)=>{const n=_(),s=r.computed(()=>e.value===n.entities.selectingArea);let i=null;r.onMounted(()=>{i=z(e),i&&(i.setAttribute(v.SELECT_AREA,""),n.lib.selectableAreaObserver.observe(i),n.entities.selectableAreaMap.set(i,{modifier:t?.modifier??{keys:["ControlLeft"],method:"every"},events:t?.events,disabled:t?.disabled??!1,groups:t?.groups??[]}))}),r.onBeforeUnmount(()=>{i&&(n.lib.selectableAreaObserver.unobserve(i),n.entities.visibleSelectableAreaSet.delete(i),n.entities.modifiersSelectableAreaSet.delete(i),n.entities.selectableAreaMap.delete(i))});const a=r.computed(()=>{n.scrollPosition.x,n.scrollPosition.y;const o=n.pointer.value;return!o||n.state.value!=="selecting"||!i?{}:Re(o.start,o.current,i)});return{isSelecting:s,style:a}};function ut(e,t){const n=r.inject(Z);if(!n)throw Error("DnD provider not found");let s=null;return r.onMounted(()=>{s=z(e),s&&(s.setAttribute(v.CONSTRAINT_AREA,""),n.entities.constraintsAreaMap.set(s,{axis:t?.axis||"both",restrictToArea:t?.restrictToArea||!1}))}),r.onBeforeUnmount(()=>{s&&n.entities.constraintsAreaMap.delete(s)}),{}}function gt(e,t={}){const n=_();let s=null;r.onMounted(()=>{s=z(e),s&&(s.setAttribute(v.DROPPABLE,""),n.lib.droppableObserver.observe(s),n.entities.droppableMap.set(s,{disabled:t.disabled??!1,groups:t.groups??[],events:t.events}))}),r.onBeforeUnmount(()=>{s&&(n.lib.droppableObserver.unobserve(s),n.entities.visibleDroppableSet.delete(s),n.entities.droppableMap.delete(s))})}exports.DnDProvider=rt;exports.makeBoundingBox=ut;exports.makeDraggable=lt;exports.makeDroppable=gt;exports.makeSelectableArea=ct;exports.useDnDProvider=ce;
|
|
3
|
-
//# sourceMappingURL=vue-dnd-kit-core.cjs.js.map
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dnd-kit-default-overlay{transform:translate3d(var(--position-x),var(--position-y),0)}.dnd-kit-overlay-container{position:fixed;top:0;left:0;pointer-events:none;cursor:grabbing}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),E={SELECT_AREA:"data-dnd-kit-select-area",DRAGGABLE:"data-dnd-kit-draggable",DROPPABLE:"data-dnd-kit-droppable",CONSTRAINT_AREA:"data-dnd-kit-constraint-area"},k={SELECT_AREA:`[${E.SELECT_AREA}]`,DRAGGABLE:`[${E.DRAGGABLE}]`,CONSTRAINT_AREA:`[${E.CONSTRAINT_AREA}]`},$="VueDnDKitProvider",X=(e,t,n,s)=>{const i=new Set;return t.forEach(a=>{const o=e.get(a),l=s?s(a):o?.disabled;if(!o||l)return;const c=o.modifier?.keys,u=o.modifier?.method;if(!c||!u||c.length===0){i.add(a);return}c[u](f=>n.value.has(f))&&i.add(a)}),i};let ee="",ce="",ue="";const z=e=>e.value?e.value instanceof HTMLElement?e.value:e.value.$el:null,C=(e,t)=>e!==t&&e.contains(t),ge=(e,t)=>!(e.right<t.left||e.left>t.right||e.bottom<t.top||e.top>t.bottom),H=()=>{const e=document.body;ee=e.style.userSelect,e.style.userSelect="none",window.addEventListener("contextmenu",h),window.addEventListener("selectstart",h),window.addEventListener("touchstart",h),window.addEventListener("touchmove",h)},G=()=>{const e=document.body;e.style.userSelect=ee,e.style.touchAction=ce,e.style.overscrollBehavior=ue,window.removeEventListener("contextmenu",h),window.removeEventListener("selectstart",h),window.removeEventListener("touchstart",h),window.removeEventListener("touchmove",h)},h=e=>e.preventDefault(),M=(e,t)=>{if(t.entities.draggableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.draggableMap)if(i.disabled&&C(s,e))return!0;return!1},w=(e,t)=>{if(t.entities.droppableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.droppableMap)if(i.disabled&&C(s,e))return!0;return!1},F=e=>{const t=new IntersectionObserver(n=>{n.forEach(s=>{const i=s.target;e[s.isIntersecting?"add":"delete"](i)})});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},fe=e=>{const t=new ResizeObserver(n=>{const s=n[0];if(!s)return;const{width:i,height:a}=s.contentRect;e.value={width:i,height:a}});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},de=e=>{const t=r.ref(null),n=fe(t),s=r.watch(e,a=>{n.disconnect(),a&&n.observe(a)},{immediate:!0});return{overlaySize:t,overlaySizeObserver:{disconnect:()=>{s(),n.disconnect()}}}};function N(e,t=0,n=0){return{start:{x:e.clientX,y:e.clientY},current:{x:e.clientX,y:e.clientY},offset:{x:t,y:n}}}function te(e,t){const n=t.getBoundingClientRect(),s=n.width>0?(e.clientX-n.left)/n.width:.5,i=n.height>0?(e.clientY-n.top)/n.height:.5;return{x:s,y:i}}function ne(e,t){return{...t,initialHTML:e.innerHTML,initialRect:e.getBoundingClientRect(),initialOuterHTML:e.outerHTML}}function ye(e,t,n){e.forEach(s=>{const i=t.get(s);n.set(s,ne(s,i))}),e.clear()}function me(e,t,n){n.clear();const s=t.get(e);n.set(e,ne(e,s))}function O(e){e.entities.initiatingDraggable&&(e.state.value="dragging",be(e.entities.initiatingDraggable,e.entities.selectedSet,e.entities.draggableMap,e.entities.draggingMap))}function be(e,t,n,s){t.has(e)?ye(t,n,s):(t.clear(),me(e,n,s))}function se(e,t,n,s){if(s||!n)return!0;const i=e.closest(n);return i?t.contains(i):!1}function he(e,t){if(!e||!t)return 1;const n=Math.abs(e.current.x-e.start.x),s=Math.abs(e.current.y-e.start.y);if(typeof t=="number"){const u=Math.sqrt(n*n+s*s);return Math.min(u/t,1)}const{x:i=0,y:a=0,condition:o="any"}=t;if(i===0&&a===0)return 1;const l=i>0?Math.min(n/i,1):1,c=a>0?Math.min(s/a,1):1;return o==="both"?Math.min(l,c):Math.max(l,c)}function ie(e,t,n){if(!n)return!0;const s=n.distance!=null,i=n.delay!=null;return!s&&!i?!0:s&&!i?e>=1:!s&&i?t>=1:(n.condition??"both")==="both"?e>=1&&t>=1:e>=1||t>=1}function De(e){if(e.state.value!=="activating"||!e.entities.initiatingDraggable)return!1;const t=e.entities.draggableMap.get(e.entities.initiatingDraggable);return ie(e.distanceProgress.value,e.delay.progress,t?.activation)?(O(e),!0):!1}function pe(e,t){let n=null;const s=()=>{if(e.state.value!=="activating"||!e.entities.initiatingDraggable){n=null;return}const i=e.entities.draggableMap.get(e.entities.initiatingDraggable),a=i?.activation?.delay;if(!a){n=null;return}e.delay.progress=Math.min((Date.now()-e.delay.startTime)/(a*1e3),1),ie(e.distanceProgress.value,e.delay.progress,i?.activation)?(t(),n=null):n=requestAnimationFrame(s)};return n=requestAnimationFrame(s),{cancel:()=>{n!==null&&(cancelAnimationFrame(n),n=null)}}}function ve(e,t){const n=e.closest(k.CONSTRAINT_AREA);return!n||!t.has(n)?null:{element:n,entity:t.get(n)}}function Ee(e,t,n,s){return n==="x"?{x:e,y:s.top}:n==="y"?{x:s.left,y:t}:{x:e,y:t}}function Me(e,t,n,s,i){let a=e,o=t;return n!=="y"&&(a=Math.max(s.left,Math.min(s.right-i.width,e))),n!=="x"&&(o=Math.max(s.top,Math.min(s.bottom-i.height,t))),{x:a,y:o}}function Se(e,t,n,s,i){if(!e||!t)return{x:0,y:0};const a=t.getBoundingClientRect(),o=a.width||i?.width||0,l=a.height||i?.height||0;let c=e.current.x-o*e.offset.x,u=e.current.y-l*e.offset.y;if(!n)return{x:c,y:u};const d=ve(n,s);if(!d)return{x:c,y:u};const{element:f,entity:y}=d,g=f.getBoundingClientRect(),m=n.getBoundingClientRect(),b=Ee(c,u,y.axis||"both",m);return y.restrictToArea?Me(b.x,b.y,y.axis||"both",g,a):b}const x={forDrag:["Enter","Space"],forCancel:["Escape"],forDrop:["Enter","Space"],forMove:["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","KeyW","KeyA","KeyS","KeyD"],forMoveFaster:["ShiftLeft","ShiftRight"]};function Ae(e){const t=r.shallowRef(),n=r.ref(),i={keys:{pressedKeys:r.ref(new Set),forDrag:[...x.forDrag],forCancel:[...x.forCancel],forDrop:[...x.forDrop],forMove:[...x.forMove],forMoveFaster:[...x.forMoveFaster]},step:8,moveFaster:4},a=r.reactive({draggableMap:new Map,droppableMap:new Map,selectableAreaMap:new Map,constraintsAreaMap:new Map,initiatingDraggable:void 0,selectingArea:void 0,draggingMap:new Map,selectedSet:new Set,modifiersSelectableAreaSet:r.computed(()=>X(a.selectableAreaMap,a.visibleSelectableAreaSet,i.keys.pressedKeys)),modifiersDraggableSet:r.computed(()=>X(a.draggableMap,a.visibleDraggableSet,i.keys.pressedKeys,P=>M(P,{entities:a}))),visibleDraggableSet:new Set,visibleDroppableSet:new Set,visibleSelectableAreaSet:new Set}),o=r.reactive({x:window.scrollX,y:window.scrollY}),l=r.reactive({progress:0,startTime:0}),c=r.computed(()=>{if(!n.value||!a.initiatingDraggable)return 0;const P=a.draggableMap.get(a.initiatingDraggable)?.activation?.distance;return P?he(n.value,P):1}),u=F(a.visibleDraggableSet),d=F(a.visibleDroppableSet),f=F(a.visibleSelectableAreaSet),{overlaySize:y,overlaySizeObserver:g}=de(e),m=r.ref(),b=r.reactive({draggable:new Map,droppable:new Map}),v={throttle:r.shallowRef(0)},L=r.computed(()=>{o.y,o.x;const B=a.initiatingDraggable;return Se(n.value,e.value,B||null,a.constraintsAreaMap,y.value)});return{state:t,pointer:n,entities:a,keyboard:i,scrollPosition:o,delay:l,distanceProgress:c,hovered:b,collision:v,overlay:{size:y,style:L,render:m,ref:e},lib:{draggableObserver:u,droppableObserver:d,selectableAreaObserver:f,overlaySizeObserver:g}}}const T=e=>{e.pointer.value=void 0,e.state.value=void 0,e.entities.selectingArea=void 0,e.entities.initiatingDraggable=void 0,e.delay.progress=0,e.delay.startTime=0,e.entities.draggingMap.clear(),e.hovered.draggable.clear(),e.hovered.droppable.clear()},we=e=>{const t=e.entities.initiatingDraggable;if(!t)return;const s=e.entities.draggableMap.get(t)?.payload;if(!s)return;const i=s();if(!Array.isArray(i)||i.length<2)return;const[a,o,l]=i;return{index:Number(a),items:Array.isArray(o)?o:[],dropData:l}},xe=(e,t)=>{const s=e.entities.droppableMap.get(t)?.payload;if(!s)return;const i=s();if(!Array.isArray(i)||i.length<1)return;const[a,o]=i;return{items:Array.isArray(a)?a:[],userData:o}},S=e=>e.keys().next().value,ke=e=>e.target.closest(k.DRAGGABLE),p=(e,t)=>{const n={payload:we(e),provider:e};return t&&(n.dropZonePayload=xe(e,t)),n},I=(e,t,n)=>{const s=ke(t);if(!s||!e.entities.draggingMap.has(s))return;const i=p(e);e.entities.draggingMap.get(s)?.events?.[n]?.(i)},A=(e,t,n)=>{if(!t||M(t,e))return;const s=p(e);e.entities.draggableMap.get(t)?.events?.[n]?.(s)},D=(e,t)=>{const n=p(e);e.entities.draggableMap.forEach((s,i)=>{M(i,e)||s.events?.[t]?.(n)})},Ce=(e,t,n)=>{if(t!==n){if(t&&!w(t,e)){const s=p(e,t);e.entities.droppableMap.get(t)?.events?.onLeave?.(s)}if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onEnter?.(s)}}},Le=(e,t,n)=>{if(t!==n){const s=p(e);t&&!M(t,e)&&e.entities.draggableMap.get(t)?.events?.onLeave?.(s),n&&!M(n,e)&&e.entities.draggableMap.get(n)?.events?.onHover?.(s)}},Be=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},ae=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},Pe=(e,t)=>!e.length||!t.length?!0:e.some(n=>t.includes(n)),Re=(e,t,n)=>{if(!n)return{};const s=n.getBoundingClientRect(),i=Math.max(s.left,Math.min(e.x,t.x)),a=Math.max(s.top,Math.min(e.y,t.y)),o=Math.min(s.right,Math.max(e.x,t.x)),l=Math.min(s.bottom,Math.max(e.y,t.y)),c=Math.max(0,o-i),u=Math.max(0,l-a);return{left:`${i}px`,top:`${a}px`,width:`${c}px`,height:`${u}px`,position:"fixed",pointerEvents:"none",border:"1px solid #3b82f6",backgroundColor:"#3b82f61a"}},Oe=e=>{if(!e.pointer.value||!e.entities.selectingArea)return;const{selectingArea:t}=e.entities,n=Te(e.pointer.value.start,e.pointer.value.current),s=e.entities.selectableAreaMap.get(t)?.groups??[];e.entities.visibleDraggableSet.forEach(i=>{if(!t.contains(i))return;if(M(i,e)){e.entities.selectedSet.delete(i);return}const o=e.entities.draggableMap.get(i)?.groups??[];if(!Pe(s,o)){e.entities.selectedSet.delete(i);return}ge(n,i.getBoundingClientRect())?e.entities.selectedSet.add(i):e.entities.selectedSet.delete(i)})},Te=(e,t)=>{const n=Math.min(e.x,t.x),s=Math.min(e.y,t.y),i=Math.max(e.x,t.x),a=Math.max(e.y,t.y),o=i-n,l=a-s;return new DOMRect(n,s,o,l)},ze=(e,t,n=5)=>{const s=n/2;return{left:e-s,top:t-s,width:n,height:n}},_e=e=>{const t=e.pointer.value?.current,n=t?.x??0,s=t?.y??0;return ze(n,s,5)},R=(e,t,n)=>{const s=e.left+e.width/2,i=e.top+e.height/2;if(n){const d=n.top??0,f=n.right??0,y=n.bottom??0,g=n.left??0,m=t.left+g,b=t.right-f,v=t.top+d,L=t.bottom-y;if(m<b&&v<L&&s>=m&&s<=b&&i>=v&&i<=L)return{top:!1,right:!1,bottom:!1,left:!1,center:!0}}const a=i-t.top,o=t.bottom-i,l=s-t.left,c=t.right-s,u=Math.min(a,o,l,c);return{top:a===u,bottom:o===u,left:l===u,right:c===u}},Fe=(e,t)=>e.find(n=>n!==t&&C(t,n)),U=(e,t,n)=>{const s=S(t.droppable),i=S(t.draggable);t.draggable.clear(),t.droppable.clear();const a=_e(e),o=n.zones[0],l=n.elements[0];if(o&&l&&o===l&&e.entities.droppableMap.has(o)&&o){const f=o.getBoundingClientRect(),y=e.entities.draggableMap.get(o)?.placementMargins,g=R(a,f,y);if(g.center){t.droppable.set(o,g);const m=Fe(n.elements,o);if(m){const b=m.getBoundingClientRect();t.draggable.set(m,R(a,b,void 0))}}else t.draggable.set(l,g),t.droppable.set(o,g)}else{if(o){const f=o.getBoundingClientRect();t.droppable.set(o,R(a,f))}if(l){const f=l.getBoundingClientRect(),y=e.entities.draggableMap.get(l)?.placementMargins;t.draggable.set(l,R(a,f,y))}}const u=S(t.droppable),d=S(t.draggable);Ce(e,s,u),Le(e,i,d)},Ie=(e,t)=>e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y,Z=e=>{if(!e)return{x:0,y:0,width:0,height:0,top:0,left:0,right:0,bottom:0};const t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height,top:t.top,left:t.left,right:t.right,bottom:t.bottom}},q=e=>({x:e.x+e.width/2,y:e.y+e.height/2}),Ke=(e,t)=>Math.hypot(t.x-e.x,t.y-e.y),He=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),s=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y)),i=n*s,a=e.width*e.height,o=t.width*t.height;return a===0||o===0?0:(i/a*100+i/o*100)/2},Ge=(e,t,n)=>t>=e.x&&t<=e.x+e.width&&n>=e.y&&n<=e.y+e.height,V=()=>!0,j=()=>0,Ne=()=>{const e={filterElements:V,filterZones:V,sortElements:j,sortZones:j},t=(s,i,a,o,l,c,u)=>{const d=new Set(o),f={containerBox:i,pointer:a},y=[...o].filter(g=>l(g,s)).map(g=>{const m=Z(g);if(!u(m,f))return null;let b=0;for(const v of d)v!==g&&C(v,g)&&b++;return{node:g,box:m,meta:{isPointerInElement:Ge(m,a.x,a.y),overlapPercent:He(m,i),depth:b,centerDistance:Ke(q(i),q(m))}}}).filter(g=>g!==null);return y.sort((g,m)=>c(g,m,f)),y.map(g=>g.node)},n={container(s){return e.container=s,n},containerBox(s){return e.containerBox=s,n},elements(s){return e.elements=s,n},zones(s){return e.zones=s,n},filterElements(s){return e.filterElements=s,n},filterZones(s){return e.filterZones=s,n},collision(s){return e.collision=s,n},sortElements(s){return e.sortElements=s,n},sortZones(s){return e.sortZones=s,n},build(){const s=e;if(!s.container||!s.elements||!s.zones||!s.collision)throw new Error("sensor: container, elements, zones, collision are required");return i=>{const a=s.container(i);if(!a)return{elements:[],zones:[]};const o=s.containerBox?s.containerBox(i):Z(a),l=i.pointer.value?.current??{x:0,y:0};return{elements:t(i,o,l,s.elements(i),s.filterElements,s.sortElements,s.collision),zones:t(i,o,l,s.zones(i),s.filterZones,s.sortZones,s.collision)}}}};return n},Ue=()=>Ne(),Ye=e=>e.overlay.ref?.value??null,$e=e=>{const t=e.overlay.style?.value??{x:0,y:0},n=e.overlay.size?.value??null,{x:s,y:i}=t,a=n?.width??0,o=n?.height??0;return{x:s,y:i,width:a,height:o,top:i,left:s,right:s+a,bottom:i+o}},Xe=e=>e.entities.visibleDraggableSet,Ze=e=>e.entities.visibleDroppableSet,qe=(e,t)=>!t.entities.draggingMap.has(e),Ve=(e,t)=>![...t.entities.draggingMap.keys()].some(n=>C(n,e)),je=(e,t)=>t.entities.draggableMap.has(e)?!M(e,t):t.entities.droppableMap.has(e)?!w(e,t):!0,W=(e,t)=>qe(e,t)&&Ve(e,t)&&je(e,t),We=(e,t)=>Ie(e,t.containerBox),J=(e,t,n)=>{if(n.pointer.x>=n.containerBox.x&&n.pointer.x<=n.containerBox.x+n.containerBox.width&&n.pointer.y>=n.containerBox.y&&n.pointer.y<=n.containerBox.y+n.containerBox.height){if(e.meta.isPointerInElement&&t.meta.isPointerInElement)return t.meta.depth-e.meta.depth;if(e.meta.isPointerInElement!==t.meta.isPointerInElement)return e.meta.isPointerInElement?-1:1}return Math.abs(e.meta.overlapPercent-t.meta.overlapPercent)<=1?e.meta.centerDistance-t.meta.centerDistance:t.meta.overlapPercent-e.meta.overlapPercent},Y=Ue().container(Ye).containerBox($e).elements(Xe).zones(Ze).filterElements(W).filterZones(W).collision(We).sortElements(J).sortZones(J).build();function Q(e){const n=(e.collision?.run??Y)(e);U(e,e.hovered,n)}function Je(e,t){const n=e.collision?.throttle?.value??0;if(n<=0){Q(e);return}const s=Date.now();s-t.value>=n&&(t.value=s,Q(e))}async function oe(e){const t=e.hovered.droppable.keys().next().value;if(!t||w(t,e))return!0;const n=e.entities.droppableMap.get(t),s=p(e,t),i=n?.events?.onDrop?.(s);if(i!=null&&typeof i.then=="function")try{return await i,!0}catch{const o=e.entities.initiatingDraggable;return A(e,o,"onSelfDragCancel"),D(e,"onDragCancel"),ae(e,e.hovered),!1}return!0}function re(e){const t=e.entities.initiatingDraggable;A(e,t,"onSelfDragEnd"),D(e,"onDragEnd"),Be(e,e.hovered)}function Qe(e){const t=e.entities.selectingArea;if(!t)return;const n=e.entities.selectableAreaMap.get(t),s=[...e.entities.selectedSet];n?.events?.onSelected?.(s)}const et=e=>{const t={current:null},n={value:0},s=async()=>{G(),t.current?.cancel(),t.current=null;const l=e.state.value;if(l==="dragging"){if(!await oe(e)){T(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i);return}re(e)}else l==="selecting"&&Qe(e);T(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i)},i=l=>{if(e.pointer.value){if(e.pointer.value.current={x:l.clientX,y:l.clientY},De(e)){I(e,l,"onSelfDragStart"),D(e,"onDragStart");return}if(e.state.value==="dragging"){Je(e,n);const c=e.entities.initiatingDraggable;A(e,c,"onSelfDragMove"),D(e,"onDragMove")}e.state.value==="selecting"&&Oe(e)}};return{pointerDown:l=>{document.addEventListener("pointerup",s),document.addEventListener("pointermove",i);const c=l.target,u=c.closest(k.SELECT_AREA),d=c.closest(k.DRAGGABLE);if(e.entities.modifiersSelectableAreaSet.size>0&&e.entities.modifiersSelectableAreaSet.has(u)){H(),e.pointer.value=N(l),e.state.value="selecting",e.entities.selectingArea=u;return}if(e.entities.modifiersDraggableSet.size>0&&e.entities.modifiersDraggableSet.has(d)){const f=e.entities.draggableMap.get(d);if(!se(c,d,f?.dragHandle))return;H(),e.entities.initiatingDraggable=d;const y=te(l,d);e.pointer.value=N(l,y.x,y.y),f?.activation?.distance||f?.activation?.delay?(e.state.value="activating",f?.activation?.delay&&(e.delay.startTime=Date.now(),t.current=pe(e,()=>{O(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart")}))):(O(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart"))}},pointerUp:s,pointerMove:i,cleanup:()=>{t.current?.cancel(),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i),e.lib.draggableObserver.disconnect(),e.lib.droppableObserver.disconnect(),e.lib.selectableAreaObserver.disconnect(),e.lib.overlaySizeObserver.disconnect()}}},tt={ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1},ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},KeyW:{dx:0,dy:-1},KeyA:{dx:-1,dy:0},KeyS:{dx:0,dy:1},KeyD:{dx:1,dy:0}},nt=e=>t=>{const{keys:n}=e.keyboard;if(n.pressedKeys.value.add(t.code),e.state.value==="dragging"){if(n.forCancel.includes(t.code)){t.preventDefault(),G(),A(e,e.entities.initiatingDraggable,"onSelfDragCancel"),D(e,"onDragCancel"),ae(e,e.hovered),T(e);return}if(n.forDrop.includes(t.code)){t.preventDefault(),(async()=>(await oe(e)&&re(e),G(),T(e)))();return}const i=tt[t.code];if(i&&n.forMove.includes(t.code)&&e.pointer.value){t.preventDefault();const a=n.forMoveFaster.some(u=>n.pressedKeys.value.has(u)),o=e.keyboard.step*(a?e.keyboard.moveFaster:1);e.pointer.value.current={x:e.pointer.value.current.x+i.dx*o,y:e.pointer.value.current.y+i.dy*o};const c=(e.collision?.run??Y)(e);U(e,e.hovered,c),A(e,e.entities.initiatingDraggable,"onSelfDragMove"),D(e,"onDragMove");return}return}if(n.forDrag.includes(t.code)){const i=document.activeElement;if(!i)return;const a=i.closest(k.DRAGGABLE);if(!a||e.entities.modifiersDraggableSet.size===0||!e.entities.modifiersDraggableSet.has(a))return;const o=e.entities.draggableMap.get(a);if(!se(i,a,o?.dragHandle,!0))return;t.preventDefault(),H();const l=a.getBoundingClientRect(),c=l.left+l.width/2,u=l.top+l.height/2,d={clientX:c,clientY:u};e.entities.initiatingDraggable=a;const f=te(d,a);e.pointer.value=N(d,f.x,f.y),O(e);const g=(e.collision?.run??Y)(e);U(e,e.hovered,g),A(e,a,"onSelfDragStart"),D(e,"onDragStart")}},st=e=>t=>{e.keyboard.keys.pressedKeys.value.delete(t.code)},it=e=>()=>{e.keyboard.keys.pressedKeys.value.clear()},K={keyDown:nt,keyUp:st,clear:it},at=e=>()=>{e.state.value&&(e.scrollPosition.x=window.scrollX,e.scrollPosition.y=window.scrollY)},ot=e=>{const t=et(e),n=K.keyDown(e),s=K.keyUp(e),i=K.clear(e),a=at(e);r.onMounted(()=>{document.addEventListener("pointerdown",t.pointerDown),document.addEventListener("keydown",n),document.addEventListener("keyup",s),document.addEventListener("blur",i),document.addEventListener("scroll",a,!0)}),r.onBeforeUnmount(()=>{document.removeEventListener("pointerdown",t.pointerDown),document.removeEventListener("pointerup",t.pointerUp),document.removeEventListener("pointermove",t.pointerMove),document.removeEventListener("keydown",n),document.removeEventListener("keyup",s),document.removeEventListener("blur",i),document.removeEventListener("scroll",a,!0),t.cleanup()})},_=()=>{const e=r.inject($);if(!e)throw Error("DnD provider not found");return e},le=()=>{const e=_();return{overlay:e.overlay,delay:e.delay,distanceProgress:e.distanceProgress,entities:e.entities,pointer:e.pointer,state:e.state,scrollPosition:e.scrollPosition,keyboard:e.keyboard,hovered:e.hovered,collision:e.collision}},rt=r.defineComponent({__name:"DefaultOverlay",setup(e){const{entities:t,state:n,overlay:s}=le();return(i,a)=>r.unref(n)==="dragging"?(r.openBlock(),r.createElementBlock("div",{key:0,class:"dnd-kit-default-overlay",style:r.normalizeStyle({"--position-x":r.unref(s).style.value.x+"px","--position-y":r.unref(s).style.value.y+"px"})},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(r.unref(t).draggingMap,([o,l])=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.unref(t).draggableMap.get(o)?.render?(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(t).draggableMap.get(o)?.render),{key:0,class:"test"})):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(o.tagName),{key:1,innerHTML:l.initialOuterHTML,class:"test",style:r.normalizeStyle({width:l.initialRect.width+"px",height:l.initialRect.height+"px"})},null,8,["innerHTML","style"]))],64))),256))],4)):r.createCommentVNode("",!0)}}),lt=r.defineComponent({__name:"DnDProvider",setup(e){const t=r.useTemplateRef("overlayRef"),n=Ae(t);ot(n);const s=r.computed(()=>n.overlay.render.value??rt);return r.provide($,n),(i,a)=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.renderSlot(i.$slots,"default"),r.createElementVNode("div",{ref_key:"overlayRef",ref:t,class:"dnd-kit-overlay-container"},[r.renderSlot(i.$slots,"overlay",{overlay:s.value},()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(s.value)))])],512)],64))}});function ct(e,t,n){const s=_();let i,a,o;return typeof t=="function"?(i={},a=t):(i=t??{},a=n),r.onMounted(()=>{o=z(e),o&&(o.addEventListener("dragstart",h),o.addEventListener("drag",h),o.addEventListener("dragend",h),o.setAttribute(E.DRAGGABLE,""),s.lib.draggableObserver.observe(o),s.entities.draggableMap.set(o,{render:i.render,disabled:i.disabled??!1,groups:i.groups??[],modifier:i.modifier,events:i.events,payload:a,dragHandle:i.dragHandle,activation:i.activation,placementMargins:i.placementMargins}))}),r.onBeforeUnmount(()=>{o&&(s.lib.draggableObserver.unobserve(o),s.entities.visibleDraggableSet.delete(o),s.entities.draggableMap.delete(o),s.entities.modifiersDraggableSet.delete(o))}),{}}const ut=(e,t)=>{const n=_(),s=r.computed(()=>e.value===n.entities.selectingArea);let i=null;r.onMounted(()=>{i=z(e),i&&(i.setAttribute(E.SELECT_AREA,""),n.lib.selectableAreaObserver.observe(i),n.entities.selectableAreaMap.set(i,{modifier:t?.modifier??{keys:["ControlLeft"],method:"every"},events:t?.events,disabled:t?.disabled??!1,groups:t?.groups??[]}))}),r.onBeforeUnmount(()=>{i&&(n.lib.selectableAreaObserver.unobserve(i),n.entities.visibleSelectableAreaSet.delete(i),n.entities.modifiersSelectableAreaSet.delete(i),n.entities.selectableAreaMap.delete(i))});const a=r.computed(()=>{n.scrollPosition.x,n.scrollPosition.y;const o=n.pointer.value;return!o||n.state.value!=="selecting"||!i?{}:Re(o.start,o.current,i)});return{isSelecting:s,style:a}};function gt(e,t){const n=r.inject($);if(!n)throw Error("DnD provider not found");let s=null;return r.onMounted(()=>{s=z(e),s&&(s.setAttribute(E.CONSTRAINT_AREA,""),n.entities.constraintsAreaMap.set(s,{axis:t?.axis||"both",restrictToArea:t?.restrictToArea||!1}))}),r.onBeforeUnmount(()=>{s&&n.entities.constraintsAreaMap.delete(s)}),{}}function ft(e,t,n){const s=_();let i=null,a,o;typeof t=="function"?(a={},o=t):(a=t??{},o=n),r.onMounted(()=>{i=z(e),i&&(i.setAttribute(E.DROPPABLE,""),s.lib.droppableObserver.observe(i),s.entities.droppableMap.set(i,{disabled:a.disabled??!1,groups:a.groups??[],events:a.events,payload:o}))}),r.onBeforeUnmount(()=>{i&&(s.lib.droppableObserver.unobserve(i),s.entities.visibleDroppableSet.delete(i),s.entities.droppableMap.delete(i))})}exports.DnDProvider=lt;exports.makeConstraintArea=gt;exports.makeDraggable=ct;exports.makeDroppable=ft;exports.makeSelectionArea=ut;exports.useDnDProvider=le;
|