@datagouv/components-next 1.0.2-dev.205 → 1.0.2-dev.207

package/dist/{vue3-xml-viewer.common-BzKiHzXQ.js → vue3-xml-viewer.common-BzsQ7xw8.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-CICNrWF8.js";
+import { g as Ke } from "./main-DADRUTDs.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": "1.0.2-dev.205",
+  "version": "1.0.2-dev.207",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/ChartCard.vue

@@ -0,0 +1,112 @@
+<template>
+  <ObjectCard media-size="xl">
+    <template #badge>
+      <ObjectCardBadge
+        v-if="chart.deleted_at"
+        :icon="RiDeleteBinLine"
+      >
+        {{ t('Supprimé') }}
+      </ObjectCardBadge>
+      <ObjectCardBadge
+        v-else-if="chart.private"
+        :icon="RiLockLine"
+      >
+        {{ t('Brouillon') }}
+      </ObjectCardBadge>
+    </template>
+
+    <template #media>
+      <img
+        v-if="chart.image"
+        :src="chart.image"
+        class="w-full h-full object-cover"
+        :alt="chart.title"
+      >
+      <Placeholder
+        v-else
+        type="Chart"
+        class="w-full h-full"
+      />
+    </template>
+
+    <ObjectCardHeader
+      :icon="chartIcon"
+      :url="chartUrl || chart.page"
+    >
+      {{ chart.title }}
+    </ObjectCardHeader>
+
+    <div
+      v-if="chart.organization || chart.owner"
+      class="text-sm flex flex-wrap gap-y-1 items-center truncate"
+    >
+      <ObjectCardOwner
+        :organization="chart.organization"
+        :owner="chart.owner"
+        :organization-url="organizationUrl"
+      />
+      <RiSubtractLine
+        aria-hidden="true"
+        class="size-4 flex-none fill-gray-medium"
+      />
+      <TranslationT
+        tag="p"
+        class="text-sm whitespace-nowrap mb-0 text-gray-medium"
+        keypath="Mis à jour {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="chart.last_modified"
+            format="relative"
+            :options="{ dateStyle: 'medium' }"
+          />
+        </template>
+      </TranslationT>
+    </div>
+
+    <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium mt-1">
+      <p
+        class="text-sm mb-0 flex items-center gap-0.5"
+        :aria-label="t('{n} vues | {n} vue | {n} vues', chart.metrics.views)"
+      >
+        <RiEyeLine
+          aria-hidden="true"
+          class="size-3.5"
+        />{{ summarize(chart.metrics.views) }}
+      </p>
+    </div>
+
+    <ObjectCardShortDescription :text="chart.description" />
+
+    <slot />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiBarChartBoxLine, RiDeleteBinLine, RiEyeLine, RiLineChartLine, RiLockLine, RiSubtractLine } from '@remixicon/vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Chart } from '../types/visualizations'
+import { summarize } from '../functions/helpers'
+import { useTranslation } from '../composables/useTranslation'
+import Placeholder from './Placeholder.vue'
+import FormattedDate from './FormattedDate.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'
+import TranslationT from './TranslationT.vue'
+
+const props = defineProps<{
+  chart: Chart
+  chartUrl?: RouteLocationRaw
+  organizationUrl?: RouteLocationRaw
+}>()
+
+const { t } = useTranslation()
+
+const chartIcon = computed(() => {
+  return props.chart.series[0]?.type === 'line' ? RiLineChartLine : RiBarChartBoxLine
+})
+</script>

package/src/components/ObjectCard.vue

@@ -28,12 +28,15 @@ import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
   articleClass?: string | string[] | Record<string, boolean>
-  mediaSize?: 'sm' | 'lg'
+  mediaSize?: 'sm' | 'lg' | 'xl'
 }>(), {
   mediaSize: 'sm',
 })
 
 const mediaContainerClass = computed(() => {
+  if (props.mediaSize === 'xl') {
+    return 'w-[250px] h-[190px]'
+  }
   if (props.mediaSize === 'lg') {
     return 'w-[225px] h-[120px]'
   }

package/src/components/Placeholder.vue

@@ -10,10 +10,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RiBookShelfLine, RiBuilding2Line, RiDatabase2Line, RiLineChartLine, RiTerminalLine } from '@remixicon/vue'
+import { RiBarChartBoxLine, RiBookShelfLine, RiBuilding2Line, RiDatabase2Line, RiLineChartLine, RiTerminalLine } from '@remixicon/vue'
 
 const props = defineProps<{
-  type: 'Dataset' | 'Dataservice' | 'Reuse' | 'Organization' | 'Topic'
+  type: 'Dataset' | 'Dataservice' | 'Reuse' | 'Organization' | 'Topic' | 'Chart'
 }>()
 
 const icon = computed(() => {
@@ -23,6 +23,7 @@ const icon = computed(() => {
     Reuse: RiLineChartLine,
     Organization: RiBuilding2Line,
     Topic: RiBookShelfLine,
+    Chart: RiBarChartBoxLine,
   }[props.type]
 })
 </script>

package/src/components/ResourceAccordion/Metadata.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { RiInformationLine } from '@remixicon/vue'
 import type { Resource } from '../../types/resources'
 import CopyButton from '../CopyButton.vue'
 import DescriptionDetails from '../DescriptionDetails.vue'
@@ -7,6 +8,7 @@ import DescriptionTerm from '../DescriptionTerm.vue'
 import FormattedDate from '../FormattedDate.vue'
 import { filesize } from '../../functions/helpers'
 import ExtraAccordion from '../ExtraAccordion.vue'
+import Toggletip from '../Toggletip.vue'
 import { getResourceTitleId, getResourceLabel, getResourceFilesize } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
 
@@ -41,8 +43,23 @@ const { t } = useTranslation()
             </a>
           </code>
         </DescriptionDetails>
-        <DescriptionTerm>
+        <DescriptionTerm class="flex items-center">
           {{ t('URL stable') }}
+          <Toggletip
+            :styled-button="false"
+            button-class="ml-1 border-transparent -outline-offset-2 inline-flex items-center justify-center rounded-sm p-1 text-gray-medium hover:bg-gray-lower transition-colors"
+          >
+            <RiInformationLine
+              class="size-4"
+              aria-hidden="true"
+            />
+            <span class="sr-only">{{ t(`Qu'est-ce qu'une URL stable ?`) }}</span>
+            <template #toggletip>
+              <p class="fr-text--sm m-0">
+                {{ t(`Cette URL redirige toujours vers la dernière version du fichier. L'URL du fichier, elle, change à chaque mise à jour : privilégiez l'URL stable pour partager la ressource ou l'utiliser dans un script.`) }}
+              </p>
+            </template>
+          </Toggletip>
           <CopyButton
             :label="t(`Copier l'URL stable`)"
             :copied-label="t('URL stable copiée !')"

package/src/main.ts

@@ -38,6 +38,7 @@ import Avatar from './components/Avatar.vue'
 import AvatarWithName from './components/AvatarWithName.vue'
 import BannerAction from './components/BannerAction.vue'
 import BrandedButton from './components/BrandedButton.vue'
+import ChartCard from './components/ChartCard.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DataserviceQuality from './components/DataserviceQuality.vue'
@@ -344,6 +345,7 @@ export {
   AvatarWithName,
   BannerAction,
   BrandedButton,
+  ChartCard,
   CopyButton,
   DataserviceCard,
   DataserviceQuality,

package/src/types/visualizations.ts

@@ -67,6 +67,7 @@ export type Chart = Owned & {
   created_at: string
   last_modified: string
   deleted_at: string | null
+  image: string | null
   uri: string
   page: string
   x_axis: XAxis