You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
591 lines
17 KiB
591 lines
17 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
/**
|
|
* Chronos — event calendar (scheduler). v1 ships the **Month** view.
|
|
*
|
|
* Modelled on `calendarMorfo` (the ARIA `grid` pattern) but for an EVENT
|
|
* calendar, not a date picker: cells host event chips, chips are draggable /
|
|
* resizable, and the component owns an editor (a reused Dialog) plus an
|
|
* undo/redo command stack.
|
|
*
|
|
* Design + competitive rationale live in
|
|
* `src/uix/eidos/components/chronos/SPEC.md`. Scope decisions: v1 = Month with
|
|
* create/move/resize + editor + undo/redo; Week/Day/Agenda/Year/Timeline,
|
|
* recurrence and virtualization are roadmap.
|
|
*
|
|
* NOTE (verbs): undo/redo are expressed as `commit-restore` / `commit-apply`
|
|
* (both canonical commit verbs) — restore re-applies the previous snapshot
|
|
* (neutral), apply re-applies the undone one (affirm). Confirmed by the author.
|
|
*
|
|
* NOTE (editor): the create/edit editor is a REUSED Dialog. Its perceptual
|
|
* open/close (emerge) belongs to Dialog's own morfo; Chronos does not
|
|
* re-declare it. Chronos only orchestrates when the Dialog opens.
|
|
*/
|
|
export const chronosMorfo = {
|
|
name: 'Chronos',
|
|
kebab: 'chronos',
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
expression: 'pack',
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/grid/',
|
|
texts: {
|
|
label: '#?components.chronos.label|Calendar',
|
|
prevMonth: '#?components.chronos.prev-month|Previous month',
|
|
nextMonth: '#?components.chronos.next-month|Next month',
|
|
today: '#?components.chronos.today|Today',
|
|
moreEvents: '#?components.chronos.more-events|Show more events'
|
|
},
|
|
events: [
|
|
// Month navigation (prev / next / today / jump).
|
|
{
|
|
name: 'shift-navigate',
|
|
semantic: {
|
|
family: 'shift',
|
|
verb: 'navigate',
|
|
target: v.partRef('provider'),
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
// An event was created OR its dates changed (move / resize) and persisted.
|
|
// Unified like Dialog's polymorphic close — the provider distinguishes via
|
|
// the engine command; the perceptual signal is "something landed".
|
|
{
|
|
name: 'commit-save',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'save',
|
|
target: v.partRef('event-chip'),
|
|
intent: 'affirm',
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
// An event was moved by drag (committed). Distinct from a plain edit-save
|
|
// so the cascade can give drag-drop its own character if desired.
|
|
{
|
|
name: 'commit-move',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'move',
|
|
target: v.partRef('event-chip'),
|
|
intent: 'affirm',
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
// An event was deleted (consequence consumed → loss).
|
|
{
|
|
name: 'commit-delete',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'delete',
|
|
target: v.partRef('event-chip'),
|
|
intent: 'loss',
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
// Undo — restore the previous snapshot.
|
|
{
|
|
name: 'commit-restore',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'restore',
|
|
target: v.partRef('provider'),
|
|
intent: 'neutral',
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
// Redo — re-apply the undone snapshot.
|
|
{
|
|
name: 'commit-apply',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'apply',
|
|
target: v.partRef('provider'),
|
|
intent: 'affirm',
|
|
sequence: 'post'
|
|
}
|
|
},
|
|
// Direct manipulation in flight — move. Declared, but no provider emits it
|
|
// yet (audit S-37), so Chronos drags are currently silent. When it is
|
|
// wired, the `handle` family sounds by REPETITION — a 18 ms `step` per
|
|
// emission, at the gesture's own rhythm — so «no sound per frame», which
|
|
// this comment used to assert, is no longer the doctrine. The intent
|
|
// still concentrates on the drop (`commit-move`), not the carry.
|
|
{
|
|
name: 'handle-drag',
|
|
semantic: {
|
|
family: 'handle',
|
|
verb: 'drag',
|
|
target: v.partRef('event-chip'),
|
|
sequence: 'coincident'
|
|
}
|
|
},
|
|
// Direct manipulation in flight — resize (drag the chip edge).
|
|
{
|
|
name: 'handle-resize',
|
|
semantic: {
|
|
family: 'handle',
|
|
verb: 'resize',
|
|
target: v.partRef('event-resize-handle'),
|
|
sequence: 'coincident'
|
|
}
|
|
}
|
|
],
|
|
parts: [
|
|
// ── Root ──────────────────────────────────────────────────────────────
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'application',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-view', values: ['month', 'week', 'day', 'agenda'], severity: 'optional' },
|
|
{ attr: 'data-readonly', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'recommended' },
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.propRef('disabled'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'ArrowRight', action: 'next-day' },
|
|
{ key: 'ArrowLeft', action: 'prev-day' },
|
|
{ key: 'ArrowDown', action: 'next-week' },
|
|
{ key: 'ArrowUp', action: 'prev-week' },
|
|
{ key: 'PageUp', action: 'prev-month' },
|
|
{ key: 'PageDown', action: 'next-month' },
|
|
{ key: 'Home', action: 'first-day-of-week' },
|
|
{ key: 'End', action: 'last-day-of-week' },
|
|
{ key: 'Enter', action: 'create-or-open' },
|
|
{ key: ' ', action: 'create-or-open' }
|
|
]
|
|
},
|
|
|
|
// ── Toolbar (optional, fully replaceable) ──────────────────────────────
|
|
{
|
|
name: 'Toolbar',
|
|
kebab: 'toolbar',
|
|
archetype: 'header',
|
|
kind: 'public',
|
|
defaultElement: 'header',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'PrevButton',
|
|
kebab: 'prev-button',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', severity: 'optional' }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('prevMonth', 'Previous month'),
|
|
severity: 'recommended'
|
|
},
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.propRef('disabled'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'NextButton',
|
|
kebab: 'next-button',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', severity: 'optional' }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('nextMonth', 'Next month'),
|
|
severity: 'recommended'
|
|
},
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.propRef('disabled'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'TodayButton',
|
|
kebab: 'today-button',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', severity: 'optional' }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-label', value: v.translationRef('today', 'Today'), severity: 'recommended' }
|
|
]
|
|
},
|
|
{
|
|
name: 'UndoButton',
|
|
kebab: 'undo-button',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', severity: 'optional' }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-label', value: v.commonRef('action.undo', 'Undo'), severity: 'recommended' },
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.propRef('disabled'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'RedoButton',
|
|
kebab: 'redo-button',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', severity: 'optional' }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-label', value: v.commonRef('action.redo', 'Redo'), severity: 'recommended' },
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.propRef('disabled'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Heading',
|
|
kebab: 'heading',
|
|
archetype: 'title',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
|
|
// ── Grid (required) ────────────────────────────────────────────────────
|
|
{
|
|
name: 'Grid',
|
|
kebab: 'grid',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'grid',
|
|
optional: false,
|
|
data: [],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.partRef('heading'),
|
|
condition: { when: 'part-present', part: 'heading' },
|
|
severity: 'recommended'
|
|
},
|
|
{
|
|
attr: 'aria-readonly',
|
|
value: v.propRef('readonly'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
},
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.propRef('disabled'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'GridHead',
|
|
kebab: 'grid-head',
|
|
archetype: 'header',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'row',
|
|
optional: false,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'HeadCell',
|
|
kebab: 'head-cell',
|
|
archetype: 'header',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'columnheader',
|
|
optional: false,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'GridBody',
|
|
kebab: 'grid-body',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'rowgroup',
|
|
optional: false,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'GridRow',
|
|
kebab: 'grid-row',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'row',
|
|
optional: false,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
|
|
// ── Day cell + its children ────────────────────────────────────────────
|
|
{
|
|
name: 'DayCell',
|
|
kebab: 'day-cell',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'gridcell',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-date', value: v.propRef('date'), emit: 'value' },
|
|
{ attr: 'data-today', severity: 'optional' },
|
|
{ attr: 'data-weekend', severity: 'optional' },
|
|
{ attr: 'data-outside-month', severity: 'optional' },
|
|
{ attr: 'data-selected', severity: 'optional' },
|
|
{ attr: 'data-has-events', severity: 'optional' },
|
|
{ attr: 'data-drop-target', severity: 'optional' },
|
|
{ attr: 'data-focused', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-label', value: v.propRef('dateLabel'), severity: 'recommended' },
|
|
{
|
|
attr: 'aria-selected',
|
|
value: v.propRef('selected'),
|
|
severity: 'optional',
|
|
ariaBoolean: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'DayNumber',
|
|
kebab: 'day-number',
|
|
archetype: 'label',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [{ attr: 'data-value', value: v.propRef('value'), emit: 'value' }],
|
|
aria: []
|
|
},
|
|
|
|
// ── Event chip + resize handle ─────────────────────────────────────────
|
|
{
|
|
name: 'EventChip',
|
|
kebab: 'event-chip',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-event-id', value: v.propRef('eventId'), emit: 'value' },
|
|
{ attr: 'data-color', value: v.propRef('color'), emit: 'value', severity: 'optional' },
|
|
{ attr: 'data-all-day', severity: 'optional' },
|
|
{ attr: 'data-multi-day', severity: 'optional' },
|
|
{ attr: 'data-continues-before', severity: 'optional' },
|
|
{ attr: 'data-continues-after', severity: 'optional' },
|
|
{ attr: 'data-dragging', severity: 'optional' },
|
|
{ attr: 'data-resizing', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-label', value: v.propRef('eventLabel'), severity: 'recommended' }
|
|
]
|
|
},
|
|
{
|
|
name: 'EventResizeHandle',
|
|
kebab: 'event-resize-handle',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [{ attr: 'data-edge', values: ['start', 'end'], value: v.propRef('edge') }],
|
|
aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
|
|
},
|
|
|
|
// ── "+N more" overflow link ────────────────────────────────────────────
|
|
{
|
|
name: 'MoreLink',
|
|
kebab: 'more-link',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [{ attr: 'data-count', value: v.propRef('count'), emit: 'value' }],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('moreEvents', 'Show more events'),
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
|
|
// ── Time-grid (Week / Day views) ───────────────────────────────────────
|
|
// `private`: contract-only. The eidos wrapper owns rendering; there is no
|
|
// public compound API (composition decision — reuse rides the pure engine,
|
|
// promoted to $libs on a 2nd consumer). These declare the ARIA grid + the
|
|
// keyboard contract the eidos delivers uniformly with the Month grid.
|
|
{
|
|
name: 'TimeGrid',
|
|
kebab: 'time-grid',
|
|
kind: 'private',
|
|
defaultElement: 'div',
|
|
role: 'grid',
|
|
optional: true,
|
|
data: [{ attr: 'data-view', values: ['week', 'day'], severity: 'optional' }],
|
|
aria: [{ attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'recommended' }]
|
|
},
|
|
{
|
|
// All-day strip above the time grid. Not inside the [role=grid] subtree,
|
|
// so it carries no `row` role — just the contract data-attr.
|
|
name: 'AllDayRow',
|
|
kebab: 'all-day-row',
|
|
kind: 'private',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
// A day column = one `row` of the time grid (rows are days, cells are
|
|
// hour slots; the visual layout transposes the axes — see the eidos).
|
|
name: 'DayColumn',
|
|
kebab: 'day-column',
|
|
kind: 'private',
|
|
defaultElement: 'div',
|
|
role: 'row',
|
|
optional: true,
|
|
data: [
|
|
{ attr: 'data-date', value: v.propRef('date'), emit: 'value' },
|
|
{ attr: 'data-today', severity: 'optional' }
|
|
],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'TimeSlot',
|
|
kebab: 'time-slot',
|
|
kind: 'private',
|
|
defaultElement: 'div',
|
|
role: 'gridcell',
|
|
optional: true,
|
|
data: [
|
|
{ attr: 'data-date', value: v.propRef('date'), emit: 'value' },
|
|
{ attr: 'data-minute', value: v.propRef('minute'), emit: 'value' },
|
|
{ attr: 'data-dragover', severity: 'optional' },
|
|
{ attr: 'data-focused', severity: 'optional' }
|
|
],
|
|
aria: [{ attr: 'aria-label', value: v.propRef('slotLabel'), severity: 'recommended' }],
|
|
keyboard: [
|
|
{ key: 'ArrowUp', action: 'prev-hour' },
|
|
{ key: 'ArrowDown', action: 'next-hour' },
|
|
{ key: 'ArrowRight', action: 'next-day' },
|
|
{ key: 'ArrowLeft', action: 'prev-day' },
|
|
{ key: 'Enter', action: 'create-at-slot' },
|
|
{ key: ' ', action: 'create-at-slot' }
|
|
]
|
|
},
|
|
{
|
|
name: 'HourLabel',
|
|
kebab: 'hour-label',
|
|
kind: 'private',
|
|
archetype: 'label',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
|
|
},
|
|
{
|
|
name: 'NowIndicator',
|
|
kebab: 'now-indicator',
|
|
kind: 'private',
|
|
archetype: 'indicator',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
|
|
},
|
|
|
|
// ── Agenda view ────────────────────────────────────────────────────────
|
|
{
|
|
// Plain container (no `list` role): each day is a labelled `group` of
|
|
// event buttons — buttons aren't `listitem`s, so `list` would be invalid.
|
|
name: 'Agenda',
|
|
kebab: 'agenda',
|
|
kind: 'private',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'AgendaGroup',
|
|
kebab: 'agenda-group',
|
|
kind: 'private',
|
|
archetype: 'group',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: true,
|
|
data: [{ attr: 'data-date', value: v.propRef('date'), emit: 'value' }],
|
|
aria: [{ attr: 'aria-label', value: v.propRef('dateLabel'), severity: 'recommended' }]
|
|
},
|
|
{
|
|
name: 'AgendaItem',
|
|
kebab: 'agenda-item',
|
|
kind: 'private',
|
|
archetype: 'item',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [
|
|
{ attr: 'data-event-id', value: v.propRef('eventId'), emit: 'value' },
|
|
{ attr: 'data-color', value: v.propRef('color'), emit: 'value', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-label', value: v.propRef('eventLabel'), severity: 'recommended' }
|
|
]
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|