86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<template>
|
||
<div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
|
||
<button
|
||
type="button"
|
||
data-test="header-prev"
|
||
class="ml-2 flex self-start rounded"
|
||
:aria-label="prevLabel"
|
||
@click="emit('prev')"
|
||
>
|
||
<Icon
|
||
icon="mdi:chevron-left"
|
||
:width="25"
|
||
:height="25"
|
||
/>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
data-test="header-toggle"
|
||
class="flex gap-1 rounded text-base font-medium"
|
||
@click="viewMode !== 'years' && emit('toggle-view')"
|
||
>
|
||
<span class="mt-[2px]">{{ label }}</span>
|
||
<Icon
|
||
v-if="viewMode !== 'years'"
|
||
icon="mdi:chevron-down"
|
||
:width="25"
|
||
:height="25"
|
||
/>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
data-test="header-next"
|
||
class="mr-2 flex self-start rounded"
|
||
:aria-label="nextLabel"
|
||
@click="emit('next')"
|
||
>
|
||
<Icon
|
||
icon="mdi:chevron-right"
|
||
:width="25"
|
||
:height="25"
|
||
/>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {computed} from 'vue'
|
||
import {Icon} from '@iconify/vue'
|
||
|
||
defineOptions({name: 'MalioDateCalendarHeader'})
|
||
|
||
const props = defineProps<{
|
||
viewMode: 'days' | 'months' | 'years'
|
||
currentMonth: number
|
||
currentYear: number
|
||
yearPageStart: number
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'prev' | 'next' | 'toggle-view'): void
|
||
}>()
|
||
|
||
const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
|
||
|
||
const label = computed(() => {
|
||
if (props.viewMode === 'years') return `${props.yearPageStart} – ${props.yearPageStart + 11}`
|
||
if (props.viewMode === 'months') return `${props.currentYear}`
|
||
const name = monthsLong[props.currentMonth]
|
||
return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
|
||
})
|
||
|
||
const prevLabel = computed(() =>
|
||
props.viewMode === 'days' ? 'Mois précédent'
|
||
: props.viewMode === 'months' ? 'Année précédente'
|
||
: 'Période précédente',
|
||
)
|
||
const nextLabel = computed(() =>
|
||
props.viewMode === 'days' ? 'Mois suivant'
|
||
: props.viewMode === 'months' ? 'Année suivante'
|
||
: 'Période suivante',
|
||
)
|
||
</script>
|