svelte-bricks 0.1.3 → 0.1.6

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 +27 -35
  2. package/Masonry.svelte.d.ts +3 -0
  3. package/package.json +20 -19
  4. package/readme.md +21 -8
package/Masonry.svelte CHANGED
@@ -1,5 +1,19 @@
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
+
1
15
  <script >import { flip } from 'svelte/animate';
2
- import { crossfade } from 'svelte/transition';
16
+ import { fade } from 'svelte/transition';
3
17
  export let items;
4
18
  export let minColWidth = 330;
5
19
  export let maxColWidth = 500;
@@ -8,20 +22,10 @@ export let masonryWidth = 0;
8
22
  export let masonryHeight = 0;
9
23
  export let animate = true;
10
24
  export let style = ``;
11
- const [send, receive] = crossfade({
12
- duration: (d) => Math.sqrt(d * 200),
13
- fallback(node) {
14
- const style = getComputedStyle(node);
15
- const transform = style.transform === `none` ? `` : style.transform;
16
- return {
17
- duration: 500,
18
- css: (t) => `
19
- transform: ${transform} scale(${t});
20
- opacity: ${t}
21
- `,
22
- };
23
- },
24
- });
25
+ export let duration = 200;
26
+ export { className as class };
27
+ export let columnClass = ``;
28
+ let className = ``;
25
29
  $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
26
30
  $: itemsToCols = items.reduce((cols, item, idx) => {
27
31
  cols[idx % cols.length].push([item, idx]);
@@ -37,20 +41,21 @@ function getId(item) {
37
41
  return item.id;
38
42
  }
39
43
  </script>
40
-
41
44
  <div
42
- class="masonry"
45
+ class="masonry {className}"
43
46
  bind:clientWidth={masonryWidth}
44
47
  bind:clientHeight={masonryHeight}
45
- style="gap: {gap}px; {style}">
48
+ style="gap: {gap}px; {style}"
49
+ >
46
50
  {#each itemsToCols as col}
47
- <div class="col" style="gap: {gap}px; max-width: {maxColWidth}px;">
51
+ <div class="col {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
48
52
  {#if animate}
49
53
  {#each col as [item, idx] (getId(item) || idx)}
50
54
  <div
51
- in:receive={{ key: getId(item) || idx }}
52
- out:send={{ key: getId(item) || idx }}
53
- animate:flip={{ duration: 200 }}>
55
+ in:fade|local={{ delay: 100, duration }}
56
+ out:fade|local={{ delay: 0, duration }}
57
+ animate:flip={{ duration }}
58
+ >
54
59
  <slot {idx} {item} />
55
60
  </div>
56
61
  {/each}
@@ -63,16 +68,3 @@ function getId(item) {
63
68
  {/each}
64
69
  </div>
65
70
 
66
- <style>
67
- :where(div.masonry) {
68
- display: flex;
69
- justify-content: center;
70
- overflow-wrap: anywhere;
71
- box-sizing: border-box;
72
- }
73
- :where(div.masonry div.col) {
74
- display: grid;
75
- height: max-content;
76
- width: 100%;
77
- }
78
- </style>
package/Masonry.svelte.d.ts CHANGED
@@ -11,6 +11,9 @@ declare const __propDef: {
11
11
  masonryHeight?: number | undefined;
12
12
  animate?: boolean | undefined;
13
13
  style?: string | undefined;
14
+ duration?: number | undefined;
15
+ class?: string | undefined;
16
+ columnClass?: string | undefined;
14
17
  };
15
18
  events: {
16
19
  [evt: string]: CustomEvent<any>;
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.3",
8
+ "version": "0.1.6",
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.29",
14
+ "@sveltejs/kit": "^1.0.0-next.310",
15
+ "@typescript-eslint/eslint-plugin": "^5.18.0",
16
+ "@typescript-eslint/parser": "^5.18.0",
17
+ "eslint": "^8.13.0",
18
+ "eslint-plugin-svelte3": "^3.4.1",
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.47.0",
24
+ "svelte-check": "^2.6.0",
25
+ "svelte-github-corner": "^0.1.0",
26
+ "svelte-preprocess": "^4.10.5",
27
+ "svelte2tsx": "^0.5.8",
28
+ "typescript": "^4.6.3",
29
+ "vite": "^2.9.1",
30
+ "vitest": "^0.9.3"
30
31
  },
31
32
  "keywords": [
32
33
  "svelte",
package/readme.md CHANGED
@@ -1,18 +1,24 @@
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
 
15
- <!-- remove above in docs -->
21
+ </div>
16
22
 
17
23
  ## Installation
18
24
 
@@ -45,19 +51,23 @@ h)
45
51
  {gap}
46
52
  let:item
47
53
  bind:width
48
- bind:height>
54
+ bind:height
55
+ >
49
56
  <Some {item} />
50
57
  </Masonry>
51
58
  ```
52
59
 
53
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.
54
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
+
55
64
  ## Props
56
65
 
57
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.
58
67
 
59
68
  Additional optional props are:
60
69
 
70
+ - `items: any[]`: required
61
71
  - `minColWidth: number = 330` (in `px`)
62
72
  - `maxColWidth: number = 500` (in `px`)
63
73
  - `gap: number = 20` (in `px`)
@@ -65,10 +75,13 @@ Additional optional props are:
65
75
  - `masonryHeight: number = 0`: Bound to the masonry `div`s height (in `px`).
66
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.
67
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
+ - `class: string = ''`: Applies to the outer `div` wrapping all masonry columns. For use with CSS frameworks like Tailwind.
80
+ - `columnClass: string = ''`: Applies to each column `div`.
68
81
 
69
82
  ## Styling
70
83
 
71
- Besides the inline CSS you can apply through the `style` prop, the following `:global()` CSS selectors can be used for fine-grained control of how this component looks:
84
+ 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:
72
85
 
73
86
  ```css
74
87
  :global(div.masonry) {