72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<script lang="ts" setup>
|
|
import { useCalendar } from '@/stores/CalendarStore'
|
|
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
|
import {
|
|
PhCaretDoubleLeft,
|
|
PhCaretDoubleRight,
|
|
PhCaretLeft,
|
|
PhCaretRight
|
|
} from '@phosphor-icons/vue'
|
|
import Button from '../ui/button/Button.vue'
|
|
|
|
const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCalendar()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2">
|
|
<!-- Implement decrementDate to account for other mods -->
|
|
<TooltipProvider :delayDuration="250">
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Button variant="outline" size="icon" @click="decrementYear()">
|
|
<PhCaretDoubleLeft size="18" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Année précédente</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
<TooltipProvider :delayDuration="250">
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Button variant="outline" size="icon" @click="decrementMonth()">
|
|
<PhCaretLeft size="18" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Mois précédent</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
<TooltipProvider :delayDuration="250">
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Button variant="outline" size="icon" @click="incrementMonth()">
|
|
<PhCaretRight size="18" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Mois suivant</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
<TooltipProvider :delayDuration="250">
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Button variant="outline" size="icon" @click="incrementYear()">
|
|
<PhCaretDoubleRight size="18" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Année suivante</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
</template>
|