@datagouv/components-next 1.0.2-dev.20 → 1.0.2-dev.200

package/src/components/ReuseCard.vue

@@ -2,14 +2,17 @@
   <article class="fr-enlarge-link group/reuse-card bg-white border border-gray-default hover:bg-gray-some flex flex-col relative">
     <div class="flex flex-col h-full flex-1 order-2 px-8">
       <div class="order-1 flex flex-col px-4 py-1 h-full -mx-8">
-        <h3 class="font-bold text-base mt-1 mb-0 truncate">
+        <component
+          :is="titleTag"
+          class="font-bold text-base mt-1 mb-0 truncate"
+        >
           <AppLink
             class="text-gray-title overflow-hidden"
             :to="reuseUrl"
           >
             {{ reuse.title }}
           </AppLink>
-        </h3>
+        </component>
         <div class="order-3 text-sm m-0 text-gray-medium">
           <div class="text-sm mb-0 flex items-center">
             <ObjectCardOwner
@@ -18,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>
@@ -64,16 +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 = defineProps<{
-  reuse: Reuse
+const props = withDefaults(defineProps<{
+  reuse: Reuse | ReuseV2
 
   /**
   * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.
@@ -86,10 +102,13 @@ const props = defineProps<{
   * It is used as a separate prop to allow other sites using the package to define their own organization pages.
   */
   organizationUrl?: RouteLocationRaw
-}>()
+
+  titleTag?: TitleTag
+}>(), {
+  titleTag: 'h3',
+})
 
 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,7 +71,7 @@ import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 
 defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
   reuseUrl?: RouteLocationRaw
   organizationUrl?: RouteLocationRaw
 }>()

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>