@datagouv/components-next 1.0.2-dev.18 → 1.0.2-dev.180

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

@@ -0,0 +1,50 @@
+<template>
+  <span
+    v-if="value == null || value === ''"
+    class="font-[Inconsolata,monospace] text-gray-low italic"
+    :class="compact ? 'text-xs' : 'text-sm'"
+  >null</span>
+  <span
+    v-else-if="columnType === 'boolean'"
+    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs"
+    :class="isTruthy(value) ? 'bg-new-success-light text-new-success' : 'bg-new-warning-light text-new-error'"
+  >
+    <span
+      class="size-2 rounded-full"
+      :class="isTruthy(value) ? 'bg-new-success' : 'bg-new-error'"
+    />
+    {{ isTruthy(value) ? t('Vrai') : t('Faux') }}
+  </span>
+  <span
+    v-else-if="columnType === 'categorical'"
+    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' || 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' : ''"
+  >{{ formatCellDate(value) }}</span>
+  <span
+    v-else
+    class="text-gray-title truncate block text-xs"
+  >{{ typeof value === 'object' ? JSON.stringify(value) : value }}</span>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular, isTruthy } from '../../functions/tabular'
+import type { ColumnType } from './types'
+
+defineProps<{
+  value: unknown
+  columnType: ColumnType
+  compact?: boolean
+  noNumberFormat?: boolean
+}>()
+
+const { t } = useTranslation()
+const { formatNumber, formatCellDate } = useFormatTabular()
+</script>

package/src/components/TabularExplorer/TabularCellPopover.vue

@@ -0,0 +1,170 @@
+<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-gray-default">
+          <p class="text-[10px] text-gray-plain mb-0">
+            {{ t('Valeur brute') }}
+          </p>
+          <p class="text-xs text-gray-title mb-0">
+            {{ displayValue }}
+          </p>
+        </div>
+
+        <!-- Type -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-gray-default">
+          <span class="text-[10px] text-gray-plain">{{ t('Type') }}</span>
+          <span class="inline-flex items-center gap-1 bg-gray-some rounded px-1.5 py-0.5 text-xs text-gray-plain">
+            <component
+              :is="typeIcon"
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ typeLabel }}
+          </span>
+          <span class="text-[10px] text-gray-plain shrink-0">·</span>
+          <span class="text-[10px] text-gray-plain 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"
+          >
+            <RiFilterLine
+              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"
+          >
+            <RiCheckLine
+              v-if="copied"
+              class="size-4 text-green-500"
+              aria-hidden="true"
+            />
+            <RiFileCopyLine
+              v-else
+              class="size-4 text-gray-plain"
+              aria-hidden="true"
+            />
+            {{ copied ? t('Copié !') : t('Copier la valeur') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import {
+  RiFilterLine,
+  RiFileCopyLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { toast } from 'vue-sonner'
+import { useTranslation } from '../../composables/useTranslation'
+import { buildTypeConfig } from '../../functions/tabular'
+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 '–'
+  if (typeof v === 'object') return JSON.stringify(v)
+  return String(v)
+})
+
+const typeConfig = buildTypeConfig(t)
+
+const typeIcon = computed(() => cell.value ? typeConfig[cell.value.columnType].icon : typeConfig.text.icon)
+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' || cell.value.columnType === 'date' || cell.value.columnType === 'year') {
+    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 } }
+    }
+  }
+  else if (cell.value.columnType === 'boolean') {
+    filters.value = { ...filters.value, [col]: { ...existing, exact: val } }
+  }
+  close()
+}
+
+const copied = ref(false)
+
+async function copyValue() {
+  try {
+    await navigator.clipboard.writeText(displayValue.value)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 1500)
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
+}
+
+onClickOutside(panelRef, (e) => {
+  if (!cell.value) return
+  const clickedCell = (e.target as HTMLElement).closest('[data-cell]')
+  if (clickedCell && clickedCell === cell.value.element) return
+  close()
+})
+</script>

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>