@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/organisms/Combobox/Combobox.test.ts

@@ -0,0 +1,512 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, ref, nextTick } from 'vue'
+import Combobox from './Combobox.vue'
+
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-start'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+const stubs = {
+  NexxtIcon: { template: '<span :data-name="name" />', props: ['name'] },
+  Teleport: { template: '<div><slot /></div>' },
+}
+
+const STRING_OPTIONS = ['Amsterdam', 'Rotterdam', 'Utrecht', 'Den Haag']
+const OBJECT_OPTIONS = [
+  { label: 'Amsterdam', value: 'AMS' },
+  { label: 'Rotterdam', value: 'RTM' },
+  { label: 'Utrecht', value: 'UTC' },
+]
+
+const mountCombobox = (props = {}, modelValue: (string | number)[] = []) =>
+  mount(Combobox, {
+    props: {
+      options: STRING_OPTIONS,
+      'onUpdate:modelValue': (v: (string | number)[]) => wrapper.setProps({ modelValue: v }),
+      modelValue,
+      ...props,
+    },
+    global: { stubs },
+    attachTo: document.body,
+  })
+
+let wrapper: ReturnType<typeof mountCombobox>
+
+const open = async (w = wrapper) => {
+  await w.find('button').trigger('click')
+  await nextTick()
+}
+
+describe('Combobox', () => {
+  describe('rendering', () => {
+    it('renders the trigger button', () => {
+      wrapper = mountCombobox()
+      expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('renders slot content in the trigger', () => {
+      wrapper = mount(Combobox, {
+        props: { options: STRING_OPTIONS },
+        slots: { default: 'Selecteer stad' },
+        global: { stubs },
+      }) as typeof wrapper
+      expect(wrapper.text()).toContain('Selecteer stad')
+    })
+
+    it('does not show the dropdown by default', () => {
+      wrapper = mountCombobox()
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    })
+
+    it('shows the dropdown after clicking the trigger', async () => {
+      wrapper = mountCombobox()
+      await open()
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    })
+
+    it('renders all options in the dropdown', async () => {
+      wrapper = mountCombobox()
+      await open()
+      const options = wrapper.findAll('[role="option"]')
+      expect(options).toHaveLength(STRING_OPTIONS.length)
+    })
+
+    it('renders object options using their label', async () => {
+      wrapper = mountCombobox({ options: OBJECT_OPTIONS })
+      await open()
+      expect(wrapper.text()).toContain('Amsterdam')
+      expect(wrapper.text()).toContain('Rotterdam')
+    })
+  })
+
+  describe('open / close', () => {
+    it('closes the dropdown when the trigger is clicked again', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    })
+
+    it('closes the dropdown on Escape key', async () => {
+      wrapper = mountCombobox()
+      await open()
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    })
+
+    it('closes the dropdown on click outside', async () => {
+      wrapper = mountCombobox()
+      await open()
+      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+      await nextTick()
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    })
+
+    it('does not close on click inside', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('[role="listbox"]').trigger('mousedown')
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    })
+  })
+
+  describe('search / filtering', () => {
+    it('filters options based on search input', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('input').setValue('Amst')
+      await nextTick()
+      const options = wrapper.findAll('[role="option"]')
+      expect(options).toHaveLength(1)
+      expect(options[0].text()).toContain('Amsterdam')
+    })
+
+    it('shows all options when search is cleared', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('input').setValue('dam')
+      await wrapper.find('input').setValue('')
+      await nextTick()
+      expect(wrapper.findAll('[role="option"]')).toHaveLength(STRING_OPTIONS.length)
+    })
+
+    it('shows empty state when no options match', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('input').setValue('zzz')
+      await nextTick()
+      expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
+    })
+
+    it('is case-insensitive', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('input').setValue('AMSTERDAM')
+      await nextTick()
+      expect(wrapper.findAll('[role="option"]')).toHaveLength(1)
+    })
+  })
+
+  describe('selecting options', () => {
+    it('emits modelValue with selected option when an option is clicked', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('[role="option"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['Amsterdam']])
+    })
+
+    it('removes a selected option from the list', async () => {
+      wrapper = mountCombobox({}, ['Amsterdam'])
+      await open()
+      const options = wrapper.findAll('[role="option"]')
+      expect(options.map((o) => o.text())).not.toContain('Amsterdam')
+    })
+
+    it('clears search after selecting an option', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('input').setValue('dam')
+      await wrapper.find('[role="option"]').trigger('click')
+      await nextTick()
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('')
+    })
+
+    it('accumulates multiple selections', async () => {
+      const selected: (string | number)[] = []
+      wrapper = mount(Combobox, {
+        props: {
+          options: STRING_OPTIONS,
+          modelValue: selected,
+          'onUpdate:modelValue': (v: (string | number)[]) => {
+            selected.push(...v.filter((x) => !selected.includes(x)))
+            wrapper.setProps({ modelValue: [...selected] })
+          },
+        },
+        global: { stubs },
+        attachTo: document.body,
+      }) as typeof wrapper
+      await open()
+      await wrapper.findAll('[role="option"]')[0].trigger('click')
+      await nextTick()
+      await wrapper.findAll('[role="option"]')[0].trigger('click')
+      await nextTick()
+      expect(selected).toHaveLength(2)
+    })
+  })
+
+  // Both in one host, so one app: an array default shared between instances would show here.
+  it('keeps the selection of an uncontrolled instance to itself', async () => {
+    const host = mount(
+      defineComponent({
+        components: { Combobox },
+        setup: () => ({ options: STRING_OPTIONS }),
+        template: '<div><Combobox :options="options" /><Combobox :options="options" /></div>',
+      }),
+      { global: { stubs }, attachTo: document.body },
+    )
+    const [first, second] = host.findAllComponents(Combobox)
+
+    await open(first)
+    await first.find('[role="option"]').trigger('click')
+    await open(first)
+    await open(second)
+
+    expect(first.emitted('update:modelValue')).toEqual([[['Amsterdam']]])
+    expect(second.emitted('update:modelValue')).toBeUndefined()
+    expect(second.findAll('[role="option"]')).toHaveLength(STRING_OPTIONS.length)
+    host.unmount()
+  })
+
+  describe('chip removal', () => {
+    it('shows chips for selected values', async () => {
+      wrapper = mountCombobox({}, ['Amsterdam', 'Rotterdam'])
+      await open()
+      expect(wrapper.text()).toContain('Amsterdam')
+      expect(wrapper.text()).toContain('Rotterdam')
+    })
+
+    it('removes a value when its chip is clicked', async () => {
+      wrapper = mountCombobox({}, ['Amsterdam', 'Rotterdam'])
+      await open()
+      const chipButtons = wrapper.findAll('button[aria-label]')
+      await chipButtons[0].trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      const lastEmit = emitted![emitted!.length - 1][0] as (string | number)[]
+      expect(lastEmit).not.toContain('Amsterdam')
+    })
+
+    it('chip buttons have descriptive aria-labels', async () => {
+      wrapper = mountCombobox({}, ['Amsterdam'])
+      await open()
+      const chipButton = wrapper.find('button[aria-label]')
+      expect(chipButton.attributes('aria-label')).toContain('Amsterdam')
+    })
+  })
+
+  describe('allowNew', () => {
+    it('shows add hint when search has no matching options', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      expect(wrapper.text()).toContain('Groningen')
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(true)
+    })
+
+    it('does not show add hint when allowNew is false', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(false)
+    })
+
+    it('does not show add hint when search matches an existing option label', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Amsterdam')
+      await nextTick()
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(false)
+    })
+
+    it('does not show add hint when search matches a custom item already added', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Groningen')
+      await wrapper.find('[data-name="plus"]').trigger('click')
+      await nextTick()
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(false)
+    })
+
+    it('adds a new custom item when clicking the add hint', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      await wrapper.find('[data-name="plus"]').trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![emitted!.length - 1][0] as string[]).includes('Groningen')).toBe(true)
+    })
+
+    it('selects the existing option instead of adding a custom item when label matches exactly', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Amsterdam')
+      await nextTick()
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      // Should select the existing option (emits it), not show an add hint
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as string[]).includes('Amsterdam')).toBe(true)
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(false)
+    })
+
+    it('does not add the same custom item twice via Enter', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Groningen')
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      await wrapper.setProps({ modelValue: ['Groningen'] })
+      await wrapper.find('input').setValue('Groningen')
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      const lastEmit = emitted![emitted!.length - 1][0] as string[]
+      expect(lastEmit.filter((v) => v === 'Groningen')).toHaveLength(1)
+    })
+
+    it('custom items are shown with default chip variant, existing options with ghost', async () => {
+      wrapper = mountCombobox({ allowNew: true }, ['Groningen', 'Amsterdam'])
+      await open()
+      // Verify both chips are rendered — variant checking done via chip wrapper attributes
+      expect(wrapper.text()).toContain('Groningen')
+      expect(wrapper.text()).toContain('Amsterdam')
+    })
+  })
+
+  describe('enter key behaviour', () => {
+    it('selects the single remaining option on Enter without allowNew', async () => {
+      wrapper = mountCombobox()
+      await open()
+      await wrapper.find('input').setValue('Amst')
+      await nextTick()
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as string[]).includes('Amsterdam')).toBe(true)
+    })
+
+    it('selects the single remaining option on Enter even when allowNew is true', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Amst')
+      await nextTick()
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as string[]).includes('Amsterdam')).toBe(true)
+    })
+
+    it('adds new item on Enter when multiple options exist but none match exactly', async () => {
+      wrapper = mountCombobox({ allowNew: true })
+      await open()
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as string[]).includes('Groningen')).toBe(true)
+    })
+  })
+
+  describe('accessibility', () => {
+    it('trigger has aria-haspopup="listbox"', () => {
+      wrapper = mountCombobox()
+      expect(wrapper.find('button').attributes('aria-haspopup')).toBe('listbox')
+    })
+
+    it('trigger has aria-expanded="false" when closed', () => {
+      wrapper = mountCombobox()
+      expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
+    })
+
+    it('trigger has aria-expanded="true" when open', async () => {
+      wrapper = mountCombobox()
+      await open()
+      expect(wrapper.find('button').attributes('aria-expanded')).toBe('true')
+    })
+
+    it('listbox has aria-multiselectable="true"', async () => {
+      wrapper = mountCombobox()
+      await open()
+      expect(wrapper.find('[role="listbox"]').attributes('aria-multiselectable')).toBe('true')
+    })
+
+    it('options have aria-selected="false"', async () => {
+      wrapper = mountCombobox()
+      await open()
+      wrapper.findAll('[role="option"]').forEach((o) => {
+        expect(o.attributes('aria-selected')).toBe('false')
+      })
+    })
+  })
+
+  describe('singleSelect', () => {
+    it('keeps selected options visible in the list', async () => {
+      wrapper = mountCombobox({ singleSelect: true }, ['Amsterdam'])
+      await open()
+      expect(wrapper.findAll('[role="option"]').map((o) => o.text())).toContain('Amsterdam')
+    })
+
+    it('emits a single-item array when an option is clicked', async () => {
+      wrapper = mountCombobox({ singleSelect: true })
+      await open()
+      await wrapper.find('[role="option"]').trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as (string | number)[]).length).toBe(1)
+    })
+
+    it('replaces the current selection when a different option is clicked', async () => {
+      wrapper = mountCombobox({ singleSelect: true }, ['Amsterdam'])
+      await open()
+      const rotterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Rotterdam'))!
+      await rotterdam.trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      const last = emitted![emitted!.length - 1][0] as (string | number)[]
+      expect(last).toEqual(['Rotterdam'])
+    })
+
+    it('deselects when the currently selected option is clicked again', async () => {
+      wrapper = mountCombobox({ singleSelect: true }, ['Amsterdam'])
+      await open()
+      const amsterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Amsterdam'))!
+      await amsterdam.trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      const last = emitted![emitted!.length - 1][0] as (string | number)[]
+      expect(last).toHaveLength(0)
+    })
+
+    it('shows a check icon on the selected option', async () => {
+      wrapper = mountCombobox({ singleSelect: true }, ['Amsterdam'])
+      await open()
+      const amsterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Amsterdam'))!
+      expect(amsterdam.find('[data-name="check"]').exists()).toBe(true)
+    })
+
+    it('does not show a check icon on unselected options', async () => {
+      wrapper = mountCombobox({ singleSelect: true }, ['Amsterdam'])
+      await open()
+      const rotterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Rotterdam'))!
+      expect(rotterdam.find('[data-name="check"]').exists()).toBe(false)
+    })
+
+    it('closes the panel after selecting an option', async () => {
+      wrapper = mountCombobox({ singleSelect: true })
+      await open()
+      await wrapper.find('[role="option"]').trigger('click')
+      await nextTick()
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    })
+
+    it('hides chips by default', async () => {
+      wrapper = mountCombobox({ singleSelect: true }, ['Amsterdam'])
+      await open()
+      expect(wrapper.find('button[aria-label]').exists()).toBe(false)
+    })
+  })
+
+  describe('showChips', () => {
+    it('shows chips by default in multi-select', async () => {
+      wrapper = mountCombobox({}, ['Amsterdam'])
+      await open()
+      expect(wrapper.find('button[aria-label]').exists()).toBe(true)
+    })
+
+    it('hides chips when showChips is false', async () => {
+      wrapper = mountCombobox({ showChips: false }, ['Amsterdam'])
+      await open()
+      expect(wrapper.find('button[aria-label]').exists()).toBe(false)
+    })
+  })
+
+  describe('fullWidth', () => {
+    it('does not apply w-full to the trigger by default', () => {
+      wrapper = mountCombobox()
+      expect(wrapper.find('button').classes()).not.toContain('w-full')
+    })
+
+    it('applies w-full to the trigger when fullWidth is true', () => {
+      wrapper = mountCombobox({ fullWidth: true })
+      expect(wrapper.find('button').classes()).toContain('w-full')
+    })
+  })
+})

package/src/components/organisms/Combobox/Combobox.vue

@@ -32,7 +32,7 @@ const {
   singleSelect = false,
 } = props
 
-const selected = defineModel<(string | number)[]>({ default: [] })
+const selected = defineModel<(string | number)[]>({ default: () => [] })
 
 const panelRef = ref<InstanceType<typeof ComboboxPanel> | null>(null)
 

package/src/components/organisms/ComboboxPanel/ComboboxPanel.stories.ts

@@ -0,0 +1,158 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ComboboxPanel from './ComboboxPanel.vue'
+import type { NexxtComboboxGroup } from './combobox-types'
+
+const CITIES = [
+  { label: 'Almere', value: 'ALM' },
+  { label: 'Amersfoort', value: 'AMF' },
+  { label: 'Amsterdam', value: 'AMS' },
+  { label: 'Apeldoorn', value: 'APD' },
+  { label: 'Arnhem', value: 'ARN' },
+  { label: 'Breda', value: 'BRD' },
+  { label: 'Den Haag', value: 'DHG' },
+  { label: 'Eindhoven', value: 'EHV' },
+  { label: 'Groningen', value: 'GRQ' },
+  { label: 'Haarlem', value: 'HAA' },
+  { label: 'Leeuwarden', value: 'LWR' },
+  { label: 'Rotterdam', value: 'RTM' },
+  { label: 'Utrecht', value: 'UTC' },
+  { label: 'Zwolle', value: 'ZWO' },
+]
+
+export default {
+  title: 'Components/Organisms/ComboboxPanel',
+  component: ComboboxPanel,
+  decorators: [
+    () => ({
+      template:
+        '<div style="padding: 16px; display: flex; gap: 24px; align-items: flex-start;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof ComboboxPanel>
+
+type Story = StoryObj<typeof ComboboxPanel>
+
+export const StringOptions: Story = {
+  render: (args) => ({
+    components: { ComboboxPanel },
+    setup() {
+      const selected = ref<string[]>([])
+      return { args, selected }
+    },
+    template: `<ComboboxPanel v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES.map((city) => city.label),
+  },
+}
+
+export const AllowNew: Story = {
+  render: (args) => ({
+    components: { ComboboxPanel },
+    setup() {
+      const selected = ref<string[]>([])
+      return { args, selected }
+    },
+    template: `<ComboboxPanel v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    placeholder: 'Zoeken of toevoegen...',
+    options: CITIES.map((city) => city.label),
+    allowNew: true,
+  },
+}
+
+export const ObjectOptions: Story = {
+  render: (args) => ({
+    components: { ComboboxPanel },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      return { args, selected }
+    },
+    template: `<ComboboxPanel v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    placeholder: 'Selecteer een stad...',
+    options: CITIES,
+  },
+}
+
+export const Floating: Story = {
+  name: 'Floating (standalone)',
+  render: (args) => ({
+    components: { ComboboxPanel },
+    setup() {
+      const selected = ref<string[]>([])
+      return { args, selected }
+    },
+    template: `<ComboboxPanel v-bind="args" v-model="selected" />`,
+  }),
+  decorators: [
+    () => ({
+      template: '<div style="padding: 16px; min-height: 300px;"><story /></div>',
+    }),
+  ],
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES.map((city) => city.label),
+    floating: true,
+  },
+}
+
+export const NonFloating: Story = {
+  name: 'Non-floating (inside dropdown)',
+  render: (args) => ({
+    components: { ComboboxPanel },
+    setup() {
+      const selected = ref<string[]>([])
+      return { args, selected }
+    },
+    template: `<ComboboxPanel v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES.map((city) => city.label),
+    floating: false,
+  },
+}
+
+const PLACEHOLDER_GROUPS: NexxtComboboxGroup[] = [
+  { label: 'Contact', options: ['Voornaam', 'Achternaam', 'E-mailadres', 'Telefoonnummer'] },
+  { label: 'Woning', options: ['Adres', 'Postcode', 'Woonplaats', 'Vraagprijs'] },
+  { label: 'Makelaar', options: ['Kantoornaam', 'Naam makelaar'] },
+]
+
+export const GroupedOptions: Story = {
+  render: (args) => ({
+    components: { ComboboxPanel },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      return { args, selected }
+    },
+    template: `<ComboboxPanel v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    placeholder: 'Zoek een placeholder...',
+    options: PLACEHOLDER_GROUPS,
+    floating: false,
+  },
+}
+
+export const GroupedSingleSelect: Story = {
+  render: (args) => ({
+    components: { ComboboxPanel },
+    setup() {
+      const selected = ref<(string | number)[]>(['Postcode'])
+      return { args, selected }
+    },
+    template: `<ComboboxPanel v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    placeholder: 'Zoek een placeholder...',
+    options: PLACEHOLDER_GROUPS,
+    floating: false,
+    singleSelect: true,
+  },
+}