svelte-bricks 0.1.3 → 0.1.4
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.
- package/Masonry.svelte +20 -18
- package/package.json +17 -18
- package/readme.md +16 -8
package/Masonry.svelte
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
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
16
|
import { crossfade } from 'svelte/transition';
|
|
3
17
|
export let items;
|
|
@@ -37,20 +51,21 @@ function getId(item) {
|
|
|
37
51
|
return item.id;
|
|
38
52
|
}
|
|
39
53
|
</script>
|
|
40
|
-
|
|
41
54
|
<div
|
|
42
55
|
class="masonry"
|
|
43
56
|
bind:clientWidth={masonryWidth}
|
|
44
57
|
bind:clientHeight={masonryHeight}
|
|
45
|
-
style="gap: {gap}px; {style}"
|
|
58
|
+
style="gap: {gap}px; {style}"
|
|
59
|
+
>
|
|
46
60
|
{#each itemsToCols as col}
|
|
47
61
|
<div class="col" style="gap: {gap}px; max-width: {maxColWidth}px;">
|
|
48
62
|
{#if animate}
|
|
49
63
|
{#each col as [item, idx] (getId(item) || idx)}
|
|
50
64
|
<div
|
|
51
|
-
in:receive={{ key: getId(item) || idx }}
|
|
52
|
-
out:send={{ key: getId(item) || idx }}
|
|
53
|
-
animate:flip={{ duration: 200 }}
|
|
65
|
+
in:receive|local={{ key: getId(item) || idx }}
|
|
66
|
+
out:send|local={{ key: getId(item) || idx }}
|
|
67
|
+
animate:flip={{ duration: 200 }}
|
|
68
|
+
>
|
|
54
69
|
<slot {idx} {item} />
|
|
55
70
|
</div>
|
|
56
71
|
{/each}
|
|
@@ -63,16 +78,3 @@ function getId(item) {
|
|
|
63
78
|
{/each}
|
|
64
79
|
</div>
|
|
65
80
|
|
|
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/package.json
CHANGED
|
@@ -5,28 +5,27 @@
|
|
|
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.
|
|
8
|
+
"version": "0.1.4",
|
|
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.
|
|
16
|
-
"@sveltejs/kit": "^1.0.0-next.
|
|
17
|
-
"@typescript-eslint/eslint-plugin": "^5.1
|
|
18
|
-
"@typescript-eslint/parser": "^5.1
|
|
19
|
-
"eslint": "^8.0
|
|
20
|
-
"eslint-plugin-svelte3": "^3.
|
|
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",
|
|
21
19
|
"mdsvex": "^0.9.8",
|
|
22
|
-
"prettier": "^2.
|
|
23
|
-
"prettier-plugin-svelte": "^2.
|
|
24
|
-
"svelte": "^3.
|
|
25
|
-
"svelte-check": "^2.
|
|
26
|
-
"svelte-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
20
|
+
"prettier": "^2.5.1",
|
|
21
|
+
"prettier-plugin-svelte": "^2.6.0",
|
|
22
|
+
"svelte": "^3.46.2",
|
|
23
|
+
"svelte-check": "^2.3.0",
|
|
24
|
+
"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"
|
|
30
29
|
},
|
|
31
30
|
"keywords": [
|
|
32
31
|
"svelte",
|
package/readme.md
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
|
-
<
|
|
2
|
-
<img src="static/favicon.svg" alt="Svelte Bricks" height=150>
|
|
3
|
-
</p>
|
|
1
|
+
<div class="hide-in-docs">
|
|
4
2
|
|
|
5
|
-
|
|
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> Svelte Bricks
|
|
6
|
+
</h1>
|
|
7
|
+
|
|
8
|
+
<h4 align="center">
|
|
6
9
|
|
|
7
10
|
[](https://npmjs.com/package/svelte-bricks)
|
|
8
11
|
[](https://app.netlify.com/sites/svelte-bricks/deploys)
|
|
9
12
|
[](https://results.pre-commit.ci/latest/github/janosh/svelte-bricks/main)
|
|
10
13
|
|
|
11
|
-
|
|
14
|
+
</h4>
|
|
15
|
+
|
|
16
|
+
Naive implementation in Svelte without column balancing.
|
|
12
17
|
|
|
13
18
|
**[Live demo](https://svelte-bricks.netlify.app)**
|
|
14
19
|
|
|
15
|
-
|
|
20
|
+
</div>
|
|
16
21
|
|
|
17
22
|
## Installation
|
|
18
23
|
|
|
@@ -45,13 +50,16 @@ h)
|
|
|
45
50
|
{gap}
|
|
46
51
|
let:item
|
|
47
52
|
bind:width
|
|
48
|
-
bind:height
|
|
53
|
+
bind:height
|
|
54
|
+
>
|
|
49
55
|
<Some {item} />
|
|
50
56
|
</Masonry>
|
|
51
57
|
```
|
|
52
58
|
|
|
53
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.
|
|
54
60
|
|
|
61
|
+
**Hint**: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.
|
|
62
|
+
|
|
55
63
|
## Props
|
|
56
64
|
|
|
57
65
|
`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.
|
|
@@ -68,7 +76,7 @@ Additional optional props are:
|
|
|
68
76
|
|
|
69
77
|
## Styling
|
|
70
78
|
|
|
71
|
-
Besides
|
|
79
|
+
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
80
|
|
|
73
81
|
```css
|
|
74
82
|
:global(div.masonry) {
|