chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

.

Browse source
This commit is contained in:
Chris Kruining 2024-12-17 15:59:49 +01:00
parent ed8eecea2a
commit 529647b0d7
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
5 changed files with 32 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

14
src/components/table/table.module.css
View file

@ -1,3 +1,9 @@
@property --depth {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.table {
--shadow-color: oklch(0 0 0 / .05);
--shadow: var(--shadow-color) 0 0 2em;
@ -26,7 +32,7 @@
& :is(.cell:first-child, .checkbox + .cell) {
position: sticky;
inset-inline-start: 1px;
padding-inline-start: calc(var(--depth) * 1em + var(--padding-m));
padding-inline-start: calc(var(--depth, 0) * 1em + var(--padding-m));
z-index: 1;
&::after {
@ -188,12 +194,6 @@
}
}
@property --depth {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@keyframes header-scroll-shadow {
from {
box-shadow: none;

40
src/components/table/table.tsx
View file

@ -86,9 +86,11 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
const columnCount = createMemo(() => table.columns().length);
return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
<Show when={props.summary}>{
summary => <caption>{summary()}</caption>
}</Show>
{/* <Show when={(props.summary?.length ?? 0) > 0 ? props.summary : undefined}>{
summary => {
return <caption>Kaas {summary()}</caption>;
}
}</Show> */}
<Groups />
<Head />
@ -171,27 +173,27 @@ function Head(props: {}) {
return;
}
table.setSort(current => {
if (current?.by !== by) {
return { by, reversed: false };
}
// table.setSort(current => {
// if (current?.by !== by) {
// return { by, reversed: false };
// }
if (current.reversed === true) {
return undefined;
}
// if (current.reversed === true) {
// return undefined;
// }
return { by, reversed: true };
});
// return { by, reversed: true };
// });
};
return <th scope="col" class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
{label}
<Switch>
{/* <Switch>
<Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match>
<Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
<Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
</Switch>
</Switch> */}
</th>;
}
}</For>
@ -226,17 +228,19 @@ function Row<T extends Record<string, any>>(props: { key: keyof T, value: T, dep
</Show>
<For each={columns()}>{
({ id }) => <td class={'css.cell'}>{table.cellRenderers()[id]?.({ row: props.key as number, column: id, value: props.value[id] }) ?? props.value[id]}</td>
({ id }) => {
const content = table.cellRenderers()[id]?.({ row: props.key as number, column: id, value: props.value[id] }) ?? props.value[id];
// return <>{content}</>;
return <td class={css.cell}>{content}</td>;
}
}</For>
</tr>;
};
function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) {
const table = useTable();
return <details open>
<summary style={{ '--depth': props.depth }}>{String(props.key)}</summary>
<summary style={{ '--depth': props.depth }}>{String(props.key)}</summary>
<For each={props.nodes}>{
node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} />

2
src/entry-server.tsx
View file

@ -36,7 +36,7 @@ export default createHandler(({ nonce }) => {
// style: `${base} data: `,
} as const;
// event.response.headers.append('Content-Security-Policy', Object.entries(policies).map(([p, v]) => `${p}-src ${v}`).join('; '))
event.response.headers.append('Content-Security-Policy', Object.entries(policies).map(([p, v]) => `${p}-src ${v}`).join('; '))
return { nonce };
});

4
src/routes/(editor)/experimental/table.tsx
View file

@ -57,7 +57,7 @@ export default function TableExperiment() {
sort: undefined,
});
const rows = createMemo(() => createDataSet(people));
const rows = createMemo(() => createDataSet(people.slice(0, 1)));
createEffect(() => {
rows().setGrouping(store.group);
@ -117,7 +117,7 @@ export default function TableExperiment() {
</Sidebar>
<div class={css.content}>
<Table class={css.table} rows={rows()} columns={columns} selectionMode={store.selectionMode} />
<Table class={css.table} summary="List of people" rows={rows()} columns={columns} selectionMode={store.selectionMode} />
</div>
</div >;
}