You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 lines
17 KiB
525 lines
17 KiB
<script lang="ts">
|
|
import { Progress, type ProgressShape, type ProgressSize } from '$uix/eidos/components/progress';
|
|
import { compileMorfo } from '$uix/morfo';
|
|
import { progressMorfo } from '@/uix/morfo/components/progress';
|
|
|
|
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
|
|
type Orientation = 'horizontal' | 'vertical';
|
|
type TraceEntry = { event: string; family: string; intent?: string; at: number };
|
|
|
|
let tab = $state<Tab>('live');
|
|
let trace = $state<TraceEntry[]>([]);
|
|
let stageRef = $state<HTMLElement | null>(null);
|
|
let rawValue = $state(42);
|
|
let min = $state(0);
|
|
let max = $state(100);
|
|
let indeterminate = $state(false);
|
|
let orientation = $state<Orientation>('horizontal');
|
|
let size = $state<ProgressSize>('md');
|
|
let shape = $state<ProgressShape>('linear');
|
|
let labelText = $state('Uploading assets');
|
|
let valueTextOverride = $state('');
|
|
|
|
const value = $derived(indeterminate ? null : rawValue);
|
|
const valueText = $derived(valueTextOverride.trim() || undefined);
|
|
const stateLabel = $derived(
|
|
indeterminate ? 'indeterminate' : rawValue >= max ? 'loaded' : 'loading'
|
|
);
|
|
|
|
const compiled = compileMorfo(progressMorfo);
|
|
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
|
const events = $derived([...compiled.actions.byName.values()]);
|
|
|
|
$effect(() => {
|
|
const el = stageRef;
|
|
if (!el) return;
|
|
const obs = new MutationObserver((mutations) => {
|
|
for (const m of mutations) {
|
|
if (m.attributeName !== 'data-event') continue;
|
|
const target = m.target as Element;
|
|
const ev = target.getAttribute('data-event');
|
|
if (!ev) continue;
|
|
trace = [
|
|
{
|
|
event: ev,
|
|
family: target.getAttribute('data-event-family') ?? '—',
|
|
intent: target.getAttribute('data-event-intent') ?? undefined,
|
|
at: Date.now()
|
|
},
|
|
...trace
|
|
].slice(0, 6);
|
|
}
|
|
});
|
|
obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
|
|
return () => obs.disconnect();
|
|
});
|
|
|
|
const somaSnippet = $derived(
|
|
[
|
|
"<script lang='ts'>",
|
|
" import * as Progress from '$soma/components/progress';",
|
|
` let value = $state(${indeterminate ? 'null' : rawValue});`,
|
|
'</' + 'script>',
|
|
'',
|
|
'<Progress.Provider',
|
|
` value={value}`,
|
|
min !== 0 && ` min={${min}}`,
|
|
max !== 100 && ` max={${max}}`,
|
|
orientation !== 'horizontal' && ` orientation="${orientation}"`,
|
|
valueText && ` valueText="${valueText}"`,
|
|
'>',
|
|
` <Progress.Label>${labelText}</Progress.Label>`,
|
|
' <Progress.ValueText />',
|
|
' <Progress.Indicator />',
|
|
'</Progress.Provider>'
|
|
]
|
|
.filter(Boolean)
|
|
.join('\n')
|
|
);
|
|
|
|
const eidosSnippet = $derived(
|
|
[
|
|
"<script lang='ts'>",
|
|
" import { Progress } from '$uix/eidos/components/progress';",
|
|
` let value = $state(${indeterminate ? 'null' : rawValue});`,
|
|
'</' + 'script>',
|
|
'',
|
|
'<Progress',
|
|
` value={value}`,
|
|
size !== 'md' && ` size="${size}"`,
|
|
shape !== 'linear' && ` shape="${shape}"`,
|
|
min !== 0 && ` min={${min}}`,
|
|
max !== 100 && ` max={${max}}`,
|
|
orientation !== 'horizontal' && ` orientation="${orientation}"`,
|
|
valueText && ` valueText="${valueText}"`,
|
|
'>',
|
|
` <Progress.Label>${labelText}</Progress.Label>`,
|
|
' <Progress.ValueText />',
|
|
' <Progress.Indicator />',
|
|
'</Progress>'
|
|
]
|
|
.filter(Boolean)
|
|
.join('\n')
|
|
);
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Status · Progress</div>
|
|
<h1 data-uix-page-title>Progress</h1>
|
|
<p data-uix-page-lede>
|
|
Task completion primitive with determinate and indeterminate states. Soma owns <code
|
|
>role="progressbar"</code
|
|
>, value ARIA and state; Eidos adds visual size, shape and recipe styling.
|
|
</p>
|
|
<div data-uix-page-meta>
|
|
<span data-uix-meta-pill
|
|
><span data-uix-meta-key>parts</span>{compiled.parts.order.length}</span
|
|
>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>events</span>{events.length}</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>3</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>shapes</span>2</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>states</span>3</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div data-uix-stage>
|
|
<div data-uix-stage-area bind:this={stageRef}>
|
|
<div style="inline-size: min(30rem, 100%); display: grid; gap: var(--uix-space-3);">
|
|
<Progress
|
|
{value}
|
|
{min}
|
|
{max}
|
|
{orientation}
|
|
{size}
|
|
{shape}
|
|
{valueText}
|
|
aria-label={labelText}
|
|
>
|
|
<Progress.Label>{labelText}</Progress.Label>
|
|
<Progress.ValueText />
|
|
<Progress.Indicator />
|
|
</Progress>
|
|
</div>
|
|
</div>
|
|
<div data-uix-stage-trace>
|
|
<span data-uix-stage-trace-key>trace</span>
|
|
<span>{trace.length === 0 ? 'no semantic events' : `${trace.length} event(s)`}</span>
|
|
<span style="color: var(--uix-text-faint)">·</span>
|
|
<span data-uix-stage-trace-key>state</span>
|
|
<span data-uix-stage-trace-event>{stateLabel}</span>
|
|
<span style="color: var(--uix-text-faint)">·</span>
|
|
<span data-uix-stage-trace-key>value</span>
|
|
<span>{value === null ? 'unknown' : `${value} / ${max}`}</span>
|
|
<span style="margin-inline-start: auto;">
|
|
<span data-uix-stage-trace-key>size</span>
|
|
{size}
|
|
<span data-uix-stage-trace-key style="margin-inline-start: var(--uix-space-2);">shape</span>
|
|
{shape}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-uix-tabs role="tablist">
|
|
<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
|
|
<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}
|
|
>API <span data-uix-tab-count>9</span></button
|
|
>
|
|
<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
|
|
<span data-uix-layer-badge="morfo">morfo</span>
|
|
<span data-uix-tab-count>{partsList.length}p · {events.length}e</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
|
|
<span data-uix-layer-badge="sema">sema</span>
|
|
<span data-uix-tab-count>{events.length}</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
|
|
>Recipe</button
|
|
>
|
|
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
|
|
</div>
|
|
|
|
{#if tab === 'live'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Controls</h2>
|
|
<p data-uix-section-desc>
|
|
Controls are grouped by owner. <span data-uix-layer-badge="soma">soma</span>
|
|
owns value, bounds, orientation and ARIA; <span data-uix-layer-badge="eidos">eidos</span>
|
|
owns visual size and shape.
|
|
</p>
|
|
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="soma">soma</span> props · value state
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>value <span data-uix-control-hint>{rawValue}</span></span>
|
|
<input type="range" bind:value={rawValue} {min} {max} disabled={indeterminate} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>indeterminate</span>
|
|
<span data-uix-switch
|
|
><input type="checkbox" bind:checked={indeterminate} /><span data-uix-switch-label
|
|
>{indeterminate ? 'on' : 'off'}</span
|
|
></span
|
|
>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>min</span>
|
|
<input type="number" bind:value={min} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>max</span>
|
|
<input type="number" bind:value={max} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>orientation</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['horizontal', 'vertical'] as o}
|
|
<button
|
|
data-uix-chip
|
|
data-active={orientation === o}
|
|
onclick={() => (orientation = o as Orientation)}>{o}</button
|
|
>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>valueText override</span>
|
|
<input type="text" bind:value={valueTextOverride} placeholder="e.g. 42 of 100 MB" />
|
|
</label>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="eidos">eidos</span> props · visual treatment
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>size</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['sm', 'md', 'lg'] as s}
|
|
<button
|
|
data-uix-chip
|
|
data-active={size === s}
|
|
onclick={() => (size = s as ProgressSize)}>{s}</button
|
|
>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>shape</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['linear', 'circular'] as s}
|
|
<button
|
|
data-uix-chip
|
|
data-active={shape === s}
|
|
onclick={() => (shape = s as ProgressShape)}>{s}</button
|
|
>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>label text</span>
|
|
<input type="text" bind:value={labelText} />
|
|
</label>
|
|
</div>
|
|
|
|
<div data-uix-code>
|
|
<div data-uix-code-head>
|
|
<span data-uix-layer-badge="soma">soma</span>
|
|
<span>headless · ARIA + value contract</span>
|
|
<span data-uix-code-lang>svelte</span>
|
|
</div>
|
|
<pre><code>{somaSnippet}</code></pre>
|
|
</div>
|
|
<div data-uix-code style="margin-top: var(--uix-space-3);">
|
|
<div data-uix-code-head>
|
|
<span data-uix-layer-badge="eidos">eidos</span>
|
|
<span>visual · adds size + shape</span>
|
|
<span data-uix-code-lang>svelte</span>
|
|
</div>
|
|
<pre><code>{eidosSnippet}</code></pre>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'api'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>API reference</h2>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
|
|
<tbody>
|
|
<tr
|
|
><td class="name">value</td><td class="type">number | null</td><td class="default"
|
|
>0</td
|
|
><td>Current progress. `null` enters indeterminate mode.</td></tr
|
|
>
|
|
<tr
|
|
><td class="name">min / max</td><td class="type">number</td><td class="default"
|
|
>0 / 100</td
|
|
><td>Progress bounds.</td></tr
|
|
>
|
|
<tr
|
|
><td class="name">orientation</td><td class="type">'horizontal' | 'vertical'</td><td
|
|
class="default">'horizontal'</td
|
|
><td>Data/CSS orientation.</td></tr
|
|
>
|
|
<tr
|
|
><td class="name">valueText</td><td class="type">string</td><td class="default empty"
|
|
>—</td
|
|
><td>Accessible value text override.</td></tr
|
|
>
|
|
<tr
|
|
><td class="name">aria-label / aria-labelledby</td><td class="type">string</td><td
|
|
class="default">translated Loading</td
|
|
><td>Accessible name.</td></tr
|
|
>
|
|
<tr
|
|
><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td
|
|
class="type">ResponsiveProp<'sm'|'md'|'lg'></td
|
|
><td class="default">'md'</td><td>Track thickness and text scale.</td></tr
|
|
>
|
|
<tr
|
|
><td class="name">shape <span data-uix-tag data-kind="eidos">eidos</span></td><td
|
|
class="type">ResponsiveProp<'linear'|'circular'></td
|
|
><td class="default">'linear'</td><td>Visual presentation: bar or ring.</td></tr
|
|
>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'morfo'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>
|
|
<span data-uix-layer-badge="morfo">morfo</span> · declarative contract
|
|
</h2>
|
|
<p data-uix-section-desc>Source: <code>src/uix/morfo/components/progress.ts</code>.</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Field</th><th>Value</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">name</td><td class="type">"{progressMorfo.name}"</td></tr>
|
|
<tr><td class="name">kebab</td><td class="type">"{progressMorfo.kebab}"</td></tr>
|
|
<tr
|
|
><td class="name">scope</td><td class="type"
|
|
>[{progressMorfo.scope.map((s) => `"${s}"`).join(', ')}]</td
|
|
></tr
|
|
>
|
|
<tr
|
|
><td class="name">parts.length</td><td class="default"
|
|
>{progressMorfo.parts.length}</td
|
|
></tr
|
|
>
|
|
<tr><td class="name">events.length</td><td class="default">0</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>Parts</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead
|
|
><tr
|
|
><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>States</th><th
|
|
>Optional</th
|
|
></tr
|
|
></thead
|
|
>
|
|
<tbody>
|
|
{#each partsList as part}
|
|
<tr>
|
|
<td class="name">{part.kebab}</td>
|
|
<td><code data-uix-part-marker>[{part.marker}]</code></td>
|
|
<td class="type"><{part.defaultElement}></td>
|
|
<td class="type">{part.role ?? '—'}</td>
|
|
<td class="default">{part.states.length ? part.states.join(' | ') : '—'}</td>
|
|
<td class="default">{part.optional ? 'yes' : 'no'}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{#each progressMorfo.parts as rawPart}
|
|
{@const partAny = rawPart as unknown as {
|
|
kebab: string;
|
|
aria?: ReadonlyArray<{
|
|
attr: string;
|
|
value: { kind: string };
|
|
condition?: { when: string; prop?: string };
|
|
severity?: string;
|
|
}>;
|
|
}}
|
|
{@const dataAttrs = compiled.contracts.dataAttrsByPart.get(partAny.kebab) ?? []}
|
|
{@const ariaAttrs = partAny.aria ?? []}
|
|
{#if dataAttrs.length || ariaAttrs.length}
|
|
<div data-uix-subsection-head>{partAny.kebab}</div>
|
|
{#if dataAttrs.length}
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>data-attr</th><th>Values</th><th>Source</th></tr></thead>
|
|
<tbody>
|
|
{#each dataAttrs as attr}
|
|
<tr
|
|
><td class="name">{attr.attr}</td><td class="type"
|
|
>{attr.values ? attr.values.join(' | ') : '—'}</td
|
|
><td class="default"
|
|
>{'value' in attr && attr.value
|
|
? (attr as { value: { kind: string } }).value.kind
|
|
: '—'}</td
|
|
></tr
|
|
>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
{#if ariaAttrs.length}
|
|
<div data-uix-table-wrap style="margin-top: var(--uix-space-2);">
|
|
<table data-uix-table>
|
|
<thead
|
|
><tr><th>aria-attr</th><th>Source</th><th>Condition</th><th>Severity</th></tr
|
|
></thead
|
|
>
|
|
<tbody>
|
|
{#each ariaAttrs as a}
|
|
<tr
|
|
><td class="name">{a.attr}</td><td class="type">{a.value.kind}</td><td
|
|
class="default"
|
|
>{a.condition
|
|
? `when ${a.condition.when}${a.condition.prop ? ` (${a.condition.prop})` : ''}`
|
|
: 'always'}</td
|
|
><td class="default">{a.severity ?? 'required'}</td></tr
|
|
>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
{/each}
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'sema'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>
|
|
<span data-uix-layer-badge="sema">sema</span> · events
|
|
</h2>
|
|
<p data-uix-section-desc>
|
|
This morfo declares no semantic events. If the component grows user-triggered perceptual
|
|
feedback, the event must be declared in Morfo first and surfaced here.
|
|
</p>
|
|
<div data-uix-empty-state>No Sema events declared.</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'recipe'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Eidos recipe</h2>
|
|
<p data-uix-section-desc>
|
|
Selectors at <code>src/uix/eidos/components/progress/progress.css</code>. The fill reads
|
|
Soma's <code>--_progress-value-pct</code> and state attrs.
|
|
</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Selector</th><th>Source</th></tr></thead>
|
|
<tbody>
|
|
<tr
|
|
><td class="name">[data-progress][data-state]</td><td
|
|
><span data-uix-tag data-kind="soma">morfo</span></td
|
|
></tr
|
|
>
|
|
<tr
|
|
><td class="name">[data-progress][data-orientation]</td><td
|
|
><span data-uix-tag data-kind="soma">morfo</span></td
|
|
></tr
|
|
>
|
|
<tr
|
|
><td class="name">[data-progress][data-size]</td><td
|
|
><span data-uix-tag data-kind="eidos">eidos</span></td
|
|
></tr
|
|
>
|
|
<tr
|
|
><td class="name">[data-progress][data-shape]</td><td
|
|
><span data-uix-tag data-kind="eidos">eidos</span></td
|
|
></tr
|
|
>
|
|
<tr
|
|
><td class="name"
|
|
>[data-progress-label] / [data-progress-value-text] / [data-progress-indicator]</td
|
|
><td><span data-uix-tag data-kind="soma">morfo</span></td></tr
|
|
>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'a11y'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Accessibility</h2>
|
|
<p data-uix-section-desc>
|
|
Progressbar values represent a task that advances over time. Indeterminate mode omits <code
|
|
>aria-valuenow</code
|
|
> because the current value is unknown.
|
|
</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Attribute</th><th>Value</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>role</td><td class="type">progressbar</td></tr>
|
|
<tr><td>aria-valuemin / aria-valuemax</td><td class="type">min / max</td></tr>
|
|
<tr><td>aria-valuenow</td><td class="type">value when determinate</td></tr>
|
|
<tr><td>aria-valuetext</td><td class="type">valueText when supplied</td></tr>
|
|
<tr><td>aria-label / aria-labelledby</td><td class="type">accessible name</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
</div>
|