@datagouv/components-next 1.2.0 → 1.4.0

package/src/components/Search/GlobalSearch.vue

@@ -6,7 +6,6 @@
   >
     <div
       v-if="!hideSearchInput"
-      ref="search"
       class="flex flex-wrap items-center justify-between"
       data-cy="search"
     >
@@ -228,6 +227,7 @@
               size="sm"
               :icon="RiRssLine"
               icon-only
+              external
               target="_blank"
             />
           </div>
@@ -266,7 +266,7 @@
                       name="reuse"
                       :reuse="result"
                     >
-                      <ReuseHorizontalCard :reuse="(result as Reuse)" />
+                      <ReuseHorizontalCard :reuse="(result as ReuseV2)" />
                     </slot>
                   </template>
                   <template v-else-if="currentTypeConfig?.class === 'organizations'">
@@ -356,6 +356,7 @@
 <script setup lang="ts">
 import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Component, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
+import { useRoute } from 'vue-router'
 import { RiBookShelfLine, RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
 import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
 import { useTranslation } from '../../composables/useTranslation'
@@ -364,11 +365,12 @@ import { configKey, forEachActiveCustomFilter, isCustomFilterActive, searchFilte
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
+import { scrollToBlockTop } from '../../functions/scroll'
 import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
 import type { Organization } from '../../types/organizations'
-import type { Reuse } from '../../types/reuses'
+import type { ReuseV2 } from '../../types/reuses'
 import type { TopicV2 } from '../../types/topics'
 import type { GlobalSearchConfig, SearchResponseByClass, SearchType, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'
@@ -422,6 +424,7 @@ if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class
 
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
+const route = useRoute()
 
 // Custom filter registry for useSearchFilter composable
 const customFilterRegistry = shallowReactive(new Map<string, CustomFilterEntry>())
@@ -549,20 +552,34 @@ const allFilters: Record<string, Ref<unknown>> = {
   type: reuseType,
 }
 
-// Reset sort and filters when changing type if they're not valid for the new type
+// Reset page, sort and filters when changing type. Every reset below goes
+// through useRouteQuery, so VueUse coalesces them into a single router.replace
+// (its shared _queriesQueue flushes once on nextTick). Custom filters are cleared
+// here too, rather than in useSearchFilter's onunmount, so their URL change joins
+// that same batch instead of racing it with a separate router.replace.
 watch(currentType, () => {
+  // page=1 is the default and is dropped from the URL, so only reset when needed.
+  if (page.value !== 1) page.value = 1
+
   // Reset sort if not valid
   const validSortValues = activeSortOptions.value.map(o => o.value as string)
   if (sort.value && !validSortValues.includes(sort.value)) {
     sort.value = undefined
   }
 
-  // Reset filters that are not enabled for the new type
+  // Reset built-in filters that are not enabled for the new type
   for (const [filterName, filterRef] of Object.entries(allFilters)) {
     if (filterRef.value !== undefined && !activeFilters.value.includes(filterName)) {
       filterRef.value = undefined
     }
   }
+
+  // Reset type-scoped custom filters that don't apply to the new type
+  for (const entry of customFilterRegistry.values()) {
+    if (entry.typeKeys && !entry.typeKeys.includes(currentType.value) && isCustomFilterActive(entry)) {
+      entry.ref.value = entry.defaultValue
+    }
+  }
 })
 
 // Create stable params for each type
@@ -782,14 +799,15 @@ function getFacets(key: string): FacetItem[] | undefined {
 }
 
 // Scroll handling
-const searchRef = useTemplateRef('search')
+const resultsRef = useTemplateRef('results')
 
-function scrollToTop() {
-  searchRef.value?.scrollIntoView({ behavior: 'smooth' })
-}
+// Every criteria lives in the URL, custom filters included, so watching the
+// query covers them all: whenever the result list is replaced, bring its top
+// back into view rather than leaving the reader in the middle of a list they
+// have not seen yet.
+watch(() => route.query, () => scrollToBlockTop(resultsRef.value))
 
 function changePage(newPage: number) {
   page.value = newPage
-  scrollToTop()
 }
 </script>

package/src/components/Search/SearchInput.vue

@@ -12,7 +12,7 @@
       v-model="q"
       type="search"
       name="q"
-      class="input max-h-12 m-0 rounded-tl shadow-input-blue"
+      class="input flex-1 max-h-12 m-0 rounded-tl shadow-input-blue"
       :aria-label="placeholder === null ? t('Rechercher...') : placeholder ?? t('Rechercher...')"
       :placeholder="placeholder === null ? undefined : placeholder ?? t('Rechercher...')"
     >

package/src/components/Search/Sidemenu.vue

@@ -11,7 +11,10 @@
         :class="{ 'rotate-180': open }"
       />
     </button>
-    <div v-if="open || !isMobile">
+    <!-- Collapsing with CSS rather than `v-if` on a JS media query: the server has no
+         viewport, so it always renders the desktop state and a narrow client would drop
+         the whole panel during hydration. -->
+    <div :class="{ 'hidden md:block': !open }">
       <p
         :id="titleId"
         class="text-sm font-bold leading-tight mb-6 hidden md:block"
@@ -26,13 +29,11 @@
 <script setup lang="ts">
 import { ref, useId } from 'vue'
 import { RiArrowDownSLine } from '@remixicon/vue'
-import { useMediaQuery } from '@vueuse/core'
 
 defineProps<{
   buttonText: string
 }>()
 
 const titleId = useId()
-const isMobile = useMediaQuery('(max-width: 767px)')
 const open = ref(false)
 </script>

package/src/components/SmallChart.vue

@@ -11,10 +11,16 @@
       class="flex flex-wrap justify-between"
     >
       <p class="text-[0.625rem] m-0 text-gray-medium">
-        {{ startDate }}
+        <FormattedDate
+          :date="startDate"
+          :options="{ dateStyle: undefined, year: '2-digit', month: '2-digit' }"
+        />
       </p>
       <p class="text-[0.625rem] m-0 text-gray-medium">
-        {{ endDate }}
+        <FormattedDate
+          :date="endDate"
+          :options="{ dateStyle: undefined, year: '2-digit', month: '2-digit' }"
+        />
       </p>
     </div>
   </div>
@@ -24,6 +30,7 @@
 import type { ChartOptions, ScriptableLineSegmentContext } from 'chart.js'
 import Chart from 'chart.js/auto'
 import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+import FormattedDate from './FormattedDate.vue'
 
 const LIGHT_COLOR = '#B6CFFB'
 const COLOR = '#3558A2'
@@ -107,14 +114,8 @@ const additionalDatasetConfig = computed<{
   return {}
 })
 
-const getMonthYear = (dateAsString: string): string => {
-  const date = new Date(dateAsString)
-
-  return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear().toString().slice(-2)}`
-}
-
-const startDate = computed(() => months.value.length ? getMonthYear(months.value[0]!) : null)
-const endDate = computed(() => months.value.length ? getMonthYear(months.value[months.value.length - 1]!) : null)
+const startDate = computed(() => months.value[0] ?? null)
+const endDate = computed(() => months.value[months.value.length - 1] ?? null)
 
 const OPTIONS = {
   // @ts-expect-error animation can be `true` but the typing is not expecting it

package/src/components/StatBox.vue

@@ -65,14 +65,20 @@
         class="mt-1 mb-0 text-xs"
       >
         {{ t("depuis ") }}
-        {{ formatDate(since, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+        <FormattedDate
+          :date="since"
+          :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+        />
       </p>
       <p class="mt-1 mb-0 text-xs text-success-darkest">
         <strong>
           + {{ summarize(lastValue, 2) }}
         </strong>
         {{ t(" en ") }}
-        {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+        <FormattedDate
+          :date="lastMonth"
+          :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+        />
       </p>
     </template>
   </div>
@@ -146,7 +152,10 @@
         + {{ summarize(lastValue, 2) }}
       </strong>
       {{ t(" en ") }}
-      {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+      <FormattedDate
+        :date="lastMonth"
+        :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+      />
     </p>
   </div>
 </template>
@@ -154,7 +163,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { ContentLoader } from 'vue-content-loader'
-import { useFormatDate } from '../functions/dates'
+import FormattedDate from './FormattedDate.vue'
 import { summarize } from '../functions/helpers'
 import { useTranslation } from '../composables/useTranslation'
 import SmallChart from './SmallChart.vue'
@@ -169,7 +178,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 
 const months = computed(() => props.data ? Object.keys(props.data) : [])
 const values = computed(() => props.data ? Object.values(props.data) : [])

package/src/components/TabularExplorer/TabularActiveFilters.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="activeFilters.length > 0 || sort"
+    class="flex flex-wrap items-center gap-1.5"
+  >
+    <!-- Sort chip -->
+    <span
+      v-if="sort"
+      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+    >
+      <component
+        :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="font-medium">{{ sort.column }}</span>
+      <span>{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
+      <button
+        :aria-label="t('Supprimer le tri')"
+        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+        @click="sort = null"
+      >
+        <RiCloseLine
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </span>
+
+    <!-- Filter chips -->
+    <span
+      v-for="af in activeFilters"
+      :key="af.column"
+      :data-testid="`active-filter-${af.column}`"
+      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+    >
+      <component
+        :is="getColumnDisplay(af.column).icon"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="font-medium">{{ af.column }}</span>
+      <span>{{ af.label }}</span>
+      <button
+        :aria-label="t('Supprimer ce filtre')"
+        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+        @click="removeFilter(af.column)"
+      >
+        <RiCloseLine
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </span>
+
+    <!-- Clear all -->
+    <BrandedButton
+      v-if="withClear"
+      color="tertiary"
+      size="2xs"
+      :icon="RiCloseLine"
+      @click="clearAllFilters(); sort = null"
+    >
+      {{ t('Tout effacer') }}
+    </BrandedButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiArrowDownLine, RiArrowUpLine, RiCloseLine } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+defineProps<{ withClear?: boolean }>()
+
+const { t } = useTranslation()
+const { activeFilters, sort, removeFilter, clearAllFilters, getColumnDisplay } = useTabularContext()
+</script>

package/src/components/TabularExplorer/TabularCell.vue

@@ -17,16 +17,15 @@
   </span>
   <span
     v-else-if="columnType === 'categorical'"
-    class="inline-block rounded font-medium px-2 py-0.5 text-xs max-w-full truncate"
-    :style="categoryBadgeStyle ? { backgroundColor: categoryBadgeStyle.backgroundColor, color: categoryBadgeStyle.color } : undefined"
+    class="inline-block max-w-full truncate rounded bg-gray-lower px-2 py-0.5 text-xs text-gray-plain"
   >{{ value }}</span>
   <span
-    v-else-if="columnType === 'number'"
-    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
-  >{{ formatNumber(value) }}</span>
+    v-else-if="columnType === 'number' || columnType === 'year'"
+    :class="compact ? 'font-mono tabular-nums text-xs' : ''"
+  >{{ columnType === 'year' || noNumberFormat ? value : formatNumber(value) }}</span>
   <span
     v-else-if="columnType === 'date'"
-    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+    :class="compact ? 'font-mono tabular-nums text-xs' : ''"
   >{{ formatCellDate(value) }}</span>
   <span
     v-else
@@ -37,13 +36,13 @@
 <script setup lang="ts">
 import { useTranslation } from '../../composables/useTranslation'
 import { useFormatTabular, isTruthy } from '../../functions/tabular'
-import type { ColumnType, BadgeStyle } from './types'
+import type { ColumnType } from './types'
 
 defineProps<{
   value: unknown
   columnType: ColumnType
-  categoryBadgeStyle?: BadgeStyle
   compact?: boolean
+  noNumberFormat?: boolean
 }>()
 
 const { t } = useTranslation()

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>
@@ -38,7 +41,7 @@
             class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
             @click="filterByValue"
           >
-            <RiFilter2Line
+            <RiFilterLine
               class="size-4"
               aria-hidden="true"
             />
@@ -71,13 +74,13 @@ import { computed, ref, useTemplateRef, watch } from 'vue'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { onClickOutside } from '@vueuse/core'
 import {
-  RiFilter2Line,
+  RiFilterLine,
   RiFileCopyLine,
   RiCheckLine,
 } 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>