@datagouv/components-next 1.0.2-dev.209 → 1.0.2-dev.210

package/dist/{vue3-xml-viewer.common-D8NyU_-4.js → vue3-xml-viewer.common-BZ1O_76n.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-D1VXLvop.js";
+import { g as Ke } from "./main-ajZVLXAR.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.209",
+  "version": "1.0.2-dev.210",
   "private": false,
   "type": "module",
   "engines": {
@@ -25,6 +25,7 @@
   "dependencies": {
     "@floating-ui/vue": "^2.0.1",
     "@headlessui/vue": "^1.7.23",
+    "@internationalized/date": "^3.12.4",
     "@remixicon/vue": "^4.9.0",
     "@types/hast": "^3.0.5",
     "@types/leaflet": "^1.9.22",
@@ -46,6 +47,7 @@
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
+    "reka-ui": "^2.10.4",
     "remark-behead": "^3.1.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",

package/src/components/FormattedDate.vue

@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useFormatDate } from '../functions/dates'
+import { PLAIN_DATE, parseDateValue, useFormatDate } from '../functions/dates'
 
 const props = withDefaults(defineProps<{
   date: Date | string | null | undefined
@@ -35,21 +35,9 @@ const props = withDefaults(defineProps<{
 
 const { formatDate, formatFromNow, formatRelativeIfRecentDate } = useFormatDate()
 
-// `2026`, `2026-04` and `2026-04-24` carry no time of day. `new Date()` reads them as
-// midnight UTC, an instant they never claimed, and then converts it: a reader west of
-// UTC gets the day before — and with it the month, and sometimes the year.
-const PLAIN_DATE = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/
-
 const plainDate = computed(() => typeof props.date === 'string' ? props.date.match(PLAIN_DATE) : null)
 
-const parsed = computed(() => {
-  if (!props.date) return null
-  const plain = plainDate.value
-  const date = plain
-    ? new Date(Number(plain[1]), Number(plain[2] ?? 1) - 1, Number(plain[3] ?? 1))
-    : new Date(props.date)
-  return isNaN(date.getTime()) ? null : date
-})
+const parsed = computed(() => parseDateValue(props.date))
 
 // Announce the precision the value carries, never more: a month stays a month.
 const datetime = computed(() => {

package/src/components/TabularExplorer/TabularCellPopover.vue

@@ -12,7 +12,10 @@
           <p class="text-[10px] text-gray-plain mb-0">
             {{ t('Valeur brute') }}
           </p>
-          <p class="text-xs text-gray-title mb-0">
+          <p
+            class="text-xs text-gray-title mb-0"
+            data-testid="cell-raw-value"
+          >
             {{ displayValue }}
           </p>
         </div>
@@ -77,7 +80,7 @@ import {
 } from '@remixicon/vue'
 import { toast } from 'vue-sonner'
 import { useTranslation } from '../../composables/useTranslation'
-import { buildTypeConfig } from '../../functions/tabular'
+import { buildTypeConfig, toIsoDay } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import type { ColumnType, ColumnFilters } from './types'
 
@@ -128,7 +131,20 @@ function filterByValue() {
   const val = String(cell.value.value ?? '')
   const col = cell.value.column
   const existing = filters.value[col] ?? {}
-  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'date' || cell.value.columnType === 'year') {
+  // A date goes through the same `date` filter the column panel writes, so the
+  // calendar opens on the day that was clicked instead of on an empty month.
+  if (cell.value.columnType === 'date') {
+    const day = toIsoDay(cell.value.value)
+    if (day) {
+      filters.value = { ...filters.value, [col]: { ...existing, date: { operator: 'is', start: day } } }
+    }
+    // An empty cell has no day to select: filtering on the missing values is
+    // what "this value" means there, and the panel shows it as such.
+    else if (cell.value.value == null || cell.value.value === '') {
+      filters.value = { ...filters.value, [col]: { ...existing, null: 'only' } }
+    }
+  }
+  else if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'year') {
     const current = existing.in ?? []
     if (!current.includes(val)) {
       filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }

package/src/components/TabularExplorer/TabularDateField.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- Editable segments rather than a text input: the value never goes through a
+       locale-dependent parse, and the day/month/year order follows the locale. -->
+  <DateFieldRoot
+    v-slot="{ segments }"
+    v-model="model"
+    v-model:placeholder="placeholder"
+    :locale="locale"
+    granularity="day"
+    :min-value="minValue"
+    class="flex h-8 min-w-0 flex-1 items-center rounded-lg border border-transparent bg-[#f3f3f5] px-2 text-sm tabular-nums focus-within:border-new-primary"
+    :class="model ? 'text-gray-title' : 'text-gray-medium'"
+    :aria-label="label"
+  >
+    <DateFieldInput
+      v-for="(item, index) in segments"
+      :key="`${index}-${item.part}`"
+      :part="item.part"
+      class="rounded px-0.5 focus:bg-new-primary focus:text-white focus:outline-none"
+    >
+      {{ item.value }}
+    </DateFieldInput>
+  </DateFieldRoot>
+</template>
+
+<script setup lang="ts">
+import { DateFieldInput, DateFieldRoot } from 'reka-ui'
+import type { DateValue } from '@internationalized/date'
+import { useTranslation } from '../../composables/useTranslation'
+
+defineProps<{
+  label: string
+  minValue?: DateValue
+}>()
+
+const model = defineModel<DateValue | undefined>()
+// Shared with the calendar and the other field: it is the month on display.
+const placeholder = defineModel<DateValue>('placeholder', { required: true })
+
+const { locale } = useTranslation()
+</script>

package/src/components/TabularExplorer/TabularDateFilter.vue

@@ -0,0 +1,403 @@
+<template>
+  <!-- Spacing carries the grouping: what the filter is (operator, dates), then the
+       calendar with the bar that drives it, then the actions. -->
+  <form
+    class="border-b border-black/10 px-3 py-2"
+    @submit.prevent="apply"
+  >
+    <select
+      v-model="operator"
+      class="h-8 w-full rounded-lg border border-transparent bg-[#f3f3f5] px-2 text-sm focus:border-new-primary focus:outline-none"
+      :aria-label="t('Condition du filtre')"
+    >
+      <option
+        v-for="option in operatorOptions"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+
+    <div class="mt-2 flex items-stretch gap-2">
+      <TabularDateField
+        v-model="start"
+        v-model:placeholder="placeholder"
+        :label="isRange ? t('Date de début') : t('Date')"
+      />
+      <TabularDateField
+        v-if="isRange"
+        v-model="end"
+        v-model:placeholder="placeholder"
+        :min-value="start ?? undefined"
+        :label="t('Date de fin')"
+      />
+    </div>
+
+    <!-- Month and year are pickers rather than a heading: reaching a date years
+         away otherwise takes one click per month. -->
+    <div class="mt-4 flex items-center gap-1">
+      <select
+        :value="placeholder.month"
+        class="h-7 min-w-0 flex-1 rounded border border-black/10 bg-white px-1 text-xs focus:border-new-primary focus:outline-none"
+        :aria-label="t('Mois')"
+        @change="goToMonth(Number(($event.target as HTMLSelectElement).value))"
+      >
+        <option
+          v-for="(label, index) in monthNames"
+          :key="label"
+          :value="index + 1"
+        >
+          {{ label }}
+        </option>
+      </select>
+      <select
+        :value="placeholder.year"
+        class="h-7 w-18 rounded border border-black/10 bg-white px-1 text-xs tabular-nums focus:border-new-primary focus:outline-none"
+        :aria-label="t('Année')"
+        @change="goToYear(Number(($event.target as HTMLSelectElement).value))"
+      >
+        <option
+          v-for="year in selectableYears"
+          :key="year"
+          :value="year"
+        >
+          {{ year }}
+        </option>
+      </select>
+      <button
+        type="button"
+        class="flex size-7 shrink-0 items-center justify-center rounded text-gray-plain transition-colors hover:bg-gray-some focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+        :aria-label="t('Mois précédent')"
+        @click="shiftMonths(-1)"
+      >
+        <RiArrowLeftSLine
+          class="size-4"
+          aria-hidden="true"
+        />
+      </button>
+      <button
+        type="button"
+        class="flex size-7 shrink-0 items-center justify-center rounded text-gray-plain transition-colors hover:bg-gray-some focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+        :aria-label="t('Mois suivant')"
+        @click="shiftMonths(1)"
+      >
+        <RiArrowRightSLine
+          class="size-4"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+
+    <RangeCalendarRoot
+      v-if="isRange"
+      v-slot="{ grid, weekDays }"
+      v-model="range"
+      v-model:placeholder="placeholder"
+      :locale="locale"
+      fixed-weeks
+      weekday-format="short"
+      :calendar-label="t('Choisir une plage de dates')"
+    >
+      <RangeCalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        class="w-full border-collapse select-none"
+      >
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="HEAD_CELL_CLASS"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow
+            v-for="(week, index) in month.rows"
+            :key="`week-${index}`"
+          >
+            <RangeCalendarCell
+              v-for="day in week"
+              :key="day.toString()"
+              :date="day"
+              class="p-0"
+            >
+              <RangeCalendarCellTrigger
+                v-slot="cell"
+                :day="day"
+                :month="month.value"
+                :class="TRIGGER_CLASS"
+              >
+                <span :class="rangeDayClass(cell)">{{ cell.dayValue }}</span>
+              </RangeCalendarCellTrigger>
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </RangeCalendarRoot>
+
+    <CalendarRoot
+      v-else
+      v-slot="{ grid, weekDays }"
+      v-model="start"
+      v-model:placeholder="placeholder"
+      :locale="locale"
+      fixed-weeks
+      weekday-format="short"
+      :calendar-label="t('Choisir une date')"
+    >
+      <CalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        class="w-full border-collapse select-none"
+      >
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="HEAD_CELL_CLASS"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow
+            v-for="(week, index) in month.rows"
+            :key="`week-${index}`"
+          >
+            <CalendarCell
+              v-for="day in week"
+              :key="day.toString()"
+              :date="day"
+              class="p-0"
+            >
+              <CalendarCellTrigger
+                v-slot="cell"
+                :day="day"
+                :month="month.value"
+                :class="TRIGGER_CLASS"
+              >
+                <span :class="dayClass(cell)">{{ cell.dayValue }}</span>
+              </CalendarCellTrigger>
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </CalendarRoot>
+
+    <div class="mt-4 flex items-center justify-end gap-2">
+      <BrandedButton
+        color="tertiary"
+        size="2xs"
+        type="button"
+        keep-margins-even-without-borders
+        data-testid="clear-date-filter"
+        @click="clear"
+      >
+        {{ t('Effacer') }}
+      </BrandedButton>
+      <BrandedButton
+        color="primary"
+        size="2xs"
+        type="submit"
+        :disabled="!isComplete"
+      >
+        {{ t('Appliquer') }}
+      </BrandedButton>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, watch } from 'vue'
+import { today, getLocalTimeZone, type DateValue } from '@internationalized/date'
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarRoot,
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+  RangeCalendarRoot,
+} from 'reka-ui'
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { parseIsoDate } from '../../functions/tabular'
+import BrandedButton from '../BrandedButton.vue'
+import TabularDateField from './TabularDateField.vue'
+import type { ColumnFilters, DateFilter, DateFilterOperator } from './types'
+
+const props = defineProps<{
+  column: string
+}>()
+
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t, locale } = useTranslation()
+
+const operatorOptions = computed<Array<{ value: DateFilterOperator, label: string }>>(() => [
+  { value: 'is', label: t('Est') },
+  { value: 'before', label: t('Est avant') },
+  { value: 'after', label: t('Est après') },
+  { value: 'between', label: t('Est entre') },
+])
+
+const HEAD_CELL_CLASS = 'pb-1 text-xs font-normal text-gray-medium'
+const TRIGGER_CLASS = 'group flex h-8 w-full items-center justify-center focus:outline-none'
+
+type DayState = {
+  selected: boolean
+  today: boolean
+  outsideView: boolean
+}
+
+const DAY_BASE_CLASS = 'flex size-8 items-center justify-center text-sm tabular-nums transition-colors'
+
+// One utility per axis, never two: `!important` puts every Tailwind class at the
+// same specificity, so a cell carrying two `text-*` is resolved by the order they
+// happen to be emitted in rather than by the order written here.
+function dayText(cell: DayState): string {
+  if (cell.selected) return 'font-medium text-white'
+  if (cell.today) return 'font-bold text-new-primary'
+  return cell.outsideView ? 'text-gray-low' : 'text-gray-title'
+}
+
+function dayClass(cell: DayState): string[] {
+  return [
+    DAY_BASE_CLASS,
+    'rounded-md',
+    dayText(cell),
+    cell.selected
+      ? 'bg-new-primary'
+      : 'group-hover:bg-gray-some group-focus-visible:ring-2 group-focus-visible:ring-new-primary',
+  ]
+}
+
+// The range background has to be continuous across cells, so it is the day
+// element that fills its cell and only the two ends get rounded corners.
+function rangeDayClass(cell: DayState & { highlighted: boolean, selectionStart: boolean, selectionEnd: boolean }): string[] {
+  const isEnd = cell.selectionStart || cell.selectionEnd
+  const inRange = cell.highlighted || cell.selected
+  return [
+    DAY_BASE_CLASS,
+    'w-full',
+    // Only the two ends read as selected here: the days in between are carried by
+    // the background, not by the text
+    dayText({ ...cell, selected: isEnd }),
+    isEnd ? 'bg-new-primary' : inRange ? 'bg-new-primary/10' : 'group-hover:bg-gray-some',
+    isEnd || !inRange ? 'rounded-md' : '',
+    cell.selectionStart ? 'rounded-r-none' : '',
+    cell.selectionEnd ? 'rounded-l-none' : '',
+    'group-focus-visible:ring-2 group-focus-visible:ring-new-primary',
+  ]
+}
+
+const operator = ref<DateFilterOperator>('is')
+
+// `shallowRef` rather than `ref`: these dates are immutable values, always
+// replaced whole, and `UnwrapRef` would flatten the class into a plain object
+// type that no longer matches what the calendar components expect.
+const start = shallowRef<DateValue | undefined>()
+const end = shallowRef<DateValue | undefined>()
+// The month the calendar and the fields are looking at.
+const placeholder = shallowRef<DateValue>(today(getLocalTimeZone()))
+
+const isRange = computed(() => operator.value === 'between')
+
+// `range` bridges the two separate refs the fields bind to and the single
+// object the range calendar expects.
+const range = computed({
+  get: () => ({ start: start.value, end: end.value }),
+  set: (value) => {
+    start.value = value.start
+    end.value = value.end
+  },
+})
+
+const isComplete = computed(() => Boolean(start.value && (!isRange.value || end.value)))
+
+const monthNames = computed(() => {
+  // `timeZone` matches the instants below: west of UTC, midnight UTC on the 1st
+  // falls in the previous month locally, and every name shifts by one
+  const formatter = new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC' })
+  return Array.from({ length: 12 }, (_, index) =>
+    formatter.format(new Date(Date.UTC(2000, index, 1))))
+})
+
+// A century back covers historical datasets; the year of the current view is
+// added so a date typed in the field is always representable in the picker.
+const selectableYears = computed(() => {
+  const currentYear = today(getLocalTimeZone()).year
+  const years = new Set<number>([placeholder.value.year])
+  for (let year = currentYear + 10; year >= currentYear - 100; year--) {
+    years.add(year)
+  }
+  return [...years].sort((a, b) => b - a)
+})
+
+function goToMonth(month: number) {
+  placeholder.value = placeholder.value.set({ month })
+}
+
+function goToYear(year: number) {
+  placeholder.value = placeholder.value.set({ year })
+}
+
+function shiftMonths(amount: number) {
+  placeholder.value = placeholder.value.add({ months: amount })
+}
+
+// Reflect the applied filter: the panel stays mounted between openings, and the
+// filter can also be dropped from the active-filter chip or the panel header.
+watch(() => filters.value[props.column]?.date, (dateFilter) => {
+  if (!dateFilter) {
+    start.value = undefined
+    end.value = undefined
+    return
+  }
+  operator.value = dateFilter.operator
+  start.value = parseIsoDate(dateFilter.start) ?? undefined
+  end.value = parseIsoDate(dateFilter.end) ?? undefined
+  if (start.value) {
+    placeholder.value = start.value
+  }
+}, { immediate: true })
+
+function apply() {
+  if (!start.value) return
+  const dateFilter: DateFilter = {
+    operator: operator.value,
+    start: start.value.toString(),
+  }
+  if (isRange.value) {
+    if (!end.value) return
+    dateFilter.end = end.value.toString()
+  }
+  const existing = filters.value[props.column] ?? {}
+  filters.value = { ...filters.value, [props.column]: { ...existing, date: dateFilter } }
+}
+
+function clear() {
+  start.value = undefined
+  end.value = undefined
+  const existing = filters.value[props.column]
+  if (!existing?.date) return
+  const { date: _date, ...rest } = existing
+  filters.value = { ...filters.value, [props.column]: rest }
+}
+</script>

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -25,10 +25,10 @@ import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { injectTabularProfile } from '../../composables/useTabularProfile'
-import { hasFilterForColumn as _hasFilterForColumn, buildGlobalSearchConditions } from '../../functions/tabular'
+import { hasFilterForColumn as _hasFilterForColumn, buildDateFilterParams, buildGlobalSearchConditions, useFormatTabular } from '../../functions/tabular'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import TabularSkeleton from './TabularSkeleton.vue'
-import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters } from './types'
+import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters, DateFilter } from './types'
 import { provideTabularContext, type ActiveFilter } from './useTabularContext'
 import { useColumnMetadata } from './useColumnMetadata'
 
@@ -112,6 +112,9 @@ const dataQuery = computed(() => {
     else if (filter.null === 'exclude') {
       q[`${col}__isnotnull`] = ''
     }
+    if (filter.date) {
+      Object.assign(q, buildDateFilterParams(col, filter.date))
+    }
   }
   if (props.globalSearch && profileData.value?.profile) {
     const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
@@ -208,6 +211,21 @@ function selectOnlyColumn(col: string) {
   visibleColumns.value = new Set([col])
 }
 
+const { formatCellDate } = useFormatTabular()
+
+function describeDateFilter(filter: DateFilter): string {
+  switch (filter.operator) {
+    case 'is': return `= ${formatCellDate(filter.start)}`
+    case 'before': return `${t('avant le')} ${formatCellDate(filter.start)}`
+    case 'after': return `${t('après le')} ${formatCellDate(filter.start)}`
+    // An open-ended range is what `dateFilterBounds` sends, so it is what the chip
+    // says: repeating the separator as a missing end reads as three dashes in a row
+    case 'between': return filter.end
+      ? `${formatCellDate(filter.start)} – ${formatCellDate(filter.end)}`
+      : `${t('à partir du')} ${formatCellDate(filter.start)}`
+  }
+}
+
 // Active filters
 const activeFilters = computed<ActiveFilter[]>(() => {
   const result: ActiveFilter[] = []
@@ -242,6 +260,9 @@ const activeFilters = computed<ActiveFilter[]>(() => {
     else if (filter.max != null) {
       parts.push(`≤ ${filter.max}`)
     }
+    if (filter.date) {
+      parts.push(describeDateFilter(filter.date))
+    }
     if (parts.length) {
       result.push({ column: col, label: parts.join(', ') })
     }