@datagouv/components-next 0.1.1 → 0.1.3

package/dist/{vue3-xml-viewer.common-9hga4rGF.js → vue3-xml-viewer.common-Cqxs_s2H.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-CN6IuSUA.js";
+import { g as Ke } from "./main-CarU0Io9.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",

package/src/components/ActivityList/ActivityList.vue

@@ -94,10 +94,10 @@
         v-else
         class="flex flex-col items-center"
       >
-        <nuxt-img
-          src="/illustrations/list.svg"
+        <img
+          :src="listSrc"
           class="h-32"
-        />
+        >
         <p class="fr-text--bold fr-my-3v">
           {{ t(`Il n'y a pas encore d'activité`) }}
         </p>
@@ -117,8 +117,10 @@ import { getLink } from '../../functions/pagination'
 import type { PaginatedArray } from '../../types/api'
 import type { Activity } from '../../types/activity'
 import Avatar from '../Avatar.vue'
+import LoadingBlock from '../LoadingBlock.vue'
 import Pagination from '../Pagination.vue'
 import PaddedContainer from '../PaddedContainer.vue'
+import listSrc from '../../../../public/illustrations/list.svg?url'
 
 const props = defineProps<{
   id?: string

package/src/components/DatasetCard.vue

@@ -165,7 +165,6 @@ import type { Dataset, DatasetV2 } from '../types/datasets'
 import { summarize } from '../functions/helpers'
 import { useFormatDate } from '../functions/dates'
 import { getOwnerName } from '../functions/owned'
-import { removeMarkdown } from '../functions/markdown'
 import { getShortDescription } from '../functions/datasets'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/LoadingBlock.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="relative">
+    <div :class="{ 'opacity-50 min-h-64': loading }">
+      <slot />
+    </div>
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex justify-center items-center min-h-64"
+    >
+      <AnimatedLoader class="size-24" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import AnimatedLoader from './AnimatedLoader.vue'
+
+const props = defineProps<{
+  status: string
+}>()
+
+const loading = computed(() => {
+  return props.status === 'idle' || props.status === 'pending'
+})
+</script>

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

@@ -61,13 +61,15 @@ import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
 import { throwOnNever } from '../../functions/never'
 import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
 import BrandedButton from '../BrandedButton.vue'
 import styleVector from '../../../assets/json/vector.json'
 import SimpleBanner from '../SimpleBanner.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
+import { getOwnerName, getOwnerPage } from '../../functions/owned'
 
-const props = defineProps<{ resource: Resource }>()
+const props = defineProps<{ resource: Resource, dataset: Dataset | DatasetV2 }>()
 
 const { t } = useTranslation()
 const { formatDate } = useFormatDate()
@@ -84,6 +86,12 @@ const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:par
 
 const container = useTemplateRef('containerRef')
 
+const attributions = computed(() => {
+  if (!props.dataset.organization && !props.dataset.owner)
+    return ''
+  return `© <a href="${getOwnerPage(props.dataset)}" target="_blank">${getOwnerName(props.dataset)}</a>`
+})
+
 async function displayMap() {
   await import('maplibre-gl/dist/maplibre-gl.css')
 
@@ -103,6 +111,15 @@ async function displayMap() {
       center: [h.centerLon, h.centerLat],
     })
     map.addControl(new maplibregl.NavigationControl())
+    map.addControl(
+      new maplibregl.GeolocateControl({
+        positionOptions: {
+          enableHighAccuracy: true,
+        },
+        trackUserLocation: true,
+        showAccuracyCircle: false,
+      }),
+    )
 
     const popup = new maplibregl.Popup({
       closeButton: false,
@@ -127,7 +144,7 @@ async function displayMap() {
         map.addSource('pmtiles_source', {
           type: 'vector',
           url: `pmtiles://${pmtilesUrl.value}`,
-          attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
+          attribution: attributions.value,
         })
         // @ts-expect-error not typed from library
         metadata.tilestats.layers.forEach((layer) => {

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -186,6 +186,7 @@
               <Pmtiles
                 v-if="hasPmtiles"
                 :resource="resource"
+                :dataset="dataset"
               />
               <MapContainer
                 v-if="ogcWms"

package/src/functions/api.ts

@@ -1,4 +1,4 @@
-import { ref, toValue, watchEffect, type ComputedRef, type Ref } from 'vue'
+import { reactive, ref, toValue, watchEffect, type ComputedRef, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
@@ -23,6 +23,7 @@ export async function useFetch<DataT, ErrorT = never>(
   const execute = async (_opts?: AsyncDataExecuteOptions) => {
     const urlValue = toValue(url)
     if (!urlValue) return
+    const fetchOptions = reactive(options ?? {})
     status.value = 'pending'
     try {
       data.value = await ofetch(urlValue, {
@@ -66,7 +67,7 @@ export async function useFetch<DataT, ErrorT = never>(
           // TODO Toast outside Nuxt
           // toast.error(message)
         },
-        ...options,
+        ...fetchOptions,
       })
       status.value = 'success'
     }

package/src/functions/owned.ts

@@ -9,3 +9,13 @@ export function getOwnerName(owned: Owned): string {
   }
   return '' // Not supposed to exist but it does...
 }
+
+export function getOwnerPage(owned: Owned): string | null {
+  if (owned.organization) {
+    return owned.organization.page
+  }
+  else if (owned.owner) {
+    return owned.owner.page
+  }
+  return null // Not supposed to exist but it does...
+}

package/src/main.ts

@@ -38,6 +38,7 @@ 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 LoadingBlock from './components/LoadingBlock.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
@@ -170,6 +171,7 @@ export {
   DateRangeDetails,
   ExtraAccordion,
   LabelTag,
+  LoadingBlock,
   OrganizationCard,
   OrganizationNameWithCertificate,
   OwnerType,

package/dist/Swagger.client-D1TfRQjI.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./main-CN6IuSUA.js";
-export {
-  f as default
-};