@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/organisms/Calendar/_CalendarDayView.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CalendarDayView from './_CalendarDayView.vue'
+import { nl } from 'date-fns/locale'
+import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval } from 'date-fns'
+
+const VIEW_DATE = new Date(2026, 2, 20) // March 20, 2026
+const start = startOfWeek(startOfMonth(VIEW_DATE), { weekStartsOn: 1 })
+const end = endOfWeek(endOfMonth(VIEW_DATE), { weekStartsOn: 1 })
+const DAYS = eachDayOfInterval({ start, end })
+
+const defaults = {
+  viewDate: VIEW_DATE,
+  calendarDays: DAYS,
+  modelValue: null,
+  markedDates: [],
+  locale: nl,
+  isDisabled: () => false,
+  timezone: 'UTC',
+}
+
+const mountDayView = (props: Record<string, unknown> = {}) =>
+  mount(CalendarDayView, {
+    props: { ...defaults, ...props },
+  })
+
+describe('CalendarDayView', () => {
+  it('renders the correct number of days', () => {
+    const wrapper = mountDayView()
+    const dayButtons = wrapper.findAll('button')
+    expect(dayButtons.length).toBe(DAYS.length)
+  })
+
+  it('highlights the selected day', () => {
+    const selectedDate = new Date(2026, 2, 15)
+    const wrapper = mountDayView({
+      modelValue: selectedDate,
+    })
+    const selectedCell = wrapper.find('[role="gridcell"][aria-selected="true"]')
+    expect(selectedCell.exists()).toBe(true)
+    expect(selectedCell.text()).toBe('15')
+  })
+
+  it('marks dates correctly', () => {
+    const markedDates = [new Date(2026, 2, 10)]
+    const wrapper = mountDayView({
+      markedDates,
+    })
+    // In our component, isMarked(day) is used to show a small dot.
+    // The dot is a span with bg-cornflower-blue-500 class.
+    expect(wrapper.find('.bg-cornflower-blue-500').exists()).toBe(true)
+  })
+
+  it('disables dates based on isDisabled prop', () => {
+    const wrapper = mountDayView({
+      isDisabled: (day: Date) => day.getDate() === 15,
+    })
+    const disabledButton = wrapper.find('button[disabled]')
+    expect(disabledButton.exists()).toBe(true)
+    expect(disabledButton.text()).toBe('15')
+  })
+
+  it('emits select event when a day is clicked', async () => {
+    const wrapper = mountDayView()
+    const button = wrapper.findAll('button')[10]
+    if (button) {
+      await button.trigger('click')
+      expect(wrapper.emitted('select')).toBeTruthy()
+      expect(wrapper.emitted('select')?.[0]?.[0]).toBeInstanceOf(Date)
+    }
+  })
+
+  it('handles keyboard navigation (ArrowRight)', async () => {
+    const wrapper = mountDayView({
+      attachTo: document.body,
+    })
+    const button = wrapper.findAll('button')[0]
+    if (button) {
+      await button.trigger('keydown', { key: 'ArrowRight' })
+    }
+    // In vitest/jsdom, focus might not move as easily, so we check if the method logic runs
+    // For unit tests, we can also check if emit('select') is called on Enter/Space
+  })
+
+  it('emits select when Enter or Space is pressed', async () => {
+    const wrapper = mountDayView()
+    const button = wrapper.findAll('button')[0]
+    if (button) {
+      await button.trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('select')).toBeTruthy()
+      await button.trigger('keydown', { key: ' ' })
+      expect(wrapper.emitted('select')?.[1]).toBeTruthy()
+    }
+  })
+
+  it('does not emit select for other keys', async () => {
+    const wrapper = mountDayView()
+    const button = wrapper.findAll('button')[0]
+    if (button) {
+      await button.trigger('keydown', { key: 'Tab' })
+      expect(wrapper.emitted('select')).toBeFalsy()
+    }
+  })
+})

package/src/components/organisms/Calendar/_CalendarHeader.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CalendarHeader from './_CalendarHeader.vue'
+import { nl } from 'date-fns/locale'
+
+const VIEW_DATE = new Date(2026, 2, 20) // March 20, 2026
+
+describe('CalendarHeader', () => {
+  it('renders the correct month and year label', () => {
+    const wrapper = mount(CalendarHeader, {
+      props: {
+        viewDate: VIEW_DATE,
+        pickerView: 'days',
+        monthYearPicker: false,
+        locale: nl,
+        canGoPrev: true,
+        canGoNext: true,
+      },
+    })
+    expect(wrapper.text()).toContain('Mrt.')
+    expect(wrapper.text()).toContain('2026')
+  })
+
+  it('renders month and year as buttons if monthYearPicker is true', () => {
+    const wrapper = mount(CalendarHeader, {
+      props: {
+        viewDate: VIEW_DATE,
+        pickerView: 'days',
+        monthYearPicker: true,
+        locale: nl,
+        canGoPrev: true,
+        canGoNext: true,
+      },
+    })
+    const buttons = wrapper.findAll('.flex.items-center.gap-1 button')
+    expect(buttons.length).toBe(2)
+  })
+
+  it('emits openMonthPicker when month label button is clicked', async () => {
+    const wrapper = mount(CalendarHeader, {
+      props: {
+        viewDate: VIEW_DATE,
+        pickerView: 'days',
+        monthYearPicker: true,
+        locale: nl,
+        canGoPrev: true,
+        canGoNext: true,
+      },
+    })
+    await wrapper.findAll('.flex.items-center.gap-1 button')[0].trigger('click')
+    expect(wrapper.emitted('openMonthPicker')).toBeTruthy()
+  })
+
+  it('emits prev and next events', async () => {
+    const wrapper = mount(CalendarHeader, {
+      props: {
+        viewDate: VIEW_DATE,
+        pickerView: 'days',
+        monthYearPicker: false,
+        locale: nl,
+        canGoPrev: true,
+        canGoNext: true,
+      },
+    })
+    const navButtons = wrapper.findAll('button[aria-label]')
+    await navButtons[0].trigger('click')
+    expect(wrapper.emitted('prev')).toBeTruthy()
+    await navButtons[1].trigger('click')
+    expect(wrapper.emitted('next')).toBeTruthy()
+  })
+
+  it('shows back arrow instead of chevron when in years view', () => {
+    const wrapper = mount(CalendarHeader, {
+      props: {
+        viewDate: VIEW_DATE,
+        pickerView: 'years',
+        monthYearPicker: true,
+        locale: nl,
+        canGoPrev: false,
+        canGoNext: false,
+      },
+    })
+    const backButton = wrapper.find('button[aria-label="Terug naar maanden"]')
+    expect(backButton.exists()).toBe(true)
+  })
+})

package/src/components/organisms/Calendar/_CalendarMonthView.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CalendarMonthView from './_CalendarMonthView.vue'
+import { nl } from 'date-fns/locale'
+
+const VIEW_YEAR = 2026
+const CURRENT_MONTH = 2 // March
+
+const mountMonthView = (props: Record<string, unknown>) =>
+  mount(CalendarMonthView, {
+    props: {
+      viewYear: VIEW_YEAR,
+      modelValue: null,
+      currentMonth: CURRENT_MONTH,
+      locale: nl,
+      timezone: 'UTC',
+      ...(props as Record<string, unknown>),
+    },
+  })
+
+describe('CalendarMonthView', () => {
+  it('renders all 12 months', () => {
+    const wrapper = mountMonthView({})
+    const buttons = wrapper.findAll('button')
+    expect(buttons.length).toBe(12)
+  })
+
+  it('highlights the selected month', () => {
+    const selectedDate = new Date(Date.UTC(VIEW_YEAR, 5, 15)) // June
+    const wrapper = mountMonthView({ modelValue: selectedDate })
+    const selectedButton = wrapper.find('button[aria-selected="true"]')
+    expect(selectedButton.text()).toBe('Jun')
+  })
+
+  it('disables months based on minDate and maxDate', () => {
+    const minDate = new Date(Date.UTC(VIEW_YEAR, 2, 1)) // March 1st
+    const wrapper = mountMonthView({ minDate })
+    // January (0) and February (1) should be disabled
+    const disabledButtons = wrapper.findAll('button[disabled]')
+    expect(disabledButtons.length).toBe(2)
+    expect(disabledButtons[0]?.text()).toBe('Jan')
+    expect(disabledButtons[1]?.text()).toBe('Feb')
+  })
+
+  it('emits select event when a month is clicked', async () => {
+    const wrapper = mountMonthView({})
+    await wrapper.findAll('button')[5]?.trigger('click')
+    const emitted = wrapper.emitted('select')
+    expect(emitted).toBeTruthy()
+    expect(emitted?.[0]?.[0]).toBe(5)
+  })
+})

package/src/components/organisms/Calendar/_CalendarTimePicker.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { getHours, getMinutes } from 'date-fns'
+import TimePicker from './_CalendarTimePicker.vue'
+
+describe('CalendarTimePicker', () => {
+  it('renders correctly with modelValue', () => {
+    const date = new Date(2024, 0, 1, 10, 30)
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: date,
+      },
+    })
+
+    const displays = wrapper.findAll('.tabular-nums')
+    expect(displays[0].text()).toBe('10')
+    expect(displays[1].text()).toBe('30')
+  })
+
+  it('updates hours when buttons are clicked', async () => {
+    const date = new Date(2024, 0, 1, 10, 30)
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: date,
+      },
+    })
+
+    const hourButtons = wrapper.findAll('button')
+    // First button is increment hours
+    await hourButtons[0].trigger('click')
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    const updatedDate = emitted![0][0] as Date
+    expect(getHours(updatedDate)).toBe(11)
+    expect(getMinutes(updatedDate)).toBe(30)
+  })
+
+  it('updates minutes when buttons are clicked', async () => {
+    const date = new Date(2024, 0, 1, 10, 30)
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: date,
+      },
+    })
+
+    const minuteButtons = wrapper.findAll('button')
+    // Third button is increment minutes (0: inc hours, 1: dec hours, 2: inc minutes, 3: dec minutes)
+    await minuteButtons[2].trigger('click')
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    const updatedDate = emitted![0][0] as Date
+    expect(getHours(updatedDate)).toBe(10)
+    expect(getMinutes(updatedDate)).toBe(31)
+  })
+
+  it('handles null modelValue by using current time as default', () => {
+    const now = new Date()
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: null,
+      },
+    })
+
+    const displays = wrapper.findAll('.tabular-nums')
+    expect(displays[0].text()).toBe(now.getHours().toString().padStart(2, '0'))
+    expect(displays[1].text()).toBe(now.getMinutes().toString().padStart(2, '0'))
+  })
+
+  it('emits current date and time when buttons clicked with null modelValue', async () => {
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: null,
+      },
+    })
+
+    const hourButtons = wrapper.findAll('button')
+    await hourButtons[0].trigger('click') // increment hours
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    const updatedDate = emitted![0][0] as Date
+    expect(updatedDate).toBeInstanceOf(Date)
+    // Check that it roughly matches current time + 1 hour
+    const expectedHour = (new Date().getHours() + 1) % 24
+    expect(getHours(updatedDate)).toBe(expectedHour)
+  })
+})

package/src/components/organisms/Calendar/_CalendarYearView.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CalendarYearView from './_CalendarYearView.vue'
+
+describe('CalendarYearView', () => {
+  it('renders a range of years', () => {
+    const wrapper = mount(CalendarYearView, {
+      props: {
+        viewYear: 2024,
+        timezone: 'UTC',
+      },
+    })
+    const items = wrapper.findAll('button')
+    expect(items.length).toBeGreaterThan(100) // Default range is viewYear - 100 to + 20
+  })
+
+  it('respects minDate and maxDate', () => {
+    const wrapper = mount(CalendarYearView, {
+      props: {
+        viewYear: 2024,
+        minDate: new Date(Date.UTC(2020, 0, 1)),
+        maxDate: new Date(Date.UTC(2025, 0, 1)),
+        timezone: 'UTC',
+      },
+    })
+    const items = wrapper.findAll('button')
+    // 2020 to 2025 inclusive is 6 years
+    expect(items.length).toBe(6)
+    expect(items[0]?.text()).toBe('2020')
+    expect(items[5]?.text()).toBe('2025')
+  })
+
+  it('emits select when a year is clicked', async () => {
+    const wrapper = mount(CalendarYearView, {
+      props: {
+        viewYear: 2024,
+        timezone: 'UTC',
+      },
+    })
+    const year2024 = wrapper.findAll('button').find((i) => i.text() === '2024')
+    await year2024?.trigger('click')
+    expect(wrapper.emitted('select')).toBeTruthy()
+    expect(wrapper.emitted('select')?.[0]?.[0]).toBe(2024)
+  })
+
+  it('highlights the current year', async () => {
+    const wrapper = mount(CalendarYearView, {
+      props: {
+        viewYear: 2024,
+        timezone: 'UTC',
+      },
+    })
+    const activeYear = wrapper.find('button.text-cornflower-blue-500')
+    expect(activeYear.text()).toBe('2024')
+  })
+})

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

@@ -0,0 +1,229 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import type { ColorPickerGradient, ColorPickerFillMode } from './ColorPicker.vue'
+import NexxtColorPicker from './ColorPicker.vue'
+
+export default {
+  title: 'Components/Organisms/Color picker',
+  component: NexxtColorPicker,
+} satisfies Meta<typeof NexxtColorPicker>
+
+type Story = StoryObj<typeof NexxtColorPicker>
+
+const render = (args: Story['args']) => ({
+  components: { NexxtColorPicker },
+  setup() {
+    return { args }
+  },
+  template: `
+    <NexxtColorPicker
+      v-bind="args"
+      :modelValue="args.modelValue"
+      @update:modelValue="args.modelValue = $event"
+    />
+  `,
+})
+
+export const Default: Story = {
+  render,
+  args: {
+    label: '',
+    placeholder: 'Kies kleur...',
+    modelValue: '',
+    error: false,
+    errorMessage: '',
+    required: false,
+    showAlpha: false,
+    formats: ['hex'],
+  },
+}
+
+export const WithLabel: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Merkkleur',
+  },
+}
+
+export const WithValue: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Achtergrondkleur',
+    modelValue: '#6366f1',
+  },
+}
+/** A value with a name of its own shows that name in the trigger instead of the colour. */
+export const WithValueLabel: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Achtergrondkleur',
+    modelValue: '#1777ea',
+    valueLabel: 'Hoofdkleur',
+  },
+}
+export const WithSuggestions: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Achtergrondkleur',
+    suggestions: { hex: ['#1777ea', '#f0f4f8', '#1f2937'] },
+  },
+}
+
+export const Error: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Kleur',
+    error: true,
+    errorMessage: 'Kies een kleur om door te gaan',
+  },
+}
+
+export const Required: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Primaire kleur',
+    required: true,
+  },
+}
+
+/**
+ * The opacity slider is named by its visible label. The play runs in Chromium,
+ * where the name is computed from the rendered label rather than read off an
+ * attribute.
+ */
+export const WithAlpha: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Overlay kleur',
+    modelValue: '#3b82f680',
+    showAlpha: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Overlay kleur' }))
+
+    // The name is matched exactly: the label alone, once, and not reka's "Alpha".
+    const slider = await canvas.findByRole('slider', { name: 'Dekking' })
+    expect(slider).not.toHaveAttribute('aria-label')
+
+    // `#…80` is 50.196% to reka; the slider announces it whole, the colour stays.
+    expect(slider).toHaveAttribute('aria-valuenow', '50')
+    expect(slider).toHaveAttribute('aria-valuetext', '50%')
+    expect(args.modelValue).toBe('#3b82f680')
+  },
+}
+
+export const HslFormat: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'HSL kleur',
+    modelValue: '#6366f1',
+    formats: ['hsl'],
+  },
+}
+
+export const RgbFormat: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'RGB kleur',
+    modelValue: '#6366f1',
+    formats: ['rgb'],
+  },
+}
+
+export const AllFormats: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Alle formaten',
+    formats: ['hex', 'hsl', 'rgb'],
+  },
+}
+
+export const FullWidth: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Volledige breedte',
+    modelValue: '#6366f1',
+    fullWidth: true,
+  },
+}
+
+export const MatchWidth: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Panel op triggerbreedte',
+    modelValue: '#6366f1',
+    fullWidth: true,
+    matchWidth: true,
+  },
+}
+
+/**
+ * The gradient mode on its own: the picker edits plain data (type, angle,
+ * centre, stops) and knows no class names; NexxtEditorColor turns it into
+ * Tailwind classes. Rendered at the editor column's width.
+ */
+export const Gradient: Story = {
+  args: { modes: ['solid', 'gradient'], suggestions: { hex: ['#7f56d9', '#432e73'] } },
+  render: (args) => ({
+    components: { NexxtColorPicker },
+    setup() {
+      const mode = ref<ColorPickerFillMode>('gradient')
+      const gradient = ref<ColorPickerGradient>({
+        type: 'linear',
+        angle: 135,
+        centerX: 50,
+        centerY: 50,
+        stops: [
+          { color: '#7f56d9', position: 0 },
+          { color: '#432e73cc', position: 100 },
+        ],
+      })
+      return { args, mode, gradient }
+    },
+    template: `
+      <div class="w-64">
+        <NexxtColorPicker
+          v-bind="args"
+          v-model:mode="mode"
+          v-model:gradient-value="gradient"
+          full-width
+          match-width
+        />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const trigger = canvas.getByRole('button', { name: /Kies kleur/ })
+    expect(trigger).toHaveTextContent('Lineair verloop')
+    await userEvent.click(trigger)
+    await waitFor(() => expect(canvasElement.querySelector('[data-gradient-bar]')).not.toBeNull())
+
+    const panel = canvasElement
+      .querySelector('[data-gradient-bar]')!
+      .closest<HTMLElement>('div[style*="position: fixed"]')!
+    expect(within(panel).getByRole('slider', { name: 'Hoek' })).toHaveAttribute(
+      'aria-valuetext',
+      '135 graden',
+    )
+    expect(within(panel).getAllByRole('slider', { name: /^Kleurstop \d van 2$/ })).toHaveLength(2)
+    const surface = panel.querySelector<HTMLElement>('.rounded-xl')!
+    expect(surface.offsetWidth).toBe(trigger.offsetWidth)
+    expect(surface.scrollHeight).toBeLessThanOrEqual(surface.clientHeight)
+  },
+}