@datagouv/components-next 0.2.0 → 1.0.0

package/src/components/ObjectCardHeader.vue

@@ -0,0 +1,35 @@
+<template>
+  <h3 class="w-full text-base mb-0 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/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
-      class="mb-0 truncate flex-initial"
-      :class="{ 'text-sm': size === 'sm' }"
+    <component
+      :is="as"
+      class="mb-0 truncate flex-initial font-normal"
+      :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/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/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/MapContainer.client.vue

@@ -18,22 +18,6 @@
 import { onMounted, ref, useTemplateRef } from 'vue'
 import { RiErrorWarningLine } from '@remixicon/vue'
 
-import View from 'ol/View'
-import Map from 'ol/Map'
-import ScaleLine from 'ol/control/ScaleLine'
-import TileLayer from 'ol/layer/Tile'
-import OSM from 'ol/source/OSM'
-
-import {
-  CRS,
-  GeoportalAttribution,
-  GeoportalFullScreen,
-  GeoportalZoom,
-  LayerImport,
-  LayerSwitcher,
-  // @ts-expect-error no types provided
-} from 'geopf-extensions-openlayers'
-
 import SimpleBanner from '../SimpleBanner.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
@@ -47,6 +31,26 @@ const mapRef = useTemplateRef('mapRef')
 const hasError = ref(false)
 
 async function displayMap() {
+  // Dynamic imports for client-only libraries
+  const [
+    { default: View },
+    { default: Map },
+    { default: ScaleLine },
+    { default: TileLayer },
+    { default: OSM },
+    geopf,
+  ] = await Promise.all([
+    import('ol/View'),
+    import('ol/Map'),
+    import('ol/control/ScaleLine'),
+    import('ol/layer/Tile'),
+    import('ol/source/OSM'),
+    // @ts-expect-error no types provided
+    import('geopf-extensions-openlayers'),
+  ])
+
+  const { CRS, GeoportalAttribution, GeoportalFullScreen, GeoportalZoom, LayerImport, LayerSwitcher } = geopf
+
   await import('ol/ol.css')
   await import('@gouvfr/dsfr/dist/dsfr.css')
   await import('@gouvfr/dsfr/dist/utility/icons/icons.css')

package/src/components/ResourceAccordion/Metadata.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import type { Resource } from '../../types/resources'
 import CopyButton from '../CopyButton.vue'
 import DescriptionDetails from '../DescriptionDetails.vue'
-import DescriptionList from '../DescriptionList.vue'
 import DescriptionTerm from '../DescriptionTerm.vue'
 import { useFormatDate } from '../../functions/dates'
 import { filesize } from '../../functions/helpers'
@@ -27,7 +26,7 @@ const { formatDate } = useFormatDate()
 <template>
   <div>
     <div class="flex flex-wrap gap-12 flex-col md:flex-row overflow-hidden">
-      <DescriptionList class="flex-1 max-w-full">
+      <dl class="flex-1 max-w-full p-0 m-0">
         <DescriptionTerm>
           {{ t('URL') }}
           <CopyButton
@@ -90,8 +89,10 @@ const { formatDate } = useFormatDate()
             </code>
           </DescriptionDetails>
         </template>
-      </DescriptionList>
-      <DescriptionList style="flex-shrink: 0;">
+      </dl>
+      <dl
+        class="p-0 m-0 shrink-0"
+      >
         <DescriptionTerm>{{ t('Créée le') }}</DescriptionTerm>
         <DescriptionDetails>
           {{ formatDate(resource.created_at) }}
@@ -100,8 +101,10 @@ const { formatDate } = useFormatDate()
         <DescriptionDetails>
           {{ formatDate(resource.last_modified) }}
         </DescriptionDetails>
-      </DescriptionList>
-      <DescriptionList style="flex-shrink: 0;">
+      </dl>
+      <dl
+        class="p-0 m-0 shrink-0"
+      >
         <template v-if="resourceFilesize">
           <DescriptionTerm>{{ t('Taille') }}</DescriptionTerm>
           <DescriptionDetails>
@@ -120,12 +123,12 @@ const { formatDate } = useFormatDate()
             <code class="code truncate">{{ resource.mime }}</code>
           </DescriptionDetails>
         </template>
-      </DescriptionList>
+      </dl>
     </div>
     <div>
       <ExtraAccordion
         v-if="hasExtras"
-        class="pt-6 mt-6 border-top border-gray-default"
+        class="pt-6 mt-6 border-t border-gray-default"
         :button-text="t('Voir les extras')"
         :title-text="t('Extras de la ressource')"
         title-level="h5"
@@ -134,19 +137,3 @@ const { formatDate } = useFormatDate()
     </div>
   </div>
 </template>
-
-<style scoped>
-.gap-3rem {
-  gap: 3rem;
-}
-
-.gap-3rem dl {
-  padding-inline-start: 0;
-}
-
-@container (max-width: 600px) {
-  .flex-col-on-small {
-    flex-direction: column
-  }
-}
-</style>

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

@@ -25,7 +25,7 @@
             <p class="fr-text--bold fr-m-0">
               {{ t("Explorer les données en détail") }}
             </p>
-            <p class="fr-text--sm fr-m-0 f-italic">
+            <p class="fr-text--sm fr-m-0 italic">
               {{ t("Utiliser un visualisateur PMTiles pour obtenir un aperçu des données.") }}
             </p>
           </div>

package/src/components/ResourceAccordion/Preview.vue

@@ -23,7 +23,7 @@
             <p class="fr-text--bold fr-m-0">
               {{ t("Explorer les données en détail") }}
             </p>
-            <p class="fr-text--sm fr-m-0 f-italic">
+            <p class="fr-text--sm fr-m-0 italic">
               {{ t("Utiliser notre outil pour obtenir un aperçu des données, en savoir plus sur les différentes colonnes ou réaliser des filtres et des tris.") }}
             </p>
           </div>