Added sample data for characters

src/models/Date.ts

@@ -0,0 +1,8 @@
+export type LeimDate = {
+  day: number
+  month: number
+  year: number
+  period: LeimPeriod
+}
+
+export type LeimPeriod = 'ante' | 'nante'

src/stores/calendar.ts

@@ -1,8 +1,7 @@
-import { computed, ref, type Ref, type ComputedRef } from 'vue'
+import { computed, type Ref, type ComputedRef } from 'vue'
 import { defineStore } from 'pinia'
 import { useUrlSearchParams } from '@vueuse/core'
-
-type CalendarPeriod = 'ante' | 'nante'
+import type { LeimPeriod } from '@/models/Date'
 
 type CalendarStaticConfig = {
   months: string[]
@@ -13,7 +12,7 @@ type CalendarStaticConfig = {
 }
 
 type CalendarCurrentConfig = {
-  currentPeriod: Ref<CalendarPeriod>
+  currentPeriod: Ref<LeimPeriod>
   currentYear: ComputedRef<string | string[]>
   currentMonth: ComputedRef<string | string[]>
   currentDay: ComputedRef<string | string[]>
@@ -80,7 +79,7 @@ export const useCalendar = defineStore('calendar', () => {
   const currentYear = computed(() => params.year)
 
   // Get period from currentYear
-  const currentPeriod: ComputedRef<CalendarPeriod> = computed(() => {
+  const currentPeriod: ComputedRef<LeimPeriod> = computed(() => {
     const year = Number(currentYear.value)
     return year >= 0 ? 'nante' : 'ante'
   })

src/stores/characters.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import type { LeimDate } from '@/models/Date'
+
+type Character = {
+  name: string
+  birth?: LeimDate
+  death?: LeimDate
+}
+
+export const useCharacters = defineStore('characters', () => {
+  const characters: Character[] = [
+    { name: 'Quacille Lévios', birth: { day: 3, month: 6, year: 3162, period: 'nante' } },
+    { name: 'Lazarus Tymos', birth: { day: 29, month: 9, year: 3145, period: 'nante' } },
+    { name: 'Ernestin Pomel', birth: { day: 11, month: 2, year: 3179, period: 'nante' } }
+  ]
+
+  return { characters }
+})

src/stores/events.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+import { useCharacters } from './characters'
+
+import type { LeimDate } from '@/models/Date'
+
+type CalendarEvent = {
+  title: string
+  date: LeimDate
+}
+
+export const useCalendarEvents = defineStore('calendar-events', () => {
+  const { characters } = useCharacters()
+
+  const characterBirthEvents = computed(() => {
+    const charactersWithBirthData = characters.filter((character) => character.birth)
+    return charactersWithBirthData.map((character) => {
+      return { title: `Naissance de ${character.name}`, date: character.birth } as CalendarEvent
+    })
+  })
+
+  const characterDeathEvents = computed(() => {
+    const charactersWithDeathData = characters.filter((character) => character.death)
+    return charactersWithDeathData.map((character) => {
+      return { title: `Décès de ${character.name}`, date: character.death } as CalendarEvent
+    })
+  })
+
+  return { characterBirthEvents, characterDeathEvents }
+})

src/views/HomeView.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useCalendar } from '@/stores/calendar'
+import { useCalendarEvents } from '@/stores/events'
 
 const { config, incrementMonth, decrementMonth, setMonth, incrementYear, decrementYear } =
   useCalendar()
 
+const { characterBirthEvents, characterDeathEvents } = useCalendarEvents()
+
 const monthTarget = ref(0)
 </script>
 
@@ -45,5 +48,9 @@ const monthTarget = ref(0)
         </button>
       </div>
     </div>
+
+    <pre>
+      {{ characterDeathEvents }}
+    </pre>
   </main>
 </template>