@datagouv/components-next 0.0.32 → 0.1.0

package/src/components/ResourceAccordion/EditButton.vue

@@ -11,10 +11,10 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { RiPencilLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import BrandedButton from '../BrandedButton.vue'
+import { useTranslation } from '../../composables/useTranslation'
 
 type Props = {
   datasetId: string
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   isCommunityResource: false,
 })
 
-const { t } = useI18n()
+const { t } = useTranslation()
 
 const adminUrl = computed(() => {
   if (props.isCommunityResource) {

package/src/components/ResourceAccordion/JsonPreview.client.vue

@@ -15,7 +15,7 @@
       v-else-if="loading"
       class="text-gray-medium"
     >
-      {{ $t("Chargement de l'aperçu JSON...") }}
+      {{ t("Chargement de l'aperçu JSON...") }}
     </div>
     <SimpleBanner
       v-else-if="fileTooLarge"
@@ -24,8 +24,8 @@
     >
       <RiErrorWarningLine class="shink-0 size-6" />
       <span>{{ fileSizeBytes
-        ? $t("Fichier JSON trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : $t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
+        ? t("Fichier JSON trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
+        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
       }}</span>
     </SimpleBanner>
     <SimpleBanner
@@ -34,7 +34,7 @@
       class="flex items-center space-x-2"
     >
       <RiErrorWarningLine class="shink-0 size-6" />
-      <span>{{ $t("Ce fichier JSON ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
+      <span>{{ t("Ce fichier JSON ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
     </SimpleBanner>
     <SimpleBanner
       v-else-if="error"
@@ -42,7 +42,7 @@
       class="flex items-center space-x-2"
     >
       <RiErrorWarningLine class="shink-0 size-6" />
-      <span>{{ $t("Erreur lors du chargement de l'aperçu JSON.") }}</span>
+      <span>{{ t("Erreur lors du chargement de l'aperçu JSON.") }}</span>
     </SimpleBanner>
   </div>
 </template>
@@ -54,6 +54,7 @@ import { RiErrorWarningLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../../config'
 import SimpleBanner from '../SimpleBanner.vue'
 import type { Resource } from '../../types/resources'
+import { useTranslation } from '../../composables/useTranslation'
 
 const JsonViewer = defineAsyncComponent(() =>
   import('vue3-json-viewer').then((module) => {
@@ -68,6 +69,7 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
+const { t } = useTranslation()
 
 const jsonData = ref<unknown>(null)
 const loading = ref(false)

package/src/components/ResourceAccordion/MapContainer.client.vue

@@ -16,7 +16,6 @@
 
 <script setup lang = "ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { RiErrorWarningLine } from '@remixicon/vue'
 
 import View from 'ol/View'
@@ -37,10 +36,11 @@ import {
 
 import SimpleBanner from '../SimpleBanner.vue'
 import type { Resource } from '../../types/resources'
+import { useTranslation } from '../../composables/useTranslation'
 
 const props = defineProps<{ resource: Resource }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 
 let map = null
 const mapRef = useTemplateRef('mapRef')

package/src/components/ResourceAccordion/Metadata.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import type { Resource } from '../../types/resources'
 import CopyButton from '../CopyButton.vue'
@@ -10,6 +9,7 @@ import { useFormatDate } from '../../functions/dates'
 import { filesize } from '../../functions/helpers'
 import ExtraAccordion from '../ExtraAccordion.vue'
 import { getResourceTitleId, getResourceLabel } from '../../functions/resources'
+import { useTranslation } from '../../composables/useTranslation'
 
 const props = defineProps<{
   resource: Resource
@@ -18,7 +18,7 @@ const props = defineProps<{
 const hasExtras = computed(() => Object.keys(props.resource.extras).length)
 const resourceTitleId = computed(() => getResourceTitleId(props.resource))
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatDate } = useFormatDate()
 </script>
 
@@ -29,8 +29,8 @@ const { formatDate } = useFormatDate()
         <DescriptionTerm>
           {{ t('URL') }}
           <CopyButton
-            :label="$t(`Copier l'URL`)"
-            :copied-label="$t('URL copiée !')"
+            :label="t(`Copier l'URL`)"
+            :copied-label="t('URL copiée !')"
             :text="resource.url"
             :aria-describedby="resourceTitleId"
           />
@@ -45,8 +45,8 @@ const { formatDate } = useFormatDate()
         <DescriptionTerm>
           {{ t('URL stable') }}
           <CopyButton
-            :label="$t(`Copier l'URL stable`)"
-            :copied-label="$t('URL stable copiée !')"
+            :label="t(`Copier l'URL stable`)"
+            :copied-label="t('URL stable copiée !')"
             :text="resource.latest"
             :aria-describedby="resourceTitleId"
           />
@@ -61,8 +61,8 @@ const { formatDate } = useFormatDate()
         <DescriptionTerm>
           {{ t('Identifiant') }}
           <CopyButton
-            :label="$t(`Copier l'identifiant`)"
-            :copied-label="$t('ID copié !')"
+            :label="t(`Copier l'identifiant`)"
+            :copied-label="t('ID copié !')"
             :text="resource.id"
             :aria-describedby="resourceTitleId"
           />
@@ -76,8 +76,8 @@ const { formatDate } = useFormatDate()
           <DescriptionTerm>
             {{ resource.checksum.type }}
             <CopyButton
-              :label="$t('Copier la somme de contrôle')"
-              :copied-label="$t('Somme de contrôle copiée !')"
+              :label="t('Copier la somme de contrôle')"
+              :copied-label="t('Somme de contrôle copiée !')"
               :text="resource.checksum.value"
               :aria-describedby="resourceTitleId"
             />

package/src/components/ResourceAccordion/PdfPreview.client.vue

@@ -31,7 +31,7 @@
       v-else-if="loading"
       class="text-gray-medium"
     >
-      {{ $t("Chargement de l'aperçu PDF...") }}
+      {{ t("Chargement de l'aperçu PDF...") }}
     </div>
     <SimpleBanner
       v-else-if="fileTooLarge"
@@ -40,8 +40,8 @@
     >
       <RiErrorWarningLine class="shink-0 size-6" />
       <span>{{ fileSizeBytes
-        ? $t("Fichier PDF trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : $t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
+        ? t("Fichier PDF trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
+        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
       }}</span>
     </SimpleBanner>
     <SimpleBanner
@@ -50,7 +50,7 @@
       class="flex items-center space-x-2"
     >
       <RiErrorWarningLine class="shink-0 size-6" />
-      <span>{{ $t("Ce fichier PDF ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
+      <span>{{ t("Ce fichier PDF ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
     </SimpleBanner>
     <SimpleBanner
       v-else-if="error"
@@ -58,7 +58,7 @@
       class="flex items-center space-x-2"
     >
       <RiErrorWarningLine class="shink-0 size-6" />
-      <span>{{ $t("Erreur lors du chargement de l'aperçu PDF. Pour consulter le fichier, téléchargez-le depuis l'onglet Téléchargements.") }}</span>
+      <span>{{ t("Erreur lors du chargement de l'aperçu PDF. Pour consulter le fichier, téléchargez-le depuis l'onglet Téléchargements.") }}</span>
     </SimpleBanner>
   </div>
 </template>
@@ -69,6 +69,7 @@ import { RiErrorWarningLine } from '@remixicon/vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
+import { useTranslation } from '../../composables/useTranslation'
 
 const PDF = defineAsyncComponent(() =>
   import('pdf-vue3').then((module) => {
@@ -81,6 +82,7 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
+const { t } = useTranslation()
 
 const pdfData = ref<boolean>(false)
 const loading = ref(false)

package/src/components/ResourceAccordion/Pmtiles.client.vue

@@ -53,7 +53,6 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
 import { Protocol, PMTiles } from 'pmtiles'
 import maplibregl from 'maplibre-gl'
@@ -65,11 +64,12 @@ import type { Resource } from '../../types/resources'
 import BrandedButton from '../BrandedButton.vue'
 import styleVector from '../../../assets/json/vector.json'
 import SimpleBanner from '../SimpleBanner.vue'
+import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 
 const props = defineProps<{ resource: Resource }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatDate } = useFormatDate()
 
 const config = useComponentsConfig()

package/src/components/ResourceAccordion/Preview.vue

@@ -104,7 +104,6 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { RiArrowDownLine, RiArrowUpLine, RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
@@ -113,12 +112,13 @@ import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
 import BrandedButton from '../BrandedButton.vue'
 import SimpleBanner from '../SimpleBanner.vue'
+import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatDate } = useFormatDate()
 
 const rows = ref<Array<Record<string, unknown>>>([])

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -45,8 +45,8 @@
             </button>
           </h4>
           <CopyButton
-            :label="$t('Copier le lien')"
-            :copied-label="$t('Lien copié !')"
+            :label="t('Copier le lien')"
+            :copied-label="t('Lien copié !')"
             :text="resourceExternalUrl"
             class="z-2"
           />
@@ -104,7 +104,7 @@
             size="xs"
             external
           >
-            {{ $t('Visiter') }}
+            {{ t('Visiter') }}
           </BrandedButton>
         </p>
         <p
@@ -243,13 +243,13 @@
                   v-if="resource.format === 'url'"
                   class="font-bold fr-text--sm fr-mb-0"
                 >
-                  {{ $t("URL d'origine") }}
+                  {{ t("URL d'origine") }}
                 </dt>
                 <dt
                   v-else
                   class="font-bold fr-text--sm fr-mb-0"
                 >
-                  {{ $t('Format original') }}
+                  {{ t('Format original') }}
                 </dt>
                 <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
                   <span v-if="resource.format === 'url'">
@@ -279,19 +279,19 @@
                       class="fr-link"
                       rel="ugc nofollow noopener"
                     >
-                      <span>{{ $t('Format {format}', { format: resource.format }) }}<span v-if="resource.filesize"> - {{ filesize(resource.filesize) }}</span></span>
+                      <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resource.filesize"> - {{ filesize(resource.filesize) }}</span></span>
                     </a>
                   </span>
                   <CopyButton
-                    :label="$t('Copier le lien')"
-                    :copied-label="$t('Lien copié !')"
+                    :label="t('Copier le lien')"
+                    :copied-label="t('Lien copié !')"
                     :text="resource.latest"
                     class="relative"
                   />
                 </dd>
                 <template v-if="generatedFormats.length">
                   <dt class="font-bold fr-text--sm fr-mb-0">
-                    {{ $t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
+                    {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
                   </dt>
                   <dd
                     v-for="generatedFormat in generatedFormats"
@@ -305,12 +305,12 @@
                         class="fr-link"
                         rel="ugc nofollow noopener"
                       >
-                        <span>{{ $t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
+                        <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
                       </a>
                     </span>
                     <CopyButton
-                      :label="$t('Copier le lien')"
-                      :copied-label="$t('Lien copié !')"
+                      :label="t('Copier le lien')"
+                      :copied-label="t('Lien copié !')"
                       :text="generatedFormat.url"
                       class="relative"
                     />
@@ -321,7 +321,12 @@
             <div
               v-if="tab.key === 'swagger'"
             >
-              <div>{{ t("Swagger généré automatiquement par {platform}. Ce swagger vous permet d'interroger les données par API en les filtrant par valeur de colonne.", { platform: config.name }) }}</div>
+              <div class="fr-mb-4w">
+                <p>{{ t("Cette API est générée automatiquement par {platform} à partir du fichier.", { platform: config.name }) }}</p>
+                <p>{{ t("- Si le fichier est modifié, l'API sera mise à jour et sa structure pourra changer.") }}</p>
+                <p>{{ t("- Si le fichier est supprimé, l'API sera également supprimée.") }}</p>
+                <p>{{ t("Pour des usages pérennes, prévoyez que cette API dépend directement du fichier source.") }}</p>
+              </div>
               <Swagger
                 v-if="hasTabularData"
                 :url="`${config.tabularApiUrl}/api/resources/${props.resource.id}/swagger/`"
@@ -336,7 +341,6 @@
 
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine } from '@remixicon/vue'
 import OrganizationNameWithCertificate from '../OrganizationNameWithCertificate.vue'
 import { filesize, summarize } from '../../functions/helpers'
@@ -356,6 +360,7 @@ import { getOwnerName } from '../../functions/owned'
 import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { getResourceExternalUrl } from '../../functions/datasets'
+import { useTranslation } from '../../composables/useTranslation'
 import Metadata from './Metadata.vue'
 import SchemaBadge from './SchemaBadge.vue'
 import ResourceIcon from './ResourceIcon.vue'
@@ -386,7 +391,7 @@ const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'
 const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
 const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
 
 const hasPreview = computed(() => {
@@ -475,6 +480,9 @@ const tabsOptions = computed(() => {
 })
 const switchTab = (index: number) => {
   const option = tabsOptions.value[index]
+  if (!option) {
+    return
+  }
   trackEvent(['View resource tab', props.resource.id, option.label])
 
   if (option.key === 'data') {

package/src/components/ResourceAccordion/SchemaBadge.vue

@@ -4,13 +4,13 @@
     class="inline-flex mb-0 items-baseline text-xs"
   >
     <Toggletip
-      :button-props="{ class: 'relative z-2 -ml-3 top-1 -my-3', title: $t('Schéma de données') }"
+      :button-props="{ class: 'relative z-2 -ml-3 top-1 -my-3', title: t('Schéma de données') }"
       no-margin
     >
       <RiInformationLine class="size-4" />
       <template #toggletip="{ close }">
         <div class="flex justify-between border-bottom">
-          <h5 class="fr-text--sm fr-my-0 fr-p-2v">{{ $t("Schéma de données") }}</h5>
+          <h5 class="fr-text--sm fr-my-0 fr-p-2v">{{ t("Schéma de données") }}</h5>
           <button
             type="button"
             :title="t('Fermer')"
@@ -97,17 +97,17 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import type { Resource } from '../../types/resources'
 import Toggletip from '../Toggletip.vue'
 import type { RegisteredSchema, ValidataError } from '../../functions/schemas'
 import { findSchemaInCatalog, useGetCatalog, useGetSchemaDocumentation, useGetSchemaValidationUrl } from '../../functions/schemas'
+import { useTranslation } from '../../composables/useTranslation'
 
 const props = defineProps<{
   resource: Resource
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const getSchemaValidationUrl = useGetSchemaValidationUrl()
 const getSchemaDocumentation = useGetSchemaDocumentation()
 const getCatalog = useGetCatalog()

package/src/components/ResourceAccordion/XmlPreview.client.vue

@@ -7,7 +7,7 @@
       v-else-if="loading"
       class="text-gray-medium"
     >
-      {{ $t("Chargement de l'aperçu XML...") }}
+      {{ t("Chargement de l'aperçu XML...") }}
     </div>
     <SimpleBanner
       v-else-if="fileTooLarge"
@@ -16,8 +16,8 @@
     >
       <RiErrorWarningLine class="shink-0 size-6" />
       <span>{{ fileSizeBytes
-        ? $t("Fichier XML trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : $t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
+        ? t("Fichier XML trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
+        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
       }}</span>
     </SimpleBanner>
     <SimpleBanner
@@ -26,7 +26,7 @@
       class="flex items-center space-x-2"
     >
       <RiErrorWarningLine class="shink-0 size-6" />
-      <span>{{ $t("Ce fichier XML ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
+      <span>{{ t("Ce fichier XML ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
     </SimpleBanner>
     <SimpleBanner
       v-else-if="error"
@@ -34,7 +34,7 @@
       class="flex items-center space-x-2"
     >
       <RiErrorWarningLine class="shink-0 size-6" />
-      <span>{{ $t("Erreur lors du chargement de l'aperçu XML.") }}</span>
+      <span>{{ t("Erreur lors du chargement de l'aperçu XML.") }}</span>
     </SimpleBanner>
   </div>
 </template>
@@ -46,6 +46,7 @@ import { RiErrorWarningLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../../config'
 import SimpleBanner from '../SimpleBanner.vue'
 import type { Resource } from '../../types/resources'
+import { useTranslation } from '../../composables/useTranslation'
 import '../../types/vue3-xml-viewer.d.ts'
 
 const XmlViewer = defineAsyncComponent(() =>
@@ -59,6 +60,7 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
+const { t } = useTranslation()
 
 const xmlData = ref<string | null>(null)
 const loading = ref(false)

package/src/components/ReuseCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="fr-enlarge-link group/reuse-card bg-white border border-gray-default flex flex-col relative">
+  <article class="fr-enlarge-link group/reuse-card bg-white border border-gray-default hover:bg-gray-some flex flex-col relative">
     <div class="flex flex-col h-full flex-1 order-2 px-8">
       <div class="order-1 flex flex-col px-4 py-1 h-full -mx-8">
         <h3 class="font-bold text-base mt-1 mb-0 truncate">
@@ -75,11 +75,11 @@
 <script setup lang="ts">
 import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 import { useFormatDate } from '../functions/dates'
 import { getOwnerName } from '../functions/owned'
 import type { Reuse } from '../types/reuses'
+import { useTranslation } from '../composables/useTranslation'
 import AppLink from './AppLink.vue'
 import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
 import ReuseDetails from './ReuseDetails.vue'
@@ -100,7 +100,7 @@ const props = defineProps<{
   organizationUrl?: RouteLocationRaw
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
 
 const ownerName = computed(() => getOwnerName(props.reuse))

package/src/components/ReuseDetails.vue

@@ -30,16 +30,16 @@
 
 <script setup lang="ts">
 import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
-import { useI18n } from 'vue-i18n'
 import { useReuseType } from '../composables/useReuseType'
 import { summarize } from '../functions/helpers'
 import type { Reuse } from '../types/reuses'
+import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
   reuse: Reuse
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 
 const { label: reuseType } = useReuseType(() => props.reuse.type)
 </script>

package/src/components/SmallChart.vue

@@ -57,7 +57,10 @@ const data = computed(() => {
   months.sort()
   const orderedData: Record<string, number> = {}
   for (const month of months) {
-    orderedData[month] = props.data[month]
+    orderedData[month] = 0
+    if (props.data[month]) {
+      orderedData[month] = props.data[month]
+    }
   }
   return orderedData
 })
@@ -76,33 +79,33 @@ const additionalDatasetConfig = computed<{
     borderDash: (ctx: ScriptableLineSegmentContext) => Array<number>
   }
 } | object>(() => {
-        if (props.type === 'bar') {
-          return {
-            type: 'bar',
-            barPercentage: 1,
-            categoryPercentage: 0.9,
-            // Change the color of the last bar only
-            backgroundColor: months.value.map((_value, index) => index === months.value.length - 1 ? (props.lastWithLowEmphasis ? LIGHT_COLOR_WITH_OPACITY : COLOR) : LIGHT_COLOR),
-          }
-        }
-
-        if (props.type === 'line') {
-          if (props.lastWithLowEmphasis) {
-            return {
-              type: 'line',
-              segment: {
-                borderColor: (ctx: ScriptableLineSegmentContext) => last(ctx, COLOR_WITH_OPACITY) || COLOR,
-                borderDash: (ctx: ScriptableLineSegmentContext) => last(ctx, [3, 3]) || [6, 0],
-              },
-            }
-          }
-          return {
-            type: 'line',
-          }
-        }
-
-        return {}
-      })
+  if (props.type === 'bar') {
+    return {
+      type: 'bar',
+      barPercentage: 1,
+      categoryPercentage: 0.9,
+      // Change the color of the last bar only
+      backgroundColor: months.value.map((_value, index) => index === months.value.length - 1 ? (props.lastWithLowEmphasis ? LIGHT_COLOR_WITH_OPACITY : COLOR) : LIGHT_COLOR),
+    }
+  }
+
+  if (props.type === 'line') {
+    if (props.lastWithLowEmphasis) {
+      return {
+        type: 'line',
+        segment: {
+          borderColor: (ctx: ScriptableLineSegmentContext) => last(ctx, COLOR_WITH_OPACITY) || COLOR,
+          borderDash: (ctx: ScriptableLineSegmentContext) => last(ctx, [3, 3]) || [6, 0],
+        },
+      }
+    }
+    return {
+      type: 'line',
+    }
+  }
+
+  return {}
+})
 
 const getMonthYear = (dateAsString: string): string => {
   const date = new Date(dateAsString)
@@ -110,8 +113,8 @@ const getMonthYear = (dateAsString: string): string => {
   return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear().toString().slice(-2)}`
 }
 
-const startDate = computed(() => months.value.length ? getMonthYear(months.value[0]) : null)
-const endDate = computed(() => months.value.length ? getMonthYear(months.value[months.value.length - 1]) : null)
+const startDate = computed(() => months.value.length ? getMonthYear(months.value[0]!) : null)
+const endDate = computed(() => months.value.length ? getMonthYear(months.value[months.value.length - 1]!) : null)
 
 const OPTIONS = {
   // @ts-expect-error animation can be `true` but the typing is not expecting it