@nexxtmove/ui 0.1.21 → 0.1.23

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

@@ -0,0 +1,269 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Calendar from './Calendar.vue'
+
+// Fixed reference date used across tests
+const YEAR = 2026
+const MONTH = 2 // March (0-indexed)
+const TODAY = new Date(YEAR, MONTH, 20)
+
+const mountCalendar = (props = {}) => mount(Calendar, { props })
+
+describe('Calendar', () => {
+  // ── Rendering ─────────────────────────────────────────────────────────────
+
+  it('renders the calendar widget', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
+  })
+
+  it('shows 7 weekday header columns', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+    const headers = wrapper.findAll('[class*="grid-cols-7"] > div').slice(0, 7)
+    expect(headers.length).toBe(7)
+  })
+
+  // ── Day selection ──────────────────────────────────────────────────────────
+
+  it('emits update:modelValue and select when a day is clicked', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+
+    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)
+    expect(wrapper.emitted('select')).toBeTruthy()
+  })
+
+  // ── Month navigation ───────────────────────────────────────────────────────
+
+  it('navigates to next month', async () => {
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1) })
+
+    const labelBefore = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const nextBtn = wrapper
+      .findAll('button[aria-label]')
+      .find((b) => b.attributes('aria-label') === 'Volgende maand')
+    await nextBtn!.trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(labelAfter).not.toBe(labelBefore)
+  })
+
+  it('navigates to previous month', async () => {
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1) })
+
+    const labelBefore = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const prevBtn = wrapper
+      .findAll('button[aria-label]')
+      .find((b) => b.attributes('aria-label') === 'Vorige maand')
+    await prevBtn!.trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(labelAfter).not.toBe(labelBefore)
+  })
+
+  // ── Marked dates ───────────────────────────────────────────────────────────
+
+  it('renders a dot for marked dates', () => {
+    const markedDates = [new Date(YEAR, MONTH, 10)]
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1), markedDates })
+
+    expect(wrapper.find('[class*="rounded-full"][class*="bg-cornflower"]').exists()).toBe(true)
+  })
+
+  // ── Disabled dates ─────────────────────────────────────────────────────────
+
+  it('disables specified dates', () => {
+    const disabledDates = [new Date(YEAR, MONTH, 15)]
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1), disabledDates })
+
+    const disabled = wrapper
+      .findAll('button[disabled]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    expect(disabled.length).toBeGreaterThan(0)
+  })
+
+  it('does not emit when clicking a disabled date', async () => {
+    const disabledDates = [new Date(YEAR, MONTH, 15)]
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1), disabledDates })
+
+    const disabled = wrapper
+      .findAll('button[disabled]')
+      .find((b) => /^\d{1,2}$/.test(b.text().trim()))
+    await disabled?.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  // ── minDate / maxDate ──────────────────────────────────────────────────────
+
+  it('disables dates before minDate', () => {
+    const minDate = new Date(YEAR, MONTH, 10)
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), minDate })
+
+    const disabled = wrapper
+      .findAll('button[disabled]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    expect(disabled.length).toBeGreaterThan(0)
+  })
+
+  it('disables dates after maxDate', () => {
+    const maxDate = new Date(YEAR, MONTH, 20)
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), maxDate })
+
+    const disabled = wrapper
+      .findAll('button[disabled]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    expect(disabled.length).toBeGreaterThan(0)
+  })
+
+  it('disables prev nav when already at minDate month', () => {
+    const minDate = new Date(YEAR, MONTH, 1)
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), minDate })
+
+    const prevBtn = wrapper.findAll('[class*="rounded-full"][type="button"]')[0]!
+    expect(prevBtn.attributes('disabled')).toBeDefined()
+  })
+
+  it('disables next nav when already at maxDate month', () => {
+    const maxDate = new Date(YEAR, MONTH, 28)
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), maxDate })
+
+    const navButtons = wrapper.findAll('[class*="rounded-full"][type="button"]')
+    const nextBtn = navButtons[navButtons.length - 1]!
+    expect(nextBtn.attributes('disabled')).toBeDefined()
+  })
+
+  it('does not navigate prev when at minDate month', async () => {
+    const minDate = new Date(YEAR, MONTH, 1)
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), minDate })
+
+    const prevBtn = wrapper.find('button[aria-label="Vorige maand"]')
+    await prevBtn.trigger('click')
+    await nextTick()
+
+    const label = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(label).toContain('Mrt')
+  })
+
+  it('does not navigate next when at maxDate month', async () => {
+    const maxDate = new Date(YEAR, MONTH, 28)
+    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), maxDate })
+
+    const nextBtn = wrapper.find('button[aria-label="Volgende maand"]')
+    await nextBtn.trigger('click')
+    await nextTick()
+
+    const label = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(label).toContain('Mrt')
+  })
+
+  // ── monthYearPicker ────────────────────────────────────────────────────────
+
+  it('month name is not a button without monthYearPicker prop', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    expect(header.find('button').exists()).toBe(false)
+  })
+
+  it('month name is a button with monthYearPicker prop', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    expect(header.find('button').exists()).toBe(true)
+  })
+
+  it('opens month picker when month name is clicked', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    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)
+  })
+
+  it('opens year picker when year is clicked', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const buttons = header.findAll('button')
+    await buttons[1]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="snap-y"]').exists()).toBe(true)
+  })
+
+  it('returns to days view after selecting a month', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    await header.find('button').trigger('click')
+    await nextTick()
+
+    const monthButtons = wrapper.findAll('[class*="grid-cols-3"] button')
+    await monthButtons[0]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="grid-cols-7"]').exists()).toBe(true)
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(false)
+  })
+
+  it('returns to months view after selecting a year', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    await header.findAll('button')[1]!.trigger('click')
+    await nextTick()
+
+    const yearButtons = wrapper.findAll('[class*="snap-center"]')
+    await yearButtons[0]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
+    expect(wrapper.find('[class*="snap-y"]').exists()).toBe(false)
+  })
+
+  it('selects correct date from month picker', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    await header.find('button').trigger('click')
+    await nextTick()
+
+    const monthButtons = wrapper.findAll('[class*="grid-cols-3"] button')
+    await monthButtons[0].trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(labelAfter).toContain('Jan')
+  })
+
+  it('selects correct year from year drum', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const headerButtons = header.findAll('button')
+    await headerButtons[1].trigger('click')
+    await nextTick()
+
+    const yearButtons = wrapper.findAll('[class*="snap-center"]')
+    const targetYear = (YEAR - 1).toString()
+    const targetBtn = yearButtons.find((btn) => btn.text().includes(targetYear))
+    await targetBtn!.trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(labelAfter).toContain(targetYear)
+  })
+})

package/src/components/Calendar/Calendar.vue

@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue'
+import {
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  eachDayOfInterval,
+  isSameDay,
+  isSameMonth,
+  addMonths,
+  subMonths,
+  isBefore,
+  isAfter,
+  startOfDay,
+  endOfDay,
+} from 'date-fns'
+import { nl } from 'date-fns/locale'
+import CalendarHeader from './_CalendarHeader.vue'
+import CalendarDayView from './_CalendarDayView.vue'
+import CalendarMonthView from './_CalendarMonthView.vue'
+import CalendarYearView from './_CalendarYearView.vue'
+import type { NexxtCalendarProps } from './calendar.types'
+
+export type { NexxtCalendarProps }
+
+type PickerView = 'days' | 'months' | 'years'
+type DayTransition = 'slide-next' | 'slide-prev' | 'fade'
+
+defineOptions({ name: 'NexxtCalendar' })
+
+const model = defineModel<Date | null>({ default: null })
+
+const emit = defineEmits<{
+  (e: 'select', day: Date): void
+}>()
+
+const {
+  locale = nl,
+  markedDates = [],
+  disabledDates = [],
+  minDate,
+  maxDate,
+  monthYearPicker = false,
+} = defineProps<NexxtCalendarProps>()
+
+// ── State ─────────────────────────────────────────────────────────────────────
+
+const viewDate = ref<Date>(model.value ? new Date(model.value) : new Date())
+const pickerView = ref<PickerView>('days')
+const dayViewRef = ref<InstanceType<typeof CalendarDayView> | null>(null)
+const dayTransition = ref<DayTransition>('fade')
+
+// ── Watchers ──────────────────────────────────────────────────────────────────
+
+watch(model, (val) => {
+  if (val) viewDate.value = new Date(val)
+})
+
+// ── Logic ─────────────────────────────────────────────────────────────────────
+
+const calendarDays = computed(() => {
+  const start = startOfWeek(startOfMonth(viewDate.value), { weekStartsOn: 1 })
+  const end = endOfWeek(endOfMonth(viewDate.value), { weekStartsOn: 1 })
+  return eachDayOfInterval({ start, end })
+})
+
+const isDisabled = (day: Date): boolean => {
+  if (disabledDates.some((d) => isSameDay(d, day))) return true
+  if (minDate && isBefore(day, startOfDay(minDate))) return true
+  if (maxDate && isAfter(day, endOfDay(maxDate))) return true
+  return false
+}
+
+// ── Views ─────────────────────────────────────────────────────────────────────
+
+const handleSelectDay = (day: Date) => {
+  if (isDisabled(day)) return
+  if (!isSameMonth(day, viewDate.value)) viewDate.value = startOfMonth(day)
+  model.value = day
+  emit('select', day)
+}
+
+const handleSelectMonth = (monthIndex: number) => {
+  dayTransition.value = 'fade'
+  viewDate.value = new Date(viewDate.value.getFullYear(), monthIndex, 1)
+  pickerView.value = 'days'
+}
+
+const handleSelectYear = (year: number) => {
+  viewDate.value = new Date(year, viewDate.value.getMonth(), 1)
+  pickerView.value = 'months'
+}
+
+// ── Navigation ────────────────────────────────────────────────────────────────
+
+const canGoPrev = computed(() => {
+  if (pickerView.value !== 'days') return false
+  if (!minDate) return true
+  return !isBefore(endOfMonth(subMonths(viewDate.value, 1)), startOfDay(minDate))
+})
+
+const canGoNext = computed(() => {
+  if (pickerView.value !== 'days') return false
+  if (!maxDate) return true
+  return !isAfter(startOfMonth(addMonths(viewDate.value, 1)), endOfDay(maxDate))
+})
+
+const handlePrev = () => {
+  if (!canGoPrev.value) return
+  dayTransition.value = 'slide-prev'
+  viewDate.value = subMonths(viewDate.value, 1)
+}
+
+const handleNext = () => {
+  if (!canGoNext.value) return
+  dayTransition.value = 'slide-next'
+  viewDate.value = addMonths(viewDate.value, 1)
+}
+
+const openMonthPicker = () => {
+  dayTransition.value = 'fade'
+  pickerView.value = 'months'
+}
+
+const openYearPicker = () => {
+  dayTransition.value = 'fade'
+  pickerView.value = 'years'
+}
+
+const closePicker = () => {
+  pickerView.value = 'months'
+}
+
+// ── Transitions ───────────────────────────────────────────────────────────────
+
+const fadeTransition = {
+  enterActiveClass: 'transition-opacity duration-200 ease-out',
+  enterFromClass: 'opacity-0',
+  leaveActiveClass: 'transition-opacity duration-150 ease-in',
+  leaveToClass: 'opacity-0',
+}
+
+const slideTransitions: Record<'slide-next' | 'slide-prev', object> = {
+  'slide-next': {
+    enterActiveClass: 'transition-all duration-200 ease-out',
+    enterFromClass: 'translate-x-full opacity-0',
+    leaveActiveClass: 'transition-all duration-200 ease-in absolute inset-0',
+    leaveToClass: '-translate-x-full opacity-0',
+  },
+  'slide-prev': {
+    enterActiveClass: 'transition-all duration-200 ease-out',
+    enterFromClass: '-translate-x-full opacity-0',
+    leaveActiveClass: 'transition-all duration-200 ease-in absolute inset-0',
+    leaveToClass: 'translate-x-full opacity-0',
+  },
+}
+
+const currentDayTransition = computed(() =>
+  dayTransition.value === 'fade' ? fadeTransition : slideTransitions[dayTransition.value],
+)
+</script>
+
+<template>
+  <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+    <CalendarHeader
+      :view-date="viewDate"
+      :picker-view="pickerView"
+      :month-year-picker="monthYearPicker"
+      :locale="locale"
+      :can-go-prev="canGoPrev"
+      :can-go-next="canGoNext"
+      @prev="handlePrev"
+      @next="handleNext"
+      @open-month-picker="openMonthPicker"
+      @open-year-picker="openYearPicker"
+      @close-picker="closePicker"
+    />
+
+    <div :class="['relative', pickerView === 'days' && 'overflow-hidden']">
+      <Transition
+        v-bind="currentDayTransition"
+        :mode="dayTransition === 'fade' ? 'out-in' : undefined"
+      >
+        <CalendarDayView
+          v-if="pickerView === 'days'"
+          ref="dayViewRef"
+          :key="`days-${viewDate.getFullYear()}-${viewDate.getMonth()}`"
+          :view-date="viewDate"
+          :calendar-days="calendarDays"
+          :model-value="model"
+          :marked-dates="markedDates"
+          :locale="locale"
+          :is-disabled="isDisabled"
+          @select="handleSelectDay"
+        />
+
+        <CalendarMonthView
+          v-else-if="pickerView === 'months'"
+          key="months"
+          :view-year="viewDate.getFullYear()"
+          :model-value="model"
+          :current-month="viewDate.getMonth()"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :locale="locale"
+          @select="handleSelectMonth"
+        />
+
+        <CalendarYearView
+          v-else-if="pickerView === 'years'"
+          key="years"
+          :view-year="viewDate.getFullYear()"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @select="handleSelectYear"
+        />
+      </Transition>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,145 @@
+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 })
+
+describe('CalendarDayView', () => {
+  it('renders the correct number of days', () => {
+    const wrapper = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: null,
+        markedDates: [],
+        locale: nl,
+        isDisabled: () => false,
+      },
+    })
+    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 = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: selectedDate,
+        markedDates: [],
+        locale: nl,
+        isDisabled: () => false,
+      },
+    })
+    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 = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: null,
+        markedDates,
+        locale: nl,
+        isDisabled: () => false,
+      },
+    })
+    // 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 = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: null,
+        markedDates: [],
+        locale: nl,
+        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 = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: null,
+        markedDates: [],
+        locale: nl,
+        isDisabled: () => false,
+      },
+    })
+    await wrapper.findAll('button')[10].trigger('click')
+    expect(wrapper.emitted('select')).toBeTruthy()
+    expect(wrapper.emitted('select')![0][0]).toBeInstanceOf(Date)
+  })
+
+  it('handles keyboard navigation (ArrowRight)', async () => {
+    const wrapper = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: null,
+        markedDates: [],
+        locale: nl,
+        isDisabled: () => false,
+      },
+      attachTo: document.body,
+    })
+    const buttons = wrapper.findAll('button')
+    await buttons[0].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 = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: null,
+        markedDates: [],
+        locale: nl,
+        isDisabled: () => false,
+      },
+    })
+    const buttons = wrapper.findAll('button')
+    await buttons[0].trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('select')).toBeTruthy()
+    await buttons[0].trigger('keydown', { key: ' ' })
+    expect(wrapper.emitted('select')![1]).toBeTruthy()
+  })
+
+  it('does not emit select for other keys', async () => {
+    const wrapper = mount(CalendarDayView, {
+      props: {
+        viewDate: VIEW_DATE,
+        calendarDays: DAYS,
+        modelValue: null,
+        markedDates: [],
+        locale: nl,
+        isDisabled: () => false,
+      },
+    })
+    const buttons = wrapper.findAll('button')
+    await buttons[0].trigger('keydown', { key: 'Tab' })
+    expect(wrapper.emitted('select')).toBeFalsy()
+  })
+})