feat: new explorer

datagouv-components/src/components/InfiniteLoader.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="sentinel">
+    <slot>
+      <div class="flex items-center justify-center p-4">
+        <span class="inline-flex items-center gap-2 text-xs text-gray-medium">
+          <RiLoader4Line
+            class="size-4 animate-spin"
+            aria-hidden="true"
+          />
+          {{ t('Chargement…') }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { RiLoader4Line } from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+
+const props = defineProps<{
+  root?: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  intersect: []
+}>()
+
+const { t } = useTranslation()
+
+const sentinelRef = useTemplateRef<HTMLElement>('sentinel')
+let observer: IntersectionObserver | null = null
+
+function setupObserver() {
+  observer?.disconnect()
+  const el = sentinelRef.value
+  if (!el) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting) {
+        emit('intersect')
+      }
+    },
+    { root: props.root ?? null, rootMargin: '200px' },
+  )
+  observer.observe(el)
+}
+
+onMounted(setupObserver)
+watch([sentinelRef, () => props.root], setupObserver)
+onUnmounted(() => observer?.disconnect())
+</script>

datagouv-components/src/components/TabularExplorer/TabularCellPopover.vue

@@ -0,0 +1,172 @@
+<template>
+  <ClientOnly>
+    <Teleport to="#tooltips">
+      <div
+        v-if="cell"
+        ref="panel"
+        class="bg-white border border-black/10 rounded-lg shadow-md w-80 absolute z-[800]"
+        :style="floatingStyles"
+      >
+        <!-- Value -->
+        <div class="px-3 pt-3 pb-2 border-b border-[#E5E5E5]">
+          <p class="text-[10px] text-[#3A3A3A] mb-0">
+            {{ t('Valeur brute') }}
+          </p>
+          <p class="text-xs text-[#161616] mb-0">
+            {{ displayValue }}
+          </p>
+        </div>
+
+        <!-- Type -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-[#E5E5E5]">
+          <span class="text-[10px] text-[#3A3A3A]">{{ t('Type') }}</span>
+          <span class="inline-flex items-center gap-1 bg-[#f6f6f6] rounded px-1.5 py-0.5 text-xs text-[#3A3A3A]">
+            <component
+              :is="typeIcon"
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ typeLabel }}
+          </span>
+          <span class="text-[10px] text-[#3A3A3A] shrink-0">·</span>
+          <span class="text-[10px] text-[#3A3A3A] truncate min-w-0">{{ cell.column }}</span>
+        </div>
+
+        <!-- Actions -->
+        <div class="p-1">
+          <button
+            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
+              class="size-4"
+              aria-hidden="true"
+            />
+            {{ t('Filtrer par cette valeur') }}
+          </button>
+          <button
+            class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
+            @click="copyValue"
+          >
+            <RiFileCopyLine
+              class="size-4 text-[#3A3A3A]"
+              aria-hidden="true"
+            />
+            {{ t('Copier la valeur') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch, type Component as VueComponent } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import {
+  RiFilter2Line,
+  RiFileCopyLine,
+  RiHashtag,
+  RiPriceTag3Line,
+  RiText,
+  RiCalendarLine,
+  RiCheckboxLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import ClientOnly from '../ClientOnly.vue'
+import type { ColumnType, ColumnFilters } from './types'
+
+export interface CellInfo {
+  column: string
+  columnType: ColumnType
+  value: unknown
+  element: HTMLElement
+}
+
+const cell = defineModel<CellInfo | null>('cell', { default: null })
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+const panelRef = useTemplateRef<HTMLElement>('panel')
+const anchorRef = ref<HTMLElement | null>(null)
+
+watch(cell, (c) => {
+  anchorRef.value = c?.element ?? null
+})
+
+const { floatingStyles } = useFloating(anchorRef, panelRef, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+
+const displayValue = computed(() => {
+  if (!cell.value) return ''
+  const v = cell.value.value
+  if (v == null || v === '') return '–'
+  return String(v)
+})
+
+const typeConfig: Record<ColumnType, { icon: VueComponent, label: string }> = {
+  number: { icon: RiHashtag, label: 'Number' },
+  categorical: { icon: RiPriceTag3Line, label: 'Categorical' },
+  text: { icon: RiText, label: 'Text' },
+  date: { icon: RiCalendarLine, label: 'Date' },
+  boolean: { icon: RiCheckboxLine, label: 'Boolean' },
+}
+
+const typeIcon = computed(() => cell.value ? typeConfig[cell.value.columnType].icon : RiText)
+const typeLabel = computed(() => cell.value ? typeConfig[cell.value.columnType].label : '')
+
+function close() {
+  cell.value = null
+}
+
+function filterByValue() {
+  if (!cell.value) return
+  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') {
+    const current = existing.in ?? []
+    if (!current.includes(val)) {
+      filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }
+    }
+  }
+  else if (cell.value.columnType === 'number') {
+    const num = Number(cell.value.value)
+    if (Number.isFinite(num)) {
+      filters.value = { ...filters.value, [col]: { ...existing, min: num, max: num } }
+    }
+  }
+  close()
+}
+
+async function copyValue() {
+  try {
+    await navigator.clipboard.writeText(displayValue.value)
+  }
+  catch {
+    // Fallback silencieux
+  }
+  close()
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (!cell.value) return
+  const panel = panelRef.value
+  if (panel && panel.contains(e.target as Node)) return
+  // Don't close if clicking on the active cell's td (let the parent handle toggle)
+  const clickedTd = (e.target as HTMLElement).closest('td')
+  if (clickedTd && clickedTd === cell.value.element) return
+  close()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onClickOutside)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onClickOutside)
+})
+</script>