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.
48 lines
1.4 KiB
48 lines
1.4 KiB
<script lang="ts">
|
|
// Hour/minute sliders use soma Slider parts (not eidos <Slider>), so load slider.css here first.
|
|
import '$uix/eidos/components/slider/slider.css';
|
|
// Renders time-field (segments) + time-range-field parts via soma, not their
|
|
// eidos Providers — so load their recipes here, before time-range-picker.css.
|
|
import '$uix/eidos/components/time-field/time-field.css';
|
|
import '$uix/eidos/components/time-range-field/time-range-field.css';
|
|
import './time-range-picker.css';
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import * as TimeRangePicker from '$soma/components/time-range-picker';
|
|
import { setTimeRangePickerVisualContext } from './context.svelte';
|
|
import type { TimeRangePickerProps } from './types';
|
|
|
|
let {
|
|
size = 'md',
|
|
variant = 'surface',
|
|
color = 'primary',
|
|
ruler = false,
|
|
value = $bindable(),
|
|
placeholder = $bindable(),
|
|
open = $bindable(false),
|
|
children,
|
|
...rest
|
|
}: TimeRangePickerProps = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
|
|
|
setTimeRangePickerVisualContext({
|
|
getSize: () => resolvedSize,
|
|
getVariant: () => variant,
|
|
getColor: () => color,
|
|
getRuler: () => ruler
|
|
});
|
|
</script>
|
|
|
|
<TimeRangePicker.Provider
|
|
{...rest}
|
|
bind:value
|
|
bind:placeholder
|
|
bind:open
|
|
data-size={resolvedSize}
|
|
data-variant={variant}
|
|
data-color={color}
|
|
>
|
|
{@render children?.()}
|
|
</TimeRangePicker.Provider>
|