vira 26.0.2 → 26.1.1

package/dist/elements/index.d.ts

@@ -6,8 +6,6 @@ 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/create-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,8 +6,6 @@ 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/create-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/util/define-table.d.ts

@@ -0,0 +1,92 @@
+import { type ArrayElement, type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
+/**
+ * An individual key definition in {@link ViraTableHeaders}.
+ *
+ * @category Internal
+ */
+export type ViraTableKey = Readonly<{
+    /** The key that cells must set a value to. */
+    key: string | number;
+} & PartialWithUndefined<{
+    /** If this is not provided, `key` will be used directly. */
+    content: HtmlInterpolation;
+}>>;
+/**
+ * All header definitions for a {@link ViraTable} instance.
+ *
+ * @category Internal
+ */
+export type ViraTableHeaders = ReadonlyArray<ViraTableKey>;
+/**
+ * An individual entry in {@link ViraTable}. In default table orientation, this will be a row. In
+ * horizontal orientation, this will be a column.
+ *
+ * @category Internal
+ */
+export type ViraTableEntry<Headers extends ViraTableHeaders | undefined = undefined> = Record<HeaderKey<Headers>, HtmlInterpolation>;
+/**
+ * An individual cell in {@link ViraTable}.
+ *
+ * @category Internal
+ */
+export type ViraTableCell<Headers extends ViraTableHeaders | undefined = undefined> = {
+    content: HtmlInterpolation;
+    key: HeaderKey<Headers>;
+};
+/**
+ * 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<Headers extends ViraTableHeaders | undefined = undefined, Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical> = (Orientation extends ViraTableOrientation.Horizontal ? {
+    headerRow: undefined;
+    orientation: Orientation;
+} : {
+    headerRow: ViraTableCell<Headers>[];
+    orientation: Orientation;
+}) & {
+    rows: ViraTableCell<Headers>[][];
+};
+/**
+ * Orientation options for {@link ViraTable}.
+ *
+ * @category Internal
+ */
+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.
+     */
+    Vertical = "vertical",
+    /**
+     * This is a pivoted table layout. Each entry becomes a column. Headers are the left most
+     * column.
+     */
+    Horizontal = "horizontal"
+}
+/**
+ * Options for {@link defineTable}.
+ *
+ * @category Internal
+ */
+export type ViraTableOptions<Orientation extends ViraTableOrientation = ViraTableOrientation> = PartialWithUndefined<{
+    orientation: Orientation;
+    hideHeaders: boolean;
+}>;
+/**
+ * Accepts headers and entries and lays them out into rows according to the given
+ * `options.orientation` (defaulting to vertical). This does not itself create a `<table>` element,
+ * but makes it easy to loop over rows to (with `.map()`) to generate rows in a table.
+ *
+ * @category Table
+ */
+export declare function defineTable<const Headers extends ViraTableHeaders, 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<Headers, Orientation>;

package/dist/util/define-table.js

@@ -0,0 +1,79 @@
+/**
+ * Orientation options for {@link ViraTable}.
+ *
+ * @category Internal
+ */
+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.
+     */
+    ViraTableOrientation["Vertical"] = "vertical";
+    /**
+     * This is a pivoted table layout. Each entry becomes a column. Headers are the left most
+     * column.
+     */
+    ViraTableOrientation["Horizontal"] = "horizontal";
+})(ViraTableOrientation || (ViraTableOrientation = {}));
+/**
+ * Accepts headers and entries and lays them out into rows according to the given
+ * `options.orientation` (defaulting to vertical). This does not itself create a `<table>` element,
+ * but makes it easy to loop over rows to (with `.map()`) to generate rows in a table.
+ *
+ * @category Table
+ */
+export function defineTable(
+/** The order of these keys determines the order that they render in. */
+headers, entries, options = {}) {
+    if (options.orientation === ViraTableOrientation.Horizontal) {
+        const rows = headers.map((header) => {
+            const headerCellArray = options.hideHeaders
+                ? []
+                : [
+                    {
+                        content: header.content ?? header.key,
+                        key: header.key,
+                    },
+                ];
+            const cells = entries.map((entry) => {
+                return {
+                    content: entry[header.key],
+                    key: header.key,
+                };
+            });
+            return [
+                ...headerCellArray,
+                ...cells,
+            ];
+        });
+        return {
+            headerRow: undefined,
+            rows,
+            orientation: ViraTableOrientation.Horizontal,
+        };
+    }
+    else {
+        const headerRow = options.hideHeaders
+            ? []
+            : headers.map((header) => {
+                return {
+                    content: header.content ?? header.key,
+                    key: header.key,
+                };
+            });
+        const rows = entries.map((entry) => {
+            return headers.map((header) => {
+                return {
+                    content: entry[header.key],
+                    key: header.key,
+                };
+            });
+        });
+        return {
+            headerRow,
+            rows,
+            orientation: ViraTableOrientation.Vertical,
+        };
+    }
+}

package/dist/util/index.d.ts

@@ -1 +1,2 @@
+export * from './define-table.js';
 export * from './pop-up-manager.js';

package/dist/util/index.js

@@ -1 +1,2 @@
+export * from './define-table.js';
 export * from './pop-up-manager.js';

package/package.json

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

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

@@ -1,74 +0,0 @@
-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 ViraTableCells<Keys extends ViraTableKeys | undefined = undefined> = undefined extends Keys ? Record<PropertyKey, HtmlInterpolation> : Record<ArrayElement<Exclude<Keys, undefined>>['key'], HtmlInterpolation>;
-/**
- * An individual key definition in {@link ViraTableKeys}. In default table orientation, this will
- * define each column's key. In horizontal orientation, this will define each row's key.
- *
- * @category Internal
- */
-export type ViraTableKey = Readonly<{
-    /** The key that cells must set a value to. */
-    key: PropertyKey;
-} & PartialWithUndefined<{
-    /**
-     * This will be displayed in the header for this key. If no `label` is provided, the `key`
-     * will be used.
-     */
-    label: HtmlInterpolation;
-    /** If set to `true`, all cells for this key will not be rendered. */
-    hide: boolean;
-    /** In horizontal table orientation, this prevents this key's row from being clicked. */
-    disabled: boolean;
-    /** If true, will be rendered as headers. */
-    isHeader: boolean;
-}>>;
-/**
- * All key definitions for a {@link ViraTableSetup} instance. In default table orientation, these
- * will define each column. In horizontal orientation, this will define each row header.
- *
- * @category Internal
- */
-export type ViraTableKeys = ReadonlyArray<ViraTableKey>;
-/**
- * An individual entry in {@link ViraTableSetup}. In default table orientation, this will be a row.
- * In horizontal orientation, this will be a column.
- *
- * @category Internal
- */
-export type ViraTableEntry<Keys extends ViraTableKeys | undefined = undefined> = {
-    cells: ViraTableCells<Keys>;
-} & PartialWithUndefined<{
-    /**
-     * If `true`, no actions will be fired from this entry (like clicks). No disable styles are
-     * applied.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Optional: keep track of which entry is which by attaching an id to it. */
-    id: PropertyKey;
-}>;
-/**
- * Table information input for `ViraTable`.
- *
- * @category Internal
- */
-export type ViraTableSetup = Readonly<{
-    /** The order of these keys determines the order that they render in. */
-    keys: ViraTableKeys;
-    entries: ReadonlyArray<Readonly<ViraTableEntry>>;
-}>;
-/**
- * Create a type-safe {@link ViraTableSetup} object to be used with the `ViraTable` element.
- *
- * @category Internal
- */
-export declare function createTable<const Keys extends ViraTableKeys>(
-/** The order of these keys determines the order that they render in. */
-keys: Readonly<Keys>, entries: ReadonlyArray<Readonly<ViraTableEntry<Keys>>>): ViraTableSetup;

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

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

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

@@ -1,64 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { type AttributeValues, type CSSResult } from 'element-vir';
-import { type ViraTableEntry, type ViraTableSetup } from './create-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<{
-    /**
-     * Key headers are rendered on the left, rows become columns.
-     *
-     * @default false
-     */
-    horizontalOrientation: boolean;
-    /**
-     * Allow all rows to be clickable. Each row can override this for itself.
-     *
-     * @default false
-     */
-    allowRowClicks: boolean;
-    /**
-     * Block the sticky table header.
-     *
-     * @default false
-     */
-    preventStickyHeader: boolean;
-    /**
-     * Hide header row (in default orientation) or column (in horizontal orientation)
-     * entirely.
-     *
-     * @default false
-     */
-    hideKeyHeaders: boolean;
-    /**
-     * Pixel value of the header's 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>>>;
-}>>, {}, {
-    rowClick: import("element-vir").DefineEvent<{
-        entry: ViraTableEntry;
-        originalEvent: MouseEvent;
-    }>;
-}, "vira-table-", "vira-table-", readonly []>;

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

@@ -1,220 +0,0 @@
-import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
-import { viraFormCssVars } from '../../styles/form-themes.js';
-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: ${viraFormCssVars['vira-form-background-color'].value};
-            display: block;
-            position: relative;
-        }
-
-        table,
-        thead {
-            background: inherit;
-        }
-
-        th,
-        td {
-            padding: 0;
-        }
-
-        table {
-            border-collapse: collapse;
-        }
-
-        thead {
-            z-index: 10;
-            /* Other important thead styles are directly attached to the HTML element. */
-        }
-
-        .clickable {
-            cursor: pointer;
-
-            &:hover {
-                color: ${viraFormCssVars['vira-form-selection-hover-foreground-color'].value};
-                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
-            }
-            &:active {
-                color: ${viraFormCssVars['vira-form-selection-active-foreground-color'].value};
-                background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
-        .value};
-            }
-        }
-    `,
-    events: {
-        rowClick: defineElementEvent(),
-    },
-    render({ inputs, events, dispatch }) {
-        const rowTemplates = inputs.horizontalOrientation
-            ? inputs.table.keys.map((key) => {
-                if (key.hide) {
-                    return nothing;
-                }
-                const cells = inputs.table.entries.map((entry) => {
-                    const cellElement = key.isHeader ? 'th' : 'td';
-                    return html `
-                          <${cellElement}
-                              ${listen('click', (event) => {
-                        if (isClickable) {
-                            dispatch(new events.rowClick({ originalEvent: event, entry: entry }));
-                        }
-                    })}
-                              ${key.isHeader
-                        ? inputs.attributePassthrough?.th
-                            ? attributes(inputs.attributePassthrough.th)
-                            : nothing
-                        : inputs.attributePassthrough?.td
-                            ? attributes(inputs.attributePassthrough.td)
-                            : nothing}
-                              style=${key.isHeader
-                        ? ifDefined(inputs.stylePassthrough?.th)
-                        : ifDefined(inputs.stylePassthrough?.td)}
-                          >
-                              ${entry.cells[key.key]}
-                          </${cellElement}>
-                      `;
-                });
-                const isClickable = !!inputs.allowRowClicks && !key.disabled;
-                return html `
-                      <tr
-                          class=${classMap({
-                    clickable: isClickable,
-                })}
-                          ${inputs.attributePassthrough?.tr
-                    ? attributes(inputs.attributePassthrough.tr)
-                    : nothing}
-                          style=${ifDefined(inputs.stylePassthrough?.tr)}
-                      >
-                          <th
-                              ${inputs.attributePassthrough?.th
-                    ? attributes(inputs.attributePassthrough.th)
-                    : nothing}
-                              style=${ifDefined(inputs.stylePassthrough?.th)}
-                          >
-                              ${key.label}
-                          </th>
-                          ${cells}
-                      </tr>
-                  `;
-            })
-            : inputs.table.entries.map((entry) => {
-                const cells = inputs.table.keys.map((key) => {
-                    if (key.hide) {
-                        return nothing;
-                    }
-                    const cellElement = key.isHeader ? 'th' : 'td';
-                    return html `
-                          <${cellElement}
-                              ${key.isHeader
-                        ? inputs.attributePassthrough?.th
-                            ? attributes(inputs.attributePassthrough.th)
-                            : nothing
-                        : inputs.attributePassthrough?.td
-                            ? attributes(inputs.attributePassthrough.td)
-                            : nothing}
-                              style=${key.isHeader
-                        ? ifDefined(inputs.stylePassthrough?.th)
-                        : ifDefined(inputs.stylePassthrough?.td)}
-                          >
-                              ${entry.cells[key.key]}
-                          </${cellElement}>
-                      `;
-                });
-                const isClickable = !!inputs.allowRowClicks && !entry.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, entry: entry }));
-                    }
-                })}
-                      >
-                          ${cells}
-                      </tr>
-                  `;
-            });
-        const headerCells = inputs.hideKeyHeaders || inputs.horizontalOrientation
-            ? undefined
-            : inputs.table.keys.map((key) => {
-                if (key.hide) {
-                    return nothing;
-                }
-                return html `
-                          <th
-                              ${inputs.attributePassthrough?.th
-                    ? attributes(inputs.attributePassthrough.th)
-                    : nothing}
-                              style=${ifDefined(inputs.stylePassthrough?.th)}
-                          >
-                              ${key.label}
-                          </th>
-                      `;
-            });
-        const headerRow = headerCells
-            ? html `
-                  <tr
-                      ${inputs.attributePassthrough?.tr
-                ? attributes(inputs.attributePassthrough.tr)
-                : nothing}
-                      style=${ifDefined(inputs.stylePassthrough?.tr)}
-                  >
-                      ${headerCells}
-                  </tr>
-              `
-            : undefined;
-        const theadStyles = css `
-            ${inputs.stylePassthrough?.thead || css ``}
-            top: ${inputs.stickyOffset || 0}px;
-            ${inputs.preventStickyHeader || inputs.hideKeyHeaders
-            ? css ``
-            : css `
-                      position: sticky;
-                  `}
-        `;
-        return html `
-            <table
-                ${inputs.attributePassthrough?.table
-            ? attributes(inputs.attributePassthrough.table)
-            : nothing}
-                style=${ifDefined(inputs.stylePassthrough?.table)}
-            >
-                ${headerRow
-            ? html `
-                          <thead
-                              ${inputs.attributePassthrough?.thead
-                ? attributes(inputs.attributePassthrough.thead)
-                : nothing}
-                              style=${theadStyles}
-                          >
-                              ${headerRow}
-                          </thead>
-                      `
-            : nothing}
-                <tbody
-                    ${inputs.attributePassthrough?.tbody
-            ? attributes(inputs.attributePassthrough.tbody)
-            : nothing}
-                    style=${ifDefined(inputs.stylePassthrough?.tbody)}
-                >
-                    ${rowTemplates}
-                </tbody>
-            </table>
-        `;
-    },
-});