@guiexpert/demo-table-models 1.1.104 → 1.1.106
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +6 -6
- package/index.d.ts +2 -0
- package/index.js +617 -473
- package/lib/createCoverGridModel.d.ts +59 -0
- package/model/book.if.d.ts +11 -0
- package/package.json +2 -2
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { AreaIdent, AreaModelIf, CellRendererIf, CoverGridTableModel, RendererCleanupFnType, TableOptionsIf } from '@guiexpert/table';
|
|
2
|
+
import { BookIf } from '../model/book.if.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* A fixed book collection for cover grid demos: `count` books with title, author, genre, year, pages and a cover hue.
|
|
6
|
+
* The same count gives the same books (no randomness) – titles repeat with a volume number after 288 books.
|
|
7
|
+
*
|
|
8
|
+
* @param count - number of books (default 10,000)
|
|
9
|
+
*/
|
|
10
|
+
export declare function generateBooks(count?: number): BookIf[];
|
|
11
|
+
/** Sort orders of the cover grid demo – for `tableApi.sort(compareFn)`. */
|
|
12
|
+
export declare const BOOK_SORTS: Record<"title" | "author" | "year" | "id", (a: BookIf, b: BookIf) => number>;
|
|
13
|
+
/** What {@link BookCoverRenderer} asks the page. */
|
|
14
|
+
export interface BookCoverContextIf {
|
|
15
|
+
/** The selected book gets a frame. */
|
|
16
|
+
isSelected?(book: BookIf): boolean;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Draws one book as a tile of the cover grid: a generated cover (gradient, genre, title, author) and a caption.
|
|
20
|
+
* Plain DOM, no framework. The book data is set as text (`textContent`), never as HTML.
|
|
21
|
+
* The tile fills the cell, so it follows `bodyModel.coverWidth` / `coverHeight`.
|
|
22
|
+
*/
|
|
23
|
+
export declare class BookCoverRenderer implements CellRendererIf {
|
|
24
|
+
private readonly ctx;
|
|
25
|
+
constructor(ctx?: BookCoverContextIf);
|
|
26
|
+
render(cellDiv: HTMLDivElement, _rowIndex: number, _columnIndex: number, _areaIdent: AreaIdent, areaModel: AreaModelIf, cellValue: unknown): RendererCleanupFnType | undefined;
|
|
27
|
+
}
|
|
28
|
+
/** Result of {@link createCoverGridModelAndOptions}. */
|
|
29
|
+
export interface CoverGridModelAndOptionsIf {
|
|
30
|
+
tableModel: CoverGridTableModel<BookIf>;
|
|
31
|
+
tableOptions: TableOptionsIf;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Cover grid demo: books as tiles in a grid that fills the width of the table. The number of columns follows the
|
|
35
|
+
* width (`floor(width / coverWidth)`); only the visible rows are in the DOM.
|
|
36
|
+
*
|
|
37
|
+
* - filter: `filter` becomes `externalFilterFunction` – call `tableApi.externalFilterChanged()` after a change
|
|
38
|
+
* - sort: `tableApi.sort(BOOK_SORTS.title)`
|
|
39
|
+
* - size: `tableModel.bodyModel.coverWidth/coverHeight = …` + `tableApi.repaintHard()`
|
|
40
|
+
*
|
|
41
|
+
* @param books - the items (default: {@link generateBooks})
|
|
42
|
+
* @param coverWidth - width of a tile in px (default 160)
|
|
43
|
+
* @param coverHeight - height of a tile in px (default 260)
|
|
44
|
+
* @param ctx - `filter` (which books are shown) and `isSelected` (frame)
|
|
45
|
+
*/
|
|
46
|
+
export declare function createCoverGridModelAndOptions(books?: BookIf[], coverWidth?: number, coverHeight?: number, ctx?: BookCoverContextIf & {
|
|
47
|
+
filter?: (book: BookIf) => boolean;
|
|
48
|
+
}): CoverGridModelAndOptionsIf;
|
|
49
|
+
/**
|
|
50
|
+
* Stretches the tiles so that the columns fill the width of the grid (no gap on the right). The number of columns
|
|
51
|
+
* stays `floor(width / baseWidth)`, the height grows with the width (same aspect ratio). Call it after the width of
|
|
52
|
+
* the table changed (e.g. `tableApi.recalcColumnWidths()` from your own `ResizeObserver`), then `tableApi.repaintHard()`.
|
|
53
|
+
*
|
|
54
|
+
* @param tableModel - the cover grid model (its `bodyModel.width` is the width the table set)
|
|
55
|
+
* @param baseWidth - the wanted (minimal) tile width
|
|
56
|
+
* @param baseHeight - the tile height at `baseWidth`
|
|
57
|
+
* @returns `true` if the tile size changed
|
|
58
|
+
*/
|
|
59
|
+
export declare function fitCoversToWidth(tableModel: CoverGridTableModel<unknown>, baseWidth: number, baseHeight: number): boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/** A book of the cover grid demo (`createCoverGridModelAndOptions`). */
|
|
2
|
+
export interface BookIf {
|
|
3
|
+
id: number;
|
|
4
|
+
title: string;
|
|
5
|
+
author: string;
|
|
6
|
+
genre: string;
|
|
7
|
+
year: number;
|
|
8
|
+
pages: number;
|
|
9
|
+
/** Base hue (0…359) of the generated cover. */
|
|
10
|
+
hue: number;
|
|
11
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@guiexpert/demo-table-models",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.106",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Dr. Marc Kronberg <info@gui.expert> (https://gui.expert)",
|
|
6
6
|
"repository": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"tslib": "^2.3.0",
|
|
34
|
-
"@guiexpert/table": "^1.1.
|
|
34
|
+
"@guiexpert/table": "^1.1.106"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/node": "^20.11.17",
|