@nexxtmove/ui 0.1.28 → 0.1.30

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,9 +2,11 @@
   "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",
+  "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",
   "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",
@@ -14,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,9 +2,11 @@
 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'
+export { default as NexxtDropdownButton } from './components/DropdownButton/DropdownButton.vue'
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'
@@ -14,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'