@substrat-run/elements 0.0.0-stage → 0.1.0

package/dist/entity-table.d.ts

@@ -0,0 +1,187 @@
+/**
+ * `<sub-entity-table>` — the rows of one paged read: its views, its sort, its filters and
+ * search, a selection, and the actions a row allows.
+ *
+ * A renderer over `EntityTableModel`: it draws the state and forwards clicks, and decides
+ * nothing the model does not. Styled only through Web Awesome's `--wa-*` tokens, so it
+ * follows whatever theme the page sets — Web Awesome's own, or a Substrat one — with no
+ * theme code in here. Uses Web Awesome's free controls inside.
+ *
+ * Properties (not attributes — they are objects and functions):
+ *   `source`  — `{ read, follow, search? }`: `read(query)` is the generated client's read
+ *               given the query's `sort`, `order`, filters and view
+ *   `columns` — `Column[]`; `sort` makes a header a sort button, `kind` draws the value
+ *               (`badge`, `money`, `relative`, …), and `render` / `mount` replace it
+ *   `actions` — `RowAction[]`, run through the model (403 / 409 / 404 handled there);
+ *               `views` scopes one to some views, `bulk` offers it for a selection
+ *   `views`   — `{ id, label }[]`, drawn as a switch above the rows; the first is the default
+ *   `filters` — `{ key, label, options }[]`, equality filters on declared filterable columns
+ *   `query`   — the first read's query, for a screen restoring one from its URL
+ *   `layout`  — `{ order, hidden }` by column key: which columns show, in what order
+ * Attributes: `label` (the table's accessible name), `empty`, `forbidden-text`,
+ *   `search-label`, `selectable`, `density="compact"`, `paging` (`pages`, the default —
+ *   Previous / Next with "21–40 of 132" — or `more`, one "Load more" that appends), and
+ *   `page-size` (25). `pageSizes` is the property behind the rows-per-page picker.
+ *   `column-picker` adds a "Columns" button: show, hide and reorder the columns. Opt-in;
+ *   without it the columns are exactly the ones given. `layout-key` keeps the chosen layout
+ *   in this browser under that key; a screen that would rather keep it on the account
+ *   listens for `sub-layout-change` and hands it back through `layout`.
+ * Slot: `empty` — what an empty view says, in place of `empty` (a "Create" button, say).
+ * Events: `sub-action-done` `{ action, rows }` after an action succeeded on some rows;
+ *   `sub-query-change` `{ query }` whenever the person changes the view, sort, filters or search;
+ *   `sub-layout-change` `{ layout }` whenever they show, hide or move a column.
+ *
+ * ## Cells a vertical draws itself
+ *
+ * `render(row)` returns a Lit template or a string, drawn in the table's shadow root. A
+ * framework that is not Lit uses `mount(cell, row)` instead: `cell` is an element in the
+ * LIGHT DOM, slotted into its place, so React or Vue can render into it and the page's own
+ * stylesheet applies to whatever it draws. `mount` may return `{ update(row), unmount() }`;
+ * without `update`, a changed row is unmounted and mounted again.
+ *
+ * ## Styling, outside in
+ *
+ * The theme's `--wa-*` tokens; then `--sub-table-*` (row height, header and selected
+ * backgrounds, cell padding, `--sub-table-max-height` — set it and the header sticks);
+ * then `::part()` — `frame`, `toolbar`, `bulk-bar`, `table`, `header-cell`, `row`
+ * (plus `selected`), `cell`, `footer`, `empty`.
+ */
+import '@awesome.me/webawesome/dist/components/badge/badge.js';
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/callout/callout.js';
+import '@awesome.me/webawesome/dist/components/checkbox/checkbox.js';
+import '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
+import '@awesome.me/webawesome/dist/components/input/input.js';
+import '@awesome.me/webawesome/dist/components/option/option.js';
+import '@awesome.me/webawesome/dist/components/popover/popover.js';
+import '@awesome.me/webawesome/dist/components/radio/radio.js';
+import '@awesome.me/webawesome/dist/components/radio-group/radio-group.js';
+import '@awesome.me/webawesome/dist/components/select/select.js';
+import '@awesome.me/webawesome/dist/components/skeleton/skeleton.js';
+import '@awesome.me/webawesome/dist/components/spinner/spinner.js';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import SubstratElement from './internal/substrat-element.js';
+import { type ColumnSpec, type RowAction, type TableLayout, type TableQuery, type TableSource, type TableState } from './entity-table-model.js';
+/** What `mount` may hand back, so the table can keep a framework's cell up to date. */
+export interface CellHandle<T> {
+    update?(row: T): void;
+    unmount?(): void;
+}
+export interface Column<T, S extends string = string> extends ColumnSpec<T, S> {
+    /** Draw the cell yourself, in the table's shadow root. */
+    render?(row: T): TemplateResult | string;
+    /** Draw the cell yourself, into a light-DOM element — for React, Vue, or plain DOM. */
+    mount?(cell: HTMLElement, row: T): CellHandle<T> | void;
+}
+export interface TableView {
+    id: string;
+    label: string;
+}
+export interface TableFilter {
+    /** A declared filterable column — the read's own input field. */
+    key: string;
+    label: string;
+    options: readonly {
+        value: string;
+        label: string;
+    }[];
+}
+export declare class SubEntityTable<T = unknown, S extends string = string> extends SubstratElement {
+    #private;
+    static properties: {
+        source: {
+            attribute: boolean;
+        };
+        columns: {
+            attribute: boolean;
+        };
+        actions: {
+            attribute: boolean;
+        };
+        views: {
+            attribute: boolean;
+        };
+        filters: {
+            attribute: boolean;
+        };
+        query: {
+            attribute: boolean;
+        };
+        layout: {
+            attribute: boolean;
+        };
+        columnPicker: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        layoutKey: {
+            attribute: string;
+        };
+        label: {};
+        empty: {};
+        forbiddenText: {
+            attribute: string;
+        };
+        searchLabel: {
+            attribute: string;
+        };
+        selectable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        density: {
+            reflect: boolean;
+        };
+        paging: {
+            reflect: boolean;
+        };
+        pageSize: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        pageSizes: {
+            attribute: boolean;
+        };
+        view: {
+            state: boolean;
+        };
+    };
+    source: TableSource<T, S> | undefined;
+    columns: Column<T, S>[];
+    actions: RowAction<T>[];
+    views: TableView[];
+    filters: TableFilter[];
+    query: Partial<TableQuery<S>> | undefined;
+    layout: TableLayout | undefined;
+    columnPicker: boolean;
+    layoutKey: string | undefined;
+    label: string;
+    empty: string;
+    forbiddenText: string;
+    searchLabel: string;
+    selectable: boolean;
+    density: 'comfortable' | 'compact';
+    paging: 'pages' | 'more';
+    pageSize: number;
+    pageSizes: number[];
+    view: TableState<T, S> | undefined;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Read again with the current query — after the host created a row, say. */
+    reload(): Promise<void>;
+    /** The query the rows on screen answer, for a screen that keeps it in its URL. */
+    get currentQuery(): TableQuery<S> | undefined;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    static css: import("lit").CSSResult;
+    render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sub-entity-table': SubEntityTable;
+    }
+}
+//# sourceMappingURL=entity-table.d.ts.map

package/dist/entity-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-table.d.ts","sourceRoot":"","sources":["../src/entity-table.ts"],"names":[],"mappings":"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"}