Added compact translations for date duration

components/calendar/CalendarEventDetails.vue

@@ -30,9 +30,7 @@ const eventDetails = ref<HTMLElement>()
 const emit = defineEmits(["query:close-popover"])
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
-const dateDuration: string | null = props.event.endDate
-  ? getRelativeString(props.event.startDate, props.event.endDate, "compact")
-  : null
+const dateDuration = computed<string | null>(() => props.event.endDate ? getRelativeString(props.event.startDate, props.event.endDate, "compact") : null)
 
 function handleJumpToDate(date: RPGDate) {
   jumpToDate(date)

components/calendar/search/lists/EventCallout.vue

@@ -16,9 +16,7 @@ defineEmits<{
 const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
-const dateDuration: string | null = props.event.endDate
-  ? getRelativeString(props.event.startDate, props.event.endDate, "compact")
-  : null
+const dateDuration = computed<string | null>(() => props.event.endDate ? getRelativeString(props.event.startDate, props.event.endDate, "compact") : null)
 </script>
 
 <template>

i18n.config.ts

@@ -70,10 +70,18 @@ export default defineI18nConfig(() => ({
             xMonthsNext: "In {months} month(s)",
             xYearsNext: "In {years} year(s)",
             xYearsAndMonthsNext: "In {years} year(s) and {months} month(s)",
+            xDaysNextCompact: "{days} days",
+            xMonthsNextCompact: "{months} month(s)",
+            xYearsNextCompact: "{years} year(s)",
+            xYearsAndMonthsNextCompact: "{years} year(s) and {months} month(s)",
             xDaysAgo: "{days} days ago",
             xMonthsAgo: "{months} month(s) ago",
             xYearsAgo: "{years} year(s) ago",
             xYearsAndMonthsAgo: "{years} year(s) and {months} month(s) ago",
+            xDaysAgoCompact: "{days} days",
+            xMonthsAgoCompact: "{months} month(s)",
+            xYearsAgoCompact: "{years} year(s)",
+            xYearsAndMonthsAgoCompact: "{years} year(s) and {months} month(s)",
           },
           event: {
             nameSingular: "Event",
@@ -222,10 +230,18 @@ export default defineI18nConfig(() => ({
             xMonthsNext: "Dans {months} mois",
             xYearsNext: "Dans {years} an(s)",
             xYearsAndMonthsNext: "Dans {years} an(s) et {months} mois",
+            xDaysNextCompact: "{days} jours",
+            xMonthsNextCompact: "{months} mois",
+            xYearsNextCompact: "{years} an(s)",
+            xYearsAndMonthsNextCompact: "{years} an(s) et {months} mois",
             xDaysAgo: "Il y a {days} jours",
             xMonthsAgo: "Il y a {months} mois",
             xYearsAgo: "Il y a {years} an(s)",
             xYearsAndMonthsAgo: "Il y a {years} an(s) et {months} mois",
+            xDaysAgoCompact: "{days} jours",
+            xMonthsAgoCompact: "{months} mois",
+            xYearsAgoCompact: "{years} an(s)",
+            xYearsAndMonthsAgoCompact: "{years} an(s) et {months} mois",
           },
           event: {
             nameSingular: "Évènement",

stores/CalendarStore.ts

@@ -496,12 +496,24 @@ export const useCalendar = defineStore("calendar", () => {
       years: "xYearsNext",
       yearsAndMonths: "xYearsAndMonthsNext",
     }
+    const futureKeysCompact: DateDirectionTranslationKeys = {
+      days: "xDaysNextCompact",
+      months: "xMonthsNextCompact",
+      years: "xYearsNextCompact",
+      yearsAndMonths: "xYearsAndMonthsNextCompact",
+    }
     const pastKeys: DateDirectionTranslationKeys = {
       days: "xDaysAgo",
       months: "xMonthsAgo",
       years: "xYearsAgo",
       yearsAndMonths: "xYearsAndMonthsAgo",
     }
+    const pastKeysCompact: DateDirectionTranslationKeys = {
+      days: "xDaysAgoCompact",
+      months: "xMonthsAgoCompact",
+      years: "xYearsAgoCompact",
+      yearsAndMonths: "xYearsAndMonthsAgoCompact",
+    }
     let directionKeys: DateDirectionTranslationKeys = pastKeys
 
     // Check whether it's a past or future date
@@ -535,6 +547,13 @@ export const useCalendar = defineStore("calendar", () => {
       } else {
         directionKeys = pastKeys
       }
+    } else {
+      // Get relevant prefix for the string (without the prefix)
+      if (direction === "future") {
+        directionKeys = futureKeysCompact
+      } else {
+        directionKeys = pastKeysCompact
+      }
     }
 
     const isSameMonth = baseDate.month === relativeDate.month