@datagouv/components-next 1.2.0 → 1.4.0

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>

package/src/components/ResourceListItem.vue

@@ -0,0 +1,168 @@
+<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.
+       ClientOnly: Vue hydrates a teleport by scanning the target from its first child,
+       so an SSR-rendered teleport to `body` breaks as soon as anything else is prepended
+       there — and Nuxt emits the `bodyOpen` head tags before it. The card only ever opens
+       on hover, so there is nothing to render on the server anyway. -->
+  <ClientOnly>
+    <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">
+          <TranslationT keypath="mis à jour {date}">
+            <template #date>
+              <FormattedDate
+                :date="resource.last_modified"
+                format="relative"
+              />
+            </template>
+          </TranslationT>
+          <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>
+  </ClientOnly>
+</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 ClientOnly from './ClientOnly.vue'
+import File from './Icons/File.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
+import { getResourceFormatIcon, getResourceIconColor, getResourceFilesize } from '../functions/resources'
+import { filesize, summarize } from '../functions/helpers'
+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()
+
+// 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/ReuseCard.vue

@@ -21,7 +21,18 @@
               :organization-url="organizationUrl"
             />
             <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
-            <span class="block flex-none">{{ t('publié {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
+            <TranslationT
+              class="block flex-none"
+              keypath="publié {date}"
+            >
+              <template #date>
+                <FormattedDate
+                  :date="reuse.created_at"
+                  format="relative"
+                  :options="{ dateStyle: 'medium' }"
+                />
+              </template>
+            </TranslationT>
           </div>
           <ReuseDetails :reuse />
         </div>
@@ -67,17 +78,18 @@
 import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
 import AppLink from './AppLink.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 const props = withDefaults(defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 
   /**
   * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.
@@ -88,8 +100,9 @@ const props = withDefaults(defineProps<{
   /**
   * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha reuse.
   * It is used as a separate prop to allow other sites using the package to define their own organization pages.
+  * Pass null instead of a route to render the organization name as plain, non-linked text.
   */
-  organizationUrl?: RouteLocationRaw
+  organizationUrl?: RouteLocationRaw | null
 
   titleTag?: TitleTag
 }>(), {
@@ -97,7 +110,6 @@ const props = withDefaults(defineProps<{
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 const reuseUrl = computed(() => props.reuseUrl || props.reuse.page)
 </script>

package/src/components/ReuseDetails.vue

@@ -32,11 +32,11 @@
 import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import { useReuseType } from '../composables/useReuseType'
 import { summarize } from '../functions/helpers'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 }>()
 
 const { t } = useTranslation()

package/src/components/ReuseHorizontalCard.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { RiArchiveLine, RiLineChartLine, RiLockLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
@@ -71,9 +71,10 @@ import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 
 defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
   reuseUrl?: RouteLocationRaw
-  organizationUrl?: RouteLocationRaw
+  // undefined falls back to the organization's data.gouv.fr page; pass null to render plain, non-linked text
+  organizationUrl?: RouteLocationRaw | null
 }>()
 
 const { t } = useTranslation()

package/src/components/SchemaCard.vue

@@ -1,8 +1,14 @@
 <template>
   <div
+    :id
     class="p-4 relative border bg-white hover:bg-gray-some"
-    :class="{ 'border-gray-default': !selected, 'border-datagouv': selected }"
+    :class="{
+      'border-gray-default': !selected && !active,
+      'border-datagouv': selected && !active,
+      'border-blue-outline': active,
+    }"
     :role="selectable ? 'option' : undefined"
+    :tabindex="selectable ? -1 : undefined"
     :aria-selected="selectable && selected"
   >
     <h3 class="text-base font-bold mb-0 flex items-center gap-1">
@@ -73,7 +79,10 @@ import { useComponentsConfig } from '../config'
 
 defineProps<{
   schema: RegisteredSchema
+  id?: string
   selectable?: boolean
+  // Highlighted by the keyboard inside the listbox, which is not the same as chosen
+  active?: boolean
   selected?: boolean
   showLinks?: boolean
 }>()

package/src/components/Search/Filter/AccessTypeFilter.vue

@@ -31,7 +31,7 @@ const { t } = useTranslation()
 
 const options = [
   { value: 'open', label: t('Téléchargement libre') },
-  { value: 'open_with_account', label: t('Ouvert sous condition') },
-  { value: 'restricted', label: t('Accessible sous habilitation') },
+  { value: 'open_with_account', label: t('Ouvert avec un compte') },
+  { value: 'restricted', label: t('Accès restreint') },
 ]
 </script>