svelte-ag 1.0.5 → 1.0.6

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.
Files changed (17) hide show
  1. package/dist/lib/components/dnd/dnd-sortable-context.svelte +1 -1
  2. package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts +1 -1
  3. package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts.map +1 -1
  4. package/dist/lib/components/dnd/dnd-sortable-item.svelte +1 -1
  5. package/dist/lib/components/dnd/sortable.svelte.d.ts.map +1 -1
  6. package/dist/lib/components/dnd/sortable.svelte.js +15 -4
  7. package/dist/lib/components/dnd/utils.svelte.d.ts +6 -0
  8. package/dist/lib/components/dnd/utils.svelte.d.ts.map +1 -1
  9. package/dist/lib/components/gallery/gallery.svelte +2 -6
  10. package/dist/lib/components/gallery/gallery.svelte.d.ts +4 -1
  11. package/dist/lib/components/gallery/gallery.svelte.d.ts.map +1 -1
  12. package/package.json +1 -1
  13. package/src/lib/components/dnd/dnd-sortable-context.svelte +1 -1
  14. package/src/lib/components/dnd/dnd-sortable-item.svelte +1 -1
  15. package/src/lib/components/dnd/sortable.svelte.ts +21 -4
  16. package/src/lib/components/dnd/utils.svelte.ts +4 -4
  17. package/src/lib/components/gallery/gallery.svelte +2 -6
package/dist/lib/components/dnd/dnd-sortable-context.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import type { Snippet } from 'svelte';
3
3
 
4
4
  export type SortableContextProps = {
5
- items: string[];
5
+ items: string[] | number[];
6
6
  children: Snippet<[]>;
7
7
  };
8
8
  </script>
package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { Snippet } from 'svelte';
2
2
  export type SortableContextProps = {
3
- items: string[];
3
+ items: string[] | number[];
4
4
  children: Snippet<[]>;
5
5
  };
6
6
  import type { HTMLDivAttributes } from '../../utils/bits.js';
package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dnd-sortable-context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/dnd-sortable-context.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;CACvB,CAAC;AAQJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,oBAAoB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CAAE,CAAC;AAyBjH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"dnd-sortable-context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/dnd-sortable-context.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;CACvB,CAAC;AAQJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,oBAAoB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CAAE,CAAC;AAyBjH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
package/dist/lib/components/dnd/dnd-sortable-item.svelte CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
  const { attributes, listeners, node, activatorNode, transform, transition, isDragging, isSorting, isOver } =
52
52
  useSortable({
53
- id: () => item.id,
53
+ id: () => ('id' in item ? item.id : item.idx),
54
54
  data: () => ({
55
55
  type: box.with(
56
56
  () => type,
package/dist/lib/components/dnd/sortable.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sortable.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/sortable.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAO3E;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,cAAc,QAKnD;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,YAAY,QAoC5D;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,aAAa,QAkC9D;;;;;;AAED,wBAIE"}
1
+ {"version":3,"file":"sortable.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/sortable.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAO3E;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,cAAc,QAKnD;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,YAAY,QAkD5D;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,aAAa,QAqC9D;;;;;;AAED,wBAIE"}
package/dist/lib/components/dnd/sortable.svelte.js CHANGED
@@ -20,14 +20,24 @@ export function onDragEnd({ active, over, dnd }) {
20
20
  const activeData = data(active);
21
21
  const overData = data(over);
22
22
  // Add this in as well accepts.includes(activeType)
23
+ console.log('Acitve/over', $state.snapshot(activeData), $state.snapshot(overData));
24
+ const usesId = 'id' in activeData.item.current;
23
25
  if (activeData.type.current === overData.type.current) {
24
26
  if (dnd.activeParent.id === overData.parent.current.id) {
25
27
  // Same containing list reorder
26
- const oldIndex = dnd.activeParent.children.findIndex((item) => item.id === active.id);
27
- const newIndex = overData.parent.current.children.findIndex((item) => item.id === over.id);
28
- // console.log('Drag end reorder', oldIndex, newIndex);
28
+ const oldIndex = usesId
29
+ ? dnd.activeParent.children.findIndex((item) => item.id === active.id)
30
+ : activeData.item.current.idx;
31
+ const newIndex = usesId
32
+ ? overData.parent.current.children.findIndex((item) => item.id === over.id)
33
+ : overData.item.current.idx;
34
+ console.log('Drag end reorder', oldIndex, newIndex);
29
35
  if (oldIndex !== newIndex)
30
36
  moveIndex(dnd.activeParent.children, oldIndex, newIndex);
37
+ // const arr = $state.snapshot(dnd.activeParent.children);
38
+ // const [item] = arr.splice(oldIndex, 1);
39
+ // arr.splice(newIndex, 0, item);
40
+ // activeData.parent.current.setChildren(arr);
31
41
  }
32
42
  else {
33
43
  // Move between containing lists
@@ -53,8 +63,9 @@ export function onDragOver({ active, over, dnd }) {
53
63
  throw new Error('No active parent found');
54
64
  const activeData = data(active);
55
65
  const overData = data(over);
66
+ const usesId = 'id' in activeData.item.current;
56
67
  // add this accepts.includes(activeType)
57
- if (activeData.item.current.id === overData.item.current.id)
68
+ if (usesId && activeData.item.current.id === overData.item.current.id)
58
69
  return;
59
70
  if (activeData.type.current === overData.type.current) {
60
71
  if (dnd.activeParent.id === overData.parent.current.id) {
package/dist/lib/components/dnd/utils.svelte.d.ts CHANGED
@@ -13,20 +13,26 @@ export type DataType = {
13
13
  type: WritableBox<string>;
14
14
  item: WritableBox<{
15
15
  id: string;
16
+ } | {
17
+ idx: number;
16
18
  }>;
17
19
  parent: WritableBox<{
18
20
  id: string;
19
21
  children: any[];
22
+ setChildren: (i: any[]) => void;
20
23
  }>;
21
24
  };
22
25
  export type DataInputType = {
23
26
  type: string;
24
27
  item: {
25
28
  id: string;
29
+ } | {
30
+ idx: number;
26
31
  };
27
32
  parent: {
28
33
  id: string;
29
34
  children: any[];
35
+ setChildren: (i: any[]) => void;
30
36
  };
31
37
  };
32
38
  export declare function data(input: {
package/dist/lib/components/dnd/utils.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/utils.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI;;;;EAK3D;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAKrE;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAA;KAAE,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACrB,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAA;KAAE,CAAC;CACzC,CAAC;AAGF,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,GAAG,QAAQ,CAWpD"}
1
+ {"version":3,"file":"utils.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/utils.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI;;;;EAK3D;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAKrE;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,MAAM,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QAAC,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;KAAE,CAAC,CAAC;CACvF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QAAC,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;KAAE,CAAC;CAC1E,CAAC;AAGF,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,GAAG,QAAQ,CAWpD"}
package/dist/lib/components/gallery/gallery.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  ...restProps
15
15
  }: WithElementRef<HTMLDivAttributes> & {
16
16
  images: { large: Item[]; medium: Item[]; small: Item[] };
17
- child: Snippet<[{ props: { style: string }; item: Item; index: number }]>;
17
+ child: Snippet<[{ props: { style: string }; item: ItemWithSize; index: number }]>;
18
18
  } = $props();
19
19
 
20
20
  type ItemWithSize = Item & { size: Size };
@@ -38,10 +38,6 @@
38
38
  let medium = $derived(images.medium.map((img) => ({ ...img, size: 'M' as Size })));
39
39
  let small = $derived(images.small.map((img) => ({ ...img, size: 'S' as Size })));
40
40
 
41
- // $effect.pre(() => {
42
- // allItems = packGrid($state.snapshot(small), $state.snapshot(medium), $state.snapshot(large), numCols);
43
- // });
44
-
45
41
  let allItems = $derived(
46
42
  packGrid($state.snapshot(small), $state.snapshot(medium), $state.snapshot(large), numCols)
47
43
  ) as ItemWithSize[];
@@ -53,9 +49,9 @@
53
49
  bind:this={ref}
54
50
  class={cn(
55
51
  `
56
- grid grid-cols-2 gap-2
57
52
  @vsm:grid-cols-3
58
53
  @vmd:grid-cols-4
54
+ grid grid-cols-2 gap-2
59
55
  `,
60
56
  className
61
57
  )}
package/dist/lib/components/gallery/gallery.svelte.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { type Snippet } from 'svelte';
2
2
  import { type HTMLDivAttributes } from '../../utils/index.js';
3
+ import type { Size } from './utils.js';
3
4
  declare class __sveltets_Render<Item> {
4
5
  props(): HTMLDivAttributes & {
5
6
  ref?: HTMLElement | null | undefined;
@@ -13,7 +14,9 @@ declare class __sveltets_Render<Item> {
13
14
  props: {
14
15
  style: string;
15
16
  };
16
- item: Item;
17
+ item: Item & {
18
+ size: Size;
19
+ };
17
20
  index: number;
18
21
  }]>;
19
22
  };
package/dist/lib/components/gallery/gallery.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"gallery.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/gallery/gallery.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAqB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAuE5E,cAAM,iBAAiB,CAAC,IAAI;IACxB,KAAK;;;;;;;;;;uBA5D6B,MAAM;;;mBAAuB,MAAM;;;IA+DrE,MAAM;IAGN,KAAK;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjZ,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACpI,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,OAAO,EAAE,qBAAmC,CAAC;AACjC,KAAK,OAAO,CAAC,IAAI,IAAI,YAAY,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1D,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"gallery.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/gallery/gallery.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAqB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAkEvC,cAAM,iBAAiB,CAAC,IAAI;IACxB,KAAK;;;;;;;;;;uBAxD6B,MAAM;;;sBAWP,IAAI;;mBAXkC,MAAM;;;IA2D7E,MAAM;IAGN,KAAK;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjZ,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACpI,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,OAAO,EAAE,qBAAmC,CAAC;AACjC,KAAK,OAAO,CAAC,IAAI,IAAI,YAAY,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1D,eAAe,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-ag",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "description": "Useful svelte components",
5
5
  "bugs": "https://github.com/ageorgeh/svelte-ag/issues",
6
6
  "repository": "ageorgeh/svelte-ag",
package/src/lib/components/dnd/dnd-sortable-context.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import type { Snippet } from 'svelte';
3
3
 
4
4
  export type SortableContextProps = {
5
- items: string[];
5
+ items: string[] | number[];
6
6
  children: Snippet<[]>;
7
7
  };
8
8
  </script>
package/src/lib/components/dnd/dnd-sortable-item.svelte CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
  const { attributes, listeners, node, activatorNode, transform, transition, isDragging, isSorting, isOver } =
52
52
  useSortable({
53
- id: () => item.id,
53
+ id: () => ('id' in item ? item.id : item.idx),
54
54
  data: () => ({
55
55
  type: box.with(
56
56
  () => type,
package/src/lib/components/dnd/sortable.svelte.ts CHANGED
@@ -25,14 +25,28 @@ export function onDragEnd({ active, over, dnd }: DragEndProps) {
25
25
  const overData = data(over);
26
26
  // Add this in as well accepts.includes(activeType)
27
27
 
28
+ console.log('Acitve/over', $state.snapshot(activeData), $state.snapshot(overData));
29
+ const usesId = 'id' in activeData.item.current;
30
+
28
31
  if (activeData.type.current === overData.type.current) {
29
32
  if (dnd.activeParent.id === overData.parent.current.id) {
30
33
  // Same containing list reorder
31
- const oldIndex = dnd.activeParent.children.findIndex((item) => item.id === active.id);
32
- const newIndex = overData.parent.current.children.findIndex((item) => item.id === over.id);
33
- // console.log('Drag end reorder', oldIndex, newIndex);
34
+ const oldIndex = usesId
35
+ ? dnd.activeParent.children.findIndex((item) => item.id === active.id)
36
+ : activeData.item.current.idx;
37
+
38
+ const newIndex = usesId
39
+ ? overData.parent.current.children.findIndex((item) => item.id === over.id)
40
+ : overData.item.current.idx;
41
+
42
+ console.log('Drag end reorder', oldIndex, newIndex);
34
43
 
35
44
  if (oldIndex !== newIndex) moveIndex(dnd.activeParent.children, oldIndex, newIndex);
45
+
46
+ // const arr = $state.snapshot(dnd.activeParent.children);
47
+ // const [item] = arr.splice(oldIndex, 1);
48
+ // arr.splice(newIndex, 0, item);
49
+ // activeData.parent.current.setChildren(arr);
36
50
  } else {
37
51
  // Move between containing lists
38
52
 
@@ -61,9 +75,12 @@ export function onDragOver({ active, over, dnd }: DragOverProps) {
61
75
  const activeData = data(active);
62
76
  const overData = data(over);
63
77
 
78
+ const usesId = 'id' in activeData.item.current;
79
+
64
80
  // add this accepts.includes(activeType)
65
81
 
66
- if (activeData.item.current.id === overData.item.current.id) return;
82
+ if (usesId && activeData.item.current.id === overData.item.current.id) return;
83
+
67
84
  if (activeData.type.current === overData.type.current) {
68
85
  if (dnd.activeParent.id === overData.parent.current.id) {
69
86
  // console.log('Same list dragover');
package/src/lib/components/dnd/utils.svelte.ts CHANGED
@@ -21,14 +21,14 @@ export function moveIndex<T>(arr: T[], from: number, to: number): void {
21
21
 
22
22
  export type DataType = {
23
23
  type: WritableBox<string>;
24
- item: WritableBox<{ id: string }>;
25
- parent: WritableBox<{ id: string; children: any[] }>;
24
+ item: WritableBox<{ id: string } | { idx: number }>;
25
+ parent: WritableBox<{ id: string; children: any[]; setChildren: (i: any[]) => void }>;
26
26
  };
27
27
 
28
28
  export type DataInputType = {
29
29
  type: string;
30
- item: { id: string };
31
- parent: { id: string; children: any[] };
30
+ item: { id: string } | { idx: number };
31
+ parent: { id: string; children: any[]; setChildren: (i: any[]) => void };
32
32
  };
33
33
 
34
34
  // See dnd-sortable-item.svelte for the input type for this data
package/src/lib/components/gallery/gallery.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  ...restProps
15
15
  }: WithElementRef<HTMLDivAttributes> & {
16
16
  images: { large: Item[]; medium: Item[]; small: Item[] };
17
- child: Snippet<[{ props: { style: string }; item: Item; index: number }]>;
17
+ child: Snippet<[{ props: { style: string }; item: ItemWithSize; index: number }]>;
18
18
  } = $props();
19
19
 
20
20
  type ItemWithSize = Item & { size: Size };
@@ -38,10 +38,6 @@
38
38
  let medium = $derived(images.medium.map((img) => ({ ...img, size: 'M' as Size })));
39
39
  let small = $derived(images.small.map((img) => ({ ...img, size: 'S' as Size })));
40
40
 
41
- // $effect.pre(() => {
42
- // allItems = packGrid($state.snapshot(small), $state.snapshot(medium), $state.snapshot(large), numCols);
43
- // });
44
-
45
41
  let allItems = $derived(
46
42
  packGrid($state.snapshot(small), $state.snapshot(medium), $state.snapshot(large), numCols)
47
43
  ) as ItemWithSize[];
@@ -53,9 +49,9 @@
53
49
  bind:this={ref}
54
50
  class={cn(
55
51
  `
56
- grid grid-cols-2 gap-2
57
52
  @vsm:grid-cols-3
58
53
  @vmd:grid-cols-4
54
+ grid grid-cols-2 gap-2
59
55
  `,
60
56
  className
61
57
  )}