svelte-bricks 0.1.4 → 0.1.7

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/Masonry.svelte +25 -33
  2. package/Masonry.svelte.d.ts +16 -15
  3. package/package.json +18 -16
  4. package/readme.md +8 -1
package/Masonry.svelte CHANGED
@@ -12,8 +12,8 @@
12
12
  }
13
13
  </style>
14
14
 
15
- <script >import { flip } from 'svelte/animate';
16
- import { crossfade } from 'svelte/transition';
15
+ <script>import { flip } from 'svelte/animate';
16
+ import { fade } from 'svelte/transition';
17
17
  export let items;
18
18
  export let minColWidth = 330;
19
19
  export let maxColWidth = 500;
@@ -22,55 +22,47 @@ export let masonryWidth = 0;
22
22
  export let masonryHeight = 0;
23
23
  export let animate = true;
24
24
  export let style = ``;
25
- const [send, receive] = crossfade({
26
- duration: (d) => Math.sqrt(d * 200),
27
- fallback(node) {
28
- const style = getComputedStyle(node);
29
- const transform = style.transform === `none` ? `` : style.transform;
30
- return {
31
- duration: 500,
32
- css: (t) => `
33
- transform: ${transform} scale(${t});
34
- opacity: ${t}
35
- `,
36
- };
37
- },
38
- });
39
- $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
40
- $: itemsToCols = items.reduce((cols, item, idx) => {
41
- cols[idx % cols.length].push([item, idx]);
42
- return cols;
43
- }, Array(nCols)
44
- .fill(null)
45
- .map(() => []));
46
- function getId(item) {
25
+ export let duration = 200;
26
+ export { className as class };
27
+ export let columnClass = ``;
28
+ // On non-primitive types, we need a property to tell masonry items apart. This component
29
+ // hard-codes the name of this property to 'id'. See https://svelte.dev/tutorial/keyed-each-blocks.
30
+ export let idKey = `id`;
31
+ export let getId = (item) => {
47
32
  if (typeof item === `string`)
48
33
  return item;
49
34
  if (typeof item === `number`)
50
35
  return item;
51
- return item.id;
52
- }
36
+ return item[idKey];
37
+ };
38
+ let className = ``;
39
+ $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
40
+ $: itemsToCols = items.reduce((cols, item, idx) => {
41
+ cols[idx % cols.length].push([item, idx]);
42
+ return cols;
43
+ }, Array(nCols).fill(null).map(() => []) // prettier-ignore
44
+ );
53
45
  </script>
54
46
  <div
55
- class="masonry"
47
+ class="masonry {className}"
56
48
  bind:clientWidth={masonryWidth}
57
49
  bind:clientHeight={masonryHeight}
58
50
  style="gap: {gap}px; {style}"
59
51
  >
60
52
  {#each itemsToCols as col}
61
- <div class="col" style="gap: {gap}px; max-width: {maxColWidth}px;">
53
+ <div class="col {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
62
54
  {#if animate}
63
- {#each col as [item, idx] (getId(item) || idx)}
55
+ {#each col as [item, idx] (getId(item))}
64
56
  <div
65
- in:receive|local={{ key: getId(item) || idx }}
66
- out:send|local={{ key: getId(item) || idx }}
67
- animate:flip={{ duration: 200 }}
57
+ in:fade|local={{ delay: 100, duration }}
58
+ out:fade|local={{ delay: 0, duration }}
59
+ animate:flip={{ duration }}
68
60
  >
69
61
  <slot {idx} {item} />
70
62
  </div>
71
63
  {/each}
72
64
  {:else}
73
- {#each col as [item, idx] (getId(item) || idx)}
65
+ {#each col as [item, idx] (getId(item))}
74
66
  <slot {idx} {item} />
75
67
  {/each}
76
68
  {/if}
package/Masonry.svelte.d.ts CHANGED
@@ -1,9 +1,7 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- items: (string | number | {
5
- id: string | number;
6
- })[];
2
+ declare class __sveltets_Render<Item> {
3
+ props(): {
4
+ items: Item[];
7
5
  minColWidth?: number | undefined;
8
6
  maxColWidth?: number | undefined;
9
7
  gap?: number | undefined;
@@ -11,22 +9,25 @@ declare const __propDef: {
11
9
  masonryHeight?: number | undefined;
12
10
  animate?: boolean | undefined;
13
11
  style?: string | undefined;
12
+ duration?: number | undefined;
13
+ class?: string | undefined;
14
+ columnClass?: string | undefined;
15
+ idKey?: string | undefined;
16
+ getId?: ((item: Item) => unknown) | undefined;
14
17
  };
15
- events: {
18
+ events(): {} & {
16
19
  [evt: string]: CustomEvent<any>;
17
20
  };
18
- slots: {
21
+ slots(): {
19
22
  default: {
20
23
  idx: number;
21
- item: string | number | {
22
- id: string | number;
23
- };
24
+ item: Item;
24
25
  };
25
26
  };
26
- };
27
- export declare type MasonryProps = typeof __propDef.props;
28
- export declare type MasonryEvents = typeof __propDef.events;
29
- export declare type MasonrySlots = typeof __propDef.slots;
30
- export default class Masonry extends SvelteComponentTyped<MasonryProps, MasonryEvents, MasonrySlots> {
27
+ }
28
+ export declare type MasonryProps<Item> = ReturnType<__sveltets_Render<Item>['props']>;
29
+ export declare type MasonryEvents<Item> = ReturnType<__sveltets_Render<Item>['events']>;
30
+ export declare type MasonrySlots<Item> = ReturnType<__sveltets_Render<Item>['slots']>;
31
+ export default class Masonry<Item> extends SvelteComponentTyped<MasonryProps<Item>, MasonryEvents<Item>, MasonrySlots<Item>> {
31
32
  }
32
33
  export {};
package/package.json CHANGED
@@ -5,27 +5,29 @@
5
5
  "homepage": "https://svelte-bricks.netlify.app",
6
6
  "repository": "https://github.com/janosh/svelte-bricks",
7
7
  "license": "MIT",
8
- "version": "0.1.4",
8
+ "version": "0.1.7",
9
9
  "type": "module",
10
10
  "svelte": "Masonry.svelte",
11
11
  "bugs": "https://github.com/janosh/svelte-bricks/issues",
12
12
  "devDependencies": {
13
- "@sveltejs/adapter-static": "^1.0.0-next.26",
14
- "@sveltejs/kit": "^1.0.0-next.232",
15
- "@typescript-eslint/eslint-plugin": "^5.9.1",
16
- "@typescript-eslint/parser": "^5.9.1",
17
- "eslint": "^8.7.0",
18
- "eslint-plugin-svelte3": "^3.4.0",
19
- "mdsvex": "^0.9.8",
20
- "prettier": "^2.5.1",
21
- "prettier-plugin-svelte": "^2.6.0",
22
- "svelte": "^3.46.2",
23
- "svelte-check": "^2.3.0",
13
+ "@sveltejs/adapter-static": "^1.0.0-next.29",
14
+ "@sveltejs/kit": "^1.0.0-next.326",
15
+ "@typescript-eslint/eslint-plugin": "^5.23.0",
16
+ "@typescript-eslint/parser": "^5.23.0",
17
+ "eslint": "^8.15.0",
18
+ "eslint-plugin-svelte3": "^4.0.0",
19
+ "jsdom": "^19.0.0",
20
+ "mdsvex": "^0.10.5",
21
+ "prettier": "^2.6.2",
22
+ "prettier-plugin-svelte": "^2.7.0",
23
+ "svelte": "^3.48.0",
24
+ "svelte-check": "^2.7.0",
24
25
  "svelte-github-corner": "^0.1.0",
25
- "svelte-preprocess": "^4.10.1",
26
- "svelte2tsx": "^0.4.14",
27
- "typescript": "^4.5.4",
28
- "vite": "^2.7.12"
26
+ "svelte-preprocess": "^4.10.6",
27
+ "svelte2tsx": "^0.5.9",
28
+ "typescript": "^4.6.4",
29
+ "vite": "^2.9.8",
30
+ "vitest": "^0.12.3"
29
31
  },
30
32
  "keywords": [
31
33
  "svelte",
package/readme.md CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  <h4 align="center">
9
9
 
10
+ [![Tests](https://github.com/janosh/svelte-bricks/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-bricks/actions/workflows/test.yml)
10
11
  [![NPM version](https://img.shields.io/npm/v/svelte-bricks?color=blue&logo=NPM)](https://npmjs.com/package/svelte-bricks)
11
12
  [![Netlify Status](https://api.netlify.com/api/v1/badges/c3213069-e3cc-45ef-a446-b2358b9a35fb/deploy-status)](https://app.netlify.com/sites/svelte-bricks/deploys)
12
13
  [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/svelte-bricks/main.svg)](https://results.pre-commit.ci/latest/github/janosh/svelte-bricks/main)
@@ -56,7 +57,7 @@ h)
56
57
  </Masonry>
57
58
  ```
58
59
 
59
- **Note**: On non-primitive types, i.e. if `items` is an array of objects, this component requires that each object have a key named `'id'` that contains a unique primitive value. This value is used to identify each item in the keyed `{#each}` block that renders the masonry layout. Without this, Svelte could not avoid duplicates when new items are added nor maintain order when existing ones are rearranged. Read the [Svelte docs](https://svelte.dev/tutorial/keyed-each-blocks) for details.
60
+ **Note**: On non-primitive items, i.e. if `items` is an array of objects, this component by default tries to access a key named `'id'` on each item. This value is used to tell items apart in the keyed `{#each}` block that renders the masonry layout. Without it, Svelte could not avoid duplicates when new items are added or existing ones rearranged. Read the [Svelte docs](https://svelte.dev/tutorial/keyed-each-blocks) for details. To change the name of the identifier key, use the `idKey` prop. You can also pass in a custom function as `getId` that should map items to unique IDs.
60
61
 
61
62
  **Hint**: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.
62
63
 
@@ -66,13 +67,19 @@ h)
66
67
 
67
68
  Additional optional props are:
68
69
 
70
+ - `items: (string | number | object)[]`: required
69
71
  - `minColWidth: number = 330` (in `px`)
70
72
  - `maxColWidth: number = 500` (in `px`)
71
73
  - `gap: number = 20` (in `px`)
72
74
  - `masonryWidth: number = 0`: Bound to the masonry `div`s width (in `px`).
73
75
  - `masonryHeight: number = 0`: Bound to the masonry `div`s height (in `px`).
76
+ - `idKey: string = 'id'`: Name of the attribute to use as identifier if items are objects.
77
+ - `getId: (item) => string | number`: Custom function that maps masonry items to unique IDs.
74
78
  - `animate: boolean = true`: Whether to [FLIP-animate](https://svelte.dev/tutorial/animate) masonry items when viewport resizing or other events cause `items` to rearrange.
75
79
  - `style: string = ''`: Inline styles that will be applied to the top-level `div.masonry`.
80
+ - `duration: number = 200`: Transition duration in milli seconds when masonry items are rearranged or added/removed. Set to 0 to disable transitions.
81
+ - `class: string = ''`: Applies to the outer `div` wrapping all masonry columns. For use with CSS frameworks like Tailwind.
82
+ - `columnClass: string = ''`: Applies to each column `div`.
76
83
 
77
84
  ## Styling
78
85