@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,149 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import NexxtCountrySelect from './CountrySelect.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 open = async (wrapper: ReturnType<typeof mount>) => {
+  await wrapper.find('[role="combobox"]').trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+describe('NexxtCountrySelect', () => {
+  // The width itself is only measurable in a browser (see the Narrow story);
+  // jsdom can check the structure the ellipsis depends on.
+  it('renders the country name in an element of its own, so it can be truncated', () => {
+    const wrapper = mount(NexxtCountrySelect, { props: { modelValue: 'Nederland' } })
+    const text = wrapper.find('[role="combobox"] .truncate')
+    expect(text.text()).toBe('Nederland')
+    expect(text.element.children).toHaveLength(0)
+  })
+
+  it('renders placeholder when no value is set', () => {
+    const wrapper = mount(NexxtCountrySelect)
+    expect(wrapper.text()).toContain('Selecteer een land...')
+  })
+
+  it('renders label', () => {
+    const wrapper = mount(NexxtCountrySelect, { props: { label: 'Land' } })
+    expect(wrapper.text()).toContain('Land')
+  })
+
+  it('renders required asterisk when required is true', () => {
+    const wrapper = mount(NexxtCountrySelect, { props: { label: 'Land', required: true } })
+    const asterisk = wrapper.find('.text-brick-500')
+    expect(asterisk.exists()).toBe(true)
+    expect(asterisk.text()).toBe('*')
+  })
+
+  it('shows error ring and error message', () => {
+    const wrapper = mount(NexxtCountrySelect, {
+      props: { error: true, errorMessage: 'Selecteer een land' },
+    })
+    expect(wrapper.find('.ring-brick-400').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Selecteer een land')
+  })
+
+  it('opens dropdown and shows country options', async () => {
+    const wrapper = mount(NexxtCountrySelect)
+    await open(wrapper)
+    const options = wrapper.findAll('[role="option"]')
+    expect(options.length).toBeGreaterThan(0)
+  })
+
+  it('displays the selected country name in the trigger', () => {
+    const wrapper = mount(NexxtCountrySelect, { props: { modelValue: 'Nederland' } })
+    expect(wrapper.find('[role="combobox"]').text()).toContain('Nederland')
+  })
+
+  it('emits update:modelValue with the country name on selection', async () => {
+    const wrapper = mount(NexxtCountrySelect)
+    await open(wrapper)
+    await wrapper.find('[role="option"]').trigger('click')
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    expect(typeof emitted?.[0]?.[0]).toBe('string')
+  })
+
+  it('filters options based on search input', async () => {
+    const wrapper = mount(NexxtCountrySelect)
+    await open(wrapper)
+    const input = wrapper.find('input')
+    await input.setValue('neder')
+    await nextTick()
+    const options = wrapper.findAll('[role="option"]')
+    expect(options).toHaveLength(1)
+    expect(options[0].text()).toContain('Nederland')
+  })
+
+  it('shows empty state when search has no matches', async () => {
+    const wrapper = mount(NexxtCountrySelect)
+    await open(wrapper)
+    await wrapper.find('input').setValue('xyznonexistent')
+    await nextTick()
+    expect(wrapper.text()).toContain('Geen landen gevonden')
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
+  })
+
+  it('places pinned countries at the top of the list', async () => {
+    const wrapper = mount(NexxtCountrySelect, {
+      props: { pinnedCountries: ['de', 'nl'] },
+    })
+    await open(wrapper)
+    const options = wrapper.findAll('[role="option"]')
+    expect(options[0].text()).toContain('Duitsland')
+    expect(options[1].text()).toContain('Nederland')
+  })
+
+  it('sorts remaining countries alphabetically after pinned ones', async () => {
+    const wrapper = mount(NexxtCountrySelect, {
+      props: { pinnedCountries: ['nl'] },
+    })
+    await open(wrapper)
+    const options = wrapper.findAll('[role="option"]')
+    // First option is pinned (Nederland), rest should be alphabetical
+    const unpinnedLabels = options.slice(1).map((o) => o.text().trim())
+    const sorted = [...unpinnedLabels].sort((a, b) => a.localeCompare(b, 'nl'))
+    expect(unpinnedLabels).toEqual(sorted)
+  })
+
+  it('marks the selected option with aria-selected', async () => {
+    const wrapper = mount(NexxtCountrySelect, { props: { modelValue: 'België' } })
+    await open(wrapper)
+    const selected = wrapper.find('[aria-selected="true"]')
+    expect(selected.exists()).toBe(true)
+    expect(selected.text()).toContain('België')
+  })
+
+  it('closes the dropdown after selecting a country', async () => {
+    const wrapper = mount(NexxtCountrySelect)
+    await open(wrapper)
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    await wrapper.find('[role="option"]').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('clears the search after selecting a country', async () => {
+    const wrapper = mount(NexxtCountrySelect)
+    await open(wrapper)
+    const input = wrapper.find('input')
+    await input.setValue('neder')
+    await wrapper.find('[role="option"]').trigger('click')
+    await open(wrapper)
+    expect(wrapper.find('input').element.value).toBe('')
+  })
+})

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

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import DatePicker from './DatePicker.vue'
+
+export default {
+  title: 'Components/Organisms/DatePicker',
+  component: DatePicker,
+  decorators: [
+    () => ({ template: '<div style="min-height: 380px; padding: 16px;"><story /></div>' }),
+  ],
+  argTypes: {
+    anchor: {
+      control: 'select',
+      options: ['bottom-right', 'bottom-left', 'top-right', 'top-left'],
+    },
+    monthYearPicker: { control: 'boolean' },
+    markedDates: { control: 'object' },
+    disabledDates: { control: 'object' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
+    locale: { control: false },
+  },
+} satisfies Meta<typeof DatePicker>
+
+type Story = StoryObj<typeof DatePicker>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Selecteer datum',
+  },
+}
+
+export const AnchorBottomRight: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="min-height: 380px; display: flex; justify-content: flex-end; align-items: flex-start; padding: 16px;">
+        <DatePicker v-bind="args" />
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    anchor: 'bottom-right',
+  },
+}
+
+export const AnchorTopLeft: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="min-height: 380px; display: flex; align-items: flex-end; padding: 16px;">
+        <DatePicker v-bind="args" />
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    anchor: 'top-left',
+  },
+}
+
+export const AnchorTopRight: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="min-height: 380px; display: flex; justify-content: flex-end; align-items: flex-end; padding: 16px;">
+        <DatePicker v-bind="args" />
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    anchor: 'top-right',
+  },
+}
+
+export const WithoutAutoClose: Story = {
+  args: {
+    placeholder: 'Selecteer datum',
+    autoClose: false,
+  },
+}
+
+export const DateTime: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      const selected = ref<Date | null>(new Date())
+      return { args, selected }
+    },
+    template: `
+      <div style="min-height: 480px; padding: 16px;">
+        <p style="font-size: 13px; color: #555; margin-bottom: 12px;">Geselecteerd: {{ selected ? selected.toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' }) : 'Geen' }}</p>
+        <DatePicker v-bind="args" v-model="selected" datetime />
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum & tijd',
+    datetime: true,
+  },
+}
+
+export const CustomTrigger: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      const selected = ref(args.modelValue)
+      return { args, selected }
+    },
+    template: `
+      <div style="min-height: 380px; padding: 16px;">
+        <p style="font-size: 13px; color: #555; margin-bottom: 12px;">Selected: {{ selected ? selected.toLocaleDateString() : 'None' }}</p>
+        <DatePicker v-bind="args" v-model="selected">
+          <template #trigger="{ toggle, isOpen }">
+            <button
+              type="button"
+              @click="toggle"
+              class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm font-medium"
+            >
+              {{ isOpen ? 'Sluiten' : 'Kies een datum uit de lijst' }}
+            </button>
+          </template>
+        </DatePicker>
+      </div>
+    `,
+  }),
+  args: {
+    modelValue: null,
+  },
+}
+
+export const Playground: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      const selected = ref<Date | null>(null)
+      return { args, selected }
+    },
+    template: `
+      <div style="min-height: 380px; padding: 16px;">
+        <DatePicker v-bind="args" v-model="selected" />
+        <p v-if="selected" style="margin-top: 12px; font-size: 13px; color: #555;">
+          Geselecteerd: {{ selected.toLocaleDateString('nl-NL') }}
+        </p>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    monthYearPicker: true,
+  },
+}

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

@@ -0,0 +1,214 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import DatePicker from './DatePicker.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 YEAR = 2026
+const MONTH = 2 // March (0-indexed)
+const TODAY = new Date(YEAR, MONTH, 20)
+
+const teleportStub = { template: '<div><slot /></div>' }
+
+const mountDatePicker = (props = {}) =>
+  mount(DatePicker, {
+    props,
+    attachTo: document.body,
+    global: { stubs: { Teleport: teleportStub } },
+  })
+
+const openPicker = async (wrapper: VueWrapper) => {
+  await wrapper.find('button').trigger('click')
+  await nextTick()
+}
+
+describe('DatePicker', () => {
+  let wrapper: VueWrapper
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  // ── Trigger button ───────────────────────────────────────────────────────
+
+  it('renders trigger button with placeholder', () => {
+    wrapper = mountDatePicker({ placeholder: 'Kies een datum' })
+    expect(wrapper.text()).toContain('Kies een datum')
+  })
+
+  it('uses default placeholder when none provided', () => {
+    wrapper = mountDatePicker()
+    expect(wrapper.text()).toContain('Selecteer datum')
+  })
+
+  // ── Open / close ─────────────────────────────────────────────────────────
+
+  it('calendar is closed by default', () => {
+    wrapper = mountDatePicker()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('opens when trigger button is clicked', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
+  })
+
+  it('closes when trigger button is clicked again', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('closes when clicking outside', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('closes on Escape key', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  // ── Day selection + autoClose ─────────────────────────────────────────────
+
+  it('closes after selecting a day (autoClose default)', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY })
+    await openPicker(wrapper)
+
+    const dayButtons = wrapper
+      .findAll('button[type="button"]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    await dayButtons[10]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('stays open after selecting a day if autoClose is false', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY, autoClose: false })
+    await openPicker(wrapper)
+
+    const dayButtons = wrapper
+      .findAll('button[type="button"]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    await dayButtons[10]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
+  })
+
+  it('emits update:modelValue with the clicked date', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY })
+    await openPicker(wrapper)
+
+    const dayButtons = wrapper
+      .findAll('button[type="button"]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    await dayButtons[10]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]![0]).toBeInstanceOf(Date)
+  })
+
+  // ── Resets to days view on reopen ─────────────────────────────────────────
+
+  it('resets to days view when closed and reopened', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY, monthYearPicker: true })
+    await openPicker(wrapper)
+
+    // open month picker
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    await header.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
+
+    // close and reopen (v-if remounts Calendar with fresh pickerView = 'days')
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    await openPicker(wrapper)
+    expect(wrapper.find('[class*="grid-cols-7"]').exists()).toBe(true)
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(false)
+  })
+
+  // ── Custom trigger slot ───────────────────────────────────────────────────
+
+  it('renders custom trigger through slot', () => {
+    wrapper = mount(DatePicker, {
+      slots: {
+        trigger: `
+          <template #trigger="{ toggle }">
+            <button class="custom-trigger" @click="toggle">Custom Button</button>
+          </template>
+        `,
+      },
+      global: { stubs: { Teleport: teleportStub } },
+    })
+
+    expect(wrapper.find('.custom-trigger').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Custom Button')
+  })
+
+  it('toggles picker via custom trigger toggle function', async () => {
+    wrapper = mount(DatePicker, {
+      slots: {
+        trigger: `
+          <template #trigger="{ toggle }">
+            <button class="custom-trigger" @click="toggle">Toggle</button>
+          </template>
+        `,
+      },
+      global: { stubs: { Teleport: teleportStub } },
+    })
+
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+
+    await wrapper.find('.custom-trigger').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
+
+    await wrapper.find('.custom-trigger').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('provides isOpen state to custom trigger', async () => {
+    wrapper = mount(DatePicker, {
+      slots: {
+        trigger: `
+          <template #trigger="{ isOpen, toggle }">
+            <button class="custom-trigger" @click="toggle">{{ isOpen ? 'OPEN' : 'CLOSED' }}</button>
+          </template>
+        `,
+      },
+      global: { stubs: { Teleport: teleportStub } },
+    })
+
+    expect(wrapper.find('.custom-trigger').text()).toBe('CLOSED')
+
+    await wrapper.find('.custom-trigger').trigger('click')
+    await nextTick()
+    expect(wrapper.find('.custom-trigger').text()).toBe('OPEN')
+  })
+})

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

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DropdowndButton from './DropdownButton.vue'
+
+export default {
+  title: 'Components/Organisms/Dropdown Button',
+  component: DropdowndButton,
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 250px; padding: 16px; display: flex; align-items: center; justify-content: center;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof DropdowndButton>
+
+type Story = StoryObj<typeof DropdowndButton>
+
+export const Default: Story = {
+  args: {
+    label: 'Actions',
+    action: () => alert('Primary action clicked'),
+    options: [
+      { label: 'Edit', action: () => alert('Edit clicked'), icon: 'pencil', selected: true },
+      { label: 'Delete', action: () => alert('Delete clicked'), icon: 'trash-can' },
+    ],
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    label: 'More info',
+    variant: 'secondary',
+    action: () => alert('Secondary main action'),
+    options: [
+      { label: 'View Profile', action: '/profile', icon: 'user' },
+      { label: 'Settings', action: '/settings', icon: 'gear' },
+    ],
+  },
+}
+
+export const LeftPlacement: Story = {
+  args: {
+    label: 'Menu',
+    placement: 'left',
+    action: () => console.log('Main action'),
+    options: [
+      { label: 'Option 1', action: () => console.log('1') },
+      { label: 'Option 2', action: () => console.log('2') },
+    ],
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Download',
+    icon: 'download',
+    action: '/download/all',
+    options: [
+      { label: 'As PDF', action: '/download/pdf', icon: 'file-pdf' },
+      { label: 'As CSV', action: '/download/csv', icon: 'file-csv' },
+    ],
+  },
+}
+
+export const IconOnly: Story = {
+  args: {
+    iconOnly: true,
+    triggerIcon: 'ellipsis-vertical',
+    variant: 'secondary',
+    options: [
+      { label: 'Edit', action: () => alert('Edit clicked'), icon: 'pencil' },
+      { label: 'Delete', action: () => alert('Delete clicked'), icon: 'trash-can' },
+    ],
+  },
+}
+
+export const Grouped: Story = {
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 450px; padding: 16px; display: flex; align-items: start; justify-content: center;"><story /></div>',
+    }),
+  ],
+  args: {
+    label: 'Actions',
+    action: () => alert('Primary action clicked'),
+    options: [
+      {
+        title: 'File',
+        items: [
+          { label: 'Download PDF', action: () => alert('PDF'), icon: 'file-pdf' },
+          { label: 'Download CSV', action: () => alert('CSV'), icon: 'file-csv' },
+        ],
+      },
+      {
+        title: 'Manage',
+        items: [
+          { label: 'Edit', action: () => alert('Edit'), icon: 'pencil' },
+          { label: 'Delete', action: () => alert('Delete'), icon: 'trash-can' },
+        ],
+      },
+      {
+        title: 'Columns',
+        items: [
+          { label: 'Name', checkbox: true, selected: true, action: () => {} },
+          { label: 'Email', checkbox: true, action: () => {} },
+          { label: 'Status', checkbox: true, action: () => {} },
+        ],
+      },
+    ],
+  },
+}
+
+export const WithCheckboxes: Story = {
+  args: {
+    label: 'Columns',
+    action: () => {},
+    options: [
+      { label: 'Name', checkbox: true, selected: true, action: () => {} },
+      { label: 'Email', checkbox: true, action: () => {} },
+      { label: 'Status', checkbox: true, selected: true, action: () => {} },
+    ],
+  },
+}