Mirrors the date-field pattern (Provider visual root + Label / Input / Segment / HiddenInput parts; ColorField also exposes FormatSelect). Soma owns segment editing, ARIA spinbuttons, validation, format switching and form submission; Eidos adds size (xs..xl), control variant (surface/outline/ghost) and intent color recipes. Adds time-field and color-field recipe sections to recipes/base.ts (regenerated generated/base.css) and registers both routes in the sidebar nav. apg=spinbutton declared on both morfos. READMEs follow the Baseline / Superficie / Comparativa / Decisiones / Gaps / Referencias template required by audit F-1.x. All 67 component-audit components PASS, 38/38 morfo:check PASS, svelte-check 0 errors/0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>active-uix
parent
ec878fd2ce
commit
ff279ae828
@ -0,0 +1,84 @@
|
|||||||
|
# Eidos ColorField
|
||||||
|
|
||||||
|
Segmented color input. Soma owns format switching (hex/rgb/hsl), channel
|
||||||
|
editing, alpha, ARIA spinbuttons and validation. Eidos adds size,
|
||||||
|
variant, intent color and recipe styling on top.
|
||||||
|
|
||||||
|
## Baseline
|
||||||
|
|
||||||
|
Air no tenía un `ColorField` segmentado en la rama anterior — sólo un
|
||||||
|
`ColorPicker` con saturación + hue + alpha. La referencia local real
|
||||||
|
es Soma `color-field`, que es **único en UIX**: ningún framework
|
||||||
|
externo (Ark, Chakra, Bits) ofrece edición canal-a-canal de un color
|
||||||
|
como segmentos accesibles. La receta Eidos sólo envuelve la superficie
|
||||||
|
Soma con tamaños, variante visual y paleta de intents. Referencias
|
||||||
|
externas para format switcher / alpha: Ark UI Color Picker, Chakra
|
||||||
|
Color Picker, Bits UI Color Picker.
|
||||||
|
|
||||||
|
## Superficie
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<ColorField bind:value bind:format placeholder={brandColor} size="md" variant="surface" color="primary">
|
||||||
|
<ColorField.Label>Brand color</ColorField.Label>
|
||||||
|
<ColorField.Input name="brand">
|
||||||
|
{#snippet children({ segments })}
|
||||||
|
{#each segments as { part, value } (part + value)}
|
||||||
|
<ColorField.Segment {part}>{value}</ColorField.Segment>
|
||||||
|
{/each}
|
||||||
|
<ColorField.FormatSelect />
|
||||||
|
{/snippet}
|
||||||
|
</ColorField.Input>
|
||||||
|
</ColorField>
|
||||||
|
```
|
||||||
|
|
||||||
|
Partes públicas: `Label`, `Input`, `Segment`, `FormatSelect`, `HiddenInput`.
|
||||||
|
|
||||||
|
## Comparativa
|
||||||
|
|
||||||
|
| Capacidad | Soma/Eidos | Ark UI | Chakra UI | Bits UI |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| Input segmentado (canal a canal) | Sí | No | No | No |
|
||||||
|
| Format switch hex/rgb/hsl | Sí | Sí | Sí | Sí |
|
||||||
|
| Canal alpha | Sí (opt-in) | Sí | Sí | Sí |
|
||||||
|
| `allowedFormats` whitelist | Sí | No | No | No |
|
||||||
|
| Validación custom | Sí | Sí | Sí | Sí |
|
||||||
|
| Segmentos readonly | Sí | No | No | No |
|
||||||
|
| Input hidden para forms | Sí | Vía picker | Vía picker | Vía picker |
|
||||||
|
| Integración con Field | Sí | — | — | — |
|
||||||
|
| Variante / tamaño / paleta visual | Sí, Eidos | CSS externo | CSS externo | CSS externo |
|
||||||
|
|
||||||
|
## Decisiones
|
||||||
|
|
||||||
|
- No se exporta `Provider` ni `Root` público. La forma Eidos es
|
||||||
|
`<ColorField>` con hijos attached.
|
||||||
|
- Eidos no implementa saturación/área, hue slider ni swatches. Eso
|
||||||
|
pertenece a `ColorPicker`, no a `ColorField`.
|
||||||
|
- `ColorValue` mantiene `hex / rgb / hsl / hsv` en sincronía. Al editar
|
||||||
|
un canal el provider escribe contra el formato autoritativo (sin
|
||||||
|
redondeo cruzado HSV ↔ RGB).
|
||||||
|
- `format` es bindable y drives qué segmentos se renderizan.
|
||||||
|
`allowedFormats` controla qué opciones expone `FormatSelect`. Cuando
|
||||||
|
`allowedFormats.length === 1`, el select queda visualmente bloqueado
|
||||||
|
(`data-locked`).
|
||||||
|
- `enableAlpha={false}` quita el segmento alpha; `readonlySegments` lo
|
||||||
|
permite mantener visible pero no editable.
|
||||||
|
- `size`, `variant` y `color` pertenecen a Eidos. Resto (value,
|
||||||
|
placeholder, format, allowedFormats, enableAlpha, readonlySegments,
|
||||||
|
validación) pertenece a Soma.
|
||||||
|
|
||||||
|
## Gaps
|
||||||
|
|
||||||
|
| Gap | Disposición | Detalle |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| ColorPicker (saturación + hue + alpha + swatches) | **implementar** | Commit independiente. ColorField cubre el caso "type the hex"; ColorPicker cubre el caso "explore". |
|
||||||
|
| Tests browser-level del flujo completo (Playwright) | **implementar** | Cobertura visual + interacciones (canal Arrow/Backspace, format switch). Se hace en una pasada conjunta de tests. |
|
||||||
|
| Eye dropper API | **diferir** | Sólo en navegadores con `EyeDropper`. Pasa al picker. |
|
||||||
|
| Documentación per-prop exhaustiva | **diferir** | Cubierto por la tabla de la demo (`API` tab). |
|
||||||
|
|
||||||
|
## Referencias
|
||||||
|
|
||||||
|
- Soma ColorField: `src/uix/soma/components/color-field/README.md`
|
||||||
|
- Ark UI Color Picker: https://ark-ui.com/docs/components/color-picker
|
||||||
|
- Chakra UI Color Picker: https://chakra-ui.com/docs/components/color-picker
|
||||||
|
- Bits UI Color Picker: https://bits-ui.com/docs/components/color-picker
|
||||||
|
- WAI-ARIA APG Spinbutton: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as ColorField from '$soma/components/color-field';
|
||||||
|
import type { ColorFieldFormatSelectProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: ColorFieldFormatSelectProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ColorField.FormatSelect {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</ColorField.FormatSelect>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as ColorField from '$soma/components/color-field';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ColorField.HiddenInput />
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as ColorField from '$soma/components/color-field';
|
||||||
|
import type { ColorFieldInputProps, ColorFieldInputSnippetProps } from './types';
|
||||||
|
|
||||||
|
let { children: bodyContent, ...rest }: ColorFieldInputProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ColorField.Input {...rest}>
|
||||||
|
{#snippet children(args: ColorFieldInputSnippetProps)}
|
||||||
|
{@render bodyContent?.(args)}
|
||||||
|
{/snippet}
|
||||||
|
</ColorField.Input>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as ColorField from '$soma/components/color-field';
|
||||||
|
import type { ColorFieldLabelProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: ColorFieldLabelProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ColorField.Label {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</ColorField.Label>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as ColorField from '$soma/components/color-field';
|
||||||
|
import type { ColorFieldSegmentProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: ColorFieldSegmentProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ColorField.Segment {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</ColorField.Segment>
|
||||||
@ -0,0 +1,228 @@
|
|||||||
|
[data-color-field] {
|
||||||
|
--_color-field-height: var(--color-field-height-md);
|
||||||
|
--_color-field-px: var(--color-field-px-md);
|
||||||
|
--_color-field-gap: var(--color-field-gap-md);
|
||||||
|
--_color-field-segment-px: var(--color-field-segment-px-md);
|
||||||
|
--_color-field-font-size: var(--color-field-font-size-md);
|
||||||
|
--_color-field-swatch-size: var(--color-field-swatch-size-md);
|
||||||
|
--_color-field-accent-border: var(--color-primary-border);
|
||||||
|
--_color-field-accent-track: var(--color-primary-track);
|
||||||
|
--_color-field-accent-text: var(--color-primary-text);
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--color-field-stack-gap);
|
||||||
|
inline-size: 100%;
|
||||||
|
min-inline-size: 0;
|
||||||
|
color: var(--color-field-color);
|
||||||
|
font-family: var(--color-field-font-family);
|
||||||
|
font-size: var(--_color-field-font-size);
|
||||||
|
line-height: var(--color-field-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-size='xs'] {
|
||||||
|
--_color-field-height: var(--color-field-height-xs);
|
||||||
|
--_color-field-px: var(--color-field-px-xs);
|
||||||
|
--_color-field-gap: var(--color-field-gap-xs);
|
||||||
|
--_color-field-segment-px: var(--color-field-segment-px-xs);
|
||||||
|
--_color-field-font-size: var(--color-field-font-size-xs);
|
||||||
|
--_color-field-swatch-size: var(--color-field-swatch-size-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-size='sm'] {
|
||||||
|
--_color-field-height: var(--color-field-height-sm);
|
||||||
|
--_color-field-px: var(--color-field-px-sm);
|
||||||
|
--_color-field-gap: var(--color-field-gap-sm);
|
||||||
|
--_color-field-segment-px: var(--color-field-segment-px-sm);
|
||||||
|
--_color-field-font-size: var(--color-field-font-size-sm);
|
||||||
|
--_color-field-swatch-size: var(--color-field-swatch-size-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-size='lg'] {
|
||||||
|
--_color-field-height: var(--color-field-height-lg);
|
||||||
|
--_color-field-px: var(--color-field-px-lg);
|
||||||
|
--_color-field-gap: var(--color-field-gap-lg);
|
||||||
|
--_color-field-segment-px: var(--color-field-segment-px-lg);
|
||||||
|
--_color-field-font-size: var(--color-field-font-size-lg);
|
||||||
|
--_color-field-swatch-size: var(--color-field-swatch-size-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-size='xl'] {
|
||||||
|
--_color-field-height: var(--color-field-height-xl);
|
||||||
|
--_color-field-px: var(--color-field-px-xl);
|
||||||
|
--_color-field-gap: var(--color-field-gap-xl);
|
||||||
|
--_color-field-segment-px: var(--color-field-segment-px-xl);
|
||||||
|
--_color-field-font-size: var(--color-field-font-size-xl);
|
||||||
|
--_color-field-swatch-size: var(--color-field-swatch-size-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-color='secondary'] {
|
||||||
|
--_color-field-accent-border: var(--color-secondary-border);
|
||||||
|
--_color-field-accent-track: var(--color-secondary-track);
|
||||||
|
--_color-field-accent-text: var(--color-secondary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-color='neutral'] {
|
||||||
|
--_color-field-accent-border: var(--color-neutral-border);
|
||||||
|
--_color-field-accent-track: var(--color-neutral-track);
|
||||||
|
--_color-field-accent-text: var(--color-neutral-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-color='affirm'] {
|
||||||
|
--_color-field-accent-border: var(--color-affirm-border);
|
||||||
|
--_color-field-accent-track: var(--color-affirm-track);
|
||||||
|
--_color-field-accent-text: var(--color-affirm-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-color='fulfill'] {
|
||||||
|
--_color-field-accent-border: var(--color-fulfill-border);
|
||||||
|
--_color-field-accent-track: var(--color-fulfill-track);
|
||||||
|
--_color-field-accent-text: var(--color-fulfill-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-color='risk'] {
|
||||||
|
--_color-field-accent-border: var(--color-risk-border);
|
||||||
|
--_color-field-accent-track: var(--color-risk-track);
|
||||||
|
--_color-field-accent-text: var(--color-risk-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-color='threat'] {
|
||||||
|
--_color-field-accent-border: var(--color-threat-border);
|
||||||
|
--_color-field-accent-track: var(--color-threat-track);
|
||||||
|
--_color-field-accent-text: var(--color-threat-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-color='loss'] {
|
||||||
|
--_color-field-accent-border: var(--color-loss-border);
|
||||||
|
--_color-field-accent-track: var(--color-loss-track);
|
||||||
|
--_color-field-accent-text: var(--color-loss-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-label] {
|
||||||
|
color: var(--color-field-label-color);
|
||||||
|
font: inherit;
|
||||||
|
font-weight: var(--color-field-label-font-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-input] {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--_color-field-gap);
|
||||||
|
min-inline-size: 0;
|
||||||
|
inline-size: 100%;
|
||||||
|
min-block-size: var(--_color-field-height);
|
||||||
|
padding-inline: var(--_color-field-px);
|
||||||
|
border: var(--color-field-border-width) solid var(--color-field-border);
|
||||||
|
border-radius: var(--color-field-radius);
|
||||||
|
background: var(--color-field-bg);
|
||||||
|
color: inherit;
|
||||||
|
transition:
|
||||||
|
background var(--color-field-transition-duration) var(--color-field-transition-ease),
|
||||||
|
border-color var(--color-field-transition-duration) var(--color-field-transition-ease),
|
||||||
|
box-shadow var(--color-field-transition-duration) var(--color-field-transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-variant='outline'] [data-color-field-input] {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-variant='ghost'] [data-color-field-input] {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
padding-inline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-input]:has([data-color-field-segment]:focus-visible) {
|
||||||
|
border-color: var(--_color-field-accent-border);
|
||||||
|
box-shadow: var(--color-field-focus-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-invalid] [data-color-field-input],
|
||||||
|
[data-color-field-input][data-invalid] {
|
||||||
|
border-color: var(--color-field-border-invalid);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field][data-disabled],
|
||||||
|
[data-color-field-input][data-disabled] {
|
||||||
|
opacity: var(--color-field-disabled-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-segment] {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-inline-size: var(--color-field-segment-min-width);
|
||||||
|
block-size: var(--color-field-segment-height);
|
||||||
|
padding-inline: var(--_color-field-segment-px);
|
||||||
|
border-radius: var(--color-field-segment-radius);
|
||||||
|
color: var(--color-field-segment-color);
|
||||||
|
font: inherit;
|
||||||
|
outline: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition:
|
||||||
|
background var(--color-field-transition-duration) var(--color-field-transition-ease),
|
||||||
|
color var(--color-field-transition-duration) var(--color-field-transition-ease),
|
||||||
|
box-shadow var(--color-field-transition-duration) var(--color-field-transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-segment][data-segment='literal'] {
|
||||||
|
min-inline-size: auto;
|
||||||
|
padding-inline: 0;
|
||||||
|
color: var(--color-field-literal-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-segment][data-placeholder] {
|
||||||
|
color: var(--color-field-placeholder-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-segment]:focus-visible {
|
||||||
|
background: var(--_color-field-accent-track);
|
||||||
|
color: var(--_color-field-accent-text);
|
||||||
|
box-shadow: var(--color-field-segment-focus-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-segment][data-invalid] {
|
||||||
|
color: var(--color-field-segment-invalid-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-segment][data-readonly] {
|
||||||
|
background: var(--color-field-segment-readonly-bg);
|
||||||
|
color: var(--color-field-segment-readonly-color);
|
||||||
|
text-decoration: var(--color-field-segment-readonly-decoration);
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-segment][data-disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: var(--color-field-disabled-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-format-select] {
|
||||||
|
margin-inline-start: auto;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--color-field-format-select-radius);
|
||||||
|
padding-inline: var(--color-field-format-select-px);
|
||||||
|
background: var(--color-field-format-select-bg);
|
||||||
|
color: var(--color-field-format-select-color);
|
||||||
|
font: inherit;
|
||||||
|
font-size: var(--_color-field-font-size);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-format-select]:focus-visible {
|
||||||
|
box-shadow: var(--color-field-segment-focus-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-field-format-select][data-disabled],
|
||||||
|
[data-color-field-format-select][data-locked] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: var(--color-field-disabled-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
[data-color-field-input],
|
||||||
|
[data-color-field-segment] {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { ActiveEidos } from '$uix/eidos';
|
||||||
|
import * as ColorField from '$soma/components/color-field';
|
||||||
|
import type { ColorFieldProps } from './types';
|
||||||
|
|
||||||
|
let {
|
||||||
|
size = 'md',
|
||||||
|
variant = 'surface',
|
||||||
|
color = 'primary',
|
||||||
|
value = $bindable(),
|
||||||
|
placeholder = $bindable(),
|
||||||
|
format = $bindable(),
|
||||||
|
children: bodyContent,
|
||||||
|
...rest
|
||||||
|
}: ColorFieldProps = $props();
|
||||||
|
|
||||||
|
const eidos = ActiveEidos.require();
|
||||||
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ColorField.Provider
|
||||||
|
{...rest}
|
||||||
|
bind:value
|
||||||
|
bind:placeholder
|
||||||
|
bind:format
|
||||||
|
data-size={resolvedSize}
|
||||||
|
data-variant={variant}
|
||||||
|
data-color={color}
|
||||||
|
>
|
||||||
|
{@render bodyContent?.()}
|
||||||
|
</ColorField.Provider>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import ColorFieldComponent from './color-field.svelte'
|
||||||
|
import Label from './color-field-label.svelte'
|
||||||
|
import Input from './color-field-input.svelte'
|
||||||
|
import Segment from './color-field-segment.svelte'
|
||||||
|
import FormatSelect from './color-field-format-select.svelte'
|
||||||
|
import HiddenInput from './color-field-hidden-input.svelte'
|
||||||
|
|
||||||
|
type ColorFieldNamespace = typeof ColorFieldComponent & {
|
||||||
|
Label: typeof Label
|
||||||
|
Input: typeof Input
|
||||||
|
Segment: typeof Segment
|
||||||
|
FormatSelect: typeof FormatSelect
|
||||||
|
HiddenInput: typeof HiddenInput
|
||||||
|
}
|
||||||
|
|
||||||
|
const ColorField = ColorFieldComponent as ColorFieldNamespace
|
||||||
|
ColorField.Label = Label
|
||||||
|
ColorField.Input = Input
|
||||||
|
ColorField.Segment = Segment
|
||||||
|
ColorField.FormatSelect = FormatSelect
|
||||||
|
ColorField.HiddenInput = HiddenInput
|
||||||
|
|
||||||
|
export { ColorField }
|
||||||
|
|
||||||
|
export default ColorField
|
||||||
|
|
||||||
|
export type {
|
||||||
|
ColorFieldProps,
|
||||||
|
ColorFieldLabelProps as LabelProps,
|
||||||
|
ColorFieldInputProps as InputProps,
|
||||||
|
ColorFieldSegmentProps as SegmentProps,
|
||||||
|
ColorFieldFormatSelectProps as FormatSelectProps,
|
||||||
|
ColorFieldHiddenInputProps as HiddenInputProps,
|
||||||
|
InputSnippetProps,
|
||||||
|
ColorFieldSize,
|
||||||
|
ColorFieldVariant,
|
||||||
|
ColorFieldColor,
|
||||||
|
ColorValidator,
|
||||||
|
ColorOnInvalid,
|
||||||
|
ColorInvalidReason
|
||||||
|
} from './types'
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import type {
|
||||||
|
FormatSelectProps,
|
||||||
|
HiddenInputProps,
|
||||||
|
InputProps,
|
||||||
|
InputSnippetProps as ColorFieldInputSnippetProps,
|
||||||
|
LabelProps,
|
||||||
|
ProviderProps,
|
||||||
|
SegmentProps,
|
||||||
|
ColorValidator,
|
||||||
|
ColorOnInvalid,
|
||||||
|
ColorInvalidReason
|
||||||
|
} from '$soma/components/color-field'
|
||||||
|
import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
|
||||||
|
|
||||||
|
export type ColorFieldSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>
|
||||||
|
export type ColorFieldVariant = ControlVariant
|
||||||
|
export type ColorFieldColor = ColorRole
|
||||||
|
|
||||||
|
export type ColorFieldProps = ProviderProps & {
|
||||||
|
/** Visual size for input height, segment padding and text. @default 'md' */
|
||||||
|
size?: ResponsiveProp<ColorFieldSize>
|
||||||
|
/** Visual treatment of the segmented input. @default 'surface' */
|
||||||
|
variant?: ColorFieldVariant
|
||||||
|
/** Intent palette for focus affordance. @default 'primary' */
|
||||||
|
color?: ColorFieldColor
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ColorFieldLabelProps = LabelProps
|
||||||
|
export type ColorFieldInputProps = InputProps
|
||||||
|
export type ColorFieldSegmentProps = SegmentProps
|
||||||
|
export type ColorFieldFormatSelectProps = FormatSelectProps
|
||||||
|
export type ColorFieldHiddenInputProps = HiddenInputProps
|
||||||
|
|
||||||
|
export type { ColorFieldInputSnippetProps, ColorFieldInputSnippetProps as InputSnippetProps }
|
||||||
|
export type { ColorValidator, ColorOnInvalid, ColorInvalidReason }
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
# Eidos TimeField
|
||||||
|
|
||||||
|
Segmented time input. Soma owns the editable hour/minute/second segments,
|
||||||
|
ARIA spinbuttons, 12/24 hour cycle, day-period (AM/PM), timezone display
|
||||||
|
and validation. Eidos adds size, variant, intent color and recipe
|
||||||
|
styling on top.
|
||||||
|
|
||||||
|
## Baseline
|
||||||
|
|
||||||
|
Air no tenía un `TimeField` equivalente en la rama anterior. La
|
||||||
|
referencia local real es Soma `time-field`, que ya implementa la edición
|
||||||
|
segmentada (hour / minute / second / dayPeriod / timeZoneName), y la
|
||||||
|
receta Eidos solo envuelve esa superficie con tamaños, variante visual
|
||||||
|
y paleta de intents. Referencias externas: React Aria TimeField, Ark UI
|
||||||
|
Time Picker, Bits UI Time Field.
|
||||||
|
|
||||||
|
## Superficie
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<TimeField bind:value placeholder={new Time(9, 30, 0)} size="md" variant="surface" color="primary">
|
||||||
|
<TimeField.Label>Start</TimeField.Label>
|
||||||
|
<TimeField.Input name="start">
|
||||||
|
{#snippet children({ segments })}
|
||||||
|
{#each segments as { part, value } (part + value)}
|
||||||
|
<TimeField.Segment {part}>{value}</TimeField.Segment>
|
||||||
|
{/each}
|
||||||
|
{/snippet}
|
||||||
|
</TimeField.Input>
|
||||||
|
</TimeField>
|
||||||
|
```
|
||||||
|
|
||||||
|
Partes públicas: `Label`, `Input`, `Segment`, `HiddenInput`.
|
||||||
|
|
||||||
|
## Comparativa
|
||||||
|
|
||||||
|
| Capacidad | Soma/Eidos | React Aria | Ark UI | Bits UI |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| Input segmentado | Sí | Sí | Sí | Sí |
|
||||||
|
| Hora/minuto/segundo | Sí | Sí | Sí | Sí |
|
||||||
|
| 12h / 24h cycle | Sí | Sí | Sí | Sí |
|
||||||
|
| AM/PM (dayPeriod) | Sí | Sí | Sí | Sí |
|
||||||
|
| Zona horaria visible | Sí (ZonedDateTime) | Sí | Sí | Sí |
|
||||||
|
| `granularity` (hour / minute / second) | Sí | Sí | Sí | Sí |
|
||||||
|
| `minValue` / `maxValue` | Sí | Sí | Sí | Sí |
|
||||||
|
| Validación custom | Sí | Sí | Sí | Sí |
|
||||||
|
| Segmentos readonly | Sí | No | No | Sí |
|
||||||
|
| Input hidden para forms | Sí | — | Sí | Sí |
|
||||||
|
| Integración con Field | Sí | Vía Form/TextField | Vía Field | Manual |
|
||||||
|
| Variante / tamaño / paleta visual | Sí, Eidos | CSS externo | CSS externo | CSS externo |
|
||||||
|
|
||||||
|
## Decisiones
|
||||||
|
|
||||||
|
- No se exporta `Provider` ni `Root` público. La forma Eidos es `<TimeField>`
|
||||||
|
con hijos attached.
|
||||||
|
- Eidos no implementa popover ni clock dial. Eso pertenece a `TimePicker`,
|
||||||
|
no a `TimeField`.
|
||||||
|
- `HiddenInput` se mantiene como parte pública por simetría con Soma; el
|
||||||
|
caso normal lo renderiza `TimeField.Input` cuando recibe `name`.
|
||||||
|
- `size`, `variant` y `color` pertenecen a Eidos porque sólo afectan
|
||||||
|
receta visual; `value`, `placeholder`, `granularity`, `hourCycle`,
|
||||||
|
`hideTimeZone`, `locale`, `dir`, validación y navegación de segmentos
|
||||||
|
pertenecen a Soma.
|
||||||
|
- El evento declarado por Morfo es `commit-set`; la edición continua de
|
||||||
|
segmentos no se modela como evento perceptivo por cada pulsación.
|
||||||
|
|
||||||
|
## Gaps
|
||||||
|
|
||||||
|
| Gap | Disposición | Detalle |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| Tests browser-level del flujo completo (Playwright) | **implementar** | Cobertura visual + interacciones (Arrow/Backspace/dayPeriod toggle). Se hace en una pasada conjunta de tests. |
|
||||||
|
| API extendida sobre las referencias externas | **diferir** | Sólo si llega un caso de uso real. Mantener la superficie estable. |
|
||||||
|
| Documentación per-prop exhaustiva | **diferir** | Cubierto por la tabla de la demo (`API` tab). |
|
||||||
|
|
||||||
|
## Referencias
|
||||||
|
|
||||||
|
- Soma TimeField: `src/uix/soma/components/time-field/README.md`
|
||||||
|
- React Aria TimeField: https://react-spectrum.adobe.com/react-aria/TimeField.html
|
||||||
|
- Ark UI Time Picker: https://ark-ui.com/docs/components/time-picker
|
||||||
|
- Bits UI Time Field: https://bits-ui.com/docs/components/time-field
|
||||||
|
- WAI-ARIA APG Spinbutton: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import TimeFieldComponent from './time-field.svelte'
|
||||||
|
import Label from './time-field-label.svelte'
|
||||||
|
import Input from './time-field-input.svelte'
|
||||||
|
import Segment from './time-field-segment.svelte'
|
||||||
|
import HiddenInput from './time-field-hidden-input.svelte'
|
||||||
|
|
||||||
|
type TimeFieldNamespace = typeof TimeFieldComponent & {
|
||||||
|
Label: typeof Label
|
||||||
|
Input: typeof Input
|
||||||
|
Segment: typeof Segment
|
||||||
|
HiddenInput: typeof HiddenInput
|
||||||
|
}
|
||||||
|
|
||||||
|
const TimeField = TimeFieldComponent as TimeFieldNamespace
|
||||||
|
TimeField.Label = Label
|
||||||
|
TimeField.Input = Input
|
||||||
|
TimeField.Segment = Segment
|
||||||
|
TimeField.HiddenInput = HiddenInput
|
||||||
|
|
||||||
|
export { TimeField }
|
||||||
|
|
||||||
|
export default TimeField
|
||||||
|
|
||||||
|
export type {
|
||||||
|
TimeFieldProps,
|
||||||
|
TimeFieldLabelProps as LabelProps,
|
||||||
|
TimeFieldInputProps as InputProps,
|
||||||
|
TimeFieldSegmentProps as SegmentProps,
|
||||||
|
TimeFieldHiddenInputProps as HiddenInputProps,
|
||||||
|
InputSnippetProps,
|
||||||
|
TimeFieldSize,
|
||||||
|
TimeFieldVariant,
|
||||||
|
TimeFieldColor
|
||||||
|
} from './types'
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as TimeField from '$soma/components/time-field';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<TimeField.HiddenInput />
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as TimeField from '$soma/components/time-field';
|
||||||
|
import type { TimeFieldInputProps, TimeFieldInputSnippetProps } from './types';
|
||||||
|
|
||||||
|
let { children: bodyContent, ...rest }: TimeFieldInputProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<TimeField.Input {...rest}>
|
||||||
|
{#snippet children(args: TimeFieldInputSnippetProps)}
|
||||||
|
{@render bodyContent?.(args)}
|
||||||
|
{/snippet}
|
||||||
|
</TimeField.Input>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as TimeField from '$soma/components/time-field';
|
||||||
|
import type { TimeFieldLabelProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: TimeFieldLabelProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<TimeField.Label {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</TimeField.Label>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as TimeField from '$soma/components/time-field';
|
||||||
|
import type { TimeFieldSegmentProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: TimeFieldSegmentProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<TimeField.Segment {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</TimeField.Segment>
|
||||||
@ -0,0 +1,201 @@
|
|||||||
|
[data-time-field] {
|
||||||
|
--_time-field-height: var(--time-field-height-md);
|
||||||
|
--_time-field-px: var(--time-field-px-md);
|
||||||
|
--_time-field-gap: var(--time-field-gap-md);
|
||||||
|
--_time-field-segment-px: var(--time-field-segment-px-md);
|
||||||
|
--_time-field-font-size: var(--time-field-font-size-md);
|
||||||
|
--_time-field-accent-border: var(--color-primary-border);
|
||||||
|
--_time-field-accent-track: var(--color-primary-track);
|
||||||
|
--_time-field-accent-text: var(--color-primary-text);
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--time-field-stack-gap);
|
||||||
|
inline-size: 100%;
|
||||||
|
min-inline-size: 0;
|
||||||
|
color: var(--time-field-color);
|
||||||
|
font-family: var(--time-field-font-family);
|
||||||
|
font-size: var(--_time-field-font-size);
|
||||||
|
line-height: var(--time-field-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-size='xs'] {
|
||||||
|
--_time-field-height: var(--time-field-height-xs);
|
||||||
|
--_time-field-px: var(--time-field-px-xs);
|
||||||
|
--_time-field-gap: var(--time-field-gap-xs);
|
||||||
|
--_time-field-segment-px: var(--time-field-segment-px-xs);
|
||||||
|
--_time-field-font-size: var(--time-field-font-size-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-size='sm'] {
|
||||||
|
--_time-field-height: var(--time-field-height-sm);
|
||||||
|
--_time-field-px: var(--time-field-px-sm);
|
||||||
|
--_time-field-gap: var(--time-field-gap-sm);
|
||||||
|
--_time-field-segment-px: var(--time-field-segment-px-sm);
|
||||||
|
--_time-field-font-size: var(--time-field-font-size-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-size='lg'] {
|
||||||
|
--_time-field-height: var(--time-field-height-lg);
|
||||||
|
--_time-field-px: var(--time-field-px-lg);
|
||||||
|
--_time-field-gap: var(--time-field-gap-lg);
|
||||||
|
--_time-field-segment-px: var(--time-field-segment-px-lg);
|
||||||
|
--_time-field-font-size: var(--time-field-font-size-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-size='xl'] {
|
||||||
|
--_time-field-height: var(--time-field-height-xl);
|
||||||
|
--_time-field-px: var(--time-field-px-xl);
|
||||||
|
--_time-field-gap: var(--time-field-gap-xl);
|
||||||
|
--_time-field-segment-px: var(--time-field-segment-px-xl);
|
||||||
|
--_time-field-font-size: var(--time-field-font-size-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-color='secondary'] {
|
||||||
|
--_time-field-accent-border: var(--color-secondary-border);
|
||||||
|
--_time-field-accent-track: var(--color-secondary-track);
|
||||||
|
--_time-field-accent-text: var(--color-secondary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-color='neutral'] {
|
||||||
|
--_time-field-accent-border: var(--color-neutral-border);
|
||||||
|
--_time-field-accent-track: var(--color-neutral-track);
|
||||||
|
--_time-field-accent-text: var(--color-neutral-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-color='affirm'] {
|
||||||
|
--_time-field-accent-border: var(--color-affirm-border);
|
||||||
|
--_time-field-accent-track: var(--color-affirm-track);
|
||||||
|
--_time-field-accent-text: var(--color-affirm-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-color='fulfill'] {
|
||||||
|
--_time-field-accent-border: var(--color-fulfill-border);
|
||||||
|
--_time-field-accent-track: var(--color-fulfill-track);
|
||||||
|
--_time-field-accent-text: var(--color-fulfill-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-color='risk'] {
|
||||||
|
--_time-field-accent-border: var(--color-risk-border);
|
||||||
|
--_time-field-accent-track: var(--color-risk-track);
|
||||||
|
--_time-field-accent-text: var(--color-risk-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-color='threat'] {
|
||||||
|
--_time-field-accent-border: var(--color-threat-border);
|
||||||
|
--_time-field-accent-track: var(--color-threat-track);
|
||||||
|
--_time-field-accent-text: var(--color-threat-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-color='loss'] {
|
||||||
|
--_time-field-accent-border: var(--color-loss-border);
|
||||||
|
--_time-field-accent-track: var(--color-loss-track);
|
||||||
|
--_time-field-accent-text: var(--color-loss-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-label] {
|
||||||
|
color: var(--time-field-label-color);
|
||||||
|
font: inherit;
|
||||||
|
font-weight: var(--time-field-label-font-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-input] {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--_time-field-gap);
|
||||||
|
min-inline-size: 0;
|
||||||
|
inline-size: 100%;
|
||||||
|
min-block-size: var(--_time-field-height);
|
||||||
|
padding-inline: var(--_time-field-px);
|
||||||
|
border: var(--time-field-border-width) solid var(--time-field-border);
|
||||||
|
border-radius: var(--time-field-radius);
|
||||||
|
background: var(--time-field-bg);
|
||||||
|
color: inherit;
|
||||||
|
transition:
|
||||||
|
background var(--time-field-transition-duration) var(--time-field-transition-ease),
|
||||||
|
border-color var(--time-field-transition-duration) var(--time-field-transition-ease),
|
||||||
|
box-shadow var(--time-field-transition-duration) var(--time-field-transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-variant='outline'] [data-time-field-input] {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-variant='ghost'] [data-time-field-input] {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
padding-inline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-input]:has([data-time-field-segment]:focus-visible) {
|
||||||
|
border-color: var(--_time-field-accent-border);
|
||||||
|
box-shadow: var(--time-field-focus-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-invalid] [data-time-field-input],
|
||||||
|
[data-time-field-input][data-invalid] {
|
||||||
|
border-color: var(--time-field-border-invalid);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field][data-disabled],
|
||||||
|
[data-time-field-input][data-disabled] {
|
||||||
|
opacity: var(--time-field-disabled-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-segment] {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-inline-size: var(--time-field-segment-min-width);
|
||||||
|
block-size: var(--time-field-segment-height);
|
||||||
|
padding-inline: var(--_time-field-segment-px);
|
||||||
|
border-radius: var(--time-field-segment-radius);
|
||||||
|
color: var(--time-field-segment-color);
|
||||||
|
font: inherit;
|
||||||
|
outline: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition:
|
||||||
|
background var(--time-field-transition-duration) var(--time-field-transition-ease),
|
||||||
|
color var(--time-field-transition-duration) var(--time-field-transition-ease),
|
||||||
|
box-shadow var(--time-field-transition-duration) var(--time-field-transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-segment][data-segment='literal'] {
|
||||||
|
min-inline-size: auto;
|
||||||
|
padding-inline: 0;
|
||||||
|
color: var(--time-field-literal-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-segment][data-placeholder] {
|
||||||
|
color: var(--time-field-placeholder-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-segment]:focus-visible {
|
||||||
|
background: var(--_time-field-accent-track);
|
||||||
|
color: var(--_time-field-accent-text);
|
||||||
|
box-shadow: var(--time-field-segment-focus-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-segment][data-invalid] {
|
||||||
|
color: var(--time-field-segment-invalid-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-segment][data-readonly] {
|
||||||
|
background: var(--time-field-segment-readonly-bg);
|
||||||
|
color: var(--time-field-segment-readonly-color);
|
||||||
|
text-decoration: var(--time-field-segment-readonly-decoration);
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-time-field-segment][data-disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: var(--time-field-disabled-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
[data-time-field-input],
|
||||||
|
[data-time-field-segment] {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { ActiveEidos } from '$uix/eidos';
|
||||||
|
import * as TimeField from '$soma/components/time-field';
|
||||||
|
import type { TimeFieldProps } from './types';
|
||||||
|
|
||||||
|
let {
|
||||||
|
size = 'md',
|
||||||
|
variant = 'surface',
|
||||||
|
color = 'primary',
|
||||||
|
value = $bindable(),
|
||||||
|
placeholder = $bindable(),
|
||||||
|
children: bodyContent,
|
||||||
|
...rest
|
||||||
|
}: TimeFieldProps = $props();
|
||||||
|
|
||||||
|
const eidos = ActiveEidos.require();
|
||||||
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<TimeField.Provider
|
||||||
|
{...rest}
|
||||||
|
bind:value
|
||||||
|
bind:placeholder
|
||||||
|
data-size={resolvedSize}
|
||||||
|
data-variant={variant}
|
||||||
|
data-color={color}
|
||||||
|
>
|
||||||
|
{@render bodyContent?.()}
|
||||||
|
</TimeField.Provider>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import type {
|
||||||
|
InputProps,
|
||||||
|
InputSnippetProps as TimeFieldInputSnippetProps,
|
||||||
|
LabelProps,
|
||||||
|
ProviderProps,
|
||||||
|
SegmentProps
|
||||||
|
} from '$soma/components/time-field'
|
||||||
|
import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
|
||||||
|
|
||||||
|
export type TimeFieldSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>
|
||||||
|
export type TimeFieldVariant = ControlVariant
|
||||||
|
export type TimeFieldColor = ColorRole
|
||||||
|
|
||||||
|
export type TimeFieldProps = ProviderProps & {
|
||||||
|
/** Visual size for input height, segment padding and text. @default 'md' */
|
||||||
|
size?: ResponsiveProp<TimeFieldSize>
|
||||||
|
/** Visual treatment of the segmented input. @default 'surface' */
|
||||||
|
variant?: TimeFieldVariant
|
||||||
|
/** Intent palette for focus affordance. @default 'primary' */
|
||||||
|
color?: TimeFieldColor
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TimeFieldLabelProps = LabelProps
|
||||||
|
export type TimeFieldInputProps = InputProps
|
||||||
|
export type TimeFieldSegmentProps = SegmentProps
|
||||||
|
export type TimeFieldHiddenInputProps = Record<string, never>
|
||||||
|
|
||||||
|
export type { TimeFieldInputSnippetProps, TimeFieldInputSnippetProps as InputSnippetProps }
|
||||||
@ -0,0 +1,626 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
ColorField,
|
||||||
|
type ColorFieldColor,
|
||||||
|
type ColorFieldSize,
|
||||||
|
type ColorFieldVariant,
|
||||||
|
type InputSnippetProps
|
||||||
|
} from '$uix/eidos/components/color-field';
|
||||||
|
import { compileMorfo } from '$uix/morfo';
|
||||||
|
import { colorFieldMorfo } from '@/uix/morfo/components/color-field';
|
||||||
|
import { getActiveUix } from '$active-uix';
|
||||||
|
import {
|
||||||
|
colorValueFromRgb,
|
||||||
|
type ColorValue,
|
||||||
|
type ColorFormat,
|
||||||
|
type EditableColorSegmentPart
|
||||||
|
} from '$libs/color';
|
||||||
|
|
||||||
|
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
|
||||||
|
type TraceEntry = { event: string; family: string; intent?: string; at: number };
|
||||||
|
type Direction = 'ltr' | 'rtl';
|
||||||
|
|
||||||
|
const uix = getActiveUix();
|
||||||
|
|
||||||
|
const brandColor: ColorValue = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });
|
||||||
|
const accentColor: ColorValue = colorValueFromRgb({ r: 234, g: 88, b: 12, a: 0.85 });
|
||||||
|
|
||||||
|
let tab = $state<Tab>('live');
|
||||||
|
let trace = $state<TraceEntry[]>([]);
|
||||||
|
let stageRef = $state<HTMLElement | null>(null);
|
||||||
|
let value = $state<ColorValue | undefined>(brandColor);
|
||||||
|
let placeholder = $state<ColorValue>(brandColor);
|
||||||
|
let format = $state<ColorFormat>('hex');
|
||||||
|
let name = $state('brand');
|
||||||
|
let required = $state(true);
|
||||||
|
let disabled = $state(false);
|
||||||
|
let readonly = $state(false);
|
||||||
|
let lockAlpha = $state(false);
|
||||||
|
let enableAlpha = $state(true);
|
||||||
|
let allowedFormats = $state<ColorFormat[]>(['hex', 'rgb', 'hsl']);
|
||||||
|
let dir = $state<Direction>('ltr');
|
||||||
|
let size = $state<ColorFieldSize>('md');
|
||||||
|
let variant = $state<ColorFieldVariant>('surface');
|
||||||
|
let color = $state<ColorFieldColor>('primary');
|
||||||
|
|
||||||
|
const compiled = compileMorfo(colorFieldMorfo);
|
||||||
|
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
||||||
|
const events = $derived([...compiled.actions.byName.values()]);
|
||||||
|
const readonlySegments = $derived<EditableColorSegmentPart[]>(lockAlpha ? ['alpha'] : []);
|
||||||
|
const valueLabel = $derived(value?.hex ?? 'empty');
|
||||||
|
|
||||||
|
function sameValue(a: ColorValue | undefined, b: ColorValue): boolean {
|
||||||
|
return a?.hex === b.hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDemoValue(kind: 'brand' | 'accent' | 'empty'): void {
|
||||||
|
if (kind === 'empty') {
|
||||||
|
value = undefined;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
value = kind === 'brand' ? brandColor : accentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleAllowedFormat(f: ColorFormat): void {
|
||||||
|
const set = new Set(allowedFormats);
|
||||||
|
if (set.has(f)) set.delete(f);
|
||||||
|
else set.add(f);
|
||||||
|
if (set.size === 0) set.add(f);
|
||||||
|
allowedFormats = ['hex', 'rgb', 'hsl'].filter((x) => set.has(x as ColorFormat)) as ColorFormat[];
|
||||||
|
if (!set.has(format)) format = allowedFormats[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtTime(at: number): string {
|
||||||
|
return new Intl.DateTimeFormat(undefined, {
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
fractionalSecondDigits: 2
|
||||||
|
}).format(at);
|
||||||
|
}
|
||||||
|
|
||||||
|
$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 ColorField from '$soma/components/color-field';",
|
||||||
|
" import { colorValueFromRgb, type ColorValue } from '$libs/color';",
|
||||||
|
'',
|
||||||
|
' const placeholder = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });',
|
||||||
|
' let value = $state<ColorValue | undefined>(placeholder);',
|
||||||
|
" let format = $state<'hex' | 'rgb' | 'hsl'>('hex');",
|
||||||
|
'</' + 'script>',
|
||||||
|
'',
|
||||||
|
'<ColorField.Provider',
|
||||||
|
' bind:value',
|
||||||
|
' {placeholder}',
|
||||||
|
' bind:format',
|
||||||
|
required && ' required',
|
||||||
|
disabled && ' disabled',
|
||||||
|
readonly && ' readonly',
|
||||||
|
!enableAlpha && ' enableAlpha={false}',
|
||||||
|
allowedFormats.length !== 3 &&
|
||||||
|
` allowedFormats={${JSON.stringify(allowedFormats)}}`,
|
||||||
|
dir !== 'ltr' && ` dir="${dir}"`,
|
||||||
|
lockAlpha && " readonlySegments={['alpha']}",
|
||||||
|
'>',
|
||||||
|
' <ColorField.Label>Brand color</ColorField.Label>',
|
||||||
|
` <ColorField.Input name="${name}" aria-label="Brand color">`,
|
||||||
|
' {#snippet children({ segments })}',
|
||||||
|
' {#each segments as { part, value }, index (`${part}-${index}`)}',
|
||||||
|
' <ColorField.Segment {part}>{value}</ColorField.Segment>',
|
||||||
|
' {/each}',
|
||||||
|
' <ColorField.FormatSelect />',
|
||||||
|
' {/snippet}',
|
||||||
|
' </ColorField.Input>',
|
||||||
|
'</ColorField.Provider>'
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('\n')
|
||||||
|
);
|
||||||
|
|
||||||
|
const eidosSnippet = $derived(
|
||||||
|
[
|
||||||
|
"<script lang='ts'>",
|
||||||
|
" import { ColorField } from '$uix/eidos/components/color-field';",
|
||||||
|
" import { colorValueFromRgb, type ColorValue } from '$libs/color';",
|
||||||
|
'',
|
||||||
|
' const placeholder = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });',
|
||||||
|
' let value = $state<ColorValue | undefined>(placeholder);',
|
||||||
|
" let format = $state<'hex' | 'rgb' | 'hsl'>('hex');",
|
||||||
|
'</' + 'script>',
|
||||||
|
'',
|
||||||
|
'<ColorField',
|
||||||
|
' bind:value',
|
||||||
|
' {placeholder}',
|
||||||
|
' bind:format',
|
||||||
|
size !== 'md' && ` size="${size}"`,
|
||||||
|
variant !== 'surface' && ` variant="${variant}"`,
|
||||||
|
color !== 'primary' && ` color="${color}"`,
|
||||||
|
required && ' required',
|
||||||
|
disabled && ' disabled',
|
||||||
|
readonly && ' readonly',
|
||||||
|
!enableAlpha && ' enableAlpha={false}',
|
||||||
|
allowedFormats.length !== 3 &&
|
||||||
|
` allowedFormats={${JSON.stringify(allowedFormats)}}`,
|
||||||
|
dir !== 'ltr' && ` dir="${dir}"`,
|
||||||
|
lockAlpha && " readonlySegments={['alpha']}",
|
||||||
|
'>',
|
||||||
|
' <ColorField.Label>Brand color</ColorField.Label>',
|
||||||
|
` <ColorField.Input name="${name}" aria-label="Brand color">`,
|
||||||
|
' {#snippet children({ segments })}',
|
||||||
|
' {#each segments as { part, value }, index (`${part}-${index}`)}',
|
||||||
|
' <ColorField.Segment {part}>{value}</ColorField.Segment>',
|
||||||
|
' {/each}',
|
||||||
|
' <ColorField.FormatSelect />',
|
||||||
|
' {/snippet}',
|
||||||
|
' </ColorField.Input>',
|
||||||
|
'</ColorField>'
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('\n')
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div data-uix-canvas-inner>
|
||||||
|
<header>
|
||||||
|
<div data-uix-eyebrow>Forms · ColorField</div>
|
||||||
|
<h1 data-uix-page-title>ColorField</h1>
|
||||||
|
<p data-uix-page-lede>
|
||||||
|
Segmented color input. Soma owns format switching (hex/rgb/hsl), channel editing, alpha,
|
||||||
|
ARIA spinbuttons and validation; Eidos adds size, variant, intent color 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>formats</span>3</span>
|
||||||
|
<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>5</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div data-uix-stage>
|
||||||
|
<div data-uix-stage-area bind:this={stageRef}>
|
||||||
|
<div style="inline-size: min(32rem, 100%); display: grid; gap: var(--uix-space-3);">
|
||||||
|
<ColorField
|
||||||
|
bind:value
|
||||||
|
bind:placeholder
|
||||||
|
bind:format
|
||||||
|
{required}
|
||||||
|
{disabled}
|
||||||
|
{readonly}
|
||||||
|
{readonlySegments}
|
||||||
|
{enableAlpha}
|
||||||
|
{allowedFormats}
|
||||||
|
{dir}
|
||||||
|
{size}
|
||||||
|
{variant}
|
||||||
|
{color}
|
||||||
|
>
|
||||||
|
<ColorField.Label>Brand color</ColorField.Label>
|
||||||
|
<ColorField.Input {name} aria-label="Brand color">
|
||||||
|
{#snippet children({ segments }: InputSnippetProps)}
|
||||||
|
{#each segments as { part, value }, index (`${part}-${index}`)}
|
||||||
|
<ColorField.Segment {part}>{value}</ColorField.Segment>
|
||||||
|
{/each}
|
||||||
|
<ColorField.FormatSelect />
|
||||||
|
{/snippet}
|
||||||
|
</ColorField.Input>
|
||||||
|
</ColorField>
|
||||||
|
<div class="swatch-preview" aria-hidden="true">
|
||||||
|
<span
|
||||||
|
class="swatch"
|
||||||
|
style="background: {value?.hex ?? 'transparent'}; outline-color: var(--uix-line);"
|
||||||
|
></span>
|
||||||
|
<span class="swatch-meta">
|
||||||
|
<span><strong>hex</strong> {value?.hex ?? '—'}</span>
|
||||||
|
<span
|
||||||
|
><strong>rgb</strong> {value
|
||||||
|
? `rgb(${value.rgb.r}, ${value.rgb.g}, ${value.rgb.b}${value.rgb.a < 1 ? `, ${value.rgb.a}` : ''})`
|
||||||
|
: '—'}</span
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-uix-stage-trace>
|
||||||
|
<span data-uix-stage-trace-key>trace</span>
|
||||||
|
{#if trace.length === 0}
|
||||||
|
<span>edit or play an event to see sema stamps</span>
|
||||||
|
{:else}
|
||||||
|
{#each trace.slice(0, 3) as entry}
|
||||||
|
<span
|
||||||
|
><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent
|
||||||
|
? ' · ' + entry.intent
|
||||||
|
: ''}</span
|
||||||
|
>
|
||||||
|
<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
<span style="margin-inline-start: auto;">
|
||||||
|
<span data-uix-stage-trace-key>value</span>
|
||||||
|
{valueLabel}
|
||||||
|
</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</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>
|
||||||
|
<span data-uix-layer-badge="soma">soma</span> owns value, channel editing, format
|
||||||
|
switching and validation. <span data-uix-layer-badge="eidos">eidos</span> owns only the
|
||||||
|
visual treatment.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div data-uix-subsection-head>
|
||||||
|
<span data-uix-layer-badge="soma">soma</span> props · segmented value
|
||||||
|
</div>
|
||||||
|
<div data-uix-controls>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>value</span>
|
||||||
|
<span data-uix-chips role="group">
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={sameValue(value, brandColor)}
|
||||||
|
onclick={() => setDemoValue('brand')}>brand</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={sameValue(value, accentColor)}
|
||||||
|
onclick={() => setDemoValue('accent')}>accent</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={value === undefined}
|
||||||
|
onclick={() => setDemoValue('empty')}>empty</button
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>format</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['hex', 'rgb', 'hsl'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={format === v}
|
||||||
|
disabled={!allowedFormats.includes(v as ColorFormat)}
|
||||||
|
onclick={() => (format = v as ColorFormat)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>allowed formats</span>
|
||||||
|
<span data-uix-chips role="group">
|
||||||
|
{#each ['hex', 'rgb', 'hsl'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={allowedFormats.includes(v as ColorFormat)}
|
||||||
|
onclick={() => toggleAllowedFormat(v as ColorFormat)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>name</span>
|
||||||
|
<input type="text" bind:value={name} />
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>direction</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['ltr', 'rtl'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={dir === v}
|
||||||
|
onclick={() => (dir = v as Direction)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>states</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={required} />
|
||||||
|
<span data-uix-switch-label>required</span>
|
||||||
|
</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={disabled} />
|
||||||
|
<span data-uix-switch-label>disabled</span>
|
||||||
|
</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={readonly} />
|
||||||
|
<span data-uix-switch-label>readonly</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>channels</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={enableAlpha} />
|
||||||
|
<span data-uix-switch-label>enable alpha</span>
|
||||||
|
</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={lockAlpha} disabled={!enableAlpha} />
|
||||||
|
<span data-uix-switch-label>alpha readonly</span>
|
||||||
|
</span>
|
||||||
|
</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 ['xs', 'sm', 'md', 'lg', 'xl'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={size === v}
|
||||||
|
onclick={() => (size = v as ColorFieldSize)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>variant</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['surface', 'outline', 'ghost'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={variant === v}
|
||||||
|
onclick={() => (variant = v as ColorFieldVariant)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>color</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={color === v}
|
||||||
|
onclick={() => (color = v as ColorFieldColor)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-uix-code>
|
||||||
|
<div data-uix-code-head>
|
||||||
|
<span data-uix-layer-badge="soma">soma</span>
|
||||||
|
<span>headless · segment editing + ARIA</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 · root + attached parts</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 comparison</h2>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead>
|
||||||
|
<tr><th>Feature</th><th>Ark</th><th>Chakra</th><th>Bits</th><th>UIX</th><th>Decision</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name">Segmented input</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>Soma owns editable channel segments — unique to UIX.</td></tr>
|
||||||
|
<tr><td class="name">Format switch (hex/rgb/hsl)</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>FormatSelect is a public part.</td></tr>
|
||||||
|
<tr><td class="name">Alpha channel</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Opt-in via enableAlpha.</td></tr>
|
||||||
|
<tr><td class="name">Validation</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Custom validate + incomplete reason.</td></tr>
|
||||||
|
<tr><td class="name">Readonly segments</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>Per-channel lock (e.g. alpha).</td></tr>
|
||||||
|
<tr><td class="name">Field integration</td><td>—</td><td>—</td><td>—</td><td>yes</td><td>Soma integrates with Field context.</td></tr>
|
||||||
|
<tr><td class="name">Visual variants</td><td>CSS</td><td>CSS</td><td>CSS</td><td>yes</td><td>Eidos adds canonical control variants.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Prop</th><th>Owner</th><th>Default</th><th>Notes</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name">value / placeholder</td><td>soma</td><td class="default">—</td><td>Bindable ColorValue (hex + rgb + hsl + hsv all in sync).</td></tr>
|
||||||
|
<tr><td class="name">format</td><td>soma</td><td class="default">hex</td><td>Bindable. Drives which segments render.</td></tr>
|
||||||
|
<tr><td class="name">allowedFormats</td><td>soma</td><td class="default">['hex','rgb','hsl']</td><td>Whitelist exposed by FormatSelect.</td></tr>
|
||||||
|
<tr><td class="name">enableAlpha</td><td>soma</td><td class="default">true</td><td>When false, hides the alpha segment entirely.</td></tr>
|
||||||
|
<tr><td class="name">readonlySegments</td><td>soma</td><td class="default">[]</td><td>Lock individual channels.</td></tr>
|
||||||
|
<tr><td class="name">validate</td><td>soma</td><td class="default">—</td><td>Returns error message string(s) when invalid.</td></tr>
|
||||||
|
<tr><td class="name">dir</td><td>soma</td><td class="default">services</td><td>Keyboard navigation direction.</td></tr>
|
||||||
|
<tr><td class="name">size / variant / color</td><td>eidos</td><td class="default">md / surface / primary</td><td>Visual-only data attrs.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'morfo'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>Morfo contract</h2>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</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.optional ? 'yes' : 'no'}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'sema'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>
|
||||||
|
<span data-uix-layer-badge="sema">sema</span> · events + perceptual signature
|
||||||
|
</h2>
|
||||||
|
<p data-uix-section-desc>
|
||||||
|
ColorField only declares commit events. Channel editing remains headless until the value
|
||||||
|
is set.
|
||||||
|
</p>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Target</th><th>Play</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
{#each events as action}
|
||||||
|
<tr>
|
||||||
|
<td class="name">{action.name}</td>
|
||||||
|
<td class="type">{action.semantic.family}</td>
|
||||||
|
<td>{action.semantic.verb ?? '—'}</td>
|
||||||
|
<td>{action.semantic.sequence ?? 'pre'}</td>
|
||||||
|
<td>{action.target}</td>
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
data-uix-play
|
||||||
|
onclick={() => {
|
||||||
|
const target = stageRef?.querySelector(
|
||||||
|
'[data-color-field]'
|
||||||
|
) as HTMLElement | null;
|
||||||
|
if (!target) return;
|
||||||
|
void uix.events?.emit({
|
||||||
|
name: action.name,
|
||||||
|
family: action.semantic.family,
|
||||||
|
target
|
||||||
|
});
|
||||||
|
}}>▶ play</button
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'recipe'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>Eidos recipe</h2>
|
||||||
|
<p data-uix-section-desc>
|
||||||
|
Selectors live in <code>src/uix/eidos/components/color-field/color-field.css</code> and
|
||||||
|
consume Soma segment state plus Eidos <code>data-size</code>,
|
||||||
|
<code>data-variant</code> and <code>data-color</code>.
|
||||||
|
</p>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Selector</th><th>Owner</th><th>Purpose</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name"><code>[data-color-field]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Root color-field contract and state.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-color-field][data-size][data-variant][data-color]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Visual scale, control treatment and intent palette.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-color-field-input][data-format]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Segment group container reflecting active format.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-color-field-segment][data-segment][data-readonly]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Per-channel segment state.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-color-field-format-select][data-locked]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Format switcher; locked when allowedFormats has 1 entry.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'a11y'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>Accessibility</h2>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Concern</th><th>Contract</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name">Group</td><td>Input exposes <code>role="group"</code> and an accessible name.</td></tr>
|
||||||
|
<tr><td class="name">Channels</td><td>Editable channels expose <code>role="spinbutton"</code> with min/max/current value.</td></tr>
|
||||||
|
<tr><td class="name">Keyboard</td><td>Arrow keys, Home/End, Backspace and digits handled by Soma.</td></tr>
|
||||||
|
<tr><td class="name">Format select</td><td>Native <code><select></code> with localised option labels.</td></tr>
|
||||||
|
<tr><td class="name">Form</td><td>Hidden input submits the formatted color string when <code>name</code> is set.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.swatch-preview {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--uix-space-3);
|
||||||
|
padding: var(--uix-space-2) var(--uix-space-3);
|
||||||
|
border: 1px solid var(--uix-line);
|
||||||
|
border-radius: var(--uix-radius-sm);
|
||||||
|
background: var(--uix-surface-sunken);
|
||||||
|
}
|
||||||
|
.swatch {
|
||||||
|
display: inline-block;
|
||||||
|
inline-size: 28px;
|
||||||
|
block-size: 28px;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: 1px solid var(--uix-line);
|
||||||
|
outline-offset: -1px;
|
||||||
|
}
|
||||||
|
.swatch-meta {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
font-family: var(--uix-font-mono);
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--uix-text);
|
||||||
|
}
|
||||||
|
.swatch-meta strong {
|
||||||
|
color: var(--uix-text-faint);
|
||||||
|
font-weight: normal;
|
||||||
|
margin-inline-end: var(--uix-space-1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,583 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
TimeField,
|
||||||
|
type TimeFieldColor,
|
||||||
|
type TimeFieldSize,
|
||||||
|
type TimeFieldVariant,
|
||||||
|
type InputSnippetProps
|
||||||
|
} from '$uix/eidos/components/time-field';
|
||||||
|
import { compileMorfo } from '$uix/morfo';
|
||||||
|
import { timeFieldMorfo } from '@/uix/morfo/components/time-field';
|
||||||
|
import { getActiveUix } from '$active-uix';
|
||||||
|
import {
|
||||||
|
Time,
|
||||||
|
ZonedDateTime,
|
||||||
|
type TimeValue,
|
||||||
|
type TimeGranularity,
|
||||||
|
type HourCycle,
|
||||||
|
type EditableTimeSegmentPart
|
||||||
|
} from '$libs/days';
|
||||||
|
|
||||||
|
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
|
||||||
|
type TraceEntry = { event: string; family: string; intent?: string; at: number };
|
||||||
|
type Direction = 'ltr' | 'rtl';
|
||||||
|
|
||||||
|
const uix = getActiveUix();
|
||||||
|
|
||||||
|
const startTime: TimeValue = new Time(9, 30, 0);
|
||||||
|
const endTime: TimeValue = new Time(17, 45, 30);
|
||||||
|
|
||||||
|
let tab = $state<Tab>('live');
|
||||||
|
let trace = $state<TraceEntry[]>([]);
|
||||||
|
let stageRef = $state<HTMLElement | null>(null);
|
||||||
|
let value = $state<TimeValue | undefined>(startTime);
|
||||||
|
let placeholder = $state<TimeValue>(startTime);
|
||||||
|
let name = $state('start');
|
||||||
|
let required = $state(true);
|
||||||
|
let disabled = $state(false);
|
||||||
|
let readonly = $state(false);
|
||||||
|
let bounds = $state(true);
|
||||||
|
let lockSeconds = $state(false);
|
||||||
|
let granularity = $state<TimeGranularity>('minute');
|
||||||
|
let hourCycle = $state<HourCycle>(24);
|
||||||
|
let hideTimeZone = $state(false);
|
||||||
|
let locale = $state('en-US');
|
||||||
|
let dir = $state<Direction>('ltr');
|
||||||
|
let size = $state<TimeFieldSize>('md');
|
||||||
|
let variant = $state<TimeFieldVariant>('surface');
|
||||||
|
let color = $state<TimeFieldColor>('primary');
|
||||||
|
|
||||||
|
const compiled = compileMorfo(timeFieldMorfo);
|
||||||
|
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
||||||
|
const events = $derived([...compiled.actions.byName.values()]);
|
||||||
|
const readonlySegments = $derived<EditableTimeSegmentPart[]>(lockSeconds ? ['second'] : []);
|
||||||
|
const valueLabel = $derived(value?.toString() ?? 'empty');
|
||||||
|
|
||||||
|
const minValue: TimeValue = new Time(8, 0, 0);
|
||||||
|
const maxValue: TimeValue = new Time(20, 0, 0);
|
||||||
|
|
||||||
|
function sameValue(a: TimeValue | undefined, b: TimeValue): boolean {
|
||||||
|
return a?.toString() === b.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDemoValue(kind: 'start' | 'end' | 'empty'): void {
|
||||||
|
if (kind === 'empty') {
|
||||||
|
value = undefined;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
value = kind === 'start' ? startTime : endTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtTime(at: number): string {
|
||||||
|
return new Intl.DateTimeFormat(undefined, {
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
fractionalSecondDigits: 2
|
||||||
|
}).format(at);
|
||||||
|
}
|
||||||
|
|
||||||
|
$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 TimeField from '$soma/components/time-field';",
|
||||||
|
" import { Time, type TimeValue } from '$libs/days';",
|
||||||
|
'',
|
||||||
|
' const placeholder = new Time(9, 30, 0);',
|
||||||
|
' let value = $state<TimeValue | undefined>(placeholder);',
|
||||||
|
'</' + 'script>',
|
||||||
|
'',
|
||||||
|
'<TimeField.Provider',
|
||||||
|
' bind:value',
|
||||||
|
' {placeholder}',
|
||||||
|
required && ' required',
|
||||||
|
disabled && ' disabled',
|
||||||
|
readonly && ' readonly',
|
||||||
|
bounds && ' minValue={new Time(8, 0, 0)}',
|
||||||
|
bounds && ' maxValue={new Time(20, 0, 0)}',
|
||||||
|
granularity !== 'minute' && ` granularity="${granularity}"`,
|
||||||
|
hourCycle !== 24 && ` hourCycle={${hourCycle}}`,
|
||||||
|
locale !== 'en-US' && ` locale="${locale}"`,
|
||||||
|
dir !== 'ltr' && ` dir="${dir}"`,
|
||||||
|
lockSeconds && " readonlySegments={['second']}",
|
||||||
|
'>',
|
||||||
|
' <TimeField.Label>Start</TimeField.Label>',
|
||||||
|
` <TimeField.Input name="${name}" aria-label="Start time">`,
|
||||||
|
' {#snippet children({ segments })}',
|
||||||
|
' {#each segments as { part, value }, index (`${part}-${index}`)}',
|
||||||
|
' <TimeField.Segment {part}>{value}</TimeField.Segment>',
|
||||||
|
' {/each}',
|
||||||
|
' {/snippet}',
|
||||||
|
' </TimeField.Input>',
|
||||||
|
'</TimeField.Provider>'
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('\n')
|
||||||
|
);
|
||||||
|
|
||||||
|
const eidosSnippet = $derived(
|
||||||
|
[
|
||||||
|
"<script lang='ts'>",
|
||||||
|
" import { TimeField } from '$uix/eidos/components/time-field';",
|
||||||
|
" import { Time, type TimeValue } from '$libs/days';",
|
||||||
|
'',
|
||||||
|
' const placeholder = new Time(9, 30, 0);',
|
||||||
|
' let value = $state<TimeValue | undefined>(placeholder);',
|
||||||
|
'</' + 'script>',
|
||||||
|
'',
|
||||||
|
'<TimeField',
|
||||||
|
' bind:value',
|
||||||
|
' {placeholder}',
|
||||||
|
size !== 'md' && ` size="${size}"`,
|
||||||
|
variant !== 'surface' && ` variant="${variant}"`,
|
||||||
|
color !== 'primary' && ` color="${color}"`,
|
||||||
|
required && ' required',
|
||||||
|
disabled && ' disabled',
|
||||||
|
readonly && ' readonly',
|
||||||
|
bounds && ' minValue={new Time(8, 0, 0)}',
|
||||||
|
bounds && ' maxValue={new Time(20, 0, 0)}',
|
||||||
|
granularity !== 'minute' && ` granularity="${granularity}"`,
|
||||||
|
hourCycle !== 24 && ` hourCycle={${hourCycle}}`,
|
||||||
|
locale !== 'en-US' && ` locale="${locale}"`,
|
||||||
|
dir !== 'ltr' && ` dir="${dir}"`,
|
||||||
|
lockSeconds && " readonlySegments={['second']}",
|
||||||
|
'>',
|
||||||
|
' <TimeField.Label>Start</TimeField.Label>',
|
||||||
|
` <TimeField.Input name="${name}" aria-label="Start time">`,
|
||||||
|
' {#snippet children({ segments })}',
|
||||||
|
' {#each segments as { part, value }, index (`${part}-${index}`)}',
|
||||||
|
' <TimeField.Segment {part}>{value}</TimeField.Segment>',
|
||||||
|
' {/each}',
|
||||||
|
' {/snippet}',
|
||||||
|
' </TimeField.Input>',
|
||||||
|
'</TimeField>'
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('\n')
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div data-uix-canvas-inner>
|
||||||
|
<header>
|
||||||
|
<div data-uix-eyebrow>Forms · TimeField</div>
|
||||||
|
<h1 data-uix-page-title>TimeField</h1>
|
||||||
|
<p data-uix-page-lede>
|
||||||
|
Segmented time input. Soma owns hour/minute/second editing, ARIA spinbuttons, validation
|
||||||
|
and form submission; Eidos adds size, variant, intent color 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>variants</span>3</span>
|
||||||
|
<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>5</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div data-uix-stage>
|
||||||
|
<div data-uix-stage-area bind:this={stageRef}>
|
||||||
|
<div style="inline-size: min(28rem, 100%);">
|
||||||
|
<TimeField
|
||||||
|
bind:value
|
||||||
|
bind:placeholder
|
||||||
|
{required}
|
||||||
|
{disabled}
|
||||||
|
{readonly}
|
||||||
|
{readonlySegments}
|
||||||
|
{granularity}
|
||||||
|
{locale}
|
||||||
|
{dir}
|
||||||
|
{hourCycle}
|
||||||
|
{hideTimeZone}
|
||||||
|
{size}
|
||||||
|
{variant}
|
||||||
|
{color}
|
||||||
|
minValue={bounds ? minValue : undefined}
|
||||||
|
maxValue={bounds ? maxValue : undefined}
|
||||||
|
>
|
||||||
|
<TimeField.Label>Start</TimeField.Label>
|
||||||
|
<TimeField.Input {name} aria-label="Start time">
|
||||||
|
{#snippet children({ segments }: InputSnippetProps)}
|
||||||
|
{#each segments as { part, value }, index (`${part}-${index}`)}
|
||||||
|
<TimeField.Segment {part}>{value}</TimeField.Segment>
|
||||||
|
{/each}
|
||||||
|
{/snippet}
|
||||||
|
</TimeField.Input>
|
||||||
|
</TimeField>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-uix-stage-trace>
|
||||||
|
<span data-uix-stage-trace-key>trace</span>
|
||||||
|
{#if trace.length === 0}
|
||||||
|
<span>edit or play an event to see sema stamps</span>
|
||||||
|
{:else}
|
||||||
|
{#each trace.slice(0, 3) as entry}
|
||||||
|
<span
|
||||||
|
><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent
|
||||||
|
? ' · ' + entry.intent
|
||||||
|
: ''}</span
|
||||||
|
>
|
||||||
|
<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
<span style="margin-inline-start: auto;">
|
||||||
|
<span data-uix-stage-trace-key>value</span>
|
||||||
|
{valueLabel}
|
||||||
|
</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</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>
|
||||||
|
<span data-uix-layer-badge="soma">soma</span> owns value, segment behavior and
|
||||||
|
validation. <span data-uix-layer-badge="eidos">eidos</span> owns only the visual
|
||||||
|
treatment.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div data-uix-subsection-head>
|
||||||
|
<span data-uix-layer-badge="soma">soma</span> props · segmented value
|
||||||
|
</div>
|
||||||
|
<div data-uix-controls>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>value</span>
|
||||||
|
<span data-uix-chips role="group">
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={sameValue(value, startTime)}
|
||||||
|
onclick={() => setDemoValue('start')}>start</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={sameValue(value, endTime)}
|
||||||
|
onclick={() => setDemoValue('end')}>end</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={value === undefined}
|
||||||
|
onclick={() => setDemoValue('empty')}>empty</button
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>granularity</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['hour', 'minute', 'second'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={granularity === v}
|
||||||
|
onclick={() => (granularity = v as TimeGranularity)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>hour cycle</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each [12, 24] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={hourCycle === v}
|
||||||
|
onclick={() => (hourCycle = v as HourCycle)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>name</span>
|
||||||
|
<input type="text" bind:value={name} />
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>locale</span>
|
||||||
|
<select bind:value={locale}>
|
||||||
|
<option value="en-US">en-US</option>
|
||||||
|
<option value="es-ES">es-ES</option>
|
||||||
|
<option value="fr-FR">fr-FR</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>direction</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['ltr', 'rtl'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={dir === v}
|
||||||
|
onclick={() => (dir = v as Direction)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>states</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={required} />
|
||||||
|
<span data-uix-switch-label>required</span>
|
||||||
|
</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={disabled} />
|
||||||
|
<span data-uix-switch-label>disabled</span>
|
||||||
|
</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={readonly} />
|
||||||
|
<span data-uix-switch-label>readonly</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>constraints</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={bounds} />
|
||||||
|
<span data-uix-switch-label>min 08:00 · max 20:00</span>
|
||||||
|
</span>
|
||||||
|
<span data-uix-switch>
|
||||||
|
<input type="checkbox" bind:checked={lockSeconds} />
|
||||||
|
<span data-uix-switch-label>seconds readonly</span>
|
||||||
|
</span>
|
||||||
|
</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 ['xs', 'sm', 'md', 'lg', 'xl'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={size === v}
|
||||||
|
onclick={() => (size = v as TimeFieldSize)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>variant</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['surface', 'outline', 'ghost'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={variant === v}
|
||||||
|
onclick={() => (variant = v as TimeFieldVariant)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label data-uix-control>
|
||||||
|
<span data-uix-control-label>color</span>
|
||||||
|
<span data-uix-chips role="radiogroup">
|
||||||
|
{#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as v}
|
||||||
|
<button
|
||||||
|
data-uix-chip
|
||||||
|
data-active={color === v}
|
||||||
|
onclick={() => (color = v as TimeFieldColor)}>{v}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-uix-code>
|
||||||
|
<div data-uix-code-head>
|
||||||
|
<span data-uix-layer-badge="soma">soma</span>
|
||||||
|
<span>headless · segment editing + ARIA</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 · root + attached parts</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 comparison</h2>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead>
|
||||||
|
<tr><th>Feature</th><th>React Aria</th><th>Ark</th><th>Bits</th><th>UIX</th><th>Decision</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name">Segmented input</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Soma owns editable segments.</td></tr>
|
||||||
|
<tr><td class="name">Granularity (hour/min/sec)</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Drives which segments render.</td></tr>
|
||||||
|
<tr><td class="name">12 / 24 hour cycle</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>12h adds dayPeriod (AM/PM) segment.</td></tr>
|
||||||
|
<tr><td class="name">Validation</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Custom validate + min/max.</td></tr>
|
||||||
|
<tr><td class="name">Readonly segments</td><td>no</td><td>no</td><td>yes</td><td>yes</td><td>Per-segment lock without disabling input.</td></tr>
|
||||||
|
<tr><td class="name">Field integration</td><td>form context</td><td>field</td><td>manual</td><td>yes</td><td>Soma integrates with Field context.</td></tr>
|
||||||
|
<tr><td class="name">Visual variants</td><td>CSS</td><td>CSS</td><td>CSS</td><td>yes</td><td>Eidos adds canonical control variants.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Prop</th><th>Owner</th><th>Default</th><th>Notes</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name">value / placeholder</td><td>soma</td><td class="default">—</td><td>Bindable TimeValue.</td></tr>
|
||||||
|
<tr><td class="name">minValue / maxValue</td><td>soma</td><td class="default">—</td><td>Validation bounds.</td></tr>
|
||||||
|
<tr><td class="name">granularity</td><td>soma</td><td class="default">minute</td><td><code>hour</code> | <code>minute</code> | <code>second</code>.</td></tr>
|
||||||
|
<tr><td class="name">hourCycle</td><td>soma</td><td class="default">locale</td><td>12h adds dayPeriod segment; 24h hides it.</td></tr>
|
||||||
|
<tr><td class="name">hideTimeZone</td><td>soma</td><td class="default">false</td><td>Only affects ZonedDateTime values.</td></tr>
|
||||||
|
<tr><td class="name">readonlySegments</td><td>soma</td><td class="default">[]</td><td>Lock individual segments (e.g. seconds).</td></tr>
|
||||||
|
<tr><td class="name">locale / dir</td><td>soma</td><td class="default">services</td><td>Formatting + keyboard direction.</td></tr>
|
||||||
|
<tr><td class="name">size / variant / color</td><td>eidos</td><td class="default">md / surface / primary</td><td>Visual-only data attrs.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'morfo'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>Morfo contract</h2>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</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.optional ? 'yes' : 'no'}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'sema'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>
|
||||||
|
<span data-uix-layer-badge="sema">sema</span> · events + perceptual signature
|
||||||
|
</h2>
|
||||||
|
<p data-uix-section-desc>
|
||||||
|
TimeField only declares commit events. Segment editing remains headless until the value is set.
|
||||||
|
</p>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Target</th><th>Play</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
{#each events as action}
|
||||||
|
<tr>
|
||||||
|
<td class="name">{action.name}</td>
|
||||||
|
<td class="type">{action.semantic.family}</td>
|
||||||
|
<td>{action.semantic.verb ?? '—'}</td>
|
||||||
|
<td>{action.semantic.sequence ?? 'pre'}</td>
|
||||||
|
<td>{action.target}</td>
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
data-uix-play
|
||||||
|
onclick={() => {
|
||||||
|
const target = stageRef?.querySelector(
|
||||||
|
'[data-time-field]'
|
||||||
|
) as HTMLElement | null;
|
||||||
|
if (!target) return;
|
||||||
|
void uix.events?.emit({
|
||||||
|
name: action.name,
|
||||||
|
family: action.semantic.family,
|
||||||
|
target
|
||||||
|
});
|
||||||
|
}}>▶ play</button
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'recipe'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>Eidos recipe</h2>
|
||||||
|
<p data-uix-section-desc>
|
||||||
|
Selectors live in <code>src/uix/eidos/components/time-field/time-field.css</code> and
|
||||||
|
consume Soma segment state plus Eidos <code>data-size</code>,
|
||||||
|
<code>data-variant</code> and <code>data-color</code>.
|
||||||
|
</p>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Selector</th><th>Owner</th><th>Purpose</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name"><code>[data-time-field]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Root time-field contract and state.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-time-field][data-size][data-variant][data-color]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Visual scale, control treatment and intent palette.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-time-field-input]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Segment group container.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-time-field-segment][data-placeholder][data-readonly]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Individual segment state.</td></tr>
|
||||||
|
<tr><td class="name"><code>[data-time-field][data-event]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Transient perceptual event styling from Sema projection.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if tab === 'a11y'}
|
||||||
|
<section data-uix-section>
|
||||||
|
<h2 data-uix-section-title>Accessibility</h2>
|
||||||
|
<div data-uix-table-wrap>
|
||||||
|
<table data-uix-table>
|
||||||
|
<thead><tr><th>Concern</th><th>Contract</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="name">Group</td><td>Input exposes <code>role="group"</code> and an accessible name.</td></tr>
|
||||||
|
<tr><td class="name">Segments</td><td>Editable segments expose <code>role="spinbutton"</code> with min/max/current value.</td></tr>
|
||||||
|
<tr><td class="name">Keyboard</td><td>Arrow keys, Home/End, Backspace, digits and A/P (for dayPeriod) handled by Soma.</td></tr>
|
||||||
|
<tr><td class="name">Announcer</td><td>Live region announces segment changes via <code>aria-valuetext</code>.</td></tr>
|
||||||
|
<tr><td class="name">Form</td><td>Hidden input submits the ISO time string when <code>name</code> is set.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
Loading…
Reference in new issue