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

Kaas

Browse source
This commit is contained in:
Chris Kruining 2024-12-12 16:40:13 +01:00
parent d219ae1f9a
commit b23db1d5a8
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
21 changed files with 579 additions and 818 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/colorschemepicker.module.css
View file

@ -8,6 +8,7 @@
padding: var(--padding-s); padding: var(--padding-s);
& select { & select {
flex: 1 1 auto;
border: none; border: none;
background-color: inherit; background-color: inherit;
border-radius: var(--radii-m); border-radius: var(--radii-m);

128
src/components/grid.module.css
View file

@ -1,128 +0,0 @@
.table {
position: relative;
display: grid;
grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
align-content: start;
padding-inline: 1px;
margin-inline: -1px;
block-size: 100%;
overflow: clip auto;
background-color: var(--surface-600);
& input[type="checkbox"] {
margin: .1em;
}
& textarea {
resize: vertical;
min-block-size: max(2em, 100%);
max-block-size: 50em;
background-color: var(--surface-600);
color: var(--text-1);
border-color: var(--text-2);
border-radius: var(--radii-s);
&:has(::spelling-error, ::grammar-error) {
border-color: var(--fail);
}
& ::spelling-error {
outline: 1px solid var(--fail);
text-decoration: yellow underline;
}
}
& .cell {
display: grid;
padding: .5em;
border: 1px solid transparent;
border-radius: var(--radii-m);
&:has(textarea:focus) {
border-color: var(--info);
}
& > span {
align-self: center;
}
}
& :is(.header, .main, .footer) {
grid-column: span calc(2 + var(--columns));
display: grid;
grid-template-columns: subgrid;
}
& .header {
position: sticky;
inset-block-start: 0;
background-color: var(--surface-600);
border-block-end: 1px solid var(--surface-300);
}
& .row {
--bg: var(--text);
--alpha: 0;
grid-column: span calc(2 + var(--columns));
display: grid;
grid-template-columns: subgrid;
border: 1px solid transparent;
background-color: color(from var(--bg) srgb r g b / var(--alpha));
&:has(> .cell > :checked) {
--bg: var(--info);
--alpha: .1;
border-color: var(--bg);
& span {
font-variation-settings: 'GRAD' 1000;
}
& + :has(> .cell> :checked) {
border-block-start-color: transparent;
}
&:has(+ .row > .cell > :checked) {
border-block-end-color: transparent;
}
}
&:hover {
--alpha: .2 !important;
}
}
& details {
display: contents;
&::details-content {
grid-column: span calc(2 + var(--columns));
display: grid;
grid-template-columns: subgrid;
}
&:not([open])::details-content {
display: none;
}
& > summary {
grid-column: 2 / span calc(1 + var(--columns));
padding: .5em;
padding-inline-start: calc(var(--depth) * 1em + .5em);
}
& > .row > .cell > span {
padding-inline-start: calc(var(--depth) * 1em);
}
}
}
@property --depth {
syntax: "<number>";
inherits: false;
initial-value: 0;
}

280
src/components/grid.tsx
View file

@ -1,280 +0,0 @@
import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
import { createStore, produce, unwrap } from "solid-js/store";
import { SelectionProvider, useSelection, selectable } from "../features/selectable";
import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
import css from './grid.module.css';
selectable // prevents removal of import
type Rows = Map<string, Record<string, string>>;
type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
type Insertion = { kind: 'row', key: string } | { kind: 'column', value: string };
export interface GridContextType {
readonly rows: Accessor<Record<string, Record<string, string>>>;
readonly mutations: Accessor<Mutation[]>;
readonly selection: Accessor<SelectionItem[]>;
mutate(prop: string, lang: string, value: string): void;
remove(props: string[]): void;
insert(insertion: Insertion): void;
}
export interface GridApi {
readonly selection: Accessor<Record<string, Record<string, string>>>;
readonly rows: Accessor<Record<string, Record<string, string>>>;
readonly mutations: Accessor<Mutation[]>;
selectAll(): void;
clear(): void;
remove(keys: string[]): void;
insert(insertion: Insertion): void;
}
const GridContext = createContext<GridContextType>();
const useGrid = () => useContext(GridContext)!;
export const Grid: Component<{ class?: string, columns: string[], rows: Rows, api?: (api: GridApi) => any }> = (props) => {
const [selection, setSelection] = createSignal<SelectionItem[]>([]);
const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, columns: string[], snapshot: Rows, numberOfRows: number }>({
rows: {},
columns: [],
snapshot: new Map,
numberOfRows: 0,
});
const mutations = createMemo(() => {
// enumerate all values to make sure the memo is recalculated on any change
Object.values(state.rows).map(entry => Object.values(entry));
return deepDiff(state.snapshot, state.rows).toArray();
});
const rows = createMemo(() => Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, unwrap(row)] as const)));
const columns = createMemo(() => state.columns);
createEffect(() => {
setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
setState('snapshot', props.rows);
});
createEffect(() => {
setState('columns', [...props.columns]);
});
createEffect(() => {
setState('numberOfRows', Object.keys(state.rows).length);
});
const ctx: GridContextType = {
rows,
mutations,
selection,
mutate(prop: string, lang: string, value: string) {
setState('rows', prop, lang, value);
},
remove(props: string[]) {
setState('rows', produce(rows => {
for (const prop of props) {
delete rows[prop];
}
return rows;
}));
},
insert(prop: string) {
setState('rows', produce(rows => {
rows[prop] = Object.fromEntries(state.columns.slice(1).map(lang => [lang, '']));
return rows
}))
},
addColumn(name: string): void {
setState(produce(state => {
state.columns.push(name);
state.rows = Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, { ...row, [name]: '' }]));
return state;
}))
},
};
return <GridContext.Provider value={ctx}>
<SelectionProvider selection={setSelection} multiSelect>
<Api api={props.api} />
<_Grid class={props.class} columns={columns()} rows={rows()} />
</SelectionProvider>
</GridContext.Provider>;
};
const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
const columnCount = createMemo(() => props.columns.length - 1);
const root = createMemo<Entry>(() => Object.entries(props.rows)
.reduce((aggregate, [key, value]) => {
let obj: any = aggregate;
const parts = key.split('.');
for (const [i, part] of parts.entries()) {
if (Object.hasOwn(obj, part) === false) {
obj[part] = {};
}
if (i === (parts.length - 1)) {
obj[part] = value;
}
else {
obj = obj[part];
}
}
return aggregate;
}, {}));
return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
<Head headers={props.columns} />
<main class={css.main}>
<Row entry={root()} />
</main>
</section>
};
const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
const gridContext = useGrid();
const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
const api: GridApi = {
selection: createMemo(() => {
const selection = selectionContext.selection();
return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
}),
rows: gridContext.rows,
mutations: gridContext.mutations,
selectAll() {
selectionContext.selectAll();
},
clear() {
selectionContext.clear();
},
remove(props: string[]) {
gridContext.remove(props);
},
insert(prop: string) {
gridContext.insert(prop);
},
addColumn(name: string): void {
gridContext.addColumn(name);
},
};
createEffect(() => {
props.api?.(api);
});
return null;
};
const Head: Component<{ headers: string[] }> = (props) => {
const context = useSelection();
return <header class={css.header}>
<div class={css.cell}>
<input
type="checkbox"
checked={context.selection().length > 0 && context.selection().length === context.length()}
indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
/>
</div>
<For each={props.headers}>{
header => <span class={css.cell}>{header}</span>
}</For>
</header>;
};
const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
const grid = useGrid();
return <For each={Object.entries(props.entry)}>{
([key, value]) => {
const values = Object.entries(value);
const path = [...(props.path ?? []), key];
const k = path.join('.');
const context = useSelection();
const isSelected = context.isSelected(k);
return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
<div class={css.row} use:selectable={{ value, key: k }}>
<div class={css.cell}>
<input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} on:pointerdown={e => e.stopPropagation()} />
</div>
<div class={css.cell}>
<span style={{ '--depth': path.length - 1 }}>{key}</span>
</div>
<For each={values}>{
([lang, value]) => <div class={css.cell}>
<TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
</div>
}</For>
</div>
</Show>;
}
}</For>
};
const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props) => {
return <details open>
<summary style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
<Row entry={props.entry} path={props.path} />
</details>;
};
const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
const [element, setElement] = createSignal<HTMLTextAreaElement>();
const resize = () => {
const el = element();
if (!el) {
return;
}
el.style.height = `1px`;
el.style.height = `${2 + element()!.scrollHeight}px`;
};
const mutate = debounce(() => {
props.oninput?.(new InputEvent('input', {
data: element()?.value.trim(),
}))
}, 300);
const onKeyUp = (e: KeyboardEvent) => {
resize();
mutate();
};
return <textarea
ref={setElement}
value={props.value}
lang={props.lang}
placeholder={`${props.key} in ${props.lang}`}
name={`${props.key}:${props.lang}`}
spellcheck={true}
wrap="soft"
onkeyup={onKeyUp}
on:keydown={e => e.stopPropagation()}
on:pointerdown={e => e.stopPropagation()}
/>
};

0
src/components/grid/grid.module.css Normal file
View file

129
src/components/grid/grid.tsx Normal file
View file

@ -0,0 +1,129 @@
import { Accessor, createContext, createEffect, createMemo, createSignal, JSX, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { deepCopy, deepDiff, Mutation } from "~/utilities";
import { SelectionMode, Table, Column as TableColumn, TableApi } from "~/components/table";
import css from './grid.module.css';
export interface Column<T extends Record<string, any>> extends TableColumn<T> {
editor?: (cell: { id: keyof T, value: T[keyof T] }) => JSX.Element;
}
export interface GridApi<T extends Record<string, any>> extends TableApi<T> {
readonly mutations: Accessor<Mutation[]>;
remove(keys: string[]): void;
insert(prop: string): void;
addColumn(name: string): void;
}
interface GridContextType<T extends Record<string, any>> {
readonly rows: Accessor<T[]>;
readonly mutations: Accessor<Mutation[]>;
// readonly selection: Accessor<SelectionItem[]>;
mutate(prop: string, value: string): void;
remove(props: string[]): void;
insert(prop: string): void;
addColumn(name: string): void;
}
const GridContext = createContext<GridContextType<any>>();
const useGrid = () => useContext(GridContext)!;
type GridProps<T extends Record<string, any>> = { class?: string, groupBy?: keyof T, columns: Column<T>[], rows: T[], api?: (api: GridApi<T>) => any };
export function Grid<T extends Record<string, any>>(props: GridProps<T>) {
const [table, setTable] = createSignal<TableApi<T>>();
const [state, setState] = createStore<{ rows: T[], columns: Column<T>[], snapshot: T[], numberOfRows: number }>({
rows: [],
columns: [],
snapshot: [],
numberOfRows: 0,
});
const mutations = createMemo(() => {
// enumerate all values to make sure the memo is recalculated on any change
Object.values(state.rows).map(entry => Object.values(entry));
return deepDiff(state.snapshot, state.rows).toArray();
});
createEffect(() => {
setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
setState('snapshot', props.rows);
});
createEffect(() => {
setState('columns', props.columns);
});
createEffect(() => {
setState('numberOfRows', Object.keys(state.rows).length);
});
const rows = createMemo(() => state.rows);
const columns = createMemo(() => state.columns);
const ctx: GridContextType<T> = {
rows,
mutations,
// selection,
mutate(prop: string, value: string) {
},
remove(props: string[]) {
},
insert(prop: string) {
},
addColumn(id: keyof T): void {
},
};
const cellEditors = createMemo(() => Object.fromEntries(state.columns.filter(c => c.editor !== undefined).map(c => [c.id, c.editor!] as const)));
return <GridContext.Provider value={ctx}>
<Api api={props.api} table={table()} />
<Table api={setTable} class={`${css.grid} ${props.class}`} rows={rows()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
cellEditors()
}</Table>
</GridContext.Provider>;
};
function Api<T extends Record<string, any>>(props: { api: undefined | ((api: GridApi<T>) => any), table?: TableApi<T> }) {
const gridContext = useGrid();
const api = createMemo<GridApi<T> | undefined>(() => {
const table = props.table;
if (!table) {
return;
}
return {
...table,
mutations: gridContext.mutations,
remove(props: string[]) {
gridContext.remove(props);
},
insert(prop: string) {
gridContext.insert(prop);
},
addColumn(name: string): void {
gridContext.addColumn(name);
},
};
});
createEffect(() => {
const value = api();
if (value) {
props.api?.(value);
}
});
return null;
};

4
src/components/grid/index.tsx Normal file
View file

@ -0,0 +1,4 @@
export type { DataSetRowNode, DataSetGroupNode, DataSetNode, SelectionMode } from '../table';
export type { GridApi, Column } from './grid';
export { Grid } from './grid';

2
src/components/table/index.tsx
View file

@ -1,5 +1,5 @@
export type { Column } from './table'; export type { Column, TableApi } from './table';
export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset'; export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset';
export { SelectionMode, Table } from './table'; export { SelectionMode, Table } from './table';
export { createDataSet, toSorted, toGrouped } from './dataset'; export { createDataSet, toSorted, toGrouped } from './dataset';

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

@ -1,53 +1,59 @@
.table { .table {
--shadow-color: oklch(0 0 0 / .05); --shadow-color: oklch(0 0 0 / .05);
--shadow: var(--shadow-color) 0 .5em 2em; --shadow: var(--shadow-color) 0 0 2em;
position: relative; position: relative;
display: block grid; display: block grid;
grid-template-columns: repeat(var(--columns), minmax(max-content, auto)); grid-template-columns: repeat(var(--columns), minmax(max-content, auto));
align-content: start; align-content: start;
block-size: 100%;
padding-inline: 1px; padding-inline: 1px;
margin-inline: -1px; margin-inline: -1px;
overflow: auto; overflow: auto;
background-color: inherit; background-color: inherit;
isolation: isolate; isolation: isolate;
block-size: 100%;
& input[type="checkbox"] {
margin: .1em;
}
& .cell { & .cell {
display: block grid; display: block grid;
align-items: center;
padding: var(--padding-m); padding: var(--padding-m);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--radii-m); border-radius: var(--radii-m);
background: inherit; background: inherit;
white-space: nowrap; white-space: nowrap;
}
&:first-of-type { & :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) * 1em + var(--padding-m));
z-index: 1; z-index: 1;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
inset-inline-start: 100%; inset-inline-start: 100%;
inset-block-start: -2px; inset-block-start: -2px;
display: block; display: block;
inline-size: 2em; inline-size: 2em;
block-size: calc(3px + 100%); block-size: calc(3px + 100%);
animation: column-scroll-shadow linear both; animation: column-scroll-shadow linear both;
animation-timeline: scroll(inline); animation-timeline: scroll(inline);
animation-range: 0 2em; animation-range: 0 2em;
pointer-events: none; pointer-events: none;
}
} }
} }
& .checkbox {
display: grid;
place-items: center;
position: sticky;
inset-inline-start: 1px;
background: inherit;
padding: var(--padding-m);
z-index: 1;
}
& :is(.header, .main, .footer) { & :is(.header, .main, .footer) {
grid-column: 1 / -1; grid-column: 1 / -1;
display: block grid; display: block grid;
@ -55,42 +61,6 @@
background-color: inherit; background-color: inherit;
} }
& .header {
position: sticky;
inset-block-start: 0;
border-block-end: 1px solid var(--surface-300);
z-index: 2;
animation: header-scroll-shadow linear both;
animation-timeline: scroll();
animation-range: 0 2em;
font-weight: var(--weight-bold);
& > aside {
position: sticky;
inset-inline-start: 0;
background: inherit;
padding: var(--padding-m);
z-index: 1;
}
& > .cell {
grid-auto-flow: column;
justify-content: space-between;
& > svg {
transition: opacity .15s ease-in-out;
}
&:not(.sorted):not(:hover) > svg {
opacity: 0;
}
}
}
& .main {
background-color: inherit;
}
& .row { & .row {
--alpha: 0; --alpha: 0;
grid-column: 1 / -1; grid-column: 1 / -1;
@ -100,11 +70,7 @@
background-color: inherit; background-color: inherit;
background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha))); background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha)));
/* & > :is(.cell, aside) { &:has(> .checkbox > :checked) {
background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha)));
} */
&:has(> aside > :checked) {
--alpha: .1; --alpha: .1;
border-color: var(--info); border-color: var(--info);
@ -112,13 +78,11 @@
font-variation-settings: 'GRAD' 1000; font-variation-settings: 'GRAD' 1000;
} }
/* Remove the top border when directly preceded by a selected row */ & + :has(> .checkbox > :checked) {
& + :has(> aside > :checked) {
border-block-start-color: transparent; border-block-start-color: transparent;
} }
/* Remove the top border when directly succeeded by a selected row */ &:has(+ .row > .checkbox > :checked) {
&:has(+ .row > aside > :checked) {
border-block-end-color: transparent; border-block-end-color: transparent;
} }
} }
@ -126,16 +90,52 @@
&:hover { &:hover {
--alpha: .2 !important; --alpha: .2 !important;
} }
}
& > aside { & .header {
position: sticky; position: sticky;
inset-inline-start: 1px; inset-block-start: 0;
background: inherit; border-block-end: 1px solid var(--surface-300);
padding: var(--padding-m); z-index: 2;
z-index: 1; animation: header-scroll-shadow linear both;
animation-timeline: scroll();
animation-range: 0 2em;
font-weight: var(--weight-bold);
& > tr {
all: inherit;
display: contents;
& > .cell {
grid-auto-flow: column;
justify-content: space-between;
& > svg {
transition: opacity .15s ease-in-out;
}
&:not(.sorted):not(:hover) > svg {
opacity: 0;
}
}
} }
} }
& .main {
background-color: inherit;
}
& .footer {
position: sticky;
inset-block-end: 0;
border-block-start: 1px solid var(--surface-300);
z-index: 2;
animation: header-scroll-shadow linear both reverse;
animation-timeline: scroll();
animation-range: calc(100% - 2em) 100%;
font-weight: var(--weight-bold);
}
& details { & details {
display: contents; display: contents;
background-color: inherit; background-color: inherit;
@ -177,9 +177,8 @@
&.selectable { &.selectable {
grid-template-columns: 2em repeat(var(--columns), minmax(max-content, auto)); grid-template-columns: 2em repeat(var(--columns), minmax(max-content, auto));
& .cell:first-of-type { & :is(.cell:first-child, .checkbox + .cell) {
inset-inline-start: 2em; inset-inline-start: 2em;
/* inset-inline-start: calc(2em + var(--padding-m) * var(--depth)); */
} }
& details > summary { & details > summary {

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

@ -1,9 +1,9 @@
import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js"; import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
import { selectable, SelectionProvider, useSelection } from "~/features/selectable"; import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset'; import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset';
import css from './table.module.css';
import { createStore } from "solid-js/store"; import { createStore } from "solid-js/store";
import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa"; import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
import css from './table.module.css';
selectable selectable
@ -11,10 +11,12 @@ export type Column<T> = {
id: keyof T, id: keyof T,
label: string, label: string,
sortable?: boolean, sortable?: boolean,
group?: string,
readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[], readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[],
}; };
type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> }; type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> };
export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element };
export interface TableApi<T extends Record<string, any>> { export interface TableApi<T extends Record<string, any>> {
readonly selection: Accessor<SelectionItem<T>[]>; readonly selection: Accessor<SelectionItem<T>[]>;
@ -31,7 +33,7 @@ const TableContext = createContext<{
readonly selectionMode: Accessor<SelectionMode>, readonly selectionMode: Accessor<SelectionMode>,
readonly groupBy: Accessor<string | undefined>, readonly groupBy: Accessor<string | undefined>,
readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>, readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
readonly cellRenderers: Accessor<Record<string, (cell: { key: string, value: any }) => JSX.Element>>, readonly cellRenderers: Accessor<CellEditors<any>>,
setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void; setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void;
}>(); }>();
@ -50,6 +52,7 @@ export enum SelectionMode {
} }
type TableProps<T extends Record<string, any>> = { type TableProps<T extends Record<string, any>> = {
class?: string, class?: string,
summary?: string,
rows: T[], rows: T[],
columns: Column<T>[], columns: Column<T>[],
groupBy?: keyof T, groupBy?: keyof T,
@ -58,7 +61,7 @@ type TableProps<T extends Record<string, any>> = {
reversed?: boolean, reversed?: boolean,
}, },
selectionMode?: SelectionMode, selectionMode?: SelectionMode,
children?: { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element }, children?: CellEditors<T>,
api?: (api: TableApi<T>) => any, api?: (api: TableApi<T>) => any,
}; };
@ -76,7 +79,7 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
const columns = createMemo<Column<T>[]>(() => props.columns ?? []); const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None); const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
const groupBy = createMemo(() => props.groupBy as string | undefined); const groupBy = createMemo(() => props.groupBy as string | undefined);
const cellRenderers = createMemo(() => props.children ?? {}); const cellRenderers = createMemo<CellEditors<T>>(() => props.children ?? {});
const context = { const context = {
rows, rows,
@ -96,12 +99,12 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
<SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}> <SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
<Api api={props.api} /> <Api api={props.api} />
<InnerTable class={props.class} rows={rows()} /> <InnerTable class={props.class} summary={props.summary} rows={rows()} />
</SelectionProvider> </SelectionProvider>
</TableContext.Provider>; </TableContext.Provider>;
}; };
type InnerTableProps<T extends Record<string, any>> = { class?: string, rows: T[] }; type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: T[] };
function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) { function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
const table = useTable(); const table = useTable();
@ -126,16 +129,28 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
return dataset; return dataset;
}); });
return <section 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}>{
summary => <caption>{summary()}</caption>
}</Show>
<Groups />
<Head /> <Head />
<main class={css.main}> <tbody class={css.main}>
<For each={nodes()}>{ <For each={nodes()}>{
node => <Node node={node} depth={0} /> node => <Node node={node} depth={0} />
}</For> }</For>
</tbody>
</main> {/* <Show when={true}>
</section> <tfoot class={css.footer}>
<tr>
<td colSpan={columnCount()}>FOOTER</td>
</tr>
</tfoot>
</Show> */}
</table>
}; };
function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) { function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
@ -163,57 +178,71 @@ function Api<T extends Record<string, any>>(props: { api: undefined | ((api: Tab
return null; return null;
}; };
function Head<T extends Record<string, any>>(props: {}) { function Groups(props: {}) {
const table = useTable();
const groups = createMemo(() => {
return new Set(table.columns().map(c => c.group).filter(g => g !== undefined)).values().toArray();
});
return <For each={groups()}>{
group => <colgroup span="1" data-group-name={group} />
}</For>
}
function Head(props: {}) {
const table = useTable(); const table = useTable();
const context = useSelection(); const context = useSelection();
return <header class={css.header}> return <thead class={css.header}>
<Show when={table.selectionMode() !== SelectionMode.None}> <tr>
<aside> <Show when={table.selectionMode() !== SelectionMode.None}>
<input <th class={css.checkbox}>
type="checkbox" <input
checked={context.selection().length > 0 && context.selection().length === context.length()} type="checkbox"
indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()} checked={context.selection().length > 0 && context.selection().length === context.length()}
on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()} indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
/> on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
</aside> />
</Show> </th>
</Show>
<For each={table.columns()}>{ <For each={table.columns()}>{
({ id, label, sortable }) => { ({ id, label, sortable }) => {
const sort = createMemo(() => table.sort()); const sort = createMemo(() => table.sort());
const by = String(id); const by = String(id);
const onPointerDown = (e: PointerEvent) => { const onPointerDown = (e: PointerEvent) => {
if (sortable !== true) { if (sortable !== true) {
return; return;
}
table.setSort(current => {
if (current?.by !== by) {
return { by, reversed: false };
} }
if (current.reversed === true) { table.setSort(current => {
return undefined; if (current?.by !== by) {
} return { by, reversed: false };
}
return { by, reversed: true }; if (current.reversed === true) {
}); return undefined;
}; }
return <span class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}> return { by, reversed: true };
{label} });
};
<Switch> return <th scope="col" class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
<Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match> {label}
<Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
<Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match> <Switch>
</Switch> <Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match>
</span>; <Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
} <Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
}</For> </Switch>
</header>; </th>;
}
}</For>
</tr>
</thead>;
}; };
function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, depth: number, groupedBy?: keyof T }) { function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, depth: number, groupedBy?: keyof T }) {
@ -235,17 +264,17 @@ function Row<T extends Record<string, any>>(props: { key: string, value: T, dept
const values = createMemo(() => Object.entries(props.value)); const values = createMemo(() => Object.entries(props.value));
const isSelected = context.isSelected(props.key); const isSelected = context.isSelected(props.key);
return <div class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}> return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
<Show when={table.selectionMode() !== SelectionMode.None}> <Show when={table.selectionMode() !== SelectionMode.None}>
<aside> <th class={css.checkbox}>
<input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} /> <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
</aside> </th>
</Show> </Show>
<For each={values()}>{ <For each={values()}>{
([k, value]) => <div class={css.cell}>{table.cellRenderers()[k]?.({ key: `${props.key}.${k}`, value }) ?? value}</div> ([k, value]) => <td class={css.cell}>{table.cellRenderers()[k]?.({ value }) ?? value}</td>
}</For> }</For>
</div>; </tr>;
}; };
function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) { function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) {

59
src/features/command/index.tsx
View file

@ -1,9 +1,9 @@
import { Accessor, children, Component, createContext, createEffect, createMemo, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js'; import { Accessor, children, Component, createContext, createEffect, createMemo, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
interface CommandContextType { interface CommandContextType {
set(commands: CommandType<any[]>[]): void; set(commands: CommandType<any>[]): void;
addContextualArguments<T extends any[] = any[]>(command: CommandType<T>, target: EventTarget, args: Accessor<T>): void; addContextualArguments<T extends (...args: any[]) => any = any>(command: CommandType<T>, target: EventTarget, args: Accessor<Parameters<T>>): void;
execute<TArgs extends any[] = []>(command: CommandType<TArgs>, event: Event): void; execute<T extends (...args: any[]) => any = any>(command: CommandType<T>, event: Event): void;
} }
const CommandContext = createContext<CommandContextType>(); const CommandContext = createContext<CommandContextType>();
@ -13,16 +13,16 @@ export const useCommands = () => useContext(CommandContext);
const Root: ParentComponent<{ commands: CommandType[] }> = (props) => { const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
// const commands = () => props.commands ?? []; // const commands = () => props.commands ?? [];
const contextualArguments = new Map<CommandType, WeakMap<EventTarget, Accessor<any[]>>>(); const contextualArguments = new Map<CommandType, WeakMap<EventTarget, Accessor<any[]>>>();
const commands = new Set<CommandType<any[]>>(); const commands = new Set<CommandType<any>>();
const context = { const context = {
set(c: CommandType<any[]>[]): void { set(c: CommandType<any>[]): void {
for (const command of c) { for (const command of c) {
commands.add(command); commands.add(command);
} }
}, },
addContextualArguments<T extends any[] = any[]>(command: CommandType<T>, target: EventTarget, args: Accessor<T>): void { addContextualArguments<T extends (...args: any[]) => any = any>(command: CommandType<T>, target: EventTarget, args: Accessor<Parameters<T>>): void {
if (contextualArguments.has(command) === false) { if (contextualArguments.has(command) === false) {
contextualArguments.set(command, new WeakMap()); contextualArguments.set(command, new WeakMap());
} }
@ -30,8 +30,8 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
contextualArguments.get(command)?.set(target, args); contextualArguments.get(command)?.set(target, args);
}, },
execute<T extends any[] = any[]>(command: CommandType<T>, event: Event): boolean | undefined { execute<T extends (...args: any[]) => any = any>(command: CommandType<T>, event: Event): boolean | undefined {
const args = ((): T => { const args = ((): Parameters<T> => {
const contexts = contextualArguments.get(command); const contexts = contextualArguments.get(command);
@ -45,7 +45,8 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
return [] as any; return [] as any;
} }
const args = contexts.get(element)! as Accessor<T>; const args = contexts.get(element)! as Accessor<Parameters<T>>;
return args(); return args();
})(); })();
@ -84,9 +85,9 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
</CommandContext.Provider>; </CommandContext.Provider>;
}; };
const Add: Component<{ command: CommandType<any[]> } | { commands: CommandType<any[]>[] }> = (props) => { const Add: Component<{ command: CommandType<any> } | { commands: CommandType<any>[] }> = (props) => {
const context = useCommands(); const context = useCommands();
const commands = createMemo<CommandType<any[]>[]>(() => props.commands ?? [props.command]); const commands = createMemo<CommandType<any>[]>(() => props.commands ?? [props.command]);
createEffect(() => { createEffect(() => {
context?.set(commands()); context?.set(commands());
@ -95,7 +96,7 @@ const Add: Component<{ command: CommandType<any[]> } | { commands: CommandType<a
return undefined; return undefined;
}; };
const Context = <T extends any[] = any[]>(props: ParentProps<{ for: CommandType<T>, with: T }>): JSX.Element => { const Context = <T extends (...args: any[]) => any = any>(props: ParentProps<{ for: CommandType<T>, with: Parameters<T> }>): JSX.Element => {
const resolved = children(() => props.children); const resolved = children(() => props.children);
const context = useCommands(); const context = useCommands();
const args = createMemo(() => props.with); const args = createMemo(() => props.with);
@ -139,17 +140,19 @@ export enum Modifier {
Alt = 1 << 3, Alt = 1 << 3,
} }
export interface CommandType<TArgs extends any[] = []> { export interface CommandType<T extends (...args: any[]) => any = any> {
(...args: TArgs): any; (...args: Parameters<T>): Promise<ReturnType<T>>;
label: string; label: string;
shortcut?: { shortcut?: {
key: string; key: string;
modifier: Modifier; modifier: Modifier;
}; };
withLabel(label: string): CommandType<T>;
with<A extends any[], B extends any[]>(this: (this: ThisParameterType<T>, ...args: [...A, ...B]) => ReturnType<T>, ...args: A): CommandType<(...args: B) => ReturnType<T>>;
} }
export const createCommand = <TArgs extends any[] = []>(label: string, command: (...args: TArgs) => any, shortcut?: CommandType['shortcut']): CommandType<TArgs> => { export const createCommand = <T extends (...args: any[]) => any>(label: string, command: T, shortcut?: CommandType['shortcut']): CommandType<T> => {
return Object.defineProperties(command as CommandType<TArgs>, { return Object.defineProperties(((...args: Parameters<T>) => command(...args)) as any, {
label: { label: {
value: label, value: label,
configurable: false, configurable: false,
@ -159,18 +162,24 @@ export const createCommand = <TArgs extends any[] = []>(label: string, command:
value: shortcut ? { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier } : undefined, value: shortcut ? { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier } : undefined,
configurable: false, configurable: false,
writable: false, writable: false,
},
withLabel: {
value(label: string) {
return createCommand(label, command, shortcut);
},
configurable: false,
writable: false,
},
with: {
value<A extends any[], B extends any[]>(this: (this: ThisParameterType<T>, ...args: [...A, ...B]) => ReturnType<T>, ...args: A): CommandType<(...args: B) => ReturnType<T>> {
return createCommand(label, command.bind(undefined, ...args), shortcut);
},
configurable: false,
writable: false,
} }
}); });
}; };
export const noop = Object.defineProperties(createCommand('noop', () => { }), { export const noop = createCommand('noop', () => { });
withLabel: {
value(label: string) {
return createCommand(label, () => { });
},
configurable: false,
writable: false,
},
}) as CommandType & { withLabel(label: string): CommandType };
export { Context } from './contextMenu'; export { Context } from './contextMenu';

128
src/features/file/grid.module.css
View file

@ -1,128 +0,0 @@
.table {
position: relative;
display: grid;
grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
align-content: start;
padding-inline: 1px;
margin-inline: -1px;
block-size: 100%;
overflow: clip auto;
background-color: var(--surface-600);
& input[type="checkbox"] {
margin: .1em;
}
& textarea {
resize: vertical;
min-block-size: max(2em, 100%);
max-block-size: 50em;
background-color: var(--surface-600);
color: var(--text-1);
border-color: var(--text-2);
border-radius: var(--radii-s);
&:has(::spelling-error, ::grammar-error) {
border-color: var(--fail);
}
& ::spelling-error {
outline: 1px solid var(--fail);
text-decoration: yellow underline;
}
}
& .cell {
display: grid;
padding: .5em;
border: 1px solid transparent;
border-radius: var(--radii-m);
&:has(textarea:focus) {
border-color: var(--info);
}
& > span {
align-self: center;
}
}
& :is(.header, .main, .footer) {
grid-column: span calc(2 + var(--columns));
display: grid;
grid-template-columns: subgrid;
}
& .header {
position: sticky;
inset-block-start: 0;
background-color: var(--surface-600);
border-block-end: 1px solid var(--surface-300);
}
& .row {
--bg: var(--text);
--alpha: 0;
grid-column: span calc(2 + var(--columns));
display: grid;
grid-template-columns: subgrid;
border: 1px solid transparent;
background-color: color(from var(--bg) srgb r g b / var(--alpha));
&:has(> .cell > :checked) {
--bg: var(--info);
--alpha: .1;
border-color: var(--bg);
& span {
font-variation-settings: 'GRAD' 1000;
}
& + :has(> .cell> :checked) {
border-block-start-color: transparent;
}
&:has(+ .row > .cell > :checked) {
border-block-end-color: transparent;
}
}
&:hover {
--alpha: .2 !important;
}
}
& details {
display: contents;
&::details-content {
grid-column: span calc(2 + var(--columns));
display: grid;
grid-template-columns: subgrid;
}
&:not([open])::details-content {
display: none;
}
& > summary {
grid-column: 2 / span calc(1 + var(--columns));
padding: .5em;
padding-inline-start: calc(var(--depth) * 1em + .5em);
}
& > .row > .cell > span {
padding-inline-start: calc(var(--depth) * 1em);
}
}
}
@property --depth {
syntax: "<number>";
inherits: false;
initial-value: 0;
}

5
src/features/file/grid.tsx
View file

@ -105,6 +105,10 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
}, },
addColumn(name: string): void { addColumn(name: string): void {
if (state.columns.includes(name)) {
return;
}
setState(produce(state => { setState(produce(state => {
state.columns.push(name); state.columns.push(name);
state.rows = Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, { ...row, [name]: '' }])); state.rows = Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, { ...row, [name]: '' }]));
@ -155,7 +159,6 @@ const Api: Component<{ api: undefined | ((api: GridApi) => any), table?: any }>
insert(prop: string) { insert(prop: string) {
gridContext.insert(prop); gridContext.insert(prop);
}, },
addColumn(name: string): void { addColumn(name: string): void {
gridContext.addColumn(name); gridContext.addColumn(name);
}, },

8
src/features/menu/index.tsx
View file

@ -75,9 +75,9 @@ const useMenu = () => {
return context; return context;
} }
type ItemProps = { label: string, children: JSX.Element } | { command: CommandType }; type ItemProps<T extends (...args: any[]) => any> = { label: string, children: JSX.Element } | { command: CommandType<T> };
const Item: Component<ItemProps> = (props) => { function Item<T extends (...args: any[]) => any>(props: ItemProps<T>) {
const id = createUniqueId(); const id = createUniqueId();
if (props.command) { if (props.command) {
@ -303,7 +303,7 @@ function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
createEffect(() => { createEffect(() => {
const length = results().length - 1; const length = results().length - 1;
setSelected(current => current !== undefined ? Math.min(current, length) : undefined); setSelected(current => Math.min(current, length));
}); });
const onKeyDown = (e: KeyboardEvent) => { const onKeyDown = (e: KeyboardEvent) => {
@ -334,7 +334,7 @@ function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
}; };
return <form method="dialog" class={css.search} onkeydown={onKeyDown} onsubmit={onSubmit}> return <form method="dialog" class={css.search} onkeydown={onKeyDown} onsubmit={onSubmit}>
<input id={`search-${id}`} ref={setInput} value={term()} oninput={(e) => setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" /> <input id={`search-${id}`} ref={setInput} value={term()} oninput={(e) => setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" enterkeyhint="go" />
<output for={`search-${id}`}> <output for={`search-${id}`}>
<For each={results()}>{ <For each={results()}>{

8
src/global.d.ts vendored
View file

@ -2,4 +2,12 @@
interface FileSystemHandle { interface FileSystemHandle {
getUniqueId(): Promise<string>; getUniqueId(): Promise<string>;
}
declare module "solid-js" {
namespace JSX {
interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
indeterminate?: boolean;
}
}
} }

127
src/routes/(editor)/experimental.tsx
View file

@ -1,119 +1,22 @@
import { Column, GroupNode, RowNode, Node, SelectionMode, Table } from "~/components/table";
import css from "./experimental.module.css";
import { Sidebar } from "~/components/sidebar";
import { createStore } from "solid-js/store";
import { createEffect, For } from "solid-js";
import { Person, people } from './experimental.data';
export default function Experimental() { import { ParentProps } from "solid-js";
const columns: Column<Person>[] = [ import { Menu } from "~/features/menu";
{ import { createCommand } from "~/features/command";
id: 'id', import { useNavigate } from "@solidjs/router";
label: '#',
groupBy(rows: RowNode<Person>[]) {
const group = (nodes: (RowNode<Person> & { _key: string })[]): Node<Person>[] => nodes.every(n => n._key.includes('.') === false)
? nodes
: Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
.map<GroupNode<Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
return group(rows.map(row => ({ ...row, _key: row.value.id }))); export default function Experimental(props: ParentProps) {
}, const navigate = useNavigate();
},
{
id: 'name',
label: 'Name',
sortable: true,
},
{
id: 'email',
label: 'Email',
sortable: true,
},
{
id: 'address',
label: 'Address',
sortable: true,
},
{
id: 'currency',
label: 'Currency',
sortable: true,
},
{
id: 'phone',
label: 'Phone',
sortable: true,
},
{
id: 'country',
label: 'Country',
sortable: true,
},
];
const [store, setStore] = createStore<{ selectionMode: SelectionMode, groupBy?: keyof Person, sort?: { by: keyof Person, reversed?: boolean } }>({ const goTo = createCommand('go to', (to: string) => {
selectionMode: SelectionMode.None, navigate(`/experimental/${to}`);
// groupBy: 'value',
// sortBy: 'key'
}); });
createEffect(() => { return <>
console.log({ ...store }); <Menu.Root>
}); <Menu.Item command={goTo.withLabel('table').with('table')} />
<Menu.Item command={goTo.withLabel('grid').with('grid')} />
</Menu.Root>
return <div class={css.root}> {props.children}
<Sidebar as="aside" label={'Filters'} class={css.sidebar}> </>;
<fieldset>
<legend>table properties</legend>
<label>
Selection mode
<select value={store.selectionMode} oninput={e => setStore('selectionMode', Number.parseInt(e.target.value))}>
<option value={SelectionMode.None}>None</option>
<option value={SelectionMode.Single}>Single</option>
<option value={SelectionMode.Multiple}>Multiple</option>
</select>
</label>
<label>
Group by
<select value={store.groupBy ?? ''} oninput={e => setStore('groupBy', (e.target.value || undefined) as any)}>
<option value=''>None</option>
<For each={columns}>{
column => <option value={column.id}>{column.label}</option>
}</For>
</select>
</label>
</fieldset>
<fieldset>
<legend>table sorting</legend>
<label>
by
<select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Entry, reversed: prev?.reversed } : undefined)}>
<option value=''>None</option>
<For each={columns}>{
column => <option value={column.id}>{column.label}</option>
}</For>
</select>
</label>
<label>
reversed
<input type="checkbox" checked={store.sort?.reversed ?? false} oninput={e => setStore('sort', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
</label>
</fieldset>
</Sidebar>
<div class={css.content}>
<Table class={css.table} rows={people} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
// email: (cell) => <input type="email" value={cell.value} />,
}}</Table>
</div>
</div >;
} }

0
src/routes/(editor)/experimental.data.ts → src/routes/(editor)/experimental/experimental.data.ts
View file

0
src/routes/(editor)/experimental.module.css → src/routes/(editor)/experimental/grid.module.css
View file

67
src/routes/(editor)/experimental/grid.tsx Normal file
View file

@ -0,0 +1,67 @@
import { Sidebar } from '~/components/sidebar';
import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, Grid, GridApi } from '~/components/grid';
import { people, Person } from './experimental.data';
import css from './grid.module.css';
import { createMemo, createSignal } from 'solid-js';
export default function GridExperiment() {
const columns: Column<Person>[] = [
{
id: 'id',
label: '#',
groupBy(rows: DataSetRowNode<Person>[]) {
const group = (nodes: (DataSetRowNode<Person> & { _key: string })[]): DataSetNode<Person>[] => nodes.every(n => n._key.includes('.') === false)
? nodes
: Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
.map<DataSetGroupNode<Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
return group(rows.map(row => ({ ...row, _key: row.value.id })));
},
},
{
id: 'name',
label: 'Name',
sortable: true,
},
{
id: 'email',
label: 'Email',
sortable: true,
editor: ({ value }) => <input value={value} />,
},
{
id: 'address',
label: 'Address',
sortable: true,
},
{
id: 'currency',
label: 'Currency',
sortable: true,
},
{
id: 'phone',
label: 'Phone',
sortable: true,
},
{
id: 'country',
label: 'Country',
sortable: true,
},
];
const [api, setApi] = createSignal<GridApi<Person>>();
const mutations = createMemo(() => api()?.mutations() ?? [])
return <div class={css.root}>
<Sidebar as="aside" label={'Mutations'} class={css.sidebar}>
{mutations().length}
</Sidebar>
<div class={css.content}>
<Grid api={setApi} rows={people} columns={columns} groupBy="country" />
</div>
</div >;
}

36
src/routes/(editor)/experimental/table.module.css Normal file
View file

@ -0,0 +1,36 @@
.root {
display: grid;
grid: 100% / auto minmax(0, 1fr);
inline-size: 100%;
block-size: 100%;
& .sidebar {
z-index: 1;
padding: var(--padding-xl);
background-color: var(--surface-300);
& > ul {
padding: 0;
margin: 0;
}
& fieldset {
display: flex;
flex-flow: column;
gap: var(--padding-m);
}
}
& .content {
background-color: var(--surface-500);
border-top-left-radius: var(--radii-xl);
& > header {
padding-inline-start: var(--padding-l);
}
& .table {
border-radius: inherit;
}
}
}

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

@ -0,0 +1,114 @@
import { Sidebar } from '~/components/sidebar';
import css from './table.module.css';
import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, SelectionMode, Table } from '~/components/table';
import { createStore } from 'solid-js/store';
import { Person, people } from './experimental.data';
export default function TableExperiment() {
const columns: Column<Person>[] = [
{
id: 'id',
label: '#',
groupBy(rows: DataSetRowNode<Person>[]) {
const group = (nodes: (DataSetRowNode<Person> & { _key: string })[]): DataSetNode<Person>[] => nodes.every(n => n._key.includes('.') === false)
? nodes
: Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
.map<DataSetGroupNode<Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
return group(rows.map(row => ({ ...row, _key: row.value.id })));
},
},
{
id: 'name',
label: 'Name',
sortable: true,
},
{
id: 'email',
label: 'Email',
sortable: true,
},
{
id: 'address',
label: 'Address',
sortable: true,
},
{
id: 'currency',
label: 'Currency',
sortable: true,
},
{
id: 'phone',
label: 'Phone',
sortable: true,
},
{
id: 'country',
label: 'Country',
sortable: true,
},
];
const [store, setStore] = createStore<{ selectionMode: SelectionMode, groupBy?: keyof Person, sort?: { by: keyof Person, reversed?: boolean } }>({
selectionMode: SelectionMode.None,
// groupBy: 'value',
// sortBy: 'key'
});
return <div class={css.root}>
<Sidebar as="aside" label={'Filters'} class={css.sidebar}>
<fieldset>
<legend>table properties</legend>
<label>
Selection mode
<select value={store.selectionMode} oninput={e => setStore('selectionMode', Number.parseInt(e.target.value))}>
<option value={SelectionMode.None}>None</option>
<option value={SelectionMode.Single}>Single</option>
<option value={SelectionMode.Multiple}>Multiple</option>
</select>
</label>
<label>
Group by
<select value={store.groupBy ?? ''} oninput={e => setStore('groupBy', (e.target.value || undefined) as any)}>
<option value=''>None</option>
<For each={columns}>{
column => <option value={column.id}>{column.label}</option>
}</For>
</select>
</label>
</fieldset>
<fieldset>
<legend>table sorting</legend>
<label>
by
<select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Entry, reversed: prev?.reversed } : undefined)}>
<option value=''>None</option>
<For each={columns}>{
column => <option value={column.id}>{column.label}</option>
}</For>
</select>
</label>
<label>
reversed
<input type="checkbox" checked={store.sort?.reversed ?? false} oninput={e => setStore('sort', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
</label>
</fieldset>
</Sidebar>
<div class={css.content}>
<Table class={css.table} rows={people} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
// email: (cell) => <input type="email" value={cell.value} />,
}}</Table>
</div>
</div >;
}

5
src/routes/editor.module.css
View file

@ -144,11 +144,6 @@
} }
} }
/* ::view-transition-old(menu),
::view-transition-new(menu) {
z-index: 1;
} */
::view-transition-old(content) { ::view-transition-old(content) {
animation-name: slide-left; animation-name: slide-left;
} }