svelte-bricks 0.2.1 → 0.3.1

package/dist/Masonry.svelte

@@ -1,57 +1,37 @@
-<script>import { flip } from 'svelte/animate';
+<script lang="ts">import { flip } from 'svelte/animate';
 import { fade } from 'svelte/transition';
-export let animate = true;
-export { className as class };
-export let columnClass = ``;
-export let duration = 200;
-export let gap = 20;
-// On non-primitive types, we need a property to tell masonry items apart. This component
-// hard-codes the name of this property to 'id'. See https://svelte.dev/tutorial/keyed-each-blocks.
-export let getId = (item) => {
+let { animate = true, calcCols = (masonryWidth, minColWidth, gap) => {
+    return Math.min(items.length, Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1);
+}, columnClass = ``, duration = 200, gap = 20, getId = (item) => {
     if (typeof item === `number`)
         return item;
     if (typeof item === `string`)
         return item;
     return item[idKey];
-};
-export let idKey = `id`;
-export let items;
-export let masonryHeight = 0;
-export let masonryWidth = 0;
-export let maxColWidth = 500;
-export let minColWidth = 330;
-export let style = ``;
-let className = ``;
-$: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
-$: itemsToCols = items.reduce((cols, item, idx) => {
+}, 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
+ } = $props();
+$effect.pre(() => {
+    if (maxColWidth < minColWidth) {
+        console.warn(`svelte-bricks: maxColWidth (${maxColWidth}) < minColWidth (${minColWidth}).`);
+    }
+});
+let nCols = $derived(calcCols(masonryWidth, minColWidth, gap));
+let itemsToCols = $derived(items.reduce((cols, item, idx) => {
     cols[idx % cols.length].push([item, idx]);
     return cols;
-}, Array(nCols).fill(null).map(() => []) // prettier-ignore
-);
+}, Array(nCols).fill(null).map(() => [])));
 </script>
-<style>
-  :where(div.masonry) {
-    display: flex;
-    justify-content: center;
-    overflow-wrap: anywhere;
-    box-sizing: border-box;
-  }
-  :where(div.masonry div.col) {
-    display: grid;
-    height: max-content;
-    width: 100%;
-  }
-</style>
-
 
+<!-- deno-fmt-ignore -->
 <div
   class="masonry {className}"
   bind:clientWidth={masonryWidth}
   bind:clientHeight={masonryHeight}
+  bind:this={div}
   style="gap: {gap}px; {style}"
 >
-  {#each itemsToCols as col}
-    <div class="col {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
+  {#each itemsToCols as col, idx}
+    <div class="col col-{idx} {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
       {#if animate}
         {#each col as [item, idx] (getId(item))}
           <div
@@ -59,19 +39,32 @@ $: itemsToCols = items.reduce((cols, item, idx) => {
             out:fade={{ delay: 0, duration }}
             animate:flip={{ duration }}
           >
-            <slot {idx} {item}>
+            {#if children}{@render children({ idx, item })}{:else}
               <span>{item}</span>
-            </slot>
+            {/if}
           </div>
         {/each}
       {:else}
         {#each col as [item, idx] (getId(item))}
-          <slot {idx} {item}>
+          {#if children}{@render children({ idx, item })}{:else}
             <span>{item}</span>
-          </slot>
+          {/if}
         {/each}
       {/if}
     </div>
   {/each}
 </div>
 
+<style>
+  :where(div.masonry) {
+    display: flex;
+    justify-content: center;
+    overflow-wrap: anywhere;
+    box-sizing: border-box;
+  }
+  :where(div.masonry div.col) {
+    display: grid;
+    height: max-content;
+    width: 100%;
+  }
+</style>

package/dist/Masonry.svelte.d.ts

@@ -1,33 +1,38 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 declare class __sveltets_Render<Item> {
     props(): {
-        animate?: boolean | undefined;
-        class?: string | undefined;
-        columnClass?: string | undefined;
-        duration?: number | undefined;
-        gap?: number | undefined;
-        getId?: ((item: Item) => string | number) | undefined;
-        idKey?: string | undefined;
+        animate?: boolean;
+        calcCols?: (masonryWidth: number, minColWidth: number, gap: number) => number;
+        columnClass?: string;
+        duration?: number;
+        gap?: number;
+        getId?: (item: Item) => string | number;
+        idKey?: string;
         items: Item[];
-        masonryHeight?: number | undefined;
-        masonryWidth?: number | undefined;
-        maxColWidth?: number | undefined;
-        minColWidth?: number | undefined;
-        style?: string | undefined;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {
+        masonryHeight?: number;
+        masonryWidth?: number;
+        maxColWidth?: number;
+        minColWidth?: number;
+        style?: string;
+        class?: string;
+        children?: Snippet<[{
             idx: number;
             item: Item;
-        };
+        }]>;
+        div?: HTMLDivElement;
     };
+    events(): {};
+    slots(): {};
+    bindings(): "div" | "masonryHeight" | "masonryWidth";
+    exports(): {};
 }
-export type MasonryProps<Item> = ReturnType<__sveltets_Render<Item>['props']>;
-export type MasonryEvents<Item> = ReturnType<__sveltets_Render<Item>['events']>;
-export type MasonrySlots<Item> = ReturnType<__sveltets_Render<Item>['slots']>;
-export default class Masonry<Item> extends SvelteComponent<MasonryProps<Item>, MasonryEvents<Item>, MasonrySlots<Item>> {
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-export {};
+declare const Masonry: $$IsomorphicComponent;
+type Masonry<Item> = InstanceType<typeof Masonry<Item>>;
+export default Masonry;

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-bricks",
   "repository": "https://github.com/janosh/svelte-bricks",
   "license": "MIT",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-bricks/issues",
@@ -20,28 +20,21 @@
     "changelog": "npx auto-changelog --package --output changelog.md --hide-credit --commit-limit false"
   },
   "dependencies": {
-    "svelte": "^4.2.1"
+    "svelte": "^5.22.6"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.25.0",
-    "@sveltejs/package": "^2.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "eslint": "^8.49.0",
-    "eslint-plugin-svelte": "^2.33.2",
-    "jsdom": "^22.1.0",
-    "mdsvex": "^0.11.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "svelte-check": "^3.5.2",
-    "svelte-preprocess": "^5.0.4",
-    "svelte-toc": "^0.5.6",
-    "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.22",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.5"
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.19.0",
+    "@sveltejs/package": "^2.3.10",
+    "jsdom": "^26.0.0",
+    "mdsvex": "^0.12.3",
+    "svelte-check": "^4.1.5",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-toc": "^0.5.9",
+    "svelte-zoo": "^0.4.16",
+    "svelte2tsx": "^0.7.35",
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -33,26 +33,27 @@ The kitchen sink for this component looks something like this:
 <script>
   import Masonry from 'svelte-bricks'
 
-  let nItems = 30
-  $: items = [...Array(nItems).keys()]
+  let nItems = $state(30);
+  let items = $derived([...Array(nItems).keys()])
 
   let [minColWidth, maxColWidth, gap] = [200, 800, 20]
-  let width, height
+  let width = $state(0), height = $state(0)
 </script>
 
-Masonry size: <span>{width}px</span> &times; <span>{height}px</span> (w &times;
-h)
+Masonry size: <span>{width}px</span> &times; <span>{height}px</span> (w &times; h)
 
 <Masonry
   {items}
   {minColWidth}
   {maxColWidth}
   {gap}
-  let:item
+
   bind:masonryWidth={width}
   bind:masonryHeight={height}
 >
-  <Some {item} />
+  {#snippet children({ item })}
+    <Some {item} />
+  {/snippet}
 </Masonry>
 ```
 
@@ -72,6 +73,21 @@ Additional optional props are:
 
    Whether to [FLIP-animate](https://svelte.dev/tutorial/animate) masonry items when viewport resizing or other events cause `items` to rearrange.
 
+1. ```ts
+   calcCols = (
+     masonryWidth: number,
+     minColWidth: number,
+     gap: number,
+   ): number => {
+     return Math.min(
+       items.length,
+       Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1,
+     )
+   }
+   ```
+
+   Function used to compute the number of columns based on the masonry width, minimum column width and gap.
+
 1. ```ts
    class: string = ``
    ```