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

[Feature] Add language #19

Merged
chris-kruining merged 25 commits from feature/add-language into main 2024-12-19 15:22:42 +00:00
Conversation 0 Commits 25 Files changed 43 +32 -28
5 changed files with 32 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 529647b0d7 - Show all commits

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 { .table {
--shadow-color: oklch(0 0 0 / .05); --shadow-color: oklch(0 0 0 / .05);
--shadow: var(--shadow-color) 0 0 2em; --shadow: var(--shadow-color) 0 0 2em;
@ -26,7 +32,7 @@
& :is(.cell:first-child, .checkbox + .cell) { & :is(.cell:first-child, .checkbox + .cell) {
position: sticky; position: sticky;
inset-inline-start: 1px; 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; z-index: 1;
&::after { &::after {
@ -188,12 +194,6 @@
} }
} }
@property --depth {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@keyframes header-scroll-shadow { @keyframes header-scroll-shadow {
from { from {
box-shadow: none; 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); const columnCount = createMemo(() => table.columns().length);
return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}> return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
<Show when={props.summary}>{ {/* <Show when={(props.summary?.length ?? 0) > 0 ? props.summary : undefined}>{
summary => <caption>{summary()}</caption> summary => {
}</Show> return <caption>Kaas {summary()}</caption>;
}
}</Show> */}
<Groups /> <Groups />
<Head /> <Head />
@ -171,27 +173,27 @@ function Head(props: {}) {
return; return;
} }
table.setSort(current => { // table.setSort(current => {
if (current?.by !== by) { // if (current?.by !== by) {
return { by, reversed: false }; // return { by, reversed: false };
} // }
if (current.reversed === true) { // if (current.reversed === true) {
return undefined; // return undefined;
} // }
return { by, reversed: true }; // return { by, reversed: true };
}); // });
}; };
return <th scope="col" class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}> return <th scope="col" class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
{label} {label}
<Switch> {/* <Switch>
<Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match> <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}><FaSolidSortUp /></Match>
<Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match> <Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
</Switch> </Switch> */}
</th>; </th>;
} }
}</For> }</For>
@ -226,17 +228,19 @@ function Row<T extends Record<string, any>>(props: { key: keyof T, value: T, dep
</Show> </Show>
<For each={columns()}>{ <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> }</For>
</tr>; </tr>;
}; };
function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) { 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> return <details open>
<summary style={{ '--depth': props.depth }}>{String(props.key)}</summary> <summary style={{ '--depth': props.depth }}>{String(props.key)}</summary>
<summary style={{ '--depth': props.depth }}>{String(props.key)}</summary>
<For each={props.nodes}>{ <For each={props.nodes}>{
node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} /> 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: `, // style: `${base} data: `,
} as const; } 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 }; return { nonce };
}); });

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

@ -57,7 +57,7 @@ export default function TableExperiment() {
sort: undefined, sort: undefined,
}); });
const rows = createMemo(() => createDataSet(people)); const rows = createMemo(() => createDataSet(people.slice(0, 1)));
createEffect(() => { createEffect(() => {
rows().setGrouping(store.group); rows().setGrouping(store.group);
@ -117,7 +117,7 @@ export default function TableExperiment() {
</Sidebar> </Sidebar>
<div class={css.content}> <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>
</div >; </div >;
} }