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

package/src/components/TabularExplorer/TabularFilterPopover.vue

@@ -0,0 +1,106 @@
+<template>
+  <Popover
+    ref="anchor"
+    v-slot="{ open }"
+    class="relative shrink-0"
+  >
+    <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'"
+    >
+      <RiFilterLine
+        class="size-4"
+        :class="open || hasColumnFilter ? 'text-new-primary' : 'text-gray-low'"
+        aria-hidden="true"
+      />
+      <span class="sr-only">{{ t('Filtrer') }} {{ column }}</span>
+    </PopoverButton>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <PopoverPanel
+          v-show="open"
+          ref="panel"
+          static
+          class="bg-white border border-black/10 rounded-lg shadow-md w-64 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">
+            <p class="text-sm font-medium mb-0">
+              {{ t('Filtrer') }} : {{ column }}
+            </p>
+            <BrandedButton
+              v-if="hasColumnFilter"
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearColumnFilter"
+            >
+              {{ t('Effacer') }}
+            </BrandedButton>
+          </div>
+
+          <TabularFilterContent
+            v-model:sort="sort"
+            v-model:filters="filters"
+            :column="column"
+            :column-type="columnType"
+            :column-profile="columnProfile"
+            :null-percent="nullPercent"
+            :total-lines="totalLines"
+            :boolean-counts="booleanCounts"
+          />
+        </PopoverPanel>
+      </Teleport>
+    </ClientOnly>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/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 } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+// 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))
+
+function clearColumnFilter() {
+  const { [props.column]: _, ...rest } = filters.value
+  filters.value = rest
+}
+
+const { floatingStyles } = useFloating(anchorEl, panelEl, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+</script>

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>