Added basic event details

src/components/calendar/CalendarEvent.vue

@@ -1,15 +1,29 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/stores/events'
+import CalendarEventDetails from './CalendarEventDetails.vue'
 
 const props = defineProps<{
   event: CalendarEvent
 }>()
+
+const eventTitleExcerpt = computed(() => {
+  if (props.event.title.length > 20) return props.event.title.substring(0, 20) + '…'
+  return props.event.title
+})
 </script>
 
 <template>
-  <button
+  <Popover>
-    class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800"
+    <PopoverTrigger as-child>
-  >
+      <button
-    {{ event.title }}
+        class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800"
-  </button>
+      >
+        {{ eventTitleExcerpt }}
+      </button>
+    </PopoverTrigger>
+
+    <CalendarEventDetails :event />
+  </Popover>
 </template>

src/components/calendar/CalendarEventDetails.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { PopoverContent } from '@/components/ui/popover'
+import { useCalendar } from '@/stores/calendar'
+import type { CalendarEvent } from '@/stores/events'
+
+const { getFormattedDateTitle } = useCalendar()
+
+defineProps<{ event: CalendarEvent }>()
+</script>
+
+<template>
+  <PopoverContent class="w-96" align="start">
+    <div class="space-y-1">
+      <div class="font-semibold">
+        {{ event.title }}
+      </div>
+      <div class="text-sm">
+        {{ getFormattedDateTitle(event.date, true) }}
+      </div>
+      <div class="text-sm italic text-slate-500">
+        {{ event.description }}
+      </div>
+    </div>
+  </PopoverContent>
+</template>

src/components/calendar/CalendarMenu.vue

@@ -28,7 +28,7 @@ const {
           <div class="flex items-center gap-6">
             <menu class="flex items-center gap-2">
               <li>
-                <Button @click="jumpToDefaultDate"> Today </Button>
+                <Button @click="jumpToDefaultDate" size="sm"> Today </Button>
               </li>
               <li>
                 <!-- Implement decrementDate to account for other mods -->

src/components/calendar/CalendarTile.vue

@@ -40,7 +40,7 @@ const isDefaultDate = computed(() => {
         >{{ date.day }}</span
       >
     </div>
-    <ul v-if="eventsForTheDay.length > 0" class="grid gap-1">
+    <ul v-if="eventsForTheDay.length > 0" class="absolute top-12 bottom-0 inset-x-2 grid gap-1">
       <li v-for="event in eventsForTheDay" :key="event.title">
         <CalendarEvent :event />
       </li>

src/components/ui/button/Button.vue

@@ -11,7 +11,7 @@ interface Props extends PrimitiveProps {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: 'button'
 })
 </script>
 

src/components/ui/button/index.ts

@@ -8,27 +8,24 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        outline:
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        sm: 'h-9 rounded-md px-3 text-sm',
         lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        icon: 'h-10 w-10'
-      },
+      }
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default',
+      size: 'default'
-    },
+    }
-  },
+  }
 )
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>

src/components/ui/popover/Popover.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4
+  }
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

src/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>

src/components/ui/popover/index.ts

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
+export { default as PopoverContent } from './PopoverContent.vue'

src/components/ui/select/SelectContent.vue

@@ -6,20 +6,20 @@ import {
   type SelectContentProps,
   SelectPortal,
   SelectViewport,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 import { cn } from '@/lib/utils'
 
 defineOptions({
-  inheritAttrs: false,
+  inheritAttrs: false
 })
 
 const props = withDefaults(
   defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
   {
-    position: 'popper',
+    position: 'popper'
-  },
+  }
 )
 const emits = defineEmits<SelectContentEmits>()
 
@@ -35,16 +35,26 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <SelectPortal>
     <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+      v-bind="{ ...forwarded, ...$attrs }"
-        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      :class="
-        position === 'popper'
+        cn(
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        props.class,
+          position === 'popper' &&
-      )
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class
+        )
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]'
+          )
+        "
+      >
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />

src/components/ui/select/SelectItem.vue

@@ -5,7 +5,7 @@ import {
   SelectItemIndicator,
   type SelectItemProps,
   SelectItemText,
-  useForwardProps,
+  useForwardProps
 } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="
       cn(
         'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
+        props.class
       )
     "
   >

src/components/ui/select/SelectScrollDownButton.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import {
+  SelectScrollDownButton,
+  type SelectScrollDownButtonProps,
+  useForwardProps
+} from 'radix-vue'
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
@@ -16,7 +20,10 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+  <SelectScrollDownButton
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
     <slot>
       <ChevronDown class="h-4 w-4" />
     </slot>

src/components/ui/select/SelectScrollUpButton.vue

@@ -16,7 +16,10 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+  <SelectScrollUpButton
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
     <slot>
       <ChevronUp class="h-4 w-4" />
     </slot>

src/components/ui/select/SelectTrigger.vue

@@ -18,10 +18,12 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <SelectTrigger
     v-bind="forwardedProps"
-    :class="cn(
+    :class="
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      cn(
-      props.class,
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-    )"
+        props.class
+      )
+    "
   >
     <slot />
     <SelectIcon as-child>

src/stores/calendar.ts

@@ -104,26 +104,27 @@ export const useCalendar = defineStore('calendar', () => {
 
   const currentMonth = computed(() => params.month)
   // Gets the label from currentMonth index
-  const currentMonthName = computed(() => {
+  const currentMonthName = computed(() => getMonthName(Number(currentMonth.value)))
-    const index = Number(currentMonth.value)
-    return staticConfig.months[index]
-  })
 
   const currentYear = computed(() => params.year)
 
   // Get period from currentYear
-  const currentPeriod: ComputedRef<LeimPeriod> = computed(() => {
+  const currentPeriod: ComputedRef<LeimPeriod> = computed(
-    const year = Number(currentYear.value)
+    () => getPeriodOfYear(Number(currentYear.value)).long
-    return year >= 0 ? 'nante' : 'ante'
+  )
-  })
+  const currentPeriodAbbr: ComputedRef<LeimPeriodShort> = computed(
-  const currentPeriodAbbr: ComputedRef<LeimPeriodShort> = computed(() => {
+    () => getPeriodOfYear(Number(currentYear.value)).short
-    return currentPeriod.value === 'ante' ? 'A.R' : 'N.R'
+  )
-  })
 
   const currentDateTitle = computed(() => {
     switch (currentConfig.value.viewType) {
       case 'month':
-        return `${currentMonthName.value} ${currentYear.value} ${currentPeriodAbbr.value}`
+        return getFormattedDateTitle({
+          day: Number(currentDate.currentDay.value),
+          month: Number(currentDate.currentMonth.value),
+          year: Number(currentDate.currentYear.value),
+          period: currentDate.currentPeriod.value
+        })
 
       case 'year':
         return `Année ${currentYear.value} ${currentPeriodAbbr.value}`
@@ -238,6 +239,19 @@ export const useCalendar = defineStore('calendar', () => {
     }
   }
 
+  function getMonthName(monthNumber: number) {
+    const index = Number(monthNumber)
+    return staticConfig.months[index]
+  }
+
+  function getFormattedDateTitle(date: LeimDate, showNumber?: boolean): string {
+    if (showNumber) {
+      return `${date.day} ${getMonthName(date.month)} ${date.year} ${getPeriodOfYear(date.year).short}`
+    }
+
+    return `${getMonthName(date.month)} ${date.year} ${getPeriodOfYear(date.year).short}`
+  }
+
   function compareTwoDates(date1: LeimDate, date2: LeimDate) {
     // To refacto to be more precise
     return JSON.stringify({ ...date1 }) === JSON.stringify({ ...date2 })
@@ -265,6 +279,7 @@ export const useCalendar = defineStore('calendar', () => {
     incrementYear,
     decrementYear,
     jumpToDefaultDate,
-    compareTwoDates
+    compareTwoDates,
+    getFormattedDateTitle
   }
 })