@nexxtmove/ui 0.1.28 → 0.1.30

package/src/components/Table/Table.stories.ts

@@ -0,0 +1,283 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref, type ConcreteComponent } from 'vue'
+import Table, { type TableColumn } from './Table.vue'
+
+type RowKey = 'name' | 'email' | 'role' | 'status' | 'department' | 'lastLogin'
+
+interface TableStoryProps {
+  columns: TableColumn<RowKey>[]
+  rows: Record<RowKey, string>[]
+  selectable?: boolean
+}
+
+const meta: Meta<TableStoryProps> = {
+  title: 'Components/Atoms/Table',
+  component: Table as ConcreteComponent<TableStoryProps>,
+}
+
+export default meta
+type Story = StoryObj<TableStoryProps>
+
+const columns: TableColumn<RowKey>[] = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'department', label: 'Department' },
+  { key: 'role', label: 'Role', sortable: true, width: '0.5fr' },
+  { key: 'lastLogin', label: 'lastLogin' },
+  { key: 'status', label: 'Status', width: '0.5fr' },
+]
+
+const allRows = [
+  {
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-25',
+  },
+  {
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-27',
+  },
+  {
+    name: 'Carol White',
+    email: 'carol@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-02-12',
+  },
+  {
+    name: 'David Brown',
+    email: 'david@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-30',
+  },
+  {
+    name: 'Eve Turner',
+    email: 'eve@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-28',
+  },
+  {
+    name: 'Frank Miller',
+    email: 'frank@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-26',
+  },
+  {
+    name: 'Grace Lee',
+    email: 'grace@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-29',
+  },
+  {
+    name: 'Henry Wilson',
+    email: 'henry@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-01-10',
+  },
+  {
+    name: 'Ivy Clark',
+    email: 'ivy@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-20',
+  },
+  {
+    name: 'Jack Davis',
+    email: 'jack@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-23',
+  },
+  {
+    name: 'Karen Harris',
+    email: 'karen@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-19',
+  },
+  {
+    name: 'Leo King',
+    email: 'leo@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-28',
+  },
+  {
+    name: 'Mia Scott',
+    email: 'mia@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-30',
+  },
+  {
+    name: 'Nick Evans',
+    email: 'nick@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-02-05',
+  },
+  {
+    name: 'Olivia Foster',
+    email: 'olivia@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-27',
+  },
+  {
+    name: 'Paul Green',
+    email: 'paul@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-18',
+  },
+  {
+    name: 'Quincy Adams',
+    email: 'quincy@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-25',
+  },
+  {
+    name: 'Rachel Lewis',
+    email: 'rachel@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-29',
+  },
+  {
+    name: 'Sam Nelson',
+    email: 'sam@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-01-15',
+  },
+  {
+    name: 'Tina Brooks',
+    email: 'tina@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-30',
+  },
+]
+
+const sortRows = (rows: typeof allRows, key: string | undefined, direction: 'asc' | 'desc') => {
+  if (!key) return rows
+  return [...rows].sort((a, b) => {
+    const aVal = String(a[key as keyof typeof a] ?? '')
+    const bVal = String(b[key as keyof typeof b] ?? '')
+    const result = aVal.localeCompare(bVal, undefined, { numeric: true, sensitivity: 'base' })
+    return direction === 'asc' ? result : -result
+  })
+}
+
+export const Default: Story = {
+  args: { columns, rows: allRows },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      const onSort = (key: string, direction: 'asc' | 'desc') => {
+        sortKey.value = key
+        sortDirection.value = direction
+      }
+      return { args, rows, sortKey, sortDirection, onSort }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" :sort-key="sortKey" :sort-direction="sortDirection" @sort="onSort" />`,
+  }),
+}
+
+export const WithSelection: Story = {
+  args: { columns, rows: allRows, selectable: true },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const selected = ref<number[]>([])
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      const onSort = (key: string, direction: 'asc' | 'desc') => {
+        sortKey.value = key
+        sortDirection.value = direction
+      }
+      return { args, rows, sortKey, sortDirection, onSort, selected }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" :sort-key="sortKey" :sort-direction="sortDirection" :selectable="args.selectable" v-model="selected" @sort="onSort" />`,
+  }),
+}
+
+export const WithSlots: Story = {
+  args: { columns, rows: allRows },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      const onSort = (key: string, direction: 'asc' | 'desc') => {
+        sortKey.value = key
+        sortDirection.value = direction
+      }
+      return { args, rows, sortKey, sortDirection, onSort }
+    },
+    template: `
+      <Table :columns="args.columns" :rows="rows" :sort-key="sortKey" :sort-direction="sortDirection" @sort="onSort">
+        <template #cell-name="{ value, row }">
+          <div class="flex flex-col">
+            <span class="font-medium">{{ value }}</span>
+            <span class="text-xs text-slate-400">{{ row.email }}</span>
+          </div>
+        </template>
+        <template #cell-status="{ value }">
+          <span
+            class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+            :class="value === 'Active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'"
+          >
+            {{ value }}
+          </span>
+        </template>
+      </Table>
+    `,
+  }),
+}
+
+export const Empty: Story = {
+  args: { columns, rows: [] },
+}

package/src/components/Table/Table.test.ts

@@ -0,0 +1,220 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Table from './Table.vue'
+
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email' },
+]
+
+const rows = [
+  { name: 'Alice', email: 'alice@example.com' },
+  { name: 'Bob', email: 'bob@example.com' },
+  { name: 'Carol', email: 'carol@example.com' },
+]
+
+describe('Table', () => {
+  describe('rendering', () => {
+    it('renders column headers', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      expect(wrapper.text()).toContain('Name')
+      expect(wrapper.text()).toContain('Email')
+    })
+
+    it('renders row data', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      expect(wrapper.text()).toContain('Alice')
+      expect(wrapper.text()).toContain('bob@example.com')
+    })
+
+    it('renders empty slot when rows is empty', () => {
+      const wrapper = mount(Table, { props: { columns, rows: [] } })
+      expect(wrapper.text()).toContain('Geen data beschikbaar')
+    })
+
+    it('renders custom empty slot content', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows: [] },
+        slots: { empty: 'Nothing here' },
+      })
+      expect(wrapper.text()).toContain('Nothing here')
+    })
+
+    it('renders cell slot content', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows },
+        slots: { 'cell-name': '<strong>custom</strong>' },
+      })
+      expect(wrapper.html()).toContain('<strong>custom</strong>')
+    })
+  })
+
+  describe('sorting', () => {
+    it('renders sort icon on sortable columns', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const headers = wrapper.findAll('[role="columnheader"]')
+      const nameHeader = headers[0]
+      expect(nameHeader.find('i').exists()).toBe(true)
+    })
+
+    it('does not render sort icon on non-sortable columns', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const headers = wrapper.findAll('[role="columnheader"]')
+      const emailHeader = headers[1]
+      expect(emailHeader.find('i').exists()).toBe(false)
+    })
+
+    it('emits sort event when clicking a sortable header', async () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      await nameHeader.trigger('click')
+      expect(wrapper.emitted('sort')).toBeTruthy()
+      expect(wrapper.emitted('sort')![0]).toEqual(['name', 'asc'])
+    })
+
+    it('emits desc direction when clicking an already sorted column', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, sortKey: 'name', sortDirection: 'asc' },
+      })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      await nameHeader.trigger('click')
+      expect(wrapper.emitted('sort')![0]).toEqual(['name', 'desc'])
+    })
+
+    it('does not emit sort when clicking a non-sortable header', async () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const emailHeader = wrapper.findAll('[role="columnheader"]')[1]
+      await emailHeader.trigger('click')
+      expect(wrapper.emitted('sort')).toBeFalsy()
+    })
+
+    it('sets aria-sort to ascending on the active sort column', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, sortKey: 'name', sortDirection: 'asc' },
+      })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      expect(nameHeader.attributes('aria-sort')).toBe('ascending')
+    })
+
+    it('sets aria-sort to descending on the active sort column', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, sortKey: 'name', sortDirection: 'desc' },
+      })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      expect(nameHeader.attributes('aria-sort')).toBe('descending')
+    })
+
+    it('sets aria-sort to none on an inactive sortable column', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      expect(nameHeader.attributes('aria-sort')).toBe('none')
+    })
+  })
+
+  describe('selection', () => {
+    it('does not render checkboxes when selectable is false', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+    })
+
+    it('renders a checkbox per row and one in the header when selectable', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+      })
+      const checkboxes = wrapper.findAll('input[type="checkbox"]')
+      expect(checkboxes).toHaveLength(rows.length + 1)
+    })
+
+    it('emits update:modelValue with all indices when select-all is clicked', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+      })
+      const headerCheckbox = wrapper.find('input[type="checkbox"]')
+      await headerCheckbox.setValue(true)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[0, 1, 2]])
+    })
+
+    it('emits update:modelValue with empty array when deselecting all', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [0, 1, 2] },
+      })
+      const headerCheckbox = wrapper.find('input[type="checkbox"]')
+      await headerCheckbox.setValue(false)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[]])
+    })
+
+    it('emits update:modelValue when a row checkbox is changed', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+      })
+      const rowCheckboxes = wrapper.findAll('input[type="checkbox"]').slice(1)
+      await rowCheckboxes[0].setValue(true)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[0]])
+    })
+
+    it('removes index from selection when an already-selected row checkbox is changed', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [0, 1] },
+      })
+      const rowCheckboxes = wrapper.findAll('input[type="checkbox"]').slice(1)
+      await rowCheckboxes[0].setValue(false)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[1]])
+    })
+  })
+
+  describe('row click selection', () => {
+    it('selects a row when clicking on it', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+      })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[0].trigger('click')
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[0]])
+    })
+
+    it('does not emit selection when clicking a button inside a row', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+        slots: { 'cell-name': '<button>action</button>' },
+      })
+      const button = wrapper.find('button')
+      await button.trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('does not emit selection when clicking a link inside a row', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+        slots: { 'cell-name': '<a href="#">link</a>' },
+      })
+      const link = wrapper.find('a')
+      await link.trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('does not select when selectable is false', async () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[0].trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+  })
+
+  describe('keyboard navigation', () => {
+    it('moves focus to next row on ArrowDown', async () => {
+      const wrapper = mount(Table, { props: { columns, rows }, attachTo: document.body })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[0].trigger('keydown', { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(dataRows[1].element)
+      wrapper.unmount()
+    })
+
+    it('moves focus to previous row on ArrowUp', async () => {
+      const wrapper = mount(Table, { props: { columns, rows }, attachTo: document.body })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[1].trigger('keydown', { key: 'ArrowUp' })
+      expect(document.activeElement).toBe(dataRows[0].element)
+      wrapper.unmount()
+    })
+  })
+})