v0.1.1

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watch, nextTick } from 'vue'
 import MiniCalendar from './components/MiniCalendar.vue'
 import PlannerPage from './components/PlannerPage.vue'
 import StatsDashboard from './components/StatsDashboard.vue'
@@ -7,6 +7,7 @@ import StatsDashboard from './components/StatsDashboard.vue'
 const STORAGE_KEY = 'ten-minute-planner-state'
 const screenMode = ref('planner')
 const viewMode = ref('focus')
+const printLayout = ref('single')
 const selectedDate = ref(new Date())
 const calendarViewDate = ref(new Date(selectedDate.value))
 const statsRangeStart = ref(toKey(new Date(new Date().setDate(new Date().getDate() - 6))))
@@ -600,7 +601,9 @@ function clearTaskLabels(record) {
   })
 }
 
-function printSelectedPlanner() {
+async function printSelectedPlanner(layout = 'single') {
+  printLayout.value = layout
+  await nextTick()
   window.print()
 }
 </script>
@@ -672,14 +675,25 @@ function printSelectedPlanner() {
                 NEXT DAY
               </button>
             </div>
-            <button
+            <div
               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"
+              class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
             >
-              PRINT DAY
-            </button>
+              <button
+                type="button"
+                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+                @click="printSelectedPlanner('single')"
+              >
+                PRINT 1-UP
+              </button>
+              <button
+                type="button"
+                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+                @click="printSelectedPlanner('double')"
+              >
+                PRINT 2-UP
+              </button>
+            </div>
           </div>
         </div>
       </header>
@@ -866,6 +880,77 @@ function printSelectedPlanner() {
         @update:range-start="statsRangeStart = $event"
         @update:range-end="statsRangeEnd = $event"
       />
+
+      <section class="print-only">
+        <div v-if="printLayout === 'single'" class="print-paper">
+          <div class="print-sheet-frame">
+            <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>
+
+        <div v-else class="print-paper print-paper--double">
+          <div class="print-sheet-frame">
+            <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-sheet-frame">
+            <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>
     </div>
   </main>
 </template>

src/components/PlannerPage.vue

@@ -115,7 +115,7 @@ onBeforeUnmount(() => {
 
 <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"
+    class="planner-sheet 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">

src/style.css

@@ -22,6 +22,11 @@
 }
 
 @media print {
+  @page {
+    size: A4 landscape;
+    margin: 0;
+  }
+
   html,
   body {
     background: #ffffff !important;
@@ -29,31 +34,77 @@
 
   body {
     min-height: auto;
+    margin: 0;
   }
 
   .print-hidden {
     display: none !important;
   }
 
+  .print-only {
+    display: block !important;
+  }
+
   .print-root {
+    display: block !important;
     max-width: none !important;
     padding: 0 !important;
     gap: 0 !important;
   }
 
-  .print-target {
-    display: block !important;
-    width: 100% !important;
-    max-width: none !important;
-    box-shadow: none !important;
-    border: 0 !important;
+  .print-paper {
+    min-height: 100vh;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
     background: #ffffff !important;
-    padding: 0 !important;
+    padding: 0;
   }
 
-  .print-target article {
-    max-width: none !important;
+  .print-paper--double {
+    display: grid !important;
+    grid-template-columns: repeat(2, 148mm);
+    justify-content: center;
+    align-content: center;
+    gap: 0;
+  }
+
+  .print-sheet-frame {
+    width: 148mm;
+    height: 210mm;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background: #ffffff !important;
+  }
+
+  .print-paper--double .print-sheet-frame {
+    width: 148.5mm;
+    height: 210mm;
+  }
+
+  .planner-sheet {
     box-shadow: none !important;
-    padding: 0 !important;
+  }
+
+  .print-sheet-frame .planner-sheet {
+    width: 762px !important;
+    max-width: none !important;
+    transform-origin: top left;
+    transform: scale(0.733);
+    box-shadow: none !important;
+    background: #ffffff !important;
+  }
+
+  .print-sheet-frame .planner-sheet * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+
+@media screen {
+  .print-only {
+    display: none !important;
   }
 }