svelte-bricks 0.3.0 → 0.3.1

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 (4) hide show
  1. package/dist/Masonry.svelte +6 -3
  2. package/dist/Masonry.svelte.d.ts +8 -4
  3. package/package.json +7 -16
  4. package/readme.md +8 -7
package/dist/Masonry.svelte CHANGED
@@ -8,7 +8,8 @@ let { animate = true, calcCols = (masonryWidth, minColWidth, gap) => {
8
8
  if (typeof item === `string`)
9
9
  return item;
10
10
  return item[idKey];
11
- }, idKey = `id`, items, masonryHeight = $bindable(0), masonryWidth = $bindable(0), maxColWidth = 500, minColWidth = 330, style = ``, class: className = ``, children, } = $props();
11
+ }, idKey = `id`, items, masonryHeight = $bindable(0), masonryWidth = $bindable(0), maxColWidth = 500, minColWidth = 330, style = ``, class: className = ``, children, div = $bindable(undefined), // TODO add unit test for this prop
12
+ } = $props();
12
13
  $effect.pre(() => {
13
14
  if (maxColWidth < minColWidth) {
14
15
  console.warn(`svelte-bricks: maxColWidth (${maxColWidth}) < minColWidth (${minColWidth}).`);
@@ -21,14 +22,16 @@ let itemsToCols = $derived(items.reduce((cols, item, idx) => {
21
22
  }, Array(nCols).fill(null).map(() => [])));
22
23
  </script>
23
24
 
25
+ <!-- deno-fmt-ignore -->
24
26
  <div
25
27
  class="masonry {className}"
26
28
  bind:clientWidth={masonryWidth}
27
29
  bind:clientHeight={masonryHeight}
30
+ bind:this={div}
28
31
  style="gap: {gap}px; {style}"
29
32
  >
30
- {#each itemsToCols as col}
31
- <div class="col {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
33
+ {#each itemsToCols as col, idx}
34
+ <div class="col col-{idx} {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
32
35
  {#if animate}
33
36
  {#each col as [item, idx] (getId(item))}
34
37
  <div
package/dist/Masonry.svelte.d.ts CHANGED
@@ -2,11 +2,11 @@ import type { Snippet } from 'svelte';
2
2
  declare class __sveltets_Render<Item> {
3
3
  props(): {
4
4
  animate?: boolean;
5
- calcCols?: ((masonryWidth: number, minColWidth: number, gap: number) => number) | undefined;
5
+ calcCols?: (masonryWidth: number, minColWidth: number, gap: number) => number;
6
6
  columnClass?: string;
7
7
  duration?: number;
8
8
  gap?: number;
9
- getId?: ((item: Item) => string | number) | undefined;
9
+ getId?: (item: Item) => string | number;
10
10
  idKey?: string;
11
11
  items: Item[];
12
12
  masonryHeight?: number;
@@ -15,11 +15,15 @@ declare class __sveltets_Render<Item> {
15
15
  minColWidth?: number;
16
16
  style?: string;
17
17
  class?: string;
18
- children?: Snippet;
18
+ children?: Snippet<[{
19
+ idx: number;
20
+ item: Item;
21
+ }]>;
22
+ div?: HTMLDivElement;
19
23
  };
20
24
  events(): {};
21
25
  slots(): {};
22
- bindings(): "masonryHeight" | "masonryWidth";
26
+ bindings(): "div" | "masonryHeight" | "masonryWidth";
23
27
  exports(): {};
24
28
  }
25
29
  interface $$IsomorphicComponent {
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "homepage": "https://janosh.github.io/svelte-bricks",
6
6
  "repository": "https://github.com/janosh/svelte-bricks",
7
7
  "license": "MIT",
8
- "version": "0.3.0",
8
+ "version": "0.3.1",
9
9
  "type": "module",
10
10
  "svelte": "./dist/index.js",
11
11
  "bugs": "https://github.com/janosh/svelte-bricks/issues",
@@ -20,30 +20,21 @@
20
20
  "changelog": "npx auto-changelog --package --output changelog.md --hide-credit --commit-limit false"
21
21
  },
22
22
  "dependencies": {
23
- "svelte": "^5.20.1"
23
+ "svelte": "^5.22.6"
24
24
  },
25
25
  "devDependencies": {
26
- "@stylistic/eslint-plugin": "^3.1.0",
27
26
  "@sveltejs/adapter-static": "^3.0.8",
28
- "@sveltejs/kit": "^2.17.2",
27
+ "@sveltejs/kit": "^2.19.0",
29
28
  "@sveltejs/package": "^2.3.10",
30
- "@typescript-eslint/eslint-plugin": "^8.24.0",
31
- "@typescript-eslint/parser": "^8.24.0",
32
- "eslint": "^9.20.1",
33
- "eslint-plugin-svelte": "^2.46.1",
34
29
  "jsdom": "^26.0.0",
35
30
  "mdsvex": "^0.12.3",
36
- "prettier": "^3.5.1",
37
- "prettier-plugin-svelte": "^3.3.3",
38
- "svelte-check": "^4.1.4",
31
+ "svelte-check": "^4.1.5",
39
32
  "svelte-preprocess": "^6.0.3",
40
33
  "svelte-toc": "^0.5.9",
41
34
  "svelte-zoo": "^0.4.16",
42
- "svelte2tsx": "^0.7.34",
43
- "typescript": "^5.7.3",
44
- "typescript-eslint": "^8.24.0",
45
- "vite": "^6.1.0",
46
- "vitest": "^3.0.5"
35
+ "svelte2tsx": "^0.7.35",
36
+ "vite": "^6.2.1",
37
+ "vitest": "^3.0.8"
47
38
  },
48
39
  "keywords": [
49
40
  "svelte",
package/readme.md CHANGED
@@ -33,26 +33,27 @@ The kitchen sink for this component looks something like this:
33
33
  <script>
34
34
  import Masonry from 'svelte-bricks'
35
35
 
36
- let nItems = 30
37
- $: items = [...Array(nItems).keys()]
36
+ let nItems = $state(30);
37
+ let items = $derived([...Array(nItems).keys()])
38
38
 
39
39
  let [minColWidth, maxColWidth, gap] = [200, 800, 20]
40
- let width, height
40
+ let width = $state(0), height = $state(0)
41
41
  </script>
42
42
 
43
- Masonry size: <span>{width}px</span> &times; <span>{height}px</span> (w &times;
44
- h)
43
+ Masonry size: <span>{width}px</span> &times; <span>{height}px</span> (w &times; h)
45
44
 
46
45
  <Masonry
47
46
  {items}
48
47
  {minColWidth}
49
48
  {maxColWidth}
50
49
  {gap}
51
- let:item
50
+
52
51
  bind:masonryWidth={width}
53
52
  bind:masonryHeight={height}
54
53
  >
55
- <Some {item} />
54
+ {#snippet children({ item })}
55
+ <Some {item} />
56
+ {/snippet}
56
57
  </Masonry>
57
58
  ```
58
59