@nexxtmove/ui 0.1.29 → 0.1.30

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()
+    })
+  })
+})

package/src/components/Table/Table.vue

@@ -0,0 +1,227 @@
+<script lang="ts" setup generic="TKey extends string">
+import { computed, ref } from 'vue'
+import Icon from '../Icon/Icon.vue'
+import Checkbox from '../Checkbox/Checkbox.vue'
+
+export interface TableColumn<K extends string = string> {
+  key: K
+  label: string
+  sortable?: boolean
+  width?: string
+}
+
+interface NexxtTableProps {
+  columns: TableColumn<TKey>[]
+  rows: Record<TKey, unknown>[]
+  sortKey?: TKey
+  sortDirection?: 'asc' | 'desc'
+  selectable?: boolean
+  modelValue?: number[]
+}
+
+const INTERACTIVE = ['a', 'button', 'input', 'select', 'textarea', 'label']
+
+defineOptions({ name: 'NexxtTable' })
+
+const props = withDefaults(defineProps<NexxtTableProps>(), {
+  sortDirection: 'asc',
+})
+const emit = defineEmits<{
+  sort: [key: string, direction: 'asc' | 'desc']
+  'update:modelValue': [selected: number[]]
+}>()
+
+const selected = computed(() => props.modelValue ?? [])
+
+const allSelected = computed(
+  () => props.rows.length > 0 && selected.value.length === props.rows.length,
+)
+const someSelected = computed(
+  () => selected.value.length > 0 && selected.value.length < props.rows.length,
+)
+
+const toggleAll = () => {
+  emit('update:modelValue', allSelected.value ? [] : props.rows.map((_, i) => i))
+}
+
+const toggleRow = (index: number) => {
+  const next = selected.value.includes(index)
+    ? selected.value.filter((i) => i !== index)
+    : [...selected.value, index]
+  emit('update:modelValue', next)
+}
+
+const columnTemplate = computed(() =>
+  props.columns.map((col) => `minmax(100px, ${col.width ?? '1fr'})`).join(' '),
+)
+
+const gridTemplate = computed(() =>
+  props.selectable ? `40px ${columnTemplate.value}` : columnTemplate.value,
+)
+
+const handleSort = (column: TableColumn) => {
+  if (!column.sortable) return
+  const newDirection =
+    props.sortKey === column.key && props.sortDirection === 'asc' ? 'desc' : 'asc'
+  emit('sort', column.key, newDirection)
+}
+
+const handleRowClick = (event: MouseEvent, rowIndex: number) => {
+  if (!props.selectable) return
+  const path = event.composedPath() as Element[]
+  const isInteractive = path.some(
+    (el) => el.tagName && INTERACTIVE.includes(el.tagName.toLowerCase()),
+  )
+  if (!isInteractive) toggleRow(rowIndex)
+}
+
+const getRowRoundedClass = (rowIndex: number) => {
+  if (!props.selectable || !selected.value.includes(rowIndex)) return ''
+  const prevSelected = selected.value.includes(rowIndex - 1)
+  const nextSelected = selected.value.includes(rowIndex + 1)
+  if (!prevSelected && !nextSelected) return 'rounded-md'
+  if (!prevSelected) return 'rounded-t-md'
+  if (!nextSelected) return 'rounded-b-md'
+  return ''
+}
+
+const rowRefs = ref<HTMLElement[]>([])
+
+const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    rowRefs.value[Math.min(rowIndex + 1, props.rows.length - 1)]?.focus()
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    rowRefs.value[Math.max(rowIndex - 1, 0)]?.focus()
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="overflow-auto">
+      <div
+        role="grid"
+        :aria-colcount="columns.length + (selectable ? 1 : 0)"
+        :aria-rowcount="rows.length + 1"
+        class="w-full min-w-max"
+      >
+        <div class="sticky top-0 z-10 mb-0.5">
+          <div v-if="$slots.toolbar">
+            <slot name="toolbar" />
+          </div>
+          <div
+            class="grid rounded-md bg-gray-50"
+            :style="{ gridTemplateColumns: gridTemplate }"
+            role="row"
+            aria-rowindex="1"
+          >
+            <div
+              v-if="selectable"
+              class="flex items-center justify-center px-2 py-3"
+              role="columnheader"
+              aria-colindex="1"
+            >
+              <Checkbox
+                :model-value="allSelected"
+                :indeterminate="someSelected"
+                aria-label="Select all rows"
+                @update:model-value="toggleAll"
+              />
+            </div>
+            <div
+              v-for="(column, colIndex) in columns"
+              :key="column.key"
+              class="flex items-center gap-1.5 px-4 py-3 heading-4 text-slate-700"
+              :class="{
+                'cursor-pointer select-none hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset':
+                  column.sortable,
+              }"
+              role="columnheader"
+              :aria-colindex="colIndex + (selectable ? 2 : 1)"
+              :aria-sort="
+                column.sortable
+                  ? sortKey === column.key
+                    ? sortDirection === 'asc'
+                      ? 'ascending'
+                      : 'descending'
+                    : 'none'
+                  : undefined
+              "
+              :tabindex="column.sortable ? 0 : undefined"
+              @click="handleSort(column)"
+              @keydown.enter.prevent="handleSort(column)"
+              @keydown.space.prevent="handleSort(column)"
+            >
+              {{ column.label }}
+              <Icon
+                v-if="column.sortable"
+                :name="
+                  sortKey === column.key
+                    ? sortDirection === 'asc'
+                      ? 'angle-down'
+                      : 'angle-up'
+                    : 'angles-up-down'
+                "
+                class="shrink-0 text-xs"
+                :class="sortKey === column.key ? 'text-cornflower-blue-600' : 'text-slate-400'"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div role="rowgroup">
+          <div
+            v-for="(row, rowIndex) in rows"
+            :key="rowIndex"
+            ref="rowRefs"
+            class="grid border-b border-gray-100 transition-colors duration-150 focus-visible:bg-slate-50 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset"
+            :class="[
+              {
+                'hover:bg-slate-50': selectable,
+                'border-white/80 bg-cornflower-blue-50': selectable && selected.includes(rowIndex),
+              },
+              getRowRoundedClass(rowIndex),
+            ]"
+            :style="{ gridTemplateColumns: gridTemplate }"
+            role="row"
+            :aria-rowindex="rowIndex + 2"
+            :aria-selected="selectable ? selected.includes(rowIndex) : undefined"
+            tabindex="0"
+            @click="handleRowClick($event, rowIndex)"
+            @keydown="handleRowKeydown($event, rowIndex)"
+          >
+            <div
+              v-if="selectable"
+              class="flex items-center justify-center px-2 py-4"
+              role="gridcell"
+              :aria-colindex="1"
+            >
+              <Checkbox
+                :model-value="selected.includes(rowIndex)"
+                :aria-label="`Select row ${rowIndex + 1}`"
+                @update:model-value="toggleRow(rowIndex)"
+              />
+            </div>
+            <div
+              v-for="(column, colIndex) in columns"
+              :key="column.key"
+              class="flex items-center truncate px-4 py-4 extra-small-normal text-slate-700"
+              role="gridcell"
+              :aria-colindex="colIndex + (selectable ? 2 : 1)"
+            >
+              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
+                {{ row[column.key] }}
+              </slot>
+            </div>
+          </div>
+
+          <div v-if="!rows.length" class="px-4 py-8 text-center text-sm text-slate-400" role="row">
+            <slot name="empty">Geen data beschikbaar</slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components.json

@@ -2,6 +2,7 @@
   "NexxtAnimatedNumber": "components/AnimatedNumber/AnimatedNumber.vue",
   "NexxtButton": "components/Button/Button.vue",
   "NexxtCalendar": "components/Calendar/Calendar.vue",
+  "NexxtCheckbox": "components/Checkbox/Checkbox.vue",
   "NexxtChip": "components/Chip/Chip.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
@@ -15,6 +16,7 @@
   "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",
   "NexxtSocialMediaType": "components/SocialMediaType/SocialMediaType.vue",
   "NexxtStepperHeader": "components/StepperHeader/StepperHeader.vue",
+  "NexxtTable": "components/Table/Table.vue",
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtTooltip": "components/Tooltip/Tooltip.vue"

package/src/index.ts

@@ -2,6 +2,7 @@
 export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue'
 export { default as NexxtButton } from './components/Button/Button.vue'
 export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
+export { default as NexxtCheckbox } from './components/Checkbox/Checkbox.vue'
 export { default as NexxtChip } from './components/Chip/Chip.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
@@ -15,6 +16,7 @@ export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMe
 export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'
 export { default as NexxtSocialMediaType } from './components/SocialMediaType/SocialMediaType.vue'
 export { default as NexxtStepperHeader } from './components/StepperHeader/StepperHeader.vue'
+export { default as NexxtTable } from './components/Table/Table.vue'
 export { default as NexxtTimelineEvent } from './components/TimelineEvent/TimelineEvent.vue'
 export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'
 export { default as NexxtTooltip } from './components/Tooltip/Tooltip.vue'