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.
85 lines
2.8 KiB
85 lines
2.8 KiB
<script lang="ts">
|
|
/**
|
|
* Eidos `<Grid>` — `display:grid` container. Adds the grid-template /
|
|
* auto-flow / placement vars on top of `<Box>`. The `gap` prop here
|
|
* lives in the grid layer so it can be authored independently from
|
|
* the Box-level `gap` if a caller mixes Box-as-Grid-item with the
|
|
* Grid container's own gap.
|
|
*
|
|
* <Grid templateColumns="repeat(3, 1fr)" gap={3}>…</Grid>
|
|
*/
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import Box from '../box/box.svelte';
|
|
import { composeStyle, formatLayoutSpace, pushStyleVar } from '$uix/eidos/lib/layout-helpers';
|
|
import type { GridProps } from './types';
|
|
|
|
let {
|
|
inline = false,
|
|
columns,
|
|
rows,
|
|
templateColumns,
|
|
templateRows,
|
|
autoColumns,
|
|
autoRows,
|
|
autoFlow,
|
|
columnGap,
|
|
rowGap,
|
|
gap,
|
|
align,
|
|
justify,
|
|
alignContent,
|
|
placeItems,
|
|
placeContent,
|
|
style,
|
|
class: className,
|
|
children,
|
|
...restProps
|
|
}: GridProps = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
|
|
// Numeric `columns` / `rows` shorthand maps to `repeat(N, 1fr)`.
|
|
// Full template string from `templateColumns` / `templateRows` wins
|
|
// if both are passed.
|
|
const resolvedTemplateColumns = $derived.by(() => {
|
|
const tpl = eidos.resolve(templateColumns);
|
|
if (tpl) return tpl;
|
|
const n = eidos.resolve(columns);
|
|
return typeof n === 'number' && n > 0 ? `repeat(${n}, minmax(0, 1fr))` : undefined;
|
|
});
|
|
const resolvedTemplateRows = $derived.by(() => {
|
|
const tpl = eidos.resolve(templateRows);
|
|
if (tpl) return tpl;
|
|
const n = eidos.resolve(rows);
|
|
return typeof n === 'number' && n > 0 ? `repeat(${n}, minmax(0, 1fr))` : undefined;
|
|
});
|
|
|
|
const resolvedStyle = $derived.by(() => {
|
|
const decls: string[] = [];
|
|
pushStyleVar(decls, '--grid-template-columns', resolvedTemplateColumns);
|
|
pushStyleVar(decls, '--grid-template-rows', resolvedTemplateRows);
|
|
pushStyleVar(decls, '--grid-auto-columns', eidos.resolve(autoColumns));
|
|
pushStyleVar(decls, '--grid-auto-rows', eidos.resolve(autoRows));
|
|
pushStyleVar(decls, '--grid-auto-flow', eidos.resolve(autoFlow));
|
|
pushStyleVar(decls, '--grid-align', eidos.resolve(align));
|
|
pushStyleVar(decls, '--grid-justify', eidos.resolve(justify));
|
|
pushStyleVar(decls, '--grid-align-content', eidos.resolve(alignContent));
|
|
pushStyleVar(decls, '--grid-place-items', eidos.resolve(placeItems));
|
|
pushStyleVar(decls, '--grid-place-content', eidos.resolve(placeContent));
|
|
pushStyleVar(decls, '--grid-gap', formatLayoutSpace(eidos.resolve(gap)));
|
|
pushStyleVar(decls, '--grid-column-gap', formatLayoutSpace(eidos.resolve(columnGap)));
|
|
pushStyleVar(decls, '--grid-row-gap', formatLayoutSpace(eidos.resolve(rowGap)));
|
|
return composeStyle(decls, style);
|
|
});
|
|
</script>
|
|
|
|
<Box
|
|
{...restProps}
|
|
display={inline ? 'inline-grid' : 'grid'}
|
|
class={className}
|
|
style={resolvedStyle}
|
|
data-grid=""
|
|
>
|
|
{@render children?.()}
|
|
</Box>
|