@aleph-alpha/ui-library 1.9.0 → 1.10.0

package/src/primitives/UiTable/__tests__/UiTableCaption.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTableCaption from '../UiTableCaption.vue';
+
+describe('UiTableCaption', () => {
+  test('renders caption with custom class', () => {
+    const { container } = render(UiTableCaption, {
+      props: { class: 'custom-caption' },
+      slots: {
+        default: 'Table Caption',
+      },
+    });
+
+    const caption = container.querySelector('caption');
+    expect(caption).toBeInTheDocument();
+    expect(caption).toHaveClass('custom-caption');
+  });
+});

package/src/primitives/UiTable/__tests__/UiTableCell.test.ts

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTableCell from '../UiTableCell.vue';
+
+describe('UiTableCell', () => {
+  test('applies custom class', () => {
+    const { getByRole } = render(UiTableCell, {
+      props: { class: 'text-right font-medium' },
+      slots: { default: '$100.00' },
+    });
+
+    expect(getByRole('cell')).toHaveClass('text-right', 'font-medium');
+  });
+
+  test('applies colspan and rowspan attributes', () => {
+    const { container } = render(UiTableCell, {
+      props: { colspan: 2, rowspan: 2 },
+      slots: { default: 'Large Cell' },
+    });
+
+    const cell = container.querySelector('td');
+    expect(cell).toHaveAttribute('colspan', '2');
+    expect(cell).toHaveAttribute('rowspan', '2');
+  });
+});

package/src/primitives/UiTable/__tests__/UiTableEmpty.test.ts

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTableEmpty from '../UiTableEmpty.vue';
+
+describe('UiTableEmpty', () => {
+  test('applies custom class', () => {
+    const { getByRole } = render(UiTableEmpty, {
+      props: { class: 'custom-class' },
+      slots: { default: 'Empty' },
+    });
+
+    expect(getByRole('cell')).toHaveClass('custom-class');
+  });
+
+  test('defaults colspan to 1', () => {
+    const { container } = render(UiTableEmpty, {
+      slots: { default: 'Empty' },
+    });
+
+    expect(container.querySelector('td')).toHaveAttribute('colspan', '1');
+  });
+
+  test('applies custom colspan', () => {
+    const { container } = render(UiTableEmpty, {
+      props: { colspan: 4 },
+      slots: { default: 'Empty' },
+    });
+
+    expect(container.querySelector('td')).toHaveAttribute('colspan', '4');
+  });
+});

package/src/primitives/UiTable/__tests__/UiTableFooter.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTableFooter from '../UiTableFooter.vue';
+
+describe('UiTableFooter', () => {
+  test('renders tfoot with custom class', () => {
+    const { container } = render(UiTableFooter, {
+      props: { class: 'custom-footer' },
+      slots: {
+        default: '<tr><td>Footer Cell</td></tr>',
+      },
+    });
+
+    const tfoot = container.querySelector('tfoot');
+    expect(tfoot).toBeInTheDocument();
+    expect(tfoot).toHaveClass('custom-footer');
+  });
+});

package/src/primitives/UiTable/__tests__/UiTableHead.test.ts

@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTableHead from '../UiTableHead.vue';
+
+describe('UiTableHead', () => {
+  test('applies custom class', () => {
+    const { getByRole } = render(UiTableHead, {
+      props: { class: 'text-right' },
+      slots: { default: 'Amount' },
+    });
+
+    expect(getByRole('columnheader')).toHaveClass('text-right');
+  });
+
+  test('applies colspan and rowspan attributes', () => {
+    const { container } = render(UiTableHead, {
+      props: { colspan: 2, rowspan: 3 },
+      slots: { default: 'Merged Header' },
+    });
+
+    const th = container.querySelector('th');
+    expect(th).toHaveAttribute('colspan', '2');
+    expect(th).toHaveAttribute('rowspan', '3');
+  });
+
+  test('defaults to scope="col"', () => {
+    const { getByRole } = render(UiTableHead, {
+      slots: { default: 'Name' },
+    });
+
+    expect(getByRole('columnheader')).toHaveAttribute('scope', 'col');
+  });
+
+  test('applies custom scope attribute', () => {
+    const { getByRole } = render(UiTableHead, {
+      props: { scope: 'row' },
+      slots: { default: 'Row Header' },
+    });
+
+    expect(getByRole('rowheader')).toHaveAttribute('scope', 'row');
+  });
+});

package/src/primitives/UiTable/__tests__/UiTableHeader.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTableHeader from '../UiTableHeader.vue';
+
+describe('UiTableHeader', () => {
+  test('renders thead with custom class', () => {
+    const { container } = render(UiTableHeader, {
+      props: { class: 'custom-header' },
+      slots: {
+        default: '<tr><th>Header Cell</th></tr>',
+      },
+    });
+
+    const thead = container.querySelector('thead');
+    expect(thead).toBeInTheDocument();
+    expect(thead).toHaveClass('custom-header');
+  });
+});

package/src/primitives/UiTable/__tests__/UiTableRow.test.ts

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTableRow from '../UiTableRow.vue';
+
+describe('UiTableRow', () => {
+  test('applies custom class', () => {
+    const { getByRole } = render(UiTableRow, {
+      props: { class: 'hover:bg-muted' },
+      slots: { default: '<td>Cell</td>' },
+    });
+
+    expect(getByRole('row')).toHaveClass('hover:bg-muted');
+  });
+
+  test('applies data-state="selected" when selected prop is true', () => {
+    const { getByRole } = render(UiTableRow, {
+      props: { selected: true },
+      slots: { default: '<td>Cell</td>' },
+    });
+
+    expect(getByRole('row')).toHaveAttribute('data-state', 'selected');
+  });
+
+  test('defaults to not selected', () => {
+    const { getByRole } = render(UiTableRow, {
+      slots: { default: '<td>Cell</td>' },
+    });
+
+    expect(getByRole('row')).not.toHaveAttribute('data-state');
+  });
+});

package/src/primitives/UiTable/index.ts

@@ -0,0 +1,16 @@
+export { default as UiTable } from './UiTable.vue';
+export { default as UiTableHeader } from './UiTableHeader.vue';
+export { default as UiTableBody } from './UiTableBody.vue';
+export { default as UiTableFooter } from './UiTableFooter.vue';
+export { default as UiTableRow } from './UiTableRow.vue';
+export { default as UiTableHead } from './UiTableHead.vue';
+export { default as UiTableCell } from './UiTableCell.vue';
+export { default as UiTableCaption } from './UiTableCaption.vue';
+export { default as UiTableEmpty } from './UiTableEmpty.vue';
+
+export type {
+  UiTableRowProps,
+  UiTableHeadProps,
+  UiTableCellProps,
+  UiTableEmptyProps,
+} from './types';

package/src/primitives/UiTable/types.ts

@@ -0,0 +1,68 @@
+/**
+ * A basic HTML table with styled rows, headers, and cells. Use for
+ * simple tabular data without sorting, filtering, or pagination needs.
+ *
+ * @category Layout
+ * @useCases simple data display, static table, price list, comparison table
+ * @keywords table, row, cell, header, grid, data, tabular
+ * @related UiDataTable
+ */
+export interface UiTableRowProps {
+  /**
+   * Whether the row is currently selected.
+   * Sets the data-state attribute for styling.
+   * @default false
+   */
+  selected?: boolean;
+}
+
+/**
+ * Props for UiTableHead component.
+ * Represents a header cell in the table (th element).
+ */
+export interface UiTableHeadProps {
+  /**
+   * Number of columns the header cell should span.
+   */
+  colspan?: number;
+
+  /**
+   * Number of rows the header cell should span.
+   */
+  rowspan?: number;
+
+  /**
+   * Scope of the header cell for accessibility.
+   * @default 'col'
+   */
+  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+}
+
+/**
+ * Props for UiTableCell component.
+ * Represents a data cell in the table (td element).
+ */
+export interface UiTableCellProps {
+  /**
+   * Number of columns the cell should span.
+   */
+  colspan?: number;
+
+  /**
+   * Number of rows the cell should span.
+   */
+  rowspan?: number;
+}
+
+/**
+ * Props for UiTableEmpty component.
+ * Displays an empty state message when the table has no data.
+ */
+export interface UiTableEmptyProps {
+  /**
+   * Number of columns the empty state should span.
+   * Should match the total number of columns in your table.
+   * @default 1
+   */
+  colspan?: number;
+}