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.
49 lines
1.5 KiB
49 lines
1.5 KiB
<script lang="ts">
|
|
/**
|
|
* Eidos `<TimeRangeField>` — root. Sets the visual cascade
|
|
* (data-size / data-variant / data-color) that both endpoint
|
|
* Inputs and their Segments inherit. The morfo emits
|
|
* `data-time-range-field` on the container.
|
|
*/
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import * as TimeRangeField from '$soma/components/time-range-field';
|
|
import type { TimeRangeFieldProps } from './types';
|
|
|
|
let {
|
|
size = 'md',
|
|
variant = 'surface',
|
|
color = 'primary',
|
|
value = $bindable(),
|
|
placeholder = $bindable(),
|
|
children,
|
|
...rest
|
|
}: TimeRangeFieldProps = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
|
</script>
|
|
|
|
<!--
|
|
Overlay `data-time-field=""` on top of the morfo's
|
|
`data-time-range-field` so the whole `time-field.css` cascade
|
|
(chrome on `[data-time-field-input]`, variant cascade on
|
|
`[data-time-field][data-variant=…] [data-time-field-input]`, size
|
|
vars on `[data-time-field][data-size=…]`, color tokens on
|
|
`[data-time-field][data-color=…]`) applies inside the range without
|
|
duplicating any of those rules. soma's `TimeRangeField.Input`
|
|
already overlays `data-time-field-input` on each endpoint, so the
|
|
selectors match end-to-end with zero recipe duplication. Same trick
|
|
as `DateRangeField` uses with `data-date-field`.
|
|
-->
|
|
<TimeRangeField.Provider
|
|
{...rest}
|
|
bind:value
|
|
bind:placeholder
|
|
data-time-field=""
|
|
data-size={resolvedSize}
|
|
data-variant={variant}
|
|
data-color={color}
|
|
>
|
|
{@render children?.()}
|
|
</TimeRangeField.Provider>
|