@onsvisual/svelte-components 0.0.25 → 0.0.26
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.
|
@@ -5,7 +5,7 @@ export default class Grid extends SvelteComponentTyped<{
|
|
|
5
5
|
theme?: "light" | "dark" | "lightblue";
|
|
6
6
|
id?: string;
|
|
7
7
|
cls?: string;
|
|
8
|
-
width?: "narrow" | "medium" | "wide" | "
|
|
8
|
+
width?: "narrow" | "medium" | "wide" | "full";
|
|
9
9
|
height?: string | number;
|
|
10
10
|
marginTop?: boolean;
|
|
11
11
|
marginBottom?: boolean;
|
|
@@ -30,7 +30,7 @@ declare const __propDef: {
|
|
|
30
30
|
theme?: "light" | "dark" | "lightblue";
|
|
31
31
|
id?: string;
|
|
32
32
|
cls?: string;
|
|
33
|
-
width?: "narrow" | "medium" | "wide" | "
|
|
33
|
+
width?: "narrow" | "medium" | "wide" | "full";
|
|
34
34
|
height?: number | string;
|
|
35
35
|
marginTop?: boolean;
|
|
36
36
|
marginBottom?: boolean;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { setContext } from "svelte";
|
|
3
|
+
import { writable } from "svelte/store";
|
|
2
4
|
import Container from "../../wrappers/Container/Container.svelte";
|
|
3
5
|
|
|
4
6
|
/**
|
|
@@ -13,9 +15,9 @@
|
|
|
13
15
|
export let cls = null;
|
|
14
16
|
/**
|
|
15
17
|
* Sets the width of the section
|
|
16
|
-
* @type {"narrow"|"medium"|"wide"|"
|
|
18
|
+
* @type {"narrow"|"medium"|"wide"|"full"}
|
|
17
19
|
*/
|
|
18
|
-
export let width = "
|
|
20
|
+
export let width = "medium";
|
|
19
21
|
/**
|
|
20
22
|
* Sets the title of the section
|
|
21
23
|
* @type {string}
|
|
@@ -70,9 +72,30 @@
|
|
|
70
72
|
let gridClass = !colwidth || colwidth === "full" ? "" : `grid-${colwidth}`;
|
|
71
73
|
let rowHeight = height === "full" ? "100vh" : !Number.isNaN(height) ? height + "px" : height;
|
|
72
74
|
let gridGap = !Number.isNaN(gap) ? gap + "px" : gap;
|
|
75
|
+
|
|
76
|
+
const defs = {
|
|
77
|
+
narrow: { w: 180, c: 4 },
|
|
78
|
+
medium: { w: 280, c: 3 },
|
|
79
|
+
wide: { w: 400, c: 2 },
|
|
80
|
+
full: { w: "100%", c: 1 },
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
let w;
|
|
84
|
+
|
|
85
|
+
const cols = writable(defs[colwidth].c);
|
|
86
|
+
|
|
87
|
+
$: columns =
|
|
88
|
+
colwidth == "full"
|
|
89
|
+
? 1
|
|
90
|
+
: w
|
|
91
|
+
? Math.floor((w + gap) / (defs[colwidth].w + gap))
|
|
92
|
+
: defs[colwidth].c;
|
|
93
|
+
$: cols.set(columns);
|
|
94
|
+
|
|
95
|
+
setContext("cols", cols);
|
|
73
96
|
</script>
|
|
74
97
|
|
|
75
|
-
<figure aria-label="{caption}">
|
|
98
|
+
<figure aria-label="{caption}" bind:clientWidth="{w}">
|
|
76
99
|
<Container
|
|
77
100
|
id="{id}"
|
|
78
101
|
cls="{cls}"
|
|
@@ -122,10 +145,10 @@
|
|
|
122
145
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
|
|
123
146
|
}
|
|
124
147
|
.grid-medium {
|
|
125
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
148
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
|
|
126
149
|
}
|
|
127
150
|
.grid-wide {
|
|
128
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
151
|
+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
|
|
129
152
|
}
|
|
130
153
|
:global(.grid > div) {
|
|
131
154
|
min-height: inherit;
|