@datagouv/components-next 1.0.2-dev.191 → 1.0.2-dev.193

package/src/components/ResourceListItem.vue

@@ -59,7 +59,14 @@
       >
         <span class="block whitespace-nowrap text-[13px] font-medium leading-5 text-gray-title">{{ resource.title || t('Fichier sans nom') }}</span>
         <div class="mt-1 flex items-center gap-1 text-[12px] leading-4 text-gray-medium">
-          <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
+          <TranslationT keypath="mis à jour {date}">
+            <template #date>
+              <FormattedDate
+                :date="resource.last_modified"
+                format="relative"
+              />
+            </template>
+          </TranslationT>
           <template v-if="humanFilesize">
             <span>·</span>
             <span>{{ humanFilesize }}</span>
@@ -91,9 +98,10 @@ import { RiDownloadLine } from '@remixicon/vue'
 import AppLink from './AppLink.vue'
 import ClientOnly from './ClientOnly.vue'
 import File from './Icons/File.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 import { getResourceFormatIcon, getResourceIconColor, getResourceFilesize } from '../functions/resources'
 import { filesize, summarize } from '../functions/helpers'
-import { useFormatDate } from '../functions/dates'
 import { useTranslation } from '../composables/useTranslation'
 import type { Resource } from '../types/resources'
 
@@ -116,7 +124,6 @@ const props = withDefaults(defineProps<{
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 // Render the icon directly (not via ResourceIcon which forces a gray color) so the
 // colored badge can tint it through currentColor + [&_svg]:fill-current.

package/src/components/ReuseCard.vue

@@ -21,7 +21,18 @@
               :organization-url="organizationUrl"
             />
             <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
-            <span class="block flex-none">{{ t('publié {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
+            <TranslationT
+              class="block flex-none"
+              keypath="publié {date}"
+            >
+              <template #date>
+                <FormattedDate
+                  :date="reuse.created_at"
+                  format="relative"
+                  :options="{ dateStyle: 'medium' }"
+                />
+              </template>
+            </TranslationT>
           </div>
           <ReuseDetails :reuse />
         </div>
@@ -67,7 +78,6 @@
 import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
 import type { Reuse, ReuseV2 } from '../types/reuses'
 import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
@@ -75,6 +85,8 @@ import AppLink from './AppLink.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 const props = withDefaults(defineProps<{
   reuse: Reuse | ReuseV2
@@ -97,7 +109,6 @@ const props = withDefaults(defineProps<{
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 const reuseUrl = computed(() => props.reuseUrl || props.reuse.page)
 </script>

package/src/components/SmallChart.vue

@@ -11,10 +11,16 @@
       class="flex flex-wrap justify-between"
     >
       <p class="text-[0.625rem] m-0 text-gray-medium">
-        {{ startDate }}
+        <FormattedDate
+          :date="startDate"
+          :options="{ dateStyle: undefined, year: '2-digit', month: '2-digit' }"
+        />
       </p>
       <p class="text-[0.625rem] m-0 text-gray-medium">
-        {{ endDate }}
+        <FormattedDate
+          :date="endDate"
+          :options="{ dateStyle: undefined, year: '2-digit', month: '2-digit' }"
+        />
       </p>
     </div>
   </div>
@@ -24,6 +30,7 @@
 import type { ChartOptions, ScriptableLineSegmentContext } from 'chart.js'
 import Chart from 'chart.js/auto'
 import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+import FormattedDate from './FormattedDate.vue'
 
 const LIGHT_COLOR = '#B6CFFB'
 const COLOR = '#3558A2'
@@ -107,14 +114,8 @@ const additionalDatasetConfig = computed<{
   return {}
 })
 
-const getMonthYear = (dateAsString: string): string => {
-  const date = new Date(dateAsString)
-
-  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[0] ?? null)
+const endDate = computed(() => months.value[months.value.length - 1] ?? null)
 
 const OPTIONS = {
   // @ts-expect-error animation can be `true` but the typing is not expecting it

package/src/components/StatBox.vue

@@ -65,14 +65,20 @@
         class="mt-1 mb-0 text-xs"
       >
         {{ t("depuis ") }}
-        {{ formatDate(since, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+        <FormattedDate
+          :date="since"
+          :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+        />
       </p>
       <p class="mt-1 mb-0 text-xs text-success-darkest">
         <strong>
           + {{ summarize(lastValue, 2) }}
         </strong>
         {{ t(" en ") }}
-        {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+        <FormattedDate
+          :date="lastMonth"
+          :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+        />
       </p>
     </template>
   </div>
@@ -146,7 +152,10 @@
         + {{ summarize(lastValue, 2) }}
       </strong>
       {{ t(" en ") }}
-      {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+      <FormattedDate
+        :date="lastMonth"
+        :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+      />
     </p>
   </div>
 </template>
@@ -154,7 +163,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { ContentLoader } from 'vue-content-loader'
-import { useFormatDate } from '../functions/dates'
+import FormattedDate from './FormattedDate.vue'
 import { summarize } from '../functions/helpers'
 import { useTranslation } from '../composables/useTranslation'
 import SmallChart from './SmallChart.vue'
@@ -169,7 +178,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 
 const months = computed(() => props.data ? Object.keys(props.data) : [])
 const values = computed(() => props.data ? Object.values(props.data) : [])

package/src/components/TopicCard.vue

@@ -41,12 +41,20 @@
         aria-hidden="true"
         class="hidden md:block size-4 flex-none fill-gray-medium"
       />
-      <div
+      <TranslationT
         v-if="topic.last_modified"
+        tag="div"
         class="w-full md:w-auto text-gray-medium whitespace-nowrap"
+        keypath="Mis à jour {date}"
       >
-        {{ t('Mis à jour {date}', { date: formatDate(topic.last_modified) }) }}
-      </div>
+        <template #date>
+          <FormattedDate
+            :date="topic.last_modified"
+            format="relative"
+            :options="{ dateStyle: 'long' }"
+          />
+        </template>
+      </TranslationT>
     </div>
 
     <ObjectCardShortDescription :text="topic.description" />
@@ -97,8 +105,6 @@
 import { RiBookShelfLine, RiDatabase2Line, RiLineChartLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { TopicV2 } from '../types/topics'
-import { useFormatDate } from '../functions/dates'
-import { useTranslation } from '../composables/useTranslation'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
@@ -106,6 +112,8 @@ import OrganizationLogo from './OrganizationLogo.vue'
 import Avatar from './Avatar.vue'
 import Placeholder from './Placeholder.vue'
 import ObjectCard from './ObjectCard.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 type TopicWithStats = TopicV2 & {
   nb_datasets?: number
@@ -122,13 +130,4 @@ withDefaults(defineProps<{
   showLogo: true,
   showStats: true,
 })
-
-const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
-
-const formatDate = (dateString: string) => {
-  return formatRelativeIfRecentDate(dateString, {
-    dateStyle: 'long',
-  })
-}
 </script>

package/src/functions/dates.ts

@@ -9,11 +9,9 @@ export function useFormatDate() {
     if (!date) {
       return ''
     }
-    date = new Date(date)
-    if (!('dateStyle' in options)) {
-      options.dateStyle = 'long'
-    }
-    return new Intl.DateTimeFormat(locale, options).format(date)
+    // An explicit `dateStyle: undefined` overrides the default, which is how callers ask
+    // for `year`/`month` components — `dateStyle` and those cannot be combined.
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'long', ...options }).format(new Date(date))
   }
 
   /**

package/src/main.ts

@@ -51,6 +51,7 @@ import DescriptionListTerm from './components/DescriptionListTerm.vue'
 import DescriptionListDetails from './components/DescriptionListDetails.vue'
 import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
 import DateRangeDetails from './components/DateRangeDetails.vue'
+import FormattedDate from './components/FormattedDate.vue'
 import { DatasetInformationSection, DatasetTemporalitySection, DatasetSpatialSection, DatasetSchemaSection, DatasetEmbedSection } from './components/DatasetInformation'
 import LeafletMap from './components/LeafletMap.vue'
 import LicenseBadge from './components/LicenseBadge.vue'
@@ -366,6 +367,7 @@ export {
   QualityScore,
   DatasetQualityTooltipContent,
   DateRangeDetails,
+  FormattedDate,
   ExtraAccordion,
   LabelTag,
   LeafletMap,