@nexxtmove/ui 0.1.23 → 0.1.24

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

@@ -6,63 +6,47 @@ 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 = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: null,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-      },
-    })
+    const wrapper = mountMonthView({})
     const buttons = wrapper.findAll('button')
     expect(buttons.length).toBe(12)
   })
 
   it('highlights the selected month', () => {
-    const selectedDate = new Date(VIEW_YEAR, 5, 15) // June
-    const wrapper = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: selectedDate,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-      },
-    })
+    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(VIEW_YEAR, 2, 1) // March 1st
-    const wrapper = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: null,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-        minDate,
-      },
-    })
+    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')
+    expect(disabledButtons[0]?.text()).toBe('Jan')
+    expect(disabledButtons[1]?.text()).toBe('Feb')
   })
 
   it('emits select event when a month is clicked', async () => {
-    const wrapper = mount(CalendarMonthView, {
-      props: {
-        viewYear: VIEW_YEAR,
-        modelValue: null,
-        currentMonth: CURRENT_MONTH,
-        locale: nl,
-      },
-    })
-    await wrapper.findAll('button')[5].trigger('click')
-    expect(wrapper.emitted('select')).toBeTruthy()
-    expect(wrapper.emitted('select')![0][0]).toBe(5)
+    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

@@ -1,6 +1,7 @@
 <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 {
@@ -10,6 +11,7 @@ interface CalendarMonthViewProps {
   minDate?: Date
   maxDate?: Date
   locale: Locale
+  timezone: string
 }
 
 const props = defineProps<CalendarMonthViewProps>()
@@ -19,7 +21,7 @@ const emit = defineEmits<{
 
 const monthItems = computed(() =>
   Array.from({ length: 12 }, (_, i) => {
-    const d = new Date(props.viewYear, i, 1)
+    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) }
   }),
@@ -27,17 +29,24 @@ const monthItems = computed(() =>
 
 const isMonthDisabled = (i: number): boolean => {
   const y = props.viewYear
-  if (props.minDate && endOfMonth(new Date(y, i)) < startOfDay(props.minDate)) return true
-  if (props.maxDate && startOfMonth(new Date(y, i)) > endOfDay(props.maxDate)) return true
+  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 => {
-  return (
-    !!props.modelValue &&
-    props.modelValue.getFullYear() === props.viewYear &&
-    props.modelValue.getMonth() === i
-  )
+  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 => {

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

@@ -1,10 +1,12 @@
 <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>()
@@ -16,8 +18,12 @@ const YEAR_ITEM_H = 36 // px — matches h-9
 const yearScrollerRef = ref<HTMLElement | null>(null)
 
 const yearRange = computed(() => {
-  const min = props.minDate ? props.minDate.getFullYear() : props.viewYear - 100
-  const max = props.maxDate ? props.maxDate.getFullYear() : props.viewYear + 20
+  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)
 })
 

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

@@ -7,4 +7,5 @@ export interface NexxtCalendarProps {
   minDate?: Date
   maxDate?: Date
   monthYearPicker?: boolean
+  timezone?: string
 }

package/src/components/DatePicker/DatePicker.vue

@@ -24,12 +24,15 @@ const props = withDefaults(defineProps<NexxtDatePickerProps>(), {
 
 const PICKER_ONLY_KEYS = new Set(['placeholder', 'anchor', 'autoClose'])
 
-const calendarProps = computed(
-  (): NexxtCalendarProps =>
-    Object.fromEntries(
-      Object.entries(props).filter(([key]) => !PICKER_ONLY_KEYS.has(key)),
-    ) as NexxtCalendarProps,
-)
+const calendarProps = computed((): NexxtCalendarProps => {
+  const commonProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !PICKER_ONLY_KEYS.has(key)),
+  )
+  return {
+    timezone: 'UTC',
+    ...commonProps,
+  } as NexxtCalendarProps
+})
 
 // ── State ─────────────────────────────────────────────────────────────────────