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.
84 lines
2.2 KiB
84 lines
2.2 KiB
<script lang="ts">
|
|
import './tree-grid.css';
|
|
/**
|
|
* Eidos `<TreeGrid>` — visual wrapper around soma's `TreeGrid.Provider`.
|
|
*
|
|
* Wraps the `<div role="treegrid">` in a `<div data-tree-grid-root>`
|
|
* that carries the visual data-attrs (variant / size / color /
|
|
* striped / hoverable / sticky header / scroll region). The recipe
|
|
* uses CSS Grid via the `columns` prop — Row + Header inherit the
|
|
* `grid-template-columns` from `--_tree-grid-columns`.
|
|
*/
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import * as TreeGrid from '$soma/components/tree-grid';
|
|
import type { TreeGridProps } from './types';
|
|
import { setTreeGridEidosContext } from './tree-grid-context';
|
|
|
|
let {
|
|
size = 'md',
|
|
variant = 'surface',
|
|
color = 'primary',
|
|
block = true,
|
|
columns = '1fr',
|
|
striped = false,
|
|
hoverable = true,
|
|
showIndentGuides = false,
|
|
maxHeight,
|
|
stableRows,
|
|
style,
|
|
expanded = $bindable<string[]>([]),
|
|
value = $bindable<string[]>([]),
|
|
children: bodyContent,
|
|
...rest
|
|
}: TreeGridProps = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
|
|
|
const composedStyle = $derived(
|
|
[
|
|
`--_tree-grid-columns: ${columns};`,
|
|
maxHeight ? `max-block-size: ${maxHeight};` : undefined,
|
|
stableRows && stableRows > 0 && !maxHeight
|
|
? `--_tree-grid-stable-rows: ${stableRows};`
|
|
: undefined,
|
|
typeof style === 'string' ? style : undefined
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ') || undefined
|
|
);
|
|
|
|
setTreeGridEidosContext({
|
|
get size() {
|
|
return resolvedSize;
|
|
},
|
|
get variant() {
|
|
return variant;
|
|
},
|
|
get color() {
|
|
return color;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
data-tree-grid-root=""
|
|
data-size={resolvedSize}
|
|
data-variant={variant}
|
|
data-color={color}
|
|
data-block={block ? '' : undefined}
|
|
data-striped={striped ? '' : undefined}
|
|
data-hoverable={hoverable ? '' : undefined}
|
|
data-indent-guides={showIndentGuides ? '' : undefined}
|
|
data-sticky-header={maxHeight ? '' : undefined}
|
|
data-scrollable={maxHeight ? '' : undefined}
|
|
data-stable-rows={stableRows && stableRows > 0 && !maxHeight ? '' : undefined}
|
|
style={composedStyle}
|
|
>
|
|
<TreeGrid.Provider {...rest} bind:expanded bind:value>
|
|
{#snippet children(snippetProps)}
|
|
{@render bodyContent?.(snippetProps)}
|
|
{/snippet}
|
|
</TreeGrid.Provider>
|
|
</div>
|