svelte-bricks 0.1.4 → 0.1.5

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 +5 -18
  2. package/Masonry.svelte.d.ts +1 -0
  3. package/package.json +16 -14
  4. package/readme.md +3 -0
package/Masonry.svelte CHANGED
@@ -13,7 +13,7 @@
13
13
  </style>
14
14
 
15
15
  <script >import { flip } from 'svelte/animate';
16
- import { crossfade } from 'svelte/transition';
16
+ import { fade } from 'svelte/transition';
17
17
  export let items;
18
18
  export let minColWidth = 330;
19
19
  export let maxColWidth = 500;
@@ -22,20 +22,7 @@ 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
- });
25
+ export let duration = 200;
39
26
  $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
40
27
  $: itemsToCols = items.reduce((cols, item, idx) => {
41
28
  cols[idx % cols.length].push([item, idx]);
@@ -62,9 +49,9 @@ function getId(item) {
62
49
  {#if animate}
63
50
  {#each col as [item, idx] (getId(item) || idx)}
64
51
  <div
65
- in:receive|local={{ key: getId(item) || idx }}
66
- out:send|local={{ key: getId(item) || idx }}
67
- animate:flip={{ duration: 200 }}
52
+ in:fade|local={{ delay: 100, duration }}
53
+ out:fade|local={{ delay: 0, duration }}
54
+ animate:flip={{ duration }}
68
55
  >
69
56
  <slot {idx} {item} />
70
57
  </div>
package/Masonry.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  masonryHeight?: number | undefined;
12
12
  animate?: boolean | undefined;
13
13
  style?: string | undefined;
14
+ duration?: number | undefined;
14
15
  };
15
16
  events: {
16
17
  [evt: string]: CustomEvent<any>;
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.5",
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",
13
+ "@sveltejs/adapter-static": "^1.0.0-next.28",
14
+ "@sveltejs/kit": "^1.0.0-next.291",
15
+ "@typescript-eslint/eslint-plugin": "^5.13.0",
16
+ "@typescript-eslint/parser": "^5.13.0",
17
+ "eslint": "^8.10.0",
18
+ "eslint-plugin-svelte3": "^3.4.1",
19
+ "jsdom": "^19.0.0",
20
+ "mdsvex": "^0.10.5",
20
21
  "prettier": "^2.5.1",
21
22
  "prettier-plugin-svelte": "^2.6.0",
22
- "svelte": "^3.46.2",
23
- "svelte-check": "^2.3.0",
23
+ "svelte": "^3.46.4",
24
+ "svelte-check": "^2.4.5",
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.4",
27
+ "svelte2tsx": "^0.5.5",
28
+ "typescript": "^4.6.2",
29
+ "vite": "^2.8.6",
30
+ "vitest": "^0.5.9"
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)
@@ -66,6 +67,7 @@ h)
66
67
 
67
68
  Additional optional props are:
68
69
 
70
+ - `items: any[]`: required
69
71
  - `minColWidth: number = 330` (in `px`)
70
72
  - `maxColWidth: number = 500` (in `px`)
71
73
  - `gap: number = 20` (in `px`)
@@ -73,6 +75,7 @@ Additional optional props are:
73
75
  - `masonryHeight: number = 0`: Bound to the masonry `div`s height (in `px`).
74
76
  - `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
77
  - `style: string = ''`: Inline styles that will be applied to the top-level `div.masonry`.
78
+ - `duration: number = 200`: Transition duration in milli seconds when masonry items are rearranged or added/removed. Set to 0 to disable transitions.
76
79
 
77
80
  ## Styling
78
81