@itrocks/list 0.7.1 → 0.13.3

package/list.css

@@ -3,10 +3,13 @@ html.column-reorder * {
   cursor: grabbing !important;
 }
 
+main > article[data-action=list] > header {
+  position: relative;
+}
 main > article[data-action=list] > header > .summary {
   padding: 13px 10px 12px;
   position: absolute;
-  right: 0;
+  right: 48px;
   white-space: nowrap;
 }
 main > article[data-action=list] > form {
@@ -48,6 +51,15 @@ table.objects > * > tr > .column-reorder {
   --column-reorder-tint: inset 0 0 0 100vmax rgb(0 0 0 / 2%);
   box-shadow: var(--column-reorder-tint);
 }
+table.objects > * > tr > .column-reorder.column-add-provisional {
+  --column-reorder-tint: inset 0 0 0 100vmax rgb(47 137 67 / 5%);
+}
+table.objects > * > tr > .column-reorder.moving {
+  --column-reorder-tint: inset 0 0 0 100vmax rgb(38 116 198 / 4%);
+}
+table.objects > * > tr > .column-reorder.removing {
+  --column-reorder-tint: inset 0 0 0 100vmax rgb(220 35 45 / 4%);
+}
 table.objects > * > tr > .column-reorder input {
   box-shadow: var(--column-reorder-tint);
 }
@@ -72,9 +84,40 @@ table.objects > tbody:first-child > tr:nth-child(odd) > td {
 table.objects > thead > tr.properties > th {
   user-select: none;
 }
+table.objects > thead > tr.properties > th.moving, table.objects > thead > tr.properties > th.removing {
+  z-index: 2;
+}
+table.objects > thead > tr.properties > th.moving::before, table.objects > thead > tr.properties > th.removing::before, table.objects > thead > tr.properties > th.column-add-provisional.column-reorder::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  margin-left: -1em;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  pointer-events: none;
+  transform: translateX(-0.15em);
+  vertical-align: -0.22em;
+  width: 1em;
+}
+table.objects > thead > tr.properties > th.moving::before {
+  background: #2674c6;
+  mask-image: url("column-move.svg");
+}
+table.objects > thead > tr.properties > th.removing::before {
+  background: #d51d2c;
+  mask-image: url("column-remove.svg");
+}
+table.objects > thead > tr.properties > th.column-add-provisional.column-reorder::before {
+  background: #2f8943;
+  mask-image: url("column-add.svg");
+}
 table.objects > thead > tr.properties > th[data-property] {
   cursor: pointer;
 }
+table.objects > thead > tr.properties > th[data-sortable=false] {
+  cursor: default;
+}
 table.objects > thead > tr.properties > th[data-sort] {
   padding-right: calc(0.6em + 16px);
 }
@@ -84,7 +127,7 @@ table.objects > thead > tr.properties > th[data-sort]::after {
   mask: url("sort.svg") right center/24px 24px no-repeat;
   position: absolute;
   right: 0;
-  top: calc(50% - 12px);
+  top: 2px;
   width: 24px;
 }
 table.objects > thead > tr.properties > th[data-sort][data-reverse]::after {
@@ -134,3 +177,68 @@ table.objects > thead + tbody > tr:nth-child(odd) > td {
 :not(article, article > form) > table.objects td:first-child, :not(article, article > form) > table.objects th:first-child {
   border-left: 1px solid #d8d8d8;
 }
+
+main > article[data-action=list] > header > .add-column {
+  background: white;
+  border: 0;
+  border-bottom: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  border-radius: 0;
+  bottom: 0;
+  cursor: pointer;
+  font-size: 16px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 44px;
+}
+main > article[data-action=list] > header > .add-column:hover {
+  background-color: #f4f4f4;
+}
+
+table.objects > thead > tr.properties > th {
+  line-height: 28px;
+  padding-block: 0;
+  position: sticky;
+  text-align: center;
+}
+table.objects > thead > tr.properties > th.select {
+  padding-inline: 0;
+}
+table.objects > thead > tr.properties > th.select::before {
+  content: "";
+  display: block;
+  height: 28px;
+}
+table.objects > thead > tr.properties > th.column-add-provisional::before {
+  content: none;
+}
+table.objects > thead > tr.properties > th > input:not([type=checkbox]) {
+  border: 0;
+  border-top: 1px solid #d8d8d8;
+  border-radius: 0;
+  display: block;
+  height: 28px;
+  padding: 0 6px;
+  width: 100%;
+}
+table.objects > thead > tr.properties > th > input[name=reset] {
+  background: url("filter-reset.svg") center no-repeat;
+  color: transparent;
+  cursor: pointer;
+  font-size: 0;
+  padding: 0;
+  width: 28px;
+}
+table.objects > thead > tr.properties > th > input[data-property-filter] {
+  border-left: 1px solid #d8d8d8;
+  margin-left: -0.6em;
+  width: calc(100% + 1.2em);
+}
+table.objects > thead > tr.properties > th[data-sort] > input[data-property-filter] {
+  width: calc(100% + 1.2em + 16px);
+}
+table.objects > thead > tr.properties > th > input:focus {
+  box-shadow: inset 0 0 0 2px Highlight, var(--column-reorder-tint, 0 0 transparent);
+  outline: none;
+}

package/package.json

@@ -4,17 +4,32 @@
 		"email": "baptiste@pillot.fr"
 	},
 	"dependencies": {
+		"@itrocks/action": "latest",
 		"@itrocks/action-pack": "latest",
+		"@itrocks/action-request": "latest",
 		"@itrocks/build": "latest",
 		"@itrocks/class-type": "latest",
+		"@itrocks/class-view": "latest",
+		"@itrocks/composition": "latest",
+		"@itrocks/core-transformers": "latest",
+		"@itrocks/decorator": "latest",
 		"@itrocks/list-properties": "latest",
+		"@itrocks/property-select": "latest",
+		"@itrocks/property-view": "latest",
 		"@itrocks/reflect": "latest",
+		"@itrocks/reflect-path": "latest",
 		"@itrocks/request-response": "latest",
+		"@itrocks/route": "latest",
+		"@itrocks/sort": "latest",
+		"@itrocks/storage": "latest",
 		"@itrocks/table": "latest",
+		"@itrocks/transformer": "latest",
 		"@itrocks/xtarget": "latest"
 	},
 	"description": "Generic action-based object list navigation in HTML and JSON",
 	"devDependencies": {
+		"@itrocks/class-file": "latest",
+		"@itrocks/fastify-file-session-store": "latest",
 		"@types/node": "^24.10",
 		"sass": "^1.95",
 		"typescript": "^7.0"
@@ -22,7 +37,14 @@
 	"engines": {
 		"node": ">=24"
 	},
-	"exports": "./cjs/list.js",
+	"exports": {
+		".": "./cjs/list.js",
+		"./multiple-output": "./cjs/multiple-output.js",
+		"./projection": "./cjs/projection.js",
+		"./property-select.js": "./property-select.js",
+		"./selector-state": "./cjs/selector-state.js",
+		"./selector-state.js": "./selector-state.js"
+	},
 	"homepage": "https://it.rocks",
 	"files": [
 		"config.yaml",
@@ -70,5 +92,5 @@
 		"build:front": "tsc -p src/front/tsconfig.json",
 		"test": "npm run build:cjs && node --test \"test/**/*.test.mjs\""
 	},
-	"version": "0.7.1"
+	"version": "0.13.3"
 }

package/property-select.d.ts

@@ -0,0 +1,54 @@
+import { PropertySelectView } from '@itrocks/property-select/front/property-select.js';
+import type { ConsumerPort } from '@itrocks/property-select/property-select.js';
+import type { MetadataProvider } from '@itrocks/property-select/property-select.js';
+import type { PointerSample } from '@itrocks/property-select/property-select.js';
+import type { Outcome } from '@itrocks/property-select/property-select.js';
+import type { SelectionIntent } from '@itrocks/property-select/property-select.js';
+import { TableColumnAdd } from '@itrocks/table/column-add.js';
+export type PaneHandle = {
+    close(): void;
+    open(): void;
+    remove(): void;
+    subscribe(listener: (state: {
+        present: boolean;
+        open: boolean;
+        suspended: boolean;
+    }) => void): () => void;
+    suspend(options?: {
+        mobileOnly?: boolean;
+    }): {
+        restore(): void;
+    };
+};
+export type ListSelectorOptions = {
+    advice?: readonly string[];
+    addition: TableColumnAdd;
+    metadata: MetadataProvider;
+    mountSelector(content: HTMLElement, title: string): PaneHandle;
+    saveColumns(): Promise<void>;
+    templateUrl?: string;
+};
+export declare class ListPropertySelect implements ConsumerPort {
+    private readonly article;
+    private readonly options;
+    private readonly abort;
+    private readonly button;
+    private disposed;
+    private drag?;
+    private readonly observer;
+    private readonly pane;
+    private readonly pending;
+    readonly view: PropertySelectView;
+    constructor(article: HTMLElement, options: ListSelectorOptions);
+    private loadColumn;
+    private add;
+    begin(intent: SelectionIntent, sample: PointerSample): void;
+    cancel(id: string): void;
+    private previewError;
+    dispose(): void;
+    end(id: string, sample: PointerSample): Promise<Outcome>;
+    mount(): Promise<boolean>;
+    move(id: string, sample: PointerSample): void;
+    paths(): string[];
+    select(intent: SelectionIntent, signal: AbortSignal): Promise<Outcome>;
+}

package/property-select.js

@@ -0,0 +1,245 @@
+import { PropertySelectView } from '@itrocks/property-select/front/property-select.js';
+import { normalisePath } from '@itrocks/property-select/property-select.js';
+import { HttpStateStore } from './selector-state.js';
+export class ListPropertySelect {
+    article;
+    options;
+    abort = new AbortController();
+    button;
+    disposed = false;
+    drag;
+    observer;
+    pane;
+    pending = new Map();
+    view;
+    constructor(article, options) {
+        this.article = article;
+        this.options = options;
+        const content = document.createElement('div');
+        this.button = article.querySelector('.add-column');
+        this.pane = options.mountSelector(content, 'Add columns');
+        this.view = new PropertySelectView(content, {
+            consumer: this, metadata: options.metadata, root: article.dataset.propertyRoot,
+            advice: options.advice, stateKey: article.dataset.selectorKey, stateMode: 'session',
+            stateStore: new HttpStateStore(), usedPaths: this.paths()
+        }, { templateUrl: options.templateUrl });
+        this.observer = new MutationObserver(records => {
+            if (this.drag && records.some(record => record.target.tagName === 'TBODY'))
+                this.view.selector.cancel(this.drag.intent.id, 'row view changed');
+            this.view.selector.setConfiguration({ usedPaths: this.paths() });
+        });
+        this.observer.observe(article.querySelector('thead'), { childList: true, subtree: true });
+        this.observer.observe(article.querySelector('tbody'), { childList: true });
+        this.button.addEventListener('click', () => this.pane.open(), { signal: this.abort.signal });
+    }
+    async loadColumn(path, signal) {
+        const form = this.article.querySelector('form');
+        const table = this.article.querySelector('table.objects');
+        const rows = [...table.tBodies[0].rows];
+        const ids = rows.map(row => row.querySelector('input[name=id]').value);
+        const query = new URLSearchParams({ column: path, rowIds: ids.join(',') });
+        const response = await fetch(`${form.action}?${query}`, {
+            signal: AbortSignal.any([signal, this.abort.signal])
+        });
+        const result = await response.json();
+        if (!response.ok)
+            throw new Error(result.error ?? 'Column unavailable');
+        signal.throwIfAborted();
+        if (this.disposed || !this.article.isConnected || rows.some((row, index) => table.tBodies[0].rows[index] !== row)
+            || rows.length !== table.tBodies[0].rows.length)
+            throw new Error('The row view changed; try again');
+        if (result.path !== path)
+            throw new Error('Mismatched column response');
+        const values = new Map(result.rows.map(row => [String(row.id), row.html]));
+        if (ids.some(id => !values.has(id)))
+            throw new Error('The row scope changed; reload the list');
+        const header = document.createElement('th');
+        header.dataset.property = path;
+        header.dataset.sortable = String(result.sortable);
+        const input = document.createElement('input');
+        input.name = `search.${encodeURIComponent(path).replaceAll('.', '%2E')}`;
+        input.dataset.propertyFilter = path;
+        input.setAttribute('aria-label', `Filter ${result.label}`);
+        header.append(result.label, input);
+        const cells = ids.map(id => {
+            const cell = document.createElement('td');
+            cell.innerHTML = values.get(id);
+            return cell;
+        });
+        return { cells, header };
+    }
+    async add(path, signal) {
+        const content = await this.loadColumn(path, signal);
+        const outcome = await this.options.addition.add({ create: () => content, id: path });
+        await this.options.saveColumns();
+        this.view.selector.setConfiguration({ usedPaths: this.paths() });
+        return outcome;
+    }
+    begin(intent, sample) {
+        if (this.disposed || this.drag || this.pending.size)
+            throw new Error('A column operation is pending');
+        const path = normalisePath(intent.path);
+        const paths = this.paths();
+        const suspension = this.pane.suspend({ mobileOnly: true });
+        try {
+            const operation = this.options.addition.beginExternal({
+                id: path,
+                accept: async (signal) => {
+                    const form = this.article.querySelector('form');
+                    const query = new URLSearchParams({ column: path, validate: '1' });
+                    const response = await fetch(`${form.action}?${query}`, {
+                        signal: AbortSignal.any([signal, this.abort.signal])
+                    });
+                    const result = await response.json();
+                    if (!response.ok || result.path !== path)
+                        throw new Error(result.error ?? 'Column unavailable');
+                },
+                create: () => {
+                    const header = document.createElement('th');
+                    header.dataset.property = path;
+                    header.dataset.sortable = 'false';
+                    header.textContent = path;
+                    const cells = [...this.article.querySelectorAll('table.objects tbody tr')].map(() => {
+                        const cell = document.createElement('td');
+                        cell.textContent = 'Loading…';
+                        return cell;
+                    });
+                    return { cells, header };
+                },
+                load: async (signal) => {
+                    try {
+                        return await this.loadColumn(path, signal);
+                    }
+                    catch (error) {
+                        if (!this.disposed && !signal.aborted)
+                            this.previewError(path);
+                        throw error;
+                    }
+                }
+            }, sample);
+            this.drag = { intent, operation, paths, restore: () => suspension.restore() };
+        }
+        catch (error) {
+            suspension.restore();
+            throw error;
+        }
+    }
+    cancel(id) {
+        if (this.drag?.intent.id !== id)
+            return;
+        const drag = this.drag;
+        drag.operation.cancel();
+        this.drag = undefined;
+        drag.restore();
+        this.view.selector.setConfiguration({ usedPaths: this.paths() });
+    }
+    previewError(path) {
+        const header = [...this.article.querySelectorAll('thead [data-property]')]
+            .find(header => header.dataset.property === path);
+        if (!header)
+            return;
+        for (const row of this.article.querySelectorAll('tbody tr'))
+            row.cells[header.cellIndex].textContent = 'Unable to load values';
+        if (header.querySelector('.column-retry'))
+            return;
+        const retry = document.createElement('button');
+        retry.type = 'button';
+        retry.className = 'column-retry';
+        retry.textContent = 'Retry values';
+        retry.addEventListener('click', event => {
+            event.stopPropagation();
+            void this.options.addition.retry(path);
+        }, { signal: this.abort.signal });
+        header.append(retry);
+    }
+    dispose() {
+        if (this.disposed)
+            return;
+        if (this.drag)
+            this.cancel(this.drag.intent.id);
+        this.disposed = true;
+        this.abort.abort();
+        this.observer.disconnect();
+        this.view.dispose();
+        this.pane.remove();
+        this.options.addition.dispose();
+        this.button.hidden = true;
+        this.pending.clear();
+    }
+    async end(id, sample) {
+        const drag = this.drag;
+        if (!drag || drag.intent.id !== id)
+            throw new Error('Unknown column transport');
+        try {
+            const status = await drag.operation.finish(sample);
+            if (status !== 'cancelled')
+                await this.options.saveColumns();
+            if (this.disposed)
+                return { ...drag.intent, status: 'cancelled' };
+            if (this.drag === drag)
+                this.drag = undefined;
+            this.view.selector.setConfiguration({ usedPaths: this.paths() });
+            return { ...drag.intent, status };
+        }
+        catch (error) {
+            drag.operation.cancel();
+            return { ...drag.intent, status: 'rejected', message: String(error) };
+        }
+        finally {
+            if (this.drag === drag)
+                this.drag = undefined;
+            drag.restore();
+        }
+    }
+    async mount() {
+        const mounted = await this.view.mount();
+        if (mounted && !this.disposed)
+            this.button.hidden = false;
+        return mounted;
+    }
+    move(id, sample) {
+        if (this.drag?.intent.id === id)
+            this.drag.operation.move(sample);
+    }
+    paths() {
+        if (this.drag)
+            return [...this.drag.paths];
+        return [...this.article.querySelectorAll('thead [data-property]:not(.column-add-provisional)')]
+            .map(header => header.dataset.property);
+    }
+    async select(intent, signal) {
+        const path = normalisePath(intent.path);
+        try {
+            if (this.drag)
+                throw new Error('A column transport is pending');
+            let status;
+            const pending = this.pending.get(path);
+            if (pending) {
+                await pending;
+                status = 'existing';
+            }
+            else if (this.paths().includes(path))
+                status = 'existing';
+            else {
+                const operation = this.add(path, signal);
+                this.pending.set(path, operation);
+                try {
+                    status = await operation;
+                }
+                finally {
+                    if (this.pending.get(path) === operation)
+                        this.pending.delete(path);
+                }
+            }
+            signal.throwIfAborted();
+            if (this.disposed)
+                throw new Error('List disposed');
+            this.options.addition.reveal(path);
+            this.options.addition.highlight(path);
+            return { ...intent, status };
+        }
+        catch (error) {
+            return { ...intent, message: error instanceof Error ? error.message : 'Column unavailable', status: 'rejected' };
+        }
+    }
+}

package/selector-state.d.ts

@@ -0,0 +1,14 @@
+import type { SelectorState } from '@itrocks/property-select/property-select.js';
+import type { StateRecord } from '@itrocks/property-select/property-select.js';
+import type { StateStore } from '@itrocks/property-select/property-select.js';
+/** The key is supplied by the host router; this transport does not derive it from location. */
+export declare class HttpStateStore implements StateStore {
+    private readonly endpoint;
+    private readonly fetcher;
+    private generation?;
+    constructor(endpoint?: string, fetcher?: typeof fetch);
+    read(key: string, signal?: AbortSignal): Promise<StateRecord>;
+    remove(key: string, revision: number): Promise<StateRecord>;
+    write(key: string, state: SelectorState, revision: number): Promise<StateRecord>;
+    private request;
+}

package/selector-state.js

@@ -0,0 +1,38 @@
+import { StateConflictError } from '@itrocks/property-select/property-select.js';
+/** The key is supplied by the host router; this transport does not derive it from location. */
+export class HttpStateStore {
+    endpoint;
+    fetcher;
+    generation;
+    constructor(endpoint = '/property-select/state/json', fetcher = globalThis.fetch.bind(globalThis)) {
+        this.endpoint = endpoint;
+        this.fetcher = fetcher;
+    }
+    read(key, signal) {
+        return this.request('GET', key, undefined, undefined, signal);
+    }
+    remove(key, revision) {
+        return this.request('DELETE', key, undefined, revision);
+    }
+    write(key, state, revision) {
+        return this.request('PUT', key, state, revision);
+    }
+    async request(method, key, state, revision, signal) {
+        const response = await this.fetcher(`${this.endpoint}?${new URLSearchParams({ key })}`, {
+            body: method === 'GET' ? undefined : JSON.stringify({ revision, state }), cache: 'no-store',
+            credentials: 'same-origin', method, signal,
+            headers: { 'Content-Type': 'application/json', 'X-Property-Select-Session': this.generation ?? '' }
+        });
+        if (response.status === 410)
+            throw new Error('The selector session has ended. Reload the page.');
+        if (response.status === 409)
+            throw new StateConflictError();
+        if (!response.ok)
+            throw new Error(`Unable to save selector state (${response.status}). Try again.`);
+        const generation = response.headers.get('X-Property-Select-Session') ?? undefined;
+        if (this.generation && generation !== this.generation)
+            throw new Error('The selector session has ended. Reload the page.');
+        this.generation = generation;
+        return response.json();
+    }
+}