svelte-bricks 0.1.2 → 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 (6) hide show
  1. package/Masonry.svelte +24 -34
  2. package/Masonry.svelte.d.ts +2 -0
  3. package/index.d.ts +1 -0
  4. package/index.js +1 -0
  5. package/package.json +22 -20
  6. package/readme.md +33 -6
package/Masonry.svelte CHANGED
@@ -1,5 +1,19 @@
1
- <script >import { crossfade } from 'svelte/transition';
2
- import { flip } from 'svelte/animate';
1
+ <style>
2
+ :where(div.masonry) {
3
+ display: flex;
4
+ justify-content: center;
5
+ overflow-wrap: anywhere;
6
+ box-sizing: border-box;
7
+ }
8
+ :where(div.masonry div.col) {
9
+ display: grid;
10
+ height: max-content;
11
+ width: 100%;
12
+ }
13
+ </style>
14
+
15
+ <script >import { flip } from 'svelte/animate';
16
+ import { fade } from 'svelte/transition';
3
17
  export let items;
4
18
  export let minColWidth = 330;
5
19
  export let maxColWidth = 500;
@@ -7,20 +21,8 @@ export let gap = 20;
7
21
  export let masonryWidth = 0;
8
22
  export let masonryHeight = 0;
9
23
  export let animate = true;
10
- const [send, receive] = crossfade({
11
- duration: (d) => Math.sqrt(d * 200),
12
- fallback(node) {
13
- const style = getComputedStyle(node);
14
- const transform = style.transform === `none` ? `` : style.transform;
15
- return {
16
- duration: 500,
17
- css: (t) => `
18
- transform: ${transform} scale(${t});
19
- opacity: ${t}
20
- `,
21
- };
22
- },
23
- });
24
+ export let style = ``;
25
+ export let duration = 200;
24
26
  $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
25
27
  $: itemsToCols = items.reduce((cols, item, idx) => {
26
28
  cols[idx % cols.length].push([item, idx]);
@@ -36,20 +38,21 @@ function getId(item) {
36
38
  return item.id;
37
39
  }
38
40
  </script>
39
-
40
41
  <div
41
42
  class="masonry"
42
43
  bind:clientWidth={masonryWidth}
43
44
  bind:clientHeight={masonryHeight}
44
- style="gap: {gap}px;">
45
+ style="gap: {gap}px; {style}"
46
+ >
45
47
  {#each itemsToCols as col}
46
48
  <div class="col" style="gap: {gap}px; max-width: {maxColWidth}px;">
47
49
  {#if animate}
48
50
  {#each col as [item, idx] (getId(item) || idx)}
49
51
  <div
50
- in:receive={{ key: getId(item) || idx }}
51
- out:send={{ key: getId(item) || idx }}
52
- animate:flip={{ duration: 200 }}>
52
+ in:fade|local={{ delay: 100, duration }}
53
+ out:fade|local={{ delay: 0, duration }}
54
+ animate:flip={{ duration }}
55
+ >
53
56
  <slot {idx} {item} />
54
57
  </div>
55
58
  {/each}
@@ -62,16 +65,3 @@ function getId(item) {
62
65
  {/each}
63
66
  </div>
64
67
 
65
- <style>
66
- .masonry {
67
- display: flex;
68
- justify-content: center;
69
- overflow-wrap: anywhere;
70
- box-sizing: border-box;
71
- }
72
- .col {
73
- display: grid;
74
- height: max-content;
75
- width: 100%;
76
- }
77
- </style>
package/Masonry.svelte.d.ts CHANGED
@@ -10,6 +10,8 @@ declare const __propDef: {
10
10
  masonryWidth?: number | undefined;
11
11
  masonryHeight?: number | undefined;
12
12
  animate?: boolean | undefined;
13
+ style?: string | undefined;
14
+ duration?: number | undefined;
13
15
  };
14
16
  events: {
15
17
  [evt: string]: CustomEvent<any>;
package/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './Masonry.svelte';
package/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './Masonry.svelte';
package/package.json CHANGED
@@ -5,28 +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.2",
8
+ "version": "0.1.5",
9
9
  "type": "module",
10
10
  "svelte": "Masonry.svelte",
11
- "bugs": {
12
- "url": "https://github.com/janosh/svelte-bricks/issues"
13
- },
11
+ "bugs": "https://github.com/janosh/svelte-bricks/issues",
14
12
  "devDependencies": {
15
- "@sveltejs/adapter-static": "^1.0.0-next.21",
16
- "@sveltejs/kit": "^1.0.0-next.187",
17
- "@typescript-eslint/eslint-plugin": "^5.1.0",
18
- "@typescript-eslint/parser": "^5.1.0",
19
- "eslint": "^8.0.1",
20
- "eslint-plugin-svelte3": "^3.2.1",
21
- "mdsvex": "^0.9.8",
22
- "prettier": "^2.4.1",
23
- "prettier-plugin-svelte": "^2.4.0",
24
- "svelte": "^3.44.0",
25
- "svelte-check": "^2.2.7",
26
- "svelte-preprocess": "^4.9.8",
27
- "svelte2tsx": "^0.4.7",
28
- "typescript": "^4.4.4",
29
- "vite": "^2.6.10"
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",
21
+ "prettier": "^2.5.1",
22
+ "prettier-plugin-svelte": "^2.6.0",
23
+ "svelte": "^3.46.4",
24
+ "svelte-check": "^2.4.5",
25
+ "svelte-github-corner": "^0.1.0",
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"
30
31
  },
31
32
  "keywords": [
32
33
  "svelte",
@@ -39,6 +40,7 @@
39
40
  },
40
41
  "exports": {
41
42
  "./package.json": "./package.json",
42
- "./Masonry.svelte": "./Masonry.svelte"
43
+ "./Masonry.svelte": "./Masonry.svelte",
44
+ ".": "./index.js"
43
45
  }
44
46
  }
package/readme.md CHANGED
@@ -1,17 +1,25 @@
1
- <p align="center">
2
- <img src="static/favicon.svg" alt="Svelte Bricks" height=150>
3
- </p>
1
+ <div class="hide-in-docs">
4
2
 
5
- # Svelte Bricks
3
+ <h1 align="center">
4
+ <img src="https://raw.githubusercontent.com/janosh/svelte-bricks/main/static/favicon.svg" alt="Svelte Bricks" height=60>
5
+ <br>&ensp;Svelte Bricks
6
+ </h1>
6
7
 
8
+ <h4 align="center">
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)
7
11
  [![NPM version](https://img.shields.io/npm/v/svelte-bricks?color=blue&logo=NPM)](https://npmjs.com/package/svelte-bricks)
8
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)
9
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)
10
14
 
11
- This is a naive masonry implementation in Svelte without column balancing.
15
+ </h4>
16
+
17
+ Naive implementation in Svelte without column balancing.
12
18
 
13
19
  **[Live demo](https://svelte-bricks.netlify.app)**
14
20
 
21
+ </div>
22
+
15
23
  ## Installation
16
24
 
17
25
  ```sh
@@ -43,22 +51,41 @@ h)
43
51
  {gap}
44
52
  let:item
45
53
  bind:width
46
- bind:height>
54
+ bind:height
55
+ >
47
56
  <Some {item} />
48
57
  </Masonry>
49
58
  ```
50
59
 
51
60
  **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.
52
61
 
62
+ **Hint**: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.
63
+
53
64
  ## Props
54
65
 
55
66
  `Masonry.svelte` expects an array of `items` as well as a `<slot />` component used to render each of the `items`. The array can contain whatever data (objects, strings, numbers) as long as the slot component knows how to handle it.
56
67
 
57
68
  Additional optional props are:
58
69
 
70
+ - `items: any[]`: required
59
71
  - `minColWidth: number = 330` (in `px`)
60
72
  - `maxColWidth: number = 500` (in `px`)
61
73
  - `gap: number = 20` (in `px`)
62
74
  - `masonryWidth: number = 0`: Bound to the masonry `div`s width (in `px`).
63
75
  - `masonryHeight: number = 0`: Bound to the masonry `div`s height (in `px`).
64
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.
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.
79
+
80
+ ## Styling
81
+
82
+ Besides inline CSS which you can apply through the `style` prop, the following `:global()` CSS selectors can be used for fine-grained control of wrapper and column styles:
83
+
84
+ ```css
85
+ :global(div.masonry) {
86
+ /* top-level wrapper div */
87
+ }
88
+ :global(div.masonry div.col) {
89
+ /* each column in the masonry layout */
90
+ }
91
+ ```