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

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

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-B4HZYPjy.js";
+import { g as Ke } from "./main-B3yaCPy_.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.154",
+  "version": "1.0.2-dev.155",
   "private": false,
   "type": "module",
   "engines": {
@@ -31,7 +31,7 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/router": "^14.3.0",
     "chart.js": "^4.5.1",
-    "dompurify": "^3.4.7",
+    "dompurify": "^3.4.11",
     "echarts": "^6.1.0",
     "geopf-extensions-openlayers": "1.0.0-beta.11",
     "leaflet": "^1.9.4",

package/src/components/TabularExplorer/TabularCell.vue

@@ -20,10 +20,6 @@
     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' : ''"
@@ -32,10 +28,6 @@
     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"
@@ -52,7 +44,6 @@ 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' || cell.value.columnType === 'year') {
+  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'date') {
     const current = existing.in ?? []
     if (!current.includes(val)) {
       filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -63,7 +63,6 @@
            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 -->
@@ -380,32 +379,15 @@
                 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"
-                :class="[
-                  !props.disablePopover && 'cursor-pointer',
-                  { 'text-right font-mono tabular-nums text-sm': getColumnType(col) === 'number' || getColumnType(col) === 'date' || getColumnType(col) === 'year' },
-                ]"
+                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' }"
                 :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>
@@ -420,7 +402,6 @@
 
       <!-- Cell popover -->
       <TabularCellPopover
-        v-if="!props.disablePopover"
         v-model:cell="activeCell"
         v-model:filters="filters"
       />
@@ -469,25 +450,11 @@
               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>
@@ -647,7 +614,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, buildGlobalSearchConditions } from '../../functions/tabular'
+import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import BrandedButton from '../BrandedButton.vue'
@@ -666,37 +633,8 @@ 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()
 
@@ -720,10 +658,6 @@ 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(() => {
@@ -754,10 +688,6 @@ 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
 })
 
@@ -1008,7 +938,6 @@ 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) {
@@ -1032,12 +961,7 @@ const activeFilters = computed<ActiveFilter[]>(() => {
       parts.push(`= ${filter.in.join(', ')}`)
     }
     if (filter.exact != null) {
-      if (getColumnType(col) === 'boolean') {
-        parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
-      }
-      else {
-        parts.push(`= ${filter.exact}`)
-      }
+      parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
     }
     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' || columnType === 'year') && columnProfile"
+      v-if="columnType === 'number' && 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">{{ columnType === 'year' ? profileMin : formatNumber(profileMin) }}</span>
+        <span class="tabular-nums">{{ formatNumber(profileMin) }}</span>
         <span class="text-gray-medium">—</span>
-        <span class="tabular-nums">{{ columnType === 'year' ? profileMax : formatNumber(profileMax) }}</span>
+        <span class="tabular-nums">{{ 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' | 'year'
+export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
 
 export type ColumnFilters = {
   in?: string[]
   exact?: string
-  min?: number | string
-  max?: number | string
+  min?: number
+  max?: number
   contains?: string
   null?: 'only' | 'exclude'
 }

package/src/functions/tabular.ts

@@ -42,13 +42,12 @@ 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'
@@ -159,30 +158,6 @@ 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())