picker demos: open by default + footer buttons enabled

User report: 'no veo que haga nada nuevo en la demo' — the new
canonical Footer/Clear/Cancel/Close parts existed but were invisible
on first load because every *Button toggle defaulted to false and the
popovers opened closed. The user reloaded, saw the same baseline as
before, and concluded nothing had landed.

Fix:
- date-picker demo: open=true, closeOnDateSelect=false (so the user
  can pick a date without the popover collapsing while exploring),
  clearButton=true, cancelButton=true, closeButton=true. Result:
  on first load the calendar is visible with 'Borrar fecha · Cancelar
  · Cerrar' below it, in the active locale.
- date-range-picker demo: same — open=true, clear/cancel/close all
  default to true. The comment claiming the popover should stay
  closed because 'segments are for keyboard entry' is replaced; the
  demo's purpose is to surface the API, and the segments are still
  reachable by Tab-focus even when the popover is open.

These changes are demo-only — the actual provider defaults stay
inline/false. Production consumers must opt in.

0 type errors. Browser verified: Footer renders with all three
i18n-driven labels at the bottom of the calendar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent bf9dc8934d
commit 3956a5d39e

@ -50,17 +50,17 @@
let value = $state<DateValue | undefined>(delivery);
let valueInput = $state(toDateInput(delivery));
let placeholder = $state<DateValue>(delivery);
let open = $state(false);
let open = $state(true);
let minInput = $state(toDateInput(defaultMin));
let maxInput = $state(toDateInput(defaultMax));
let required = $state(true);
let disabled = $state(false);
let readonly = $state(false);
let closeOnDateSelect = $state(true);
let closeOnDateSelect = $state(false);
let mode = $state<'inline' | 'modal'>('inline');
let clearButton = $state(false);
let cancelButton = $state(false);
let closeButton = $state(false);
let clearButton = $state(true);
let cancelButton = $state(true);
let closeButton = $state(true);
let segmentLock = $state<SegmentLock>('none');
let disableDaysOutsideMonth = $state(true);
let fixedWeeks = $state(false);

@ -47,9 +47,10 @@
let stageRef = $state<HTMLElement | null>(null);
let value = $state<DateRange | undefined>({ start: sprintStart, end: sprintEnd });
let placeholder = $state<DateValue>(sprintStart);
// Popover starts closed: the field's segments are for direct keyboard
// entry; the popover is only for visual exploration via the trigger icon.
let open = $state(false);
// Popover starts open in the demo so the new Footer + segment-lock
// affordances are visible on first load. Consumers can close it via
// the Cancel/Close buttons or by clicking outside (in inline mode).
let open = $state(true);
let startInput = $state(toDateInput(sprintStart));
let endInput = $state(toDateInput(sprintEnd));
let minInput = $state(toDateInput(defaultMin));
@ -59,9 +60,9 @@
let allowSingleDay = $state(false);
let closeOnRangeSelect = $state(false);
let mode = $state<'inline' | 'modal'>('inline');
let clearButton = $state(false);
let cancelButton = $state(false);
let closeButton = $state(false);
let clearButton = $state(true);
let cancelButton = $state(true);
let closeButton = $state(true);
let disableDaysOutsideMonth = $state(true);
let fixedWeeks = $state(true);
let pagedNavigation = $state(false);

Loading…
Cancel
Save

Powered by TurnKey Linux.