@datagouv/components-next 1.3.0 → 1.4.0

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') {
+  // 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/TabularColumnsMenu.vue

@@ -0,0 +1,112 @@
+<template>
+  <Popover
+    ref="columnAnchor"
+    v-slot="{ open }"
+    class="relative"
+  >
+    <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
+      <RiLayoutColumnLine
+        class="size-3"
+        aria-hidden="true"
+      />
+      <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
+      <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
+      <RiArrowDownSLine
+        class="size-3 opacity-50"
+        aria-hidden="true"
+      />
+    </PopoverButton>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <PopoverPanel
+          v-show="open"
+          ref="columnPanel"
+          static
+          class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
+          :style="columnFloatingStyles"
+        >
+          <div class="px-3 py-2 border-b border-gray-default space-y-1.5">
+            <span class="block text-xs font-medium text-gray-title">
+              {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
+            </span>
+            <div class="flex items-center gap-1">
+              <BrandedButton
+                v-if="hiddenCount"
+                color="tertiary"
+                size="2xs"
+                @click="showAllColumns"
+              >
+                {{ t('Tout afficher') }}
+              </BrandedButton>
+              <BrandedButton
+                v-if="visibleColumns.size > 0"
+                color="tertiary"
+                size="2xs"
+                @click="hideAllColumns"
+              >
+                {{ t('Tout masquer') }}
+              </BrandedButton>
+            </div>
+          </div>
+          <div class="max-h-64 overflow-auto p-1">
+            <div
+              v-for="col in allColumns"
+              :key="col"
+              class="group/col flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 text-xs"
+            >
+              <label class="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
+                <input
+                  type="checkbox"
+                  :checked="visibleColumns.has(col)"
+                  class="size-3.5 accent-new-primary"
+                  @change="toggleColumn(col)"
+                >
+                <span class="truncate">{{ col }}</span>
+              </label>
+              <button
+                class="shrink-0 px-1 text-new-primary hover:underline hidden group-hover/col:block group-focus-within/col:block"
+                @click="selectOnlyColumn(col)"
+              >
+                {{ t('Uniquement') }}
+              </button>
+            </div>
+          </div>
+        </PopoverPanel>
+      </Teleport>
+    </ClientOnly>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiArrowDownSLine, RiLayoutColumnLine } from '@remixicon/vue'
+import ClientOnly from '../ClientOnly.vue'
+import BrandedButton from '../BrandedButton.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+const { t } = useTranslation()
+const {
+  allColumns,
+  visibleColumns,
+  hiddenCount,
+  toggleColumn,
+  showAllColumns,
+  hideAllColumns,
+  selectOnlyColumn,
+} = useTabularContext()
+
+// The panel is teleported, so it's positioned against its trigger with floating-ui.
+const columnAnchor = useTemplateRef<InstanceType<typeof Popover>>('columnAnchor')
+const columnPanel = useTemplateRef<InstanceType<typeof PopoverPanel>>('columnPanel')
+const columnAnchorEl = computed(() => columnAnchor.value?.$el as HTMLElement | undefined)
+const columnPanelEl = computed(() => columnPanel.value?.$el as HTMLElement | undefined)
+const { floatingStyles: columnFloatingStyles } = useFloating(columnAnchorEl, columnPanelEl, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+</script>

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>