tosijs-ui 1.16.11 → 1.16.12

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 1.16.12
+
+Two additions for task-focused screens: a table row can open to show a detail element, and a
+schema form can show a hand-picked set of fields. Both are off until you ask for them.
+
+- **`<tosi-table>` rows can expand to a detail element** (#220). Set
+  `rowDetail = (row) => element` and each row can open to show that element underneath it,
+  across the full width of the table. A column with `expander: true` renders the toggle;
+  `toggleRowDetail(row, open?)` does it from code, and `rowexpand` / `rowcollapse` report it.
+  The detail stays in view while the columns scroll sideways, is built once per expansion and
+  kept while the row is scrolled out of view, and the toggled row keeps its place on screen.
+  Expansion follows the row through sorting and filtering; with `rowId` it also survives a
+  reload of the data, and `expandedRowIds` can be read and set. `rowHasDetail` hides the
+  toggle on rows with nothing to show. Pinned rows are not expandable. A table placed in a
+  detail keeps its own selection, editing and column resizing.
+- **The scrollbar of a table with `rowDetail` is approximate.** Rows are no longer all one
+  height, so the table places them by interpolation (tosijs's variable-height list). A table
+  that does not set `rowDetail` is unchanged.
+- **`<tosi-schema-form>` takes a `fields` map for curated forms** (#221). It maps paths into
+  the schema to `{ caption, help, readOnly, editor }`, in display order, and the form shows
+  only those. Controls, choices, `required` and constraints still come from the schema.
+  `editor` is any function returning an element with a `value` and a `change` event, such as
+  an element creator from this library, or a field plugin object. The editor's `value` must be
+  of the schema's type, so a native `<input>` suits string properties only.
+- **A curated form still owns the whole value.** Properties that are not shown keep their
+  values, the whole value is validated, and an error in a property that is not shown is
+  listed above the fields. A path the schema does not describe renders as a placeholder that
+  says so.
+- **Fixed: an error on a plugin-rendered field was never shown** under that field. The form
+  now shows it there, a missing required value included, as it does for built-in controls.
+- **Fixed: `readOnly` on a schema form did not reach a plugin control that is a custom
+  element, or a `<textarea>`.** Both are now locked with the rest of the form, through
+  `disabled` or, for a component that has only that, `readOnly`. Of these, the form
+  releases only what it locked: one a plugin disabled itself stays disabled.
+
+`dist/iife.js` grows by about 2.5 kB gzip.
+
 ## 1.16.11
 
 In-page links work, teaching examples show their test result, and "Download ePub" stops

package/dist/data-table.d.ts

@@ -38,9 +38,17 @@ export interface ColumnOptions {
      * table has no business reaching into it.
      */
     editable?: boolean;
+    /**
+     * Render this column as the row's disclosure toggle for `rowDetail`. The cell holds one
+     * button; `prop` is unused (give it any unique string) and the header is left blank
+     * unless you set `name`.
+     */
+    expander?: boolean;
     headerCell?: (options: ColumnOptions) => HTMLElement;
     dataCell?: (options: ColumnOptions) => HTMLElement;
 }
+/** Builds the element shown under an expanded row. `null` means the row has no detail. */
+export type RowDetailFn = (row: any) => HTMLElement | null;
 export interface TableData {
     columns?: ColumnOptions[] | null;
     array: any[];
@@ -164,6 +172,46 @@ export declare class TosiTable extends TosiTable_base {
         ':host .row-edge-top': {
             boxShadow: string;
         };
+        ':host .scroll-area.has-row-detail': {
+            containerType: string;
+        };
+        ':host .tr.row-expanded': {
+            height: string;
+        };
+        ':host .tr-detail': {
+            gridColumn: string;
+            position: string;
+            left: string;
+            width: string;
+            boxSizing: string;
+            padding: string;
+            background: string;
+            boxShadow: string;
+        };
+        ':host .td.expander-cell': {
+            justifyContent: string;
+            padding: number;
+        };
+        ':host .row-expander': {
+            color: string;
+            background: string;
+            boxShadow: string;
+            padding: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            width: string;
+            height: string;
+        };
+        ':host .row-expander[hidden]': {
+            display: string;
+        };
+        ':host .row-expander > *': {
+            transition: string;
+        };
+        ':host .row-expander[aria-expanded="true"] > *': {
+            transform: string;
+        };
         ':host .th .menu-trigger': {
             color: string;
             background: string;
@@ -195,6 +243,63 @@ export declare class TosiTable extends TosiTable_base {
     get schema(): JSONSchema | null;
     set schema(schema: JSONSchema | null);
     selectionChanged: SelectCallback;
+    private _rowDetail;
+    private _rowId;
+    /** Keys of the expanded rows: `rowId(row)` when there is a `rowId`, else the row itself. */
+    private _expanded;
+    /** One detail container per expanded row, kept so its state survives scrolling. */
+    private _detailEls;
+    /** The row each detail was built from: a detail is only as current as its row. */
+    private _detailRows;
+    private _detailCount;
+    /**
+     * Builds the element shown under an expanded row, from that row's data. Return `null`
+     * for a row with no detail. Called once per expansion: the element is kept while the row
+     * stays expanded (scrolling it out of view and back does not rebuild it) and dropped when
+     * the row collapses or the table's `array` is replaced.
+     */
+    get rowDetail(): RowDetailFn | null;
+    set rowDetail(fn: RowDetailFn | null);
+    /**
+     * Which rows have a detail, for the `expander` column: a row this returns `false` for
+     * gets no toggle. Unset, every row gets one.
+     */
+    rowHasDetail: ((row: any) => boolean) | null;
+    /**
+     * A stable id for a row. Without it expansion follows the row OBJECT, which is enough
+     * for sorting and filtering; with it expansion also survives replacing `array` with new
+     * objects, and `expandedRowIds` can be read and set.
+     */
+    get rowId(): ((row: any) => string) | null;
+    set rowId(fn: ((row: any) => string) | null);
+    private _pendingExpandedIds;
+    private _warnedPendingIds;
+    /**
+     * Ids of the expanded rows. Needs `rowId`; without one this reads empty. Assigning it
+     * fires no `rowexpand` / `rowcollapse`: those report a toggle, not a restore.
+     */
+    get expandedRowIds(): string[];
+    set expandedRowIds(ids: string[] | null);
+    private forgetDetails;
+    private detailKey;
+    isRowExpanded(row: any): boolean;
+    /**
+     * Expand or collapse a row's detail (`open` omitted toggles). Fires `rowexpand` or
+     * `rowcollapse` with `detail: { row, element }`. The toggled row keeps its place on
+     * screen.
+     */
+    toggleRowDetail(row: any, open?: boolean): void;
+    /** The detail container for a row, built on first use. `null` when the row has none. */
+    private detailFor;
+    private stampedRow;
+    /** A row's cells: its children, less the detail that an expanded row also holds. */
+    private rowCells;
+    private syncDetail;
+    private syncStampedDetails;
+    /** Have the virtual list re-measure its rows after one changed height. */
+    private remeasureRows;
+    /** Is this event target inside one of THIS table's row details? */
+    private inDetail;
     rowRendered: ((item: any, cells: HTMLElement[]) => void) | null;
     private selectedKey;
     private selectBinding;