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.
47 lines
1.3 KiB
47 lines
1.3 KiB
<script lang="ts">
|
|
/**
|
|
* Eidos `<ToggleGroup>` — root.
|
|
*
|
|
* <ToggleGroup type="single" variant="outline" size="md" attached
|
|
* bind:value aria-label="Text format">
|
|
* <ToggleGroup.Item value="bold">B</ToggleGroup.Item>
|
|
* <ToggleGroup.Item value="italic">I</ToggleGroup.Item>
|
|
* </ToggleGroup>
|
|
*
|
|
* Soma owns: selection type, value, keyboard nav, disabled cascade,
|
|
* `commit-toggle` perceptual event. Eidos adds: variant / color /
|
|
* size / attached / block recipe knobs as `data-*` on the root, which
|
|
* the CSS recipe consumes to style the children via attribute
|
|
* descendant selectors.
|
|
*/
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import * as ToggleGroup from '$soma/components/toggle-group';
|
|
import type { ToggleGroupProps } from './types';
|
|
|
|
let {
|
|
variant = 'solid',
|
|
color = 'neutral',
|
|
size = 'md',
|
|
attached = false,
|
|
block = false,
|
|
value = $bindable([]),
|
|
children,
|
|
...rest
|
|
}: ToggleGroupProps = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
|
</script>
|
|
|
|
<ToggleGroup.Provider
|
|
{...rest}
|
|
bind:value
|
|
data-variant={variant}
|
|
data-color={color}
|
|
data-size={resolvedSize}
|
|
data-attached={attached ? '' : undefined}
|
|
data-block={block ? '' : undefined}
|
|
>
|
|
{@render children?.()}
|
|
</ToggleGroup.Provider>
|