tristan
b07e001006
- l'en-tête affiche toujours « Mois Année » avec chevron bas dans les 3 vues - le clic sur l'en-tête cycle jours -> mois -> années -> jours (goToHigherView -> cycleView) - la grille d'années cale l'année courante en index 4 (yearPageStart = courante - 4) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
|
|
|
|
export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
|
|
const isOpen = ref(false)
|
|
const viewMode = ref<'days' | 'months' | 'years'>('days')
|
|
|
|
const open = () => {
|
|
isOpen.value = true
|
|
viewMode.value = 'days'
|
|
}
|
|
const close = () => {
|
|
isOpen.value = false
|
|
viewMode.value = 'days'
|
|
}
|
|
// Le clic sur l'en-tête fait un cycle : jours → mois → années → jours.
|
|
const cycleView = () => {
|
|
if (viewMode.value === 'days') viewMode.value = 'months'
|
|
else if (viewMode.value === 'months') viewMode.value = 'years'
|
|
else viewMode.value = 'days'
|
|
}
|
|
|
|
const onMouseDown = (event: MouseEvent) => {
|
|
if (!isOpen.value || !rootRef.value) return
|
|
if (!rootRef.value.contains(event.target as Node)) close()
|
|
}
|
|
|
|
onMounted(() => document.addEventListener('mousedown', onMouseDown))
|
|
onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
|
|
|
|
return {isOpen, viewMode, open, close, cycleView}
|
|
}
|