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

v0.0.5

Browse Source
This commit is contained in:
zenn
2026-04-21 13:40:06 +09:00
parent 7704752064
commit 0bc06b710a
6 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/MiniCalendar.vue
View File

@@ -4,6 +4,10 @@ defineProps({
type: String,
required: true,
},
yearLabel: {
type: String,
required: true,
},
days: {
type: Array,
required: true,
@@ -12,16 +16,59 @@ defineProps({
type: String,
required: true,
},
markedKeys: {
type: Array,
required: true,
},
})
const emit = defineEmits(['select'])
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-center justify-between">
<h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
<span class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ monthLabel }}</span>
<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>
@@ -40,7 +87,13 @@ const emit = defineEmits(['select'])
]"
@click="emit('select', day.date)"
>
{{ day.label }}
<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>