@datagouv/components-next 1.0.2-dev.153 → 1.0.2-dev.154

package/dist/{vue3-xml-viewer.common-9Hozz8ne.js → vue3-xml-viewer.common-omEYjVTS.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-CWzZZ7OE.js";
+import { g as Ke } from "./main-B4HZYPjy.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.153",
+  "version": "1.0.2-dev.154",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/TabularExplorer/TabularCell.vue

@@ -20,6 +20,10 @@
     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"
   >{{ value }}</span>
+  <span
+    v-else-if="columnType === 'number' && noNumberFormat"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ value }}</span>
   <span
     v-else-if="columnType === 'number'"
     :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
@@ -28,6 +32,10 @@
     v-else-if="columnType === 'date'"
     :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
   >{{ formatCellDate(value) }}</span>
+  <span
+    v-else-if="columnType === 'year'"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ value }}</span>
   <span
     v-else
     class="text-gray-title truncate block text-xs"
@@ -44,6 +52,7 @@ defineProps<{
   columnType: ColumnType
   categoryBadgeStyle?: BadgeStyle
   compact?: boolean
+  noNumberFormat?: boolean
 }>()
 
 const { t } = useTranslation()

package/src/components/TabularExplorer/TabularCellPopover.vue

@@ -128,7 +128,7 @@ 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') {
+  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] } }

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -63,6 +63,7 @@
            ExploreResourceView), so they line up with the resource title /
            download button above. Only the table itself goes edge-to-edge
            (via -mx-4 below). -->
+      <slot name="toolbar-top" />
       <div>
         <div class="flex items-center py-3 gap-2">
           <!-- Mobile: filter & sort button -->
@@ -379,15 +380,32 @@
                 v-for="col in displayedColumns"
                 :key="col"
                 data-cell
-                class="p-2 align-middle whitespace-nowrap border-r border-gray-default last:border-r-0 overflow-hidden cursor-pointer hover:bg-gray-200/50"
-                :class="{ 'text-right font-mono tabular-nums text-sm': getColumnType(col) === 'number' || getColumnType(col) === 'date' }"
+                class="p-2 align-middle whitespace-nowrap border-r border-gray-default last:border-r-0 overflow-hidden"
+                :class="[
+                  !props.disablePopover && 'cursor-pointer',
+                  { 'text-right font-mono tabular-nums text-sm': getColumnType(col) === 'number' || getColumnType(col) === 'date' || getColumnType(col) === 'year' },
+                ]"
                 :style="columnWidths[col] ? { maxWidth: columnWidths[col] + 'px' } : { maxWidth: '300px' }"
                 @click="onCellClick(col, row[col], $event)"
               >
+                <a
+                  v-if="linkColumns?.has(col)"
+                  :href="getRowHref(row) ?? ''"
+                  class="link"
+                >
+                  <TabularCell
+                    :value="row[col]"
+                    :column-type="getColumnType(col)"
+                    :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
+                    :no-number-format="props.noFormatColumns?.includes(col)"
+                  />
+                </a>
                 <TabularCell
+                  v-else
                   :value="row[col]"
                   :column-type="getColumnType(col)"
                   :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
+                  :no-number-format="props.noFormatColumns?.includes(col)"
                 />
               </td>
             </tr>
@@ -402,6 +420,7 @@
 
       <!-- Cell popover -->
       <TabularCellPopover
+        v-if="!props.disablePopover"
         v-model:cell="activeCell"
         v-model:filters="filters"
       />
@@ -450,11 +469,25 @@
               class="min-w-0 pl-4 cursor-pointer"
               @click="onCellClick(col, row[col], $event)"
             >
+              <a
+                v-if="linkColumns?.has(col)"
+                :href="getRowHref(row) ?? ''"
+              >
+                <TabularCell
+                  :value="row[col]"
+                  :column-type="getColumnType(col)"
+                  :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
+                  compact
+                  :no-number-format="props.noFormatColumns?.includes(col)"
+                />
+              </a>
               <TabularCell
+                v-else
                 :value="row[col]"
                 :column-type="getColumnType(col)"
                 :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
                 compact
+                :no-number-format="props.noFormatColumns?.includes(col)"
               />
             </div>
           </div>
@@ -614,7 +647,7 @@ import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { injectTabularProfile } from '../../composables/useTabularProfile'
-import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType } from '../../functions/tabular'
+import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType, buildGlobalSearchConditions } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import BrandedButton from '../BrandedButton.vue'
@@ -633,8 +666,37 @@ const props = defineProps<{
   // the host's padding. Used on the standalone explore page where the table
   // should span the whole screen while the toolbar stays inside the container.
   fullBleed?: boolean
+  // When set, searches across multiple columns using the Tabular API's or(...)
+  // parameter. Text and categorical columns get a __contains filter; number
+  // columns get a __exact filter (since __contains is not supported for numbers
+  // by the API). Date and boolean columns are excluded.
+  // Note: combined via AND with any existing column-specific `contains` filters,
+  // so it acts as an additional narrowing constraint, not a replacement.
+  globalSearch?: string
+  // When true, clicking a cell does not open the popover. Use when row-click
+  // navigation is the primary interaction.
+  disablePopover?: boolean
+  // Initial filters applied on mount, e.g. { 'Administration': { contains: 'Ministère' } }.
+  // Used when navigating from the detail page badge with query params.
+  initialFilters?: Record<string, ColumnFilters>
+  // When set, renders <a> tags inside the specified column cells for native
+  // browser UX (hover URL, ctrl+click, middle-click).
+  rowHref?: { columns: string[], href: (row: TabularRow) => string }
+  // Columns listed here render their values raw (no number formatting).
+  // Useful for identifier columns.
+  noFormatColumns?: string[]
 }>()
 
+const rowHrefFn = computed(() => props.rowHref?.href ?? null)
+
+function getRowHref(row: TabularRow): string | null {
+  return rowHrefFn.value?.(row) ?? null
+}
+
+const linkColumns = computed(() =>
+  props.rowHref ? new Set(props.rowHref.columns) : null,
+)
+
 const { t } = useTranslation()
 const config = useComponentsConfig()
 
@@ -658,6 +720,10 @@ const dataUrl = computed(() =>
 const sort = ref<SortConfig | null>(null)
 const filters = ref<Record<string, ColumnFilters>>({})
 
+if (props.initialFilters) {
+  filters.value = { ...props.initialFilters }
+}
+
 const PAGE_SIZE = 50
 
 const dataQuery = computed(() => {
@@ -688,6 +754,10 @@ const dataQuery = computed(() => {
       q[`${col}__isnotnull`] = ''
     }
   }
+  if (props.globalSearch && profileData.value?.profile) {
+    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
+    q.or = '(' + conditions.join(',') + ')'
+  }
   return q
 })
 
@@ -938,6 +1008,7 @@ onUnmounted(() => {
 const activeCell = ref<CellInfo | null>(null)
 
 function onCellClick(col: string, value: unknown, event: MouseEvent) {
+  if (props.disablePopover) return
   const el = (event.target as HTMLElement).closest('[data-cell]') as HTMLElement | null
   if (!el) return
   if (activeCell.value && activeCell.value.element === el) {
@@ -961,7 +1032,12 @@ const activeFilters = computed<ActiveFilter[]>(() => {
       parts.push(`= ${filter.in.join(', ')}`)
     }
     if (filter.exact != null) {
-      parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
+      if (getColumnType(col) === 'boolean') {
+        parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
+      }
+      else {
+        parts.push(`= ${filter.exact}`)
+      }
     }
     if (filter.contains) {
       parts.push(`${t('contient')} "${filter.contains}"`)

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -154,14 +154,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

package/src/components/TabularExplorer/types.ts

@@ -62,13 +62,13 @@ export type TabularTopValue = {
   count: number
 }
 
-export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
+export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean' | 'year'
 
 export type ColumnFilters = {
   in?: string[]
   exact?: string
-  min?: number
-  max?: number
+  min?: number | string
+  max?: number | string
   contains?: string
   null?: 'only' | 'exclude'
 }

package/src/functions/tabular.ts

@@ -42,12 +42,13 @@ export function buildTypeConfig(t: TranslationFunction): Record<ColumnType, Type
     text: { icon: RiText, label: t('Texte') },
     date: { icon: RiCalendarLine, label: t('Date') },
     boolean: { icon: RiCheckboxLine, label: t('Booléen') },
+    year: { icon: RiCalendarLine, label: t('Année') },
   }
 }
 
 export function resolveColumnType(colInfo: { python_type: string, format?: string }, isCategorical: boolean): ColumnType {
+  if (colInfo.format === 'year') return 'year'
   if (['int', 'float'].includes(colInfo.python_type)) return 'number'
-  if (colInfo.format === 'year') return 'date'
   if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
   if (colInfo.python_type === 'bool') return 'boolean'
   if (isCategorical) return 'categorical'
@@ -158,6 +159,30 @@ export function useFormatTabular() {
 const TRUTHY_VALUES = ['true', '1', 'oui', 'yes']
 const FALSY_VALUES = ['false', '0', 'non', 'no']
 
+/**
+ * Builds the OR conditions for global search across all columns.
+ * Text and categorical columns get a `__contains` filter; number columns
+ * get a `__exact` filter only when the search value is numeric.
+ * Date and boolean columns are excluded.
+ */
+export function buildGlobalSearchConditions(
+  allColumns: string[],
+  getColumnType: (col: string) => ColumnType,
+  searchValue: string,
+): string[] {
+  const conditions: string[] = []
+  for (const col of allColumns) {
+    const type = getColumnType(col)
+    if (type === 'text' || type === 'categorical') {
+      conditions.push(col + '__contains.' + encodeURIComponent(searchValue))
+    }
+    else if (type === 'number' && searchValue.length > 0 && isFinite(Number(searchValue))) {
+      conditions.push(col + '__exact.' + encodeURIComponent(searchValue))
+    }
+  }
+  return conditions
+}
+
 export function isTruthy(value: unknown): boolean {
   if (typeof value === 'boolean') return value
   if (typeof value === 'string') return TRUTHY_VALUES.includes(value.toLowerCase())