101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
monthLabel: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
yearLabel: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
days: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
selectedKey: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
markedKeys: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['select', 'shift-month', 'shift-year'])
|
|
</script>
|
|
|
|
<template>
|
|
<section class="border border-stone-200 bg-white/80 p-5">
|
|
<div class="mb-4 flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
|
|
<div class="mt-2 space-y-1">
|
|
<p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
|
|
<p class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ yearLabel }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="emit('shift-year', -1)"
|
|
>
|
|
-1Y
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="emit('shift-year', 1)"
|
|
>
|
|
+1Y
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="emit('shift-month', -1)"
|
|
>
|
|
PREV
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
|
@click="emit('shift-month', 1)"
|
|
>
|
|
NEXT
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
|
|
<span v-for="weekday in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" :key="weekday">{{ weekday }}</span>
|
|
</div>
|
|
<div class="grid grid-cols-7 gap-2">
|
|
<button
|
|
v-for="day in days"
|
|
:key="day.key"
|
|
type="button"
|
|
class="aspect-square rounded-full border text-[11px] font-semibold transition"
|
|
:class="[
|
|
day.key === selectedKey
|
|
? 'border-ink bg-ink text-white'
|
|
: 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
|
|
day.isCurrentMonth ? '' : 'opacity-35',
|
|
]"
|
|
@click="emit('select', day.date)"
|
|
>
|
|
<span class="relative flex h-full w-full items-center justify-center">
|
|
<span>{{ day.label }}</span>
|
|
<span
|
|
v-if="markedKeys.includes(day.key)"
|
|
class="absolute bottom-[3px] h-[5px] w-[5px] rounded-full bg-red-500"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</template>
|