Skip to content

Commit 8b0594b

Browse files
estherbrunnerestherbrunner
authored
Merge pull request #42 from zeixcom/feature/docs-data-flow
docs: fix todo-count example
2 parents bfce874 + 0deb312 commit 8b0594b

File tree

17 files changed

+100
-70
lines changed

17 files changed

+100
-70
lines changed

‎docs-src/components/accordion-panel/accordion-panel.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import { setProperty, toggleAttribute, UIElement } from "@zeix/ui-element"
1+
import { asBoolean, setProperty, toggleAttribute, UIElement } from "@zeix/ui-element"
22

33
export class AccordionPanel extends UIElement {
4-
connectedCallback() {
5-
6-
// Set defaults from attributes
7-
this.set('open', this.hasAttribute('open'), false)
8-
this.set('collapsible', this.hasAttribute('collapsible'), false)
4+
static states = {
5+
open: asBoolean,
6+
collapsible: asBoolean
7+
}
98

9+
connectedCallback() {
10+
super.connectedCallback()
11+
1012
// Handle open and collapsible state changes
1113
this.self.sync(
1214
toggleAttribute('open'),

‎docs-src/components/media-context/media-context.ts

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -66,21 +66,13 @@ export class MediaContext extends UIElement {
6666
this.set(MEDIA_ORIENTATION, screenOrientation.matches ? ORIENTATION_LANDSCAPE : ORIENTATION_PORTRAIT)
6767

6868
// event listeners
69-
reducedMotion.addEventListener(
70-
'change',
71-
e => this.set(MEDIA_MOTION, e.matches)
72-
)
73-
colorScheme.addEventListener(
74-
'change',
75-
e => this.set(MEDIA_THEME, e.matches ? THEME_DARK : THEME_LIGHT)
76-
)
69+
reducedMotion.addEventListener('change', e => this.set(MEDIA_MOTION, e.matches))
70+
colorScheme.addEventListener('change', e => this.set(MEDIA_THEME, e.matches ? THEME_DARK : THEME_LIGHT))
7771
screenSmall.addEventListener('change', () => this.set(MEDIA_VIEWPORT, getViewport()))
7872
screenMedium.addEventListener('change', () => this.set(MEDIA_VIEWPORT, getViewport()))
7973
screenLarge.addEventListener('change', () => this.set(MEDIA_VIEWPORT, getViewport()))
8074
screenXLarge.addEventListener('change', () => this.set(MEDIA_VIEWPORT, getViewport()))
81-
screenOrientation.addEventListener('change', e => {
82-
this.set(MEDIA_THEME, e.matches ? ORIENTATION_LANDSCAPE : ORIENTATION_PORTRAIT)
83-
})
75+
screenOrientation.addEventListener('change', e => this.set(MEDIA_THEME, e.matches ? ORIENTATION_LANDSCAPE : ORIENTATION_PORTRAIT))
8476
}
8577
}
8678
MediaContext.define('media-context')

‎docs-src/components/my-counter/my-counter.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,11 @@ export class MyCounter extends UIElement {
88

99
connectedCallback() {
1010
this.set('parity', () => (this.get<number>('count') ?? 0) % 2 ? 'odd' : 'even')
11-
this.first('.increment').on('click', () => {
12-
this.set('count', (v?: number) => null != v ? ++v : 1)
13-
})
14-
this.first('.decrement').on('click', () => {
15-
this.set('count', (v?: number) => null != v ? --v : 0)
16-
})
11+
const setCount = (direction: number, fallback: number = 0) => () => {
12+
this.set('count', (v?: number) => (null != v ? v + direction : fallback))
13+
}
14+
this.first('.increment').on('click', setCount(1, 1))
15+
this.first('.decrement').on('click', setCount(-1))
1716
this.first('.count').sync(setText('count'))
1817
this.first('.parity').sync(setText('parity'))
1918
}

‎docs-src/components/tab-list/tab-list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { asBoolean, setProperty, toggleAttribute, UIElement, type Context } from
33
export class TabList extends UIElement {
44
static observedAttributes = ['accordion']
55
static states = {
6+
active: 0,
67
accordion: asBoolean,
78
}
89
static consumedContexts = ['media-viewport' as Context<string, string>]
910

1011
connectedCallback() {
1112
super.connectedCallback()
12-
this.set('active', 0, false) // initial active tab
1313

1414
// Dynamically adjust accordion based on viewport size
1515
setTimeout(() => {

‎docs-src/components/todo-count/todo-count.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
<todo-count>
22
<p class="all-done">Well done, all done!</p>
3-
<p class="remaining"><span></span> tasks left</p>
3+
<p class="remaining">
4+
<span class="count"></span>
5+
<span class="singular">task</span>
6+
<span class="plural">tasks</span>
7+
remaining
8+
</p>
49
</todo-count>

‎docs-src/components/todo-count/todo-count.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@ export class TodoCount extends UIElement {
66
}
77

88
connectedCallback() {
9+
super.connectedCallback()
910
this.first('.count').sync(setText('active'))
10-
this.first('.singular').sync(setProperty('ariaHidden', () => this.get('active') as number > 1))
11-
this.first('.plural').sync(setProperty('ariaHidden', () => this.get('active') === 1))
12-
this.first('.remaining').sync(setProperty('ariaHidden', () => !this.get('active')))
13-
this.first('.all-done').sync(setProperty('ariaHidden', () => !!this.get('active')))
11+
const setAriaHidden = (fn: (n: number) => boolean) =>
12+
setProperty('ariaHidden', () => fn(this.get('active') as number))
13+
this.first('.singular').sync(setAriaHidden(n => n > 1))
14+
this.first('.plural').sync(setAriaHidden(n => n === 1))
15+
this.first('.remaining').sync(setAriaHidden(n => !n))
16+
this.first('.all-done').sync(setAriaHidden(n => !!n))
1417
}
1518
}
1619
TodoCount.define('todo-count')

‎docs-src/components/todo-list/todo-list.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export class TodoList extends UIElement {
1414
}
1515

1616
connectedCallback() {
17+
super.connectedCallback()
1718
this.#updateList()
1819

1920
// Event listener and attribute on own element

‎docs-src/pages/data-flow.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,12 @@ Here's how everything comes together:
256256
<footer>
257257
<todo-count>
258258
<p class="all-done">Well done, all done!</p>
259-
<p class="remaining"><span></span> tasks left</p>
259+
<p class="remaining">
260+
<span class="count"></span>
261+
<span class="singular">task</span>
262+
<span class="plural">tasks</span>
263+
remaining
264+
</p>
260265
</todo-count>
261266
<input-radiogroup value="all" class="split-button">
262267
<fieldset>
@@ -307,6 +312,14 @@ Here's how everything comes together:
307312
</accordion-panel>
308313
<accordion-panel collapsible>
309314
<details>
315+
<summary>TodoCount Source Code</summary>
316+
<lazy-load src="./examples/todo-count.html">
317+
<p class="loading">Loading...</p>
318+
</lazy-load>
319+
</details>
320+
</accordion-panel>
321+
<accordion-panel collapsible>
322+
<details>
310323
<summary>InputField Source Code</summary>
311324
<lazy-load src="./examples/input-field.html">
312325
<p class="loading">Loading...</p>

‎docs/assets/main.js

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

‎docs/data-flow.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,12 @@ <h3>Full Example</h3>
371371
<footer>
372372
<todo-count>
373373
<p class="all-done">Well done, all done!</p>
374-
<p class="remaining"><span></span> tasks left</p>
374+
<p class="remaining">
375+
<span class="count"></span>
376+
<span class="singular">task</span>
377+
<span class="plural">tasks</span>
378+
remaining
379+
</p>
375380
</todo-count>
376381
<input-radiogroup value="all" class="split-button">
377382
<fieldset>
@@ -422,6 +427,14 @@ <h3>Full Example</h3>
422427
</accordion-panel>
423428
<accordion-panel collapsible>
424429
<details>
430+
<summary>TodoCount Source Code</summary>
431+
<lazy-load src="./examples/todo-count.html">
432+
<p class="loading">Loading...</p>
433+
</lazy-load>
434+
</details>
435+
</accordion-panel>
436+
<accordion-panel collapsible>
437+
<details>
425438
<summary>InputField Source Code</summary>
426439
<lazy-load src="./examples/input-field.html">
427440
<p class="loading">Loading...</p>

‎docs/examples/accordion-panel.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -119,15 +119,17 @@
119119
<span class="file">accordion-panel.ts</span>
120120
<span class="language">ts</span>
121121
</p>
122-
<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { setProperty, toggleAttribute, UIElement } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element"</span></span>
122+
<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { asBoolean, setProperty, toggleAttribute, UIElement } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element"</span></span>
123123
<span class="line"></span>
124124
<span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> class</span><span> </span><span style="color:#A6E22E;text-decoration:underline">AccordionPanel</span><span style="color:#F92672"> extends</span><span> </span><span style="color:#A6E22E;font-style:italic;text-decoration:underline">UIElement</span><span style="color:#F8F8F2"> {</span></span>
125-
<span class="line"><span style="color:#A6E22E"> connectedCallback</span><span style="color:#F8F8F2">() {</span></span>
126-
<span class="line"></span>
127-
<span class="line"><span style="color:#88846F"> // Set defaults from attributes</span></span>
128-
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'open'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F">this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">hasAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'open'</span><span style="color:#F8F8F2">), </span><span style="color:#AE81FF">false</span><span style="color:#F8F8F2">)</span></span>
129-
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'collapsible'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F">this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">hasAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'collapsible'</span><span style="color:#F8F8F2">), </span><span style="color:#AE81FF">false</span><span style="color:#F8F8F2">)</span></span>
125+
<span class="line"><span style="color:#F92672"> static</span><span style="color:#F8F8F2"> states </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> {</span></span>
126+
<span class="line"><span style="color:#F8F8F2"> open: asBoolean,</span></span>
127+
<span class="line"><span style="color:#F8F8F2"> collapsible: asBoolean</span></span>
128+
<span class="line"><span style="color:#F8F8F2"> }</span></span>
130129
<span class="line"></span>
130+
<span class="line"><span style="color:#A6E22E"> connectedCallback</span><span style="color:#F8F8F2">() {</span></span>
131+
<span class="line"><span style="color:#FD971F"> super</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">connectedCallback</span><span style="color:#F8F8F2">()</span></span>
132+
<span class="line"><span style="color:#F8F8F2"> </span></span>
131133
<span class="line"><span style="color:#88846F"> // Handle open and collapsible state changes</span></span>
132134
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.self.</span><span style="color:#A6E22E">sync</span><span style="color:#F8F8F2">(</span></span>
133135
<span class="line"><span style="color:#A6E22E"> toggleAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'open'</span><span style="color:#F8F8F2">),</span></span>

‎docs/examples/media-context.html

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -82,21 +82,13 @@
8282
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_ORIENTATION, screenOrientation.matches </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> ORIENTATION_LANDSCAPE </span><span style="color:#F92672">:</span><span style="color:#F8F8F2"> ORIENTATION_PORTRAIT)</span></span>
8383
<span class="line"></span>
8484
<span class="line"><span style="color:#88846F"> // event listeners</span></span>
85-
<span class="line"><span style="color:#F8F8F2"> reducedMotion.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span></span>
86-
<span class="line"><span style="color:#E6DB74"> 'change'</span><span style="color:#F8F8F2">,</span></span>
87-
<span class="line"><span style="color:#FD971F;font-style:italic"> e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_MOTION, e.matches)</span></span>
88-
<span class="line"><span style="color:#F8F8F2"> )</span></span>
89-
<span class="line"><span style="color:#F8F8F2"> colorScheme.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span></span>
90-
<span class="line"><span style="color:#E6DB74"> 'change'</span><span style="color:#F8F8F2">,</span></span>
91-
<span class="line"><span style="color:#FD971F;font-style:italic"> e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_THEME, e.matches </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> THEME_DARK </span><span style="color:#F92672">:</span><span style="color:#F8F8F2"> THEME_LIGHT)</span></span>
92-
<span class="line"><span style="color:#F8F8F2"> )</span></span>
85+
<span class="line"><span style="color:#F8F8F2"> reducedMotion.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_MOTION, e.matches))</span></span>
86+
<span class="line"><span style="color:#F8F8F2"> colorScheme.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_THEME, e.matches </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> THEME_DARK </span><span style="color:#F92672">:</span><span style="color:#F8F8F2"> THEME_LIGHT))</span></span>
9387
<span class="line"><span style="color:#F8F8F2"> screenSmall.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_VIEWPORT, </span><span style="color:#A6E22E">getViewport</span><span style="color:#F8F8F2">()))</span></span>
9488
<span class="line"><span style="color:#F8F8F2"> screenMedium.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_VIEWPORT, </span><span style="color:#A6E22E">getViewport</span><span style="color:#F8F8F2">()))</span></span>
9589
<span class="line"><span style="color:#F8F8F2"> screenLarge.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_VIEWPORT, </span><span style="color:#A6E22E">getViewport</span><span style="color:#F8F8F2">()))</span></span>
9690
<span class="line"><span style="color:#F8F8F2"> screenXLarge.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_VIEWPORT, </span><span style="color:#A6E22E">getViewport</span><span style="color:#F8F8F2">()))</span></span>
97-
<span class="line"><span style="color:#F8F8F2"> screenOrientation.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
98-
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_THEME, e.matches </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> ORIENTATION_LANDSCAPE </span><span style="color:#F92672">:</span><span style="color:#F8F8F2"> ORIENTATION_PORTRAIT)</span></span>
99-
<span class="line"><span style="color:#F8F8F2"> })</span></span>
91+
<span class="line"><span style="color:#F8F8F2"> screenOrientation.</span><span style="color:#A6E22E">addEventListener</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(MEDIA_THEME, e.matches </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> ORIENTATION_LANDSCAPE </span><span style="color:#F92672">:</span><span style="color:#F8F8F2"> ORIENTATION_PORTRAIT))</span></span>
10092
<span class="line"><span style="color:#F8F8F2"> }</span></span>
10193
<span class="line"><span style="color:#F8F8F2">}</span></span>
10294
<span class="line"><span style="color:#F8F8F2">MediaContext.</span><span style="color:#A6E22E">define</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'media-context'</span><span style="color:#F8F8F2">)</span></span></code></pre>

0 commit comments

Comments
 (0)