svelte-bricks 0.2.0 → 0.3.0

package/dist/Masonry.svelte

@@ -1,48 +1,26 @@
-<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>
-
-<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, } = $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>
+
 <div
   class="masonry {className}"
   bind:clientWidth={masonryWidth}
@@ -54,23 +32,36 @@ $: itemsToCols = items.reduce((cols, item, idx) => {
       {#if animate}
         {#each col as [item, idx] (getId(item))}
           <div
-            in:fade|local={{ delay: 100, duration }}
-            out:fade|local={{ delay: 0, duration }}
+            in:fade={{ delay: 100, duration }}
+            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,34 @@
-import { SvelteComponentTyped } 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;
+        animate?: boolean;
+        calcCols?: ((masonryWidth: number, minColWidth: number, gap: number) => number) | undefined;
+        columnClass?: string;
+        duration?: number;
+        gap?: number;
         getId?: ((item: Item) => string | number) | undefined;
-        idKey?: string | undefined;
+        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: {
-            idx: number;
-            item: Item;
-        };
+        masonryHeight?: number;
+        masonryWidth?: number;
+        maxColWidth?: number;
+        minColWidth?: number;
+        style?: string;
+        class?: string;
+        children?: Snippet;
     };
+    events(): {};
+    slots(): {};
+    bindings(): "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 SvelteComponentTyped<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.0",
+  "version": "0.3.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-bricks/issues",
@@ -20,28 +20,30 @@
     "changelog": "npx auto-changelog --package --output changelog.md --hide-credit --commit-limit false"
   },
   "dependencies": {
-    "svelte": "^3.57.0"
+    "svelte": "^5.20.1"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.13.0",
-    "@sveltejs/package": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
-    "eslint": "^8.36.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "jsdom": "^21.1.1",
-    "mdsvex": "^0.10.6",
-    "prettier": "^2.8.6",
-    "prettier-plugin-svelte": "^2.10.0",
-    "svelte-check": "^3.1.4",
-    "svelte-preprocess": "^5.0.3",
-    "svelte-toc": "^0.5.4",
-    "svelte-zoo": "^0.4.3",
-    "svelte2tsx": "^0.6.10",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vitest": "^0.29.7"
+    "@stylistic/eslint-plugin": "^3.1.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.17.2",
+    "@sveltejs/package": "^2.3.10",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
+    "eslint": "^9.20.1",
+    "eslint-plugin-svelte": "^2.46.1",
+    "jsdom": "^26.0.0",
+    "mdsvex": "^0.12.3",
+    "prettier": "^3.5.1",
+    "prettier-plugin-svelte": "^3.3.3",
+    "svelte-check": "^4.1.4",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-toc": "^0.5.9",
+    "svelte-zoo": "^0.4.16",
+    "svelte2tsx": "^0.7.34",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.1.0",
+    "vitest": "^3.0.5"
   },
   "keywords": [
     "svelte",
@@ -64,6 +66,7 @@
       "default": "./dist/index.js"
     }
   },
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ]

package/readme.md

@@ -49,8 +49,8 @@ h)
   {maxColWidth}
   {gap}
   let:item
-  bind:width
-  bind:height
+  bind:masonryWidth={width}
+  bind:masonryHeight={height}
 >
   <Some {item} />
 </Masonry>
@@ -72,6 +72,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 = ``
    ```