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

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -61,22 +61,28 @@
       </div>
     </div>
 
-    <!-- Search (contains) or date filter -->
+    <!-- Date filter -->
+    <TabularDateFilter
+      v-if="columnType === 'date'"
+      v-model:filters="filters"
+      :column="column"
+    />
+
+    <!-- Search (contains) -->
     <div
-      v-if="columnType !== 'boolean'"
+      v-if="columnType !== 'boolean' && columnType !== 'date'"
       class="px-3 py-2 border-b border-black/10"
     >
       <div class="relative">
-        <component
-          :is="searchField.icon"
+        <RiSearchLine
           class="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-gray-medium"
           aria-hidden="true"
         />
         <input
           v-model="search"
-          :type="searchField.type"
+          :type="isNumeric ? 'number' : 'text'"
           class="w-full h-8 text-sm border border-transparent rounded-lg py-1 pl-8 pr-3 bg-[#f3f3f5] focus:outline-none focus:border-new-primary"
-          :placeholder="searchField.placeholder"
+          :placeholder="t('Rechercher...')"
         >
       </div>
     </div>
@@ -181,14 +187,7 @@
           :max="profileMax"
         >
       </div>
-      <div class="flex items-center gap-2">
-        <BrandedButton
-          color="primary"
-          size="2xs"
-          type="submit"
-        >
-          {{ t('Appliquer') }}
-        </BrandedButton>
+      <div class="flex items-center justify-end gap-2">
         <BrandedButton
           color="tertiary"
           size="2xs"
@@ -198,6 +197,13 @@
         >
           {{ t('Effacer') }}
         </BrandedButton>
+        <BrandedButton
+          color="primary"
+          size="2xs"
+          type="submit"
+        >
+          {{ t('Appliquer') }}
+        </BrandedButton>
       </div>
     </form>
   </div>
@@ -210,13 +216,13 @@ import {
   RiArrowUpLine,
   RiArrowDownLine,
   RiSearchLine,
-  RiCalendarLine,
   RiCheckLine,
 } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useFormatTabular } from '../../functions/tabular'
 import BrandedButton from '../BrandedButton.vue'
 import ProgressBar from '../ProgressBar.vue'
+import TabularDateFilter from './TabularDateFilter.vue'
 import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection } from './types'
 
 const props = defineProps<{
@@ -236,20 +242,13 @@ const { formatNumber } = useFormatTabular()
 
 const search = ref('')
 
-// Numbers, years and dates are matched exactly (the API has no `contains` for
-// them), so the field offers the matching native picker instead of a text search.
-const searchField = computed(() => {
-  switch (props.columnType) {
-    case 'date': return { icon: RiCalendarLine, type: 'date', placeholder: '' }
-    case 'number':
-    case 'year': return { icon: RiSearchLine, type: 'number', placeholder: t('Rechercher...') }
-    default: return { icon: RiSearchLine, type: 'text', placeholder: t('Rechercher...') }
-  }
-})
+// Numbers and years are matched exactly (the API has no `contains` for them),
+// so the field offers a number input instead of a text search.
+const isNumeric = computed(() => props.columnType === 'number' || props.columnType === 'year')
 
 watchDebounced(search, (q) => {
   const existing = filters.value[props.column] ?? {}
-  const operator = props.columnType === 'number' || props.columnType === 'year' || props.columnType === 'date' ? 'exact' : 'contains'
+  const operator = isNumeric.value ? 'exact' : 'contains'
   if (q) {
     filters.value = { ...filters.value, [props.column]: { ...existing, [operator]: q } }
   }

package/src/components/TabularExplorer/TabularFilterPopover.vue

@@ -22,7 +22,7 @@
           v-show="open"
           ref="panel"
           static
-          class="bg-white border border-black/10 rounded-lg shadow-md w-64 absolute z-[800]"
+          class="bg-white border border-black/10 rounded-lg shadow-md w-80 absolute z-[800]"
           :style="floatingStyles"
           :data-testid="`column-filter-${column}`"
         >

package/src/components/TabularExplorer/TabularTable.vue

@@ -35,7 +35,10 @@
       ]"
       :aria-busy="isRefreshing"
     >
-      <table class="text-sm border-collapse">
+      <table
+        class="text-sm border-collapse"
+        data-testid="data-table"
+      >
         <thead
           class="sticky top-0 z-10 bg-gray-some transition-shadow"
           :class="scrolled ? 'shadow-[inset_0_-1px_0_0_#E5E5E5,0_6px_8px_-6px_rgba(0,0,0,0.15)]' : 'shadow-[inset_0_-1px_0_0_#E5E5E5]'"

package/src/components/TabularExplorer/types.ts

@@ -67,6 +67,16 @@ export type TabularTopValue = {
 
 export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean' | 'year'
 
+export type DateFilterOperator = 'is' | 'before' | 'after' | 'between'
+
+export type DateFilter = {
+  operator: DateFilterOperator
+  /** ISO calendar date (YYYY-MM-DD). */
+  start: string
+  /** ISO calendar date, the inclusive upper bound. Only set when `operator` is 'between'. */
+  end?: string
+}
+
 export type ColumnFilters = {
   in?: string[]
   exact?: string
@@ -74,6 +84,7 @@ export type ColumnFilters = {
   max?: number
   contains?: string
   null?: 'only' | 'exclude'
+  date?: DateFilter
 }
 
 export type SortDirection = 'asc' | 'desc'

package/src/functions/dates.ts

@@ -2,6 +2,26 @@ import { useTranslation } from '../composables/useTranslation'
 
 const SECONDS_IN_A_DAY = 3600 * 24
 
+/**
+ * `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.
+ */
+export const PLAIN_DATE = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/
+
+/**
+ * A date value read as the day it names. A plain date is built in local time, where no
+ * conversion can move it; anything else is an instant and keeps being read as one.
+ */
+export function parseDateValue(value: Date | string | null | undefined): Date | null {
+  if (!value) return null
+  const plain = typeof value === 'string' ? value.match(PLAIN_DATE) : null
+  const date = plain
+    ? new Date(Number(plain[1]), Number(plain[2] ?? 1) - 1, Number(plain[3] ?? 1))
+    : new Date(value)
+  return isNaN(date.getTime()) ? null : date
+}
+
 export function useFormatDate() {
   const { t, locale } = useTranslation()
 

package/src/functions/tabular.ts

@@ -1,4 +1,5 @@
 import type { Component } from 'vue'
+import { parseDate, type CalendarDate } from '@internationalized/date'
 import {
   RiHashtag,
   RiPriceTag3Line,
@@ -22,12 +23,74 @@ import {
 } from '@remixicon/vue'
 import { useTranslation } from '../composables/useTranslation'
 import type { TranslationFunction } from '../composables/useTranslation'
-import type { ColumnFilters, ColumnType } from '../components/TabularExplorer/types'
+import type { ColumnFilters, ColumnType, DateFilter } from '../components/TabularExplorer/types'
+import { parseDateValue } from './dates'
 
 export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
   const f = filters[column]
   if (!f) return false
-  return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null)
+  return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null || f.date)
+}
+
+// `initialFilters` is a public prop of TabularExplorer, so a filter can carry
+// anything a consumer put in it. An unparseable date is dropped rather than
+// thrown, the way a non-numeric `min` is already ignored by `Number.isFinite`.
+export function parseIsoDate(value: string | undefined): CalendarDate | null {
+  if (!value) return null
+  try {
+    return parseDate(value)
+  }
+  catch {
+    return null
+  }
+}
+
+/**
+ * The calendar day a cell of a date column falls on, as an ISO date, or null
+ * when the value is not one the API produced. Timestamps keep only their day:
+ * filtering a whole day is the useful reading of "filter by this value", where
+ * the exact millisecond would only ever match that one row.
+ */
+export function toIsoDay(value: unknown): string | null {
+  const day = String(value ?? '').slice(0, 10)
+  return parseIsoDate(day) ? day : null
+}
+
+/**
+ * The day interval a date filter selects, half-open: `[lower, upper)`.
+ * An absent bound means the interval is open on that side.
+ */
+function dateFilterBounds(filter: DateFilter): { lower: CalendarDate | null, upper: CalendarDate | null } {
+  const start = parseIsoDate(filter.start)
+  if (!start) return { lower: null, upper: null }
+  switch (filter.operator) {
+    case 'is':
+      return { lower: start, upper: start.add({ days: 1 }) }
+    case 'before':
+      return { lower: null, upper: start }
+    case 'after':
+      return { lower: start.add({ days: 1 }), upper: null }
+    case 'between': {
+      const end = parseIsoDate(filter.end)
+      return { lower: start, upper: end ? end.add({ days: 1 }) : null }
+    }
+  }
+}
+
+/**
+ * Query params for a date filter, as a half-open day interval.
+ *
+ * The same two operators cover `date` and `datetime` columns, which
+ * `resolveColumnType` merges into one display type. `__exact` would not: a
+ * timestamp is never equal to a bare day, so an exact filter silently matches
+ * nothing on a `datetime` column.
+ */
+export function buildDateFilterParams(column: string, filter: DateFilter): Record<string, string> {
+  const { lower, upper } = dateFilterBounds(filter)
+  const params: Record<string, string> = {}
+  if (lower) params[`${column}__greater`] = lower.toString()
+  if (upper) params[`${column}__strictly_less`] = upper.toString()
+  return params
 }
 
 export type TypeDisplay = {
@@ -148,8 +211,8 @@ export function useFormatTabular() {
 
   function formatCellDate(value: unknown): string {
     if (value == null || value === '') return '–'
-    const d = new Date(String(value))
-    if (Number.isNaN(d.getTime())) return String(value)
+    const d = parseDateValue(String(value))
+    if (!d) return String(value)
     return new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }).format(d)
   }