@marianmeres/stuic 1.67.0 → 1.69.0
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.
|
@@ -7,7 +7,7 @@ export interface DraggableOptions {
|
|
|
7
7
|
enabled?: boolean;
|
|
8
8
|
payload?: any;
|
|
9
9
|
effectAllowed?: EffectAllowed;
|
|
10
|
-
isDragged?: Writable<
|
|
10
|
+
isDragged?: Writable<string | null>;
|
|
11
11
|
logger?: (...args: any[]) => void;
|
|
12
12
|
}
|
|
13
13
|
export declare const draggable: (node: HTMLElement, options: DraggableOptions) => {
|
|
@@ -20,7 +20,7 @@ export interface DroppableOptions {
|
|
|
20
20
|
onDrop: (data: any, e: DragEvent) => void;
|
|
21
21
|
onDragover?: (data: any) => void;
|
|
22
22
|
dropEffect?: DropEffect;
|
|
23
|
-
isDraggedOver?: Writable<
|
|
23
|
+
isDraggedOver?: Writable<string | null>;
|
|
24
24
|
logger?: (...args: any[]) => void;
|
|
25
25
|
}
|
|
26
26
|
export declare const droppable: (node: HTMLElement, options: DroppableOptions) => {
|
|
@@ -19,7 +19,8 @@ export const draggable = (node, options) => {
|
|
|
19
19
|
e.dataTransfer?.setData('stuic', JSON.stringify({ id: options.id, payload: pld }));
|
|
20
20
|
e.dataTransfer.effectAllowed = options.effectAllowed;
|
|
21
21
|
}
|
|
22
|
-
options?.isDragged?.update((old) => ({ ...old, [options.id]: true }));
|
|
22
|
+
// options?.isDragged?.update((old) => ({ ...old, [options.id!]: true }));
|
|
23
|
+
options?.isDragged?.set(options.id);
|
|
23
24
|
node.setAttribute('aria-grabbed', 'true');
|
|
24
25
|
};
|
|
25
26
|
const onDrag = (e) => {
|
|
@@ -31,7 +32,8 @@ export const draggable = (node, options) => {
|
|
|
31
32
|
const onDragend = (e) => {
|
|
32
33
|
_log('onDragend', e.dataTransfer);
|
|
33
34
|
// e.preventDefault();
|
|
34
|
-
options?.isDragged?.update((old) => ({ ...old, [options.id]: false }));
|
|
35
|
+
// options?.isDragged?.update((old) => ({ ...old, [options.id!]: false }));
|
|
36
|
+
options?.isDragged?.set(null);
|
|
35
37
|
node.setAttribute('aria-grabbed', 'false');
|
|
36
38
|
};
|
|
37
39
|
const _removeListeners = () => {
|
|
@@ -43,6 +45,7 @@ export const draggable = (node, options) => {
|
|
|
43
45
|
const _init = (_opts) => {
|
|
44
46
|
_log('_init', _opts);
|
|
45
47
|
_removeListeners();
|
|
48
|
+
options?.isDragged?.set(null);
|
|
46
49
|
if (_opts.enabled) {
|
|
47
50
|
node.setAttribute('draggable', 'true');
|
|
48
51
|
node.setAttribute('aria-grabbed', 'false');
|
|
@@ -80,7 +83,8 @@ export const droppable = (node, options) => {
|
|
|
80
83
|
// e.preventDefault();
|
|
81
84
|
_log('onDragenter', e.dataTransfer);
|
|
82
85
|
e.dataTransfer.dropEffect = options.dropEffect;
|
|
83
|
-
options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: true }));
|
|
86
|
+
// options?.isDraggedOver?.update((old) => ({ ...old, [options.id!]: true }));
|
|
87
|
+
options?.isDraggedOver?.set(options.id);
|
|
84
88
|
};
|
|
85
89
|
const onDragover = (e) => {
|
|
86
90
|
// _log('onDragover', e.dataTransfer); // too much spam
|
|
@@ -91,14 +95,16 @@ export const droppable = (node, options) => {
|
|
|
91
95
|
const onDragleave = (e) => {
|
|
92
96
|
_log('onDragleave', e.dataTransfer);
|
|
93
97
|
// e.preventDefault();
|
|
94
|
-
options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: false }));
|
|
98
|
+
// options?.isDraggedOver?.update((old) => ({ ...old, [options.id!]: false }));
|
|
99
|
+
options?.isDraggedOver?.set(null);
|
|
95
100
|
};
|
|
96
101
|
const onDrop = (e) => {
|
|
97
102
|
_log('onDrop', e.dataTransfer);
|
|
98
103
|
e.preventDefault();
|
|
99
104
|
const target = e.target;
|
|
100
105
|
e.dataTransfer.dropEffect = options.dropEffect;
|
|
101
|
-
options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: false }));
|
|
106
|
+
// options?.isDraggedOver?.update((old) => ({ ...old, [options.id!]: false }));
|
|
107
|
+
options?.isDraggedOver?.set(null);
|
|
102
108
|
if (_isFn(options.onDrop)) {
|
|
103
109
|
let stuicData = e.dataTransfer?.getData('stuic');
|
|
104
110
|
// prettier-ignore
|
|
@@ -119,6 +125,7 @@ export const droppable = (node, options) => {
|
|
|
119
125
|
const _init = (_opts) => {
|
|
120
126
|
_log('_init', _opts);
|
|
121
127
|
_removeListeners();
|
|
128
|
+
options?.isDraggedOver?.set(null);
|
|
122
129
|
if (_opts.enabled) {
|
|
123
130
|
node.addEventListener('dragenter', onDragenter);
|
|
124
131
|
node.addEventListener('dragover', onDragover);
|