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

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

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-BdrYl6mr.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.152",
+  "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

@@ -374,22 +374,38 @@
             <tr
               v-for="(row, i) in allRows"
               :key="row.__id ?? i"
-              class="border-b border-gray-default even:bg-gray-lowest-2 hover:bg-gray-100 cursor-pointer"
-              @click="emit('rowClick', row)"
+              class="border-b border-gray-default even:bg-gray-lowest-2 hover:bg-gray-100"
             >
               <td
                 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>
@@ -429,9 +445,8 @@
         <div
           v-for="(row, i) in allRows"
           :key="row.__id ?? i"
-          class="border border-gray-default rounded-lg p-3 space-y-2 cursor-pointer"
+          class="border border-gray-default rounded-lg p-3 space-y-2"
           :class="i % 2 === 1 ? 'bg-gray-lowest-2' : 'bg-white'"
-          @click="emit('rowClick', row)"
         >
           <div
             v-for="col in mobileVisibleFields(i)"
@@ -454,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>
@@ -618,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'
@@ -637,8 +666,10 @@ 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 text columns using the Tabular API's
-  // or(...) parameter. Each text/varchar column gets a __contains filter.
+  // 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
@@ -648,11 +679,23 @@ const props = defineProps<{
   // 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 emit = defineEmits<{
-  rowClick: [row: TabularRow]
-}>()
+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()
@@ -712,8 +755,8 @@ const dataQuery = computed(() => {
     }
   }
   if (props.globalSearch && profileData.value?.profile) {
-    const textCols = allColumns.value.filter(c => getColumnType(c) === 'text')
-    q.or = '(' + textCols.map(c => c + '__contains.' + encodeURIComponent(props.globalSearch!)).join(',') + ')'
+    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
+    q.or = '(' + conditions.join(',') + ')'
   }
   return q
 })

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,7 +62,7 @@ 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[]

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())