@datagouv/components-next 0.0.16 → 0.0.18

package/dist/{pdf-vue3-BP0F0iqr.js → pdf-vue3-D5SzycIl.js}

@@ -1,4 +1,4 @@
-import { d as Zl, r as c, c as bl, J as dl, L as Wl, w as J, o as cl, b as X, f as M, g as s, y as Q, i as u, M as Gl, N as ml, h as H, u as g, t as f } from "./main-CY3wUqg3.js";
+import { d as Zl, r as c, c as bl, J as dl, L as Wl, w as J, o as cl, b as X, f as M, g as s, y as Q, i as u, M as Gl, N as ml, h as H, u as g, t as f } from "./main-BGN65wY4.js";
 const Nl = {
   class: "pdf-vue3-main",
   style: { height: "100%", position: "relative", "min-height": "10px" }

package/dist/{text-clamp.esm-BUicfyXy.js → text-clamp.esm-D43nX9La.js}

@@ -1,4 +1,4 @@
-import { d as K, r as C, a as P, c as z, w as g, b as Q, n as W, o as X, e as Y, f as Z, g as $, h as B, u as L, i as ee } from "./main-CY3wUqg3.js";
+import { d as K, r as C, a as P, c as z, w as g, b as Q, n as W, o as X, e as Y, f as Z, g as $, h as B, u as L, i as ee } from "./main-BGN65wY4.js";
 var H = null;
 function te(e) {
   return H || (H = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(r) {

package/dist/{vue3-json-viewer-BkS5C6Qy.js → vue3-json-viewer-BiPkSVJb.js}

@@ -1,4 +1,4 @@
-import { d as T, D as ce, b as _, f as N, y as Y, g as P, E as S, h as pe, A as fe, t as O, q as de, r as k, G as z, c as A, w as J, e as I, H, I as g, n as ve } from "./main-CY3wUqg3.js";
+import { d as T, D as ce, b as _, f as N, y as Y, g as P, E as S, h as pe, A as fe, t as O, q as de, r as k, G as z, c as A, w as J, e as I, H, I as g, n as ve } from "./main-BGN65wY4.js";
 const ye = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/, G = T({
   name: "JsonString",
   props: {

package/dist/{vue3-xml-viewer.common-BHYUcZYj.js → vue3-xml-viewer.common-ARb4d9zr.js}

@@ -1,4 +1,4 @@
-import { O as et, P as ge, Q as j, R as dt, S as tn, T as _n, U as pi, V as ui, W as fs, X as Ce, Y as di, Z as hs, $ as fi, a0 as he, a1 as $n, a2 as tt, a3 as hi, a4 as mi, a5 as Ei, a6 as Ni, a7 as vi, a8 as Mt, a9 as gi, aa as pn, ab as Si, ac as Ti, k as yi } from "./main-CY3wUqg3.js";
+import { O as et, P as ge, Q as j, R as dt, S as tn, T as _n, U as pi, V as ui, W as fs, X as Ce, Y as di, Z as hs, $ as fi, a0 as he, a1 as $n, a2 as tt, a3 as hi, a4 as mi, a5 as Ei, a6 as Ni, a7 as vi, a8 as Mt, a9 as gi, aa as pn, ab as Si, ac as Ti, k as yi } from "./main-BGN65wY4.js";
 function Oi(e, t) {
   for (var n = 0; n < t.length; n++) {
     const r = t[n];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",

package/src/components/DateRangeDetails.vue

@@ -0,0 +1,85 @@
+<template>
+  <span>{{ display }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  range: { start: string, end: string | null }
+}>()
+
+const { t } = useI18n()
+
+const start = computed(() => new Date(props.range.start))
+const end = computed(() => props.range.end ? new Date(props.range.end) : null)
+
+const display = computed(() => {
+  let startDisplay: string | number | null = null
+  let endDisplay: string | number | null = null
+  let isDiscrete = false
+  let hasPronoun = false
+
+  const showDayMonthYear = new Intl.DateTimeFormat('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' }).format
+  const showDayMonth = new Intl.DateTimeFormat('fr-FR', { month: 'long', day: 'numeric' }).format
+  const showMonthYear = new Intl.DateTimeFormat('fr-FR', { year: 'numeric', month: 'long' }).format
+  const showMonth = new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format
+
+  if (start.value.getDate() === 1 && start.value.getMonth() === 0 && (!end.value || (end.value.getDate() === 31 && end.value.getMonth() === 11))) {
+    startDisplay = start.value.getFullYear()
+    if (end.value && end.value.getFullYear() > start.value.getFullYear()) {
+      endDisplay = end.value.getFullYear()
+      isDiscrete = end.value.getFullYear() === start.value.getFullYear() + 1
+    }
+  }
+  else if (start.value.getDate() === 1 && (!end.value || (end.value.getDate() === lastDayOfMonth(end.value)))) {
+    startDisplay = start.value.getFullYear() === end.value?.getFullYear() ? showMonth(start.value) : showMonthYear(start.value)
+    if (end.value && (end.value.getFullYear() > start.value.getFullYear() || end.value.getMonth() > start.value.getMonth())) {
+      endDisplay = showMonthYear(end.value)
+      isDiscrete = (end.value.getMonth() === start.value.getMonth() + 1) || (end.value.getMonth() === 0 && start.value.getMonth() === 11)
+    }
+    else if (end.value) {
+      // We are the same month, we will not show the endDisplay so we need to add back the year to the startDisplay
+      startDisplay = showMonthYear(start.value)
+    }
+  }
+  else {
+    hasPronoun = true
+    startDisplay = start.value.getFullYear() === end.value?.getFullYear() ? showDayMonth(start.value) : showDayMonthYear(start.value)
+    if (end.value && (end.value.getFullYear() > start.value.getFullYear() || end.value.getMonth() > start.value.getMonth() || end.value.getDate() > start.value.getDate())) {
+      endDisplay = showDayMonthYear(end.value)
+    }
+    else if (end.value) {
+      // We are the same day, we will not show the endDisplay so we need to add back the year to the startDisplay
+      startDisplay = showDayMonthYear(start.value)
+    }
+  }
+
+  const addPronoun = (value: string | number | null) => {
+    if (!value) return null
+    if (!hasPronoun) return value
+    return t('le ') + value
+  }
+
+  if (endDisplay) {
+    if (isDiscrete) {
+      return t('{start} et {end}', { start: addPronoun(startDisplay), end: addPronoun(endDisplay) })
+    }
+    else if (hasPronoun) {
+      return t('du {start} au {end}', { start: startDisplay, end: endDisplay })
+    }
+    else {
+      return t('{start} à {end}', { start: startDisplay, end: endDisplay })
+    }
+  }
+  if (!end.value) {
+    return t('depuis {start}', { start: addPronoun(startDisplay) })
+  }
+  return addPronoun(startDisplay)
+})
+
+function lastDayOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
+}
+</script>

package/src/main.ts

@@ -15,6 +15,7 @@ import type { Site } from './types/site'
 import type { Weight, WellType } from './types/ui'
 import type { User } from './types/users'
 
+import AppLink from './components/AppLink.vue'
 import Avatar from './components/Avatar.vue'
 import AvatarWithName from './components/AvatarWithName.vue'
 import BannerAction from './components/BannerAction.vue'
@@ -22,6 +23,7 @@ import BrandedButton from './components/BrandedButton.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DatasetCard from './components/DatasetCard.vue'
+import DateRangeDetails from './components/DateRangeDetails.vue'
 import DatasetInformationPanel from './components/DatasetInformationPanel.vue'
 import DatasetQuality from './components/DatasetQuality.vue'
 import DatasetQualityInline from './components/DatasetQualityInline.vue'
@@ -105,18 +107,18 @@ export type {
 // Vue Plugin
 const datagouv: Plugin<PluginConfig> = {
   async install(app: App, options) {
+    app.provide(configKey, options)
     if (!options.textClamp) {
       const textClamp = await import('vue3-text-clamp')
       options.textClamp = textClamp.default
     }
-
-    app.provide(configKey, options)
   },
 }
 
 export {
   datagouv,
   useComponentsConfig,
+  AppLink,
   Avatar,
   AvatarWithName,
   BannerAction,
@@ -130,6 +132,7 @@ export {
   DatasetQualityItem,
   DatasetQualityScore,
   DatasetQualityTooltipContent,
+  DateRangeDetails,
   OrganizationCard,
   OrganizationNameWithCertificate,
   OwnerType,

package/dist/Swagger.client-DB62n7Xb.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./main-CY3wUqg3.js";
-export {
-  f as default
-};