@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/primitives/UiTable/UiTable.stories.ts

@@ -0,0 +1,505 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import {
+  UiTable,
+  UiTableHeader,
+  UiTableBody,
+  UiTableFooter,
+  UiTableRow,
+  UiTableHead,
+  UiTableCell,
+  UiTableCaption,
+  UiTableEmpty,
+} from './index';
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiDropdownMenuLabel,
+  UiDropdownMenuSeparator,
+} from '../UiDropdownMenu';
+import { UiButton } from '../UiButton';
+import { UiIcon } from '../UiIcon';
+
+const meta = {
+  title: 'Primitives/UiTable',
+  component: UiTable,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The `UiTable` primitives are low-level components used to build accessible and styled tables. They correspond directly to standard HTML table elements (`table`, `thead`, `tbody`, `tr`, `td`, `th`, `caption`) but come with pre-configured styles. Use these when you need full control over the table layout or for static content. For complex data-driven tables with sorting and pagination, use `UiDataTable`.',
+      },
+    },
+  },
+  argTypes: {},
+} satisfies Meta<typeof UiTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '€250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '€150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '€350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '€450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '€550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '€200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '€300.00',
+    paymentMethod: 'Credit Card',
+  },
+];
+
+const basicTemplateSource = `<script setup lang="ts">
+import {
+  UiTable,
+  UiTableHeader,
+  UiTableBody,
+  UiTableFooter,
+  UiTableRow,
+  UiTableHead,
+  UiTableCell,
+  UiTableCaption,
+} from '@aleph-alpha/ui-library'
+
+const invoices = [
+  { invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '€250.00', paymentMethod: 'Credit Card' },
+  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '€150.00', paymentMethod: 'PayPal' },
+  { invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '€350.00', paymentMethod: 'Bank Transfer' },
+]
+</script>
+
+<template>
+  <UiTable>
+    <UiTableCaption>A list of your recent invoices.</UiTableCaption>
+    <UiTableHeader>
+      <UiTableRow>
+        <UiTableHead class="w-[100px]">Invoice</UiTableHead>
+        <UiTableHead>Status</UiTableHead>
+        <UiTableHead>Method</UiTableHead>
+        <UiTableHead class="text-right">Amount</UiTableHead>
+      </UiTableRow>
+    </UiTableHeader>
+    <UiTableBody>
+      <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
+        <UiTableCell class="font-medium">{{ invoice.invoice }}</UiTableCell>
+        <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
+        <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
+        <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
+      </UiTableRow>
+    </UiTableBody>
+    <UiTableFooter>
+      <UiTableRow>
+        <UiTableCell colspan="3">Total</UiTableCell>
+        <UiTableCell class="text-right">€2,500.00</UiTableCell>
+      </UiTableRow>
+    </UiTableFooter>
+  </UiTable>
+</template>`;
+
+const basicTemplate = `
+<UiTable>
+  <UiTableCaption>A list of your recent invoices.</UiTableCaption>
+  <UiTableHeader>
+    <UiTableRow>
+      <UiTableHead class="w-[100px]">Invoice</UiTableHead>
+      <UiTableHead>Status</UiTableHead>
+      <UiTableHead>Method</UiTableHead>
+      <UiTableHead class="text-right">Amount</UiTableHead>
+    </UiTableRow>
+  </UiTableHeader>
+  <UiTableBody>
+    <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
+      <UiTableCell class="font-medium">{{ invoice.invoice }}</UiTableCell>
+      <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
+      <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
+      <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
+    </UiTableRow>
+  </UiTableBody>
+  <UiTableFooter>
+    <UiTableRow>
+      <UiTableCell colspan="3">Total</UiTableCell>
+      <UiTableCell class="text-right">€2,500.00</UiTableCell>
+    </UiTableRow>
+  </UiTableFooter>
+</UiTable>
+`;
+
+/**
+ * A standard table example showing how to compose UiTable components.
+ */
+export const Basic: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A standard table example showing how to compose `UiTable`, `UiTableHeader`, `UiTableBody`, `UiTableRow`, `UiTableCell`, and `UiTableFooter`.',
+      },
+      source: {
+        code: basicTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      UiTable,
+      UiTableHeader,
+      UiTableBody,
+      UiTableFooter,
+      UiTableRow,
+      UiTableHead,
+      UiTableCell,
+      UiTableCaption,
+    },
+    setup() {
+      return { invoices };
+    },
+    template: basicTemplate,
+  }),
+};
+
+const withRowActionsTemplateSource = `<script setup lang="ts">
+import {
+  UiTable,
+  UiTableHeader,
+  UiTableBody,
+  UiTableRow,
+  UiTableHead,
+  UiTableCell,
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiDropdownMenuLabel,
+  UiDropdownMenuSeparator,
+  UiButton,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const invoices = [
+  { invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '€250.00', paymentMethod: 'Credit Card' },
+  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '€150.00', paymentMethod: 'PayPal' },
+]
+</script>
+
+<template>
+  <UiTable>
+    <UiTableHeader>
+      <UiTableRow>
+        <UiTableHead>Invoice</UiTableHead>
+        <UiTableHead>Status</UiTableHead>
+        <UiTableHead>Method</UiTableHead>
+        <UiTableHead class="text-right">Amount</UiTableHead>
+        <UiTableHead class="w-[50px]"></UiTableHead>
+      </UiTableRow>
+    </UiTableHeader>
+    <UiTableBody>
+      <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
+        <UiTableCell class="font-medium">{{ invoice.invoice }}</UiTableCell>
+        <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
+        <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
+        <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
+        <UiTableCell>
+          <UiDropdownMenu>
+            <UiDropdownMenuTrigger as-child>
+              <UiButton variant="ghost" size="icon" class="h-8 w-8 p-0">
+                <span class="sr-only">Open menu</span>
+                <UiIcon icon="i-material-symbols-more-horiz" class="h-4 w-4" />
+              </UiButton>
+            </UiDropdownMenuTrigger>
+            <UiDropdownMenuContent align="end">
+              <UiDropdownMenuLabel>Actions</UiDropdownMenuLabel>
+              <UiDropdownMenuItem>Copy payment ID</UiDropdownMenuItem>
+              <UiDropdownMenuSeparator />
+              <UiDropdownMenuItem>View customer</UiDropdownMenuItem>
+              <UiDropdownMenuItem>View payment details</UiDropdownMenuItem>
+            </UiDropdownMenuContent>
+          </UiDropdownMenu>
+        </UiTableCell>
+      </UiTableRow>
+    </UiTableBody>
+  </UiTable>
+</template>`;
+
+const withRowActionsTemplate = `
+<UiTable>
+  <UiTableHeader>
+    <UiTableRow>
+      <UiTableHead>Invoice</UiTableHead>
+      <UiTableHead>Status</UiTableHead>
+      <UiTableHead>Method</UiTableHead>
+      <UiTableHead class="text-right">Amount</UiTableHead>
+      <UiTableHead class="w-[50px]"></UiTableHead>
+    </UiTableRow>
+  </UiTableHeader>
+  <UiTableBody>
+    <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
+      <UiTableCell class="font-medium">{{ invoice.invoice }}</UiTableCell>
+      <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
+      <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
+      <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
+      <UiTableCell>
+        <UiDropdownMenu>
+          <UiDropdownMenuTrigger as-child>
+            <UiButton variant="ghost" size="icon" class="h-8 w-8 p-0">
+              <span class="sr-only">Open menu</span>
+              <UiIcon icon="i-material-symbols-more-horiz" class="h-4 w-4" />
+            </UiButton>
+          </UiDropdownMenuTrigger>
+          <UiDropdownMenuContent align="end">
+            <UiDropdownMenuLabel>Actions</UiDropdownMenuLabel>
+            <UiDropdownMenuItem @click="() => {}">Copy payment ID</UiDropdownMenuItem>
+            <UiDropdownMenuSeparator />
+            <UiDropdownMenuItem>View customer</UiDropdownMenuItem>
+            <UiDropdownMenuItem>View payment details</UiDropdownMenuItem>
+          </UiDropdownMenuContent>
+        </UiDropdownMenu>
+      </UiTableCell>
+    </UiTableRow>
+  </UiTableBody>
+</UiTable>
+`;
+
+/**
+ * Shows how to add action menus to each row using UiDropdownMenu.
+ */
+export const WithRowActions: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows how to add action menus to each row using UiDropdownMenu. This is a common pattern for admin tables with edit/delete actions. The actions column is typically placed at the end with a fixed width.',
+      },
+      source: {
+        code: withRowActionsTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      UiTable,
+      UiTableHeader,
+      UiTableBody,
+      UiTableRow,
+      UiTableHead,
+      UiTableCell,
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiDropdownMenuLabel,
+      UiDropdownMenuSeparator,
+      UiButton,
+      UiIcon,
+    },
+    setup() {
+      return { invoices };
+    },
+    template: withRowActionsTemplate,
+  }),
+};
+
+const emptyStateTemplateSource = `<script setup lang="ts">
+import {
+  UiTable,
+  UiTableHeader,
+  UiTableBody,
+  UiTableRow,
+  UiTableHead,
+  UiTableEmpty,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTable>
+    <UiTableHeader>
+      <UiTableRow>
+        <UiTableHead>Invoice</UiTableHead>
+        <UiTableHead>Status</UiTableHead>
+        <UiTableHead>Method</UiTableHead>
+        <UiTableHead class="text-right">Amount</UiTableHead>
+      </UiTableRow>
+    </UiTableHeader>
+    <UiTableBody>
+      <UiTableEmpty :colspan="4">No invoices found.</UiTableEmpty>
+    </UiTableBody>
+  </UiTable>
+</template>`;
+
+const emptyStateTemplate = `
+<UiTable>
+  <UiTableHeader>
+    <UiTableRow>
+      <UiTableHead>Invoice</UiTableHead>
+      <UiTableHead>Status</UiTableHead>
+      <UiTableHead>Method</UiTableHead>
+      <UiTableHead class="text-right">Amount</UiTableHead>
+    </UiTableRow>
+  </UiTableHeader>
+  <UiTableBody>
+    <UiTableEmpty :colspan="4">No invoices found.</UiTableEmpty>
+  </UiTableBody>
+</UiTable>
+`;
+
+/**
+ * Use UiTableEmpty to display a message when there is no data to show.
+ */
+export const EmptyState: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use `UiTableEmpty` to display a message when there is no data to show.',
+      },
+      source: {
+        code: emptyStateTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      UiTable,
+      UiTableHeader,
+      UiTableBody,
+      UiTableRow,
+      UiTableHead,
+      UiTableEmpty,
+    },
+    template: emptyStateTemplate,
+  }),
+};
+
+const colSpanTemplateSource = `<script setup lang="ts">
+import {
+  UiTable,
+  UiTableHeader,
+  UiTableBody,
+  UiTableRow,
+  UiTableHead,
+  UiTableCell,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTable>
+    <UiTableHeader>
+      <UiTableRow>
+        <UiTableHead colspan="2">Product Info</UiTableHead>
+        <UiTableHead colspan="2">Pricing</UiTableHead>
+      </UiTableRow>
+      <UiTableRow>
+        <UiTableHead>Name</UiTableHead>
+        <UiTableHead>Category</UiTableHead>
+        <UiTableHead>Price</UiTableHead>
+        <UiTableHead>Discount</UiTableHead>
+      </UiTableRow>
+    </UiTableHeader>
+    <UiTableBody>
+      <UiTableRow>
+        <UiTableCell>Widget Pro</UiTableCell>
+        <UiTableCell>Electronics</UiTableCell>
+        <UiTableCell>€99.00</UiTableCell>
+        <UiTableCell>10%</UiTableCell>
+      </UiTableRow>
+      <UiTableRow>
+        <UiTableCell>Gadget Plus</UiTableCell>
+        <UiTableCell>Accessories</UiTableCell>
+        <UiTableCell>€49.00</UiTableCell>
+        <UiTableCell>5%</UiTableCell>
+      </UiTableRow>
+    </UiTableBody>
+  </UiTable>
+</template>`;
+
+const colSpanTemplate = `
+<UiTable>
+  <UiTableHeader>
+    <UiTableRow>
+      <UiTableHead colspan="2">Product Info</UiTableHead>
+      <UiTableHead colspan="2">Pricing</UiTableHead>
+    </UiTableRow>
+    <UiTableRow>
+      <UiTableHead>Name</UiTableHead>
+      <UiTableHead>Category</UiTableHead>
+      <UiTableHead>Price</UiTableHead>
+      <UiTableHead>Discount</UiTableHead>
+    </UiTableRow>
+  </UiTableHeader>
+  <UiTableBody>
+    <UiTableRow>
+      <UiTableCell>Widget Pro</UiTableCell>
+      <UiTableCell>Electronics</UiTableCell>
+      <UiTableCell>€99.00</UiTableCell>
+      <UiTableCell>10%</UiTableCell>
+    </UiTableRow>
+    <UiTableRow>
+      <UiTableCell>Gadget Plus</UiTableCell>
+      <UiTableCell>Accessories</UiTableCell>
+      <UiTableCell>€49.00</UiTableCell>
+      <UiTableCell>5%</UiTableCell>
+    </UiTableRow>
+  </UiTableBody>
+</UiTable>
+`;
+
+/**
+ * Use the colspan attribute on UiTableHead or UiTableCell to create grouped headers.
+ */
+export const WithColSpan: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Use the `colspan` attribute on `UiTableHead` or `UiTableCell` to create grouped headers or cells that span multiple columns.',
+      },
+      source: {
+        code: colSpanTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      UiTable,
+      UiTableHeader,
+      UiTableBody,
+      UiTableRow,
+      UiTableHead,
+      UiTableCell,
+    },
+    template: colSpanTemplate,
+  }),
+};

package/src/primitives/UiTable/UiTable.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { Table as ShadcnTable } from '@/primitives/shadcn/table';
+
+  defineOptions({
+    name: 'UiTable',
+  });
+</script>
+
+<template>
+  <ShadcnTable>
+    <slot />
+  </ShadcnTable>
+</template>

package/src/primitives/UiTable/UiTableBody.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { TableBody as ShadcnTableBody } from '@/primitives/shadcn/table';
+
+  defineOptions({
+    name: 'UiTableBody',
+  });
+</script>
+
+<template>
+  <ShadcnTableBody>
+    <slot />
+  </ShadcnTableBody>
+</template>

package/src/primitives/UiTable/UiTableCaption.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { TableCaption as ShadcnTableCaption } from '@/primitives/shadcn/table';
+
+  defineOptions({
+    name: 'UiTableCaption',
+  });
+</script>
+
+<template>
+  <ShadcnTableCaption>
+    <slot />
+  </ShadcnTableCaption>
+</template>

package/src/primitives/UiTable/UiTableCell.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { TableCell as ShadcnTableCell } from '@/primitives/shadcn/table';
+  import type { UiTableCellProps } from './types';
+
+  defineOptions({
+    name: 'UiTableCell',
+  });
+
+  const props = defineProps<UiTableCellProps>();
+</script>
+
+<template>
+  <ShadcnTableCell :colspan="props.colspan" :rowspan="props.rowspan">
+    <slot />
+  </ShadcnTableCell>
+</template>

package/src/primitives/UiTable/UiTableEmpty.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { TableEmpty as ShadcnTableEmpty } from '@/primitives/shadcn/table';
+  import type { UiTableEmptyProps } from './types';
+
+  defineOptions({
+    name: 'UiTableEmpty',
+  });
+
+  const props = withDefaults(defineProps<UiTableEmptyProps>(), {
+    colspan: 1,
+  });
+</script>
+
+<template>
+  <ShadcnTableEmpty :colspan="props.colspan">
+    <slot />
+  </ShadcnTableEmpty>
+</template>

package/src/primitives/UiTable/UiTableFooter.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { TableFooter as ShadcnTableFooter } from '@/primitives/shadcn/table';
+
+  defineOptions({
+    name: 'UiTableFooter',
+  });
+</script>
+
+<template>
+  <ShadcnTableFooter>
+    <slot />
+  </ShadcnTableFooter>
+</template>

package/src/primitives/UiTable/UiTableHead.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { TableHead as ShadcnTableHead } from '@/primitives/shadcn/table';
+  import type { UiTableHeadProps } from './types';
+
+  defineOptions({
+    name: 'UiTableHead',
+  });
+
+  const props = withDefaults(defineProps<UiTableHeadProps>(), {
+    scope: 'col',
+  });
+</script>
+
+<template>
+  <ShadcnTableHead :colspan="props.colspan" :rowspan="props.rowspan" :scope="props.scope">
+    <slot />
+  </ShadcnTableHead>
+</template>

package/src/primitives/UiTable/UiTableHeader.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { TableHeader as ShadcnTableHeader } from '@/primitives/shadcn/table';
+
+  defineOptions({
+    name: 'UiTableHeader',
+  });
+</script>
+
+<template>
+  <ShadcnTableHeader>
+    <slot />
+  </ShadcnTableHeader>
+</template>

package/src/primitives/UiTable/UiTableRow.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { TableRow as ShadcnTableRow } from '@/primitives/shadcn/table';
+  import type { UiTableRowProps } from './types';
+
+  defineOptions({
+    name: 'UiTableRow',
+  });
+
+  const props = withDefaults(defineProps<UiTableRowProps>(), {
+    selected: false,
+  });
+</script>
+
+<template>
+  <ShadcnTableRow :data-state="props.selected ? 'selected' : undefined">
+    <slot />
+  </ShadcnTableRow>
+</template>

package/src/primitives/UiTable/__tests__/UiTable.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 UiTable from '../UiTable.vue';
+
+describe('UiTable', () => {
+  test('renders table with custom class', () => {
+    const { getByRole } = render(UiTable, {
+      props: { class: 'custom-table' },
+      slots: {
+        default: '<tbody><tr><td>Cell</td></tr></tbody>',
+      },
+    });
+
+    const table = getByRole('table');
+    expect(table).toBeInTheDocument();
+    expect(table).toHaveClass('custom-table');
+  });
+});

package/src/primitives/UiTable/__tests__/UiTableBody.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 UiTableBody from '../UiTableBody.vue';
+
+describe('UiTableBody', () => {
+  test('renders tbody with custom class', () => {
+    const { container } = render(UiTableBody, {
+      props: { class: 'custom-tbody' },
+      slots: {
+        default: '<tr><td>Cell</td></tr>',
+      },
+    });
+
+    const tbody = container.querySelector('tbody');
+    expect(tbody).toBeInTheDocument();
+    expect(tbody).toHaveClass('custom-tbody');
+  });
+});