vira 25.10.0 → 25.12.0

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

@@ -16,9 +16,3 @@ export type ViraTagName = `${typeof ViraTagNamePrefix}${string}`;
  * @category Internal
  */
 export declare const defineViraElement: <Inputs extends {}>(...errorParams: import("element-vir").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vira-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-/**
- * Define a vira element with custom requirements (like the `vira-` element tag prefix).
- *
- * @category Internal
- */
-export declare const defineViraElementNoInputs: <const TagName extends `vira-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

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

@@ -5,7 +5,7 @@ import { wrapDefineElement } from 'element-vir';
  * @category Internal
  */
 export const ViraTagNamePrefix = `vira-`;
-const { defineElement, defineElementNoInputs } = wrapDefineElement({
+const { defineElement } = wrapDefineElement({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith(ViraTagNamePrefix)) {
             throw new Error(`Tag name should start with '${ViraTagNamePrefix}' but got '${inputs.tagName}'`);
@@ -18,9 +18,3 @@ const { defineElement, defineElementNoInputs } = wrapDefineElement({
  * @category Internal
  */
 export const defineViraElement = defineElement;
-/**
- * Define a vira element with custom requirements (like the `vira-` element tag prefix).
- *
- * @category Internal
- */
-export const defineViraElementNoInputs = defineElementNoInputs;

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/pop-up/vira-menu-item.element.js

@@ -1,4 +1,4 @@
-import { css, html, renderIf } from 'element-vir';
+import { classMap, css, html, renderIf } from 'element-vir';
 import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
 import { noUserSelect } from '../../styles/index.js';
 import { defineViraElement } from '../define-vira-element.js';
@@ -44,10 +44,14 @@ export const ViraMenuItem = defineViraElement()({
             margin-right: -2px;
             margin-left: 2px;
         }
+
+        .include-left-spacing {
+            padding-left: 12px;
+        }
     `,
     render({ inputs }) {
         return html `
-            <div class="item">
+            <div class="item ${classMap({ 'include-left-spacing': !!inputs.hideCheckIcon })}">
                 ${renderIf(!inputs.hideCheckIcon, html `
                         <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
                     `)}

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,118 @@
+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) => {
+                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) => {
+                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.10.0",
+    "version": "25.12.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,9 +38,9 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.21.0",
-        "@augment-vir/common": "^31.21.0",
-        "@augment-vir/web": "^31.21.0",
+        "@augment-vir/assert": "^31.21.1",
+        "@augment-vir/common": "^31.21.1",
+        "@augment-vir/web": "^31.21.1",
         "colorjs.io": "^0.5.2",
         "date-vir": "^7.3.1",
         "device-navigation": "^4.5.5",
@@ -52,7 +52,7 @@
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.21.0",
+        "@augment-vir/test": "^31.21.1",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -67,7 +67,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.10.0"
+        "element-vir": "^25.12.0"
     },
     "engines": {
         "node": ">=22"