Merge pull request #43 from zeixcom/feature/docs-data-flow

docs(data-flow): simplify todo-app

Author: estherbrunner

docs-src/components/todo-app/todo-app.css

@@ -2,16 +2,66 @@ todo-app {
 	display: flex;
 	flex-direction: column;
 	gap: var(--space-l);
+	container-type: inline-size;
+
+	& form {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--space-m);
+		justify-content: space-between;
+	}
+
+	& ol {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-m);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		& li {
+			display: flex;
+			justify-content: space-between;
+			gap: var(--space-m);
+			margin: 0;
+			padding: 0;
+		}
+	
+		&[filter="completed"] li:not(:has([checked])) {
+			display: none;
+		}
+	
+		&[filter="active"] li:has([checked]) {
+			display: none;
+		}
+	}
 
 	& footer {
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;
 		align-items: center;
 		gap: var(--space-m);
 		margin: 0;
+
+		.todo-count {
+			justify-self: start;
+			
+			& p {
+				font-size: var(--font-size-s);
+				margin: 0;
+			}
+		}
 
 		.clear-completed {
 			justify-self: end;
 		}
 	}
 }
+
+@container (width > 32rem) {
+	todo-app form {
+		flex-direction: row;
+		align-items: flex-end;
+	}
+}

docs-src/components/todo-app/todo-app.html

@@ -1,40 +1,41 @@
-<<todo-app>
-	<todo-form>
-		<form action="#">
-			<input-field>
-				<label for="add-todo">What needs to be done?</label>
-				<div class="row">
-					<div class="group auto">
-						<input id="add-todo" type="text" value="" required>
-					</div>
+<todo-app>
+	<form action="#">
+		<input-field>
+			<label for="add-todo">What needs to be done?</label>
+			<div class="row">
+				<div class="group auto">
+					<input id="add-todo" type="text" value="" required>
 				</div>
-			</input-field>
-			<input-button class="submit">
-				<button type="submit" class="primary" disabled>Add Todo</button>
+			</div>
+		</input-field>
+		<input-button class="submit">
+			<button type="submit" class="primary" disabled>Add Todo</button>
+		</input-button>
+	</form>
+	<ol filter="all"></ol>
+	<template>
+		<li>
+			<input-checkbox class="todo">
+				<label>
+					<input type="checkbox" class="visually-hidden" />
+					<span></span>
+				</label>
+			</input-checkbox>
+			<input-button class="delete">
+				<button type="button">Delete</button>
 			</input-button>
-		</form>
-	</todo-form>
-	<todo-list filter="all">
-		<ol></ol>
-		<template>
-			<li>
-				<input-checkbox class="todo">
-					<label>
-						<input type="checkbox" class="visually-hidden" />
-						<span></span>
-					</label>
-				</input-checkbox>
-				<input-button>
-					<button type="button">Delete</button>
-				</input-button>
-			</li>
-		</template>
-	</todo-list>
+		</li>
+	</template>
 	<footer>
-		<todo-count>
+		<div class="todo-count">
 			<p class="all-done">Well done, all done!</p>
-			<p class="remaining"><span></span> tasks left</p>
-		</todo-count>
+			<p class="remaining">
+				<span class="count"></span>
+				<span class="singular">task</span>
+				<span class="plural">tasks</span>
+				remaining
+			</p>
+		</div>
 		<input-radiogroup value="all" class="split-button">
 			<fieldset>
 				<legend class="visually-hidden">Filter</legend>

docs-src/components/todo-app/todo-app.ts

@@ -1,33 +1,90 @@
-import { UIElement } from "@zeix/ui-element"
-import type { TodoCountObject, TodoList } from "../todo-list/todo-list"
+import { setAttribute, setProperty, setText, UIElement } from "@zeix/ui-element"
 import type { InputRadiogroup } from "../input-radiogroup/input-radiogroup"
-import type { AddTodoEvent } from "../todo-form/todo-form"
+import type { InputField } from "../input-field/input-field"
+import type { InputCheckbox } from "../input-checkbox/input-checkbox"
 
 export class TodoApp extends UIElement {
 	connectedCallback() {
-		const todoList = this.querySelector<TodoList>('todo-list')
+		const input = this.querySelector<InputField>('input-field')
 
-		// Event listener on own element
-		this.self.on('add-todo', (e: Event) => {
-			todoList?.addItem((e as AddTodoEvent).detail)
-		})
+		// State signal 'tasks': State<InputCheckbox[]>
+		this.#updateTasks()
+
+		// Derived signals
+		this.set('total', () =>
+			this.get<InputCheckbox[]>('tasks')!.length
+		)
+		this.set('completed', () =>
+			this.get<InputCheckbox[]>('tasks')!.filter(el => el.get('checked')).length
+        )
+		this.set('active', () =>
+			this.get<number>('total')! - this.get<number>('completed')!
+		)
+		this.set('filter', () =>
+            this.querySelector<InputRadiogroup>('input-radiogroup')?.get<string>('value') ?? 'all'
+        )
 
-		// Coordinate todo-count
-		this.first('todo-count').pass({
-			active: () => (todoList?.get('count') as TodoCountObject).active
+		this.first('form').on('submit', (e: Event) => {
+			e.preventDefault()
+
+			// Wait for microtask to ensure the input field value is updated
+			queueMicrotask(() => {
+				const value = input?.get<string>('value')?.trim()
+				if (value) {
+					const ol = this.querySelector('ol')
+					const fragment = this.querySelector('template')
+						?.content.cloneNode(true) as DocumentFragment
+					const span = fragment.querySelector('span')
+					if (ol && fragment && span) {
+						span.textContent = value
+						ol.appendChild(fragment)
+					}
+					this.#updateTasks()
+					input?.clear()
+				}
+			})
 		})
 
-		// Coordinate todo-list
-		this.first('todo-list').pass({
-			filter: () => this.querySelector<InputRadiogroup>('input-radiogroup')?.get('value')
+		// Coordinate .submit button
+		this.first('.submit').pass({
+			disabled: () => input?.get('empty')
 		})
 
+		// Event handler and effect on ol element
+		this.first('ol')
+			.on('click', (e: Event) => {
+				const el = e.target as HTMLElement
+				if (el.localName === 'button') {
+					el.closest('li')?.remove()
+					this.#updateTasks()
+				}
+			})
+			.sync(setAttribute('filter'))
+		
+		// Effects on .todo-count elements
+		this.first('.count').sync(setText('active'))
+		const setAriaHidden = (fn: (n: number) => boolean) =>
+			setProperty('ariaHidden', () => fn(this.get<number>('active')!))
+		this.first('.singular').sync(setAriaHidden(n => n > 1))
+		this.first('.plural').sync(setAriaHidden(n => n === 1))
+		this.first('.remaining').sync(setAriaHidden(n => !n))
+		this.first('.all-done').sync(setAriaHidden(n => !!n))
+
 		// Coordinate .clear-completed button
 		this.first('.clear-completed')
-			.on('click', () => todoList?.clearCompleted())
+			.on('click', () => {
+				this.get<InputCheckbox[]>('tasks')!
+					.filter(el => el.get('checked'))
+					.forEach(el => el.parentElement?.remove())
+				this.#updateTasks()
+			})
 			.pass({
-				disabled: () => !(todoList?.get('count') as TodoCountObject).completed
+				disabled: () => !(this.get('completed'))
 			})
 	}
+
+	#updateTasks() {
+		this.set('tasks', Array.from(this.querySelectorAll('input-checkbox')))
+	}
 }
 TodoApp.define('todo-app')