Skip to content
This repository was archived by the owner on Sep 26, 2022. It is now read-only.

Commit 9d31eb0

Browse files
betaboonbetaboon
committed
feat(FluidGrid): implement material-ui inspired grid
1 parent 2a405ce commit 9d31eb0

File tree

17 files changed

+588
-0
lines changed

17 files changed

+588
-0
lines changed

‎packages/api-generator/src/FluidGrid.json‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
{
2+
"version": 3,
3+
"name": "FluidGrid",
4+
"data": [
5+
{
6+
"visibility": "public",
7+
"description": null,
8+
"keywords": [],
9+
"name": "container",
10+
"kind": "let",
11+
"static": false,
12+
"readonly": false,
13+
"type": {
14+
"kind": "type",
15+
"text": "boolean",
16+
"type": "boolean"
17+
},
18+
"defaultValue": false
19+
},
20+
{
21+
"visibility": "public",
22+
"description": null,
23+
"keywords": [],
24+
"name": "item",
25+
"kind": "let",
26+
"static": false,
27+
"readonly": false,
28+
"type": {
29+
"kind": "type",
30+
"text": "boolean",
31+
"type": "boolean"
32+
},
33+
"defaultValue": false
34+
},
35+
{
36+
"visibility": "public",
37+
"description": null,
38+
"keywords": [],
39+
"name": "spacing",
40+
"kind": "let",
41+
"static": false,
42+
"readonly": false,
43+
"type": {
44+
"kind": "type",
45+
"text": "object",
46+
"type": "object"
47+
},
48+
"defaultValue": null
49+
},
50+
{
51+
"visibility": "public",
52+
"description": null,
53+
"keywords": [],
54+
"name": "direction",
55+
"kind": "let",
56+
"static": false,
57+
"readonly": false,
58+
"type": {
59+
"kind": "type",
60+
"text": "object",
61+
"type": "object"
62+
},
63+
"defaultValue": null
64+
},
65+
{
66+
"visibility": "public",
67+
"description": null,
68+
"keywords": [],
69+
"name": "justify",
70+
"kind": "let",
71+
"static": false,
72+
"readonly": false,
73+
"type": {
74+
"kind": "type",
75+
"text": "object",
76+
"type": "object"
77+
},
78+
"defaultValue": null
79+
},
80+
{
81+
"visibility": "public",
82+
"description": null,
83+
"keywords": [],
84+
"name": "alignItems",
85+
"kind": "let",
86+
"static": false,
87+
"readonly": false,
88+
"type": {
89+
"kind": "type",
90+
"text": "object",
91+
"type": "object"
92+
},
93+
"defaultValue": null
94+
},
95+
{
96+
"visibility": "public",
97+
"description": null,
98+
"keywords": [],
99+
"name": "xs",
100+
"kind": "let",
101+
"static": false,
102+
"readonly": false,
103+
"type": {
104+
"kind": "type",
105+
"text": "object",
106+
"type": "object"
107+
},
108+
"defaultValue": null
109+
},
110+
{
111+
"visibility": "public",
112+
"description": null,
113+
"keywords": [],
114+
"name": "sm",
115+
"kind": "let",
116+
"static": false,
117+
"readonly": false,
118+
"type": {
119+
"kind": "type",
120+
"text": "object",
121+
"type": "object"
122+
},
123+
"defaultValue": null
124+
},
125+
{
126+
"visibility": "public",
127+
"description": null,
128+
"keywords": [],
129+
"name": "md",
130+
"kind": "let",
131+
"static": false,
132+
"readonly": false,
133+
"type": {
134+
"kind": "type",
135+
"text": "object",
136+
"type": "object"
137+
},
138+
"defaultValue": null
139+
},
140+
{
141+
"visibility": "public",
142+
"description": null,
143+
"keywords": [],
144+
"name": "lg",
145+
"kind": "let",
146+
"static": false,
147+
"readonly": false,
148+
"type": {
149+
"kind": "type",
150+
"text": "object",
151+
"type": "object"
152+
},
153+
"defaultValue": null
154+
},
155+
{
156+
"visibility": "public",
157+
"description": null,
158+
"keywords": [],
159+
"name": "xl",
160+
"kind": "let",
161+
"static": false,
162+
"readonly": false,
163+
"type": {
164+
"kind": "type",
165+
"text": "object",
166+
"type": "object"
167+
},
168+
"defaultValue": null
169+
},
170+
{
171+
"visibility": "public",
172+
"description": null,
173+
"keywords": [],
174+
"name": "style",
175+
"kind": "let",
176+
"static": false,
177+
"readonly": false,
178+
"type": {
179+
"kind": "type",
180+
"text": "object",
181+
"type": "object"
182+
},
183+
"defaultValue": null
184+
},
185+
{
186+
"visibility": "public",
187+
"description": null,
188+
"keywords": [],
189+
"name": "class",
190+
"kind": "const",
191+
"static": false,
192+
"readonly": true,
193+
"type": {
194+
"kind": "type",
195+
"text": "string",
196+
"type": "string"
197+
},
198+
"localName": "klass"
199+
}
200+
],
201+
"computed": [],
202+
"methods": [],
203+
"components": [],
204+
"description": null,
205+
"keywords": [],
206+
"events": [],
207+
"slots": [
208+
{
209+
"name": "default",
210+
"description": null,
211+
"visibility": "public",
212+
"parameters": []
213+
}
214+
],
215+
"refs": []
216+
}

‎packages/api-generator/src/all.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"Divider",
2020
"ExpansionPanel",
2121
"ExpansionPanels",
22+
"FluidGrid",
2223
"Footer",
2324
"Col",
2425
"Container",

‎packages/api-generator/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export { default as Dialog } from './Dialog.json';
1818
export { default as Divider } from './Divider.json';
1919
export { default as ExpansionPanel } from './ExpansionPanel.json';
2020
export { default as ExpansionPanels } from './ExpansionPanels.json';
21+
export { default as FluidGrid } from './FluidGrid.json';
2122
export { default as Footer } from './Footer.json';
2223
export { default as Col } from './Col.json';
2324
export { default as Container } from './Container.json';

‎packages/docs/src/examples/FluidGrid/autolayout.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
import { FluidGrid } from 'svelte-materialify/src';
3+
</script>
4+
5+
<FluidGrid container spacing={3}>
6+
<FluidGrid item xs>
7+
<div>xs</div>
8+
</FluidGrid>
9+
<FluidGrid item xs>
10+
<div>xs</div>
11+
</FluidGrid>
12+
<FluidGrid item xs>
13+
<div>xs</div>
14+
</FluidGrid>
15+
</FluidGrid>
16+
17+
<FluidGrid container spacing={3}>
18+
<FluidGrid item xs>
19+
<div>xs</div>
20+
</FluidGrid>
21+
<FluidGrid item xs={6}>
22+
<div>xs=6</div>
23+
</FluidGrid>
24+
<FluidGrid item xs>
25+
<div>xs</div>
26+
</FluidGrid>
27+
</FluidGrid>

‎packages/docs/src/examples/FluidGrid/basic.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
import { FluidGrid } from 'svelte-materialify/src';
3+
</script>
4+
5+
<FluidGrid container spacing={3}>
6+
<FluidGrid item xs={12}>
7+
<div>xs=12</div>
8+
</FluidGrid>
9+
<FluidGrid item xs={6}>
10+
<div>xs=6</div>
11+
</FluidGrid>
12+
<FluidGrid item xs={6}>
13+
<div>xs=6</div>
14+
</FluidGrid>
15+
<FluidGrid item xs={3}>
16+
<div>xs=3</div>
17+
</FluidGrid>
18+
<FluidGrid item xs={3}>
19+
<div>xs=3</div>
20+
</FluidGrid>
21+
<FluidGrid item xs={3}>
22+
<div>xs=3</div>
23+
</FluidGrid>
24+
<FluidGrid item xs={3}>
25+
<div>xs=3</div>
26+
</FluidGrid>
27+
</FluidGrid>

‎packages/docs/src/examples/FluidGrid/breakpoints.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
import { FluidGrid } from 'svelte-materialify/src';
3+
</script>
4+
5+
<FluidGrid container spacing={3}>
6+
<FluidGrid item xs={12}>
7+
<div>xs=12</div>
8+
</FluidGrid>
9+
<FluidGrid item xs={12} sm={6}>
10+
<div>xs=12 sm=6</div>
11+
</FluidGrid>
12+
<FluidGrid item xs={12} sm={6}>
13+
<div>xs=12 sm=6</div>
14+
</FluidGrid>
15+
<FluidGrid item xs={6} sm={3}>
16+
<div>xs=6 sm=3</div>
17+
</FluidGrid>
18+
<FluidGrid item xs={6} sm={3}>
19+
<div>xs=6 sm=3</div>
20+
</FluidGrid>
21+
<FluidGrid item xs={6} sm={3}>
22+
<div>xs=6 sm=3</div>
23+
</FluidGrid>
24+
<FluidGrid item xs={6} sm={3}>
25+
<div>xs=6 sm=3</div>
26+
</FluidGrid>
27+
</FluidGrid>

‎packages/docs/src/examples/FluidGrid/nested.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script>
2+
import { FluidGrid } from 'svelte-materialify/src';
3+
</script>
4+
5+
<FluidGrid container spacing={1}>
6+
{#each Array(3) as _}
7+
<FluidGrid container item xs={12} spacing={3}>
8+
<FluidGrid item xs={4}>
9+
<div>xs=4</div>
10+
</FluidGrid>
11+
<FluidGrid item xs={4}>
12+
<div>xs=4</div>
13+
</FluidGrid>
14+
<FluidGrid item xs={4}>
15+
<div>xs=4</div>
16+
</FluidGrid>
17+
</FluidGrid>
18+
{/each}
19+
</FluidGrid>

‎packages/docs/src/examples/FluidGrid/usage.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
import { FluidGrid } from 'svelte-materialify/src';
3+
</script>
4+
5+
<FluidGrid container>
6+
<FluidGrid item xs>
7+
<div>One of Three</div>
8+
</FluidGrid>
9+
<FluidGrid item xs>
10+
<div>One of Three</div>
11+
</FluidGrid>
12+
<FluidGrid item xs>
13+
<div>One of Three</div>
14+
</FluidGrid>
15+
</FluidGrid>

0 commit comments

Comments
 (0)