70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import type { CalendarMonth } from "~/models/CalendarMonth";
|
|
import type { RPGDate } from "~/models/Date";
|
|
|
|
import { PhCalendarBlank } from "@phosphor-icons/vue";
|
|
|
|
const model = defineModel<RPGDate>({ required: true })
|
|
|
|
const props = defineProps<{
|
|
availableMonths: CalendarMonth[]
|
|
}>()
|
|
|
|
/**
|
|
*
|
|
* @param e The name of today's month
|
|
*/
|
|
function setTodayMonth(e: string) {
|
|
model.value.month = e
|
|
}
|
|
|
|
// When the model changes, get the month index from the month name
|
|
watch(model.value, (n, _o) => {
|
|
// If the month value is already an index, return early
|
|
if (!isNaN(+model.value.month)) return
|
|
|
|
const monthId = props.availableMonths.findIndex((m) => m.name === n.month)
|
|
|
|
if (monthId !== -1) {
|
|
model.value.month = monthId + 1
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-2 items-stretch">
|
|
<UiInput id="new-month-current-day" v-model="model.day" type="number" name="newMonthCurrentDay" placeholder="Jour" min="1" step="1" class="invalid:border-red-600" />
|
|
|
|
<UiDropdownMenu>
|
|
<UiDropdownMenuTrigger as-child :disabled="props.availableMonths.length < 1">
|
|
<UiButton size="sm" variant="secondary">
|
|
<PhCalendarBlank size="18" weight="fill" />
|
|
|
|
<template v-if="props.availableMonths.length < 1">
|
|
Aucun mois disponible
|
|
</template>
|
|
<template v-else-if="model.month && typeof model.month === 'number'">
|
|
{{ props.availableMonths[model.month - 1].name }}
|
|
</template>
|
|
<template v-else>
|
|
Choisir le mois
|
|
</template>
|
|
</UiButton>
|
|
</UiDropdownMenuTrigger>
|
|
<UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
|
|
<UiDropdownMenuLabel>Mois disponibles</UiDropdownMenuLabel>
|
|
<UiDropdownMenuSeparator />
|
|
<UiDropdownMenuItem
|
|
v-for="m in props.availableMonths"
|
|
:key="m.name"
|
|
@click="setTodayMonth(m.name)"
|
|
>
|
|
{{ m.name }}
|
|
</UiDropdownMenuItem>
|
|
</UiDropdownMenuContent>
|
|
</UiDropdownMenu>
|
|
|
|
<UiInput id="new-month-current-day" v-model="model.year" type="number" name="newMonthCurrentYear" placeholder="Année" step="1" class="invalid:border-red-600" />
|
|
</div>
|
|
</template>
|