svelte-ag 1.1.7 → 1.1.8
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/dist/components/dnd/DndContext.svelte +37 -45
- package/dist/components/dnd/DndContext.svelte.d.ts +17 -27
- package/dist/components/dnd/DndContext.svelte.d.ts.map +1 -1
- package/dist/components/dnd/DndDroppable.svelte +5 -5
- package/dist/components/dnd/DndDroppable.svelte.d.ts +2 -2
- package/dist/components/dnd/DndDroppable.svelte.d.ts.map +1 -1
- package/dist/components/dnd/DndHandle.svelte +8 -4
- package/dist/components/dnd/DndHandle.svelte.d.ts.map +1 -1
- package/dist/components/dnd/DndItem.svelte +41 -24
- package/dist/components/dnd/DndItem.svelte.d.ts +27 -12
- package/dist/components/dnd/DndItem.svelte.d.ts.map +1 -1
- package/dist/components/dnd/DndOverlay.svelte +8 -9
- package/dist/components/dnd/DndOverlay.svelte.d.ts +5 -4
- package/dist/components/dnd/DndOverlay.svelte.d.ts.map +1 -1
- package/dist/components/dnd/DndSortableItem.svelte +30 -30
- package/dist/components/dnd/DndSortableItem.svelte.d.ts +6 -8
- package/dist/components/dnd/DndSortableItem.svelte.d.ts.map +1 -1
- package/dist/components/dnd/recipies/SimpleSortable.svelte +53 -19
- package/dist/components/dnd/recipies/SimpleSortable.svelte.d.ts +42 -7
- package/dist/components/dnd/recipies/SimpleSortable.svelte.d.ts.map +1 -1
- package/dist/components/dnd/types.svelte.d.ts +5 -6
- package/dist/components/dnd/types.svelte.d.ts.map +1 -1
- package/dist/components/dnd/utils.svelte.d.ts +0 -4
- package/dist/components/dnd/utils.svelte.d.ts.map +1 -1
- package/dist/components/dnd/utils.svelte.js +5 -4
- package/dist/components/gallery/gallery.svelte.d.ts +2 -2
- package/dist/index.d.ts +92 -27
- package/dist/index.d.ts.map +1 -1
- package/package.json +3 -2
- package/src/lib/components/dnd/DndContext.svelte +37 -45
- package/src/lib/components/dnd/DndDroppable.svelte +5 -5
- package/src/lib/components/dnd/DndHandle.svelte +8 -4
- package/src/lib/components/dnd/DndItem.svelte +41 -24
- package/src/lib/components/dnd/DndOverlay.svelte +8 -9
- package/src/lib/components/dnd/DndSortableItem.svelte +30 -30
- package/src/lib/components/dnd/recipies/SimpleSortable.svelte +53 -19
- package/src/lib/components/dnd/types.svelte.ts +5 -7
- package/src/lib/components/dnd/utils.svelte.ts +5 -4
|
@@ -1,73 +1,50 @@
|
|
|
1
|
-
<!--
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
This is a wrapper around https://dndkit.com/svelte/components/drag-drop-provider/
|
|
4
|
+
It makes state handling and items sorting easier
|
|
5
|
+
-->
|
|
2
6
|
|
|
3
7
|
<script lang="ts" module>
|
|
4
|
-
import {
|
|
5
|
-
import { getContext, setContext, type Snippet } from 'svelte';
|
|
8
|
+
import { createContext, type ComponentProps } from 'svelte';
|
|
6
9
|
import type { WritableBox } from 'svelte-toolbelt';
|
|
7
10
|
|
|
8
|
-
export type
|
|
9
|
-
children?: Snippet;
|
|
10
|
-
onBeforeDragStart?: DragDropEvents<T>['beforedragstart'];
|
|
11
|
-
onCollision?: DragDropEvents<T>['collision'];
|
|
12
|
-
onDragStart?: DragDropEvents<T>['dragstart'];
|
|
13
|
-
onDragMove?: DragDropEvents<T>['dragmove'];
|
|
14
|
-
onDragOver?: DragDropEvents<T>['dragover'];
|
|
15
|
-
onDragEnd?: DragDropEvents<T>['dragend'];
|
|
16
|
-
items: T[];
|
|
17
|
-
};
|
|
11
|
+
export type Item = { id: string; children?: Item[] };
|
|
18
12
|
|
|
19
|
-
export type DndState
|
|
20
|
-
items: WritableBox<
|
|
13
|
+
export type DndState = {
|
|
14
|
+
items: WritableBox<Item[]>;
|
|
21
15
|
};
|
|
22
16
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
* Instantiates a new `DndState` instance and sets it in the context.
|
|
27
|
-
*
|
|
28
|
-
* @param props The constructor props for the `DndState` class.
|
|
29
|
-
* @returns The `DndState` instance.
|
|
30
|
-
*/
|
|
31
|
-
export function setDnd<T>(dnd: DndState<T>): DndState<T> {
|
|
32
|
-
return setContext(Symbol.for(SYMBOL_KEY), dnd);
|
|
33
|
-
}
|
|
17
|
+
export type DndContextProps<T extends { id: string; children?: T[] }> = ComponentProps<typeof DragDropProvider> & {
|
|
18
|
+
items: Item[];
|
|
19
|
+
};
|
|
34
20
|
|
|
35
|
-
|
|
36
|
-
* Retrieves the `DndState` instance from the context. This is a class instance,
|
|
37
|
-
* so you cannot destructure it.
|
|
38
|
-
* @returns The `DndState` instance.
|
|
39
|
-
*/
|
|
40
|
-
export function useDnd<T>(): DndState<T> {
|
|
41
|
-
return getContext(Symbol.for(SYMBOL_KEY));
|
|
42
|
-
}
|
|
21
|
+
export const [getDnd, setDnd] = createContext<DndState>();
|
|
43
22
|
</script>
|
|
44
23
|
|
|
45
24
|
<script lang="ts" generics="T extends {id: string; children?: T[]}">
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
25
|
+
import { DragDropProvider } from '@dnd-kit/svelte';
|
|
26
|
+
import { move } from '@dnd-kit/helpers';
|
|
48
27
|
import { box } from 'svelte-toolbelt';
|
|
28
|
+
import { findItem } from './utils.svelte';
|
|
49
29
|
|
|
50
30
|
let { children, items = $bindable(), onDragEnd, ...rest }: DndContextProps<T> = $props();
|
|
51
31
|
|
|
52
|
-
|
|
32
|
+
setDnd({
|
|
53
33
|
items: box.with(
|
|
54
34
|
() => items,
|
|
55
35
|
(v) => (items = v)
|
|
56
36
|
)
|
|
57
37
|
});
|
|
58
|
-
</script>
|
|
59
38
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
onDragEnd={(e, m) => {
|
|
39
|
+
let snapshot: Item[] = [];
|
|
40
|
+
|
|
41
|
+
function done(e: Parameters<NonNullable<DndContextProps<T>['onDragEnd']>>[0]) {
|
|
64
42
|
const targetId = e.operation.target?.id;
|
|
65
43
|
const sourceId = e.operation.source?.id;
|
|
66
44
|
|
|
67
45
|
if (targetId && sourceId) {
|
|
68
|
-
const sourceDetails = findItem(sourceId,
|
|
69
|
-
const targetList =
|
|
70
|
-
findItem(targetId, dnd.items.current)?.item.children ?? (targetId !== undefined ? items : undefined);
|
|
46
|
+
const sourceDetails = findItem(sourceId, items);
|
|
47
|
+
const targetList = findItem(targetId, items)?.item.children ?? (targetId !== undefined ? items : undefined);
|
|
71
48
|
|
|
72
49
|
if (sourceDetails && targetList) {
|
|
73
50
|
const item = sourceDetails.list.splice(sourceDetails.index, 1)[0];
|
|
@@ -80,6 +57,21 @@
|
|
|
80
57
|
}
|
|
81
58
|
}
|
|
82
59
|
}
|
|
60
|
+
}
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<DragDropProvider
|
|
64
|
+
onDragStart={() => {
|
|
65
|
+
snapshot = items.slice();
|
|
66
|
+
}}
|
|
67
|
+
onDragOver={(event) => {
|
|
68
|
+
items = move(items, event);
|
|
69
|
+
}}
|
|
70
|
+
onDragEnd={(e, m) => {
|
|
71
|
+
if (e.canceled) {
|
|
72
|
+
items = snapshot;
|
|
73
|
+
}
|
|
74
|
+
done(e);
|
|
83
75
|
onDragEnd?.(e, m);
|
|
84
76
|
}}
|
|
85
77
|
{...rest}
|
|
@@ -1,34 +1,20 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type Snippet } from 'svelte';
|
|
1
|
+
import { type ComponentProps } from 'svelte';
|
|
3
2
|
import type { WritableBox } from 'svelte-toolbelt';
|
|
4
|
-
export type
|
|
3
|
+
export type Item = {
|
|
5
4
|
id: string;
|
|
6
|
-
|
|
7
|
-
children?: Snippet;
|
|
8
|
-
onBeforeDragStart?: DragDropEvents<T>['beforedragstart'];
|
|
9
|
-
onCollision?: DragDropEvents<T>['collision'];
|
|
10
|
-
onDragStart?: DragDropEvents<T>['dragstart'];
|
|
11
|
-
onDragMove?: DragDropEvents<T>['dragmove'];
|
|
12
|
-
onDragOver?: DragDropEvents<T>['dragover'];
|
|
13
|
-
onDragEnd?: DragDropEvents<T>['dragend'];
|
|
14
|
-
items: T[];
|
|
5
|
+
children?: Item[];
|
|
15
6
|
};
|
|
16
|
-
export type DndState
|
|
17
|
-
items: WritableBox<
|
|
7
|
+
export type DndState = {
|
|
8
|
+
items: WritableBox<Item[]>;
|
|
18
9
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
export declare
|
|
26
|
-
|
|
27
|
-
* Retrieves the `DndState` instance from the context. This is a class instance,
|
|
28
|
-
* so you cannot destructure it.
|
|
29
|
-
* @returns The `DndState` instance.
|
|
30
|
-
*/
|
|
31
|
-
export declare function useDnd<T>(): DndState<T>;
|
|
10
|
+
export type DndContextProps<T extends {
|
|
11
|
+
id: string;
|
|
12
|
+
children?: T[];
|
|
13
|
+
}> = ComponentProps<typeof DragDropProvider> & {
|
|
14
|
+
items: Item[];
|
|
15
|
+
};
|
|
16
|
+
export declare const getDnd: () => DndState, setDnd: (context: DndState) => DndState;
|
|
17
|
+
import { DragDropProvider } from '@dnd-kit/svelte';
|
|
32
18
|
declare function $$render<T extends {
|
|
33
19
|
id: string;
|
|
34
20
|
children?: T[];
|
|
@@ -62,6 +48,10 @@ interface $$IsomorphicComponent {
|
|
|
62
48
|
}>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
63
49
|
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
64
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* This is a wrapper around https://dndkit.com/svelte/components/drag-drop-provider/
|
|
53
|
+
* It makes state handling and items sorting easier
|
|
54
|
+
*/
|
|
65
55
|
declare const DndContext: $$IsomorphicComponent;
|
|
66
56
|
type DndContext<T extends {
|
|
67
57
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndContext.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndContext.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,
|
|
1
|
+
{"version":3,"file":"DndContext.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndContext.svelte.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import {
|
|
2
|
+
import { createDroppable, type CreateDroppableInput } from '@dnd-kit/svelte';
|
|
3
3
|
import type { ClassValue } from 'svelte/elements';
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
5
|
|
|
6
|
-
interface DroppableProps extends
|
|
6
|
+
interface DroppableProps extends CreateDroppableInput {
|
|
7
7
|
children: Snippet<[{ isDropTarget: boolean }]>;
|
|
8
8
|
class?: ClassValue;
|
|
9
9
|
}
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
let { children, class: className, ...rest }: DroppableProps = $props();
|
|
12
12
|
|
|
13
13
|
// svelte-ignore state_referenced_locally
|
|
14
|
-
const
|
|
14
|
+
const droppable = createDroppable(rest);
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
|
-
<div class={className} {@attach
|
|
18
|
-
{@render children({ isDropTarget: isDropTarget
|
|
17
|
+
<div class={className} {@attach droppable.attach}>
|
|
18
|
+
{@render children({ isDropTarget: droppable.isDropTarget })}
|
|
19
19
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type CreateDroppableInput } from '@dnd-kit/svelte';
|
|
2
2
|
import type { ClassValue } from 'svelte/elements';
|
|
3
3
|
import type { Snippet } from 'svelte';
|
|
4
|
-
interface DroppableProps extends
|
|
4
|
+
interface DroppableProps extends CreateDroppableInput {
|
|
5
5
|
children: Snippet<[{
|
|
6
6
|
isDropTarget: boolean;
|
|
7
7
|
}]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndDroppable.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndDroppable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"DndDroppable.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndDroppable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,cAAe,SAAQ,oBAAoB;IACnD,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAmBH,QAAA,MAAM,YAAY,oDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -5,11 +5,15 @@
|
|
|
5
5
|
</script>
|
|
6
6
|
|
|
7
7
|
<script lang="ts">
|
|
8
|
-
import {
|
|
8
|
+
import { getItem } from './DndSortableItem.svelte';
|
|
9
9
|
import { cn } from '../../utils/utils.js';
|
|
10
10
|
let { class: className }: DragHandleProps = $props();
|
|
11
11
|
|
|
12
|
-
const item = $derived(
|
|
12
|
+
const item = $derived.by(() => {
|
|
13
|
+
try {
|
|
14
|
+
return getItem();
|
|
15
|
+
} catch {}
|
|
16
|
+
});
|
|
13
17
|
|
|
14
18
|
let handleClass = $derived(
|
|
15
19
|
cn(
|
|
@@ -17,7 +21,7 @@
|
|
|
17
21
|
icon-draghandle flex size-4 text-muted-foreground transition-colors duration-150
|
|
18
22
|
hover:text-foreground
|
|
19
23
|
`,
|
|
20
|
-
item?.isDragging
|
|
24
|
+
item?.isDragging === true ? `cursor-grabbing` : `cursor-grab`,
|
|
21
25
|
className
|
|
22
26
|
)
|
|
23
27
|
);
|
|
@@ -26,5 +30,5 @@
|
|
|
26
30
|
{#if !item}
|
|
27
31
|
<div data-drag-handle class={cn(handleClass, className)}></div>
|
|
28
32
|
{:else}
|
|
29
|
-
<div data-drag-handle class={cn(handleClass, className)} {@attach item
|
|
33
|
+
<div data-drag-handle class={cn(handleClass, className)} {@attach item.attachHandle}></div>
|
|
30
34
|
{/if}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndHandle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndHandle.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;
|
|
1
|
+
{"version":3,"file":"DndHandle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndHandle.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuCJ,QAAA,MAAM,SAAS,qDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|
|
@@ -1,44 +1,61 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
Draggable item. Provide a child to be rendered and modify behaviour based on
|
|
4
|
+
the props provided to the child.
|
|
5
|
+
You MUST @attach for it to work
|
|
6
|
+
|
|
7
|
+
Usage:
|
|
8
|
+
```svelte
|
|
9
|
+
<DndItem id={id}>
|
|
10
|
+
{#snippet child(props)}
|
|
11
|
+
<div
|
|
12
|
+
bind:this={
|
|
13
|
+
() => (props.isOverlay || props.isDragging ? null : listItems[item.id]),
|
|
14
|
+
(v) => {
|
|
15
|
+
if (props.isOverlay || props.isDragging) listItems[item.id] = null;
|
|
16
|
+
else listItems[item.id] = v;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
{@attach props.draggable?.attach}
|
|
20
|
+
>
|
|
21
|
+
</div>
|
|
22
|
+
{/snippet}
|
|
23
|
+
</DndItem>
|
|
24
|
+
```
|
|
25
|
+
-->
|
|
26
|
+
|
|
1
27
|
<script module lang="ts">
|
|
2
28
|
export type DndItemChildProps = {
|
|
3
29
|
isDragging: boolean;
|
|
4
30
|
isOverlay: boolean;
|
|
31
|
+
draggable?: ReturnType<typeof createDraggable>;
|
|
5
32
|
};
|
|
6
33
|
|
|
7
|
-
export type DndItemProps =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
34
|
+
export type DndItemProps = CreateDraggableInput & {
|
|
35
|
+
child: Snippet<[DndItemChildProps]>;
|
|
36
|
+
};
|
|
11
37
|
</script>
|
|
12
38
|
|
|
13
39
|
<script lang="ts">
|
|
14
|
-
|
|
15
|
-
* This component is a draggable element.
|
|
16
|
-
* It places the necessary attributes on the div for tracking it.
|
|
17
|
-
* It styles the position of the div while its being dragged.
|
|
18
|
-
* Everything else about it needs to be done by the consumer
|
|
19
|
-
*
|
|
20
|
-
* It can either facilitate a drag handle with the item context
|
|
21
|
-
* or it can be draggable itself
|
|
22
|
-
*/
|
|
23
|
-
import { cn, type HTMLDivAttributes } from '../../utils';
|
|
24
|
-
import { useDraggable, type UseDraggableInput } from '@dnd-kit-svelte/svelte';
|
|
25
|
-
import { setItemContext } from './DndSortableItem.svelte';
|
|
40
|
+
import { setItem } from './DndSortableItem.svelte';
|
|
26
41
|
import type { Snippet } from 'svelte';
|
|
42
|
+
import { createDraggable, type CreateDraggableInput } from '@dnd-kit/svelte';
|
|
27
43
|
|
|
28
|
-
let {
|
|
44
|
+
let { id, child, ...rest }: DndItemProps = $props();
|
|
29
45
|
|
|
30
46
|
// svelte-ignore state_referenced_locally
|
|
31
|
-
const
|
|
47
|
+
const draggable = createDraggable({
|
|
48
|
+
get id() {
|
|
49
|
+
return id;
|
|
50
|
+
},
|
|
32
51
|
...rest
|
|
33
52
|
});
|
|
34
53
|
|
|
35
54
|
// These are used by the drag handle
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
setItem({
|
|
56
|
+
attachHandle: draggable.attachHandle,
|
|
57
|
+
isDragging: draggable.isDragging
|
|
39
58
|
});
|
|
40
59
|
</script>
|
|
41
60
|
|
|
42
|
-
|
|
43
|
-
{@render child?.({ isDragging: isDragging.current, isOverlay: false })}
|
|
44
|
-
</div>
|
|
61
|
+
{@render child?.({ draggable, isDragging: draggable.isDragging, isOverlay: false })}
|
|
@@ -1,22 +1,37 @@
|
|
|
1
1
|
export type DndItemChildProps = {
|
|
2
2
|
isDragging: boolean;
|
|
3
3
|
isOverlay: boolean;
|
|
4
|
+
draggable?: ReturnType<typeof createDraggable>;
|
|
4
5
|
};
|
|
5
|
-
export type DndItemProps =
|
|
6
|
+
export type DndItemProps = CreateDraggableInput & {
|
|
6
7
|
child: Snippet<[DndItemChildProps]>;
|
|
7
8
|
};
|
|
8
|
-
/**
|
|
9
|
-
* This component is a draggable element.
|
|
10
|
-
* It places the necessary attributes on the div for tracking it.
|
|
11
|
-
* It styles the position of the div while its being dragged.
|
|
12
|
-
* Everything else about it needs to be done by the consumer
|
|
13
|
-
*
|
|
14
|
-
* It can either facilitate a drag handle with the item context
|
|
15
|
-
* or it can be draggable itself
|
|
16
|
-
*/
|
|
17
|
-
import { type HTMLDivAttributes } from '../../utils';
|
|
18
|
-
import { type UseDraggableInput } from '@dnd-kit-svelte/svelte';
|
|
19
9
|
import type { Snippet } from 'svelte';
|
|
10
|
+
import { createDraggable, type CreateDraggableInput } from '@dnd-kit/svelte';
|
|
11
|
+
/**
|
|
12
|
+
* Draggable item. Provide a child to be rendered and modify behaviour based on
|
|
13
|
+
* the props provided to the child.
|
|
14
|
+
* You MUST @attach for it to work
|
|
15
|
+
*
|
|
16
|
+
* Usage:
|
|
17
|
+
* ```svelte
|
|
18
|
+
* <DndItem id={id}>
|
|
19
|
+
* {#snippet child(props)}
|
|
20
|
+
* <div
|
|
21
|
+
* bind:this={
|
|
22
|
+
* () => (props.isOverlay || props.isDragging ? null : listItems[item.id]),
|
|
23
|
+
* (v) => {
|
|
24
|
+
* if (props.isOverlay || props.isDragging) listItems[item.id] = null;
|
|
25
|
+
* else listItems[item.id] = v;
|
|
26
|
+
* }
|
|
27
|
+
* }
|
|
28
|
+
* {@attach props.draggable?.attach}
|
|
29
|
+
* >
|
|
30
|
+
* </div>
|
|
31
|
+
* {/snippet}
|
|
32
|
+
* </DndItem>
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
20
35
|
declare const DndItem: import("svelte").Component<DndItemProps, {}, "">;
|
|
21
36
|
type DndItem = ReturnType<typeof DndItem>;
|
|
22
37
|
export default DndItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndItem.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DndItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndItem.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,oBAAoB,GAAG;IAChD,KAAK,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC;CACrC,CAAC;AAIJ,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgC7E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { type Snippet } from 'svelte';
|
|
3
|
+
import type { SortableItemChildProps } from './DndSortableItem.svelte';
|
|
3
4
|
|
|
5
|
+
export type OverlayChildProps<T> = { item: T } & SortableItemChildProps;
|
|
4
6
|
export type DragOverlayProps<T> = {
|
|
5
|
-
child: Snippet<[
|
|
7
|
+
child: Snippet<[OverlayChildProps<T>]>;
|
|
6
8
|
};
|
|
7
9
|
</script>
|
|
8
10
|
|
|
9
11
|
<script lang="ts" generics="T extends {id: string; children?: T[]}">
|
|
10
|
-
import { DragOverlay } from '@dnd-kit
|
|
11
|
-
import {
|
|
12
|
-
import type { SortableItemChildProps } from './DndSortableItem.svelte';
|
|
12
|
+
import { DragOverlay } from '@dnd-kit/svelte';
|
|
13
|
+
import { getDnd } from './DndContext.svelte';
|
|
13
14
|
import { findItem } from './utils.svelte.js';
|
|
14
15
|
|
|
15
|
-
const dnd =
|
|
16
|
+
const dnd = getDnd();
|
|
16
17
|
|
|
17
18
|
let { child }: DragOverlayProps<T> = $props();
|
|
18
19
|
</script>
|
|
@@ -22,12 +23,10 @@
|
|
|
22
23
|
{@const item = findItem(source?.id, dnd.items.current)}
|
|
23
24
|
{#if item}
|
|
24
25
|
{@render child({
|
|
25
|
-
item: item.item,
|
|
26
|
+
item: item.item as unknown as T,
|
|
26
27
|
isDragging: false,
|
|
27
28
|
isOverlay: true
|
|
28
29
|
})}
|
|
29
|
-
{:else}
|
|
30
|
-
oh dear
|
|
31
|
-
{/if}
|
|
30
|
+
{:else}Error{/if}
|
|
32
31
|
{/snippet}
|
|
33
32
|
</DragOverlay>
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { type Snippet } from 'svelte';
|
|
2
|
+
import type { SortableItemChildProps } from './DndSortableItem.svelte';
|
|
3
|
+
export type OverlayChildProps<T> = {
|
|
4
|
+
item: T;
|
|
5
|
+
} & SortableItemChildProps;
|
|
2
6
|
export type DragOverlayProps<T> = {
|
|
3
|
-
child: Snippet<[
|
|
4
|
-
item: T;
|
|
5
|
-
} & SortableItemChildProps]>;
|
|
7
|
+
child: Snippet<[OverlayChildProps<T>]>;
|
|
6
8
|
};
|
|
7
|
-
import type { SortableItemChildProps } from './DndSortableItem.svelte';
|
|
8
9
|
declare function $$render<T extends {
|
|
9
10
|
id: string;
|
|
10
11
|
children?: T[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndOverlay.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"DndOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndOverlay.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,GAAG,sBAAsB,CAAC;AACxE,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,KAAK,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAMJ,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;CAAC;WA2B3B,gBAAgB,CAAC,CAAC,CAAC;;;;;EAA4E;AAC5H,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;CAAC;IAC1D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;KAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACja,CAAC,CAAC,SAAS;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;KAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAChK,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,UAAU,EAAE,qBAAmC,CAAC;AACpC,KAAK,UAAU,CAAC,CAAC,SAAS;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;CAAC,IAAI,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/F,eAAe,UAAU,CAAC"}
|
|
@@ -1,49 +1,49 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import {
|
|
2
|
+
import { createContext, type Snippet } from 'svelte';
|
|
3
3
|
|
|
4
4
|
export type SortableItemChildProps = {
|
|
5
5
|
isDragging: boolean;
|
|
6
6
|
isOverlay: boolean;
|
|
7
|
+
sortable?: ReturnType<typeof createSortable>;
|
|
7
8
|
};
|
|
8
9
|
|
|
9
|
-
export type DndSortableItemProps =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
const itemSymbolKey = 'sortable-item';
|
|
10
|
+
export type DndSortableItemProps = CreateSortableInput & {
|
|
11
|
+
child: Snippet<[SortableItemChildProps]>;
|
|
12
|
+
};
|
|
15
13
|
|
|
16
14
|
export type ItemContext = {
|
|
17
|
-
isDragging: ReturnType<typeof
|
|
18
|
-
|
|
15
|
+
isDragging: ReturnType<typeof createSortable>['isDragging'];
|
|
16
|
+
attachHandle: ReturnType<typeof createSortable>['attachHandle'];
|
|
19
17
|
};
|
|
20
18
|
|
|
21
|
-
export
|
|
22
|
-
setContext(Symbol.for(itemSymbolKey), item);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export function getItemContext(): ItemContext {
|
|
26
|
-
return getContext(Symbol.for(itemSymbolKey));
|
|
27
|
-
}
|
|
19
|
+
export const [getItem, setItem] = createContext<ItemContext>();
|
|
28
20
|
</script>
|
|
29
21
|
|
|
30
22
|
<script lang="ts">
|
|
31
|
-
import {
|
|
32
|
-
import type { HTMLDivAttributes } from '../../utils/bits.js';
|
|
33
|
-
import { cn } from '../../utils/utils.js';
|
|
34
|
-
import type { Attachment } from 'svelte/attachments';
|
|
23
|
+
import { createSortable, type CreateSortableInput } from '@dnd-kit/svelte/sortable';
|
|
35
24
|
|
|
36
|
-
let {
|
|
25
|
+
let { id, index, child, ...rest }: DndSortableItemProps = $props();
|
|
37
26
|
|
|
38
27
|
// svelte-ignore state_referenced_locally
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
28
|
+
const sortable = createSortable({
|
|
29
|
+
get id() {
|
|
30
|
+
return id;
|
|
31
|
+
},
|
|
32
|
+
transition: { idle: true },
|
|
33
|
+
get index() {
|
|
34
|
+
return index;
|
|
35
|
+
},
|
|
36
|
+
...rest
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
setItem({
|
|
40
|
+
attachHandle: sortable.attachHandle,
|
|
41
|
+
isDragging: sortable.isDragging
|
|
42
|
+
});
|
|
42
43
|
</script>
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</div>
|
|
45
|
+
{@render child({
|
|
46
|
+
sortable,
|
|
47
|
+
isDragging: sortable.isDragging,
|
|
48
|
+
isOverlay: false
|
|
49
|
+
})}
|
|
@@ -2,19 +2,17 @@ import { type Snippet } from 'svelte';
|
|
|
2
2
|
export type SortableItemChildProps = {
|
|
3
3
|
isDragging: boolean;
|
|
4
4
|
isOverlay: boolean;
|
|
5
|
+
sortable?: ReturnType<typeof createSortable>;
|
|
5
6
|
};
|
|
6
|
-
export type DndSortableItemProps =
|
|
7
|
+
export type DndSortableItemProps = CreateSortableInput & {
|
|
7
8
|
child: Snippet<[SortableItemChildProps]>;
|
|
8
9
|
};
|
|
9
10
|
export type ItemContext = {
|
|
10
|
-
isDragging: ReturnType<typeof
|
|
11
|
-
|
|
11
|
+
isDragging: ReturnType<typeof createSortable>['isDragging'];
|
|
12
|
+
attachHandle: ReturnType<typeof createSortable>['attachHandle'];
|
|
12
13
|
};
|
|
13
|
-
export declare
|
|
14
|
-
|
|
15
|
-
import { useSortable, type UseSortableInput } from '@dnd-kit-svelte/svelte/sortable';
|
|
16
|
-
import type { HTMLDivAttributes } from '../../utils/bits.js';
|
|
17
|
-
import type { Attachment } from 'svelte/attachments';
|
|
14
|
+
export declare const getItem: () => ItemContext, setItem: (context: ItemContext) => ItemContext;
|
|
15
|
+
import { createSortable, type CreateSortableInput } from '@dnd-kit/svelte/sortable';
|
|
18
16
|
declare const DndSortableItem: import("svelte").Component<DndSortableItemProps, {}, "">;
|
|
19
17
|
type DndSortableItem = ReturnType<typeof DndSortableItem>;
|
|
20
18
|
export default DndSortableItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndSortableItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndSortableItem.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,
|
|
1
|
+
{"version":3,"file":"DndSortableItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dnd/DndSortableItem.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErD,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,KAAK,EAAE,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;IAC5D,YAAY,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC;CACjE,CAAC;AAEF,eAAO,MAAO,OAAO,qBAAE,OAAO,uCAAgC,CAAC;AAGjE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAmCpF,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
|