1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<script>
import { DateTime } from 'luxon';
import EventCapture from '$lib/swatch/event-capture.svelte.js';
import Message from '$lib/components/Message.svelte';
import EventLog from '$lib/components/swatch/EventLog.svelte';
let id = $state('Mplayspelunky');
let atInput = $state('2025-07-07T15:19:00Z');
// Astonishingly, `DateTime.fromISO` does not throw on invalid inputs. It generates an "Invalid
// DateTime" sentinel value, instead.
let at = $derived(DateTime.fromISO(atInput));
let body = $state(
`Lorem ipsum \`dolor\` sit amet, consectetur adipiscing elit. Nunc quis ante ac leo tristique
iaculis vel in tortor. Praesent sed interdum ipsum. Pellentesque blandit, sapien at mattis
facilisis, leo mi gravida erat, in euismod mi lectus non dui. Praesent at justo vel mauris pulvinar
sodales ut sed nisl. Aliquam aliquet justo vel cursus imperdiet. Suspendisse potenti. Duis varius
tortor finibus, rutrum justo ac, tincidunt enim.
Donec velit dui, bibendum a augue sit amet, tempus condimentum neque. Integer nibh tortor, imperdiet
at aliquet eu, rutrum eget ligula. Donec porttitor nisi lacus, eu bibendum augue maximus eget. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas in
est eget lectus dapibus tincidunt. Ut ut nisi egestas, posuere libero laoreet, venenatis erat. Nulla
maximus, nisl eget interdum ornare, enim turpis semper ligula, sed ultricies sem sem quis arcu. Ut a
dapibus augue. Pellentesque nec tincidunt sem.
`,
);
let editable = $state(true);
let cssClass = $state('');
let capture = $state(new EventCapture());
const deleteMessage = capture.on('deleteMessage');
</script>
<h1><code>Message</code></h1>
<nav><p><a href=".">Back to swatches</a></p></nav>
<h2>properties</h2>
<div class="component-properties">
<label>id <input type="text" bind:value={id} /></label>
<label>at (iso-8601)<input type="text" bind:value={atInput} /></label>
<div class="suggestion">
interesting values:
<button onclick={() => (atInput = DateTime.now().toISO())}>Now</button>
</div>
<label>css class <input type="text" bind:value={cssClass} /></label>
<div class="suggestion">
interesting values:
<button onclick={() => (cssClass = '')}>(none)</button>
<button onclick={() => (cssClass = 'unsent')}>unsent</button>
<button onclick={() => (cssClass = 'deleted')}>deleted</button>
</div>
<label>editable <input type="checkbox" bind:checked={editable} /></label>
<label
><p>body (markdown)</p>
<textarea bind:value={body}></textarea>
</label>
</div>
<h2>rendered</h2>
<div class="component-preview">
<Message {id} {at} {body} {editable} class={cssClass} {deleteMessage} />
</div>
<h2>events</h2>
<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
|
