Added translations for more calendar forms

components/calendar/dialog/Create.vue

@@ -30,7 +30,9 @@ function handleClose() {
           <span v-if="calendarSkeletonName">
             {{ calendarSkeletonName }}
           </span>
-          <span v-else>Nouveau calendrier</span>
+          <span v-else>
+            {{ $t('entity.calendar.createDialog.title') }}
+          </span>
         </span>
       </UiAlertDialogTitle>
 

components/calendar/form/Create.vue

@@ -78,19 +78,22 @@ function handleFormCancel() {
           <UiTabsTrigger value="global" class="font-bold">
             <div class="flex items-center gap-1">
               <PhWrench size="18" weight="fill" />
-              Général
+
+              {{ $t('entity.calendar.createDialog.tabs.general.title') }}
             </div>
           </UiTabsTrigger>
           <UiTabsTrigger value="months" class="font-bold">
             <div class="flex items-center gap-1">
               <PhCalendarDots size="18" weight="fill" />
-              Mois de l'année
+
+              {{ $t('entity.calendar.createDialog.tabs.months.title') }}
             </div>
           </UiTabsTrigger>
           <UiTabsTrigger value="today" class="font-bold">
             <div class="flex items-center gap-1">
               <PhAlarm size="18" weight="fill" />
-              Aujourd'hui
+
+              {{ $t('entity.calendar.createDialog.tabs.today.title') }}
             </div>
           </UiTabsTrigger>
         </UiTabsList>
@@ -116,7 +119,7 @@ function handleFormCancel() {
 
       <footer class="flex justify-end gap-2 mt-6">
         <UiButton type="button" variant="destructive" @click="handleFormCancel">
-          Annuler
+          {{ $t('ui.action.cancel') }}
         </UiButton>
 
         <UiButton type="submit" :disabled="!validSkeleton || isCreatingCalendar">
@@ -124,7 +127,7 @@ function handleFormCancel() {
             <PhCircleNotch v-if="isCreatingCalendar" size="20" class="opacity-50 animate-spin"/>
           </Transition>
 
-          Créer
+          {{ $t('ui.action.save') }}
         </UiButton>
       </footer>
     </form>

components/calendar/input/MonthList.vue

@@ -67,10 +67,28 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
 <template>
   <div class="grid md:grid-cols-12 gap-4 items-center">
     <div class="md:col-start-2 md:col-span-5">
-      <UiInput id="new-month-name" ref="monthNameRef" v-model="monthName" type="text" name="newMonthName" placeholder="Nom du mois" :class="cn({ 'border-red-600': monthNameIsTaken })"/>
+      <UiInput
+        id="new-month-name"
+        ref="monthNameRef"
+        v-model="monthName"
+        type="text"
+        name="newMonthName"
+        :placeholder="$t('entity.calendar.months.inputName')"
+        :class="cn({ 'border-red-600': monthNameIsTaken })"
+      />
     </div>
     <div class="md:col-span-5">
-      <UiInput id="new-month-days" ref="monthDaysRef" v-model="monthDays" type="number" name="newMonthName" placeholder="Nombre de jours" min="0" step="1" class="invalid:border-red-600" />
+      <UiInput
+        id="new-month-days"
+        ref="monthDaysRef"
+        v-model="monthDays"
+        type="number"
+        name="newMonthName"
+        :placeholder="$t('entity.calendar.months.daysNb')"
+        min="0"
+        step="1"
+        class="invalid:border-red-600"
+      />
     </div>
     <div class="md:col-span-1">
       <UiButton size="icon" class="rounded-full h-8 w-8" :disabled="!validNewMonth" @click.prevent="addMonthToModel">
@@ -78,7 +96,10 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
       </UiButton>
     </div>
     <div class="md:col-span-full">
-      <div class="border-[1px] dark:border-slate-800 p-4 rounded-sm max-h-80 overflow-y-auto" :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''">
+      <div
+        class="border-[1px] dark:border-slate-800 p-4 rounded-sm max-h-80 overflow-y-auto"
+        :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''"
+      >
           <div v-if="model.length" class="hidden md:block col-span-1">
             <ul class="grid gap-y-4 justify-center">
               <li v-for="(m, i) in model" :key="`num-${m.name}`">
@@ -88,6 +109,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
               </li>
             </ul>
           </div>
+
           <div class="md:col-span-11">
             <ul ref="monthSortableList" class="grid gap-y-2" :class="model.length ? 'visible' : 'absolute invisible'">
               <template v-if="model.length">
@@ -102,12 +124,23 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
                       {{ m.name }}
                     </div>
                   </div>
+
                   <div class="md:col-span-2">
-                    <UiInput :id="`month-days-n${i}`" v-model="m.days" class="bg-transparent border-none" type="number" :name="`monthDays-n${i}`" placeholder="Nombre de jours" min="0" />
+                    <UiInput
+                      :id="`month-days-n${i}`"
+                      v-model="m.days"
+                      class="bg-transparent border-none"
+                      type="number"
+                      :name="`monthDays-n${i}`"
+                      :placeholder="$t('entity.calendar.months.daysNb')"
+                      min="0"
+                    />
                   </div>
+
                   <div class="md:col-span-1">
-                    jour(s)
+                    {{ $t('entity.calendar.months.daysMaybePlural') }}
                   </div>
+
                   <div class="md:col-start-12">
                     <UiTooltipProvider>
                       <UiTooltip>
@@ -117,7 +150,9 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
                           </UiButton>
                         </UiTooltipTrigger>
                         <UiTooltipContent>
-                          <p>Supprimer {{ m.name }} du calendrier</p>
+                          <p>
+                            {{ $t('entity.calendar.months.deleteOne', { month: m.name }) }}
+                          </p>
                         </UiTooltipContent>
                       </UiTooltip>
                     </UiTooltipProvider>
@@ -127,7 +162,9 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
             </ul>
           </div>
         <template v-if="!model.length">
-          <p class="col-span-12 text-lg text-center italic opacity-50">Aucun mois pour l'instant</p>
+          <p class="col-span-12 text-lg text-center italic opacity-50">
+            {{ $t('entity.calendar.months.none') }}
+          </p>
         </template>
       </div>
     </div>

components/calendar/input/TodaySelect.vue

@@ -33,7 +33,7 @@ watch(model.value, (n, _o) => {
 
 <template>
   <div class="flex gap-2 items-stretch">
-    <UiInput id="new-month-current-day" v-model="model.day" type="number" name="newMonthCurrentDay" placeholder="Jour" min="1" step="1" class="invalid:border-red-600" />
+    <UiInput id="new-month-current-day" v-model="model.day" type="number" name="newMonthCurrentDay" :placeholder="$t('entity.calendar.months.daysNameSingular')" min="1" step="1" class="invalid:border-red-600" />
 
     <UiDropdownMenu>
       <UiDropdownMenuTrigger as-child :disabled="props.availableMonths.length < 1">
@@ -41,18 +41,20 @@ watch(model.value, (n, _o) => {
           <PhCalendarBlank size="18" weight="fill" />
 
           <template v-if="props.availableMonths.length < 1">
-            Aucun mois disponible
+            {{ $t('entity.calendar.months.noneAvailable') }}
           </template>
           <template v-else-if="model.month && typeof model.month === 'number'">
             {{ props.availableMonths[model.month - 1].name }}
           </template>
           <template v-else>
-            Choisir le mois
+            {{ $t('entity.calendar.months.chooseOne') }}
           </template>
         </UiButton>
       </UiDropdownMenuTrigger>
       <UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
-        <UiDropdownMenuLabel>Mois disponibles</UiDropdownMenuLabel>
+        <UiDropdownMenuLabel>
+          {{ $t('entity.calendar.months.available') }}
+        </UiDropdownMenuLabel>
         <UiDropdownMenuSeparator />
         <UiDropdownMenuItem
           v-for="m in props.availableMonths"
@@ -64,6 +66,6 @@ watch(model.value, (n, _o) => {
       </UiDropdownMenuContent>
     </UiDropdownMenu>
 
-    <UiInput id="new-month-current-day" v-model="model.year" type="number" name="newMonthCurrentYear" placeholder="Année" step="1" class="invalid:border-red-600" />
+    <UiInput id="new-month-current-day" v-model="model.year" type="number" name="newMonthCurrentYear" :placeholder="$t('entity.calendar.years.nameSingular')" step="1" class="invalid:border-red-600" />
   </div>
 </template>

i18n.config.ts

@@ -5,7 +5,7 @@ export default defineI18nConfig(() => ({
     en: {
       head: {
         title: "Fantasy calendars for TTRPGs",
-        description: "Tools for players and game masters to help them visualize fantasy worlds better."
+        description: "Tools for players and game masters to help them visualize fantasy worlds better.",
       },
       ui: {
         action: {
@@ -26,6 +26,9 @@ export default defineI18nConfig(() => ({
         light: "Light",
         system: "System",
       },
+      common: {
+        title: "Title"
+      },
       entity: {
         deleteOne: "Delete \"{entity}\"",
         world: {
@@ -37,17 +40,46 @@ export default defineI18nConfig(() => ({
           namePlural: "Calendars",
           addSingle: "Add a calendar",
           notFoundForWorld: "No calendar for this world… yet !",
+          createDialog: {
+            title: "New calendar",
+            tabs: {
+              general: {
+                title: "General",
+              },
+              months: {
+                title: "Months",
+              },
+              today: {
+                title: "Today",
+              },
+            }
+          },
           deleteDialog: {
             title: "Are you sure you want to delete this calendar ?",
             subtitle: "Its events won't be accessible anymore and you won't be able to retrieve the deleted data !",
           },
+          years: {
+            nameSingular: "Year",
+          },
+          months: {
+            inputName: "Month's name",
+            daysNb: "Number of days",
+            daysNameSingular: "Day",
+            daysNamePlural: "Days",
+            daysMaybePlural: "day(s)",
+            available: "Months available",
+            none: "No months for now",
+            noneAvailable: "No months available",
+            chooseOne: "Choose a month",
+            deleteOne: "Remove {month} from this calendar"
+          }
         }
       }
     },
     fr: {
       head: {
         title: "Calendriers fantasies pour JDR",
-        description: "Outils destinés aux joueurs et maîtres de jeux pour visualiser plus facilement leurs univers."
+        description: "Outils destinés aux joueurs et maîtres de jeux pour visualiser plus facilement leurs univers.",
       },
       ui: {
         action: {
@@ -68,6 +100,9 @@ export default defineI18nConfig(() => ({
         light: "Clair",
         system: "Système",
       },
+      common: {
+        title: "Titre"
+      },
       entity: {
         deleteOne: "Supprimer \"{entity}\"",
         world: {
@@ -79,10 +114,40 @@ export default defineI18nConfig(() => ({
           namePlural: "Calendrier",
           addSingle: "Ajouter un calendrier",
           notFoundForWorld: "Aucun calendrier pour ce monde… pour l'instant !",
+          createDialog: {
+            title: "Nouveau calendrier",
+            tabs: {
+              general: {
+                title: "Général",
+              },
+              months: {
+                title: "Mois de l'année",
+              },
+              today: {
+                title: "Aujourd'hui",
+              },
+            }
+          },
           deleteDialog: {
             title: "Êtes-vous sûr de supprimer ce calendrier ?",
             subtitle: "Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !",
           },
+          years: {
+            nameSingular: "Année",
+          },
+          months: {
+            inputName: "Nom du mois",
+            daysNb: "Nombre de jours",
+            daysNameSingular: "Jour",
+            daysNamePlural: "Jours",
+            daysMaybePlural: "jour(s)",
+            yearsSingular: "Année",
+            available: "Mois disponibles",
+            none: "Aucun mois pour l'instant",
+            noneAvailable: "Aucun mois disponible",
+            chooseOne: "Choisir un mois",
+            deleteOne: "Supprimer {month} du calendrier"
+          }
         }
       }
     }