first commit

calendar/src/components/CalendarCard.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { CalendarModel } from '@/lib/calendar';
+
+const props = defineProps<{
+  model: CalendarModel;
+}>();
+
+const weeks = computed(() => {
+  const chunks: CalendarModel['cells'][] = [];
+
+  for (let index = 0; index < props.model.cells.length; index += 7) {
+    chunks.push(props.model.cells.slice(index, index + 7));
+  }
+
+  return chunks;
+});
+</script>
+
+<template>
+  <section class="card calendar-card">
+    <div class="calendar-card__header">
+      <div class="calendar-card__day">{{ model.largeDay }}</div>
+      <div class="calendar-card__meta">
+        <p class="calendar-card__date-line">
+          <span>{{ model.gregorianLabel }}</span>
+          <span class="calendar-card__weekday">{{ model.weekdayLabel }}</span>
+        </p>
+        <p class="calendar-card__lunar">
+          <span>{{ model.lunarYearLabel }}</span>
+          <span>{{ model.lunarDayLabel }}</span>
+          <span v-if="model.summaryBadges.length" class="calendar-card__badges calendar-card__badges--inline">
+            <span
+              v-for="badge in model.summaryBadges"
+              :key="badge.label"
+              :class="['calendar-card__badge', `calendar-card__badge--${badge.tone}`]"
+            >
+              {{ badge.label }}
+            </span>
+          </span>
+        </p>
+      </div>
+    </div>
+
+    <div class="calendar-card__grid">
+      <div v-for="label in model.weekLabels" :key="label" class="calendar-card__week-label">
+        {{ label }}
+      </div>
+
+      <template v-for="week in weeks" :key="week[0].date.toISOString()">
+        <div
+          v-for="cell in week"
+          :key="cell.date.toISOString()"
+          :class="[
+            'calendar-card__cell',
+            {
+              'calendar-card__cell--muted': !cell.currentMonth,
+              'calendar-card__cell--today': cell.isToday,
+              'calendar-card__cell--holiday': cell.badges.some((badge) => badge.tone === 'holiday'),
+            },
+          ]"
+        >
+          <span class="calendar-card__solar">{{ cell.day }}</span>
+          <span class="calendar-card__lunar-day">{{ cell.subLabel }}</span>
+        </div>
+      </template>
+    </div>
+  </section>
+</template>