argus-table 0.2.1 → 0.3.0
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/README.md +1 -1
- package/dist/argus-column.js +24 -1
- package/dist/argus-column.js.map +1 -1
- package/dist/argus-table.js +1026 -167
- package/dist/argus-table.js.map +1 -1
- package/dist/cdn/argus-table.js +74 -50
- package/dist/cdn/argus-table.js.map +1 -1
- package/dist/controllers/auto-width.js +11 -0
- package/dist/controllers/auto-width.js.map +1 -1
- package/dist/controllers/column-window.js +139 -0
- package/dist/controllers/column-window.js.map +1 -0
- package/dist/controllers/data-controller.js +9 -4
- package/dist/controllers/data-controller.js.map +1 -1
- package/dist/controllers/plugins.js +102 -0
- package/dist/controllers/plugins.js.map +1 -0
- package/dist/controllers/reorder-drag.js +9 -10
- package/dist/controllers/reorder-drag.js.map +1 -1
- package/dist/controllers/row-measure.js +121 -0
- package/dist/controllers/row-measure.js.map +1 -0
- package/dist/controllers/virtual-controller.js +316 -10
- package/dist/controllers/virtual-controller.js.map +1 -1
- package/dist/core/src/columns/column-order.js +14 -10
- package/dist/core/src/columns/column-order.js.map +1 -1
- package/dist/core/src/columns/resolve-columns.js +18 -4
- package/dist/core/src/columns/resolve-columns.js.map +1 -1
- package/dist/core/src/data/page-cache.js +4 -0
- package/dist/core/src/data/page-cache.js.map +1 -1
- package/dist/core/src/filters/filter.js +185 -0
- package/dist/core/src/filters/filter.js.map +1 -0
- package/dist/core/src/state/selection.js +70 -0
- package/dist/core/src/state/selection.js.map +1 -0
- package/dist/core/src/table/create-table.js +239 -64
- package/dist/core/src/table/create-table.js.map +1 -1
- package/dist/core/src/table/filtered-row-model.js +48 -0
- package/dist/core/src/table/filtered-row-model.js.map +1 -0
- package/dist/core/src/table/sorted-row-model.js +13 -2
- package/dist/core/src/table/sorted-row-model.js.map +1 -1
- package/dist/core/src/virtual/column-window.js +72 -0
- package/dist/core/src/virtual/column-window.js.map +1 -0
- package/dist/core/src/virtual/row-pool.js +2 -1
- package/dist/core/src/virtual/row-pool.js.map +1 -1
- package/dist/core/src/virtual/row-sizes.js +156 -0
- package/dist/core/src/virtual/row-sizes.js.map +1 -0
- package/dist/core/src/virtual/scroll-scale.js +41 -3
- package/dist/core/src/virtual/scroll-scale.js.map +1 -1
- package/dist/custom-elements.json +1320 -74
- package/dist/events.js +9 -1
- package/dist/events.js.map +1 -1
- package/dist/index.d.ts +609 -74
- package/dist/index.js +3 -2
- package/dist/interactive.js +22 -0
- package/dist/interactive.js.map +1 -0
- package/dist/max-height.js +22 -8
- package/dist/max-height.js.map +1 -1
- package/dist/render/body.js +47 -7
- package/dist/render/body.js.map +1 -1
- package/dist/render/cells.js +14 -11
- package/dist/render/cells.js.map +1 -1
- package/dist/render/content-directive.js +115 -0
- package/dist/render/content-directive.js.map +1 -0
- package/dist/render/content.js +20 -9
- package/dist/render/content.js.map +1 -1
- package/dist/render/header.js +24 -5
- package/dist/render/header.js.map +1 -1
- package/dist/render/pinned-rows.js +1 -1
- package/dist/render/pinned-rows.js.map +1 -1
- package/dist/styles/base.js +1 -1
- package/dist/styles/base.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ npm i argus-table @argus-table/themes
|
|
|
51
51
|
- **Label:** give it a name with `aria-label` or `aria-labelledby`.
|
|
52
52
|
- **Columns and data** are JavaScript properties, because they hold objects and functions.
|
|
53
53
|
- **Cells:** a column's `cell` function can return a string, a number, a DOM node or a Lit template.
|
|
54
|
-
- **Theme:** `default.css` is neutral and uses the page's font. `material.css`
|
|
54
|
+
- **Theme:** `default.css` is neutral and uses the page's font. `material.css` (load Roboto yourself), `fluent.css` and `bootstrap.css` are Material-, Fluent- and Bootstrap-inspired alternatives, and `minimal.css` (load Instrument Sans yourself) is a quiet, airy one with an amber accent. All are optional, and the table is usable without any.
|
|
55
55
|
|
|
56
56
|
## Rows from a server
|
|
57
57
|
|
package/dist/argus-column.js
CHANGED
|
@@ -50,6 +50,14 @@ var ArgusColumn = class ArgusColumn extends ReactiveElement {
|
|
|
50
50
|
#parent;
|
|
51
51
|
#def;
|
|
52
52
|
#children;
|
|
53
|
+
/** `hidden` is the standard attribute: it updates the column like its own properties. */
|
|
54
|
+
static get observedAttributes() {
|
|
55
|
+
return [...super.observedAttributes, "hidden"];
|
|
56
|
+
}
|
|
57
|
+
attributeChangedCallback(name, old, value) {
|
|
58
|
+
super.attributeChangedCallback(name, old, value);
|
|
59
|
+
if (name === "hidden") this.requestUpdate();
|
|
60
|
+
}
|
|
53
61
|
/** Data only: no shadow root, nothing rendered. */
|
|
54
62
|
createRenderRoot() {
|
|
55
63
|
return this;
|
|
@@ -79,15 +87,23 @@ var ArgusColumn = class ArgusColumn extends ReactiveElement {
|
|
|
79
87
|
id: this.columnId,
|
|
80
88
|
header: this.header,
|
|
81
89
|
accessor: this.accessor,
|
|
90
|
+
formula: this.formula,
|
|
82
91
|
cell: this.cell ?? (template && (() => html`${templateContent(template)}`)),
|
|
83
92
|
width: this.width,
|
|
84
93
|
minWidth: this.minWidth,
|
|
85
94
|
maxWidth: this.maxWidth,
|
|
86
95
|
pin: this.pin,
|
|
96
|
+
hidden: this.hasAttribute("hidden"),
|
|
97
|
+
pinnable: this.pinnable,
|
|
98
|
+
hideable: this.hideable,
|
|
87
99
|
align: this.align,
|
|
100
|
+
wrap: this.wrap,
|
|
88
101
|
sortable: this.sortable,
|
|
89
102
|
resizable: this.resizable,
|
|
90
|
-
reorderable: this.reorderable
|
|
103
|
+
reorderable: this.reorderable,
|
|
104
|
+
filter: this.filter,
|
|
105
|
+
filterFn: this.filterFn,
|
|
106
|
+
filterOptions: this.filterOptions
|
|
91
107
|
};
|
|
92
108
|
}
|
|
93
109
|
willUpdate() {
|
|
@@ -100,6 +116,7 @@ var ArgusColumn = class ArgusColumn extends ReactiveElement {
|
|
|
100
116
|
__decorate([property({ attribute: "column-id" })], ArgusColumn.prototype, "columnId", void 0);
|
|
101
117
|
__decorate([property()], ArgusColumn.prototype, "header", void 0);
|
|
102
118
|
__decorate([property()], ArgusColumn.prototype, "accessor", void 0);
|
|
119
|
+
__decorate([property()], ArgusColumn.prototype, "formula", void 0);
|
|
103
120
|
__decorate([property({ attribute: false })], ArgusColumn.prototype, "cell", void 0);
|
|
104
121
|
__decorate([property({ converter: widthConverter })], ArgusColumn.prototype, "width", void 0);
|
|
105
122
|
__decorate([property({
|
|
@@ -111,10 +128,16 @@ __decorate([property({
|
|
|
111
128
|
type: Number
|
|
112
129
|
})], ArgusColumn.prototype, "maxWidth", void 0);
|
|
113
130
|
__decorate([property()], ArgusColumn.prototype, "pin", void 0);
|
|
131
|
+
__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "pinnable", void 0);
|
|
132
|
+
__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "hideable", void 0);
|
|
114
133
|
__decorate([property()], ArgusColumn.prototype, "align", void 0);
|
|
134
|
+
__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "wrap", void 0);
|
|
115
135
|
__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "sortable", void 0);
|
|
116
136
|
__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "resizable", void 0);
|
|
117
137
|
__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "reorderable", void 0);
|
|
138
|
+
__decorate([property()], ArgusColumn.prototype, "filter", void 0);
|
|
139
|
+
__decorate([property({ attribute: false })], ArgusColumn.prototype, "filterFn", void 0);
|
|
140
|
+
__decorate([property({ attribute: false })], ArgusColumn.prototype, "filterOptions", void 0);
|
|
118
141
|
ArgusColumn = __decorate([customElement("argus-column")], ArgusColumn);
|
|
119
142
|
export { ArgusColumn, unwatchColumns, watchColumns };
|
|
120
143
|
|
package/dist/argus-column.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"argus-column.js","names":["_decorate"],"sources":["../src/argus-column.ts"],"sourcesContent":["import { html, ReactiveElement, type ComplexAttributeConverter } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { templateContent } from 'lit/directives/template-content.js';\nimport type {\n CellContent,\n CellContext,\n ColumnAlign,\n ColumnDef,\n ColumnPin,\n ColumnWidth,\n} from './types.js';\n\n/**\n * Tables watching their `<argus-column>` children, by table element. Columns\n * call their parent's entry when they connect, disconnect or change, so the\n * table needs no MutationObserver on its own children (which would fire on\n * every light-DOM cell render while scrolling).\n */\nconst watchers = new WeakMap<Element, () => void>();\n\n/** Calls `onChange` whenever an `<argus-column>` child of `host` is added, removed, moved or changed. */\nexport function watchColumns(host: Element, onChange: () => void): void {\n watchers.set(host, onChange);\n}\n\nexport function unwatchColumns(host: Element): void {\n watchers.delete(host);\n}\n\nfunction notify(parent: Element | null): void {\n if (parent) watchers.get(parent)?.();\n}\n\n/** `width` attribute: `\"90\"` or `\"90px\"` → 90, `\"auto\"`, `\"2fr\"` → `{ flex: 2 }`. */\nconst widthConverter: ComplexAttributeConverter<ColumnWidth | undefined> = {\n fromAttribute(value) {\n if (value === null) return undefined;\n const text = value.trim().toLowerCase();\n if (text === 'auto') return 'auto';\n const match = /^(\\d*\\.?\\d+)(px|fr)?$/.exec(text);\n if (!match) return undefined;\n const n = Number(match[1]);\n return match[2] === 'fr' ? { flex: n } : n;\n },\n};\n\n/**\n * Boolean attribute with a default that may be `true`: absent → unset (the\n * default applies), `\"false\"` → `false`, anything else → `true`.\n */\nconst flagConverter: ComplexAttributeConverter<boolean | undefined> = {\n fromAttribute(value) {\n return value === null ? undefined : value.trim().toLowerCase() !== 'false';\n },\n};\n\n/**\n * One column of the parent `<argus-table>`, written as markup instead of an entry in\n * its `columns` property. It is data only and renders nothing.\n *\n * Only direct children of the table count, in document order. A non-empty `columns`\n * property wins over the children. Adding, removing, moving or changing a column\n * updates the table; sizes, order and sorting are kept by `column-id`.\n *\n * A `<template>` child is the content of every cell in the column (static: the same\n * for each row). Set the `cell` property for content that depends on the row.\n *\n * @summary Declarative column of an `<argus-table>`.\n */\n@customElement('argus-column')\nexport class ArgusColumn<T = unknown> extends ReactiveElement {\n /** Stable key, used in state objects, events and persistence. Must be unique within the table. */\n @property({ attribute: 'column-id' })\n columnId = '';\n\n /** Header content: text as an attribute; a Lit template, a node or a function as a property. */\n @property()\n header?: CellContent | (() => CellContent);\n\n /**\n * How to read the cell value: a property path such as `customer.name`, or (as a\n * property) a function of the row and its index.\n */\n @property()\n accessor?: string | ((row: T, index: number) => unknown);\n\n /** Cell content from the row: `(row, context) => content`. Property only; wins over a `<template>` child. */\n @property({ attribute: false })\n cell?: (row: T, context: CellContext<T>) => CellContent;\n\n /** Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px. */\n @property({ converter: widthConverter })\n width?: ColumnWidth;\n\n /** Lower bound for resizing and for flex columns, in px. Default: 40. */\n @property({ attribute: 'min-width', type: Number })\n minWidth?: number;\n\n /** Upper bound for resizing, in px. Default: no limit. */\n @property({ attribute: 'max-width', type: Number })\n maxWidth?: number;\n\n /** Pins the column to the `start` or `end` side. */\n @property()\n pin?: ColumnPin;\n\n /** Text alignment: `start`, `center` or `end`. Default: `start`. */\n @property()\n align?: ColumnAlign;\n\n /** Whether the header can be clicked to sort. Default: `false`. */\n @property({ converter: flagConverter })\n sortable?: boolean;\n\n /** Whether the column can be resized. Default: `true`; `resizable=\"false\"` turns it off. */\n @property({ converter: flagConverter })\n resizable?: boolean;\n\n /** Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off. */\n @property({ converter: flagConverter })\n reorderable?: boolean;\n\n #parent: Element | null = null;\n #def: ColumnDef<T> | undefined;\n readonly #children = new MutationObserver(() => {\n this.#def = undefined;\n this.requestUpdate();\n });\n\n /** Data only: no shadow root, nothing rendered. */\n protected override createRenderRoot(): HTMLElement {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.#children.observe(this, { childList: true });\n this.#parent = this.parentElement;\n notify(this.#parent);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#children.disconnect();\n const parent = this.#parent;\n this.#parent = null;\n notify(parent);\n }\n\n /**\n * The column as the table reads it. Unset fields stay `undefined`, which the\n * table reads as its defaults. An unknown `pin` is ignored and an unknown\n * `align` falls back to `start`.\n */\n toColumnDef(): ColumnDef<T> {\n if (this.#def) return this.#def;\n const template = [...this.children].find((c) => c instanceof HTMLTemplateElement);\n return (this.#def = {\n id: this.columnId,\n header: this.header,\n accessor: this.accessor,\n cell: this.cell ?? (template && (() => html`${templateContent(template)}`)),\n width: this.width,\n minWidth: this.minWidth,\n maxWidth: this.maxWidth,\n pin: this.pin,\n align: this.align,\n sortable: this.sortable,\n resizable: this.resizable,\n reorderable: this.reorderable,\n });\n }\n\n protected override willUpdate(): void {\n this.#def = undefined;\n }\n\n protected override updated(): void {\n notify(this.#parent);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'argus-column': ArgusColumn;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"argus-column.js","names":["_decorate"],"sources":["../src/argus-column.ts"],"sourcesContent":["import { html, ReactiveElement, type ComplexAttributeConverter } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { templateContent } from 'lit/directives/template-content.js';\nimport type {\n CellContent,\n CellContext,\n ColumnAlign,\n ColumnDef,\n ColumnPin,\n ColumnWidth,\n FilterKind,\n FilterValue,\n} from './types.js';\n\n/**\n * Tables watching their `<argus-column>` children, by table element. Columns\n * call their parent's entry when they connect, disconnect or change, so the\n * table needs no MutationObserver on its own children (which would fire on\n * every light-DOM cell render while scrolling).\n */\nconst watchers = new WeakMap<Element, () => void>();\n\n/** Calls `onChange` whenever an `<argus-column>` child of `host` is added, removed, moved or changed. */\nexport function watchColumns(host: Element, onChange: () => void): void {\n watchers.set(host, onChange);\n}\n\nexport function unwatchColumns(host: Element): void {\n watchers.delete(host);\n}\n\nfunction notify(parent: Element | null): void {\n if (parent) watchers.get(parent)?.();\n}\n\n/** `width` attribute: `\"90\"` or `\"90px\"` → 90, `\"auto\"`, `\"2fr\"` → `{ flex: 2 }`. */\nconst widthConverter: ComplexAttributeConverter<ColumnWidth | undefined> = {\n fromAttribute(value) {\n if (value === null) return undefined;\n const text = value.trim().toLowerCase();\n if (text === 'auto') return 'auto';\n const match = /^(\\d*\\.?\\d+)(px|fr)?$/.exec(text);\n if (!match) return undefined;\n const n = Number(match[1]);\n return match[2] === 'fr' ? { flex: n } : n;\n },\n};\n\n/**\n * Boolean attribute with a default that may be `true`: absent → unset (the\n * default applies), `\"false\"` → `false`, anything else → `true`.\n */\nconst flagConverter: ComplexAttributeConverter<boolean | undefined> = {\n fromAttribute(value) {\n return value === null ? undefined : value.trim().toLowerCase() !== 'false';\n },\n};\n\n/**\n * One column of the parent `<argus-table>`, written as markup instead of an entry in\n * its `columns` property. It is data only and renders nothing.\n *\n * Only direct children of the table count, in document order. A non-empty `columns`\n * property wins over the children. Adding, removing, moving or changing a column\n * updates the table; sizes, order and sorting are kept by `column-id`.\n *\n * A `<template>` child is the content of every cell in the column (static: the same\n * for each row). Set the `cell` property for content that depends on the row.\n *\n * The standard `hidden` attribute (or property) hides the column, like `hidden` in\n * `columns`; the table's `columnVisibility` overrides it.\n *\n * @summary Declarative column of an `<argus-table>`.\n */\n@customElement('argus-column')\nexport class ArgusColumn<T = unknown> extends ReactiveElement {\n /** Stable key, used in state objects, events and persistence. Must be unique within the table. */\n @property({ attribute: 'column-id' })\n columnId = '';\n\n /** Header content: text as an attribute; a Lit template, a node or a function as a property. */\n @property()\n header?: CellContent | (() => CellContent);\n\n /**\n * How to read the cell value: a property path such as `customer.name`, or (as a\n * property) a function of the row and its index.\n */\n @property()\n accessor?: string | ((row: T, index: number) => unknown);\n\n /**\n * A spreadsheet formula computed per row from other columns, such as\n * `[price] * [quantity]`. Needs the `formulas()` plugin from `@argus-table/formulas`.\n */\n @property()\n formula?: string;\n\n /** Cell content from the row: `(row, context) => content`. Property only; wins over a `<template>` child. */\n @property({ attribute: false })\n cell?: (row: T, context: CellContext<T>) => CellContent;\n\n /** Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px. */\n @property({ converter: widthConverter })\n width?: ColumnWidth;\n\n /** Lower bound for resizing and for flex columns, in px. Default: 40. */\n @property({ attribute: 'min-width', type: Number })\n minWidth?: number;\n\n /** Upper bound for resizing, in px. Default: no limit. */\n @property({ attribute: 'max-width', type: Number })\n maxWidth?: number;\n\n /** Pins the column to the `start` or `end` side. The table's `columnPinning` overrides it. */\n @property()\n pin?: ColumnPin;\n\n /** Whether the user can pin or unpin the column. Default: `true`; `pinnable=\"false\"` turns it off. */\n @property({ converter: flagConverter })\n pinnable?: boolean;\n\n /** Whether the user can hide the column. Default: `true`; `hideable=\"false\"` turns it off. */\n @property({ converter: flagConverter })\n hideable?: boolean;\n\n /** Text alignment: `start`, `center` or `end`. Default: `start`. */\n @property()\n align?: ColumnAlign;\n\n /**\n * Wraps the cell text onto more lines instead of cutting it off. Default:\n * `false`. With a fixed row height, text that doesn't fit is clipped.\n */\n @property({ converter: flagConverter })\n wrap?: boolean;\n\n /** Whether the header can be clicked to sort. Default: `false`. */\n @property({ converter: flagConverter })\n sortable?: boolean;\n\n /** Whether the column can be resized. Default: `true`; `resizable=\"false\"` turns it off. */\n @property({ converter: flagConverter })\n resizable?: boolean;\n\n /** Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off. */\n @property({ converter: flagConverter })\n reorderable?: boolean;\n\n /**\n * The kind of filter users can set, e.g. from the column menu: `text`, `number`,\n * `date` or `set`. Unset: users can't filter the column.\n */\n @property()\n filter?: FilterKind;\n\n /** Replaces the built-in matching for this column's filter. Property only. */\n @property({ attribute: false })\n filterFn?: ColumnDef<T>['filterFn'];\n\n /** The values a `set` filter offers; needed with a `dataSource`. Property only. */\n @property({ attribute: false })\n filterOptions?: readonly FilterValue[];\n\n #parent: Element | null = null;\n #def: ColumnDef<T> | undefined;\n readonly #children = new MutationObserver(() => {\n this.#def = undefined;\n this.requestUpdate();\n });\n\n /** `hidden` is the standard attribute: it updates the column like its own properties. */\n static override get observedAttributes(): string[] {\n return [...super.observedAttributes, 'hidden'];\n }\n\n override attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n super.attributeChangedCallback(name, old, value);\n if (name === 'hidden') this.requestUpdate();\n }\n\n /** Data only: no shadow root, nothing rendered. */\n protected override createRenderRoot(): HTMLElement {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.#children.observe(this, { childList: true });\n this.#parent = this.parentElement;\n notify(this.#parent);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#children.disconnect();\n const parent = this.#parent;\n this.#parent = null;\n notify(parent);\n }\n\n /**\n * The column as the table reads it. Unset fields stay `undefined`, which the\n * table reads as its defaults. An unknown `pin` is ignored and an unknown\n * `align` falls back to `start`.\n */\n toColumnDef(): ColumnDef<T> {\n if (this.#def) return this.#def;\n const template = [...this.children].find((c) => c instanceof HTMLTemplateElement);\n return (this.#def = {\n id: this.columnId,\n header: this.header,\n accessor: this.accessor,\n formula: this.formula,\n cell: this.cell ?? (template && (() => html`${templateContent(template)}`)),\n width: this.width,\n minWidth: this.minWidth,\n maxWidth: this.maxWidth,\n pin: this.pin,\n hidden: this.hasAttribute('hidden'),\n pinnable: this.pinnable,\n hideable: this.hideable,\n align: this.align,\n wrap: this.wrap,\n sortable: this.sortable,\n resizable: this.resizable,\n reorderable: this.reorderable,\n filter: this.filter,\n filterFn: this.filterFn,\n filterOptions: this.filterOptions,\n });\n }\n\n protected override willUpdate(): void {\n this.#def = undefined;\n }\n\n protected override updated(): void {\n notify(this.#parent);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'argus-column': ArgusColumn;\n }\n}\n"],"mappings":"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"}
|