@datagouv/components-next 0.2.0 → 1.0.1

package/src/components/ObjectCardHeader.vue

@@ -0,0 +1,35 @@
+<template>
+  <h3 class="w-full text-base flex">
+    <AppLink
+      :to="url"
+      class="text-gray-title text-base bg-none flex items-center w-full truncate gap-1"
+      :target="target"
+    >
+      <component
+        :is="icon"
+        aria-hidden="true"
+        class="size-4 flex-none"
+      />
+      <span
+        class="block truncate"
+        :class="$slots.extra ? 'flex-initial' : 'flex-1'"
+      >
+        <slot />
+      </span>
+      <slot name="extra" />
+      <span class="absolute inset-0" />
+    </AppLink>
+  </h3>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import AppLink from './AppLink.vue'
+
+defineProps<{
+  icon: Component
+  url: RouteLocationRaw
+  target?: string
+}>()
+</script>

package/src/components/ObjectCardOwner.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    v-if="organization"
+    class="-mr-0.5 flex-initial truncate"
+  >
+    <AppLink
+      class="link text-sm overflow-hidden flex items-center relative z-[2] truncate"
+      :to="organizationUrl || organization.page"
+    >
+      <OrganizationNameWithCertificate
+        :organization
+        size="sm"
+      />
+    </AppLink>
+  </div>
+  <div
+    v-else-if="ownerName"
+    class="mr-1 truncate"
+  >
+    {{ ownerName }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { getOwnerName } from '../functions/owned'
+import type { OrganizationReference } from '../types/organizations'
+import type { UserReference } from '../types/users'
+import AppLink from './AppLink.vue'
+import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+
+const props = defineProps<{
+  organization?: OrganizationReference | null
+  owner?: UserReference | null
+  organizationUrl?: RouteLocationRaw
+}>()
+
+const ownerName = computed(() => {
+  if (!props.owner) return ''
+  return getOwnerName({ organization: null, owner: props.owner })
+})
+</script>

package/src/components/ObjectCardShortDescription.vue

@@ -0,0 +1,28 @@
+<template>
+  <p
+    v-if="shortDescription"
+    class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere hidden sm:line-clamp-2"
+  >
+    {{ shortDescription }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { removeMarkdownSync } from '../functions/markdown'
+
+const props = withDefaults(defineProps<{
+  text?: string | null
+  maxLength?: number
+}>(), {
+  maxLength: 300,
+})
+
+// Truncate in JS to avoid sending very long markdown-cleaned text to the DOM.
+// The visual clamp is handled by CSS line-clamp-2.
+const shortDescription = computed(() => {
+  if (!props.text) return ''
+  const cleaned = removeMarkdownSync(props.text)
+  return cleaned.length > props.maxLength ? cleaned.substring(0, props.maxLength) + '…' : cleaned
+})
+</script>

package/src/components/OrganizationCard.vue

@@ -11,7 +11,7 @@
           loading="lazy"
         >
       </div>
-      <p class="mb-0.5 font-bold">
+      <div class="mb-0.5 font-bold">
         <AppLink
           :to="organization.page"
           class="overflow-hidden"
@@ -21,55 +21,70 @@
             :organization
           />
         </AppLink>
-      </p>
+      </div>
       <div class="mb-2 flex flex-wrap gap-1 items-center">
         <template v-if="type !== 'other'">
           <OwnerType
             class="mb-0 text-sm"
             :type
           />
-          <RiSubtractLine class="size-4 fill-gray-medium" />
+          <RiSubtractLine
+            aria-hidden="true"
+            class="size-4 fill-gray-medium"
+          />
         </template>
         <div>
           <div
-            v-if="organization.metrics"
+            v-if="'metrics' in organization"
             class="text-gray-medium flex items-center text-sm gap-0.5"
+            :aria-label="t('{datasets} jeux de données, {dataservices} API et {reuses} réutilisations', {
+              datasets: organization.metrics.datasets,
+              dataservices: organization.metrics.dataservices,
+              reuses: organization.metrics.reuses,
+            })"
           >
-            <RiDatabase2Line class="size-4 -mt-1" /> {{ organization.metrics.datasets }}
-            <RiTerminalLine class="size-4 -mt-1 ml-1" /> {{ organization.metrics.dataservices }}
-            <RiLineChartLine class="size-4 -mt-1 ml-1" /> {{ organization.metrics.reuses }}
+            <RiDatabase2Line
+              aria-hidden="true"
+              class="size-4 -mt-1"
+            /> {{ organization.metrics.datasets }}
+            <RiTerminalLine
+              aria-hidden="true"
+              class="size-4 -mt-1 ml-1"
+            /> {{ organization.metrics.dataservices }}
+            <RiLineChartLine
+              aria-hidden="true"
+              class="size-4 -mt-1 ml-1"
+            /> {{ organization.metrics.reuses }}
           </div>
         </div>
       </div>
-      <p class="mt-1 mb-0">
+      <div class="mt-1 mb-0">
         <TextClamp
-          v-if="description"
-          :text="description"
+          v-if="'description' in organization"
+          :text="removeMarkdownSync(organization.description)"
           :max-lines="3"
         />
-      </p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { RiLineChartLine, RiDatabase2Line, RiTerminalLine, RiSubtractLine } from '@remixicon/vue'
-import { computed, ref, watchEffect } from 'vue'
-import { removeMarkdown } from '../functions/markdown'
+import { computed } from 'vue'
+import { removeMarkdownSync } from '../functions/markdown'
 import { getOrganizationType } from '../functions/organizations'
-import type { Organization } from '../types/organizations'
+import type { Organization, OrganizationReference } from '../types/organizations'
 import OwnerType from './OwnerType.vue'
 import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
 import AppLink from './AppLink.vue'
+import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
-  organization: Organization
+  organization: Organization | OrganizationReference
 }>()
 
-const type = computed(() => getOrganizationType(props.organization))
+const { t } = useTranslation()
 
-const description = ref('')
-watchEffect(async () => {
-  description.value = await removeMarkdown(props.organization.description)
-})
+const type = computed(() => getOrganizationType(props.organization))
 </script>

package/src/components/OrganizationHorizontalCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <ObjectCard>
+    <template #media>
+      <OrganizationLogo
+        :organization="organization"
+        size-class="size-12"
+      />
+    </template>
+    <ObjectCardHeader
+      :icon="RiBuilding2Line"
+      :url="organization.page"
+    >
+      <OrganizationNameWithCertificate
+        :show-type="false"
+        :organization
+        size="sm"
+        color-class="text-gray-title"
+      />
+    </ObjectCardHeader>
+    <div class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate">
+      <template v-if="type !== 'other'">
+        <OwnerType
+          class="mb-0"
+          :type
+        />
+        <RiSubtractLine
+          v-if="'metrics' in organization"
+          aria-hidden="true"
+          class="hidden md:block size-4 flex-none fill-gray-medium"
+        />
+      </template>
+      <div
+        v-if="'metrics' in organization"
+        class="text-gray-medium flex items-center text-sm gap-0.5"
+        :aria-label="t('{datasets} jeux de donn\u00e9es, {dataservices} API et {reuses} r\u00e9utilisations', {
+          datasets: organization.metrics.datasets,
+          dataservices: organization.metrics.dataservices,
+          reuses: organization.metrics.reuses,
+        })"
+      >
+        <RiDatabase2Line
+          aria-hidden="true"
+          class="size-3.5"
+        /> {{ summarize(organization.metrics.datasets) }}
+        <RiTerminalLine
+          aria-hidden="true"
+          class="size-3.5 ml-1"
+        /> {{ summarize(organization.metrics.dataservices) }}
+        <RiLineChartLine
+          aria-hidden="true"
+          class="size-3.5 ml-1"
+        /> {{ summarize(organization.metrics.reuses) }}
+        <RiStarLine
+          aria-hidden="true"
+          class="size-3.5 ml-1"
+        /> {{ summarize(organization.metrics.followers) }}
+      </div>
+    </div>
+    <ObjectCardShortDescription
+      v-if="'description' in organization"
+      :text="organization.description"
+    />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { RiBuilding2Line, RiDatabase2Line, RiLineChartLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
+import { computed } from 'vue'
+import { getOrganizationType } from '../functions/organizations'
+import { summarize } from '../functions/helpers'
+import { useTranslation } from '../composables/useTranslation'
+import type { Organization, OrganizationReference } from '../types/organizations'
+import OrganizationLogo from './OrganizationLogo.vue'
+import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+import OwnerType from './OwnerType.vue'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+
+const props = defineProps<{
+  organization: Organization | OrganizationReference
+}>()
+
+const { t } = useTranslation()
+
+const type = computed(() => getOrganizationType(props.organization))
+</script>

package/src/components/OrganizationLogo.vue

@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { OrganizationOrSuggest } from '../types/organizations'
-import { throwOnNever } from '../main'
+import { throwOnNever } from '../functions/never'
 import Placeholder from './Placeholder.vue'
 
 const props = defineProps<{

package/src/components/OrganizationNameWithCertificate.vue

@@ -4,9 +4,10 @@
       v-if="showType"
       :type="getOrganizationType(organization)"
     />
-    <div
+    <component
+      :is="as"
       class="mb-0 truncate flex-initial"
-      :class="{ 'text-sm': size === 'sm' }"
+      :class="[colorClass, { 'text-xs': size === 'xs', 'text-sm': size === 'sm', 'text-base': size === 'base' }]"
     >
       {{ organization.name }}
       <small
@@ -15,11 +16,12 @@
       >
         {{ organization.acronym }}
       </small>
-    </div>
+    </component>
     <Tooltip v-if="isOrganizationCertified(organization)">
       <RiCheckboxCircleLine
         class="flex-none"
         :class="{
+          'size-3': size === 'xs',
           'size-4': size === 'sm',
           'size-5': size === 'base',
         }"
@@ -38,7 +40,7 @@
 <script setup lang="ts">
 import { RiCheckboxCircleLine } from '@remixicon/vue'
 import { getOrganizationType, isOrganizationCertified } from '../functions/organizations'
-import type { OrganizationReference } from '../types/organizations'
+import type { Organization, OrganizationReference } from '../types/organizations'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
 import OwnerTypeIcon from './OwnerTypeIcon.vue'
@@ -48,13 +50,17 @@ const config = useComponentsConfig()
 
 const { t } = useTranslation()
 withDefaults(defineProps<{
-  organization: OrganizationReference
+  organization: Organization | OrganizationReference
   showAcronym?: boolean
   showType?: boolean
-  size?: 'base' | 'sm'
+  size?: 'base' | 'sm' | 'xs'
+  colorClass?: string
+  as?: string
 }>(), {
   showAcronym: false,
   showType: true,
   size: 'base',
+  colorClass: 'text-new-primary',
+  as: 'div',
 })
 </script>

package/src/components/OwnerTypeIcon.vue

@@ -3,6 +3,7 @@
     :is="icon"
     v-if="icon"
     class="size-3.5 flex-none"
+    aria-hidden="true"
   />
 </template>
 

package/src/components/Pagination.vue

@@ -3,7 +3,7 @@
     v-if="totalResults > pageSize"
     ref="navRef"
     role="navigation"
-    class="fr-pagination fr-pagination--centered"
+    class="fr-pagination flex justify-center"
     :aria-label="t('Pagination')"
   >
     <ul class="fr-pagination__list">

package/src/components/Placeholder.vue

@@ -3,23 +3,26 @@
     <component
       :is="icon"
       class="size-1/2 text-gray-plain"
+      aria-hidden="true"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RiBuilding2Line, RiDatabase2Line, RiLineChartLine } from '@remixicon/vue'
+import { RiBookShelfLine, RiBuilding2Line, RiDatabase2Line, RiLineChartLine, RiTerminalLine } from '@remixicon/vue'
 
 const props = defineProps<{
-  type: 'Dataset' | 'Reuse' | 'Organization'
+  type: 'Dataset' | 'Dataservice' | 'Reuse' | 'Organization' | 'Topic'
 }>()
 
 const icon = computed(() => {
   return {
     Dataset: RiDatabase2Line,
+    Dataservice: RiTerminalLine,
     Reuse: RiLineChartLine,
     Organization: RiBuilding2Line,
+    Topic: RiBookShelfLine,
   }[props.type]
 })
 </script>

package/src/components/PostCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <ObjectCard media-size="lg">
+    <template #media>
+      <img
+        v-if="post.image"
+        :src="post.image"
+        class="w-full h-full object-cover"
+        :alt="post.name"
+      >
+      <Placeholder
+        v-else
+        type="Dataset"
+        class="w-full h-full"
+      />
+    </template>
+
+    <ObjectCardHeader
+      :icon="RiArticleLine"
+      :url="postUrl || post.page || '#'"
+    >
+      {{ post.name }}
+    </ObjectCardHeader>
+
+    <ObjectCardShortDescription :text="post.headline || post.content" />
+
+    <div
+      v-if="post.published || post.created_at"
+      class="text-sm text-gray-medium mt-1"
+    >
+      {{ t('Publié {date}', { date: formatDate(post.published || post.created_at) }) }}
+    </div>
+
+    <slot />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { RiArticleLine } from '@remixicon/vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { useFormatDate } from '../functions/dates'
+import { useTranslation } from '../composables/useTranslation'
+import type { Post } from '../types/posts'
+import Placeholder from './Placeholder.vue'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+
+defineProps<{
+  post: Post
+  postUrl?: RouteLocationRaw
+}>()
+
+const { t } = useTranslation()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+const formatDate = (dateString: string) => {
+  return formatRelativeIfRecentDate(dateString, {
+    dateStyle: 'long',
+    timeStyle: 'short',
+  })
+}
+</script>

package/src/components/ProgressBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    role="meter"
+    :aria-valuenow="value"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    class="min-w-20 h-2.5 rounded-lg border border-gray-default bg-[#f5f5f5] overflow-hidden"
+  >
+    <div
+      class="h-full rounded-lg"
+      :class="barClass"
+      :style="{ width: percentage + '%' }"
+    />
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  value: number
+  max?: number
+  barClass?: string
+}>(), {
+  max: 1,
+  barClass: '',
+})
+
+const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props.max) * 100)))
+</script>

package/src/components/RadioGroup.vue

@@ -0,0 +1,32 @@
+<template>
+  <fieldset class="flex flex-col gap-2 min-w-0">
+    <legend
+      v-if="legend"
+      class="fr-label mb-2"
+    >
+      {{ legend }}
+    </legend>
+    <slot />
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { provide, toRef } from 'vue'
+import { radioGroupInjectionKey } from './radioGroupContext'
+
+const props = defineProps<{
+  modelValue: string
+  name: string
+  legend?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+provide(radioGroupInjectionKey, {
+  name: toRef(() => props.name),
+  modelValue: toRef(() => props.modelValue),
+  select: (value: string) => emit('update:modelValue', value),
+})
+</script>

package/src/components/RadioInput.vue

@@ -0,0 +1,64 @@
+<template>
+  <label
+    class="flex items-center gap-2 p-1 rounded cursor-pointer transition has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-blue-500"
+    :class="selectedClass"
+  >
+    <input
+      type="radio"
+      :name="group?.name.value"
+      :value="value"
+      :checked="isSelected"
+      class="sr-only"
+      @change="group?.select(value)"
+    >
+    <component
+      :is="icon"
+      v-if="icon"
+      class="w-4 h-4"
+    />
+    <span class="text-sm flex-1 min-w-0">
+      <slot />
+    </span>
+    <span
+      v-if="loading || count !== undefined"
+      class="text-xs font-bold px-1 py-0.5 rounded"
+      :class="isSelected && highlighted ? 'bg-white/20 text-white' : 'bg-gray-200 text-gray-600'"
+    >
+      <BouncingDots v-if="loading" />
+      <template v-else>{{ formattedCount }}</template>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Component } from 'vue'
+import { radioGroupInjectionKey } from './radioGroupContext'
+import { useTranslation } from '../composables/useTranslation'
+import BouncingDots from './BouncingDots.vue'
+
+type Props = {
+  value: string
+  count?: number
+  loading?: boolean
+  icon?: Component
+  highlighted?: boolean
+}
+
+const props = defineProps<Props>()
+
+const group = inject(radioGroupInjectionKey)
+const { locale } = useTranslation()
+
+const isSelected = computed(() => group?.modelValue.value === props.value)
+
+const selectedClass = computed(() => {
+  if (!isSelected.value) return 'hover:bg-gray-100'
+  if (props.highlighted) return 'bg-blue-800 text-white'
+  return 'bg-gray-200'
+})
+
+const formattedCount = computed(() => {
+  if (props.count === undefined) return ''
+  return new Intl.NumberFormat(locale, { notation: 'compact' }).format(props.count)
+})
+</script>

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

@@ -14,7 +14,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("Erreur lors de l'affichage de l'aperçu.") }}</span>
     </SimpleBanner>
   </div>

package/src/components/ResourceAccordion/EditButton.vue

@@ -4,10 +4,9 @@
     icon-only
     :icon="RiPencilLine"
     color="warning"
+    :title="t('Éditer le fichier')"
     data-testid="edit-button"
-  >
-    {{ t("Éditer le fichier") }}
-  </BrandedButton>
+  />
 </template>
 
 <script setup lang="ts">

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

@@ -22,7 +22,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ fileSizeBytes
         ? t("Fichier JSON trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
         : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
@@ -33,7 +33,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("Ce fichier JSON ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
     </SimpleBanner>
     <SimpleBanner
@@ -41,7 +41,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("Erreur lors du chargement de l'aperçu JSON.") }}</span>
     </SimpleBanner>
   </div>