@datagouv/components-next 1.3.0 → 1.4.0

package/src/components/ResourceExplorer/ResourceMainAction.vue

@@ -0,0 +1,240 @@
+<template>
+  <!-- A resource that is only a link is visited, not downloaded. -->
+  <BrandedButton
+    v-if="isResourceUrl"
+    :href="resource.latest"
+    :title="t('Lien du fichier - ouvre une nouvelle fenêtre')"
+    rel="ugc nofollow noopener"
+    new-tab
+    size="xs"
+    external
+    @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
+  >
+    {{ t('Visiter') }}
+  </BrandedButton>
+
+  <!-- An OGC endpoint with nothing to export: its URL is the only useful thing to
+       hand over, to paste into a GIS. -->
+  <BrandedButton
+    v-else-if="!groups.length"
+    :icon="RiFileCopyLine"
+    color="primary"
+    size="xs"
+    @click="copyServiceUrl"
+  >
+    {{ t('Copier le lien') }}
+  </BrandedButton>
+
+  <!-- A single downloadable format needs no menu: a plain download button links
+       straight to it, matching the previous behaviour. -->
+  <BrandedButton
+    v-else-if="singleDownload"
+    :href="singleDownload.url"
+    :icon="RiDownloadLine"
+    rel="ugc nofollow noopener"
+    download
+    external
+    class="matomo_download"
+    size="xs"
+    color="primary"
+    @click="trackDownload(singleDownload.format)"
+  >
+    {{ t('Télécharger') }}
+  </BrandedButton>
+
+  <Popover
+    v-else
+    ref="anchor"
+    class="relative"
+  >
+    <PopoverButton
+      :as="BrandedButton"
+      :icon="RiDownloadLine"
+      size="xs"
+      color="primary"
+      aria-haspopup="menu"
+    >
+      {{ t('Télécharger') }}
+    </PopoverButton>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <PopoverPanel
+          v-slot="{ close }"
+          ref="panel"
+          class="absolute z-[800] w-72 overflow-hidden rounded border border-gray-default bg-white shadow-lg"
+          :style="floatingStyles"
+        >
+          <div
+            v-for="group in groups"
+            :key="group.title"
+          >
+            <div class="border-b border-gray-default bg-gray-some px-2 py-1.5 text-[12px] font-bold uppercase leading-tight text-gray-title">
+              {{ group.title }}
+            </div>
+            <div
+              v-for="item in group.items"
+              :key="item.url"
+              class="group/dl flex items-center border-b border-gray-default last:border-b-0 hover:bg-gray-some"
+            >
+              <a
+                :href="item.url"
+                class="matomo_download flex min-w-0 flex-1 items-center gap-2 py-2 pl-2 pr-1 text-[14px] leading-tight text-gray-title !bg-none !no-underline"
+                rel="ugc nofollow noopener"
+                download
+                @click="trackDownload(item.format); close()"
+              >
+                <span class="min-w-0 flex-1 truncate">{{ t('Format {format}', { format: item.format }) }}</span>
+                <span
+                  v-if="item.size"
+                  class="shrink-0 rounded bg-gray-lower px-1 text-[13px] tabular-nums text-gray-medium"
+                >{{ filesize(item.size) }}</span>
+              </a>
+              <CopyButton
+                :label="t('Copier le lien')"
+                :copied-label="t('Lien copié !')"
+                :text="item.url"
+                icon-only
+                class="mr-1.5 shrink-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/dl:opacity-100"
+              />
+            </div>
+          </div>
+
+          <!-- The exports above are files; the service itself is consumed live by a GIS,
+               so its URL stays reachable next to them. -->
+          <div v-if="ogcService">
+            <div class="border-y border-gray-default bg-gray-some px-2 py-1.5 text-[12px] font-bold uppercase leading-tight text-gray-title">
+              {{ t('Service') }}
+            </div>
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 px-2 py-2 text-left text-[14px] leading-tight text-gray-title hover:bg-gray-some"
+              @click="copyServiceUrl(); close()"
+            >
+              <RiFileCopyLine
+                class="size-4 shrink-0 text-gray-medium"
+                aria-hidden="true"
+              />
+              {{ t('Copier le lien du service') }}
+            </button>
+          </div>
+        </PopoverPanel>
+      </Teleport>
+    </ClientOnly>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiDownloadLine, RiFileCopyLine } from '@remixicon/vue'
+import { toast } from 'vue-sonner'
+import BrandedButton from '../BrandedButton.vue'
+import CopyButton from '../CopyButton.vue'
+import ClientOnly from '../ClientOnly.vue'
+import { filesize } from '../../functions/helpers'
+import { getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+type DownloadItem = { url: string, format: string, size?: number }
+type DownloadGroup = { title: string, items: DownloadItem[] }
+
+// The one action a resource offers, whatever its kind: the two explorer headers mount
+// this so the triage lives in a single place instead of drifting between them.
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+
+const {
+  generatedFormats,
+  wfsFormats,
+  defaultWfsProjection,
+  isResourceUrl,
+  ogcService,
+} = useResourceCapabilities(() => props.resource, () => props.dataset)
+
+const groups = computed<DownloadGroup[]>(() => {
+  const result: DownloadGroup[] = []
+
+  // An OGC endpoint is not a file: `latest` points at its GetCapabilities, which is
+  // nothing a visitor wants to download. Only its exports below are.
+  if (!ogcService.value) {
+    result.push({
+      title: t('Format original'),
+      items: [{
+        url: props.resource.latest,
+        format: props.resource.format,
+        size: getResourceFilesize(props.resource) ?? undefined,
+      }],
+    })
+  }
+
+  if (generatedFormats.value.length) {
+    result.push({
+      title: t('Formats générés automatiquement'),
+      items: generatedFormats.value.map(format => ({
+        url: format.url,
+        format: format.format,
+        size: format.size,
+      })),
+    })
+  }
+
+  if (wfsFormats.value.length) {
+    const projection = defaultWfsProjection.value
+    result.push({
+      title: projection
+        ? t('Formats exportés depuis le service WFS (projection {crs})', { crs: projection })
+        : t('Formats exportés depuis le service WFS'),
+      items: wfsFormats.value.map(format => ({
+        url: format.url,
+        format: format.format,
+      })),
+    })
+  }
+
+  return result
+})
+
+// A single downloadable format needs no menu: expose it directly for the plain button.
+// Never for an OGC service, whose menu also carries the link to the service itself.
+const singleDownload = computed<DownloadItem | null>(() => {
+  if (ogcService.value) return null
+  if (groups.value.length !== 1) return null
+  const items = groups.value[0]!.items
+  return items.length === 1 ? items[0]! : null
+})
+
+const trackDownload = (format: string) => {
+  trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${format}`)
+}
+
+const copyServiceUrl = async () => {
+  try {
+    await navigator.clipboard.writeText(props.resource.url)
+    toast.success(t('Lien copié !'))
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
+}
+
+// The panel is teleported, so it is positioned against its trigger with floating-ui.
+const anchor = useTemplateRef<InstanceType<typeof Popover>>('anchor')
+const panel = useTemplateRef<InstanceType<typeof PopoverPanel>>('panel')
+const anchorEl = computed(() => anchor.value?.$el as HTMLElement | undefined)
+const panelEl = computed(() => panel.value?.$el as HTMLElement | undefined)
+const { floatingStyles } = useFloating(anchorEl, panelEl, {
+  placement: 'bottom-end',
+  middleware: [flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+})
+</script>

package/src/components/ResourceExplorer/ResourceSelector.vue

@@ -3,111 +3,49 @@
     v-slot="{ open, close }"
     class="relative inline-block"
   >
-    <slot
-      name="trigger"
-      :open="open"
+    <PopoverButton
+      class="inline-flex items-center justify-center size-6 rounded text-gray-plain hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+      :aria-label="t('Choisir une autre ressource')"
     >
-      <PopoverButton
-        class="inline-flex items-center justify-center size-6 rounded text-gray-plain hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
-        :aria-label="t('Choisir une autre ressource')"
-      >
-        <RiArrowDownSLine
-          class="size-4"
-          :class="{ 'rotate-180': open }"
-          aria-hidden="true"
-        />
-      </PopoverButton>
-    </slot>
-    <PopoverPanel
-      :class="searchable
-        ? 'absolute left-0 top-full z-50 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-white border border-gray-default rounded shadow-lg p-3 space-y-2'
-        : 'absolute left-0 top-full z-50 mt-1 w-80 max-h-96 overflow-auto bg-white border border-gray-default rounded shadow-lg p-1'"
-    >
-      <input
-        v-if="searchable"
-        v-model="searchQuery"
-        type="search"
-        class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
-        :placeholder="t('Rechercher dans les ressources…')"
-      >
-      <ul
-        v-if="filteredResources.length > 0"
-        class="list-none p-0 m-0 space-y-0.5 max-h-80 overflow-y-auto"
-      >
+      <RiArrowDownSLine
+        class="size-4"
+        :class="{ 'rotate-180': open }"
+        aria-hidden="true"
+      />
+    </PopoverButton>
+    <PopoverPanel class="absolute left-0 top-full z-50 mt-1 w-80 max-h-96 overflow-auto bg-white border border-gray-default rounded shadow-lg p-1">
+      <ul class="list-none p-0 m-0 space-y-0.5 max-h-80 overflow-y-auto">
         <li
-          v-for="r in filteredResources"
+          v-for="r in resources"
           :key="r.id"
         >
-          <button
-            v-if="!isDisabled?.(r)"
-            type="button"
-            class="flex items-center gap-1.5 w-full text-left px-2 py-1.5 rounded text-sm hover:bg-gray-100 focus:outline-none focus-visible:bg-gray-100"
-            :class="{ 'font-bold bg-blue-50 text-new-primary': r.id === selectedId }"
-            @click="emit('select', r); close()"
-          >
-            <ResourceIcon
-              :resource="r"
-              class="size-3.5 shrink-0"
-            />
-            <span class="truncate">{{ r.title || t('Fichier sans nom') }}</span>
-            <span
-              v-if="r.format"
-              class="ml-auto text-xs text-gray-medium uppercase shrink-0"
-            >
-              {{ r.format }}
-            </span>
-          </button>
-          <div
-            v-else
-            class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-medium cursor-not-allowed"
-            :title="disabledTitle"
-          >
-            <ResourceIcon
-              :resource="r"
-              class="size-3.5 shrink-0 opacity-50"
-            />
-            <span class="truncate opacity-70">{{ r.title || t('Fichier sans nom') }}</span>
-          </div>
+          <ResourceListItem
+            :resource="r"
+            :to="resourceTo(r)"
+            :replace
+            :selected="r.id === selectedId"
+            @click="close()"
+          />
         </li>
       </ul>
-      <p
-        v-else
-        class="text-sm text-gray-medium italic mb-0 px-2 py-2"
-      >
-        {{ t('Aucune ressource correspondante') }}
-      </p>
     </PopoverPanel>
   </Popover>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { RiArrowDownSLine } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
-import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import ResourceListItem from '../ResourceListItem.vue'
 import type { Resource } from '../../types/resources'
 
-const props = defineProps<{
+defineProps<{
   resources: Resource[]
   selectedId: string
-  searchable?: boolean
-  isDisabled?: (resource: Resource) => boolean
-  disabledTitle?: string
-}>()
-
-const emit = defineEmits<{
-  select: [resource: Resource]
+  resourceTo: (resource: Resource) => RouteLocationRaw
+  replace?: boolean
 }>()
 
 const { t } = useTranslation()
-
-const searchQuery = ref('')
-
-const filteredResources = computed(() => {
-  if (!props.searchable) return props.resources
-  const q = searchQuery.value.trim().toLowerCase()
-  if (!q) return props.resources
-  return props.resources.filter(r => (r.title ?? '').toLowerCase().includes(q))
-})
 </script>

package/src/components/ResourceExplorer/ResourceViewerHeader.vue

@@ -0,0 +1,124 @@
+<template>
+  <header class="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-gray-default bg-gray-some px-3">
+    <div class="flex min-w-0 items-center gap-1.5 overflow-hidden text-[13px] text-gray-medium">
+      <ResourceIcon
+        :resource
+        class="size-4 shrink-0"
+      />
+      <span
+        class="min-w-0 truncate font-medium text-gray-title"
+        :title="resource.title || t('Fichier sans nom')"
+      >{{ resource.title || t('Fichier sans nom') }}</span>
+      <ResourceSelector
+        v-if="resources && resources.length > 1 && resourceTo"
+        :resources
+        :selected-id="resource.id"
+        :resource-to
+        :replace
+        class="shrink-0 md:hidden"
+      />
+      <!-- Metadata gives way long before the title does (hence the shrink factor), so
+           the resource name stays readable — and the title truncates rather than being
+           clipped by the row, which would push the copy button out of view.
+           Inline flow (not flex) so text-overflow renders the ellipsis; spacing is
+           carried by the separators' margins. -->
+      <div class="min-w-0 truncate [flex-shrink:9999]">
+        <span class="mr-1.5">·</span>
+        <TranslationT keypath="mis à jour {date}">
+          <template #date>
+            <FormattedDate
+              :date="resource.last_modified"
+              format="relative"
+            />
+          </template>
+        </TranslationT>
+        <template v-if="resourceFilesize">
+          <span class="mx-1.5">·</span>
+          <span>{{ filesize(resourceFilesize) }}</span>
+        </template>
+        <template v-if="resource.format">
+          <span class="mx-1.5">·</span>
+          <span class="rounded bg-gray-lower px-1.5 py-0.5 text-[12px] uppercase leading-4 text-gray-medium">{{ resource.format }}</span>
+        </template>
+        <template v-if="resource.schema?.name || resource.schema?.url">
+          <span class="mx-1.5">·</span>
+          <SchemaBadge :resource />
+        </template>
+        <span class="mx-1.5">·</span>
+        <span class="inline-flex items-center gap-0.5 align-middle">
+          <RiDownloadLine class="size-3" />
+          {{ summarize(resource.metrics.views) }}
+        </span>
+      </div>
+      <CopyButton
+        :label="t('Copier le lien')"
+        :copied-label="t('Lien copié !')"
+        :text="externalUrl"
+        icon-only
+        class="hidden shrink-0 md:inline-flex"
+      />
+    </div>
+    <div
+      v-if="!fullscreen"
+      class="flex shrink-0 items-center gap-2"
+    >
+      <ResourceMainAction
+        :resource="resource"
+        :dataset="dataset"
+      />
+      <BrandedButton
+        v-if="exploreTo"
+        :href="exploreTo(resource)"
+        :icon="RiFullscreenLine"
+        icon-only
+        color="secondary"
+        size="xs"
+        :title="t('Explorer les données')"
+        @click="trackEvent('Jeux de données', 'Explorer les données', 'Bouton : explorer les données')"
+      >
+        {{ t('Explorer les données') }}
+      </BrandedButton>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiDownloadLine, RiFullscreenLine } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import CopyButton from '../CopyButton.vue'
+import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
+import ResourceSelector from './ResourceSelector.vue'
+import ResourceMainAction from './ResourceMainAction.vue'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
+import { filesize, summarize } from '../../functions/helpers'
+import { getResourceFilesize, resolveResourceExternalUrl } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useTranslation } from '../../composables/useTranslation'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+// Shared by the viewer and its loading skeleton: everything here comes from the
+// resource itself, so the skeleton renders the real header instead of pulsing
+// placeholders over data it already holds.
+const props = defineProps<{
+  dataset: Dataset | DatasetV2
+  resource: Resource
+  resources?: Resource[]
+  resourceTo?: (resource: Resource) => RouteLocationRaw
+  exploreTo?: (resource: Resource) => string
+  // Overrides the "Copier le lien" target.
+  resourceExternalUrl?: (resource: Resource) => string
+  replace?: boolean
+  // Fullscreen mode hides the inline actions — they live in the dataset context bar above.
+  fullscreen?: boolean
+}>()
+
+const { t } = useTranslation()
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+const externalUrl = computed(() => resolveResourceExternalUrl(props.dataset, props.resource, props.resourceExternalUrl))
+</script>

package/src/components/ResourceExplorer/ResourceViewerSkeleton.vue

@@ -0,0 +1,96 @@
+<template>
+  <div :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
+    <!-- Header and tabs are the real ones: everything they show comes from the
+         resource we already hold, so there is nothing to wait for. Only the preview
+         body below is a placeholder. -->
+    <ResourceViewerHeader
+      :dataset
+      :resource
+      :resources
+      :resource-to
+      :explore-to="exploreTo"
+      :resource-external-url="resourceExternalUrl"
+      :replace
+      :fullscreen
+    />
+
+    <!-- Inert copy of the viewer's tab row: same components, so the pills keep their
+         exact size and labels, but nothing to select until the viewer resolves. -->
+    <TabGroup
+      size="sm"
+      aria-hidden="true"
+      class="pointer-events-none"
+    >
+      <div class="flex shrink-0 items-center border-b border-gray-default p-2">
+        <TabList class="max-w-full overflow-x-auto">
+          <Tab
+            v-for="tab in tabsOptions"
+            :key="tab.key"
+          >
+            {{ tab.label }}
+          </Tab>
+        </TabList>
+      </div>
+    </TabGroup>
+
+    <!-- Tabular preview: the same toolbar + table skeleton the data tab shows while
+         TabularExplorer loads. Other previews fall back below. -->
+    <TabularSkeleton
+      v-if="previewKind === 'tabular'"
+      :fill="fullscreen"
+    />
+
+    <!-- PDF preview: the same A4 skeleton the PdfPreview shows while pdfjs loads. -->
+    <PdfSkeleton
+      v-else-if="previewKind === 'pdf'"
+      :fill="fullscreen"
+    />
+
+    <!-- Other non-tabular previews (JSON, map…) — a simple placeholder for now. -->
+    <div
+      v-else
+      class="animate-pulse-placeholder p-4"
+      :class="fullscreen ? 'min-h-0 flex-1' : ''"
+      role="status"
+      :aria-label="t('Chargement de l\'aperçu…')"
+    >
+      <div
+        class="w-full rounded bg-gray-200"
+        :class="fullscreen ? 'h-full' : 'h-96'"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PdfSkeleton from '../ResourceAccordion/PdfSkeleton.vue'
+import TabularSkeleton from '../TabularExplorer/TabularSkeleton.vue'
+import TabGroup from '../Tabs/TabGroup.vue'
+import TabList from '../Tabs/TabList.vue'
+import Tab from '../Tabs/Tab.vue'
+import ResourceViewerHeader from './ResourceViewerHeader.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+  resources?: Resource[]
+  resourceTo?: (resource: Resource) => RouteLocationRaw
+  exploreTo?: (resource: Resource) => string
+  resourceExternalUrl?: (resource: Resource) => string
+  replace?: boolean
+  fullscreen?: boolean
+}>()
+
+const { t } = useTranslation()
+// `previewKind` is the viewer's own decision, so the skeleton always picks the
+// shape the resolved viewer will show.
+const { previewKind, tabsOptions } = useResourceCapabilities(
+  () => props.resource,
+  () => props.dataset,
+)
+</script>