@datagouv/components-next 0.0.31 → 0.1.0

package/src/components/StatBox.vue

@@ -46,7 +46,7 @@
         />
       </ContentLoader>
       <div
-        v-else-if="changesThisYear"
+        v-else-if="data && changesThisYear"
         class="ml-2"
       >
         <SmallChart
@@ -61,7 +61,7 @@
     </div>
     <template v-if="lastValue && lastMonth">
       <p class="mt-1 mb-0 text-xs">
-        {{ $t('depuis juillet 2022') }}
+        {{ t('depuis juillet 2022') }}
       </p>
       <p class="mt-1 mb-0 text-xs text-success-darkest">
         <strong>
@@ -124,7 +124,7 @@
         />
       </ContentLoader>
       <div
-        v-else-if="changesThisYear"
+        v-else-if="data && changesThisYear"
         class="ml-2"
       >
         <SmallChart
@@ -149,21 +149,21 @@
 
 <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
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatDate } = useFormatDate()
 
 const months = computed(() => props.data ? Object.keys(props.data) : [])

package/src/components/Toggletip.vue

@@ -1,6 +1,7 @@
 <template>
   <Popover
     v-slot="{ open, close }"
+    ref="popover"
     class="relative"
   >
     <!--
@@ -11,17 +12,13 @@
       :value="open"
       @changed="calculatePanelPosition"
     />
-    <PopoverButton ref="button">
-      <BrandedButton
-        color="secondary-softer"
-        icon-only
-        :icon="RiInformationLine"
-        size="xs"
-        keep-margins-even-without-borders
-        v-bind="buttonProps"
-      >
-        <slot />
-      </BrandedButton>
+    <PopoverButton
+      v-bind="buttonProps"
+      class="w-8 h-8 rounded-full -outline-offset-2 inline-flex items-center justify-center bg-transparent border-transparent hover:!bg-gray-some"
+    >
+      <slot>
+        <RiInformationLine class="size-5" />
+      </slot>
     </PopoverButton>
 
     <ClientOnly>
@@ -49,7 +46,6 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref, useTemplateRef } from 'vue'
 import { RiInformationLine } from '@remixicon/vue'
-import BrandedButton from './BrandedButton.vue'
 import ClientOnly from './ClientOnly.vue'
 import ValueWatcher from './ValueWatcher.vue'
 
@@ -58,7 +54,7 @@ defineProps<{
   noMargin?: boolean
 }>()
 
-const buttonRef = useTemplateRef('button')
+const popoverRef = useTemplateRef('popover')
 const panelStyle = ref({})
 
 // Since the parent of the component can have an overflow-hidden
@@ -66,17 +62,16 @@ const panelStyle = ref({})
 // We need to compute the correct position of the tooltip.
 const calculatePanelPosition = () => {
   nextTick(() => {
-    const button = buttonRef.value?.$el || buttonRef.value
+    const popover = popoverRef.value?.$el
 
-    if (!button) {
-      console.error('Cannot find the button of the Toggletip.)')
+    if (!popover) {
+      console.error('Cannot find the popover of the Toggletip.)')
       return
     }
-
-    const buttonRect = button.getBoundingClientRect()
+    const popoverRect = popover.getBoundingClientRect()
     panelStyle.value = {
-      left: `${buttonRect.left + window.scrollX}px`,
-      top: `${buttonRect.bottom + window.scrollY}px`,
+      left: `${popoverRect.left + window.scrollX}px`,
+      top: `${popoverRect.bottom + window.scrollY}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/useActiveDescendant.ts

@@ -5,7 +5,7 @@ export type Option = {
   id: string
 }
 
-export default function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<Array<T>>, direction: 'horizontal' | 'vertical') {
+export function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<Array<T>>, direction: 'horizontal' | 'vertical') {
   const active = ref<string | undefined>()
 
   const activeOption = computed<T | undefined>(() => toValue(options).find(option => option.id === active.value))

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]![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)
@@ -8,7 +13,7 @@ function constructUrl(baseUrl: string, path: string): string {
   return url.toString()
 }
 
-export default function getDatasetOEmbedHtml(type: string, id: string): string {
+export function getDatasetOEmbedHtml(type: string, id: string): string {
   const config = useComponentsConfig()
 
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')
@@ -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'),
@@ -91,7 +91,7 @@ export function isOrganizationCertified(organization: Organization | null): bool
   return hasBadge(organization, CERTIFIED) && (isType(organization, PUBLIC_SERVICE) || isType(organization, LOCAL_AUTHORITY))
 }
 
-export default function getOrganizationOEmbedHtml(type: string, id: string): string {
+export function getOrganizationOEmbedHtml(type: string, id: string): string {
   const config = useComponentsConfig()
 
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')

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 },
     }))
   }
 }