@zeix/le-truc 0.15.0

package/examples/form-combobox/form-combobox.ts

@@ -0,0 +1,128 @@
+import {
+	batch,
+	type Component,
+	createComputed,
+	createSensor,
+	createState,
+	defineComponent,
+	on,
+	pass,
+	read,
+	setAttribute,
+	setProperty,
+	setText,
+	show,
+} from '../..'
+import { clearEffects, clearMethod } from '../_common/clear'
+import { FormListboxProps } from '../form-listbox/form-listbox'
+
+export type FormComboboxProps = {
+	value: string
+	readonly length: number
+	error: string
+	description: string
+	readonly clear: () => void
+}
+
+type FormComboboxUI = {
+	textbox: HTMLInputElement
+	listbox: Component<FormListboxProps>
+	clear?: HTMLButtonElement
+	error?: HTMLElement
+	description?: HTMLElement
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'form-combobox': Component<FormComboboxProps>
+	}
+}
+
+export default defineComponent<FormComboboxProps, FormComboboxUI>(
+	'form-combobox',
+	{
+		value: read(ui => ui.textbox.value, ''),
+		length: createSensor(
+			read(ui => ui.textbox.value.length, 0),
+			'textbox',
+			{
+				input: ({ target }) => target.value.length,
+			},
+		),
+		error: '',
+		description: read(ui => ui.description?.textContent, ''),
+		clear: clearMethod,
+	},
+	({ first }) => ({
+		textbox: first('input', 'Needed to enter value.'),
+		listbox: first('form-listbox', 'Needed to display options.'),
+		clear: first('button.clear'),
+		error: first('form-combobox > .error'),
+		description: first('.description'),
+	}),
+	ui => {
+		const { host, error, description, listbox, textbox } = ui
+		const errorId = error?.id
+		const descriptionId = description?.id
+
+		const showPopup = createState(false)
+		const isExpanded = createComputed(
+			() => showPopup.get() && listbox.options.length > 0,
+		)
+
+		return {
+			host: [
+				setAttribute('value'),
+				on('keyup', ({ key }) => {
+					if (key === 'Escape') showPopup.set(false)
+					if (key === 'Delete') host.clear()
+				}),
+			],
+			textbox: [
+				setProperty('ariaInvalid', () => String(!!host.error)),
+				setAttribute('aria-errormessage', () =>
+					host.error && errorId ? errorId : null,
+				),
+				setAttribute('aria-describedby', () =>
+					host.description && descriptionId ? descriptionId : null,
+				),
+				setProperty('ariaExpanded', () => String(isExpanded.get())),
+				on('input', () => {
+					textbox.checkValidity()
+					batch(() => {
+						host.value = textbox.value
+						host.error = textbox.validationMessage ?? ''
+						showPopup.set(true)
+					})
+				}),
+				on('keydown', e => {
+					const { key, altKey } = e
+					if (key === 'ArrowDown') {
+						if (altKey) showPopup.set(true)
+						if (isExpanded.get()) listbox.options[0]?.focus()
+					}
+				}),
+			],
+			listbox: [
+				show(isExpanded),
+				pass({
+					filter: () => host.value,
+				}),
+				on('change', ({ target }) => {
+					if (target instanceof HTMLInputElement) {
+						textbox.value = target.value
+						textbox.checkValidity()
+						batch(() => {
+							host.value = target.value
+							host.error = textbox.validationMessage ?? ''
+							showPopup.set(false)
+						})
+					}
+				}),
+			],
+			clear: [...clearEffects(ui)],
+			error: [setText('error')],
+			description: [setText('description')],
+		}
+	},
+)

package/examples/form-listbox/form-listbox.css

@@ -0,0 +1,71 @@
+form-listbox {
+	display: block;
+	margin: 0;
+
+	module-scrollarea {
+		max-height: 40rem;
+		background-color: var(--color-background);
+
+		&:has([role="group"]) {
+			scroll-padding-block-start: var(--space-xl);
+		}
+	}
+
+	[role="listbox"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		background: var(--color-input);
+	}
+
+	[role="group"] {
+		margin-block-end: var(--space-xs);
+
+		&:not(:has(button:not([hidden]))) {
+			display: none;
+		}
+	}
+
+	[role="presentation"] {
+		position: sticky;
+		top: 0;
+		background-color: var(--color-background);
+		padding: var(--space-xs) var(--space-m);
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-bold);
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		margin-block-end: var(--space-xxs);
+	}
+
+	[role="option"] {
+		display: block;
+		width: 100%;
+		text-align: left;
+		margin: 0;
+		padding: var(--space-xs) var(--space-m);
+		border: 0;
+		font-size: var(--font-size-s);
+		line-height: var(--line-height-s);
+		background: transparent;
+		color: var(--color-text);
+		cursor: pointer;
+		transition: background var(--transition-short) var(--easing-inout);
+
+		&[aria-selected="true"] {
+			background: var(--color-selection-selected);
+			color: var(--color-text-inverted);
+		}
+
+		&:hover {
+			background: var(--color-selection-hover);
+
+			&[aria-selected="true"] {
+				background: var(--color-selection-active);
+			}
+		}
+	}
+}

package/examples/form-listbox/form-listbox.html

@@ -0,0 +1,67 @@
+<form>
+	<form-listbox id="timezone" src="/form-listbox/mocks/timezones.json">
+		<input type="hidden" name="timezone" />
+		<card-callout>
+			<p class="loading" role="status">Loading...</p>
+			<p class="error" role="alert" aria-live="assertive" hidden></p>
+		</card-callout>
+		<module-scrollarea orientation="vertical">
+			<div role="listbox" aria-label="Timezones" hidden></div>
+		</module-scrollarea>
+	</form-listbox>
+</form>
+
+<!-- Declarative inline HTML example -->
+<form>
+	<form-listbox id="colors">
+		<input type="hidden" name="color" />
+		<div role="listbox" aria-label="Colors">
+			<button type="button" role="option" tabindex="-1" value="red">Red</button>
+			<button type="button" role="option" tabindex="-1" value="green">
+				Green
+			</button>
+			<button type="button" role="option" tabindex="-1" value="blue">
+				Blue
+			</button>
+			<button type="button" role="option" tabindex="-1" value="yellow">
+				Yellow
+			</button>
+			<button type="button" role="option" tabindex="-1" value="purple">
+				Purple
+			</button>
+		</div>
+	</form-listbox>
+</form>
+
+<!-- Declarative inline HTML example with groups -->
+<form>
+	<form-listbox id="fruits">
+		<input type="hidden" name="fruit" />
+		<div role="listbox" aria-label="Fruits">
+			<div role="group" aria-labelledby="fruits-citrus">
+				<div role="presentation" id="fruits-citrus">Citrus</div>
+				<button type="button" role="option" tabindex="-1" value="orange">
+					Orange
+				</button>
+				<button type="button" role="option" tabindex="-1" value="lemon">
+					Lemon
+				</button>
+				<button type="button" role="option" tabindex="-1" value="lime">
+					Lime
+				</button>
+			</div>
+			<div role="group" aria-labelledby="fruits-berries">
+				<div role="presentation" id="fruits-berries">Berries</div>
+				<button type="button" role="option" tabindex="-1" value="strawberry">
+					Strawberry
+				</button>
+				<button type="button" role="option" tabindex="-1" value="blueberry">
+					Blueberry
+				</button>
+				<button type="button" role="option" tabindex="-1" value="raspberry">
+					Raspberry
+				</button>
+			</div>
+		</div>
+	</form-listbox>
+</form>