@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/compositions/UiDataTable/__tests__/UiDataTable.test.ts

@@ -1,372 +0,0 @@
-import { render, within } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, test } from 'vitest';
-import { h, ref, nextTick } from 'vue';
-import type { ColumnDef } from '@tanstack/vue-table';
-import UiDataTable from '../UiDataTable.vue';
-import UiDataTableColumnHeader from '../UiDataTableColumnHeader.vue';
-import { UiCheckbox } from '@/primitives/UiCheckbox';
-
-interface TestData {
-  id: string;
-  name: string;
-  amount: number;
-}
-
-const testData: TestData[] = [
-  { id: '1', name: 'Alice', amount: 100 },
-  { id: '2', name: 'Bob', amount: 200 },
-  { id: '3', name: 'Charlie', amount: 150 },
-];
-
-const basicColumns: ColumnDef<TestData>[] = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'amount', header: 'Amount' },
-];
-
-const sortableColumns: ColumnDef<TestData>[] = [
-  {
-    accessorKey: 'name',
-    header: ({ column }) => h(UiDataTableColumnHeader, { column, title: 'Name' }),
-  },
-  {
-    accessorKey: 'amount',
-    header: ({ column }) => h(UiDataTableColumnHeader, { column, title: 'Amount' }),
-  },
-];
-
-const sizedColumns: ColumnDef<TestData>[] = [
-  { accessorKey: 'name', header: 'Name', size: 200 },
-  { accessorKey: 'amount', header: 'Amount' },
-];
-
-const selectableColumns: ColumnDef<TestData>[] = [
-  {
-    id: 'select',
-    header: ({ table }) =>
-      h(UiCheckbox, {
-        modelValue:
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && 'indeterminate'),
-        'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
-        'aria-label': 'Select all',
-        name: 'select-all',
-      }),
-    cell: ({ row }) =>
-      h(UiCheckbox, {
-        modelValue: row.getIsSelected(),
-        'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
-        'aria-label': `Select row ${row.original.name}`,
-        name: `select-${row.id}`,
-      }),
-    enableSorting: false,
-    enableHiding: false,
-    size: 40,
-  },
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'amount', header: 'Amount' },
-];
-
-describe('UiDataTable', () => {
-  describe('Rendering', () => {
-    test('renders table with headers and data', () => {
-      const { getByRole, getAllByRole } = render(UiDataTable, {
-        props: { columns: basicColumns, data: testData },
-      });
-
-      expect(getByRole('table')).toBeInTheDocument();
-      expect(getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
-      expect(getByRole('columnheader', { name: 'Amount' })).toBeInTheDocument();
-
-      const rows = getAllByRole('row');
-      // 1 header row + 3 data rows
-      expect(rows).toHaveLength(4);
-
-      // Verify data is rendered
-      const table = getByRole('table');
-      expect(within(table).getByText('Alice')).toBeInTheDocument();
-      expect(within(table).getByText('100')).toBeInTheDocument();
-    });
-
-    test('renders default empty state when data is empty', () => {
-      const { getByText } = render(UiDataTable, {
-        props: { columns: basicColumns, data: [] },
-      });
-
-      expect(getByText('No results.')).toBeInTheDocument();
-    });
-
-    test('renders custom emptyText when provided', () => {
-      const { getByText, queryByText } = render(UiDataTable, {
-        props: { columns: basicColumns, data: [], emptyText: 'No items found' },
-      });
-
-      expect(getByText('No items found')).toBeInTheDocument();
-      expect(queryByText('No results.')).not.toBeInTheDocument();
-    });
-
-    test('renders custom empty state via #empty slot', () => {
-      const { getByText } = render(UiDataTable, {
-        props: { columns: basicColumns, data: [] },
-        slots: { empty: '<div>Custom empty content</div>' },
-      });
-
-      expect(getByText('Custom empty content')).toBeInTheDocument();
-    });
-
-    test('applies tableMinHeight style when provided', () => {
-      const { container } = render(UiDataTable, {
-        props: { columns: basicColumns, data: testData, tableMinHeight: '400px' },
-      });
-
-      const wrapper = container.firstElementChild;
-      expect(wrapper).toHaveStyle({ minHeight: '400px' });
-    });
-  });
-
-  describe('Column Sizing', () => {
-    test('applies custom width to columns with size defined', () => {
-      const { container } = render(UiDataTable, {
-        props: { columns: sizedColumns, data: testData },
-      });
-
-      const headers = container.querySelectorAll('th');
-      expect(headers[0]).toHaveStyle({ width: '200px' });
-      // Only verify that the sized column applies the expected width
-    });
-  });
-
-  describe('Sorting', () => {
-    test('sorts data when sortable column header is clicked', async () => {
-      const user = userEvent.setup();
-      const { getByRole, getAllByRole } = render(UiDataTable, {
-        props: { columns: sortableColumns, data: testData },
-      });
-
-      // Click the Name column header button to open dropdown
-      await user.click(getByRole('button', { name: /Name/i }));
-      // Click ascending option
-      await user.click(getByRole('menuitem', { name: /Asc/i }));
-
-      const cells = getAllByRole('cell');
-      // First data row should be Alice (alphabetically first)
-      expect(cells[0]).toHaveTextContent('Alice');
-    });
-
-    test('sorts descending when desc option is selected', async () => {
-      const user = userEvent.setup();
-      const { getByRole, getAllByRole } = render(UiDataTable, {
-        props: { columns: sortableColumns, data: testData },
-      });
-
-      await user.click(getByRole('button', { name: /Name/i }));
-      await user.click(getByRole('menuitem', { name: /Desc/i }));
-
-      const cells = getAllByRole('cell');
-      // First data row should be Charlie (alphabetically last)
-      expect(cells[0]).toHaveTextContent('Charlie');
-    });
-  });
-
-  describe('Filtering', () => {
-    test('filters rows when global filter is applied via table instance', async () => {
-      const tableRef = ref<InstanceType<typeof UiDataTable>>();
-
-      const { getAllByRole } = render({
-        components: { UiDataTable },
-        template: '<UiDataTable ref="tableRef" :columns="columns" :data="data" />',
-        setup() {
-          return { tableRef, columns: basicColumns, data: testData };
-        },
-      });
-
-      // Wait for component to mount
-      await nextTick();
-
-      // Apply global filter via exposed table instance
-      tableRef.value?.table.setGlobalFilter('Alice');
-      await nextTick();
-
-      const rows = getAllByRole('row');
-      // 1 header + 1 filtered data row
-      expect(rows).toHaveLength(2);
-    });
-
-    test('shows empty state when filter matches no rows', async () => {
-      const tableRef = ref<InstanceType<typeof UiDataTable>>();
-
-      const { getByText } = render({
-        components: { UiDataTable },
-        template: '<UiDataTable ref="tableRef" :columns="columns" :data="data" />',
-        setup() {
-          return { tableRef, columns: basicColumns, data: testData };
-        },
-      });
-
-      await nextTick();
-      tableRef.value?.table.setGlobalFilter('NonExistent');
-      await nextTick();
-
-      expect(getByText('No results.')).toBeInTheDocument();
-    });
-  });
-
-  describe('Row Selection', () => {
-    test('toggles individual row selection when checkbox is clicked', async () => {
-      const user = userEvent.setup();
-      const tableRef = ref<InstanceType<typeof UiDataTable>>();
-
-      const { getByLabelText } = render({
-        components: { UiDataTable },
-        template: '<UiDataTable ref="tableRef" :columns="columns" :data="data" />',
-        setup() {
-          return { tableRef, columns: selectableColumns, data: testData };
-        },
-      });
-
-      await nextTick();
-
-      // Select row
-      const checkbox = getByLabelText('Select row Alice');
-      await user.click(checkbox);
-      await nextTick();
-
-      let selectedRows = tableRef.value?.table.getSelectedRowModel().rows;
-      expect(selectedRows).toHaveLength(1);
-      expect(selectedRows?.[0].original.name).toBe('Alice');
-
-      // Deselect row
-      await user.click(checkbox);
-      await nextTick();
-
-      selectedRows = tableRef.value?.table.getSelectedRowModel().rows;
-      expect(selectedRows).toHaveLength(0);
-    });
-
-    test('selects multiple rows independently', async () => {
-      const user = userEvent.setup();
-      const tableRef = ref<InstanceType<typeof UiDataTable>>();
-
-      const { getByLabelText } = render({
-        components: { UiDataTable },
-        template: '<UiDataTable ref="tableRef" :columns="columns" :data="data" />',
-        setup() {
-          return { tableRef, columns: selectableColumns, data: testData };
-        },
-      });
-
-      await nextTick();
-
-      // Select Alice and Charlie
-      await user.click(getByLabelText('Select row Alice'));
-      await user.click(getByLabelText('Select row Charlie'));
-      await nextTick();
-
-      const selectedRows = tableRef.value?.table.getSelectedRowModel().rows;
-      expect(selectedRows).toHaveLength(2);
-      expect(selectedRows?.map((r) => r.original.name)).toEqual(['Alice', 'Charlie']);
-    });
-
-    test('toggles all rows when select all checkbox is clicked', async () => {
-      const user = userEvent.setup();
-      const tableRef = ref<InstanceType<typeof UiDataTable>>();
-
-      const { getByLabelText } = render({
-        components: { UiDataTable },
-        template: '<UiDataTable ref="tableRef" :columns="columns" :data="data" />',
-        setup() {
-          return { tableRef, columns: selectableColumns, data: testData };
-        },
-      });
-
-      await nextTick();
-
-      const selectAll = getByLabelText('Select all');
-
-      // Select all
-      await user.click(selectAll);
-      await nextTick();
-
-      let selectedRows = tableRef.value?.table.getSelectedRowModel().rows;
-      expect(selectedRows).toHaveLength(3);
-      expect(tableRef.value?.table.getIsAllPageRowsSelected()).toBe(true);
-
-      // Deselect all
-      await user.click(selectAll);
-      await nextTick();
-
-      selectedRows = tableRef.value?.table.getSelectedRowModel().rows;
-      expect(selectedRows).toHaveLength(0);
-      expect(tableRef.value?.table.getIsAllPageRowsSelected()).toBe(false);
-    });
-
-    test('shows indeterminate state when some rows selected', async () => {
-      const user = userEvent.setup();
-      const tableRef = ref<InstanceType<typeof UiDataTable>>();
-
-      const { getByLabelText } = render({
-        components: { UiDataTable },
-        template: '<UiDataTable ref="tableRef" :columns="columns" :data="data" />',
-        setup() {
-          return { tableRef, columns: selectableColumns, data: testData };
-        },
-      });
-
-      await nextTick();
-
-      // Select only one row
-      await user.click(getByLabelText('Select row Alice'));
-      await nextTick();
-
-      expect(tableRef.value?.table.getIsSomePageRowsSelected()).toBe(true);
-      expect(tableRef.value?.table.getIsAllPageRowsSelected()).toBe(false);
-    });
-  });
-
-  describe('Reactivity', () => {
-    test('updates table when data prop changes', async () => {
-      const data = ref(testData);
-
-      const { getAllByRole, getByText } = render({
-        components: { UiDataTable },
-        template: '<UiDataTable :columns="columns" :data="data" />',
-        setup() {
-          return { columns: basicColumns, data };
-        },
-      });
-
-      expect(getAllByRole('row')).toHaveLength(4);
-
-      data.value = [...testData, { id: '4', name: 'Diana', amount: 300 }];
-      await nextTick();
-
-      expect(getAllByRole('row')).toHaveLength(5);
-      expect(getByText('Diana')).toBeInTheDocument();
-    });
-
-    test('uses getRowId for stable row identification', async () => {
-      const tableRef = ref<InstanceType<typeof UiDataTable>>();
-
-      render({
-        components: { UiDataTable },
-        template: `
-          <UiDataTable 
-            ref="tableRef" 
-            :columns="columns" 
-            :data="data" 
-            :get-row-id="(row) => row.id"
-          />
-        `,
-        setup() {
-          return { tableRef, columns: basicColumns, data: testData };
-        },
-      });
-
-      await nextTick();
-
-      const rows = tableRef.value?.table.getRowModel().rows;
-      expect(rows?.[0].id).toBe('1');
-      expect(rows?.[1].id).toBe('2');
-    });
-  });
-});

package/src/compositions/UiDataTable/types.ts

@@ -1,39 +0,0 @@
-import type { ColumnDef, Row } from '@tanstack/vue-table';
-
-/**
- * A feature-rich data table with sorting, filtering, and pagination.
- * Use for displaying and managing large datasets with interactive features.
- *
- * @category Layout
- * @useCases data grid, admin table, user list, product catalog, reports
- * @keywords datatable, grid, sorting, filtering, pagination, data, list
- * @related UiTable
- */
-export interface UiDataTableProps<TData, TValue> {
-  /**
-   * The column definitions for the table.
-   */
-  columns: ColumnDef<TData, TValue>[];
-  /**
-   * The data to display in the table.
-   */
-  data: TData[];
-  /**
-   * Text to display when there are no results.
-   * @default "No results."
-   */
-  emptyText?: string;
-  /**
-   * Function to derive a unique ID for each row. Important for proper row selection
-   * and state management when data changes. Defaults to using the row index.
-   * @example (row) => row.id
-   */
-  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
-  /**
-   * Minimum height for the table container. Useful for preventing layout shifts
-   * during pagination. The last row will have a visible bottom border even when
-   * the container is taller than the content.
-   * @example "400px"
-   */
-  tableMinHeight?: string;
-}