@datagouv/components-next 0.2.0 → 1.0.1

package/dist/{vue3-xml-viewer.common-D6skc_Ai.js → vue3-xml-viewer.common-Bi_bsV6C.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-Dgri3TQL.js";
+import { b as Ke } from "./main-CiH8ZmBI.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "0.2.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "engines": {
@@ -17,17 +17,20 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
+    "@types/leaflet": "^1.9.17",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@types/hast": "^3.0.4",
     "@vueuse/core": "^13.1.0",
+    "@vueuse/router": "^13.1.0",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
+    "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
     "ofetch": "^1.4.1",
     "ol": "^10.6.1",
-    "pdf-vue3": "^1.0.12",
+    "pdfjs-dist": "^4.10.38",
     "pmtiles": "^4.3.0",
     "popmotion": "^11.0",
     "rehype-highlight": "^7.0.2",
@@ -48,6 +51,7 @@
     "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
     "vue-router": "^4.5.0",
+    "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
     "vue3-xml-viewer": "^0.0.14"

package/src/components/ActivityList/ActivityList.vue

@@ -1,7 +1,11 @@
 <template>
   <PaddedContainer class="p-4 pr-7">
-    <LoadingBlock :status>
-      <template v-if="activities && activities.total">
+    <LoadingBlock
+      v-slot="{ data: activities }"
+      :status
+      :data="activities"
+    >
+      <template v-if="activities.total">
         <div
           v-for="(monthlyActivities, month) in groupedActivities"
           :key="month"

package/src/components/AppLink.vue

@@ -6,6 +6,9 @@
   >
     <slot />
   </component>
+  <span v-else-if="!to">
+    <slot />
+  </span>
   <a
     v-else-if="isExternal"
     :href="(to as string)"
@@ -29,7 +32,7 @@ const config = useComponentsConfig()
 const { locale } = useTranslation()
 
 const props = defineProps<{
-  to: string | RouteLocationRaw
+  to: string | RouteLocationRaw | null | undefined
 }>()
 
 const isExternal = computed(() => {

package/src/components/Avatar.vue

@@ -13,12 +13,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useGetUserAvatar } from '../functions/users'
-import type { UserReference } from '../types/users'
+import type { User, UserReference } from '../types/users'
 
 type Props = {
   rounded?: boolean
   size?: number
-  user: UserReference
+  user: User | UserReference
 }
 const props = withDefaults(defineProps<Props>(), {
   rounded: false,

package/src/components/AvatarWithName.vue

@@ -6,13 +6,15 @@
       :size
       :rounded="true"
     />
-    <AppLink
-      :to="user.page"
-      class="fr-text--bold truncate"
+    <component
+      :is="withLink ? AppLink : 'span'"
+      :to="withLink ? user.page : undefined"
+      class="truncate"
+      :class="{ 'font-bold': withLink }"
     >
       {{ user.first_name }}
       {{ user.last_name }}
-    </AppLink>
+    </component>
   </span>
 </template>
 
@@ -24,7 +26,9 @@ import Avatar from './Avatar.vue'
 withDefaults(defineProps<{
   user: User | UserReference
   size?: number
+  withLink?: boolean
 }>(), {
   size: 12,
+  withLink: true,
 })
 </script>

package/src/components/BouncingDots.vue

@@ -0,0 +1,21 @@
+<template>
+  <span class="inline-flex gap-0.5 items-end h-2">
+    <span
+      v-for="i in 3"
+      :key="i"
+      class="w-1 h-1 bg-current rounded-full animate-[bounce-dot_0.6s_ease-in-out_infinite]"
+      :style="`animation-delay: ${(i - 1) * 100}ms !important`"
+    />
+  </span>
+</template>
+
+<style>
+@keyframes bounce-dot {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+</style>

package/src/components/BrandedButton.vue

@@ -21,6 +21,7 @@
       v-else-if="icon"
       :class="iconSize"
       v-bind="iconAttrs"
+      aria-hidden="true"
     />
     <span
       v-if="hasText"
@@ -29,6 +30,7 @@
     ><slot /></span>
     <RiExternalLinkLine
       v-if="newTab"
+      aria-hidden="true"
       :class="iconSize"
     />
   </component>

package/src/components/CopyButton.vue

@@ -11,10 +11,13 @@
       :class="{ 'flex-row-reverse': reverse }"
       style="color: #3558a2;"
     >
-      <RiCheckLine class="flex-none size-4 inline" />
+      <RiCheckLine
+        class="flex-none size-4 inline"
+        aria-hidden="true"
+      />
       <span
         class="copy-label"
-        :class="{ 'fr-sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel }"
       >{{ copiedLabel }}</span>
     </span>
     <span
@@ -25,10 +28,11 @@
       <component
         :is="hideLabel ? RiClipboardLine : RiFileCopyLine"
         class="size-4 flex-none inline"
+        aria-hidden="true"
       />
       <span
         class="copy-link copy-label"
-        :class="{ 'fr-sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel }"
       >{{ label }}</span>
     </span>
   </button>
@@ -37,6 +41,8 @@
 <script setup lang="ts">
 import { RiCheckLine, RiClipboardLine, RiFileCopyLine } from '@remixicon/vue'
 import { ref } from 'vue'
+import { toast } from 'vue-sonner'
+import { useTranslation } from '../composables/useTranslation'
 
 const props = withDefaults(defineProps<{
   text: string
@@ -49,12 +55,18 @@ const props = withDefaults(defineProps<{
   reverse: false,
 })
 
+const { t } = useTranslation()
 const copied = ref(false)
 
-const copy = () => {
-  void navigator.clipboard.writeText(props.text)
-  copied.value = true
-  setTimeout(() => copied.value = false, 2000)
+const copy = async () => {
+  try {
+    await navigator.clipboard.writeText(props.text)
+    copied.value = true
+    setTimeout(() => copied.value = false, 2000)
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
 }
 </script>
 

package/src/components/DataserviceCard.vue

@@ -1,100 +1,83 @@
 <template>
-  <article
-    class="my-4 p-4 bg-white hover:bg-gray-some border fr-enlarge-link"
-    :class="{
+  <ObjectCard
+    :article-class="{
       'border-tabular-api': isTabularApi,
       'border-gray-default': !isTabularApi,
-      'mt-6': showBadge,
     }"
   >
-    <div
-      v-if="showBadge"
-      class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v fr-ml-n1v"
-    >
-      <p
-        v-if="dataservice.access_type === 'restricted'"
-        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
-      >
-        <RiLockLine class="size-4 mr-1" />
-        {{ t('Accès restreint') }}
-      </p>
-      <p
-        v-else-if="dataservice.access_type === 'open_with_account'"
-        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
-      >
-        <RiPassValidLine class="size-4 mr-1" />
-        {{ t('Ouvert avec un compte') }}
-      </p>
-      <p
+    <template #badge>
+      <ObjectCardBadge
         v-if="dataservice.private"
-        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+        :icon="RiLockLine"
       >
-        <RiLockLine class="size-4 mr-1" />
         {{ t('Brouillon') }}
-      </p>
-      <p
-        v-if="dataservice.archived_at"
-        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      </ObjectCardBadge>
+      <ObjectCardBadge
+        v-else-if="dataservice.archived_at"
+        :icon="RiArchiveLine"
       >
-        <RiLockLine class="size-4 mr-1" />
         {{ t('Archivé') }}
-      </p>
-    </div>
-    <h4 class="text-base mb-0 flex items-center gap-1">
-      <slot
-        name="dataserviceUrl"
-        :dataservice="dataservice"
-        :dataservice-url="dataserviceUrl"
+      </ObjectCardBadge>
+      <ObjectCardBadge
+        v-else-if="dataservice.access_type === 'restricted'"
+        :icon="RiLockLine"
       >
-        <RiSparklingLine
-          v-if="isTabularApi"
-          class="size-4 flex-none"
-        />
-        <RiTerminalLine
-          v-else
-          class="size-4 flex-none"
-        />
-        <AppLink
-          class="truncate"
-          :to="dataserviceUrl"
-        >
-          {{ dataservice.title }}
-        </AppLink>
-      </slot>
-    </h4>
+        {{ t('Accès restreint') }}
+      </ObjectCardBadge>
+      <ObjectCardBadge
+        v-else-if="dataservice.access_type === 'open_with_account'"
+        :icon="RiPassValidLine"
+      >
+        {{ t('Ouvert avec un compte') }}
+      </ObjectCardBadge>
+    </template>
+
+    <template #media>
+      <OrganizationLogo
+        v-if="dataservice.organization"
+        :organization="dataservice.organization"
+        size-class="size-12"
+      />
+      <Avatar
+        v-else-if="dataservice.owner"
+        :user="dataservice.owner"
+        :size="48"
+      />
+      <Placeholder
+        v-else
+        type="Dataservice"
+        class="size-12"
+      />
+    </template>
+
+    <ObjectCardHeader
+      :icon="isTabularApi ? RiSparklingLine : RiTerminalLine"
+      :url="dataserviceUrl || dataservice.self_web_url"
+    >
+      {{ dataservice.title }}
+    </ObjectCardHeader>
     <div
       v-if="dataservice.organization || dataservice.owner"
-      class="text-gray-medium overflow-hidden flex items-center gap-1 mt-1 mb-0"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
     >
-      <p
-        v-if="dataservice.organization"
-        class="text-sm block not-enlarged overflow-hidden mb-0"
-      >
-        <AppLink
-          v-if="organizationUrl"
-          class="link text-sm overflow-hidden"
-          :to="organizationUrl"
-        >
-          <OrganizationNameWithCertificate :organization="dataservice.organization" />
-        </AppLink>
-        <OrganizationNameWithCertificate
-          v-else
-          :organization="dataservice.organization"
-        />
-      </p>
-      <p
-        v-else
-        class="text-sm mb-0 truncate"
-      >
-        {{ ownerName }}
-      </p>
-      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
-      <!-- This comment is only here to fix this issue https://github.com/datagouv/cdata/issues/653, it could be empty… -->
-      <p class="text-sm whitespace-nowrap mb-0">
+      <ObjectCardOwner
+        :organization="dataservice.organization"
+        :owner="dataservice.owner"
+        :organization-url="organizationUrl"
+      />
+      <RiSubtractLine
+        aria-hidden="true"
+        class="size-4 flex-none fill-gray-medium"
+      />
+      <!-- https://github.com/datagouv/cdata/issues/653 -->
+      <p class="text-sm whitespace-nowrap mb-0 text-gray-medium">
         {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}
       </p>
-      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
-      <div class="flex items-center gap-1">
+      <RiSubtractLine
+        aria-hidden="true"
+        class="size-4 flex-none fill-gray-medium"
+      />
+      <div class="flex items-center gap-1 text-gray-medium">
         <p
           class="text-sm mb-0 flex items-center gap-0.5"
           :aria-label="t('{n} vues | {n} vue | {n} vues', dataservice.metrics.views)"
@@ -115,73 +98,55 @@
         </p>
       </div>
     </div>
-    <component
-      :is="config.textClamp"
-      v-if="config.textClamp && description && showDescription"
-      class="text-sm mt-2 mb-0"
-      :auto-resize="true"
-      :text="description"
-      :max-lines="2"
+    <ObjectCardShortDescription
+      v-if="showDescription"
+      :text="dataservice.description"
     />
-  </article>
+
+    <slot />
+  </ObjectCard>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
+import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { RiEyeLine, RiLockLine, RiPassValidLine, RiSparklingLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
+import { RiArchiveLine, RiEyeLine, RiLockLine, RiPassValidLine, RiSparklingLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
 import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
-import { removeMarkdown } from '../functions/markdown'
-import { getOwnerName } from '../functions/owned'
 import type { Dataservice } from '../types/dataservices'
 import { useTranslation } from '../composables/useTranslation'
-import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
-import AppLink from './AppLink.vue'
+import OrganizationLogo from './OrganizationLogo.vue'
+import Avatar from './Avatar.vue'
+import Placeholder from './Placeholder.vue'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardBadge from './ObjectCardBadge.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardOwner from './ObjectCardOwner.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 
 type Props = {
   dataservice: Dataservice
-
-  /**
-     * The dataserviceUrl is a route location object to allow Vue Router to navigate to the details of a dataservice.
-     * It is used as a separate prop to allow other sites using the package to define their own dataservice pages.
-     */
   dataserviceUrl?: RouteLocationRaw
-
-  /**
-     * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha dataservice.
-     * It is used as a separate prop to allow other sites using the package to define their own organization pages.
-     */
   organizationUrl?: RouteLocationRaw
   showDescription?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  style: () => ({}),
   showDescription: true,
 })
 
-const dataserviceUrl = computed(() => props.dataserviceUrl || props.dataservice.self_web_url)
-
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
-const ownerName = computed(() => getOwnerName(props.dataservice))
-const showBadge = computed(() => props.dataservice.access_type === 'restricted' || props.dataservice.access_type === 'open_with_account' || props.dataservice.private || props.dataservice.archived_at)
 
 const config = useComponentsConfig()
 const isTabularApi = computed(() => {
   return config.tabularApiDataserviceId === props.dataservice.id
 })
-
-const description = ref('')
-watchEffect(async () => {
-  description.value = await removeMarkdown(props.dataservice.description)
-})
 </script>
 
-  <style scoped>
-  .border-tabular-api {
-    border-color: #373C42 !important;
-  }
-  </style>
+<style scoped>
+.border-tabular-api {
+  border-color: #373C42 !important;
+}
+</style>