@datagouv/components-next 0.0.32 → 0.1.1

package/src/components/StatBox.vue

@@ -46,7 +46,7 @@
         />
       </ContentLoader>
       <div
-        v-else-if="changesThisYear"
+        v-else-if="data && changesThisYear"
         class="ml-2"
       >
         <SmallChart
@@ -60,8 +60,12 @@
       </div>
     </div>
     <template v-if="lastValue && lastMonth">
-      <p class="mt-1 mb-0 text-xs">
-        {{ $t('depuis juillet 2022') }}
+      <p
+        v-if="since"
+        class="mt-1 mb-0 text-xs"
+      >
+        {{ t("depuis ") }}
+        {{ formatDate(since, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
       </p>
       <p class="mt-1 mb-0 text-xs text-success-darkest">
         <strong>
@@ -124,7 +128,7 @@
         />
       </ContentLoader>
       <div
-        v-else-if="changesThisYear"
+        v-else-if="data && changesThisYear"
         class="ml-2"
       >
         <SmallChart
@@ -149,21 +153,22 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { ContentLoader } from 'vue-content-loader'
 import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
+import { useTranslation } from '../composables/useTranslation'
 import SmallChart from './SmallChart.vue'
 
 const props = defineProps<{
   title: string
-  data: Record<string, number> | null
+  data?: Record<string, number> | null
   type: 'line' | 'bar'
   size?: 'sm'
   summary?: number | null
+  since?: string | null
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatDate } = useFormatDate()
 
 const months = computed(() => props.data ? Object.keys(props.data) : [])

package/src/components/Toggletip.vue

@@ -68,7 +68,6 @@ const calculatePanelPosition = () => {
       console.error('Cannot find the popover of the Toggletip.)')
       return
     }
-    console.log(popover)
     const popoverRect = popover.getBoundingClientRect()
     panelStyle.value = {
       left: `${popoverRect.left + window.scrollX}px`,

package/src/components/TranslationT.vue

@@ -0,0 +1,51 @@
+<template>
+  <component :is="tag">
+    <template
+      v-for="(part, index) in parts"
+      :key="index"
+    >
+      <component
+        :is="slots[part.placeholder]"
+        v-if="part.placeholder && slots[part.placeholder]"
+      />
+      <template v-else-if="part.text">
+        {{ part.text }}
+      </template>
+      <template v-else-if="part.placeholder">
+        {{ '{' + part.placeholder + '}' }}
+      </template>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { parseTextWithPlaceholders, useTranslation } from '../composables/useTranslation'
+
+const props = withDefaults(defineProps<{
+  keypath: string
+  tag?: string
+  n?: number
+  count?: number
+}>(), {
+  tag: 'span',
+})
+
+const slots = useSlots()
+const { t } = useTranslation()
+
+const parts = computed(() => {
+  const { keypath, n, count, ...interpolations } = props
+
+  const options: Record<string, string | number> = {
+    ...interpolations,
+  }
+
+  if (n !== undefined) options.n = n
+  if (count !== undefined) options.count = count
+
+  const translated = t(keypath, options)
+
+  return parseTextWithPlaceholders(translated)
+})
+</script>

package/src/composables/useTranslation.ts

@@ -0,0 +1,169 @@
+import { ref } from 'vue'
+
+// Declare useRequestHeaders for TypeScript (Nuxt composable)
+declare const useRequestHeader: ((header: string) => string | undefined) | undefined
+
+export type TranslationOptions = Record<string, string | number>
+
+const PLACEHOLDER_REGEX = /\{(\w+)\}/g
+
+// Pre-register all available translation files at build time
+const translationModules = import.meta.glob<Record<string, string>>('../../../locales/*.json', {
+  import: 'default',
+})
+
+function detectLanguage(): string {
+  // Server-side (Nuxt)
+  try {
+    const header = useRequestHeader?.('accept-language')
+    const acceptLanguage = header
+    if (acceptLanguage) {
+      const primaryLang = acceptLanguage.split(',')[0]!.split('-')[0]!.toLowerCase()
+      return primaryLang
+    }
+  }
+  catch {
+    // useRequestHeaders not available, continue to client-side detection
+  }
+
+  // Client-side
+  if (typeof window !== 'undefined' && navigator.language) {
+    return navigator.language.split('-')[0]!.toLowerCase()
+  }
+
+  return 'fr'
+}
+
+async function loadTranslationFile(lang: string): Promise<Record<string, string>> {
+  const modulePath = `../../../locales/${lang}.json`
+  const moduleLoader = translationModules[modulePath]
+
+  if (!moduleLoader) {
+    return {} // Translation file doesn't exist
+  }
+
+  try {
+    return await moduleLoader()
+  }
+  catch {
+    return {}
+  }
+}
+
+function interpolate(text: string, values: Record<string, string | number>): string {
+  return text.replace(PLACEHOLDER_REGEX, (match, key) => {
+    return key in values ? String(values[key]) : match
+  })
+}
+
+export function extractPlaceholders(text: string): string[] {
+  const placeholders: string[] = []
+  const regex = new RegExp(PLACEHOLDER_REGEX.source, PLACEHOLDER_REGEX.flags)
+  let match
+
+  while ((match = regex.exec(text)) !== null) {
+    placeholders.push(match[1]!)
+  }
+
+  return placeholders
+}
+
+export function parseTextWithPlaceholders(text: string): Array<{ text?: string, placeholder?: string }> {
+  const result: Array<{ text?: string, placeholder?: string }> = []
+  const regex = new RegExp(PLACEHOLDER_REGEX.source, PLACEHOLDER_REGEX.flags)
+  let lastIndex = 0
+  let match
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      result.push({ text: text.slice(lastIndex, match.index) })
+    }
+
+    result.push({ placeholder: match[1] })
+
+    lastIndex = regex.lastIndex
+  }
+
+  if (lastIndex < text.length) {
+    result.push({ text: text.slice(lastIndex) })
+  }
+
+  return result
+}
+
+function handlePluralization(key: string, count: number): string {
+  const parts = key.split('|').map(part => part.trim())
+
+  if (parts.length === 1) {
+    return parts[0]!
+  }
+
+  if (parts.length === 2) {
+    // French pluralization rule: 0 or 1 = singular, > 1 = plural
+    return count <= 1 ? parts[0]! : parts[1]!
+  }
+
+  if (parts.length >= 3) {
+    if (count === 0) {
+      return parts[0]!
+    }
+    else if (count === 1) {
+      return parts[1]!
+    }
+    else {
+      return parts[2]!
+    }
+  }
+
+  return parts[0]!
+}
+
+const translations = ref<Record<string, Record<string, string>>>({})
+
+export const loadCurrentTranslations = async () => {
+  const currentLang = detectLanguage()
+  if (currentLang in translations.value) {
+    // Already loaded
+    return
+  }
+
+  translations.value[currentLang] = await loadTranslationFile(currentLang)
+}
+
+export const useTranslation = () => {
+  const locale = detectLanguage()
+
+  // Initialize translations if not already done.
+  loadCurrentTranslations()
+
+  const t = (key: string, options?: TranslationOptions | number): string => {
+    let result = key
+
+    if (typeof options == 'number') {
+      options = { count: options, n: options }
+    }
+
+    // Try to get translation from loaded translations first
+    if (translations.value && translations.value[locale] && translations.value[locale][key]) {
+      result = translations.value[locale][key]
+    }
+
+    const count = options?.n ?? options?.count
+    if (count !== undefined) {
+      result = handlePluralization(result, Number(count))
+    }
+
+    if (options && Object.keys(options).length > 0) {
+      result = interpolate(result, options)
+    }
+
+    return result
+  }
+
+  return { t, locale }
+}
+
+export const t = async (key: string, options?: TranslationOptions): Promise<string> => {
+  const { t: translate } = useTranslation()
+  return translate(key, options)
+}

package/src/functions/activities.ts

@@ -0,0 +1,36 @@
+import { useTranslation } from '../composables/useTranslation'
+import type { Activity } from '../types/activity'
+
+export function getActivityTranslation(activity: Activity): string {
+  const { t } = useTranslation()
+
+  // Simple mapping of activity keys to human-readable text
+  const translations: Record<string, string> = {
+    'dataset:created': t('a créé le jeu de données'),
+    'dataset:updated': t('a mis à jour le jeu de données'),
+    'dataset:deleted': t('a supprimé le jeu de données'),
+    'dataset:discussed': t('a discuté du jeu de données'),
+    'dataset:followed': t('suit le jeu de données'),
+    'dataset:resource:added': t('a ajouté une ressource'),
+    'dataset:resource:updated': t('a mis à jour une ressource'),
+    'dataset:resource:deleted': t('a supprimé une ressource'),
+    'dataservice:created': t('a créé le service de données'),
+    'dataservice:updated': t('a mis à jour le service de données'),
+    'dataservice:deleted': t('a supprimé le service de données'),
+    'dataservice:discussed': t('a discuté du service de données'),
+    'dataservice:followed': t('suit le service de données'),
+    'organization:created': t('a créé l\'organisation'),
+    'organization:updated': t('a mis à jour l\'organisation'),
+    'organization:followed': t('suit l\'organisation'),
+    'reuse:created': t('a créé la réutilisation'),
+    'reuse:updated': t('a mis à jour la réutilisation'),
+    'reuse:deleted': t('a supprimé la réutilisation'),
+    'reuse:discussed': t('a discuté de la réutilisation'),
+    'reuse:followed': t('suit la réutilisation'),
+    'user:followed': t('suit l\'utilisateur'),
+    'topic:created': t('a créé le sujet'),
+    'topic:updated': t('a mis à jour le sujet'),
+  }
+
+  return translations[activity.key] || activity.label || activity.key
+}

package/src/functions/api.ts

@@ -1,7 +1,7 @@
 import { ref, toValue, watchEffect, type ComputedRef, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
-import { useI18n } from 'vue-i18n'
 import { useComponentsConfig } from '../config'
+import { useTranslation } from '../composables/useTranslation'
 import type { AsyncData, AsyncDataExecuteOptions, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
 
 export async function useFetch<DataT, ErrorT = never>(
@@ -10,7 +10,7 @@ export async function useFetch<DataT, ErrorT = never>(
 ): Promise<AsyncData<DataT, ErrorT>> {
   const config = useComponentsConfig()
 
-  const { locale } = useI18n()
+  const { locale } = useTranslation()
 
   if (config.customUseFetch) {
     return await config.customUseFetch(url, options)
@@ -35,11 +35,11 @@ export async function useFetch<DataT, ErrorT = never>(
             options.headers.set('X-API-KEY', config.devApiKey)
           }
 
-          if (locale.value) {
+          if (locale) {
             if (!options.params) {
               options.params = {}
             }
-            options.params['lang'] = locale.value
+            options.params['lang'] = locale
           }
         },
         async onResponseError() {

package/src/functions/datasets.ts

@@ -1,6 +1,11 @@
 import { useComponentsConfig } from '../config'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { CommunityResource, Resource } from '../types/resources'
+import { removeMarkdown } from './markdown'
+
+// Dataset description constants
+export const DESCRIPTION_SHORT_MAX_LENGTH = 200
+export const DESCRIPTION_MIN_LENGTH = 200
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -22,3 +27,26 @@ export function isCommunityResource(resource: Resource | CommunityResource): boo
 export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
   return `${dataset.page}#/${isCommunityResource(resource) ? 'community-resources' : 'resources'}/${resource.id}`
 }
+
+/**
+ * Returns the short description to display.
+ * If description_short is provided, it is used.
+ * Otherwise, the first DESCRIPTION_SHORT_MAX_LENGTH characters of description are used.
+ */
+export async function getShortDescription(
+  description: string | null | undefined,
+  descriptionShort: string | null | undefined
+): Promise<string> {
+  if (descriptionShort?.trim()) {
+    return descriptionShort
+  }
+  if (description?.trim()) {
+    // description field is a markdown field that may contain HTML tags, so we should trim it
+    const plainText = (await removeMarkdown(description)).trim()
+    if (plainText.length > DESCRIPTION_SHORT_MAX_LENGTH) {
+      return `${plainText.substring(0, DESCRIPTION_SHORT_MAX_LENGTH - 1)}…`
+    }
+    return plainText
+  }
+  return ''
+}

package/src/functions/dates.ts

@@ -1,9 +1,9 @@
-import { useI18n } from 'vue-i18n'
+import { useTranslation } from '../composables/useTranslation'
 
 const SECONDS_IN_A_DAY = 3600 * 24
 
 export function useFormatDate() {
-  const { t, locale } = useI18n()
+  const { t, locale } = useTranslation()
 
   const formatDate = (date: Date | string | null | undefined, options: Intl.DateTimeFormatOptions = {}) => {
     if (!date) {
@@ -13,7 +13,7 @@ export function useFormatDate() {
     if (!('dateStyle' in options)) {
       options.dateStyle = 'long'
     }
-    return new Intl.DateTimeFormat(locale.value, options).format(date)
+    return new Intl.DateTimeFormat(locale, options).format(date)
   }
 
   /**
@@ -58,7 +58,7 @@ export function useFormatDate() {
       const diffInUnit = Math.abs(diff / unit.seconds)
       return diffInUnit < unit.changeAfter
     })!
-    return new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }).format(Math.round(diff / correctUnit?.seconds), correctUnit?.unit)
+    return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(Math.round(diff / correctUnit?.seconds), correctUnit?.unit)
   }
 
   /**

package/src/functions/helpers.ts

@@ -1,9 +1,9 @@
-import { useI18n } from 'vue-i18n'
+import { useTranslation } from '../composables/useTranslation'
 
 export const filesize = (val: number) => {
-  const { t, locale } = useI18n()
+  const { t, locale } = useTranslation()
   const suffix = t('o')
-  const formatter = new Intl.NumberFormat(locale.value, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
+  const formatter = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
   const units = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z']
   for (const unit of units) {
     if (Math.abs(val) < 1024.0) {

package/src/functions/organizations.ts

@@ -1,8 +1,8 @@
-import { useI18n } from 'vue-i18n'
 import type { Component } from 'vue'
 import { RiBankLine, RiBuilding2Line, RiCommunityLine, RiGovernmentLine, RiUserLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
 import type { Organization } from '../types/organizations'
+import { useTranslation } from '../composables/useTranslation'
 
 export const CERTIFIED = 'certified'
 export const PUBLIC_SERVICE = 'public-service'
@@ -31,7 +31,7 @@ export function hasBadge(organization: Organization, kind: string) {
 }
 
 export function getOrganizationTypes(): Array<{ type: OrganizationTypes | UserType, label: string, icon: Component | null }> {
-  const { t } = useI18n()
+  const { t } = useTranslation()
   return [{
     type: PUBLIC_SERVICE,
     label: t('Service public'),

package/src/functions/pagination.ts

@@ -0,0 +1,9 @@
+import { useRoute } from 'vue-router'
+
+export function getLink(page: number): string {
+  const route = useRoute()
+  const routePath = route.path
+  const search = new URLSearchParams(route.query as Record<string, string>)
+  search.set('page', page.toFixed(0))
+  return `${routePath}?${search.toString()}`
+}

package/src/functions/resources.ts

@@ -1,6 +1,5 @@
 import { readonly, type Component } from 'vue'
 
-import { useI18n } from 'vue-i18n'
 import { RiEarthLine, RiMap2Line } from '@remixicon/vue'
 import Archive from '../components/Icons/Archive.vue'
 import Code from '../components/Icons/Code.vue'
@@ -9,6 +8,7 @@ import Image from '../components/Icons/Image.vue'
 import Link from '../components/Icons/Link.vue'
 import Table from '../components/Icons/Table.vue'
 import type { Resource } from '../types/resources'
+import { useTranslation } from '../composables/useTranslation'
 
 export function getResourceFormatIcon(format: string): Component | null {
   switch (format?.trim()?.toLowerCase()) {
@@ -90,7 +90,7 @@ export const RESOURCE_TYPE = readonly(['main', 'documentation', 'update', 'api',
 export type ResourceType = typeof RESOURCE_TYPE[number]
 
 export const getResourceLabel = (type: ResourceType) => {
-  const { t } = useI18n()
+  const { t } = useTranslation()
   switch (type) {
     case 'main':
       return t('Fichier principal') // TODO: manage the plural case

package/src/functions/reuses.ts

@@ -1,12 +1,12 @@
 import { ofetch } from 'ofetch'
-import { useI18n } from 'vue-i18n'
 import { useComponentsConfig } from '../config'
 import type { ReuseTopic, ReuseType } from '../types/reuses'
+import { useTranslation } from '../composables/useTranslation'
 
 let reuseTypesRequest: Promise<Array<ReuseType>> | null = null
 export function useFetchReuseTypes() {
   const config = useComponentsConfig()
-  const { locale } = useI18n()
+  const { locale } = useTranslation()
 
   return async (): Promise<Array<ReuseType>> => {
     if (reuseTypesRequest) {
@@ -15,7 +15,7 @@ export function useFetchReuseTypes() {
 
     return await (reuseTypesRequest = ofetch<Array<ReuseType>>('api/1/reuses/types/', {
       baseURL: config.apiBase,
-      query: { lang: locale.value },
+      query: { lang: locale },
     }))
   }
 }

package/src/main.ts

@@ -1,7 +1,8 @@
 import type { App, Plugin } from 'vue'
-import { createI18n, useI18n } from 'vue-i18n'
+import type { Activity, ActivityKey } from './types/activity.js'
+import type { PaginatedArray } from './types/api.js'
 import type { ContactPoint, ContactPointRole } from './types/contact_point.js'
-import type { Badge, Badges } from './types/badges'
+import type { Badge, Badges, TranslatedBadge } from './types/badges'
 import type { Dataset, DatasetV2, DatasetV2WithFullObject, NewDataset, Quality, Rel } from './types/datasets'
 import type { NewDataservice, Dataservice, DataserviceAccessAudience, DataserviceAccessAudienceCondition, DataserviceAccessAudienceType } from './types/dataservices'
 import type { Frequency, Frequencies } from './types/frequency'
@@ -11,12 +12,14 @@ import type { License } from './types/licenses'
 import type { Member, MemberRole, NewOrganization, Organization } from './types/organizations'
 import type { Owned, OwnedWithId } from './types/owned'
 import type { NewReuse, Reuse, ReuseTopic, ReuseType } from './types/reuses'
-import type { TopicV2 } from './types/topics'
+import type { TopicV2, TopicElement, TopicElementClass, TopicElementRel } from './types/topics'
 import type { CommunityResource, FileResourceFileType, RemoteResourceFileType, ResourceFileType, ResourceType, Resource } from './types/resources'
 import type { Site } from './types/site'
 import type { Weight, WellType } from './types/ui'
 import type { User } from './types/users'
 
+import ActivityList from './components/ActivityList/ActivityList.vue'
+import UserActivityList from './components/ActivityList/UserActivityList.vue'
 import AnimatedLoader from './components/AnimatedLoader.vue'
 import AppLink from './components/AppLink.vue'
 import Avatar from './components/Avatar.vue'
@@ -34,10 +37,12 @@ import DatasetQualityItem from './components/DatasetQualityItem.vue'
 import DatasetQualityScore from './components/DatasetQualityScore.vue'
 import DatasetQualityTooltipContent from './components/DatasetQualityTooltipContent.vue'
 import ExtraAccordion from './components/ExtraAccordion.vue'
+import LabelTag from './components/DatasetLabelTag.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
 import OwnerTypeIcon from './components/OwnerTypeIcon.vue'
+import PaddedContainer from './components/PaddedContainer.vue'
 import Pagination from './components/Pagination.vue'
 import Placeholder from './components/Placeholder.vue'
 import ReadMore from './components/ReadMore.vue'
@@ -55,12 +60,15 @@ import TabPanel from './components/Tabs/TabPanel.vue'
 import TabPanels from './components/Tabs/TabPanels.vue'
 import Tooltip from './components/Tooltip.vue'
 import Toggletip from './components/Toggletip.vue'
+import TranslationT from './components/TranslationT.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
 export * from './composables/useActiveDescendant'
 export * from './composables/useReuseType'
+export * from './composables/useTranslation'
 
+export * from './functions/activities'
 export * from './functions/datasets'
 export * from './functions/dates'
 export * from './functions/helpers'
@@ -69,6 +77,7 @@ export * from './functions/matomo'
 export * from './functions/never'
 export * from './functions/organizations'
 export * from './functions/owned'
+export * from './functions/pagination'
 export * from './functions/resources'
 export * from './functions/reuses'
 export * from './functions/schemas'
@@ -76,6 +85,8 @@ export * from './functions/users'
 
 export type {
   UseFetchFunction,
+  Activity,
+  ActivityKey,
   Badge,
   Badges,
   CommunityResource,
@@ -104,6 +115,7 @@ export type {
   Organization,
   Owned,
   OwnedWithId,
+  PaginatedArray,
   Quality,
   Rel,
   RemoteResourceFileType,
@@ -115,7 +127,11 @@ export type {
   ReuseType,
   Site,
   SpatialZone,
+  TranslatedBadge,
   TopicV2,
+  TopicElement,
+  TopicElementClass,
+  TopicElementRel,
   User,
   Weight,
   WellType,
@@ -129,29 +145,13 @@ const datagouv: Plugin<PluginConfig> = {
       const textClamp = await import('vue3-text-clamp')
       options.textClamp = textClamp.default
     }
-    try {
-      // There is no condition to check if vue-i18n is instancied, only an error...
-      useI18n()
-    }
-    catch {
-      const i18n = createI18n({
-        legacy: false,
-        globalInjection: true,
-        locale: 'fr',
-        messages: {},
-        formatFallbackMessages: true,
-        missingWarn: false,
-        fallbackFormat: true,
-        fallbackWarn: false,
-      })
-      app.use(i18n)
-    }
   },
 }
 
 export {
   datagouv,
   useComponentsConfig,
+  ActivityList,
   AnimatedLoader,
   AppLink,
   Avatar,
@@ -169,10 +169,12 @@ export {
   DatasetQualityTooltipContent,
   DateRangeDetails,
   ExtraAccordion,
+  LabelTag,
   OrganizationCard,
   OrganizationNameWithCertificate,
   OwnerType,
   OwnerTypeIcon,
+  PaddedContainer,
   Pagination,
   Placeholder,
   ReadMore,
@@ -190,4 +192,6 @@ export {
   TabPanels,
   Tooltip,
   Toggletip,
+  TranslationT,
+  UserActivityList,
 }