@nexxtmove/ui 0.1.53 → 0.1.54

package/dist/nuxt.js

@@ -1,41 +1,42 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", u = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", r = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", d = "components/Chip/Chip.vue", l = "components/Combobox/Combobox.vue", v = "components/ContactInfoCard/ContactInfoCard.vue", C = "components/CustomerJourneyTile/CustomerJourneyTile.vue", N = "components/DatePicker/DatePicker.vue", T = "components/DoughnutChart/DoughnutChart.vue", b = "components/DropdownButton/DropdownButton.vue", P = "components/Header/Header.vue", S = "components/Icon/Icon.vue", h = "components/InfoBlock/InfoBlock.vue", I = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", g = "components/Pagination/Pagination.vue", y = "components/PresenceIndicator/PresenceIndicator.vue", M = "components/ProgressBar/ProgressBar.vue", k = "components/PropertyCard/PropertyCard.vue", B = "components/PropertyListing/PropertyListing.vue", D = "components/SocialIcons/SocialIcons.vue", A = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", H = "components/SocialMediaTemplate/SocialMediaTemplate.vue", w = "components/SocialMediaType/SocialMediaType.vue", E = "components/Source/Source.vue", F = "components/StepperHeader/StepperHeader.vue", J = "components/TabbedContent/TabbedContent.vue", L = "components/Table/Table.vue", j = "components/Tabs/Tabs.vue", $ = "components/TimelineEvent/TimelineEvent.vue", K = "components/TimelinePhaseblock/TimelinePhaseblock.vue", O = "components/Tooltip/Tooltip.vue", U = {
+const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", m = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", r = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", d = "components/Chip/Chip.vue", l = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", T = "components/DoughnutChart/DoughnutChart.vue", P = "components/DropdownButton/DropdownButton.vue", S = "components/Header/Header.vue", h = "components/Icon/Icon.vue", I = "components/InfoBlock/InfoBlock.vue", f = "components/InputField/InputField.vue", g = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", k = "components/ProgressBar/ProgressBar.vue", B = "components/PropertyCard/PropertyCard.vue", D = "components/PropertyListing/PropertyListing.vue", A = "components/SocialIcons/SocialIcons.vue", H = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", w = "components/SocialMediaTemplate/SocialMediaTemplate.vue", E = "components/SocialMediaType/SocialMediaType.vue", F = "components/Source/Source.vue", J = "components/StepperHeader/StepperHeader.vue", L = "components/TabbedContent/TabbedContent.vue", j = "components/Table/Table.vue", $ = "components/Tabs/Tabs.vue", K = "components/TimelineEvent/TimelineEvent.vue", O = "components/TimelinePhaseblock/TimelinePhaseblock.vue", U = "components/Tooltip/Tooltip.vue", _ = {
   NexxtAnimatedNumber: x,
   NexxtAvatar: i,
-  NexxtButton: u,
-  NexxtCalendar: m,
+  NexxtButton: m,
+  NexxtCalendar: u,
   NexxtCard: r,
   NexxtCheckbox: p,
   NexxtChip: d,
   NexxtCombobox: l,
-  NexxtContactInfoCard: v,
-  NexxtCustomerJourneyTile: C,
-  NexxtDatePicker: N,
+  NexxtComboboxPanel: v,
+  NexxtContactInfoCard: C,
+  NexxtCustomerJourneyTile: N,
+  NexxtDatePicker: b,
   NexxtDoughnutChart: T,
-  NexxtDropdownButton: b,
-  NexxtHeader: P,
-  NexxtIcon: S,
-  NexxtInfoBlock: h,
-  NexxtInputField: I,
-  NexxtModal: f,
-  NexxtPagination: g,
-  NexxtPresenceIndicator: y,
-  NexxtProgressBar: M,
-  NexxtPropertyCard: k,
-  NexxtPropertyListing: B,
-  NexxtSocialIcons: D,
-  NexxtSocialMediaCustomTemplate: A,
-  NexxtSocialMediaTemplate: H,
-  NexxtSocialMediaType: w,
-  NexxtSource: E,
-  NexxtStepperHeader: F,
-  NexxtTabbedContent: J,
-  NexxtTable: L,
-  NexxtTabs: j,
-  NexxtTimelineEvent: $,
-  NexxtTimelinePhaseblock: K,
-  NexxtTooltip: O
-}, q = c({
+  NexxtDropdownButton: P,
+  NexxtHeader: S,
+  NexxtIcon: h,
+  NexxtInfoBlock: I,
+  NexxtInputField: f,
+  NexxtModal: g,
+  NexxtPagination: y,
+  NexxtPresenceIndicator: M,
+  NexxtProgressBar: k,
+  NexxtPropertyCard: B,
+  NexxtPropertyListing: D,
+  NexxtSocialIcons: A,
+  NexxtSocialMediaCustomTemplate: H,
+  NexxtSocialMediaTemplate: w,
+  NexxtSocialMediaType: E,
+  NexxtSource: F,
+  NexxtStepperHeader: J,
+  NexxtTabbedContent: L,
+  NexxtTable: j,
+  NexxtTabs: $,
+  NexxtTimelineEvent: K,
+  NexxtTimelinePhaseblock: O,
+  NexxtTooltip: U
+}, z = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -47,7 +48,7 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(U))
+    for (const [t, n] of Object.entries(_))
       s({
         name: t,
         export: "default",
@@ -66,5 +67,5 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   }
 });
 export {
-  q as default
+  z as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Chip/Chip.vue

@@ -2,41 +2,54 @@
 import { computed } from 'vue'
 
 interface NexxtChipProps {
-  variant?: 'default' | 'warning' | 'success' | 'danger' | 'ghost'
+  variant?: 'default' | 'warning' | 'success' | 'danger'
+  ghost?: boolean
 }
 
 defineOptions({
   name: 'NexxtChip',
 })
 
-const { variant = 'default' } = defineProps<NexxtChipProps>()
+const { variant = 'default', ghost = false } = defineProps<NexxtChipProps>()
 
-const backgroundColor = computed(() => {
+const styles = computed(() => {
+  if (ghost) {
+    switch (variant) {
+      case 'warning':
+        return { bg: 'bg-orange-50', border: 'border border-orange-500', text: 'text-orange-500' }
+      case 'success':
+        return { bg: 'bg-green-50', border: 'border border-green-500', text: 'text-green-500' }
+      case 'danger':
+        return { bg: 'bg-brick-100/20', border: 'border border-brick-500', text: 'text-brick-500' }
+      default:
+        return {
+          bg: 'bg-cornflower-blue-50',
+          border: 'border border-cornflower-blue-500',
+          text: 'text-cornflower-blue-500',
+        }
+    }
+  }
   switch (variant) {
     case 'warning':
-      return 'bg-orange-500'
+      return { bg: 'bg-orange-500', border: '', text: 'text-white' }
     case 'success':
-      return 'bg-green-500'
+      return { bg: 'bg-green-500', border: '', text: 'text-white' }
     case 'danger':
-      return 'bg-brick-500'
-    case 'ghost':
-      return 'bg-cornflower-blue-50'
+      return { bg: 'bg-brick-500', border: '', text: 'text-white' }
     default:
-      return 'bg-cornflower-blue-600'
+      return { bg: 'bg-cornflower-blue-600', border: '', text: 'text-white' }
   }
 })
 </script>
 
 <template>
   <span
-    class="inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px] px-4"
-    :class="[backgroundColor, variant === 'ghost' ? 'border border-cornflower-blue-500' : '']"
+    class="inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px]"
+    :class="[styles.bg, styles.border, $slots.close ? 'pr-2 pl-4' : 'px-4']"
   >
-    <span
-      class="justify-start text-center extra-small-semibold"
-      :class="variant === 'ghost' ? 'text-cornflower-blue-500' : 'text-white'"
-    >
+    <span class="justify-start text-center extra-small-semibold" :class="styles.text">
       <slot>Chip</slot>
+      <slot v-if="$slots.close" name="close"></slot>
     </span>
   </span>
 </template>

package/src/components/Combobox/Combobox.vue

@@ -1,17 +1,16 @@
 <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'
+import ComboboxPanel from '../ComboboxPanel/ComboboxPanel.vue'
+import type { ComboboxOptions } from '../ComboboxPanel/combobox-types'
 
-interface NexxtComboboxProps {
+type NexxtComboboxProps = {
   variant?: InstanceType<typeof NexxtButton>['variant']
   icon?: InstanceType<typeof NexxtIcon>['name']
   placeholder?: string
   placement?: 'left' | 'right'
-  options: (string | { label: string; value: string | number })[]
-}
+} & ComboboxOptions
 
 const props = defineProps<NexxtComboboxProps>()
 
@@ -25,43 +24,13 @@ const {
 const selected = defineModel<(string | number)[]>({ default: [] })
 
 const isOpen = ref(false)
-const inputFieldRef = ref<InstanceType<typeof NexxtInputField> | null>(null)
+const panelRef = ref<InstanceType<typeof ComboboxPanel> | 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()
+    panelRef.value?.focus()
   }
 })
 
@@ -108,74 +77,23 @@ const transitionClasses = computed(() => {
       aria-haspopup="listbox"
       @click="isOpen = !isOpen"
     >
-      <span class="flex gap-2"><slot>Combobox</slot><NexxtIcon name="chevron-down" /> </span>
+      <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-lg border border-gray-200 bg-white whitespace-nowrap"
+        class="absolute top-full z-10 mt-2.5"
         :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>
+        <ComboboxPanel
+          ref="panelRef"
+          v-model="selected"
+          :options="props.options"
+          :allow-new="props.allowNew"
+          :icon
+          :placeholder
+          :floating="false"
+        />
       </div>
     </Transition>
   </div>

package/src/components/ComboboxPanel/ComboboxPanel.vue

@@ -0,0 +1,293 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import NexxtChip from '../Chip/Chip.vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtInputField from '../InputField/InputField.vue'
+import type { ComboboxOptions } from './combobox-types'
+
+type ComboboxPanelProps = {
+  icon?: InstanceType<typeof NexxtIcon>['name']
+  placeholder?: string
+  floating?: boolean
+} & ComboboxOptions
+
+const props = defineProps<ComboboxPanelProps>()
+
+const { icon = 'tag', placeholder = 'Zoeken...', floating = true } = props
+
+const selected = defineModel<(string | number)[]>({ default: [] })
+
+const inputFieldRef = ref<InstanceType<typeof NexxtInputField> | null>(null)
+const wrapperRef = ref<HTMLElement | null>(null)
+const search = ref('')
+const isFocused = ref(false)
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
+    isFocused.value = false
+  }
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') isFocused.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+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), isCustom: !match }
+  }),
+)
+
+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 showAddHint = computed(() => {
+  if (!props.allowNew || !search.value) return false
+  if (filteredOptions.value.length > 0) return false
+  const trimmed = search.value.trim().toLowerCase()
+  return !selectedLabels.value.some((item) => item.label.toLowerCase() === trimmed)
+})
+
+const showSuggestions = computed(() => filteredOptions.value.length > 0 || showAddHint.value)
+
+const selectOption = (option: string | { label: string; value: string | number }) => {
+  selected.value = [...selected.value, getValue(option)]
+  search.value = ''
+}
+
+const handleEnter = () => {
+  if (filteredOptions.value.length === 1) {
+    selectOption(filteredOptions.value[0])
+  } else if (props.allowNew) {
+    addNewItem()
+  }
+}
+
+const addNewItem = () => {
+  const trimmed = search.value.trim()
+  if (!trimmed) return
+  const lower = trimmed.toLowerCase()
+  const alreadySelected = selectedLabels.value.some((item) => item.label.toLowerCase() === lower)
+  const existsAsOption = props.options.some((o) => getLabel(o).toLowerCase() === lower)
+  if (alreadySelected || existsAsOption) return
+  selected.value = [...selected.value, trimmed]
+  search.value = ''
+}
+
+const removeSelected = (val: string | number) => {
+  selected.value = selected.value.filter((v) => v !== val)
+}
+
+const focus = () => {
+  inputFieldRef.value?.$el.querySelector('input')?.focus()
+}
+
+defineExpose({ focus })
+</script>
+
+<template>
+  <!-- Standalone (floating=true): input+chips are a static card, suggestions float below -->
+  <div v-if="floating" ref="wrapperRef" class="relative min-w-80 whitespace-nowrap">
+    <div class="rounded-lg border border-gray-200 bg-white">
+      <div class="p-2">
+        <NexxtInputField
+          ref="inputFieldRef"
+          v-model="search"
+          class="w-full"
+          :left-icon="icon"
+          :placeholder
+          :aria-label="placeholder"
+          @focus="isFocused = true"
+          @keydown.enter="handleEnter"
+        />
+      </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 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 :ghost="true" class="group" :variant="item.isCustom ? 'success' : 'default'">
+              {{ item.label }}
+              <template #close>
+                <span>
+                  <NexxtIcon
+                    name="xmark"
+                    class="text-xs group-hover:text-brick-500"
+                    aria-hidden="true"
+                  />
+                </span>
+              </template>
+            </NexxtChip>
+          </button>
+        </TransitionGroup>
+      </Transition>
+    </div>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out origin-top"
+      leave-active-class="transition-all duration-150 ease-in origin-top"
+      enter-from-class="opacity-0 scale-95 -translate-y-2"
+      leave-to-class="opacity-0 scale-95 -translate-y-2"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-from-class="opacity-100 scale-100 translate-y-0"
+    >
+      <div
+        v-if="isFocused && showSuggestions"
+        class="absolute top-full left-0 z-10 mt-1 w-full rounded-lg border border-gray-200 bg-white"
+        @mousedown.prevent
+      >
+        <ul
+          role="listbox"
+          aria-multiselectable="true"
+          tabindex="0"
+          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 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
+          v-if="showAddHint"
+          class="flex grow-0 items-center gap-4 border-t border-gray-100 px-6 py-3 whitespace-normal text-gray-700"
+          @click="addNewItem()"
+        >
+          <NexxtIcon name="plus" class="cursor-pointer small-normal" aria-hidden="true" />
+          <div>
+            Druk op Enter om "<span class="small-semibold text-gray-800">{{ search }}</span
+            >" als kenmerk toe te voegen
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+
+  <!-- Inside Combobox (floating=false): everything in one flat card -->
+  <div v-else class="min-w-80 rounded-lg border border-gray-200 bg-white whitespace-nowrap">
+    <div class="p-2">
+      <NexxtInputField
+        ref="inputFieldRef"
+        v-model="search"
+        class="w-full"
+        :left-icon="icon"
+        :placeholder
+        @keydown.enter="handleEnter"
+      />
+    </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 :ghost="true" class="group" :variant="item.isCustom ? 'success' : 'default'">
+            {{ item.label }}
+            <template #close>
+              <span>
+                <NexxtIcon
+                  name="xmark"
+                  class="text-xs group-hover:text-brick-500"
+                  aria-hidden="true"
+                />
+              </span>
+            </template>
+          </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
+      v-if="showAddHint"
+      class="flex grow-0 items-center gap-4 border-t border-gray-100 px-6 py-3 whitespace-normal text-gray-700"
+      @click="addNewItem()"
+    >
+      <NexxtIcon name="plus" class="cursor-pointer small-normal" aria-hidden="true" />
+      <div>
+        Druk op Enter om "<span class="small-semibold text-gray-800">{{ search }}</span
+        >" als kenmerk toe te voegen
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/ComboboxPanel/combobox-types.ts

@@ -0,0 +1,5 @@
+export type ComboboxOption = string | { label: string; value: string | number }
+
+export type ComboboxOptions =
+  | { options: string[]; allowNew?: boolean }
+  | { options: { label: string; value: string | number }[]; allowNew?: never }

package/src/components/ContactInfoCard/ContactInfoCard.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="rounded-xl border border-gray-200">
-    <div class="border-b border-gray-200 px-8 py-2.5">
+    <div class="border-b border-gray-200 py-2.5 pr-3 pl-8">
       <slot name="title">Title</slot>
     </div>
     <div class="px-8 py-5">

package/src/components.json

@@ -7,6 +7,7 @@
   "NexxtCheckbox": "components/Checkbox/Checkbox.vue",
   "NexxtChip": "components/Chip/Chip.vue",
   "NexxtCombobox": "components/Combobox/Combobox.vue",
+  "NexxtComboboxPanel": "components/ComboboxPanel/ComboboxPanel.vue",
   "NexxtContactInfoCard": "components/ContactInfoCard/ContactInfoCard.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",

package/src/index.ts

@@ -7,6 +7,7 @@ export { default as NexxtCard } from './components/Card/Card.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 NexxtComboboxPanel } from './components/ComboboxPanel/ComboboxPanel.vue'
 export { default as NexxtContactInfoCard } from './components/ContactInfoCard/ContactInfoCard.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'