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.
29 lines
922 B
29 lines
922 B
<script lang="ts">
|
|
/**
|
|
* Eidos `<Checkbox.Group>` — adds optional `columns` prop for grid
|
|
* layouts. Combined with `orientation`:
|
|
* - vertical + columns N → CSS grid with N columns (items wrap)
|
|
* - vertical (no columns) → flex column
|
|
* - horizontal → flex row (or grid with auto cols if columns set)
|
|
*/
|
|
import * as Checkbox from '$soma/components/checkbox';
|
|
import { composeInlineStyle } from '$uix/eidos/lib/style';
|
|
import type { CheckboxGroupProps } from './types';
|
|
|
|
let { columns, value = $bindable([]), style, children, ...rest }: CheckboxGroupProps = $props();
|
|
|
|
const columnsStyle = $derived(
|
|
columns ? `--_checkbox-group-columns: ${columns};` : undefined
|
|
);
|
|
const mergedStyle = $derived(composeInlineStyle(style, columnsStyle));
|
|
</script>
|
|
|
|
<Checkbox.Group
|
|
{...rest}
|
|
bind:value
|
|
data-columns={columns ?? undefined}
|
|
style={mergedStyle}
|
|
>
|
|
{@render children?.()}
|
|
</Checkbox.Group>
|