@datagouv/components-next 1.0.2-dev.192 → 1.0.2-dev.194

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/TabularExplorer/types.ts

@@ -24,25 +24,28 @@ export type TabularProfileResponse = {
   indexes: null
 }
 
+// Only CSV resources go through csv-detective: for the other formats the API
+// indexes (parquet…), the profile is reduced to the column names, their types
+// and the row count. Everything csv-detective produces is therefore optional.
 export type TabularProfile = {
   header: string[]
   columns: Record<string, TabularColumnInfo>
-  formats: Record<string, string[]>
-  profile: Record<string, TabularColumnProfile>
-  encoding: string
-  separator: string
-  categorical: string[]
   total_lines: number
-  nb_duplicates: number
-  columns_fields: Record<string, TabularColumnInfo>
-  columns_labels: Record<string, TabularColumnInfo>
-  header_row_idx: number
-  heading_columns: number
-  trailing_columns: number
+  formats?: Record<string, string[]>
+  profile?: Record<string, TabularColumnProfile>
+  encoding?: string
+  separator?: string
+  categorical?: string[]
+  nb_duplicates?: number
+  columns_fields?: Record<string, TabularColumnInfo>
+  columns_labels?: Record<string, TabularColumnInfo>
+  header_row_idx?: number
+  heading_columns?: number
+  trailing_columns?: number
 }
 
 export type TabularColumnInfo = {
-  score: number
+  score?: number
   format: string
   python_type: string
 }

package/src/components/TabularExplorer/useColumnMetadata.ts

@@ -38,7 +38,7 @@ export function useColumnMetadata(
     if (!profile) return 'text'
     const colInfo = profile.columns[col]
     if (!colInfo) return 'text'
-    return resolveColumnType(colInfo, profile.categorical.includes(col))
+    return resolveColumnType(colInfo, profile.categorical?.includes(col) ?? false)
   }
 
   const columnTypesMap = computed<Record<string, ColumnType>>(() => {

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/charts.ts

@@ -72,13 +72,13 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
 export function buildColumnsFromProfile(profile: { profile: TabularProfile }): Array<ColumnDefinition> {
   return profile.profile.header.map((name) => {
     const colInfo = profile.profile.columns[name]
-    const isCategorical = profile.profile.categorical.includes(name)
+    const isCategorical = profile.profile.categorical?.includes(name) ?? false
     // The chart stack only branches on 'number' and 'date' (continuous axis,
     // aggregatable series, time formatting): it has no notion of a year column,
     // and on an axis a year is a number.
     const resolvedType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
     const colType = resolvedType === 'year' ? 'number' : resolvedType
-    const colProfile = profile.profile.profile[name]
+    const colProfile = profile.profile.profile?.[name]
     return {
       name,
       type: colType,

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,