@datagouv/components-next 0.0.7 → 0.0.9

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="fr-text--xs">
+    <div v-if="xmlData">
+      <XmlViewer :xml="xmlData" />
+    </div>
+    <div
+      v-else-if="loading"
+      class="text-gray-medium"
+    >
+      {{ $t("Chargement de l'aperçu XML...") }}
+    </div>
+    <SimpleBanner
+      v-else-if="fileTooLarge"
+      type="warning"
+      class="flex items-center space-x-2"
+    >
+      <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.")
+      }}</span>
+    </SimpleBanner>
+    <SimpleBanner
+      v-else-if="error === 'network'"
+      type="warning"
+      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>
+    </SimpleBanner>
+    <SimpleBanner
+      v-else-if="error"
+      type="warning"
+      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>
+    </SimpleBanner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
+import { RiErrorWarningLine } from '@remixicon/vue'
+
+import { useComponentsConfig } from '../../config'
+import SimpleBanner from '../SimpleBanner.vue'
+import type { Resource } from '../../types/resources'
+
+const XmlViewer = defineAsyncComponent(() =>
+  import('vue3-xml-viewer').then((module) => {
+    return module.default || module.XmlViewer
+  }),
+)
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const config = useComponentsConfig()
+
+const xmlData = ref<string | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const fileTooLarge = ref(false)
+
+const fileSizeBytes = computed(() => {
+  // Check if resource has filesize
+  if (props.resource.filesize) {
+    return props.resource.filesize
+  }
+
+  // Check if resource has content-length in extras (from API metadata)
+  const contentLength = props.resource.extras?.['analysis:content-length']
+  if (contentLength && typeof contentLength === 'number') {
+    return contentLength
+  }
+
+  return null
+})
+
+const shouldLoadXml = computed(() => {
+  const size = fileSizeBytes.value
+  if (!size) {
+    // If we don't know the size, don't risk loading a potentially huge file
+    return false
+  }
+
+  // Check if maxXmlPreviewSize is configured
+  if (!config.maxXmlPreviewSize) {
+    // If no limit is set, don't load unknown files
+    return false
+  }
+
+  // Convert maxXmlPreviewSize from characters to bytes (rough estimate)
+  // Assuming average 1 byte per character for XML
+  const maxSizeBytes = config.maxXmlPreviewSize
+
+  return size <= maxSizeBytes
+})
+
+const fetchXmlData = async () => {
+  // Check if file is too large or size is unknown before making the request
+  if (!shouldLoadXml.value) {
+    fileTooLarge.value = true
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const response = await fetch(props.resource.url)
+    // const response = await fetch('/test-data.xml') // For testing locally without CORS issues
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    const data = await response.text()
+
+    // Use the XML data as string - let the XML viewer handle large files
+    xmlData.value = data
+  }
+  catch (err) {
+    console.error('Error loading XML:', err)
+
+    if (err instanceof TypeError) {
+      error.value = 'network'
+    }
+    else {
+      error.value = 'generic'
+    }
+
+    xmlData.value = null
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchXmlData()
+})
+</script>

package/src/components/ReuseCard.vue

@@ -4,7 +4,7 @@
       <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">
           <AppLink
-            class="text-gray-title"
+            class="text-gray-title overflow-hidden"
             :to="reuseUrl"
           >
             {{ reuse.title }}
@@ -18,7 +18,7 @@
             >
               <AppLink
                 v-if="organizationUrl"
-                class="fr-link block"
+                class="link overflow-hidden"
                 :to="organizationUrl"
               >
                 <OrganizationNameWithCertificate
@@ -35,7 +35,7 @@
               class="mr-1 truncate"
             >{{ ownerName }}</span>
             <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
-            <span class="block flex-none">{{ t('published {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
+            <span class="block flex-none">{{ t('publié {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
           </p>
           <ReuseDetails :reuse />
         </div>
@@ -58,13 +58,13 @@
         <li v-if="reuse.private">
           <p class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium">
             <RiLockLine class="size-3.5 mr-0.5" />
-            {{ t('Draft') }}
+            {{ t('Brouillon') }}
           </p>
         </li>
         <li v-if="reuse.archived">
           <p class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium">
             <RiLockLine class="size-3.5 mr-0.5" />
-            {{ t('Archived') }}
+            {{ t('Archivé') }}
           </p>
         </li>
       </ul>
@@ -77,7 +77,7 @@ import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
-import { formatRelativeIfRecentDate } from '../functions/dates'
+import { useFormatDate } from '../functions/dates'
 import { getOwnerName } from '../functions/owned'
 import type { Reuse } from '../types/reuses'
 import AppLink from './AppLink.vue'
@@ -91,7 +91,7 @@ const props = defineProps<{
   * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.
   * It is used as a separate prop to allow other sites using the package to define their own reuse pages.
   */
-  reuseUrl: RouteLocationRaw
+  reuseUrl?: RouteLocationRaw
 
   /**
   * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha reuse.
@@ -101,6 +101,9 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+const { formatRelativeIfRecentDate } = useFormatDate()
 
 const ownerName = computed(() => getOwnerName(props.reuse))
+
+const reuseUrl = computed(() => props.reuseUrl || props.reuse.page)
 </script>

package/src/components/ReuseDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap items-center gap-0.5">
+  <div class="flex flex-wrap items-center gap-1">
     <p class="text-sm mb-0">
       {{ reuseType }}
     </p>
@@ -9,7 +9,7 @@
     />
     <p
       class="text-sm mb-0 flex items-center gap-0.5"
-      :aria-label="t('{n} views', reuse.metrics.views)"
+      :aria-label="t('{n} vues | {n} vue | {n} vues', reuse.metrics.views)"
     >
       <RiEyeLine
         aria-hidden="true"
@@ -18,7 +18,7 @@
     </p>
     <p
       class="text-sm mb-0 flex items-center gap-0.5"
-      :aria-label="t('{n} followers', reuse.metrics.followers)"
+      :aria-label="t('{n} abonnés | {n} abonné | {n} abonnés', reuse.metrics.followers)"
     >
       <RiStarLine
         aria-hidden="true"

package/src/components/SimpleBanner.vue

@@ -11,14 +11,17 @@
 import { computed } from 'vue'
 
 const props = defineProps<{
-  type: 'primary' | 'warning' | 'gray'
+  type: 'primary' | 'primary-frame' | 'warning' | 'gray' | 'danger' | 'success'
 }>()
 
 const classes = computed(() => {
   return {
-    primary: 'bg-datagouv-lightest text-datagouv-dark',
-    warning: 'bg-warning3-lightest text-warning3-dark',
-    gray: 'bg-gray-some text-gray-plain',
+    'primary': 'bg-datagouv-lightest text-datagouv-dark',
+    'primary-frame': 'bg-gray-50 border border-datagouv',
+    'warning': 'bg-warning3-lightest text-warning3-dark',
+    'gray': 'bg-gray-some text-gray-plain',
+    'success': 'bg-success-lightest text-success-dark',
+    'danger': 'bg-danger-lightest text-danger-dark',
   }[props.type]
 })
 </script>

package/src/components/SmallChart.vue

@@ -2,14 +2,18 @@
   <div>
     <canvas
       ref="canvasRef"
-      width="120"
-      height="30"
+      :width="width*2"
+      :height="height*2"
+      :style="{ width: width + 'px', height: height + 'px' }"
     />
-    <div class="fr-grid-row justify-between">
-      <p class="text-xxs fr-m-0 text-mention-grey">
+    <div
+      v-if="showAxisLabel"
+      class="flex flex-wrap justify-between"
+    >
+      <p class="text-[0.625rem] m-0 text-gray-medium">
         {{ startDate }}
       </p>
-      <p class="text-xxs fr-m-0 text-mention-grey">
+      <p class="text-[0.625rem] m-0 text-gray-medium">
         {{ endDate }}
       </p>
     </div>
@@ -27,10 +31,16 @@ const LIGHT_COLOR_WITH_OPACITY = 'rgba(182, 207, 251, 0.7)'
 
 const props = withDefaults(defineProps<{
   data: Record<string, number>
-  type: 'line' | 'bar'
+  height?: number
   lastWithLowEmphasis?: boolean
+  showAxisLabel?: boolean
+  type: 'line' | 'bar'
+  width?: number
 }>(), {
+  height: 30,
   lastWithLowEmphasis: false,
+  showAxisLabel: true,
+  width: 120,
 })
 
 const last = (ctx, value) => {
@@ -85,8 +95,10 @@ const startDate = computed(() => months.value.length ? getMonthYear(months.value
 const endDate = computed(() => months.value.length ? getMonthYear(months.value[months.value.length - 1]) : null)
 
 const OPTIONS = {
-  animation: false,
-  responsive: true,
+  animation: true,
+  devicePixelRatio: 1,
+  responsive: false,
+  clip: false,
   plugins: {
     legend: {
       display: false,
@@ -105,6 +117,7 @@ const OPTIONS = {
       backgroundColor: COLOR,
       borderColor: COLOR,
       borderJoinStyle: 'round',
+      borderWidth: 3,
       tension: 0.35,
     },
     point: {
@@ -125,7 +138,8 @@ const OPTIONS = {
   },
   layout: {
     padding: {
-      top: 1.5, // half border width
+      top: 2, // half border width
+      bottom: 2,
     },
   },
 } satisfies ChartOptions

package/src/components/StatBox.vue

@@ -1,13 +1,87 @@
 <template>
+  <div v-if="size === 'sm'">
+    <h3 class="text-sm font-bold m-0">
+      {{ title }}
+    </h3>
+    <div class="flex flex-wrap items-center">
+      <ContentLoader
+        v-if="summary === null"
+        :width="39"
+        :height="24"
+        :speed="2"
+        primary-color="#f3f3f3"
+        secondary-color="#ecebeb"
+      >
+        <rect
+          x="0"
+          y="0"
+          rx="3"
+          ry="3"
+          width="39"
+          height="24"
+        />
+      </ContentLoader>
+      <p
+        v-else
+        class="font-extrabold leading-none m-0"
+      >
+        {{ summarize(summary, 2) }}
+      </p>
+      <ContentLoader
+        v-if="data === null"
+        :width="77"
+        :height="19"
+        :speed="2"
+        primary-color="#f3f3f3"
+        secondary-color="#ecebeb"
+        class="ml-2"
+      >
+        <rect
+          x="0"
+          y="0"
+          rx="3"
+          ry="3"
+          width="77"
+          height="19"
+        />
+      </ContentLoader>
+      <div
+        v-else-if="changesThisYear"
+        class="ml-2"
+      >
+        <SmallChart
+          :type
+          :data
+          :last-with-low-emphasis="true"
+          :show-axis-label="false"
+          :height="19"
+          :width="77"
+        />
+      </div>
+    </div>
+    <template v-if="lastValue && lastMonth">
+      <p class="mt-1 mb-0 text-xs">
+        {{ $t('depuis juillet 2022') }}
+      </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 }) }}
+      </p>
+    </template>
+  </div>
   <div
+    v-else
     :class="{
       'text-gray-medium': !changesThisYear && !summary,
     }"
   >
-    <h3 class="fr-text--sm fr-m-0">
+    <h3 class="text-sm m-0">
       {{ title }}
     </h3>
-    <div class="fr-grid-row fr-grid-row--middle">
+    <div class="flex flex-wrap items-center">
       <ContentLoader
         v-if="summary === null"
         :width="92"
@@ -27,7 +101,7 @@
       </ContentLoader>
       <p
         v-else
-        class="h1 line-height-1 fr-m-0"
+        class="font-extrabold text-[2rem] leading-none m-0"
       >
         {{ summarize(summary, 2) }}
       </p>
@@ -38,7 +112,7 @@
         :speed="2"
         primary-color="#f3f3f3"
         secondary-color="#ecebeb"
-        class="fr-ml-1w"
+        class="ml-2"
       >
         <rect
           x="0"
@@ -51,7 +125,7 @@
       </ContentLoader>
       <div
         v-else-if="changesThisYear"
-        class="fr-ml-1w"
+        class="ml-2"
       >
         <SmallChart
           :type
@@ -62,12 +136,12 @@
     </div>
     <p
       v-if="lastValue && lastMonth"
-      class="fr-mt-1w fr-text--regular text-transform-none fr-badge fr-badge--no-icon fr-badge--success"
+      class="mt-2 font-normal text-transform-none fr-badge fr-badge--no-icon fr-badge--success"
     >
-      <strong class="fr-mr-1v">
+      <strong class="mr-1">
         + {{ summarize(lastValue, 2) }}
       </strong>
-      {{ t(" in ") }}
+      {{ t(" en ") }}
       {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
     </p>
   </div>
@@ -77,7 +151,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { ContentLoader } from 'vue-content-loader'
-import { formatDate } from '../functions/dates'
+import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
 import SmallChart from './SmallChart.vue'
 
@@ -85,10 +159,12 @@ const props = defineProps<{
   title: string
   data: Record<string, number> | null
   type: 'line' | 'bar'
-  summary: number | null
+  size?: 'sm'
+  summary?: number | null
 }>()
 
 const { t } = useI18n()
+const { formatDate } = useFormatDate()
 
 const months = computed(() => props.data ? Object.keys(props.data) : [])
 const values = computed(() => props.data ? Object.values(props.data) : [])
@@ -97,4 +173,10 @@ const lastMonthIndex = computed(() => lastMonth.value ? months.value.indexOf(las
 const lastValue = computed(() => lastMonthIndex.value !== null ? values.value[lastMonthIndex.value] : null)
 
 const changesThisYear = computed(() => Math.max(...values.value) > 0)
+const summary = computed(() => {
+  if (props.summary !== undefined) return props.summary
+  if (!props.data) return null
+
+  return Object.values(props.data).reduce((a, b) => a + b, 0)
+})
 </script>

package/src/config.ts

@@ -8,15 +8,19 @@ export type PluginConfig = {
   devApiKey?: string | null
   staticUrl: string
   datasetQualityGuideUrl?: string
-  schemaValidataUrl: string
-  schemaDocumentationUrl: string
+  schemaValidataUrl?: string
+  schemaDocumentationUrl?: string
   tabularApiUrl?: string
   tabularApiPageSize?: number
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string
+  pmtilesViewerBaseUrl?: string | null // Base URL of a pmtiles viewer (ex: https://pmtiles.io/#url=)
   customUseFetch?: UseFetchFunction | null
   textClamp?: string | Component | null
   appLink?: Component | null
+  maxJsonPreviewSize?: number // Maximum size of JSON to preview in characters
+  maxPdfPreviewSize?: number // Maximum size of PDF to preview in bytes
+  maxXmlPreviewSize?: number // Maximum size of XML to preview in characters
   i18n?: {
     global: {
       mergeLocaleMessage: (locale: string, messages: unknown) => void

package/src/functions/api.ts

@@ -10,7 +10,7 @@ export async function useFetch<DataT, ErrorT = never>(
 ): Promise<AsyncData<DataT, ErrorT>> {
   const config = useComponentsConfig()
 
-  const { t, locale } = useI18n()
+  const { locale } = useI18n()
 
   if (config.customUseFetch) {
     return await config.customUseFetch(url, options)
@@ -20,7 +20,7 @@ export async function useFetch<DataT, ErrorT = never>(
   const error: Ref<ErrorT | null> = ref(null)
   const status = ref<AsyncDataRequestStatus>('idle')
 
-  const execute = async (opts?: AsyncDataExecuteOptions) => {
+  const execute = async (_opts?: AsyncDataExecuteOptions) => {
     const urlValue = toValue(url)
     if (!urlValue) return
     status.value = 'pending'
@@ -42,26 +42,26 @@ export async function useFetch<DataT, ErrorT = never>(
             options.params['lang'] = locale.value
           }
         },
-        async onResponseError({ response }) {
+        async onResponseError() {
           // TODO redirect to login outside Nuxt?
           // if (response.status === 401) {
           //   await nuxtApp.runWithContext(() => navigateTo(localePath('/login')))
           // }
 
-          let message
-          try {
-            if ('error' in response._data) {
-              message = response._data.error
-            }
-            else if ('message' in response._data) {
-              message = response._data.message
-            }
-          }
-          catch (e) {
-            console.error(e)
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            message = t('The API returned an unexpected error')
-          }
+          // let message
+          // try {
+          //   if ('error' in response._data) {
+          //     message = response._data.error
+          //   }
+          //   else if ('message' in response._data) {
+          //     message = response._data.message
+          //   }
+          // }
+          // catch (e) {
+          //   console.error(e)
+          //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          //   message = t(`L'API a retourné une erreur inattendue`)
+          // }
 
           // TODO Toast outside Nuxt
           // toast.error(message)
@@ -82,7 +82,7 @@ export async function useFetch<DataT, ErrorT = never>(
 
   return {
     data,
-    refresh: async (opts?: AsyncDataExecuteOptions) => {
+    refresh: async (_opts?: AsyncDataExecuteOptions) => {
       execute()
     },
     execute,