refactor(Dates)!: remove getYears, getMonths and formatter (#839)

* refactor: remove redundant functions from Calendar components

* feat(radix-vue/date): add createYearRange function

* fix: refactor args of createYearRange

* docs: adjust docs

* fix: add default values for create year

* fix(Calendar/RangeCalendar): use utility functions in stories

* docs: update Calendar docs

docs/content/guides/dates.md

@@ -61,8 +61,8 @@ Specially designed to work well with [@internationalized/date](https://react-spe
 import {
   createDecade,
   createMonth,
-  createMonths,
   createYear,
+  createYearRange,
   getDaysInMonth,
   hasTime,
   isAfter,
@@ -95,5 +95,8 @@ isAfterOrSame(date, minDate) // returns true
 isBefore(date, maxDate) // returns true
 isBetweenInclusive(date, minDate, maxDate) // returns true
 isBetween(date, minDate, maxDate) // returns true
+createYear({ dateObj: new CalendarDate(1995, 8, 18), numberOfMonths: 2, pagedNavigation: true }) // returns an array of months as DateValue, centered around the dateObj taking into account the numberOfMonths and pagedNavigation when returning the months
+createDecade({ dateObj: new CalendarDate(1995, 8, 18), startIndex: -10, endIndex: 10 }) // returns a decade centered around the dateObj
+createYearRange({ start: new CalendarDate(1995, 8, 18), end: new CalendarDate(2005, 8, 18) }) // returns an array of years as DateValue between the start and end date
 ```
 

docs/content/meta/CalendarRoot.md

@@ -181,20 +181,5 @@
     'name': 'weekDays',
     'description': '<p>The days of the week</p>\n',
     'type': 'string[]'
-  },
-  {
-    'name': 'formatter',
-    'description': '<p>The formatter used inside the calendar for displaying dates</p>\n',
-    'type': 'Formatter'
-  },
-  {
-    'name': 'getMonths',
-    'description': '<p>The months that can be selected</p>\n',
-    'type': 'DateValue'
-  },
-  {
-    'name': 'getYears',
-    'description': '<p>The years that can be selected</p>\n',
-    'type': ''
   }
 ]" />

docs/content/meta/DatePickerCalendar.md

@@ -16,10 +16,5 @@
     'name': 'weekDays',
     'description': '',
     'type': 'string[]'
-  },
-  {
-    'name': 'formatter',
-    'description': '',
-    'type': 'Formatter'
   }
 ]" />

docs/content/meta/DateRangePickerCalendar.md

@@ -16,10 +16,5 @@
     'name': 'weekDays',
     'description': '',
     'type': 'string[]'
-  },
-  {
-    'name': 'formatter',
-    'description': '',
-    'type': 'Formatter'
   }
 ]" />

docs/content/meta/RangeCalendarRoot.md

@@ -174,20 +174,5 @@
     'name': 'weekDays',
     'description': '<p>The days of the week</p>\n',
     'type': 'string[]'
-  },
-  {
-    'name': 'formatter',
-    'description': '<p>The formatter used inside the calendar for displaying dates</p>\n',
-    'type': 'Formatter'
-  },
-  {
-    'name': 'getMonths',
-    'description': '<p>The months that can be selected</p>\n',
-    'type': 'DateValue'
-  },
-  {
-    'name': 'getYears',
-    'description': '<p>The years that can be selected</p>\n',
-    'type': ''
   }
 ]" />

packages/radix-vue/src/Calendar/CalendarRoot.vue

@@ -7,7 +7,7 @@ import { type Formatter, createContext, useDirection } from '@/shared'
 
 import { useCalendar, useCalendarState } from './useCalendar'
 import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
-import { type Grid, type Matcher, type WeekDayFormat, createDecade, createYear } from '@/date'
+import { type Grid, type Matcher, type WeekDayFormat } from '@/date'
 import type { Direction } from '@/shared/types'
 
 type CalendarRootContext = {
@@ -111,9 +111,9 @@ export const [injectCalendarRootContext, provideCalendarRootContext]
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, toRefs, watch } from 'vue'
+import { onMounted, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
-import { useMemoize, useVModel } from '@vueuse/core'
+import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(defineProps<CalendarRootProps>(), {
   defaultValue: undefined,
@@ -142,12 +142,6 @@ defineSlots<{
     grid: Grid<DateValue>[]
     /** The days of the week */
     weekDays: string[]
-    /** The formatter used inside the calendar for displaying dates */
-    formatter: Formatter
-    /** The months that can be selected */
-    getMonths: DateValue[]
-    /** The years that can be selected */
-    getYears: ({ startIndex, endIndex }: { startIndex?: number; endIndex: number }) => DateValue[]
   }): any
 }>()
 
@@ -279,24 +273,6 @@ function onDateChange(value: DateValue) {
   }
 }
 
-const getMonths = computed(() => {
-  const dateObj = placeholder.value.copy()
-  return createYear({
-    dateObj,
-    numberOfMonths: numberOfMonths.value,
-    pagedNavigation: pagedNavigation.value,
-  })
-})
-
-const getYears = useMemoize(({ startIndex, endIndex }: { startIndex?: number; endIndex: number }) => {
-  const dateObj = placeholder.value.copy()
-  return createDecade({
-    dateObj,
-    startIndex,
-    endIndex,
-  })
-})
-
 onMounted(() => {
   if (initialFocus.value)
     handleCalendarInitialFocus(parentElement.value)
@@ -351,9 +327,6 @@ provideCalendarRootContext({
       :date="placeholder"
       :grid="grid"
       :week-days="weekdays"
-      :formatter="formatter"
-      :get-months="getMonths"
-      :get-years="getYears"
     />
     <div
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"

packages/radix-vue/src/Calendar/story/CalendarPopover.story.vue

@@ -4,20 +4,22 @@ import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, Cale
 import { type Ref, ref } from 'vue'
 import { CalendarDate, type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 
-import { toDate } from '@/date'
+import { createDecade, createYear, toDate } from '@/date'
 
 import CalendarPopover from './_CalendarPopover.vue'
+import { useDateFormatter } from '@/shared'
 
 const value = ref(new CalendarDate(2024, 3, 20)) as Ref<DateValue>
 
 const placeholder = ref(today(getLocalTimeZone())) as Ref<DateValue>
+const formatter = useDateFormatter('en')
 </script>
 
 <template>
   <Story title="Calendar/Popover" :layout="{ type: 'single' }">
     <Variant title="default">
       <CalendarRoot
-        v-slot="{ weekDays, grid, getMonths, getYears, formatter, date }"
+        v-slot="{ weekDays, grid, date }"
         v-model="value"
         v-model:placeholder="placeholder"
         class="mt-6 rounded-[15px] border border-black bg-white p-[22px] shadow-md"
@@ -36,7 +38,7 @@ const placeholder = ref(today(getLocalTimeZone())) as Ref<DateValue>
               </template>
               <div class="grid grid-cols-4 bg-white rounded-[9px]">
                 <div
-                  v-for="month in getMonths"
+                  v-for="month in createYear({ dateObj: date })"
                   :key="month.toString()"
                   class="relative cursor-pointer flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black"
                   :class="{ 'before:absolute before:top-[5px] before:rounded-full before:w-1 before:h-1 before:block before:bg-grass9': placeholder.month === month.month }"
@@ -52,7 +54,7 @@ const placeholder = ref(today(getLocalTimeZone())) as Ref<DateValue>
               </template>
               <div class="grid grid-cols-4 bg-white rounded-[9px] gap-4">
                 <div
-                  v-for="yearValue in getYears({ startIndex: -10, endIndex: 10 })"
+                  v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
                   :key="yearValue.toString()"
                   class="relative cursor-pointer flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black"
                   :class="{ 'before:absolute before:top-[5px] before:rounded-full before:w-1 before:h-1 before:block before:bg-grass9': placeholder.year === yearValue.year }"

packages/radix-vue/src/DatePicker/DatePickerCalendar.vue

@@ -10,7 +10,7 @@ const rootContext = injectDatePickerRootContext()
 
 <template>
   <CalendarRoot
-    v-slot="{ weekDays, grid, date, formatter }"
+    v-slot="{ weekDays, grid, date }"
     v-bind="{
       isDateDisabled: rootContext.isDateDisabled,
       isDateUnavailable: rootContext.isDateUnavailable,
@@ -44,7 +44,6 @@ const rootContext = injectDatePickerRootContext()
       :date="date"
       :grid="grid"
       :week-days="weekDays"
-      :formatter="formatter"
     />
   </CalendarRoot>
 </template>

packages/radix-vue/src/DateRangePicker/DateRangePickerCalendar.vue

@@ -10,7 +10,7 @@ const rootContext = injectDateRangePickerRootContext()
 
 <template>
   <RangeCalendarRoot
-    v-slot="{ weekDays, grid, date, formatter }"
+    v-slot="{ weekDays, grid, date }"
     v-bind="{
       isDateDisabled: rootContext.isDateDisabled,
       isDateUnavailable: rootContext.isDateUnavailable,
@@ -43,7 +43,6 @@ const rootContext = injectDateRangePickerRootContext()
       :date="date"
       :grid="grid"
       :week-days="weekDays"
-      :formatter="formatter"
     />
   </RangeCalendarRoot>
 </template>

packages/radix-vue/src/RangeCalendar/RangeCalendarRoot.vue

@@ -5,7 +5,7 @@ import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
 import { type Formatter, createContext, useDirection } from '@/shared'
 import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
-import { type Grid, type Matcher, type WeekDayFormat, createDecade, createYear, isBefore } from '@/date'
+import { type Grid, type Matcher, type WeekDayFormat, isBefore } from '@/date'
 import type { DateRange } from '@/shared/date'
 import { useRangeCalendarState } from './useRangeCalendar'
 import { useCalendar } from '@/Calendar/useCalendar'
@@ -103,9 +103,9 @@ export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext]
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { onMounted, ref, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
-import { useMemoize, useVModel } from '@vueuse/core'
+import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   defaultValue: undefined,
@@ -135,12 +135,6 @@ defineSlots<{
     grid: Grid<DateValue>[]
     /** The days of the week */
     weekDays: string[]
-    /** The formatter used inside the calendar for displaying dates */
-    formatter: Formatter
-    /** The months that can be selected */
-    getMonths: DateValue[]
-    /** The years that can be selected */
-    getYears: ({ startIndex, endIndex }: { startIndex?: number; endIndex: number }) => DateValue[]
   }): any
 }>()
 
@@ -271,24 +265,6 @@ watch([startValue, endValue], () => {
   }
 })
 
-const getMonths = computed(() => {
-  const dateObj = placeholder.value.copy()
-  return createYear({
-    dateObj,
-    numberOfMonths: numberOfMonths.value,
-    pagedNavigation: pagedNavigation.value,
-  })
-})
-
-const getYears = useMemoize(({ startIndex, endIndex }: { startIndex?: number; endIndex: number }) => {
-  const dateObj = placeholder.value.copy()
-  return createDecade({
-    dateObj,
-    startIndex,
-    endIndex,
-  })
-})
-
 provideRangeCalendarRootContext({
   isDateUnavailable,
   startValue,
@@ -354,9 +330,6 @@ onMounted(() => {
       :date="placeholder"
       :grid="grid"
       :week-days="weekdays"
-      :formatter="formatter"
-      :get-months="getMonths"
-      :get-years="getYears"
     />
   </Primitive>
 </template>

packages/radix-vue/src/RangeCalendar/story/RangeCalendarPopover.story.vue

@@ -5,16 +5,18 @@ import { type Ref, ref } from 'vue'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 
 import CalendarPopover from '@/Calendar/story/_CalendarPopover.vue'
-import { toDate } from '@/shared'
+import { createDecade, createYear, toDate } from '@/date'
+import { useDateFormatter } from '@/shared'
 
 const placeholder = ref(today(getLocalTimeZone())) as Ref<DateValue>
+const formatter = useDateFormatter('en')
 </script>
 
 <template>
   <Story title="Range Calendar/Popover" :layout="{ type: 'single' }">
     <Variant title="default">
       <RangeCalendarRoot
-        v-slot="{ weekDays, grid, getMonths, getYears, formatter, date }"
+        v-slot="{ weekDays, grid, date }"
         v-model:placeholder="placeholder"
         class="mt-6 rounded-[15px] border border-black bg-white p-[22px] shadow-md"
         fixed-weeks
@@ -32,7 +34,7 @@ const placeholder = ref(today(getLocalTimeZone())) as Ref<DateValue>
               </template>
               <div class="grid grid-cols-4 bg-white rounded-[9px]">
                 <div
-                  v-for="month in getMonths"
+                  v-for="month in createYear({ dateObj: date })"
                   :key="month.toString()"
                   class="relative cursor-pointer flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black"
                   :class="{ 'before:absolute before:top-[5px] before:rounded-full before:w-1 before:h-1 before:block before:bg-grass9': date.month === month.month }"
@@ -48,7 +50,7 @@ const placeholder = ref(today(getLocalTimeZone())) as Ref<DateValue>
               </template>
               <div class="grid grid-cols-4 bg-white rounded-[9px] gap-4">
                 <div
-                  v-for="yearValue in getYears({ startIndex: -10, endIndex: 10 })"
+                  v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
                   :key="yearValue.toString()"
                   class="relative cursor-pointer flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black"
                   :class="{ 'before:absolute before:top-[5px] before:rounded-full before:w-1 before:h-1 before:block before:bg-grass9': date.year === yearValue.year }"

packages/radix-vue/src/date/calendar.ts

@@ -11,7 +11,7 @@ export type WeekDayFormat = 'narrow' | 'short' | 'long'
 
 export type CreateSelectProps = {
   /**
-   * The date object representing the month's date (usually the first day of the month).
+   * The date object representing the date (usually the first day of the month/year).
    */
   dateObj: DateValue
 }
@@ -104,7 +104,7 @@ type SetMonthProps = CreateMonthProps & {
 
 type SetYearProps = CreateSelectProps & {
   numberOfMonths?: number
-  pagedNavigation: boolean
+  pagedNavigation?: boolean
 }
 
 type SetDecadeProps = CreateSelectProps & {
@@ -136,7 +136,7 @@ export function createDecade(props: SetDecadeProps): DateValue[] {
 }
 
 export function createYear(props: SetYearProps): DateValue[] {
-  const { dateObj, numberOfMonths, pagedNavigation } = props
+  const { dateObj, numberOfMonths = 1, pagedNavigation = false } = props
 
   if (numberOfMonths && pagedNavigation) {
     const monthsArray = Array.from({ length: Math.floor(12 / numberOfMonths) }, (_, i) => startOfMonth(dateObj.set({ month: i * numberOfMonths + 1 })))
@@ -183,3 +183,20 @@ export function createMonths(props: SetMonthProps) {
 
   return months
 }
+
+export function createYearRange({ start, end }: { start?: DateValue; end?: DateValue }): DateValue[] {
+  const years: DateValue[] = []
+
+  if (!start || !end)
+    return years
+
+  let current = startOfYear(start)
+
+  while (current.compare(end) <= 0) {
+    years.push(current)
+    // Move to the first day of the next year
+    current = startOfYear(current.add({ years: 1 }))
+  }
+
+  return years
+}