vue (#1)

Port to Vue. Also implements plenty of new functionality.

src/components/WeekRow.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="week-row">
+    <div class="week-label">W{{ weekNumber }}</div>
+    <div class="days-grid">
+      <DayCell v-for="day in days" :key="day.dateStr" :day="day" />
+      <div class="week-overlay">
+        <!-- Event spans will be rendered here -->
+      </div>
+    </div>
+    <div v-if="monthLabel" class="month-name-label" :style="{ height: `${monthLabel.weeksSpan * 64}px` }">
+      <span>{{ monthLabel.name }} '{{ monthLabel.year }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import DayCell from './DayCell.vue'
+import { isoWeekInfo, toLocalString, getLocalizedMonthName, monthAbbr } from '@/utils/date'
+
+const props = defineProps({
+  week: {
+    type: Object,
+    required: true
+  }
+})
+
+const weekNumber = computed(() => {
+  return isoWeekInfo(props.week.monday).week
+})
+
+const days = computed(() => {
+  const d = new Date(props.week.monday)
+  const result = []
+  for (let i = 0; i < 7; i++) {
+    const dateStr = toLocalString(d)
+    result.push({
+      date: new Date(d),
+      dateStr,
+      dayOfMonth: d.getDate(),
+      month: d.getMonth(),
+      isFirstDayOfMonth: d.getDate() === 1,
+      monthClass: monthAbbr[d.getMonth()]
+    })
+    d.setDate(d.getDate() + 1)
+  }
+  return result
+})
+
+const monthLabel = computed(() => {
+  const firstDayOfMonth = days.value.find(d => d.isFirstDayOfMonth)
+  if (!firstDayOfMonth) return null
+
+  const month = firstDayOfMonth.month
+  const year = firstDayOfMonth.date.getFullYear()
+  
+  // This is a simplified calculation for weeksSpan
+  const weeksSpan = 4 
+
+  return {
+    name: getLocalizedMonthName(month),
+    year: String(year).slice(-2),
+    weeksSpan
+  }
+})
+</script>