vira 25.11.0 → 25.12.1

package/dist/elements/index.d.ts

@@ -6,6 +6,8 @@ export * from './pop-up/vira-menu-trigger.element.js';
 export * from './pop-up/vira-menu.element.js';
 export * from './pop-up/vira-pop-up-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
+export * from './table/define-table.js';
+export * from './table/vira-table.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
 export * from './vira-collapsible-wrapper.element.js';

package/dist/elements/index.js

@@ -6,6 +6,8 @@ export * from './pop-up/vira-menu-trigger.element.js';
 export * from './pop-up/vira-menu.element.js';
 export * from './pop-up/vira-pop-up-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
+export * from './table/define-table.js';
+export * from './table/vira-table.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
 export * from './vira-collapsible-wrapper.element.js';

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

@@ -0,0 +1,48 @@
+import { type ArrayElement, type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
+/**
+ * An individual cell for {@link ViraTableSetup}.
+ *
+ * @category Internal
+ */
+export type ViraTableCell<Columns extends ViraTableColumns | undefined = undefined> = undefined extends Columns ? Record<PropertyKey, HtmlInterpolation> : Record<ArrayElement<Exclude<Columns, undefined>>['key'], HtmlInterpolation>;
+/**
+ * A column definition for {@link ViraTableSetup}.
+ *
+ * @category Internal
+ */
+export type ViraTableColumns = ReadonlyArray<Readonly<{
+    /** The key that cells must use to set a value for this column. */
+    key: PropertyKey;
+    /** This will be displayed in the header for this column. */
+    label: HtmlInterpolation;
+} & PartialWithUndefined<{
+    /** If set to `true`, this column will not be rendered. */
+    hide: boolean;
+}>>>;
+/**
+ * An individual row in {@link ViraTableSetup}.
+ *
+ * @category Internal
+ */
+export type ViraTableRow<Columns extends ViraTableColumns | undefined = undefined> = {
+    value: ViraTableCell<Columns>;
+};
+/**
+ * Table information input for `ViraTable`.
+ *
+ * @category Internal
+ */
+export type ViraTableSetup = Readonly<{
+    /** The order of these columns determines the order that they render in. */
+    columns: ViraTableColumns;
+    rows: ReadonlyArray<Readonly<ViraTableRow>>;
+}>;
+/**
+ * Create a type-safe {@link ViraTableSetup} object to be used with the `ViraTable` element.
+ *
+ * @category Internal
+ */
+export declare function createTable<const Columns extends ViraTableColumns>(
+/** The order of these columns determines the order that they render in. */
+columns: Readonly<Columns>, rows: ReadonlyArray<Readonly<ViraTableRow<Columns>>>): ViraTableSetup;

package/dist/elements/table/define-table.js

@@ -0,0 +1,13 @@
+/**
+ * Create a type-safe {@link ViraTableSetup} object to be used with the `ViraTable` element.
+ *
+ * @category Internal
+ */
+export function createTable(
+/** The order of these columns determines the order that they render in. */
+columns, rows) {
+    return {
+        columns,
+        rows,
+    };
+}

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

@@ -0,0 +1,46 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type CSSResult } from 'element-vir';
+import { type ViraTableSetup } from './define-table.js';
+/**
+ * Element tagnames that have passthroughs setup for them in {@link ViraTable}.
+ *
+ * @category Internal
+ */
+export type ViraTableElementsForPassthrough = 'table' | 'tr' | 'th' | 'td' | 'tbody' | 'thead';
+/**
+ * A flexible table element with automatic header pinning. Use {@link createTable} to create a
+ * type-safe table input.
+ *
+ * @category Elements
+ */
+export declare const ViraTable: import("element-vir").DeclarativeElementDefinition<"vira-table", Readonly<{
+    /**
+     * The table information.
+     *
+     * Use {@link createTable} to form a type-safe value for this.
+     */
+    table: ViraTableSetup;
+} & PartialWithUndefined<{
+    /**
+     * Block the sticky table header.
+     *
+     * @default false
+     */
+    preventStickyHeader: boolean;
+    /**
+     * Hide header row entirely.
+     *
+     * @default false
+     */
+    hideHeaderRow: boolean;
+    /**
+     * Pixel value of the header row sticky offset.
+     *
+     * @default 0
+     */
+    stickyOffset: number;
+    /** Attributes that will be applied directly to the inner elements. */
+    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 []>;

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

@@ -0,0 +1,124 @@
+import { attributes, css, html, ifDefined, 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
+ * type-safe table input.
+ *
+ * @category Elements
+ */
+export const ViraTable = defineViraElement()({
+    tagName: 'vira-table',
+    styles: css `
+        :host {
+            background-color: white;
+            display: block;
+            position: relative;
+        }
+
+        table,
+        thead {
+            background-color: inherit;
+        }
+
+        table {
+            border-collapse: collapse;
+        }
+
+        thead {
+            z-index: 10;
+            /* Note that important thead styles are also directly attached to the element. */
+        }
+    `,
+    render({ inputs }) {
+        const rows = inputs.table.rows.map((row) => {
+            const cells = inputs.table.columns.map((column) => {
+                if (column.hide) {
+                    return nothing;
+                }
+                return html `
+                    <td
+                        ${inputs.attributePassthrough?.td
+                    ? attributes(inputs.attributePassthrough.td)
+                    : nothing}
+                        style=${ifDefined(inputs.stylePassthrough?.td)}
+                    >
+                        ${row.value[column.key]}
+                    </td>
+                `;
+            });
+            return html `
+                <tr
+                    ${inputs.attributePassthrough?.tr
+                ? attributes(inputs.attributePassthrough.tr)
+                : nothing}
+                    style=${ifDefined(inputs.stylePassthrough?.tr)}
+                >
+                    ${cells}
+                </tr>
+            `;
+        });
+        const headerCells = inputs.hideHeaderRow
+            ? undefined
+            : inputs.table.columns.map((column) => {
+                if (column.hide) {
+                    return nothing;
+                }
+                return html `
+                      <th
+                          ${inputs.attributePassthrough?.th
+                    ? attributes(inputs.attributePassthrough.th)
+                    : nothing}
+                          style=${ifDefined(inputs.stylePassthrough?.th)}
+                      >
+                          ${column.label}
+                      </th>
+                  `;
+            });
+        const headerRow = headerCells
+            ? html `
+                  <tr
+                      ${inputs.attributePassthrough?.tr
+                ? attributes(inputs.attributePassthrough.tr)
+                : nothing}
+                      style=${ifDefined(inputs.stylePassthrough?.tr)}
+                  >
+                      ${headerCells}
+                  </tr>
+              `
+            : nothing;
+        const theadStyles = css `
+            ${inputs.stylePassthrough?.thead || css ``}
+            top: ${inputs.stickyOffset || 0}px;
+            ${inputs.preventStickyHeader || inputs.hideHeaderRow
+            ? css ``
+            : css `
+                      position: sticky;
+                  `}
+        `;
+        return html `
+            <table
+                ${inputs.attributePassthrough?.table
+            ? attributes(inputs.attributePassthrough.table)
+            : nothing}
+                style=${ifDefined(inputs.stylePassthrough?.table)}
+            >
+                <thead
+                    ${inputs.attributePassthrough?.thead
+            ? attributes(inputs.attributePassthrough.thead)
+            : nothing}
+                    style=${theadStyles}
+                >
+                    ${headerRow}
+                </thead>
+                <tbody
+                    ${inputs.attributePassthrough?.tbody
+            ? attributes(inputs.attributePassthrough.tbody)
+            : nothing}
+                    style=${ifDefined(inputs.stylePassthrough?.tbody)}
+                >
+                    ${rows}
+                </tbody>
+            </table>
+        `;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.11.0",
+    "version": "25.12.1",
     "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.11.0"
+        "element-vir": "^25.12.1"
     },
     "engines": {
         "node": ">=22"