fix(range-calendar demo): add explicit none/preset chips to minDays + maxDays

A bare `<input type="number" placeholder="—">` made it non-obvious how to
clear the constraint — users would type and not realise empty=undefined.
Mirroring the date-range-picker demo's bounds row, both minDays and
maxDays now expose a chip row with `none` as the first option plus
common presets (`2/3/7/14` for min, `7/14/30/90` for max). The custom
number input stays alongside for ad-hoc values. The label header shows
the current effective value (`none` when undefined).

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

@ -373,11 +373,23 @@
</span>
</label>
<label data-uix-control>
<span data-uix-control-label>minDays</span>
<span data-uix-control-label>minDays <span data-uix-control-hint>{minDays ?? 'none'}</span></span>
<span data-uix-chips role="radiogroup">
<button data-uix-chip data-active={minDaysInput === ''} onclick={() => (minDaysInput = '')}>none</button>
{#each ['2', '3', '7', '14'] as n (n)}
<button data-uix-chip data-active={minDaysInput === n} onclick={() => (minDaysInput = n)}>{n}</button>
{/each}
</span>
<input type="number" min="1" placeholder="—" bind:value={minDaysInput} style="inline-size: 4rem;" />
</label>
<label data-uix-control>
<span data-uix-control-label>maxDays</span>
<span data-uix-control-label>maxDays <span data-uix-control-hint>{maxDays ?? 'none'}</span></span>
<span data-uix-chips role="radiogroup">
<button data-uix-chip data-active={maxDaysInput === ''} onclick={() => (maxDaysInput = '')}>none</button>
{#each ['7', '14', '30', '90'] as n (n)}
<button data-uix-chip data-active={maxDaysInput === n} onclick={() => (maxDaysInput = n)}>{n}</button>
{/each}
</span>
<input type="number" min="1" placeholder="—" bind:value={maxDaysInput} style="inline-size: 4rem;" />
</label>
<label data-uix-control>

Loading…
Cancel
Save

Powered by TurnKey Linux.