@hkdigital/lib-sveltekit 0.2.4 → 0.2.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.
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
IDLE,
|
|
9
9
|
DRAGGING,
|
|
10
10
|
DRAG_PREVIEW,
|
|
11
|
-
DROPPING
|
|
12
|
-
DRAG_DISABLED
|
|
11
|
+
DROPPING
|
|
13
12
|
} from '../../constants/state-labels/drag-states.js';
|
|
14
13
|
|
|
15
14
|
|
|
@@ -99,14 +98,24 @@
|
|
|
99
98
|
let customPreviewSet = $state(false);
|
|
100
99
|
let elementRect = $state(null);
|
|
101
100
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
101
|
+
// Track if current draggable can drop in the active zone
|
|
102
|
+
let canDropInActiveZone = $derived.by(() => {
|
|
103
|
+
if (currentState !== DRAGGING || !dragState.activeDropZone) return false;
|
|
104
|
+
|
|
105
|
+
const activeZone = dragState.dropZones.get(dragState.activeDropZone);
|
|
106
|
+
return activeZone?.canDrop || false;
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
// Computed state object for CSS classes
|
|
110
|
+
let stateObject = $derived({
|
|
111
|
+
idle: currentState === IDLE,
|
|
112
|
+
dragging: currentState === DRAGGING,
|
|
113
|
+
'drag-preview': currentState === DRAG_PREVIEW,
|
|
114
|
+
dropping: currentState === DROPPING,
|
|
115
|
+
'drag-disabled': disabled || !canDrag(item),
|
|
116
|
+
'can-drop': currentState === DRAGGING && canDropInActiveZone,
|
|
117
|
+
'cannot-drop': currentState === DRAGGING && dragState.activeDropZone && !canDropInActiveZone
|
|
118
|
+
});
|
|
110
119
|
|
|
111
120
|
let stateClasses = $derived(toStateClasses(stateObject));
|
|
112
121
|
|
|
@@ -465,6 +474,7 @@ function handleTouchMove(event) {
|
|
|
465
474
|
{#if draggingSnippet && showPreview && elementRect}
|
|
466
475
|
<div
|
|
467
476
|
data-companion="drag-preview-follower"
|
|
477
|
+
class={stateClasses}
|
|
468
478
|
style="position: fixed; z-index: 9999; pointer-events: none;"
|
|
469
479
|
style:left="{previewX}px"
|
|
470
480
|
style:top="{previewY}px"
|
|
@@ -7,10 +7,9 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
[data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
|
|
10
|
-
cursor: grab;
|
|
10
|
+
cursor: grab; /* Open hand when hovering draggable items */
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
|
|
14
13
|
/*[data-component='draggable']:active {
|
|
15
14
|
cursor: grabbing;
|
|
16
15
|
}*/
|
|
@@ -42,6 +41,20 @@
|
|
|
42
41
|
filter: grayscale(0.5);
|
|
43
42
|
}
|
|
44
43
|
|
|
44
|
+
/* Preview follower */
|
|
45
|
+
|
|
46
|
+
[data-companion='drag-preview-follower'] {
|
|
47
|
+
/*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[data-companion='drag-preview-follower'].state-can-drop {
|
|
51
|
+
box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
[data-companion='drag-preview-follower'].state-cannot-drop {
|
|
55
|
+
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
|
|
56
|
+
}
|
|
57
|
+
|
|
45
58
|
/* Animations */
|
|
46
59
|
@keyframes drop-finish {
|
|
47
60
|
0% {
|
|
@@ -57,8 +70,4 @@
|
|
|
57
70
|
opacity: 1;
|
|
58
71
|
}
|
|
59
72
|
}
|
|
60
|
-
|
|
61
|
-
& [data-companion="drag-preview-follower"] {
|
|
62
|
-
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|
63
|
-
}
|
|
64
73
|
}
|