@datagouv/components-next 1.2.0 → 1.4.0

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -26,20 +26,22 @@
     <!-- Null filter with progress bar -->
     <div
       v-if="columnProfile && columnProfile.nb_missing_values > 0"
-      class="flex items-center gap-2 px-3 py-2 border-b border-black/10"
+      class="px-3 py-2 border-b border-black/10 space-y-1.5"
     >
-      <span class="text-xs text-gray-plain whitespace-nowrap">
-        <span class="font-mono tabular-nums">{{ columnProfile.nb_missing_values }}</span>
-        null
-        <span class="text-gray-low">({{ nullPercent }})</span>
-      </span>
-      <ProgressBar
-        :value="columnProfile.nb_missing_values"
-        :max="totalLines"
-        bar-class="bg-gray-low"
-        class="flex-1 !h-1.5 !min-w-0 !border-0 !bg-gray-default"
-      />
-      <div class="flex items-center gap-0.5">
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-gray-plain whitespace-nowrap">
+          <span class="font-mono tabular-nums">{{ columnProfile.nb_missing_values }}</span>
+          null
+          <span class="text-gray-low">({{ nullPercent }})</span>
+        </span>
+        <ProgressBar
+          :value="columnProfile.nb_missing_values"
+          :max="totalLines"
+          bar-class="bg-gray-low"
+          class="flex-1 !h-1.5 !min-w-0 !border-0 !bg-gray-default"
+        />
+      </div>
+      <div class="flex items-center justify-end gap-0.5">
         <BrandedButton
           :color="nullFilter === 'only' ? 'primary' : 'tertiary'"
           size="2xs"
@@ -59,8 +61,18 @@
       </div>
     </div>
 
+    <!-- Date filter -->
+    <TabularDateFilter
+      v-if="columnType === 'date'"
+      v-model:filters="filters"
+      :column="column"
+    />
+
     <!-- Search (contains) -->
-    <div class="px-3 py-2 border-b border-black/10">
+    <div
+      v-if="columnType !== 'boolean' && columnType !== 'date'"
+      class="px-3 py-2 border-b border-black/10"
+    >
       <div class="relative">
         <RiSearchLine
           class="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-gray-medium"
@@ -68,7 +80,7 @@
         />
         <input
           v-model="search"
-          type="text"
+          :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="t('Rechercher...')"
         >
@@ -98,14 +110,7 @@
           />
         </span>
         <span class="flex-1 truncate text-left text-xs">
-          <span
-            v-if="categoryBadgeStyles?.[top.value]"
-            class="inline-block rounded font-medium px-2 py-0.5 text-xs"
-            :style="{ backgroundColor: categoryBadgeStyles![top.value]!.backgroundColor, color: categoryBadgeStyles![top.value]!.color }"
-          >{{ top.value }}</span>
-          <template v-else>
-            {{ top.value ?? 'null' }}
-          </template>
+          {{ top.value ?? 'null' }}
         </span>
         <span class="font-mono text-xs text-gray-low tabular-nums shrink-0">{{ top.count }}</span>
       </button>
@@ -152,14 +157,14 @@
 
     <!-- Number range -->
     <form
-      v-if="columnType === 'number' && columnProfile"
+      v-if="(columnType === 'number' || columnType === 'year') && columnProfile"
       class="px-3 py-2 border-b border-black/10 space-y-2"
       @submit.prevent="applyRange"
     >
       <div class="flex items-center gap-2 text-xs text-gray-plain">
-        <span class="tabular-nums">{{ formatNumber(profileMin) }}</span>
+        <span class="tabular-nums">{{ columnType === 'year' ? profileMin : formatNumber(profileMin) }}</span>
         <span class="text-gray-medium">—</span>
-        <span class="tabular-nums">{{ formatNumber(profileMax) }}</span>
+        <span class="tabular-nums">{{ columnType === 'year' ? profileMax : formatNumber(profileMax) }}</span>
       </div>
       <div class="flex items-center gap-2">
         <input
@@ -182,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"
@@ -199,6 +197,13 @@
         >
           {{ t('Effacer') }}
         </BrandedButton>
+        <BrandedButton
+          color="primary"
+          size="2xs"
+          type="submit"
+        >
+          {{ t('Appliquer') }}
+        </BrandedButton>
       </div>
     </form>
   </div>
@@ -217,7 +222,8 @@ import { useTranslation } from '../../composables/useTranslation'
 import { useFormatTabular } from '../../functions/tabular'
 import BrandedButton from '../BrandedButton.vue'
 import ProgressBar from '../ProgressBar.vue'
-import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection, BadgeStyle } from './types'
+import TabularDateFilter from './TabularDateFilter.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection } from './types'
 
 const props = defineProps<{
   column: string
@@ -225,7 +231,6 @@ const props = defineProps<{
   columnProfile: TabularColumnProfile | null
   nullPercent: string
   totalLines: number
-  categoryBadgeStyles?: Record<string, BadgeStyle>
   booleanCounts?: { trueCount: number, falseCount: number }
 }>()
 
@@ -237,13 +242,18 @@ const { formatNumber } = useFormatTabular()
 
 const search = ref('')
 
+// 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 = isNumeric.value ? 'exact' : 'contains'
   if (q) {
-    filters.value = { ...filters.value, [props.column]: { ...existing, contains: q } }
+    filters.value = { ...filters.value, [props.column]: { ...existing, [operator]: q } }
   }
   else {
-    const { contains: _, ...rest } = existing
+    const { [operator]: _, ...rest } = existing
     filters.value = { ...filters.value, [props.column]: rest }
   }
 }, { debounce: 300 })

package/src/components/TabularExplorer/TabularFilterPopover.vue

@@ -1,27 +1,30 @@
 <template>
-  <div
+  <Popover
     ref="anchor"
+    v-slot="{ open }"
     class="relative shrink-0"
   >
-    <button
-      class="p-0.5 rounded focus:outline-none"
-      :class="hasColumnFilter ? 'bg-primary text-white' : 'hover:bg-gray-100'"
-      @click.stop="togglePopover"
+    <PopoverButton
+      class="flex size-5 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+      :class="open ? 'bg-new-primary/10' : 'hover:bg-gray-100'"
     >
-      <RiFilter2Line
-        class="size-3.5"
+      <RiFilterLine
+        class="size-4"
+        :class="open || hasColumnFilter ? 'text-new-primary' : 'text-gray-low'"
         aria-hidden="true"
       />
       <span class="sr-only">{{ t('Filtrer') }} {{ column }}</span>
-    </button>
+    </PopoverButton>
 
     <ClientOnly>
       <Teleport to="#tooltips">
-        <div
-          v-show="isOpen"
+        <PopoverPanel
+          v-show="open"
           ref="panel"
-          class="bg-white border border-black/10 rounded-lg shadow-md w-64 absolute z-[800]"
+          static
+          class="bg-white border border-black/10 rounded-lg shadow-md w-80 absolute z-[800]"
           :style="floatingStyles"
+          :data-testid="`column-filter-${column}`"
         >
           <!-- Title -->
           <div class="flex items-center justify-between px-3 py-2 border-b border-black/10">
@@ -47,26 +50,25 @@
             :column-profile="columnProfile"
             :null-percent="nullPercent"
             :total-lines="totalLines"
-            :category-badge-styles="categoryBadgeStyles"
             :boolean-counts="booleanCounts"
           />
-        </div>
+        </PopoverPanel>
       </Teleport>
     </ClientOnly>
-  </div>
+  </Popover>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
-import { onClickOutside } from '@vueuse/core'
-import { RiFilter2Line, RiCloseLine } from '@remixicon/vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiFilterLine, RiCloseLine } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { hasFilterForColumn as _hasFilterForColumn } from '../../functions/tabular'
 import BrandedButton from '../BrandedButton.vue'
 import ClientOnly from '../ClientOnly.vue'
 import TabularFilterContent from './TabularFilterContent.vue'
-import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, BadgeStyle } from './types'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig } from './types'
 
 const props = defineProps<{
   column: string
@@ -74,7 +76,6 @@ const props = defineProps<{
   columnProfile: TabularColumnProfile | null
   nullPercent: string
   totalLines: number
-  categoryBadgeStyles?: Record<string, BadgeStyle>
   booleanCounts?: { trueCount: number, falseCount: number }
 }>()
 
@@ -83,18 +84,12 @@ const filters = defineModel<Record<string, ColumnFilters>>('filters', { default:
 
 const { t } = useTranslation()
 
-const isOpen = ref(false)
-
-function togglePopover() {
-  isOpen.value = !isOpen.value
-}
-
-const anchorRef = useTemplateRef<HTMLElement>('anchor')
-const panelRef = useTemplateRef<HTMLElement>('panel')
-
-onClickOutside(panelRef, () => {
-  isOpen.value = false
-}, { ignore: [anchorRef] })
+// Headless UI Popover manages open state, Escape-to-close, outside-click,
+// focus handling and ARIA. floating-ui only positions the teleported panel.
+const anchorComponent = useTemplateRef<InstanceType<typeof Popover>>('anchor')
+const panelComponent = useTemplateRef<InstanceType<typeof PopoverPanel>>('panel')
+const anchorEl = computed(() => anchorComponent.value?.$el as HTMLElement | undefined)
+const panelEl = computed(() => panelComponent.value?.$el as HTMLElement | undefined)
 
 const hasColumnFilter = computed(() => _hasFilterForColumn(filters.value, props.column))
 
@@ -103,7 +98,7 @@ function clearColumnFilter() {
   filters.value = rest
 }
 
-const { floatingStyles } = useFloating(anchorRef, panelRef, {
+const { floatingStyles } = useFloating(anchorEl, panelEl, {
   placement: 'bottom-start',
   middleware: [flip(), shift()],
   whileElementsMounted: autoUpdate,

package/src/components/TabularExplorer/TabularMobileFilterButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <BrandedButton
+    color="tertiary"
+    size="2xs"
+    :icon="RiFilterLine"
+    keep-margins-even-without-borders
+    @click="mobileFilterOpen = true"
+  >
+    {{ t('Filtres & tri') }}
+  </BrandedButton>
+</template>
+
+<script setup lang="ts">
+import { RiFilterLine } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+const { t } = useTranslation()
+const { mobileFilterOpen } = useTabularContext()
+</script>

package/src/components/TabularExplorer/TabularMobileFilters.vue

@@ -0,0 +1,150 @@
+<template>
+  <TransitionRoot
+    :show="mobileFilterOpen"
+    as="template"
+  >
+    <Dialog
+      class="relative z-[900]"
+      @close="mobileFilterOpen = false"
+    >
+      <!-- Backdrop -->
+      <TransitionChild
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-black/30" />
+      </TransitionChild>
+      <!-- Panel -->
+      <TransitionChild
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="translate-y-full"
+        enter-to="translate-y-0"
+        leave="ease-in duration-200"
+        leave-from="translate-y-0"
+        leave-to="translate-y-full"
+      >
+        <div class="fixed inset-x-0 bottom-0 max-h-[80vh] flex flex-col bg-white rounded-t-2xl shadow-xl">
+          <DialogPanel class="flex flex-col max-h-[80vh]">
+            <div class="px-4 pt-4 pb-2 border-b border-gray-default">
+              <DialogTitle class="text-sm font-bold">
+                {{ t('Filtres & tri par colonne') }}
+              </DialogTitle>
+              <p class="text-xs text-gray-low">
+                {{ allColumns.length }} {{ t('colonnes') }} · {{ activeFilters.length }} {{ t('filtre') }}{{ activeFilters.length !== 1 ? 's' : '' }}
+              </p>
+            </div>
+            <!-- Column list -->
+            <div class="flex-1 overflow-y-auto">
+              <div
+                v-for="col in allColumns"
+                :key="col"
+                class="border-b border-gray-default last:border-b-0"
+              >
+                <button
+                  class="flex items-center gap-2 w-full px-3 py-2.5 text-left"
+                  :class="hasFilterForColumn(col) ? 'bg-new-primary/5' : ''"
+                  @click="toggleColumn(col)"
+                >
+                  <component
+                    :is="getColumnDisplay(col).icon"
+                    class="size-3.5 text-gray-low shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span class="flex-1 text-sm text-gray-title truncate">{{ col }}</span>
+                  <RiArrowUpLine
+                    v-if="sort?.column === col && sort.direction === 'asc'"
+                    class="size-3 text-new-primary shrink-0"
+                    aria-hidden="true"
+                  />
+                  <RiArrowDownLine
+                    v-if="sort?.column === col && sort.direction === 'desc'"
+                    class="size-3 text-new-primary shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span
+                    v-if="hasFilterForColumn(col)"
+                    class="size-2 rounded-full bg-new-primary shrink-0"
+                  />
+                  <RiArrowDownSLine
+                    class="size-3.5 text-gray-low shrink-0 transition-transform"
+                    :class="{ 'rotate-180': expandedCol === col }"
+                    aria-hidden="true"
+                  />
+                </button>
+                <div
+                  v-if="expandedCol === col"
+                  class="pb-1"
+                >
+                  <TabularFilterContent
+                    v-model:sort="sort"
+                    v-model:filters="filters"
+                    :column="col"
+                    :column-type="getColumnType(col)"
+                    :column-profile="getColumnProfile(col)"
+                    :null-percent="getNullPercent(col)"
+                    :total-lines="totalLines"
+                    :boolean-counts="getColumnType(col) === 'boolean' ? getBooleanCounts(col) : undefined"
+                  />
+                </div>
+              </div>
+            </div>
+            <!-- Reset all -->
+            <div
+              v-if="activeFilters.length > 0 || sort"
+              class="border-t border-gray-default px-4 py-3"
+            >
+              <BrandedButton
+                color="secondary"
+                size="xs"
+                class="w-full"
+                @click="clearAllFilters(); sort = null; mobileFilterOpen = false"
+              >
+                {{ t('Tout réinitialiser') }}
+              </BrandedButton>
+            </div>
+          </DialogPanel>
+        </div>
+      </TransitionChild>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { RiArrowDownLine, RiArrowDownSLine, RiArrowUpLine } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import TabularFilterContent from './TabularFilterContent.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+const { t } = useTranslation()
+const {
+  mobileFilterOpen,
+  allColumns,
+  activeFilters,
+  sort,
+  filters,
+  hasFilterForColumn,
+  clearAllFilters,
+  totalLines,
+  getColumnDisplay,
+  getColumnType,
+  getColumnProfile,
+  getNullPercent,
+  getBooleanCounts,
+} = useTabularContext()
+
+// The expanded column is local to the sheet.
+const expandedCol = ref<string | null>(null)
+
+function toggleColumn(col: string) {
+  expandedCol.value = expandedCol.value === col ? null : col
+}
+</script>

package/src/components/TabularExplorer/TabularRowsInfo.vue

@@ -0,0 +1,31 @@
+<template>
+  <span class="flex items-center gap-1.5 text-xs text-gray-plain">
+    <RiLoader5Line
+      v-if="isRefreshing"
+      class="size-3 text-new-primary animate-spin"
+      aria-hidden="true"
+    />
+    <RiLayoutRowLine
+      v-else
+      class="size-3 text-mention-grey"
+      aria-hidden="true"
+    />
+    <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
+    <!-- The count stays in place while refreshing: the spinner already says it is
+         stale, and swapping it for a word of another width would shift the whole
+         toolbar on every search. -->
+    <span
+      data-testid="row-count"
+      class="font-mono tabular-nums"
+    >{{ (tableData?.meta.total ?? 0).toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { RiLayoutRowLine, RiLoader5Line } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+const { t } = useTranslation()
+const { tableData, totalLines, isRefreshing } = useTabularContext()
+</script>

package/src/components/TabularExplorer/TabularSkeleton.vue

@@ -0,0 +1,92 @@
+<template>
+  <!-- Toolbar row — mirrors TabularToolbar: the mobile filter button on the left (it
+       only shows below md), and the columns menu (h-6 button, which drives the row
+       height) plus the rows info on the right. The active-filters area stays empty
+       until the user filters, so nothing stands in for it. -->
+  <div class="animate-pulse-placeholder flex shrink-0 items-center gap-2 border-b border-gray-default p-2">
+    <div class="h-6 w-24 rounded bg-gray-200 md:hidden" />
+    <div class="flex flex-1 items-center justify-end gap-4">
+      <div class="h-6 w-24 rounded bg-gray-200" />
+      <div class="h-5 w-24 rounded bg-gray-200" />
+    </div>
+  </div>
+
+  <!-- Table — mirrors TabularTable: tall header cells (name + type line) then rows.
+       Desktop only, like the real one. -->
+  <div
+    class="animate-pulse-placeholder hidden overflow-hidden md:block"
+    :class="fill ? 'min-h-0 flex-1' : 'max-h-[70vh]'"
+    role="status"
+    :aria-label="t('Chargement de l\'aperçu…')"
+  >
+    <table class="w-full table-fixed text-sm border-collapse">
+      <thead class="bg-gray-some shadow-[inset_0_-1px_0_0_#E5E5E5]">
+        <tr class="border-b border-gray-default">
+          <th
+            v-for="i in 6"
+            :key="i"
+            class="h-12 px-3 text-left align-middle border-r border-gray-default last:border-r-0"
+          >
+            <div class="flex items-center justify-between gap-1">
+              <div class="flex items-center gap-1">
+                <div class="size-4 shrink-0 rounded bg-gray-200" />
+                <div class="h-3.5 w-20 rounded bg-gray-200" />
+              </div>
+              <div class="size-4 shrink-0 rounded bg-gray-200" />
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="row in 16"
+          :key="row"
+          class="h-10 border-b border-gray-default even:bg-gray-lowest-2"
+        >
+          <td
+            v-for="col in 6"
+            :key="col"
+            class="px-2 align-middle border-r border-gray-default last:border-r-0"
+          >
+            <div class="h-3.5 w-3/4 rounded bg-gray-200" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Mobile — the real table becomes a list of cards below md, each showing four
+       fields until it is expanded. -->
+  <div
+    class="animate-pulse-placeholder space-y-2 px-1 md:hidden"
+    role="status"
+    :aria-label="t('Chargement de l\'aperçu…')"
+  >
+    <div
+      v-for="card in 4"
+      :key="card"
+      class="space-y-2 rounded-lg border border-gray-default p-3"
+      :class="card % 2 === 0 ? 'bg-gray-lowest-2' : 'bg-white'"
+    >
+      <div
+        v-for="field in 4"
+        :key="field"
+        class="flex flex-col gap-0.5"
+      >
+        <div class="h-3 w-24 rounded bg-gray-200" />
+        <div class="h-4 w-2/3 rounded bg-gray-200" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+
+defineProps<{
+  // Fill the available height (fullscreen) instead of the default capped height.
+  fill?: boolean
+}>()
+
+const { t } = useTranslation()
+</script>