diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue index d0211910..2fc7f7cb 100644 --- a/src/runtime/components/Calendar.vue +++ b/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 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,10 +159,10 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar) > - + - + @@ -149,10 +170,10 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar) - + - +
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts index 7549019e..575f7d92 100644 --- a/test/components/Calendar.spec.ts +++ b/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 } }], diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap index 8cd1cc34..47ba61e5 100644 --- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap +++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap @@ -1958,6 +1958,362 @@ exports[`Calendar > renders with multiple correctly 1`] = `
" `; +exports[`Calendar > renders with nextMonth correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + +exports[`Calendar > renders with nextYear correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + exports[`Calendar > renders with numberOfMonths correctly 1`] = ` "
" `; +exports[`Calendar > renders with prevMonth correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + +exports[`Calendar > renders with prevYear correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + exports[`Calendar > renders with range correctly 1`] = ` "
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap index 9c9ee85b..4e57c69f 100644 --- a/test/components/__snapshots__/Calendar.spec.ts.snap +++ b/test/components/__snapshots__/Calendar.spec.ts.snap @@ -1958,6 +1958,362 @@ exports[`Calendar > renders with multiple correctly 1`] = `
" `; +exports[`Calendar > renders with nextMonth correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + +exports[`Calendar > renders with nextYear correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + exports[`Calendar > renders with numberOfMonths correctly 1`] = ` "
" `; +exports[`Calendar > renders with prevMonth correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + +exports[`Calendar > renders with prevYear correctly 1`] = ` +"
+
+
January 2025
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
29
+ 		+
30
+ 		+
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+ 		+
17
+ 		+
18
+
+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+ 		+
24
+ 		+
25
+
+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
1
+
+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+
+
+
+
Event Date, January 2025
+
+
" +`; + exports[`Calendar > renders with range correctly 1`] = ` "