zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.0.6

Browse Source
This commit is contained in:
zenn
2026-04-21 13:54:54 +09:00
parent 0bc06b710a
commit 5c380e0562
7 changed files with 184 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/MiniCalendar.vue
View File

@@ -1,5 +1,7 @@
<script setup>
defineProps({
import { computed, ref } from 'vue'
const props = defineProps({
monthLabel: {
type: String,
required: true,
@@ -22,50 +24,94 @@ defineProps({
},
})
const emit = defineEmits(['select', 'shift-month', 'shift-year'])
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="mb-4 flex items-start justify-between gap-4">
<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 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">
<div class="mt-2 flex items-center gap-3">
<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"
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)"
>
PREV
←
</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-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
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)"
>
NEXT
→
</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>