@datagouv/components-next 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",
@@ -18,7 +18,7 @@
     "lint": "eslint . --fix",
     "format": "prettier --write src/",
     "css": "tailwindcss -i ./assets/main.css -o ./dist/components.css --minify --optimize",
-    "preversion": "npm run build-only && npm run css",
+    "preversion": "npm run build && npm run css",
     "publish-stable": "npm publish --access public"
   },
   "dependencies": {
@@ -28,7 +28,7 @@
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
-    "maplibre-gl": "^5.5.0",
+    "maplibre-gl": "^5.6.2",
     "ofetch": "^1.4.1",
     "ol": "^10.6.1",
     "pdf-vue3": "^1.0.12",

package/src/components/AppLink.vue

@@ -8,7 +8,7 @@
   </component>
   <a
     v-else-if="isExternal"
-    :href="to"
+    :href="(to as string)"
   >
     <slot />
   </a>

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

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang = "ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RiErrorWarningLine } from '@remixicon/vue'
 
@@ -32,6 +32,7 @@ import {
   GeoportalZoom,
   LayerImport,
   LayerSwitcher,
+  // @ts-expect-error no types provided
 } from 'geopf-extensions-openlayers'
 
 import SimpleBanner from '../SimpleBanner.vue'
@@ -42,7 +43,7 @@ const props = defineProps<{ resource: Resource }>()
 const { t } = useI18n()
 
 let map = null
-const mapRef = ref(0)
+const mapRef = useTemplateRef('mapRef')
 const hasError = ref(false)
 
 async function displayMap() {
@@ -53,6 +54,7 @@ async function displayMap() {
 
   CRS.load()
   map = new Map({
+    // @ts-expect-error null is not happening during onMount
     target: mapRef.value,
     layers: [
       new TileLayer({
@@ -117,6 +119,7 @@ async function displayMap() {
         hasError.value = true
     }
     else {
+      // @ts-expect-error no typing from library
       const layerInfo = layerImport._getCapResponseWMSLayers.filter(layer => layer.Name == props.resource.title)[0]
       layerImport._addGetCapWMSLayer(layerInfo)
     }

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

@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
 import { Protocol, PMTiles } from 'pmtiles'
@@ -60,6 +60,7 @@ import maplibregl from 'maplibre-gl'
 import DOMPurify from 'dompurify'
 import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
+import { throwOnNever } from '../../functions/never'
 import type { Resource } from '../../types/resources'
 import BrandedButton from '../BrandedButton.vue'
 import styleVector from '../../../assets/json/vector.json'
@@ -74,12 +75,12 @@ const { formatDate } = useFormatDate()
 const config = useComponentsConfig()
 
 const hasError = ref(false)
-const pmtilesUrl = computed(() => props.resource.extras['analysis:parsing:pmtiles_url'])
+const pmtilesUrl = computed(() => props.resource.extras['analysis:parsing:pmtiles_url'] as string)
 const pmtilesViewerUrl = computed(() => {
   return config.pmtilesViewerBaseUrl ? `${config.pmtilesViewerBaseUrl}${encodeURIComponent(pmtilesUrl.value)}` : null
 })
 
-const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at']))
+const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
 
 const container = useTemplateRef('containerRef')
 
@@ -94,7 +95,9 @@ async function displayMap() {
 
   p.getHeader().then((h) => {
     const map = new maplibregl.Map({
+      // @ts-expect-error only null before mount
       container: container.value, // container id
+      // @ts-expect-error TODO: type JSON
       style: styleVector,
       zoom: h.maxZoom - 2,
       center: [h.centerLon, h.centerLat],
@@ -106,6 +109,7 @@ async function displayMap() {
       closeOnClick: false,
     })
 
+    // @ts-expect-error TODO: add type from library
     function showMapPopup(e) {
       if (!e.features || !e.features[0])
         popup.remove()
@@ -125,7 +129,7 @@ async function displayMap() {
           url: `pmtiles://${pmtilesUrl.value}`,
           attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
         })
-
+        // @ts-expect-error not typed from library
         metadata.tilestats.layers.forEach((layer) => {
           const typeLayer = computed(() => {
             switch (layer.geometry) {
@@ -136,6 +140,7 @@ async function displayMap() {
               case 'LineString':
                 return `line`
               default:
+                // @ts-expect-error no other geometries ?
                 throwOnNever(layer.geometry, 'Unsupported geometry')
                 return ''
             }
@@ -144,6 +149,7 @@ async function displayMap() {
             'id': layer.layer,
             'source': 'pmtiles_source',
             'source-layer': layer.layer,
+            // @ts-expect-error `''` (empty string) shouldn't happen (see `throwOnNever`)
             'type': typeLayer.value,
             'paint': {
               [`${typeLayer.value}-color`]: 'steelblue',
@@ -151,6 +157,7 @@ async function displayMap() {
             },
           })
           map.on('mousemove', layer.layer, showMapPopup)
+          // @ts-expect-error doesn't exist ?
           map.on('touchmove', layer.layer, showMapPopup)
           map.on('click', layer.layer, showMapPopup)
           map.on('mouseleave', layer.layer, showMapPopup)

package/src/components/ResourceAccordion/Preview.vue

@@ -199,7 +199,7 @@ function sortByField(col: string) {
   getTableInfos(currentPage.value, sortConfig.value)
 };
 
-const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at']))
+const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
 
 onMounted(() => {
   getTableInfos(currentPage.value)

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -492,7 +492,7 @@ const communityResource = computed<CommunityResource | null>(() => {
 const owner = computed(() => communityResource.value ? getOwnerName(communityResource.value) : null)
 
 const lastUpdate = props.resource.last_modified
-const conversionsLastUpdate = computed(() => formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at']))
+const conversionsLastUpdate = computed(() => formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
 const availabilityChecked = props.resource.extras && 'check:available' in props.resource.extras
 
 const unavailable = availabilityChecked && props.resource.extras['check:available'] === false

package/src/components/ResourceAccordion/SchemaBadge.vue

@@ -121,7 +121,7 @@ const title = computed(() => {
   return props.resource.schema.name || props.resource.schema.url
 })
 
-const validataErrors = computed<Array<ValidataError>>(() => props.resource.extras['validation-report:errors'] || [])
+const validataErrors = computed<Array<ValidataError>>(() => props.resource.extras['validation-report:errors'] as Array<ValidataError> || [])
 const validataWarnings = computed(() => validataErrors.value.filter(error => [''].includes(error.code)))
 const validataBodyErrors = computed(() => validataErrors.value.filter(error => ['#body', '#cell', '#content', '#row', '#table'].some(tag => error.tags.includes(tag))))
 const validataStructureErrors = computed(() => validataErrors.value.filter(error => ['#head', '#structure', '#header'].some(tag => error.tags.includes(tag))))

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

@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue'
+// @ts-expect-error no types for `swagger-ui-dist`
 import * as SwaggerUiDist from 'swagger-ui-dist'
 import 'swagger-ui-dist/swagger-ui.css'
 import '../../../assets/swagger-themes/newspaper.css'

package/src/components/SmallChart.vue

@@ -21,7 +21,8 @@
 </template>
 
 <script setup lang="ts">
-import { Chart, type ChartOptions } from 'chart.js/auto'
+import type { ChartOptions, ScriptableLineSegmentContext } from 'chart.js'
+import Chart from 'chart.js/auto'
 import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
 
 const LIGHT_COLOR = '#B6CFFB'
@@ -43,7 +44,7 @@ const props = withDefaults(defineProps<{
   width: 120,
 })
 
-const last = (ctx, value) => {
+const last = (ctx: ScriptableLineSegmentContext, value: unknown) => {
   return ctx.p1DataIndex === months.value.length - 1 ? value : null
 }
 
@@ -63,27 +64,45 @@ const data = computed(() => {
 const months = computed(() => Object.keys(data.value))
 const values = computed(() => Object.values(data.value))
 
-const additionalDatasetConfig = computed(() => {
-  if (props.type === 'bar') {
-    return {
-      barPercentage: 1,
-      categoryPercentage: 0.9,
-      // Change the color of the last bar only
-      backgroundColor: months.value.map((_value, index) => index === months.value.length - 1 ? (props.lastWithLowEmphasis ? LIGHT_COLOR_WITH_OPACITY : COLOR) : LIGHT_COLOR),
-    }
+const additionalDatasetConfig = computed<{
+  type: 'bar'
+  barPercentage: number
+  categoryPercentage: number
+  backgroundColor: Array<string>
+} | {
+  type: 'line'
+  segment?: {
+    borderColor: (ctx: ScriptableLineSegmentContext) => string
+    borderDash: (ctx: ScriptableLineSegmentContext) => Array<number>
   }
-
-  if (props.type === 'line' && props.lastWithLowEmphasis) {
-    return {
-      segment: {
-        borderColor: ctx => last(ctx, COLOR_WITH_OPACITY) || COLOR,
-        borderDash: ctx => last(ctx, [3, 3]) || [6, 0],
-      },
-    }
-  }
-
-  return {}
-})
+} | object>(() => {
+        if (props.type === 'bar') {
+          return {
+            type: 'bar',
+            barPercentage: 1,
+            categoryPercentage: 0.9,
+            // Change the color of the last bar only
+            backgroundColor: months.value.map((_value, index) => index === months.value.length - 1 ? (props.lastWithLowEmphasis ? LIGHT_COLOR_WITH_OPACITY : COLOR) : LIGHT_COLOR),
+          }
+        }
+
+        if (props.type === 'line') {
+          if (props.lastWithLowEmphasis) {
+            return {
+              type: 'line',
+              segment: {
+                borderColor: (ctx: ScriptableLineSegmentContext) => last(ctx, COLOR_WITH_OPACITY) || COLOR,
+                borderDash: (ctx: ScriptableLineSegmentContext) => last(ctx, [3, 3]) || [6, 0],
+              },
+            }
+          }
+          return {
+            type: 'line',
+          }
+        }
+
+        return {}
+      })
 
 const getMonthYear = (dateAsString: string): string => {
   const date = new Date(dateAsString)
@@ -95,6 +114,7 @@ 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 = {
+  // @ts-expect-error animation can be `true` but the typing is not expecting it
   animation: true,
   devicePixelRatio: 1,
   responsive: false,
@@ -155,8 +175,9 @@ watchEffect(() => {
   chart.value = new Chart(context.value, {
     data: {
       labels: months.value,
-      datasets: [{ data: values.value, type: props.type, ...additionalDatasetConfig.value }],
+      datasets: [{ data: values.value, ...additionalDatasetConfig.value }],
     },
+    // @ts-expect-error animation type should allow `true`
     options: OPTIONS,
   })
 })

package/src/functions/api.types.ts

@@ -3,15 +3,15 @@ import type { ComputedRef, Ref, WatchSource } from 'vue'
 export type UseFetchOptions<DataT> = {
   key?: string
   method?: string
-  query?: SearchParams
-  params?: SearchParams
-  body?: RequestInit['body'] | Record<string, any>
+  query?: Record<string, unknown>
+  params?: Record<string, unknown>
+  body?: RequestInit['body'] | Record<string, unknown>
   headers?: Record<string, string> | [key: string, value: string][] | Headers
   baseURL?: string
   server?: boolean
   lazy?: boolean
   immediate?: boolean
-  getCachedData?: (key: string, nuxtApp: any) => DataT
+  getCachedData?: (key: string, nuxtApp: unknown) => DataT
   deep?: boolean
   dedupe?: 'cancel' | 'defer'
   default?: () => DataT

package/src/functions/dates.ts

@@ -5,7 +5,7 @@ const SECONDS_IN_A_DAY = 3600 * 24
 export function useFormatDate() {
   const { t, locale } = useI18n()
 
-  const formatDate = (date: Date | string | null, options: Intl.DateTimeFormatOptions = {}) => {
+  const formatDate = (date: Date | string | null | undefined, options: Intl.DateTimeFormatOptions = {}) => {
     if (!date) {
       return ''
     }
@@ -20,7 +20,7 @@ export function useFormatDate() {
    * Format date as relative from now.
    * It displays "today" or Intl.RelativeTimeFormat content, based on date.
    */
-  const formatFromNow = (date: Date | string | null) => {
+  const formatFromNow = (date: Date | string | null | undefined) => {
     if (!date) {
       return ''
     }
@@ -65,7 +65,7 @@ export function useFormatDate() {
    * Format date relative form now if date is less than a month ago.
    * Otherwise, show a formatted date.
    */
-  const formatRelativeIfRecentDate = (date: Date | string | null, options: Intl.DateTimeFormatOptions = {}) => {
+  const formatRelativeIfRecentDate = (date: Date | string | null | undefined, options: Intl.DateTimeFormatOptions = {}) => {
     if (!date) {
       return ''
     }

package/src/functions/matomo.ts

@@ -1,3 +1,4 @@
 export function trackEvent(values: Array<unknown>): void {
+  // @ts-expect-error Matomo is not typed
   globalThis._paq?.push(['trackEvent', ...values])
 }

package/src/functions/never.ts

@@ -0,0 +1,3 @@
+export function throwOnNever(_: never, message: string): never {
+  throw new Error(message)
+}

package/src/main.ts

@@ -56,6 +56,7 @@ export * from './functions/datasets'
 export * from './functions/owned'
 export * from './functions/helpers'
 export * from './functions/matomo'
+export * from './functions/never'
 export * from './functions/schemas'
 export * from './functions/markdown'