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

v0.0.1

Browse Source
This commit is contained in:
zenn
2026-04-21 12:30:44 +09:00
commit 6ae64d2a13
15 changed files with 3292 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/MiniCalendar.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
type DayCell = {
key: string
label: number
date: Date
isCurrentMonth: boolean
}
defineProps<{
monthLabel: string
days: DayCell[]
selectedKey: string
}>()
const emit = defineEmits<{
select: [date: Date]
}>()
</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>
<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)"
>
{{ day.label }}
</button>
</div>
</section>
</template>

124
src/components/PlannerPage.vue Normal file
View File

@@ -0,0 +1,124 @@
<script setup lang="ts">
type PlannerTask = {
id: string
title: string
checked?: boolean
}
type PlannerProps = {
dateLabel: string
dday: string
comment: string
totalTime: string
tasks: PlannerTask[]
memo: string[]
hours: string[]
brand?: string
}
defineProps<PlannerProps>()
</script>
<template>
<article
class="flex w-full max-w-[762px] flex-col gap-3 bg-paper px-6 py-6 text-[10px] font-bold tracking-[0.16em] text-ink shadow-paper sm:px-12 sm:py-12"
>
<div class="flex flex-col gap-4 py-[18px]">
<div class="flex gap-4">
<div class="relative h-[90px] w-[394px] flex-1 border-t border-ink px-[10px] pt-[10px]">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">YEAR / MONTH / DAY</span>
<p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">{{ dateLabel }}</p>
</div>
<div class="relative h-[90px] w-[210px] border-t border-ink px-[10px] pt-[10px]">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">D-DAY</span>
<p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">{{ dday }}</p>
</div>
</div>
<div class="flex gap-4 border-b border-ink pb-[18px]">
<div class="relative h-[90px] w-[394px] flex-1 border-t border-ink px-[10px] pt-[10px]">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">COMMENT</span>
<p class="pt-6 text-[11px] font-semibold normal-case tracking-[0.08em] text-stone-700 sm:text-xs">
{{ comment }}
</p>
</div>
<div class="relative h-[90px] w-[210px] border-t border-ink px-[10px] pt-[10px]">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TOTAL TIME</span>
<p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">{{ totalTime }}</p>
</div>
</div>
</div>
<div class="flex gap-4 py-[10px]">
<div class="flex w-[394px] flex-1 flex-col gap-9">
<section class="relative">
<div class="absolute -top-[9px] left-0 bg-paper px-[2px] text-muted">TASKS</div>
<div class="border-t border-ink">
<div
v-for="(task, index) in tasks"
:key="task.id"
class="flex h-[38px] items-center border-b"
:class="index % 5 === 4 || index === tasks.length - 1 ? 'border-ink' : 'border-line'"
>
<div class="h-full w-[62px] border-r border-dashed border-ink px-2 py-2 text-[9px] text-stone-500">
{{ task.id }}
</div>
<div class="flex min-w-0 flex-1 items-center px-3">
<span class="truncate text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-800">
{{ task.title }}
</span>
</div>
<div class="flex h-full w-[42px] items-center justify-center p-[10px]">
<span
class="block h-full w-full border border-dashed"
:class="task.checked ? 'border-ink bg-stone-100' : 'border-ink/60'"
/>
</div>
</div>
</div>
</section>
<section class="relative">
<div class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">MEMO</div>
<div class="border-t border-ink">
<div
v-for="(memoItem, index) in memo"
:key="`${memoItem}-${index}`"
class="flex h-[38px] items-center border-b"
:class="index === memo.length - 1 ? 'border-ink' : 'border-line'"
>
<div class="h-full w-[62px] border-r border-dashed border-ink" />
<div class="flex-1 px-3 text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-700">
{{ memoItem }}
</div>
</div>
</div>
</section>
</div>
<section class="relative w-[210px] shrink-0">
<div class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TIME TABLE</div>
<div class="border-t border-ink">
<div
v-for="(hour, index) in hours"
:key="`${hour}-${index}`"
class="flex h-[30px] border-b"
:class="index === hours.length - 1 ? 'border-ink' : 'border-line'"
>
<div class="flex h-full w-[30px] items-center justify-center border-r border-ink text-[9px] text-ink">
{{ hour }}
</div>
<div
v-for="quarter in 6"
:key="quarter"
class="h-full w-[30px] border-r border-dashed border-line last:border-r-0"
/>
</div>
</div>
</section>
</div>
<div class="flex justify-end">
<p class="text-[10px] tracking-[0.18em] text-ink">{{ brand ?? 'SORI.STUDIO' }}</p>
</div>
</article>
</template>