88 lines
3.0 KiB
Vue
88 lines
3.0 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div v-if="open" class="fixed inset-0 z-40 bg-ink/35" @click="close" />
|
|
</Transition>
|
|
|
|
<Transition
|
|
enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="translate-y-full"
|
|
enter-to-class="translate-y-0"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="translate-y-0"
|
|
leave-to-class="translate-y-full"
|
|
>
|
|
<section v-if="open" class="fixed inset-x-0 bottom-0 z-50 mx-auto max-w-lg rounded-t-2xl bg-white shadow-2xl">
|
|
<div class="border-b border-line px-4 pb-3 pt-2">
|
|
<div class="mx-auto mb-3 h-1 w-10 rounded-full bg-line" />
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-base font-bold">월 선택</h2>
|
|
<button type="button" class="text-sm font-semibold text-muted" @click="close">닫기</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between px-4 py-4">
|
|
<button class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper" type="button" aria-label="이전 년도" @click="pickerYear--">
|
|
<img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_left.svg" alt="">
|
|
</button>
|
|
<strong class="text-xl">{{ pickerYear }}</strong>
|
|
<button class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper" type="button" aria-label="다음 년도" @click="pickerYear++">
|
|
<img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_right.svg" alt="">
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-4 gap-y-2 px-4 pb-6">
|
|
<button
|
|
v-for="month in 12"
|
|
:key="month"
|
|
type="button"
|
|
class="rounded-md py-3 text-base font-bold"
|
|
:class="isSelected(month) ? 'bg-red-50 text-red-500' : 'active:bg-paper'"
|
|
@click="select(month)"
|
|
>
|
|
{{ month }}월
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: string
|
|
open: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
'update:open': [value: boolean]
|
|
}>()
|
|
|
|
const pickerYear = ref(Number(props.modelValue.slice(0, 4)))
|
|
|
|
watch(() => props.open, (open) => {
|
|
if (open) pickerYear.value = Number(props.modelValue.slice(0, 4))
|
|
})
|
|
|
|
function isSelected(month: number) {
|
|
return props.modelValue === `${pickerYear.value}-${String(month).padStart(2, '0')}`
|
|
}
|
|
|
|
function select(month: number) {
|
|
emit('update:modelValue', `${pickerYear.value}-${String(month).padStart(2, '0')}`)
|
|
close()
|
|
}
|
|
|
|
function close() {
|
|
emit('update:open', false)
|
|
}
|
|
</script>
|