vira 26.1.0 → 26.2.0

package/dist/util/define-table.d.ts

@@ -24,20 +24,49 @@ export type ViraTableHeaders = ReadonlyArray<ViraTableKey>;
  *
  * @category Internal
  */
-export type ViraTableEntry<Keys extends ViraTableHeaders | undefined = undefined> = undefined extends Keys ? Record<string | number, HtmlInterpolation> : Record<ArrayElement<Exclude<Keys, undefined>>['key'], HtmlInterpolation>;
+export type ViraTableEntry<Headers extends ViraTableHeaders | undefined = undefined> = Record<HeaderKey<Headers>, HtmlInterpolation>;
+/**
+ * An individual cell in {@link ViraTableRow}.
+ *
+ * @category Internal
+ */
+export type ViraTableCell<Headers extends ViraTableHeaders | undefined = undefined, Entry extends ViraTableEntry<Headers> | undefined = ViraTableEntry<Headers>> = {
+    content: HtmlInterpolation;
+    key: HeaderKey<Headers>;
+    /**
+     * The original entry that created this row (in default or vertical table orientation) or column
+     * (in horizontal table orientation). This is `undefined` in header cells.
+     */
+    entry: Entry;
+};
+/**
+ * An individual row in {@link ViraTable}.
+ *
+ * @category Internal
+ */
+export type ViraTableRow<Headers extends ViraTableHeaders | undefined = undefined, CellEntry extends ViraTableEntry<Headers> | undefined = ViraTableEntry<Headers> | undefined, RowEntry extends ViraTableEntry<Headers> | undefined = CellEntry> = {
+    cells: ViraTableCell<Headers, CellEntry>[];
+    entry: RowEntry;
+};
+/**
+ * All keys for the given headers.
+ *
+ * @category Internal
+ */
+export type HeaderKey<Headers extends ViraTableHeaders | undefined = undefined> = undefined extends Headers ? string | number : ArrayElement<Exclude<Headers, undefined>>['key'];
 /**
  * Table information that can easily be mapped into a `<table>` element.
  *
  * @category Internal
  */
-export type ViraTable<Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical> = (Orientation extends ViraTableOrientation.Horizontal ? {
+export type ViraTable<Headers extends ViraTableHeaders | undefined = undefined, Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical, Entry extends ViraTableEntry<Headers> = ViraTableEntry<Headers>> = Orientation extends ViraTableOrientation.Horizontal ? {
     headerRow: undefined;
     orientation: Orientation;
+    rows: ViraTableRow<Headers, Entry | undefined, undefined>[];
 } : {
-    headerRow: HtmlInterpolation[];
+    headerRow: ViraTableCell<Headers, undefined>[];
     orientation: Orientation;
-}) & {
-    rows: HtmlInterpolation[][];
+    rows: ViraTableRow<Headers, Entry>[];
 };
 /**
  * Orientation options for {@link ViraTable}.
@@ -46,12 +75,14 @@ export type ViraTable<Orientation extends ViraTableOrientation = ViraTableOrient
  */
 export declare enum ViraTableOrientation {
     /**
-     * This is the default table layout. Each entry becomes a new row. Headers are a row at the top
-     * of the table.
+     * This corresponds to a _vertical_ entry sequence (as you move from entry to entry, you move
+     * across the table vertically). This is the default table layout. Each entry becomes a new row.
+     * Headers are in a separate row.
      */
     Vertical = "vertical",
     /**
-     * This is a pivoted table layout. Each entry becomes a column. Headers are the left most
+     * This corresponds to a _horizontal_ entry sequence (as you move from entry to entry, you move
+     * across the table horizontally). Each entry becomes a column. Headers are the left most
      * column.
      */
     Horizontal = "horizontal"
@@ -72,6 +103,6 @@ export type ViraTableOptions<Orientation extends ViraTableOrientation = ViraTabl
  *
  * @category Table
  */
-export declare function defineTable<const Headers extends ViraTableHeaders, const Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical>(
+export declare function defineTable<const Headers extends ViraTableHeaders, Entry extends ViraTableEntry<Headers>, const Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical>(
 /** The order of these keys determines the order that they render in. */
-headers: Readonly<Headers>, entries: ReadonlyArray<Readonly<ViraTableEntry<Headers>>>, options?: ViraTableOptions<Orientation>): ViraTable<Orientation>;
+headers: Readonly<Headers>, entries: Entry[], options?: ViraTableOptions<Orientation>): ViraTable<Headers, Orientation>;

package/dist/util/define-table.js

@@ -6,12 +6,14 @@
 export var ViraTableOrientation;
 (function (ViraTableOrientation) {
     /**
-     * This is the default table layout. Each entry becomes a new row. Headers are a row at the top
-     * of the table.
+     * This corresponds to a _vertical_ entry sequence (as you move from entry to entry, you move
+     * across the table vertically). This is the default table layout. Each entry becomes a new row.
+     * Headers are in a separate row.
      */
     ViraTableOrientation["Vertical"] = "vertical";
     /**
-     * This is a pivoted table layout. Each entry becomes a column. Headers are the left most
+     * This corresponds to a _horizontal_ entry sequence (as you move from entry to entry, you move
+     * across the table horizontally). Each entry becomes a column. Headers are the left most
      * column.
      */
     ViraTableOrientation["Horizontal"] = "horizontal";
@@ -30,14 +32,28 @@ headers, entries, options = {}) {
         const rows = headers.map((header) => {
             const headerCellArray = options.hideHeaders
                 ? []
-                : [header.content ?? header.key];
+                : [
+                    {
+                        content: header.content ?? header.key,
+                        key: header.key,
+                        entry: undefined,
+                    },
+                ];
             const cells = entries.map((entry) => {
-                return entry[header.key];
+                return {
+                    content: entry[header.key],
+                    key: header.key,
+                    entry,
+                };
             });
-            return [
+            const allCells = [
                 ...headerCellArray,
                 ...cells,
             ];
+            return {
+                cells: allCells,
+                entry: undefined,
+            };
         });
         return {
             headerRow: undefined,
@@ -48,11 +64,24 @@ headers, entries, options = {}) {
     else {
         const headerRow = options.hideHeaders
             ? []
-            : headers.map((header) => header.content ?? header.key);
-        const rows = entries.map((entry) => {
-            return headers.map((header) => {
-                return entry[header.key];
+            : headers.map((header) => {
+                return {
+                    content: header.content ?? header.key,
+                    key: header.key,
+                    entry: undefined,
+                };
             });
+        const rows = entries.map((entry) => {
+            return {
+                cells: headers.map((header) => {
+                    return {
+                        content: entry[header.key],
+                        key: header.key,
+                        entry,
+                    };
+                }),
+                entry,
+            };
         });
         return {
             headerRow,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "26.1.0",
+    "version": "26.2.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -47,7 +47,7 @@
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.0.5",
         "page-active": "^1.0.1",
-        "spa-router-vir": "^6.0.0",
+        "spa-router-vir": "^6.1.1",
         "type-fest": "^4.41.0",
         "typed-event-target": "^4.1.0"
     },
@@ -56,7 +56,7 @@
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
-        "@web/test-runner-playwright": "^0.11.0",
+        "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
         "esbuild": "^0.25.5",
         "istanbul-smart-text-reporter": "^1.1.5",
@@ -67,7 +67,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^26.1.0"
+        "element-vir": "^26.2.0"
     },
     "engines": {
         "node": ">=22"