v0.1.0

src/App.vue

@@ -599,12 +599,16 @@ function clearTaskLabels(record) {
     task.label = ''
   })
 }
+
+function printSelectedPlanner() {
+  window.print()
+}
 </script>
 
 <template>
   <main class="min-h-screen px-4 py-6 text-ink sm:px-6 lg:px-10">
-    <div class="mx-auto flex max-w-[1680px] flex-col gap-6">
-      <header class="flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
+    <div class="print-root mx-auto flex max-w-[1680px] flex-col gap-6">
+      <header class="print-hidden flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
         <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
           <div class="space-y-2">
             <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
@@ -668,6 +672,14 @@ function clearTaskLabels(record) {
                 NEXT DAY
               </button>
             </div>
+            <button
+              v-if="screenMode === 'planner'"
+              type="button"
+              class="rounded-full border border-stone-200 bg-white px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+              @click="printSelectedPlanner"
+            >
+              PRINT DAY
+            </button>
           </div>
         </div>
       </header>
@@ -676,27 +688,29 @@ function clearTaskLabels(record) {
         v-if="screenMode === 'planner' && viewMode === 'focus'"
         class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
       >
-        <PlannerPage
-          :date-main="selectedDateDisplay.main"
-          :date-weekday="selectedDateDisplay.weekday"
-          :date-weekday-tone="selectedDateDisplay.weekdayTone"
-          :dday="planner.dday"
-          :comment="planner.comment"
-          :total-time="formatTotalTime(planner)"
-          :tasks="planner.tasks"
-          :memo="planner.memo"
-          :hours="hours"
-          :timetable="planner.timetable"
-          @update:comment="updateComment(planner, $event)"
-          @update:task-label="updateTaskLabel(planner, $event)"
-          @update:task-title="updateTaskTitle(planner, $event)"
-          @toggle:task="toggleTask(planner, $event)"
-          @update:memo-label="updateMemoLabel(planner, $event)"
-          @update:memo="updateMemo(planner, $event)"
-          @update:timetable="updateTimetable(planner, $event)"
-        />
+        <div class="print-target">
+          <PlannerPage
+            :date-main="selectedDateDisplay.main"
+            :date-weekday="selectedDateDisplay.weekday"
+            :date-weekday-tone="selectedDateDisplay.weekdayTone"
+            :dday="planner.dday"
+            :comment="planner.comment"
+            :total-time="formatTotalTime(planner)"
+            :tasks="planner.tasks"
+            :memo="planner.memo"
+            :hours="hours"
+            :timetable="planner.timetable"
+            @update:comment="updateComment(planner, $event)"
+            @update:task-label="updateTaskLabel(planner, $event)"
+            @update:task-title="updateTaskTitle(planner, $event)"
+            @toggle:task="toggleTask(planner, $event)"
+            @update:memo-label="updateMemoLabel(planner, $event)"
+            @update:memo="updateMemo(planner, $event)"
+            @update:timetable="updateTimetable(planner, $event)"
+          />
+        </div>
 
-        <aside class="flex flex-col gap-4">
+        <aside class="print-hidden flex flex-col gap-4">
           <section class="border border-stone-200 bg-white/80 p-5">
             <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
             <div class="space-y-3">
@@ -794,49 +808,54 @@ function clearTaskLabels(record) {
         class="overflow-x-auto rounded-[32px] border border-white/60 bg-white/40 p-4 sm:p-6"
       >
         <div class="flex min-w-[1260px] gap-6">
-          <PlannerPage
-            :date-main="selectedDateDisplay.main"
-            :date-weekday="selectedDateDisplay.weekday"
-            :date-weekday-tone="selectedDateDisplay.weekdayTone"
-            :dday="planner.dday"
-            :comment="planner.comment"
-            :total-time="formatTotalTime(planner)"
-            :tasks="planner.tasks"
-            :memo="planner.memo"
-            :hours="hours"
-            :timetable="planner.timetable"
-            @update:comment="updateComment(planner, $event)"
-            @update:task-label="updateTaskLabel(planner, $event)"
-            @update:task-title="updateTaskTitle(planner, $event)"
-            @toggle:task="toggleTask(planner, $event)"
-            @update:memo-label="updateMemoLabel(planner, $event)"
-            @update:memo="updateMemo(planner, $event)"
-            @update:timetable="updateTimetable(planner, $event)"
-          />
-          <PlannerPage
-            :date-main="secondaryDateDisplay.main"
-            :date-weekday="secondaryDateDisplay.weekday"
-            :date-weekday-tone="secondaryDateDisplay.weekdayTone"
-            :dday="secondaryPlanner.dday"
-            :comment="secondaryPlanner.comment"
-            :total-time="formatTotalTime(secondaryPlanner)"
-            :tasks="secondaryPlanner.tasks"
-            :memo="secondaryPlanner.memo"
-            :hours="hours"
-            :timetable="secondaryPlanner.timetable"
-            @update:comment="updateComment(secondaryPlanner, $event)"
-            @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
-            @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
-            @toggle:task="toggleTask(secondaryPlanner, $event)"
-            @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
-            @update:memo="updateMemo(secondaryPlanner, $event)"
-            @update:timetable="updateTimetable(secondaryPlanner, $event)"
-          />
+          <div class="print-target">
+            <PlannerPage
+              :date-main="selectedDateDisplay.main"
+              :date-weekday="selectedDateDisplay.weekday"
+              :date-weekday-tone="selectedDateDisplay.weekdayTone"
+              :dday="planner.dday"
+              :comment="planner.comment"
+              :total-time="formatTotalTime(planner)"
+              :tasks="planner.tasks"
+              :memo="planner.memo"
+              :hours="hours"
+              :timetable="planner.timetable"
+              @update:comment="updateComment(planner, $event)"
+              @update:task-label="updateTaskLabel(planner, $event)"
+              @update:task-title="updateTaskTitle(planner, $event)"
+              @toggle:task="toggleTask(planner, $event)"
+              @update:memo-label="updateMemoLabel(planner, $event)"
+              @update:memo="updateMemo(planner, $event)"
+              @update:timetable="updateTimetable(planner, $event)"
+            />
+          </div>
+          <div class="print-hidden">
+            <PlannerPage
+              :date-main="secondaryDateDisplay.main"
+              :date-weekday="secondaryDateDisplay.weekday"
+              :date-weekday-tone="secondaryDateDisplay.weekdayTone"
+              :dday="secondaryPlanner.dday"
+              :comment="secondaryPlanner.comment"
+              :total-time="formatTotalTime(secondaryPlanner)"
+              :tasks="secondaryPlanner.tasks"
+              :memo="secondaryPlanner.memo"
+              :hours="hours"
+              :timetable="secondaryPlanner.timetable"
+              @update:comment="updateComment(secondaryPlanner, $event)"
+              @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
+              @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
+              @toggle:task="toggleTask(secondaryPlanner, $event)"
+              @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
+              @update:memo="updateMemo(secondaryPlanner, $event)"
+              @update:timetable="updateTimetable(secondaryPlanner, $event)"
+            />
+          </div>
         </div>
       </section>
 
       <StatsDashboard
         v-else
+        class="print-hidden"
         :overview-cards="overviewCards"
         :weekly-records="weeklyRecords"
         :recent-records="recentRecords"