@c2n/table 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @c2n/table
+
+`c2-table` is a virtualized data grid: one CSS grid whose header and body rows are `subgrid` items, so columns stay aligned with no scroll syncing and pinned columns are sticky cells rather than separate containers. Columns are declared as `c2-table-column` children — definitions that render nothing themselves.
+
+```html
+<c2-table row-key="id" sortable stripe selection="multiple" checkbox-selection style="height: 320px" rows='[{ "id": "1", "name": "Ada", "score": 128000 }]'>
+  <c2-table-column field="name" header="Name" width="2fr" pinned="start"></c2-table-column>
+  <c2-table-column field="score" header="Score" width="120px" align="end" format="number"></c2-table-column>
+</c2-table>
+```
+
+- Rows come from `rows` (an array in the property, JSON in the attribute) or from an async `dataSource` that is asked for one block at a time as rows scroll into view.
+- Columns: `field` (dotted paths allowed), `header`, `width` (any grid track), `min-width`, `align`, `sortable`, `resizable`, `pinned="start|end"`, `hidden`, `format` (`number`, `percent`, `currency`, `date`, `datetime`, `time`) with `format-options` / `currency` / `locale`, `cell-class`, and the `renderCell` / `renderHeader` / `comparator` properties.
+- Table: `selection="single|multiple"`, `checkbox-selection`, `value` (selected row keys), `sort` (`field:asc;other:desc`), `multi-sort`, `sortable`, `resizable`, `stripe`, `virtual="auto|always|never"`, `row-height`, `overscan`, `virtual-threshold`, `block-size`, `page`, `page-size`, `loading`, `error`, `empty-message`.
+- **Paging**: slot a `c2-pagination` into `footer` and the table pages, driving the pager's `page` / `page-size` / `total-items` through the `@c2n/core` pager context. `page-size` turns it on, or the table adopts the pager's. `rows` are sliced in place; a `dataSource` is asked for one page per request. `@c2n/pagination` is not a dependency — install it yourself.
+- Events: `selection-change`, `sort-change`, `row-click`, `cell-click`, `column-resize`, `page-change`. Slots: `toolbar`, `footer`, `empty`, `loading`, `error`.
+- Keyboard: arrows walk cells, Home/End and ⌘/ctrl+Home/End jump, PageUp/PageDown page, Enter sorts the focused column, Space selects the focused row.
+- Theming: `--c2-table--*` (surface), `--c2-table__header--*` / `__header-cell--*`, `--c2-table__row--*` (plus `__hover`, `__selected`, `__odd`), `--c2-table__cell--*`, `--c2-table__sort-icon--*`, `--c2-table__resizer--*`. See the docs site for the full list.
+
+Virtualization needs a uniform row height: it measures the first rendered row, so theme the height with `--c2-table__row--height` (`row-height` is only the estimate used for the first paint), and give the host a height or `--c2-table--max-height`.

package/dist/table-column-Dsv4HKrd.js

@@ -0,0 +1,92 @@
+import { LitElement, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { jsonPropertyConverter } from "@c2n/core/lit-helper.js";
+//#region src/table-column.scss?inline
+var table_column_default = ":host {\n  display: none;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/table-column.ts
+/** Fired at the parent table whenever a column definition changes. */
+var COLUMN_CHANGE_EVENT = "c2-table-column-change";
+var TableColumn = class TableColumn extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.field = "";
+		this.width = "1fr";
+		this.minWidth = 64;
+		this.align = "start";
+		this.hidden = false;
+		this.format = "text";
+		this.cellSlot = false;
+	}
+	static {
+		this.styles = unsafeCSS(table_column_default);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#notify();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#notify();
+	}
+	updated(_changed) {
+		this.#notify();
+	}
+	#notify() {
+		this.dispatchEvent(new CustomEvent(COLUMN_CHANGE_EVENT, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: String })], TableColumn.prototype, "field", void 0);
+__decorate([property({ type: String })], TableColumn.prototype, "header", void 0);
+__decorate([property({ type: String })], TableColumn.prototype, "width", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-width"
+})], TableColumn.prototype, "minWidth", void 0);
+__decorate([property({ type: String })], TableColumn.prototype, "align", void 0);
+__decorate([property({
+	type: Boolean,
+	converter: { fromAttribute: (value) => value !== null }
+})], TableColumn.prototype, "sortable", void 0);
+__decorate([property({
+	type: Boolean,
+	converter: { fromAttribute: (value) => value !== null }
+})], TableColumn.prototype, "resizable", void 0);
+__decorate([property({ type: String })], TableColumn.prototype, "pinned", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TableColumn.prototype, "hidden", void 0);
+__decorate([property({ type: String })], TableColumn.prototype, "format", void 0);
+__decorate([property({
+	converter: jsonPropertyConverter,
+	attribute: "format-options"
+})], TableColumn.prototype, "formatOptions", void 0);
+__decorate([property({ type: String })], TableColumn.prototype, "currency", void 0);
+__decorate([property({ type: String })], TableColumn.prototype, "locale", void 0);
+__decorate([property({
+	type: String,
+	attribute: "cell-class"
+})], TableColumn.prototype, "cellClass", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "cell-slot"
+})], TableColumn.prototype, "cellSlot", void 0);
+__decorate([property({ attribute: false })], TableColumn.prototype, "renderCell", void 0);
+__decorate([property({ attribute: false })], TableColumn.prototype, "renderHeader", void 0);
+__decorate([property({ attribute: false })], TableColumn.prototype, "comparator", void 0);
+TableColumn = __decorate([customElement("c2-table-column")], TableColumn);
+//#endregion
+export { TableColumn as n, __decorate as r, COLUMN_CHANGE_EVENT as t };

package/dist/table-column.js

@@ -0,0 +1,2 @@
+import { n as TableColumn, t as COLUMN_CHANGE_EVENT } from "./table-column-Dsv4HKrd.js";
+export { COLUMN_CHANGE_EVENT, TableColumn };

package/dist/table-types.js

@@ -0,0 +1,18 @@
+import { getFieldValue } from "@c2n/core/data-helper.js";
+//#region src/table-types.ts
+/** `name:asc;age:desc` ⇄ `SortModel[]`, so the sort can be set from markup. */
+var sortModelConverter = {
+	toAttribute: (value) => Array.isArray(value) && value.length ? value.map((item) => `${item.field}:${item.direction}`).join(";") : null,
+	fromAttribute: (value) => {
+		if (!value) return [];
+		return value.split(";").map((entry) => entry.trim()).filter(Boolean).map((entry) => {
+			const [field, direction] = entry.split(":");
+			return {
+				field: field.trim(),
+				direction: direction?.trim() === "desc" ? "desc" : "asc"
+			};
+		});
+	}
+};
+//#endregion
+export { getFieldValue, sortModelConverter };