@nexxtmove/ui 0.1.22 → 0.1.24

package/src/components/Calendar/_CalendarDayView.vue

@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+import { isSameDay, isSameMonth, format } from 'date-fns'
+import { toZonedTime } from 'date-fns-tz'
+import type { Locale } from 'date-fns'
+
+interface CalendarDayViewProps {
+  viewDate: Date
+  calendarDays: Date[]
+  modelValue: Date | null
+  markedDates: Date[]
+  locale: Locale
+  isDisabled: (day: Date) => boolean
+  timezone: string
+}
+
+const props = defineProps<CalendarDayViewProps>()
+const emit = defineEmits<{
+  (e: 'select', day: Date): void
+}>()
+
+const dayButtonsRef = ref<HTMLElement[]>([])
+
+const isTodayByTimezone = (day: Date): boolean => {
+  const zonedDay = toZonedTime(day, props.timezone)
+  const nowZoned = toZonedTime(new Date(), props.timezone)
+  return isSameDay(zonedDay, nowZoned)
+}
+
+const isSelected = (day: Date): boolean => {
+  return props.modelValue ? isSameDay(day, props.modelValue) : false
+}
+
+const isMarked = (day: Date): boolean => {
+  return props.markedDates.some((d) => isSameDay(d, day))
+}
+
+const weeks = computed(() => {
+  const result: Date[][] = []
+  for (let i = 0; i < props.calendarDays.length; i += 7) {
+    result.push(props.calendarDays.slice(i, i + 7))
+  }
+  return result
+})
+
+const weekDayLabels = computed(() => {
+  if (props.calendarDays.length === 0) return []
+  // Take first 7 days to get labels
+  return props.calendarDays.slice(0, 7).map((d) => {
+    const raw = format(d, 'EEEEEE', { locale: props.locale })
+    return raw.charAt(0).toUpperCase() + raw.slice(1)
+  })
+})
+
+const handleKeydown = (event: KeyboardEvent, dayIndex: number) => {
+  let nextIdx = dayIndex
+
+  switch (event.key) {
+    case 'ArrowRight':
+      nextIdx++
+      break
+    case 'ArrowLeft':
+      nextIdx--
+      break
+    case 'ArrowDown':
+      nextIdx += 7
+      break
+    case 'ArrowUp':
+      nextIdx -= 7
+      break
+    case 'Enter':
+    case ' ': {
+      event.preventDefault()
+      const selectedDay = props.calendarDays[dayIndex]
+      if (selectedDay) emit('select', selectedDay)
+      return
+    }
+    default:
+      return
+  }
+
+  if (nextIdx >= 0 && nextIdx < props.calendarDays.length) {
+    event.preventDefault()
+    // We don't change viewDate here, we let the parent handle that if needed
+    // or we just move focus. For better UX in a grid, we usually just move focus.
+    dayButtonsRef.value[nextIdx]?.focus()
+  }
+}
+
+// Focus the currently selected day or today when mounted
+onMounted(() => {
+  const focusIdx = props.calendarDays.findIndex(
+    (d) =>
+      (props.modelValue && isSameDay(d, props.modelValue)) ||
+      (!props.modelValue && isTodayByTimezone(d)),
+  )
+  if (focusIdx !== -1) {
+    // We don't auto-focus on mount to avoid stealing focus from the popover,
+    // but we make it available for the parent to trigger if needed.
+  }
+})
+
+defineExpose({
+  focus: (date: Date) => {
+    const idx = props.calendarDays.findIndex((d) => isSameDay(d, date))
+    if (idx !== -1) dayButtonsRef.value[idx]?.focus()
+  },
+})
+</script>
+
+<template>
+  <div class="calendar-day-view" role="grid" aria-label="Kalender">
+    <div class="mb-1 grid grid-cols-7" role="row">
+      <div
+        v-for="label in weekDayLabels"
+        :key="label"
+        class="flex h-8 items-center justify-center font-medium text-xs text-gray-500"
+        role="columnheader"
+        :aria-label="label"
+      >
+        {{ label }}
+      </div>
+    </div>
+    <div v-for="(week, weekIdx) in weeks" :key="weekIdx" class="grid grid-cols-7" role="row">
+      <div
+        v-for="(day, dayIdx) in week"
+        :key="day.toISOString()"
+        class="flex items-center justify-center py-0.5"
+        role="gridcell"
+        :aria-selected="isSelected(day)"
+        :aria-disabled="isDisabled(day)"
+      >
+        <button
+          ref="dayButtonsRef"
+          type="button"
+          :disabled="isDisabled(day)"
+          :aria-label="format(day, 'd MMMM yyyy', { locale })"
+          :tabindex="isSameMonth(day, viewDate) ? 0 : -1"
+          :class="[
+            'relative flex h-8 w-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1',
+            !isSameMonth(day, viewDate) ? 'text-gray-300' : 'text-gray-900',
+            isSelected(day) ? 'bg-cornflower-blue-500 font-medium text-white!' : '',
+            isTodayByTimezone(day) && !isSelected(day)
+              ? 'font-medium text-cornflower-blue-500! ring-1 ring-cornflower-blue-500'
+              : '',
+            isTodayByTimezone(day) && isSelected(day)
+              ? 'ring-2 ring-cornflower-blue-500 ring-offset-2'
+              : '',
+            !isDisabled(day) && !isSelected(day)
+              ? 'cursor-pointer hover:bg-cornflower-blue-50'
+              : '',
+            isDisabled(day) ? 'cursor-not-allowed opacity-30' : '',
+          ]"
+          @click="emit('select', day)"
+          @keydown="handleKeydown($event, weekIdx * 7 + dayIdx)"
+        >
+          <span aria-hidden="true">{{ format(day, 'd') }}</span>
+          <span
+            v-if="isMarked(day)"
+            :class="[
+              'absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full',
+              isSelected(day) ? 'bg-white' : 'bg-cornflower-blue-500',
+            ]"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/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/Calendar/_CalendarHeader.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { format } from 'date-fns'
+import type { Locale } from 'date-fns'
+import NexxtIcon from '../Icon/Icon.vue'
+
+interface CalendarHeaderProps {
+  viewDate: Date
+  pickerView: 'days' | 'months' | 'years'
+  monthYearPicker: boolean
+  locale: Locale
+  canGoPrev: boolean
+  canGoNext: boolean
+}
+
+const props = defineProps<CalendarHeaderProps>()
+const emit = defineEmits<{
+  (e: 'prev'): void
+  (e: 'next'): void
+  (e: 'openMonthPicker'): void
+  (e: 'openYearPicker'): void
+  (e: 'closePicker'): void
+}>()
+
+const monthName = computed(() => {
+  const raw = format(props.viewDate, 'MMM', { locale: props.locale }).replace('.', '').trim()
+  return raw.charAt(0).toUpperCase() + raw.slice(1) + '.'
+})
+
+const yearValue = computed(() => format(props.viewDate, 'yyyy'))
+
+const monthTransition = {
+  enterActiveClass: 'transition-all duration-200 ease-out',
+  enterFromClass: 'translate-y-full',
+  leaveActiveClass: 'transition-all duration-200 ease-out absolute inset-x-0 top-0',
+  leaveToClass: '-translate-y-full',
+}
+</script>
+
+<template>
+  <div class="mb-4 flex items-center justify-between">
+    <!-- Left: prev (only in days view) or back (in year view) -->
+    <button
+      v-if="pickerView === 'days'"
+      type="button"
+      :disabled="!canGoPrev"
+      class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30"
+      @click="emit('prev')"
+      aria-label="Vorige maand"
+    >
+      <NexxtIcon name="chevron-left" class="text-xs" />
+    </button>
+    <button
+      v-else-if="pickerView === 'years'"
+      type="button"
+      class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300"
+      @click="emit('closePicker')"
+      aria-label="Terug naar maanden"
+    >
+      <NexxtIcon name="arrow-left" class="text-xs" />
+    </button>
+    <div v-else class="h-7 w-7" />
+
+    <!-- Center: month + year labels -->
+    <div
+      class="flex items-center gap-1 font-normal text-sm text-cornflower-blue-600"
+      role="status"
+      aria-live="polite"
+    >
+      <!-- Month name — only in days view -->
+      <div v-if="pickerView === 'days'" class="relative h-5 overflow-hidden">
+        <Transition v-bind="monthTransition">
+          <button
+            v-if="monthYearPicker"
+            :key="`button-${monthName}`"
+            type="button"
+            class="block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700"
+            @click="emit('openMonthPicker')"
+          >
+            {{ monthName }}
+          </button>
+          <span v-else :key="monthName" class="block leading-5 whitespace-nowrap">
+            {{ monthName }}
+          </span>
+        </Transition>
+      </div>
+
+      <!-- Year — days + months view -->
+      <div v-if="pickerView !== 'years'" class="relative h-5 overflow-hidden">
+        <Transition v-bind="monthTransition">
+          <button
+            v-if="monthYearPicker"
+            :key="`button-${yearValue}`"
+            type="button"
+            class="block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700"
+            @click="emit('openYearPicker')"
+          >
+            {{ yearValue }}
+          </button>
+          <span v-else :key="yearValue" class="block leading-5 whitespace-nowrap">
+            {{ yearValue }}
+          </span>
+        </Transition>
+      </div>
+
+      <!-- Years view: static title -->
+      <span v-if="pickerView === 'years'">Kies jaar</span>
+    </div>
+
+    <!-- Right: next (only in days view) -->
+    <button
+      v-if="pickerView === 'days'"
+      type="button"
+      :disabled="!canGoNext"
+      class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30"
+      @click="emit('next')"
+      aria-label="Volgende maand"
+    >
+      <NexxtIcon name="chevron-right" class="text-xs" />
+    </button>
+    <div v-else class="h-7 w-7" />
+  </div>
+</template>

package/src/components/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/Calendar/_CalendarMonthView.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { format, startOfMonth, endOfMonth, startOfDay, endOfDay } from 'date-fns'
+import { toZonedTime } from 'date-fns-tz'
+import type { Locale } from 'date-fns'
+
+interface CalendarMonthViewProps {
+  viewYear: number
+  modelValue: Date | null
+  currentMonth: number
+  minDate?: Date
+  maxDate?: Date
+  locale: Locale
+  timezone: string
+}
+
+const props = defineProps<CalendarMonthViewProps>()
+const emit = defineEmits<{
+  (e: 'select', month: number): void
+}>()
+
+const monthItems = computed(() =>
+  Array.from({ length: 12 }, (_, i) => {
+    const d = toZonedTime(new Date(Date.UTC(props.viewYear, i, 1)), props.timezone)
+    const raw = format(d, 'LLL', { locale: props.locale }).replace('.', '').trim()
+    return { index: i, label: raw.charAt(0).toUpperCase() + raw.slice(1) }
+  }),
+)
+
+const isMonthDisabled = (i: number): boolean => {
+  const y = props.viewYear
+  const monthDate = toZonedTime(new Date(Date.UTC(y, i, 1)), props.timezone)
+  if (
+    props.minDate &&
+    endOfMonth(monthDate) < startOfDay(toZonedTime(props.minDate, props.timezone))
+  )
+    return true
+  if (
+    props.maxDate &&
+    startOfMonth(monthDate) > endOfDay(toZonedTime(props.maxDate, props.timezone))
+  )
+    return true
+  return false
+}
+
+const isMonthSelected = (i: number): boolean => {
+  if (!props.modelValue) return false
+  const zonedModel = toZonedTime(props.modelValue, props.timezone)
+  return zonedModel.getFullYear() === props.viewYear && zonedModel.getMonth() === i
+}
+
+const isMonthCurrent = (i: number): boolean => {
+  return i === props.currentMonth
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-1.5" role="list">
+    <button
+      v-for="item in monthItems"
+      :key="item.index"
+      type="button"
+      :disabled="isMonthDisabled(item.index)"
+      :aria-selected="isMonthSelected(item.index)"
+      :class="[
+        'flex h-10 items-center justify-center rounded-lg text-sm transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1',
+        isMonthSelected(item.index)
+          ? 'bg-cornflower-blue-500 font-medium text-white'
+          : isMonthCurrent(item.index)
+            ? 'font-medium text-cornflower-blue-500 ring-1 ring-cornflower-blue-500'
+            : 'text-gray-700 hover:bg-cornflower-blue-50',
+        isMonthDisabled(item.index) ? 'cursor-not-allowed opacity-30' : 'cursor-pointer',
+      ]"
+      @click="emit('select', item.index)"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>

package/src/components/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/Calendar/_CalendarYearView.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { ref, computed, nextTick, onMounted } from 'vue'
+import { toZonedTime } from 'date-fns-tz'
+
+interface CalendarYearViewProps {
+  viewYear: number
+  minDate?: Date
+  maxDate?: Date
+  timezone: string
+}
+
+const props = defineProps<CalendarYearViewProps>()
+const emit = defineEmits<{
+  (e: 'select', year: number): void
+}>()
+
+const YEAR_ITEM_H = 36 // px — matches h-9
+const yearScrollerRef = ref<HTMLElement | null>(null)
+
+const yearRange = computed(() => {
+  const min = props.minDate
+    ? toZonedTime(props.minDate, props.timezone).getFullYear()
+    : props.viewYear - 100
+  const max = props.maxDate
+    ? toZonedTime(props.maxDate, props.timezone).getFullYear()
+    : props.viewYear + 20
+  return Array.from({ length: max - min + 1 }, (_, i) => min + i)
+})
+
+const scrollToYear = (year: number) => {
+  if (!yearScrollerRef.value) return
+  const idx = yearRange.value.indexOf(year)
+  if (idx !== -1) {
+    yearScrollerRef.value.scrollTop = idx * YEAR_ITEM_H
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  scrollToYear(props.viewYear)
+})
+</script>
+
+<template>
+  <div class="relative h-45" role="list">
+    <!-- Selection zone highlight -->
+    <div
+      class="pointer-events-none absolute inset-x-0 top-1/2 h-9 -translate-y-1/2 rounded-lg bg-cornflower-blue-50 ring-1 ring-cornflower-blue-200"
+    />
+    <!-- Fade top -->
+    <div
+      class="pointer-events-none absolute inset-x-0 top-0 z-10 h-16 bg-linear-to-b from-white to-transparent"
+    />
+    <!-- Fade bottom -->
+    <div
+      class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16 bg-linear-to-t from-white to-transparent"
+    />
+    <!-- Scrollable drum -->
+    <div
+      ref="yearScrollerRef"
+      class="relative h-full snap-y snap-mandatory overflow-y-scroll [&::-webkit-scrollbar]:hidden"
+      style="scrollbar-width: none"
+    >
+      <div class="h-18" />
+      <button
+        v-for="year in yearRange"
+        :key="year"
+        type="button"
+        :aria-selected="year === viewYear"
+        class="flex h-9 w-full snap-center items-center justify-center text-sm transition-colors duration-150 outline-none"
+        :class="
+          year === viewYear
+            ? 'font-semibold text-cornflower-blue-500'
+            : 'cursor-pointer text-gray-700 hover:text-cornflower-blue-500'
+        "
+        @click="emit('select', year)"
+      >
+        {{ year }}
+      </button>
+      <div class="h-18" />
+    </div>
+  </div>
+</template>

package/src/components/Calendar/calendar.types.ts

@@ -0,0 +1,11 @@
+import type { Locale } from 'date-fns'
+
+export interface NexxtCalendarProps {
+  locale?: Locale
+  markedDates?: Date[]
+  disabledDates?: Date[]
+  minDate?: Date
+  maxDate?: Date
+  monthYearPicker?: boolean
+  timezone?: string
+}