The chrome around a range selection: a trigger, a two-column floating panel with an absolute-range snippet beside quick presets, hover or click opening, and measured placement.
ClickHoverWith footer
Preset: 24h
<RangePopover bind:open triggerLabel="Last 6 hours" {quickGroups}> {#snippet absolute()} <DateRangePicker bind:from bind:to time /> {/snippet}</RangePopover>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { RangePopover } from '@chanrg/4ui';<RangePopover bind:open triggerLabel="Last 6 hours" {quickGroups}> {#snippet absolute()} <DateRangePicker bind:from bind:to time /> {/snippet}</RangePopover>Composition
Use the following composition to build a range popover:
RangePopover ├── trigger ├── absolute (snippet) ├── quickGroups └── footer (snippet)
Click
The default: the trigger toggles the panel.
The trigger toggles the panel · preset: 24h
<RangePopover bind:open triggerLabel={label} {quickGroups}> {#snippet absolute()} <DateRangePicker bind:from bind:to time /> {/snippet}</RangePopover>Hover
Set openMode="hover" to open on pointer enter, with a grace period for crossing onto the panel.
Point at the trigger — crossing onto the panel keeps it open
<RangePopover bind:open openMode="hover" triggerLabel={label} {quickGroups}> {#snippet absolute()} <DateRangePicker bind:from bind:to time /> {/snippet}</RangePopover>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Bindable open state. |
openMode | click | hover | click | Hover adds mouseenter/focus opening with a 220ms leave grace. |
quickGroups | RangeQuickGroup[] | [] | Preset columns; a divider renders between groups. |
absolute | Snippet | required | The whole left column — the host owns what "apply" means. |
panelWidth / zIndex | number | 428 / --4ui-z-popover | Panel width (clamped to the viewport) and stacking order. |
ignoreDismiss | () => boolean | — | Return true to suppress outside/Escape close while a modal is layered over the panel. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- The panel is a labelled dialog; the trigger reports aria-haspopup and aria-expanded.
- Quick items are menuitemradio and track the active preset with aria-checked.
- Escape and an outside pointer both dismiss, unless the host suppresses it.