svelte-bricks 0.1.5 → 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.
- package/Masonry.svelte +5 -2
- package/Masonry.svelte.d.ts +2 -0
- package/package.json +15 -15
- package/readme.md +2 -0
package/Masonry.svelte
CHANGED
|
@@ -23,6 +23,9 @@ export let masonryHeight = 0;
|
|
|
23
23
|
export let animate = true;
|
|
24
24
|
export let style = ``;
|
|
25
25
|
export let duration = 200;
|
|
26
|
+
export { className as class };
|
|
27
|
+
export let columnClass = ``;
|
|
28
|
+
let className = ``;
|
|
26
29
|
$: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1);
|
|
27
30
|
$: itemsToCols = items.reduce((cols, item, idx) => {
|
|
28
31
|
cols[idx % cols.length].push([item, idx]);
|
|
@@ -39,13 +42,13 @@ function getId(item) {
|
|
|
39
42
|
}
|
|
40
43
|
</script>
|
|
41
44
|
<div
|
|
42
|
-
class="masonry"
|
|
45
|
+
class="masonry {className}"
|
|
43
46
|
bind:clientWidth={masonryWidth}
|
|
44
47
|
bind:clientHeight={masonryHeight}
|
|
45
48
|
style="gap: {gap}px; {style}"
|
|
46
49
|
>
|
|
47
50
|
{#each itemsToCols as col}
|
|
48
|
-
<div class="col" style="gap: {gap}px; max-width: {maxColWidth}px;">
|
|
51
|
+
<div class="col {columnClass}" style="gap: {gap}px; max-width: {maxColWidth}px;">
|
|
49
52
|
{#if animate}
|
|
50
53
|
{#each col as [item, idx] (getId(item) || idx)}
|
|
51
54
|
<div
|
package/Masonry.svelte.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -5,29 +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.
|
|
8
|
+
"version": "0.1.6",
|
|
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.
|
|
14
|
-
"@sveltejs/kit": "^1.0.0-next.
|
|
15
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
16
|
-
"@typescript-eslint/parser": "^5.
|
|
17
|
-
"eslint": "^8.
|
|
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
18
|
"eslint-plugin-svelte3": "^3.4.1",
|
|
19
19
|
"jsdom": "^19.0.0",
|
|
20
20
|
"mdsvex": "^0.10.5",
|
|
21
|
-
"prettier": "^2.
|
|
22
|
-
"prettier-plugin-svelte": "^2.
|
|
23
|
-
"svelte": "^3.
|
|
24
|
-
"svelte-check": "^2.
|
|
21
|
+
"prettier": "^2.6.2",
|
|
22
|
+
"prettier-plugin-svelte": "^2.7.0",
|
|
23
|
+
"svelte": "^3.47.0",
|
|
24
|
+
"svelte-check": "^2.6.0",
|
|
25
25
|
"svelte-github-corner": "^0.1.0",
|
|
26
|
-
"svelte-preprocess": "^4.10.
|
|
27
|
-
"svelte2tsx": "^0.5.
|
|
28
|
-
"typescript": "^4.6.
|
|
29
|
-
"vite": "^2.
|
|
30
|
-
"vitest": "^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"
|
|
31
31
|
},
|
|
32
32
|
"keywords": [
|
|
33
33
|
"svelte",
|
package/readme.md
CHANGED
|
@@ -76,6 +76,8 @@ Additional optional props are:
|
|
|
76
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
77
|
- `style: string = ''`: Inline styles that will be applied to the top-level `div.masonry`.
|
|
78
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`.
|
|
79
81
|
|
|
80
82
|
## Styling
|
|
81
83
|
|