vira 25.12.1 → 25.12.2

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

@@ -26,8 +26,18 @@ export type ViraTableColumns = ReadonlyArray<Readonly<{
  * @category Internal
  */
 export type ViraTableRow<Columns extends ViraTableColumns | undefined = undefined> = {
-    value: ViraTableCell<Columns>;
-};
+    cells: ViraTableCell<Columns>;
+} & PartialWithUndefined<{
+    /**
+     * If `true`, no actions will be fired from this row (like row clicks). No disable styles are
+     * applied.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /** Optional: keep track of which row is which by attaching an id to it. */
+    id: PropertyKey;
+}>;
 /**
  * Table information input for `ViraTable`.
  *

package/dist/elements/table/vira-table.element.d.ts

@@ -1,6 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type AttributeValues, type CSSResult } from 'element-vir';
-import { type ViraTableSetup } from './define-table.js';
+import { type ViraTableRow, type ViraTableSetup } from './define-table.js';
 /**
  * Element tagnames that have passthroughs setup for them in {@link ViraTable}.
  *
@@ -21,6 +21,12 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
      */
     table: ViraTableSetup;
 } & PartialWithUndefined<{
+    /**
+     * Block all rows from being clickable.
+     *
+     * @default false
+     */
+    preventRowClicks: boolean;
     /**
      * Block the sticky table header.
      *
@@ -43,4 +49,9 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
     attributePassthrough: Readonly<PartialWithUndefined<Record<ViraTableElementsForPassthrough, AttributeValues>>>;
     /** Styles that will be applied directly to the inner elements. */
     stylePassthrough: Readonly<PartialWithUndefined<Record<ViraTableElementsForPassthrough, CSSResult>>>;
-}>>, {}, {}, "vira-table-", "vira-table-", readonly []>;
+}>>, {}, {
+    rowClick: import("element-vir").DefineEvent<{
+        row: ViraTableRow;
+        originalEvent: MouseEvent;
+    }>;
+}, "vira-table-", "vira-table-row-hover" | "vira-table-row-active" | "vira-table-background", readonly []>;

package/dist/elements/table/vira-table.element.js

@@ -1,4 +1,4 @@
-import { attributes, css, html, ifDefined, nothing, } from 'element-vir';
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
 import { defineViraElement } from '../define-vira-element.js';
 /**
  * A flexible table element with automatic header pinning. Use {@link createTable} to create a
@@ -8,16 +8,26 @@ import { defineViraElement } from '../define-vira-element.js';
  */
 export const ViraTable = defineViraElement()({
     tagName: 'vira-table',
-    styles: css `
+    cssVars: {
+        'vira-table-row-hover': '#cfe9ff',
+        'vira-table-row-active': '#cfe9ff',
+        'vira-table-background': 'white',
+    },
+    styles: ({ cssVars }) => css `
         :host {
-            background-color: white;
+            background: ${cssVars['vira-table-background'].value};
             display: block;
             position: relative;
         }
 
         table,
         thead {
-            background-color: inherit;
+            background: inherit;
+        }
+
+        th,
+        td {
+            padding: 0;
         }
 
         table {
@@ -26,10 +36,24 @@ export const ViraTable = defineViraElement()({
 
         thead {
             z-index: 10;
-            /* Note that important thead styles are also directly attached to the element. */
+            /* Other important thead styles are directly attached to the HTML element. */
+        }
+
+        .clickable {
+            cursor: pointer;
+
+            &:hover {
+                background-color: ${cssVars['vira-table-row-hover'].value};
+            }
+            &:active {
+                background-color: ${cssVars['vira-table-row-active'].value};
+            }
         }
     `,
-    render({ inputs }) {
+    events: {
+        rowClick: defineElementEvent(),
+    },
+    render({ inputs, events, dispatch }) {
         const rows = inputs.table.rows.map((row) => {
             const cells = inputs.table.columns.map((column) => {
                 if (column.hide) {
@@ -42,16 +66,25 @@ export const ViraTable = defineViraElement()({
                     : nothing}
                         style=${ifDefined(inputs.stylePassthrough?.td)}
                     >
-                        ${row.value[column.key]}
+                        ${row.cells[column.key]}
                     </td>
                 `;
             });
+            const isClickable = !inputs.preventRowClicks && !row.disabled;
             return html `
                 <tr
+                    class=${classMap({
+                clickable: isClickable,
+            })}
                     ${inputs.attributePassthrough?.tr
                 ? attributes(inputs.attributePassthrough.tr)
                 : nothing}
                     style=${ifDefined(inputs.stylePassthrough?.tr)}
+                    ${listen('click', (event) => {
+                if (isClickable) {
+                    dispatch(new events.rowClick({ originalEvent: event, row }));
+                }
+            })}
                 >
                     ${cells}
                 </tr>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.12.1",
+    "version": "25.12.2",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -67,7 +67,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.12.1"
+        "element-vir": "^25.12.2"
     },
     "engines": {
         "node": ">=22"