[Feature] Add language #19
8 changed files with 686 additions and 158 deletions
128
src/components/grid.module.css
Normal file
128
src/components/grid.module.css
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
.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
Normal file
280
src/components/grid.tsx
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
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()}
|
||||
/>
|
||||
};
|
||||
108
src/components/table.module.css
Normal file
108
src/components/table.module.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
.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%;
|
||||
|
||||
& input[type="checkbox"] {
|
||||
margin: .1em;
|
||||
}
|
||||
|
||||
& .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;
|
||||
border-block-end: 1px solid var(--surface-300);
|
||||
}
|
||||
|
||||
& .main {
|
||||
overflow: clip auto;
|
||||
}
|
||||
|
||||
& .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;
|
||||
}
|
||||
114
src/components/table.tsx
Normal file
114
src/components/table.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import { Component, createMemo, createSignal, For, Match, Show, Switch } from "solid-js";
|
||||
import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
|
||||
import css from './table.module.css';
|
||||
|
||||
selectable
|
||||
|
||||
type Row<T> = { kind: 'row', key: string, value: T }
|
||||
type Group<T> = { kind: 'group', key: string, nodes: Node<T>[] };
|
||||
type Node<T> = Row<T> | Group<T>;
|
||||
|
||||
export function Table<T extends Record<string, any>>(props: { class?: string, rows: T[], selectable?: boolean }) {
|
||||
const [selection, setSelection] = createSignal<object[]>([]);
|
||||
const columns = createMemo(() => ['#', ...Object.keys(props.rows.at(0) ?? {})]);
|
||||
const selectable = createMemo(() => props.selectable ?? false);
|
||||
|
||||
return <>
|
||||
<SelectionProvider selection={setSelection} multiSelect>
|
||||
{/* <Api api={props.api} /> */}
|
||||
|
||||
<_Table class={props.class} columns={columns()} rows={props.rows} />
|
||||
</SelectionProvider>
|
||||
</>;
|
||||
};
|
||||
|
||||
type TableProps<T extends Record<string, any>> = { class?: string, columns: (keyof T)[], rows: T[] };
|
||||
|
||||
function _Table<T extends Record<string, any>>(props: TableProps<T>) {
|
||||
const columnCount = createMemo(() => props.columns.length - 1);
|
||||
const nodes = createMemo<Node<T>[]>(() => {
|
||||
const rows = Object.entries(props.rows).map<Row<T>>(([i, row]) => ({ kind: 'row', key: row['key'], value: row }));
|
||||
|
||||
const group = (nodes: Row<T>[]): Node<T>[] => nodes.every(n => n.key.includes('.') === false)
|
||||
? nodes
|
||||
: Object.entries(Object.groupBy(nodes, r => String(r.key).split('.').at(0)!))
|
||||
.map<Group<T>>(([key, nodes]) => ({ kind: 'group', key, nodes: group(nodes!.map(n => ({ ...n, key: n.key.slice(key.length + 1) }))) }));
|
||||
|
||||
const grouped = group(rows);
|
||||
|
||||
return grouped;
|
||||
});
|
||||
|
||||
return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
|
||||
<Head headers={props.columns} />
|
||||
|
||||
<main class={css.main}>
|
||||
<For each={nodes()}>{
|
||||
node => <Node node={node} depth={0} />
|
||||
}</For>
|
||||
|
||||
</main>
|
||||
</section>
|
||||
};
|
||||
|
||||
function Head<T extends Record<string, any>>(props: { headers: (keyof T)[] }) {
|
||||
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.toString()}</span>
|
||||
}</For>
|
||||
</header>;
|
||||
};
|
||||
|
||||
function Node<T extends Record<string, any>>(props: { node: Node<T>, depth: number }) {
|
||||
return <Switch>
|
||||
<Match when={props.node.kind === 'row' ? props.node : undefined}>{
|
||||
row => <Row key={row().key} value={row().value} depth={props.depth} />
|
||||
}</Match>
|
||||
|
||||
<Match when={props.node.kind === 'group' ? props.node : undefined}>{
|
||||
group => <Group key={group().key} nodes={group().nodes} depth={props.depth} />
|
||||
}</Match>
|
||||
</Switch>;
|
||||
}
|
||||
|
||||
function Row<T extends Record<string, any>>(props: { key: string, value: T, depth: number }) {
|
||||
const context = useSelection();
|
||||
|
||||
const values = createMemo(() => Object.entries(props.value));
|
||||
const isSelected = context.isSelected(props.key);
|
||||
|
||||
return <div class={css.row} use:selectable={{ value: props.value, key: props.key }}>
|
||||
<div class={css.cell}>
|
||||
<input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
|
||||
</div>
|
||||
|
||||
<div class={css.cell}>
|
||||
<span style={{ '--depth': props.depth }}>{props.key}</span>
|
||||
</div>
|
||||
|
||||
<For each={values()}>{
|
||||
([k, v]) => <div class={css.cell}>{v}</div>
|
||||
}</For>
|
||||
</div>;
|
||||
};
|
||||
|
||||
function Group<T extends Record<string, any>>(props: { key: string, nodes: Node<T>[], depth: number }) {
|
||||
return <details open>
|
||||
<summary style={{ '--depth': props.depth }}>{props.key}</summary>
|
||||
|
||||
<For each={props.nodes}>{
|
||||
node => <Node node={node} depth={props.depth + 1} />
|
||||
}</For>
|
||||
</details>;
|
||||
};
|
||||
|
|
@ -224,10 +224,6 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
|
|||
return existingFiles.concat(newFiles);
|
||||
});
|
||||
|
||||
// createEffect(() => {
|
||||
// console.log(mutatedData());
|
||||
// });
|
||||
|
||||
createEffect(() => {
|
||||
const directory = props.root;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
section.index {
|
||||
display: grid;
|
||||
grid: 100% / auto minmax(0, 1fr);
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
& > aside {
|
||||
overflow: clip auto;
|
||||
resize: horizontal;
|
||||
|
||||
min-inline-size: 300px;
|
||||
max-inline-size: 75vw;
|
||||
block-size: 100%;
|
||||
padding: 1em;
|
||||
padding-block-start: 1.5em;
|
||||
padding-inline-end: 1em;
|
||||
}
|
||||
|
||||
& > section {
|
||||
display: grid;
|
||||
grid: 100% / 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
padding-inline: 1em;
|
||||
}
|
||||
}
|
||||
26
src/routes/(editor)/experimental.module.css
Normal file
26
src/routes/(editor)/experimental.module.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
& .content {
|
||||
background-color: var(--surface-500);
|
||||
border-top-left-radius: var(--radii-xl);
|
||||
|
||||
& > header {
|
||||
padding-inline-start: var(--padding-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,132 +1,35 @@
|
|||
import { Component, createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
|
||||
import { useFiles } from "~/features/file";
|
||||
import { Menu } from "~/features/menu";
|
||||
import { createCommand, Modifier } from "~/features/command";
|
||||
import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
|
||||
import { createStore, produce } from "solid-js/store";
|
||||
import { Tab, Tabs } from "~/components/tabs";
|
||||
import "./experimental.css";
|
||||
import { selectable, SelectionProvider } from "~/features/selectable";
|
||||
|
||||
interface ExperimentalState {
|
||||
files: File[];
|
||||
numberOfFiles: number;
|
||||
}
|
||||
import { Table } from "~/components/table";
|
||||
import css from "./experimental.module.css";
|
||||
import { Sidebar } from "~/components/sidebar";
|
||||
|
||||
export default function Experimental() {
|
||||
const files = useFiles();
|
||||
const [tree, setTree] = createSignal<FolderEntry>(emptyFolder);
|
||||
const [state, setState] = createStore<ExperimentalState>({
|
||||
files: [],
|
||||
numberOfFiles: 0,
|
||||
});
|
||||
const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
|
||||
const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
|
||||
const [root, { mutate, refetch }] = createResource(() => files?.get('root'));
|
||||
const rows = [
|
||||
{ key: 'key1.a.a', value: 10 },
|
||||
{ key: 'key1.a.b', value: 20 },
|
||||
{ key: 'key1.a.c', value: 30 },
|
||||
{ key: 'key1.b.a', value: 40 },
|
||||
{ key: 'key1.b.b', value: 50 },
|
||||
{ key: 'key1.b.c', value: 60 },
|
||||
{ key: 'key1.c.a', value: 70 },
|
||||
{ key: 'key1.c.b', value: 80 },
|
||||
{ key: 'key1.c.c', value: 90 },
|
||||
|
||||
createEffect(() => {
|
||||
setState('numberOfFiles', state.files.length);
|
||||
});
|
||||
{ key: 'key2.a.a', value: 10 },
|
||||
{ key: 'key2.a.b', value: 20 },
|
||||
{ key: 'key2.a.c', value: 30 },
|
||||
{ key: 'key2.b.a', value: 40 },
|
||||
{ key: 'key2.b.b', value: 50 },
|
||||
{ key: 'key2.b.c', value: 60 },
|
||||
{ key: 'key2.c.a', value: 70 },
|
||||
{ key: 'key2.c.b', value: 80 },
|
||||
{ key: 'key2.c.c', value: 90 },
|
||||
];
|
||||
|
||||
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
|
||||
onMount(() => {
|
||||
refetch();
|
||||
});
|
||||
return <div class={css.root}>
|
||||
<Sidebar as="aside" label={'Filters'} class={css.sidebar} />
|
||||
|
||||
createEffect(async () => {
|
||||
const directory = root();
|
||||
|
||||
if (root.state === 'ready' && directory?.kind === 'directory') {
|
||||
const entries = await Array.fromAsync(walk(directory, filters()));
|
||||
|
||||
setTree({ name: '', kind: 'folder', entries });
|
||||
}
|
||||
});
|
||||
|
||||
const open = async (file: File) => {
|
||||
setState('files', produce(files => {
|
||||
files.push(file);
|
||||
}));
|
||||
};
|
||||
|
||||
const commands = {
|
||||
open: createCommand('open', async () => {
|
||||
const [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
description: "JSON File(s)",
|
||||
accept: {
|
||||
"application/json": [".json", ".jsonp", ".jsonc"],
|
||||
},
|
||||
}
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
multiple: true,
|
||||
});
|
||||
const file = await fileHandle.getFile();
|
||||
const text = await file.text();
|
||||
|
||||
console.log(fileHandle, file, text);
|
||||
}, { key: 'o', modifier: Modifier.Control }),
|
||||
openFolder: createCommand('openFolder', async () => {
|
||||
const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
|
||||
const entries = await Array.fromAsync(walk(directory, filters()));
|
||||
|
||||
files.set('root', directory);
|
||||
mutate(directory);
|
||||
|
||||
setTree({ name: '', kind: 'folder', entries });
|
||||
}),
|
||||
save: createCommand('save', () => {
|
||||
console.log('save');
|
||||
}, { key: 's', modifier: Modifier.Control }),
|
||||
saveAll: createCommand('save all', () => {
|
||||
console.log('save all');
|
||||
}, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
|
||||
} as const;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Root>
|
||||
<Menu.Item label="file">
|
||||
<Menu.Item label="open" command={commands.open} />
|
||||
|
||||
<Menu.Item label="open folder" command={commands.openFolder} />
|
||||
|
||||
<Menu.Item label="save" command={commands.save} />
|
||||
|
||||
<Menu.Item label="save all" command={commands.saveAll} />
|
||||
</Menu.Item>
|
||||
</Menu.Root>
|
||||
|
||||
<section class="index">
|
||||
<aside>
|
||||
<label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
|
||||
<Tree entries={tree().entries} open={open}>{
|
||||
file => file().name
|
||||
}</Tree>
|
||||
</aside>
|
||||
|
||||
<section>
|
||||
<Tabs>
|
||||
<For each={state.files}>{
|
||||
file => <Tab label={file.name}>
|
||||
<Content file={file} />
|
||||
</Tab>
|
||||
}</For>
|
||||
</Tabs>
|
||||
</section>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const Content: Component<{ file: File }> = (props) => {
|
||||
const [content] = createResource(async () => {
|
||||
return await props.file.text();
|
||||
});
|
||||
|
||||
return <Suspense fallback={'loading'}>
|
||||
<pre>{content()}</pre>
|
||||
</Suspense>
|
||||
};
|
||||
<div class={css.content}>
|
||||
<Table rows={rows} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue