@datagouv/components-next 1.0.2-dev.172 → 1.0.2-dev.174

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,115 @@
+<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>
+        <span :title="formatDate(resource.last_modified)">{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
+        <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="resourceExternalUrl"
+        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 { filesize, summarize } from '../../functions/helpers'
+import { getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useFormatDate } from '../../functions/dates'
+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
+  replace?: boolean
+  // Fullscreen mode hides the inline actions — they live in the dataset context bar above.
+  fullscreen?: boolean
+}>()
+
+const { t } = useTranslation()
+const { formatRelativeIfRecentDate, formatDate } = useFormatDate()
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
+</script>

package/src/components/ResourceExplorer/ResourceViewerSkeleton.vue

@@ -0,0 +1,94 @@
+<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"
+      :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
+  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>

package/src/components/ResourceListItem.vue

@@ -0,0 +1,154 @@
+<template>
+  <AppLink
+    ref="row"
+    v-bind="$attrs"
+    :to
+    :replace
+    :class="selected ? '[&&]:!bg-gray-200' : '[&&]:hover:!bg-gray-100'"
+    class="grid h-7 w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 rounded px-1 py-1 text-left !bg-none !no-underline"
+    @pointerenter="openOnHover"
+    @pointerleave="closeTooltip"
+    @focus="show = true"
+    @blur="closeTooltip"
+  >
+    <span
+      :class="[iconColor, '[&_svg]:fill-current']"
+      class="flex size-5 shrink-0 items-center justify-center rounded-[1px]"
+    >
+      <component
+        :is="iconComponent"
+        class="size-4"
+        aria-hidden="true"
+      />
+    </span>
+    <div class="flex min-w-0 items-baseline gap-0.5 whitespace-nowrap leading-4">
+      <span
+        class="truncate text-[13px]"
+        :class="selected ? 'font-extrabold text-gray-title' : 'font-medium text-gray-medium'"
+      >{{ resource.title || t('Fichier sans nom') }}</span>
+      <template v-if="humanFilesize">
+        <span class="shrink-0 text-[13px] text-gray-medium">·</span>
+        <span class="shrink-0 text-[12px] text-gray-medium">{{ humanFilesize }}</span>
+      </template>
+    </div>
+    <!-- Capped and truncated: an `auto` grid track floors at its content width, so an
+         unusually long format (`www:link-1.0-http--samples`) would otherwise squeeze
+         the title track to nothing and overflow the fixed-height row. -->
+    <span
+      v-if="resource.format"
+      class="max-w-24 truncate rounded bg-gray-lower px-1.5 py-0.5 text-[12px] uppercase leading-4 text-gray-medium"
+      :title="resource.format"
+    >{{ resource.format }}</span>
+  </AppLink>
+
+  <!-- Hover card: the row truncates the title, so surface the full name plus the
+       same metadata line as the viewer header. Placed beside the row (not below) so
+       it doesn't hide the sibling rows we're scanning. -->
+  <Teleport to="body">
+    <div
+      v-if="show"
+      ref="card"
+      role="tooltip"
+      class="pointer-events-none z-[80] w-max rounded border border-gray-default bg-white p-2 text-left shadow-[0_2px_4px_rgba(0,0,0,0.04),2px_4px_16px_rgba(0,0,0,0.12)]"
+      :style="floatingStyles"
+    >
+      <span class="block whitespace-nowrap text-[13px] font-medium leading-5 text-gray-title">{{ resource.title || t('Fichier sans nom') }}</span>
+      <div class="mt-1 flex items-center gap-1 text-[12px] leading-4 text-gray-medium">
+        <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
+        <template v-if="humanFilesize">
+          <span>·</span>
+          <span>{{ humanFilesize }}</span>
+        </template>
+        <template v-if="resource.format">
+          <span>·</span>
+          <span class="rounded bg-gray-lower px-1.5 py-0.5 uppercase leading-4">{{ resource.format }}</span>
+        </template>
+        <span>·</span>
+        <span class="inline-flex items-center gap-0.5">
+          <RiDownloadLine
+            class="size-3"
+            aria-hidden="true"
+          />
+          {{ summarize(resource.metrics.views) }}
+        </span>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { useEventListener } from '@vueuse/core'
+import type { RouteLocationRaw } from 'vue-router'
+import { RiDownloadLine } from '@remixicon/vue'
+import AppLink from './AppLink.vue'
+import File from './Icons/File.vue'
+import { getResourceFormatIcon, getResourceIconColor, getResourceFilesize } from '../functions/resources'
+import { filesize, summarize } from '../functions/helpers'
+import { useFormatDate } from '../functions/dates'
+import { useTranslation } from '../composables/useTranslation'
+import type { Resource } from '../types/resources'
+
+// The hover card below is a second root node, so Vue drops fallthrough attributes
+// unless we place them ourselves: without this, a listener bound by the parent
+// (the selector's `@click="close()"`) would silently never fire.
+defineOptions({ inheritAttrs: false })
+
+// Shared row for a single resource (sidebar + resource selector). Renders as a
+// navigation link so switching resource is a real link — the URL is the source of
+// truth for the selection.
+const props = withDefaults(defineProps<{
+  resource: Resource
+  to: RouteLocationRaw
+  selected?: boolean
+  replace?: boolean
+}>(), {
+  selected: false,
+  replace: false,
+})
+
+const { t } = useTranslation()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+// Render the icon directly (not via ResourceIcon which forces a gray color) so the
+// colored badge can tint it through currentColor + [&_svg]:fill-current.
+const iconComponent = computed(() => (props.resource.format ? getResourceFormatIcon(props.resource.format) : null) ?? File)
+const iconColor = computed(() => getResourceIconColor(props.resource.format))
+
+const humanFilesize = computed(() => {
+  const size = getResourceFilesize(props.resource)
+  return size ? filesize(size) : null
+})
+
+// Hover card teleported to <body> so the sidebar's `overflow` doesn't clip it, hence
+// the fixed strategy. `shift` keeps it inside the viewport for a row near an edge, and
+// `autoUpdate` follows the row when its scrollable container moves under the pointer.
+const show = ref(false)
+const row = useTemplateRef<InstanceType<typeof AppLink>>('row')
+const card = useTemplateRef<HTMLElement>('card')
+const rowEl = computed(() => row.value?.$el as HTMLElement | undefined)
+const { floatingStyles } = useFloating(rowEl, card, {
+  placement: 'right-start',
+  strategy: 'fixed',
+  middleware: [offset(16), flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+})
+
+// A tap fires a pointer enter too, so the card would flash on every touch selection
+// in the mobile resource picker. Only a real pointer opens it — keyboard focus still
+// does, through @focus.
+function openOnHover(event: PointerEvent) {
+  if (event.pointerType === 'mouse') show.value = true
+}
+
+function closeTooltip() {
+  show.value = false
+}
+
+// A hover-shown card gets no `mouseleave` when the window loses focus (alt-tab) or
+// the pointer leaves the document, so it would linger on return — close it in those
+// cases too.
+useEventListener(window, 'blur', closeTooltip)
+useEventListener(document, 'mouseleave', closeTooltip)
+</script>

package/src/components/TabularExplorer/TabularActiveFilters.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="activeFilters.length > 0 || sort"
+    class="flex flex-wrap items-center gap-1.5"
+  >
+    <!-- Sort chip -->
+    <span
+      v-if="sort"
+      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+    >
+      <component
+        :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="font-medium">{{ sort.column }}</span>
+      <span>{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
+      <button
+        :aria-label="t('Supprimer le tri')"
+        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+        @click="sort = null"
+      >
+        <RiCloseLine
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </span>
+
+    <!-- Filter chips -->
+    <span
+      v-for="af in activeFilters"
+      :key="af.column"
+      :data-testid="`active-filter-${af.column}`"
+      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+    >
+      <component
+        :is="getColumnDisplay(af.column).icon"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="font-medium">{{ af.column }}</span>
+      <span>{{ af.label }}</span>
+      <button
+        :aria-label="t('Supprimer ce filtre')"
+        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+        @click="removeFilter(af.column)"
+      >
+        <RiCloseLine
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </span>
+
+    <!-- Clear all -->
+    <BrandedButton
+      v-if="withClear"
+      color="tertiary"
+      size="2xs"
+      :icon="RiCloseLine"
+      @click="clearAllFilters(); sort = null"
+    >
+      {{ t('Tout effacer') }}
+    </BrandedButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiArrowDownLine, RiArrowUpLine, RiCloseLine } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+defineProps<{ withClear?: boolean }>()
+
+const { t } = useTranslation()
+const { activeFilters, sort, removeFilter, clearAllFilters, getColumnDisplay } = useTabularContext()
+</script>

package/src/components/TabularExplorer/TabularCell.vue

@@ -17,8 +17,7 @@
   </span>
   <span
     v-else-if="columnType === 'categorical'"
-    class="inline-block rounded font-medium px-2 py-0.5 text-xs max-w-full truncate"
-    :style="categoryBadgeStyle ? { backgroundColor: categoryBadgeStyle.backgroundColor, color: categoryBadgeStyle.color } : undefined"
+    class="inline-block max-w-full truncate rounded bg-gray-lower px-2 py-0.5 text-xs text-gray-plain"
   >{{ value }}</span>
   <span
     v-else-if="columnType === 'number' || columnType === 'year'"
@@ -37,12 +36,11 @@
 <script setup lang="ts">
 import { useTranslation } from '../../composables/useTranslation'
 import { useFormatTabular, isTruthy } from '../../functions/tabular'
-import type { ColumnType, BadgeStyle } from './types'
+import type { ColumnType } from './types'
 
 defineProps<{
   value: unknown
   columnType: ColumnType
-  categoryBadgeStyle?: BadgeStyle
   compact?: boolean
   noNumberFormat?: boolean
 }>()