Skip to content

Commit bb9e574

Browse files
hperrinhperrin
committed
docs: add nested accordion demo, use simple-icons for brands
1 parent 5d04e51 commit bb9e574

File tree

10 files changed

+133
-74
lines changed

10 files changed

+133
-74
lines changed

‎.prettierignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@ package-lock.json
55
dist
66
.svelte-kit
77
/.github
8+
/packages/site/static/smui.css
9+
/packages/site/static/smui-dark.css
10+
/packages/site/static/site.css
11+
/packages/site/static/site-dark.css

‎package-lock.json

Lines changed: 32 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/accordion/src/Accordion.svelte

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,17 @@
4343
let withOpenDialog = false;
4444
4545
function handlePanelMount(event: CustomEvent<SMUIAccordionPanelAccessor>) {
46-
// To make nested accordions work, ensure event sender is a direct child of this accordion
47-
if(event.target.parentNode != element) return;
48-
46+
// To make nested accordions work, ensure event sender is a direct child of
47+
// this accordion.
48+
if (
49+
event.target &&
50+
'parentNode' in event.target &&
51+
(event.target as Element).parentNode != element
52+
) {
53+
// TODO: debug why "as Element" is necessary.
54+
return;
55+
}
56+
4957
const accessor = event.detail;
5058
5159
event.stopPropagation();
@@ -64,11 +72,13 @@
6472
}
6573
6674
function handlePanelUnmount(event: CustomEvent<SMUIAccordionPanelAccessor>) {
67-
// To make nested accordions work, ensure event sender is a direct child of this accordion
68-
if(event.target.parentNode != element) return;
69-
7075
const accessor = event.detail;
7176
77+
// Nested check.
78+
if (!panelAccessorSet.has(accessor)) {
79+
return;
80+
}
81+
7282
event.stopPropagation();
7383
7484
panelAccessorSet.delete(accessor);
@@ -77,11 +87,13 @@
7787
function handlePanelActivate(
7888
event: CustomEvent<{ accessor: SMUIAccordionPanelAccessor }>
7989
) {
80-
// To make nested accordions work, ensure event sender is a direct child of this accordion
81-
if(event.target.parentNode != element) return;
82-
8390
const { accessor } = event.detail;
8491
92+
// Nested check.
93+
if (!panelAccessorSet.has(accessor)) {
94+
return;
95+
}
96+
8597
if (!multiple && !accessor.open) {
8698
const currentOpen = Array.from(panelAccessorSet).find(
8799
(accessor) => accessor.open
@@ -98,11 +110,13 @@
98110
function handlePanelOpening(
99111
event: CustomEvent<{ accessor: SMUIAccordionPanelAccessor }>
100112
) {
101-
// To make nested accordions work, ensure event sender is a direct child of this accordion
102-
if(event.target.parentNode != element) return;
103-
104113
const { accessor } = event.detail;
105114
115+
// Nested check.
116+
if (!panelAccessorSet.has(accessor)) {
117+
return;
118+
}
119+
106120
if (!multiple) {
107121
const otherOpen = Array.from(panelAccessorSet).filter(
108122
(checkAccessor) => checkAccessor !== accessor && checkAccessor.open

‎packages/site/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"@material/theme": "^13.0.0",
4141
"@material/top-app-bar": "^13.0.0",
4242
"@material/typography": "^13.0.0",
43-
"@mdi/js": "^6.6.96",
43+
"@mdi/js": "^7.0.96",
4444
"@smui-extra/accordion": "^6.0.0-beta.16",
4545
"@smui-extra/autocomplete": "^6.0.0-beta.16",
4646
"@smui-extra/badge": "^6.0.0-beta.16",
@@ -89,6 +89,7 @@
8989
"mdsvex": "^0.10.6",
9090
"remark-slug": "^7.0.1",
9191
"sass": "^1.53.0",
92+
"simple-icons": "^7.4.0",
9293
"smui-theme": "^6.0.0-beta.16",
9394
"svelte-preprocess": "^4.10.7",
9495
"tinygesture": "^2.0.0",

‎packages/site/src/app.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,77 +29,77 @@
2929
<link
3030
rel="apple-touch-icon"
3131
sizes="57x57"
32-
href="%svelte.assets%/icons/apple-icon-57x57.png"
32+
href="%sveltekit.assets%/icons/apple-icon-57x57.png"
3333
/>
3434
<link
3535
rel="apple-touch-icon"
3636
sizes="60x60"
37-
href="%svelte.assets%/icons/apple-icon-60x60.png"
37+
href="%sveltekit.assets%/icons/apple-icon-60x60.png"
3838
/>
3939
<link
4040
rel="apple-touch-icon"
4141
sizes="72x72"
42-
href="%svelte.assets%/icons/apple-icon-72x72.png"
42+
href="%sveltekit.assets%/icons/apple-icon-72x72.png"
4343
/>
4444
<link
4545
rel="apple-touch-icon"
4646
sizes="76x76"
47-
href="%svelte.assets%/icons/apple-icon-76x76.png"
47+
href="%sveltekit.assets%/icons/apple-icon-76x76.png"
4848
/>
4949
<link
5050
rel="apple-touch-icon"
5151
sizes="114x114"
52-
href="%svelte.assets%/icons/apple-icon-114x114.png"
52+
href="%sveltekit.assets%/icons/apple-icon-114x114.png"
5353
/>
5454
<link
5555
rel="apple-touch-icon"
5656
sizes="120x120"
57-
href="%svelte.assets%/icons/apple-icon-120x120.png"
57+
href="%sveltekit.assets%/icons/apple-icon-120x120.png"
5858
/>
5959
<link
6060
rel="apple-touch-icon"
6161
sizes="144x144"
62-
href="%svelte.assets%/icons/apple-icon-144x144.png"
62+
href="%sveltekit.assets%/icons/apple-icon-144x144.png"
6363
/>
6464
<link
6565
rel="apple-touch-icon"
6666
sizes="152x152"
67-
href="%svelte.assets%/icons/apple-icon-152x152.png"
67+
href="%sveltekit.assets%/icons/apple-icon-152x152.png"
6868
/>
6969
<link
7070
rel="apple-touch-icon"
7171
sizes="180x180"
72-
href="%svelte.assets%/icons/apple-icon-180x180.png"
72+
href="%sveltekit.assets%/icons/apple-icon-180x180.png"
7373
/>
7474
<link
7575
rel="icon"
7676
type="image/png"
7777
sizes="192x192"
78-
href="%svelte.assets%/icons/android-icon-192x192.png"
78+
href="%sveltekit.assets%/icons/android-icon-192x192.png"
7979
/>
8080
<link
8181
rel="icon"
8282
type="image/png"
8383
sizes="32x32"
84-
href="%svelte.assets%/icons/favicon-32x32.png"
84+
href="%sveltekit.assets%/icons/favicon-32x32.png"
8585
/>
8686
<link
8787
rel="icon"
8888
type="image/png"
8989
sizes="96x96"
90-
href="%svelte.assets%/icons/favicon-96x96.png"
90+
href="%sveltekit.assets%/icons/favicon-96x96.png"
9191
/>
9292
<link
9393
rel="icon"
9494
type="image/png"
9595
sizes="16x16"
96-
href="%svelte.assets%/icons/favicon-16x16.png"
96+
href="%sveltekit.assets%/icons/favicon-16x16.png"
9797
/>
98-
<link rel="manifest" href="%svelte.assets%/manifest.json" />
98+
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
9999
<meta name="msapplication-TileColor" content="#ffffff" />
100100
<meta
101101
name="msapplication-TileImage"
102-
content="%svelte.assets%/ms-icon-144x144.png"
102+
content="%sveltekit.assets%/ms-icon-144x144.png"
103103
/>
104104
<meta name="theme-color" content="#ffffff" />
105105

@@ -133,7 +133,7 @@
133133
}
134134
</style>
135135

136-
%svelte.head%
136+
%sveltekit.head%
137137

138138
<!-- Global site tag (gtag.js) - Google Analytics -->
139139
<script
@@ -151,6 +151,6 @@
151151
</script>
152152
</head>
153153
<body class="ukraine">
154-
<div id="smui-app">%svelte.body%</div>
154+
<div id="smui-app">%sveltekit.body%</div>
155155
</body>
156156
</html>

‎packages/site/src/routes/__layout.svelte

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -88,23 +88,23 @@
8888
<Wrapper>
8989
<IconButton href="https://discord.gg/aFzmkrmg9P">
9090
<Icon component={Svg} viewBox="0 0 24 24">
91-
<path fill="currentColor" d={mdiDiscord} />
91+
<path fill="currentColor" d={siDiscord.path} />
9292
</Icon>
9393
</IconButton>
9494
<Tooltip>Join the Discord Server</Tooltip>
9595
</Wrapper>
9696
<Wrapper>
9797
<IconButton href="https://twitter.com/SciActive">
9898
<Icon component={Svg} viewBox="0 0 24 24">
99-
<path fill="currentColor" d={mdiTwitter} />
99+
<path fill="currentColor" d={siTwitter.path} />
100100
</Icon>
101101
</IconButton>
102102
<Tooltip>Hunter Perrin (SMUI Author) on Twitter</Tooltip>
103103
</Wrapper>
104104
<Wrapper>
105105
<IconButton href="https://github.com/hperrin/svelte-material-ui">
106106
<Icon component={Svg} viewBox="0 0 24 24">
107-
<path fill="currentColor" d={mdiGithub} />
107+
<path fill="currentColor" d={siGithub.path} />
108108
</Icon>
109109
</IconButton>
110110
<Tooltip>SMUI on GitHub</Tooltip>
@@ -176,14 +176,8 @@
176176

177177
<script lang="ts">
178178
import { onDestroy, onMount } from 'svelte';
179-
import {
180-
mdiFileDocument,
181-
mdiDiscord,
182-
mdiTwitter,
183-
mdiGithub,
184-
mdiWeatherSunny,
185-
mdiWeatherNight,
186-
} from '@mdi/js';
179+
import { mdiFileDocument, mdiWeatherSunny, mdiWeatherNight } from '@mdi/js';
180+
import { siDiscord, siTwitter, siGithub } from 'simple-icons/icons';
187181
import TinyGesture from 'tinygesture';
188182
import { assets } from '$app/paths';
189183
import { page } from '$app/stores';

‎packages/site/src/routes/demo/accordion/_Nested.svelte

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div class="accordion-container">
2+
<Accordion>
3+
<Panel>
4+
<Header>Panel 1</Header>
5+
<Content>
6+
<Accordion>
7+
<Panel>
8+
<Header>Panel 1.1</Header>
9+
<Content>The content for panel 1.1.</Content>
10+
</Panel>
11+
<Panel>
12+
<Header>Panel 1.2</Header>
13+
<Content>The content for panel 1.2.</Content>
14+
</Panel>
15+
</Accordion>
16+
</Content>
17+
</Panel>
18+
<Panel>
19+
<Header>Panel 2</Header>
20+
<Content>
21+
<Accordion>
22+
<Panel>
23+
<Header>Panel 2.1</Header>
24+
<Content>The content for panel 2.1.</Content>
25+
</Panel>
26+
<Panel>
27+
<Header>Panel 2.2</Header>
28+
<Content>The content for panel 2.2.</Content>
29+
</Panel>
30+
</Accordion>
31+
</Content>
32+
</Panel>
33+
</Accordion>
34+
</div>
35+
36+
<script lang="ts">
37+
import Accordion, { Panel, Header, Content } from '@smui-extra/accordion';
38+
</script>

0 commit comments

Comments
 (0)