Skip to content

Commit 7eb2474

Browse files
hperrinhperrin
committed
docs: add demos for common package features
1 parent 5dd42e2 commit 7eb2474

23 files changed

+775
-5
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,14 @@ If you need help using SMUI, join the new [Discord server](https://discord.gg/aF
4646

4747
# Components
4848

49-
Click a component below to go to its documentation. (Note that this documentation is a work in progress. The demo code should be your main source of truth for how something works.)
49+
Click a component/package below to go to the documentation. (Note that this documentation is a work in progress. The demo code should be your main source of truth for how something works.)
5050

5151
- [Banner](packages/banner/README.md)
5252
- [Button](packages/button/README.md)
5353
- [Floating Action Button](packages/fab/README.md)
5454
- [Icon Button](packages/icon-button/README.md)
5555
- [Card](packages/card/README.md)
56+
- [Common](packages/common/README.md)
5657
- [Data Table](packages/data-table/README.md)
5758
- [Dialog](packages/dialog/README.md)
5859
- [Drawer](packages/drawer/README.md)

‎packages/common/README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
# Svelte Material UI - Common Components
22

3-
These common components are used in other components.
3+
Common Label and Icon components, elemental components, and helper utilities.
44

5-
You can also use the elemental components to switch the HTML element that an SMUI component with a `component` prop uses.
5+
You can use the elemental components to switch the HTML element that an SMUI component with a `component` prop uses.
66

77
# Installation
88

99
```sh
1010
npm install --save-dev @smui/common
1111
```
1212

13+
# Demo
14+
15+
[See it in action.](https://sveltematerialui.com/demo/common)
16+
17+
[See the demo code.](/site/src/routes/demo/common/)
18+
1319
# Exports
1420

1521
## Label

‎site/package-lock.json‎

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

‎site/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@
132132
"rollup-plugin-terser": "^7.0.2",
133133
"sapper": "^0.29.1",
134134
"smui-theme": "file:../packages/smui-theme",
135-
"svelte": "^3.37.0"
135+
"svelte": "^3.37.0",
136+
"tinygesture": "^1.1.4"
136137
}
137138
}

‎site/src/routes/_layout.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,14 @@
256256
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/card',
257257
],
258258
},
259+
{
260+
name: 'Common',
261+
route: '/demo/common/',
262+
indent: 0,
263+
repos: [
264+
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/common',
265+
],
266+
},
259267
{
260268
name: 'Data Table',
261269
route: '/demo/data-table/',

‎site/src/routes/demo/common/_ClassAdderBuilder.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div>
2+
<MyClassAdder>I'm a component with an added class!</MyClassAdder>
3+
</div>
4+
5+
<script>
6+
import MyClassAdder from './_ClassAdderBuilderComponent.js';
7+
</script>
8+
9+
<style>
10+
* :global(.my-added-class) {
11+
display: flex;
12+
text-align: center;
13+
align-items: center;
14+
height: 150px;
15+
width: 150px;
16+
border: 2px solid currentColor;
17+
}
18+
</style>

‎site/src/routes/demo/common/_ClassAdderBuilderComponent.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { classAdderBuilder } from '@smui/common/internal.js';
2+
import Div from '@smui/common/Div.svelte';
3+
4+
export default classAdderBuilder({
5+
class: 'my-added-class',
6+
component: Div,
7+
});

‎site/src/routes/demo/common/_ClassMap.svelte‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div>
2+
<Button
3+
class={classMap({
4+
big: big,
5+
[color]: true,
6+
})}
7+
>
8+
<Label>I'm a Colored Button</Label>
9+
</Button>
10+
</div>
11+
12+
<div>
13+
<FormField style="margin-right: 1em;">
14+
<Checkbox bind:checked={big} />
15+
<span slot="label">Big</span>
16+
</FormField>
17+
{#each ['red', 'blue', 'green'] as option}
18+
<FormField style="margin-right: 1em;">
19+
<Radio bind:group={color} value={option} />
20+
<span slot="label">{`${option[0].toUpperCase()}${option.slice(1)}`}</span>
21+
</FormField>
22+
{/each}
23+
</div>
24+
25+
<script>
26+
import { classMap } from '@smui/common/internal.js';
27+
import { Label } from '@smui/common';
28+
import Button from '@smui/button';
29+
import FormField from '@smui/form-field';
30+
import Radio from '@smui/radio';
31+
import Checkbox from '@smui/checkbox';
32+
33+
let big = false;
34+
let color = 'red';
35+
</script>
36+
37+
<style>
38+
* :global(.red) {
39+
color: red;
40+
}
41+
* :global(.blue) {
42+
color: blue;
43+
}
44+
* :global(.green) {
45+
color: green;
46+
}
47+
48+
* :global(.big) {
49+
font-size: 1.5em;
50+
}
51+
</style>

‎site/src/routes/demo/common/_CommonLabelIcon.svelte‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div style="display: flex; flex-wrap: wrap; align-items: center;">
2+
<Button><Label>Button with a Label</Label></Button>
3+
4+
<Fab extended><Label>Fab with a Label</Label></Fab>
5+
6+
<IconButton><Icon class="material-icons">favorite</Icon></IconButton>
7+
8+
<Fab><Icon class="material-icons">favorite</Icon></Fab>
9+
</div>
10+
11+
<script>
12+
import Button from '@smui/button';
13+
import IconButton from '@smui/icon-button';
14+
import Fab from '@smui/fab';
15+
import { Icon, Label } from '@smui/common';
16+
</script>

‎site/src/routes/demo/common/_Dispatch.svelte‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!-- This event will continue to bubble up beyond this component. -->
2+
<div class="event" on:MyEvent={(e) => (event = e)}>
3+
I'm the event listener.
4+
5+
<div class="event">
6+
<div class="event">
7+
<div class="event" bind:this={target}>I'm the event target.</div>
8+
</div>
9+
</div>
10+
</div>
11+
12+
<br />
13+
14+
<Button on:click={dispatchEvent}>Dispatch Event</Button>
15+
16+
<pre
17+
class="status">Caught Event Detail: {event && JSON.stringify(event.detail)}</pre>
18+
19+
<script>
20+
import { dispatch } from '@smui/common/internal.js';
21+
import Button from '@smui/button';
22+
23+
let target;
24+
let event;
25+
26+
function dispatchEvent() {
27+
dispatch(
28+
target,
29+
'MyEvent',
30+
{
31+
// This is the event.details object.
32+
time: new Date().toLocaleTimeString(),
33+
},
34+
{
35+
// This is the eventInit object.
36+
bubbles: true, // this is the default when no eventInit object is provided.
37+
cancelable: true, // you can make it cancelable like this.
38+
}
39+
);
40+
}
41+
</script>
42+
43+
<style>
44+
.event {
45+
padding: 1em;
46+
border: 1px solid currentColor;
47+
}
48+
</style>

0 commit comments

Comments
 (0)