feat(Calendar): allow year and month buttons styling (#3672)

Author: HugoRCD

src/runtime/components/Calendar.vue

@@ -3,6 +3,7 @@ import type { VariantProps } from 'tailwind-variants'
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
+import type { ButtonProps } from '../types'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
 import { tv } from '../utils/tv'
@@ -32,24 +33,44 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Omi
    * @IconifyIcon
    */
   nextYearIcon?: string
+  /**
+   * Configure the next year button.
+   * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+   */
+  nextYear?: ButtonProps
   /**
    * The icon to use for the next month control.
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
   nextMonthIcon?: string
+  /**
+   * Configure the next month button.
+   * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+   */
+  nextMonth?: ButtonProps
   /**
    * The icon to use for the previous year control.
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
    * @IconifyIcon
    */
   prevYearIcon?: string
+  /**
+   * Configure the prev year button.
+   * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+   */
+  prevYear?: ButtonProps
   /**
    * The icon to use for the previous month control.
    * @defaultValue appConfig.ui.icons.chevronLeft
    * @IconifyIcon
    */
   prevMonthIcon?: string
+  /**
+   * Configure the prev month button.
+   * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+   */
+  prevMonth?: ButtonProps
   /**
    * @defaultValue 'primary'
    */
@@ -138,21 +159,21 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
-        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
-        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
       </Calendar.Prev>
       <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
       </Calendar.Heading>
       <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
-        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
       </Calendar.Next>
       <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
-        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
     <div :class="ui.body({ class: props.ui?.body })">

test/components/Calendar.spec.ts

@@ -28,6 +28,10 @@ describe('Calendar', () => {
     ['with weekStartsOn', { props: { weekStartsOn: 1 } }],
     ['with weekdayFormat', { props: { weekdayFormat: 'short' } }],
     ['with numberOfMonths', { props: { numberOfMonths: 2 } }],
+    ['with nextYear', { props: { nextYear: { size: 'lg', color: 'primary' } } }],
+    ['with nextMonth', { props: { nextMonth: { size: 'lg', color: 'primary' } } }],
+    ['with prevYear', { props: { prevYear: { size: 'lg', color: 'primary' } } }],
+    ['with prevMonth', { props: { prevMonth: { size: 'lg', color: 'primary' } } }],
     ['without fixedWeeks', { props: { fixedWeeks: false } }],
     ['without monthControls', { props: { monthControls: false } }],
     ['without yearControls', { props: { yearControls: false } }],