@nexxtmove/ui 0.1.45 → 0.1.47

package/dist/nuxt.js

@@ -1,31 +1,32 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", b = "components/Modal/Modal.vue", f = "components/Pagination/Pagination.vue", h = "components/ProgressBar/ProgressBar.vue", M = "components/SocialIcons/SocialIcons.vue", P = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", k = "components/SocialMediaTemplate/SocialMediaTemplate.vue", B = "components/SocialMediaType/SocialMediaType.vue", I = "components/StepperHeader/StepperHeader.vue", g = "components/Table/Table.vue", y = "components/TimelineEvent/TimelineEvent.vue", A = "components/TimelinePhaseblock/TimelinePhaseblock.vue", D = "components/Tooltip/Tooltip.vue", H = {
+const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar/Avatar.vue", m = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/Combobox/Combobox.vue", d = "components/CustomerJourneyTile/CustomerJourneyTile.vue", v = "components/DatePicker/DatePicker.vue", N = "components/DropdownButton/DropdownButton.vue", T = "components/Header/Header.vue", C = "components/Icon/Icon.vue", b = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", h = "components/Pagination/Pagination.vue", M = "components/ProgressBar/ProgressBar.vue", P = "components/SocialIcons/SocialIcons.vue", k = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", B = "components/SocialMediaTemplate/SocialMediaTemplate.vue", I = "components/SocialMediaType/SocialMediaType.vue", g = "components/StepperHeader/StepperHeader.vue", y = "components/Table/Table.vue", A = "components/TimelineEvent/TimelineEvent.vue", D = "components/TimelinePhaseblock/TimelinePhaseblock.vue", H = "components/Tooltip/Tooltip.vue", w = {
   NexxtAnimatedNumber: i,
-  NexxtAvatar: m,
-  NexxtButton: x,
+  NexxtAvatar: x,
+  NexxtButton: m,
   NexxtCalendar: u,
   NexxtCheckbox: p,
   NexxtChip: l,
-  NexxtCustomerJourneyTile: r,
-  NexxtDatePicker: d,
-  NexxtDropdownButton: v,
-  NexxtHeader: N,
-  NexxtIcon: T,
-  NexxtInfoBlock: C,
+  NexxtCombobox: r,
+  NexxtCustomerJourneyTile: d,
+  NexxtDatePicker: v,
+  NexxtDropdownButton: N,
+  NexxtHeader: T,
+  NexxtIcon: C,
+  NexxtInfoBlock: b,
   NexxtInputField: S,
-  NexxtModal: b,
-  NexxtPagination: f,
-  NexxtProgressBar: h,
-  NexxtSocialIcons: M,
-  NexxtSocialMediaCustomTemplate: P,
-  NexxtSocialMediaTemplate: k,
-  NexxtSocialMediaType: B,
-  NexxtStepperHeader: I,
-  NexxtTable: g,
-  NexxtTimelineEvent: y,
-  NexxtTimelinePhaseblock: A,
-  NexxtTooltip: D
-}, E = c({
+  NexxtModal: f,
+  NexxtPagination: h,
+  NexxtProgressBar: M,
+  NexxtSocialIcons: P,
+  NexxtSocialMediaCustomTemplate: k,
+  NexxtSocialMediaTemplate: B,
+  NexxtSocialMediaType: I,
+  NexxtStepperHeader: g,
+  NexxtTable: y,
+  NexxtTimelineEvent: A,
+  NexxtTimelinePhaseblock: D,
+  NexxtTooltip: H
+}, F = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -37,7 +38,7 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(H))
+    for (const [t, n] of Object.entries(w))
       s({
         name: t,
         export: "default",
@@ -56,5 +57,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
   }
 });
 export {
-  E as default
+  F as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,12 +34,12 @@
     "@eslint/js": "^9.39.2",
     "@nuxt/kit": "^4.3.1",
     "@nuxt/schema": "^4.3.1",
-    "@storybook/addon-a11y": "^10.3.3",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/addon-vitest": "^10.3.3",
-    "@storybook/builder-vite": "^10.3.3",
-    "@storybook/vue3-vite": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/vue3-vite": "^10.3.5",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.8",
@@ -53,7 +53,7 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "10.3.3",
+    "eslint-plugin-storybook": "10.3.5",
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^17.0.0",
     "jsdom": "^28.1.0",
@@ -62,7 +62,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.5",
     "typescript-eslint": "^8.52.0",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",

package/src/components/Combobox/Combobox.vue

@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import NexxtButton from '../Button/Button.vue'
+import NexxtChip from '../Chip/Chip.vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtInputField from '../InputField/InputField.vue'
+
+interface NexxtComboboxProps {
+  variant?: InstanceType<typeof NexxtButton>['variant']
+  icon?: InstanceType<typeof NexxtIcon>['name']
+  placeholder?: string
+  placement?: 'left' | 'right'
+  options: (string | { label: string; value: string | number })[]
+}
+
+const props = defineProps<NexxtComboboxProps>()
+
+const {
+  variant = 'secondary',
+  placement = 'right',
+  icon = 'tag',
+  placeholder = 'Zoeken...',
+} = props
+
+const selected = defineModel<(string | number)[]>({ default: [] })
+
+const isOpen = ref(false)
+const inputFieldRef = ref<InstanceType<typeof NexxtInputField> | null>(null)
+const wrapperRef = ref<HTMLElement | null>(null)
+const search = ref('')
+
+const getLabel = (option: string | { label: string; value: string | number }) =>
+  typeof option === 'string' ? option : option.label
+
+const getValue = (option: string | { label: string; value: string | number }) =>
+  typeof option === 'string' ? option : option.value
+
+const selectedLabels = computed(() =>
+  selected.value.map((val) => {
+    const match = props.options.find((o) => getValue(o) === val)
+    return { value: val, label: match ? getLabel(match) : String(val) }
+  }),
+)
+
+const filteredOptions = computed(() => {
+  const q = search.value.toLowerCase()
+  return props.options
+    .filter((o) => !selected.value.includes(getValue(o)))
+    .filter((o) => getLabel(o).toLowerCase().includes(q))
+})
+
+const selectOption = (option: string | { label: string; value: string | number }) => {
+  selected.value = [...selected.value, getValue(option)]
+  search.value = ''
+}
+
+const removeSelected = (val: string | number) => {
+  selected.value = selected.value.filter((v) => v !== val)
+}
+
+watch(isOpen, async (open) => {
+  if (open) {
+    await nextTick()
+    inputFieldRef.value?.$el.querySelector('input')?.focus()
+  }
+})
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+const transitionClasses = computed(() => {
+  const origin = placement === 'right' ? 'origin-top-right' : 'origin-top-left'
+  return {
+    enterActiveClass: `transition-all duration-200 ease-out ${origin}`,
+    leaveActiveClass: `transition-all duration-150 ease-in ${origin}`,
+    enterFromClass: 'opacity-0 scale-95 -translate-y-3',
+    leaveToClass: 'opacity-0 scale-95 -translate-y-3',
+    enterToClass: 'opacity-100 scale-100 translate-y-0',
+    leaveFromClass: 'opacity-100 scale-100 translate-y-0',
+  }
+})
+</script>
+
+<template>
+  <div ref="wrapperRef" class="relative">
+    <NexxtButton
+      :variant
+      :icon
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="isOpen = !isOpen"
+    >
+      <span class="flex gap-2"><slot>Combobox</slot><NexxtIcon name="chevron-down" /> </span>
+    </NexxtButton>
+    <Transition v-bind="transitionClasses">
+      <div
+        v-if="isOpen"
+        class="absolute top-full z-10 mt-2.5 min-w-80 rounded-md border border-gray-200 bg-white whitespace-nowrap"
+        :class="placement === 'right' ? 'right-0' : 'left-0'"
+      >
+        <div class="p-2">
+          <NexxtInputField
+            ref="inputFieldRef"
+            v-model="search"
+            class="w-full"
+            :left-icon="icon"
+            :placeholder
+          />
+        </div>
+        <Transition
+          enter-active-class="transition-all duration-200 ease-out overflow-hidden"
+          enter-from-class="max-h-0 opacity-0"
+          enter-to-class="max-h-40 opacity-100"
+          leave-active-class="transition-all duration-150 ease-in overflow-hidden"
+          leave-from-class="max-h-40 opacity-100"
+          leave-to-class="max-h-0 opacity-0"
+        >
+          <TransitionGroup
+            v-if="selectedLabels.length > 0"
+            tag="div"
+            class="flex flex-wrap gap-1 border-b border-gray-200 p-2 pt-0"
+            enter-active-class="transition-all duration-150 ease-out"
+            enter-from-class="opacity-0 scale-75"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition-all duration-100 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-75"
+          >
+            <button
+              v-for="item in selectedLabels"
+              :key="item.value"
+              class="origin-left cursor-pointer"
+              :aria-label="`Verwijder ${item.label}`"
+              @click="removeSelected(item.value)"
+            >
+              <NexxtChip variant="ghost">
+                {{ item.label }}
+                <span>
+                  <NexxtIcon name="xmark" class="text-xs" aria-hidden="true" />
+                </span>
+              </NexxtChip>
+            </button>
+          </TransitionGroup>
+        </Transition>
+        <ul
+          role="listbox"
+          aria-multiselectable="true"
+          class="max-h-56 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-cornflower-blue-200 [&::-webkit-scrollbar-thumb:hover]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
+        >
+          <li
+            v-for="option in filteredOptions"
+            :key="getValue(option)"
+            role="option"
+            aria-selected="false"
+            class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-6 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
+            @click="selectOption(option)"
+          >
+            {{ getLabel(option) }}
+          </li>
+        </ul>
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/DropdownButton/DropdownButton.vue

@@ -46,7 +46,26 @@ const emit = defineEmits<{
 
 const isOpen = ref(false)
 const wrapperRef = ref<HTMLElement | null>(null)
-const checkedItems = ref<Record<string, boolean>>({})
+const flatItems = computed<NexxtDropdownButton[]>(() =>
+  options.length > 0 && 'items' in options[0]
+    ? (options as NexxtDropdownButtonGroup[]).flatMap((g) => g.items)
+    : (options as NexxtDropdownButton[]),
+)
+
+const toggledItems = ref<Record<string, boolean>>({})
+
+const checkedItems = computed(() =>
+  Object.fromEntries(
+    flatItems.value
+      .filter((item) => item.checkbox)
+      .map((item) => [
+        item.label,
+        item.label in toggledItems.value
+          ? toggledItems.value[item.label]
+          : (item.selected ?? false),
+      ]),
+  ),
+)
 
 const handleAction = (action: string | (() => void)) => {
   if (typeof action === 'function') {
@@ -63,7 +82,7 @@ const toggleDropdown = () => {
 const handleOptionClick = (option: NexxtDropdownButton) => {
   if (option.checkbox) {
     const newValue = !checkedItems.value[option.label]
-    checkedItems.value[option.label] = newValue
+    toggledItems.value[option.label] = newValue
     emit('checkboxChange', option.label, newValue)
   } else {
     isOpen.value = false
@@ -181,8 +200,8 @@ const transitionClasses = computed(() => {
         <template v-for="(group, groupIndex) in groupedOptions" :key="group.title || groupIndex">
           <div
             v-if="group.title"
-            class="border-b border-gray-100 px-4 py-1.5 extra-small-normal text-gray-600"
-            :class="groupIndex > 0 ? 'mt-1 border-t pt-2' : ''"
+            class="border-b border-gray-100 px-6 py-3 extra-small-normal text-gray-600"
+            :class="groupIndex > 0 ? 'border-t pt-2' : ''"
           >
             {{ group.title }}
           </div>
@@ -191,7 +210,7 @@ const transitionClasses = computed(() => {
             :key="option.label"
             :role="option.checkbox ? 'menuitemcheckbox' : 'menuitem'"
             :aria-checked="option.checkbox ? (checkedItems[option.label] ?? false) : undefined"
-            class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
+            class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-6 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
             :class="!option.checkbox && option.selected ? 'bg-cornflower-blue-100' : ''"
             @click="handleOptionClick(option)"
           >

package/src/components/Table/Table.vue

@@ -113,148 +113,145 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
 
 <template>
   <div class="flex flex-col gap-3">
-    <div class="overflow-x-auto">
-      <div
-        role="grid"
-        :aria-colcount="columns.length + (selectable ? 1 : 0)"
-        :aria-rowcount="rows.length + 1"
-        class="min-w-full"
-      >
-        <div class="sticky top-0 z-10 mb-0.5">
-          <div v-if="$slots.toolbar">
-            <slot name="toolbar" />
+    <div
+      role="grid"
+      :aria-colcount="columns.length + (selectable ? 1 : 0)"
+      :aria-rowcount="rows.length + 1"
+      class="min-w-full"
+    >
+      <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
-            class="grid rounded-md bg-gray-50"
-            :style="{ gridTemplateColumns: gridTemplate }"
-            role="row"
-            aria-rowindex="1"
+            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)"
           >
-            <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
+            <span :class="sortKey === column.key ? 'text-cornflower-blue-600' : ''">{{
+              column.label
+            }}</span>
+            <Icon
+              v-if="column.sortable"
+              :name="
+                sortKey === column.key
+                  ? sortDirection === 'asc'
+                    ? 'angle-down'
+                    : 'angle-up'
+                  : 'angles-up-down'
               "
-              :tabindex="column.sortable ? 0 : undefined"
-              @click="handleSort(column)"
-              @keydown.enter.prevent="handleSort(column)"
-              @keydown.space.prevent="handleSort(column)"
-            >
-              <span :class="sortKey === column.key ? 'text-cornflower-blue-600' : ''">{{
-                column.label
-              }}</span>
-              <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>
+              class="shrink-0 text-xs"
+              :class="sortKey === column.key ? 'text-cornflower-blue-600' : 'text-slate-400'"
+            />
           </div>
         </div>
+      </div>
 
-        <div role="rowgroup" class="relative">
+      <div role="rowgroup" class="relative">
+        <div
+          v-for="(row, rowIndex) in rows"
+          :key="rowIndex"
+          ref="rowRefs"
+          class="grid border-b border-gray-100 transition-colors duration-150 hover:bg-cornflower-blue-50 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:rounded-md': !isRowSelected(rows[rowIndex]),
+              'border-white/80 bg-cornflower-blue-100': selectable && isRowSelected(rows[rowIndex]),
+              'border-transparent': selectable && isRowSelected(rows[rowIndex + 1]),
+            },
+            getRowRoundedClass(rowIndex),
+          ]"
+          :style="{ gridTemplateColumns: gridTemplate }"
+          role="row"
+          :aria-rowindex="rowIndex + 2"
+          :aria-selected="selectable ? isRowSelected(row) : undefined"
+          tabindex="0"
+          @click="handleRowClick($event, rowIndex)"
+          @keydown="handleRowKeydown($event, rowIndex)"
+        >
           <div
-            v-for="(row, rowIndex) in rows"
-            :key="rowIndex"
-            ref="rowRefs"
-            class="grid border-b border-gray-100 transition-colors duration-150 hover:bg-cornflower-blue-50 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:rounded-md': !isRowSelected(rows[rowIndex]),
-                'border-white/80 bg-cornflower-blue-100':
-                  selectable && isRowSelected(rows[rowIndex]),
-                'border-transparent': selectable && isRowSelected(rows[rowIndex + 1]),
-              },
-              getRowRoundedClass(rowIndex),
-            ]"
-            :style="{ gridTemplateColumns: gridTemplate }"
-            role="row"
-            :aria-rowindex="rowIndex + 2"
-            :aria-selected="selectable ? isRowSelected(row) : undefined"
-            tabindex="0"
-            @click="handleRowClick($event, rowIndex)"
-            @keydown="handleRowKeydown($event, rowIndex)"
+            v-if="selectable"
+            class="flex items-center justify-center px-2 py-4"
+            role="gridcell"
+            :aria-colindex="1"
           >
-            <div
-              v-if="selectable"
-              class="flex items-center justify-center px-2 py-4"
-              role="gridcell"
-              :aria-colindex="1"
-            >
-              <Checkbox
-                :model-value="isRowSelected(row)"
-                :aria-label="`Select row ${rowIndex + 1}`"
-                @update:model-value="toggleRow(row)"
-              />
-            </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="cellSlotName(column.key)" :row="row" :value="rowValue(row, column.key)">
-                {{ rowValue(row, column.key) }}
-              </slot>
-            </div>
+            <Checkbox
+              :model-value="isRowSelected(row)"
+              :aria-label="`Select row ${rowIndex + 1}`"
+              @update:model-value="toggleRow(row)"
+            />
           </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
+            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="cellSlotName(column.key)" :row="row" :value="rowValue(row, column.key)">
+              {{ rowValue(row, column.key) }}
+            </slot>
           </div>
+        </div>
 
-          <Transition
-            enter-active-class="transition-opacity duration-200"
-            leave-active-class="transition-opacity duration-200"
-            enter-from-class="opacity-0"
-            leave-to-class="opacity-0"
-          >
-            <div
-              v-if="loading"
-              data-testid="loading-overlay"
-              class="absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
-            >
-              <slot name="loading"
-                ><Icon name="spinner-third" class="fa-spin text-3xl text-purple-500"
-              /></slot>
-            </div>
-          </Transition>
+        <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>
+
+        <Transition
+          enter-active-class="transition-opacity duration-200"
+          leave-active-class="transition-opacity duration-200"
+          enter-from-class="opacity-0"
+          leave-to-class="opacity-0"
+        >
+          <div
+            v-if="loading"
+            data-testid="loading-overlay"
+            class="absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
+          >
+            <slot name="loading"
+              ><Icon name="spinner-third" class="fa-spin text-3xl text-purple-500"
+            /></slot>
+          </div>
+        </Transition>
       </div>
     </div>
   </div>

package/src/components.json

@@ -5,6 +5,7 @@
   "NexxtCalendar": "components/Calendar/Calendar.vue",
   "NexxtCheckbox": "components/Checkbox/Checkbox.vue",
   "NexxtChip": "components/Chip/Chip.vue",
+  "NexxtCombobox": "components/Combobox/Combobox.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
   "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",

package/src/index.ts

@@ -5,6 +5,7 @@ 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 NexxtCombobox } from './components/Combobox/Combobox.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'