-
-
-
+ openYear: () => void
+ setYear: ($event: number) => void
+ }
+ selectorMode?: boolean
+ selectorFocus?: SelectorFocus
+ pickerViewMode?: PickerViewMode
+ panelName?: SelectionPanel
+}>(), {
+ selectorMode: false,
+ selectorFocus: 'month',
+ pickerViewMode: 'calendar',
+ panelName: 'previous',
+})
+
+const emit = defineEmits<{
+ (e: 'enter-selector-mode', payload: { panel: SelectionPanel; focus: SelectorFocus }): void
+ (e: 'toggle-picker-view', payload: { panel: SelectionPanel; focus: SelectorFocus }): void
+ (e: 'step-month', payload: { panel: SelectionPanel; delta: -1 | 1 }): void
+}>()
+
+const SIDE_NAV_BUTTON_CLASS
+ = 'p-1.5 rounded-full bg-white text-vtd-secondary-600 transition-colors border border-transparent hover:bg-vtd-secondary-100 hover:text-vtd-secondary-900 focus:bg-vtd-primary-50 focus:text-vtd-secondary-900 focus:border-vtd-primary-300 focus:ring-3 focus:ring-vtd-primary-500/10 focus:outline-hidden dark:bg-vtd-secondary-800 dark:text-vtd-secondary-300 dark:hover:bg-vtd-secondary-700 dark:hover:text-vtd-secondary-300 dark:focus:bg-vtd-secondary-600/50 dark:focus:text-vtd-secondary-100 dark:focus:border-vtd-primary-500 dark:focus:ring-vtd-primary-500/25'
+
+const isSelectorWheelView = computed(() => {
+ return props.selectorMode && props.pickerViewMode === 'selector'
+})
+
+function isMonthSideNavigation() {
+ return props.selectorMode || props.panel.calendar
+}
+
+function sideButtonAriaLabel(direction: 'previous' | 'next') {
+ const subject = isMonthSideNavigation() ? 'month' : 'year'
+ const verb = direction === 'previous' ? 'Previous' : 'Next'
+ return `${verb} ${subject}`
+}
+
+function sideButtonPath(direction: 'previous' | 'next') {
+ if (isMonthSideNavigation())
+ return direction === 'previous' ? 'M15 19l-7-7 7-7' : 'M9 5l7 7-7 7'
+ return direction === 'previous'
+ ? 'M11 19l-7-7 7-7m8 14l-7-7 7-7'
+ : 'M13 5l7 7-7 7M5 5l7 7-7 7'
+}
+
+function onHeaderValueClick(focus: SelectorFocus) {
+ const openLegacyPanel = () => {
+ if (focus === 'month')
+ props.calendar.openMonth()
+ else
+ props.calendar.openYear()
+ }
+
+ if (!props.selectorMode) {
+ openLegacyPanel()
+ return
+ }
+
+ if (props.pickerViewMode === 'selector') {
+ emit('toggle-picker-view', { panel: props.panelName, focus })
+ return
+ }
+
+ emit('enter-selector-mode', { panel: props.panelName, focus })
+}
+
+function onSelectorHeaderClick(focus: SelectorFocus = 'month') {
+ onHeaderValueClick(focus)
+}
+
+const selectorMonthTextRef = ref
(null)
+const selectorYearTextRef = ref(null)
+
+function resolveSelectorFocusFromClick(event: MouseEvent): SelectorFocus {
+ // Keyboard-triggered click events (Enter/Space) report detail=0.
+ if (event.detail === 0)
+ return props.selectorFocus
+
+ const target = event.target
+ if (target instanceof Node) {
+ if (selectorMonthTextRef.value?.contains(target))
+ return 'month'
+ if (selectorYearTextRef.value?.contains(target))
+ return 'year'
+ }
+
+ const currentTarget = event.currentTarget
+ if (currentTarget instanceof HTMLElement) {
+ const rect = currentTarget.getBoundingClientRect()
+ const clickX = event.clientX - rect.left
+ if (clickX >= 0 && clickX <= rect.width)
+ return clickX < (rect.width / 2) ? 'month' : 'year'
+ }
+
+ return props.selectorFocus
+}
+
+function onSelectorHeaderClickWithHeuristic(event: MouseEvent) {
+ onSelectorHeaderClick(resolveSelectorFocusFromClick(event))
+}
+
+function onSidePreviousClick() {
+ if (isSelectorWheelView.value) {
+ emit('step-month', { panel: props.panelName, delta: -1 })
+ return
+ }
+
+ if (isMonthSideNavigation()) {
+ props.calendar.onPrevious()
+ return
+ }
+ props.calendar.onPreviousYear()
+}
+
+function onSideNextClick() {
+ if (isSelectorWheelView.value) {
+ emit('step-month', { panel: props.panelName, delta: 1 })
+ return
+ }
+
+ if (isMonthSideNavigation()) {
+ props.calendar.onNext()
+ return
+ }
+ props.calendar.onNextYear()
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ yearAriaAnnouncement }}
+
+
+
+
+
+
+
+
+
+