planner.sori.studio/src/components/MiniCalendar.vue

<script setup>
import { computed, ref } from 'vue'

const props = 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', 'go-today'])

const isYearPickerOpen = ref(false)
const currentYearNumber = computed(() => Number(props.yearLabel))
const yearRangeStart = computed(() => currentYearNumber.value - (currentYearNumber.value % 12))
const visibleYears = computed(() =>
  Array.from({ length: 12 }, (_, index) => yearRangeStart.value + index),
)

function selectYear(year) {
  emit('shift-year', year - currentYearNumber.value)
  isYearPickerOpen.value = false
}
</script>

<template>
  <section class="border border-stone-200 bg-white/80 p-5">
    <div class="relative 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 flex items-center gap-3">
          <button
            type="button"
            class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-month', -1)"
          >
            ←
          </button>
          <div class="flex items-center gap-2">
            <p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
            <button
              type="button"
              class="rounded-full px-2 py-1 text-[11px] font-semibold tracking-[0.16em] text-stone-500 transition hover:bg-stone-100 hover:text-ink"
              @click="isYearPickerOpen = !isYearPickerOpen"
            >
              {{ yearLabel }}
            </button>
          </div>
          <button
            type="button"
            class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-month', 1)"
          >
            →
          </button>
        </div>
      </div>
      <button
        type="button"
        class="rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
        @click="emit('go-today')"
      >
        TODAY
      </button>

      <div
        v-if="isYearPickerOpen"
        class="absolute right-0 top-14 z-10 w-[220px] rounded-2xl border border-stone-200 bg-white p-4 shadow-lg"
      >
        <div class="mb-3 flex items-center justify-between">
          <button
            type="button"
            class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-year', -12)"
          >
            ←
          </button>
          <p class="text-[11px] font-bold tracking-[0.16em] text-stone-500">
            {{ visibleYears[0] }} - {{ visibleYears[visibleYears.length - 1] }}
          </p>
          <button
            type="button"
            class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-year', 12)"
          >
            →
          </button>
        </div>
        <div class="grid grid-cols-3 gap-2">
          <button
            v-for="year in visibleYears"
            :key="year"
            type="button"
            class="rounded-xl border px-3 py-2 text-[11px] font-semibold transition"
            :class="year === currentYearNumber ? 'border-ink bg-ink text-white' : 'border-stone-200 text-stone-700 hover:border-stone-400 hover:bg-stone-50'"
            @click="selectYear(year)"
          >
            {{ year }}
          </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>