@datagouv/components-next 1.0.2-dev.218 → 1.0.2-dev.219

package/dist/{vue3-xml-viewer.common-BdDsD8kK.js → vue3-xml-viewer.common-C1QomD0e.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-hDFmYneb.js";
+import { g as Ke } from "./main-HU94LBny.js";
 import We from "vue";
 function Fe(I, 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.218",
+  "version": "1.0.2-dev.219",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/TabularExplorer/TabularCellPopover.vue

@@ -80,7 +80,7 @@ import {
 } from '@remixicon/vue'
 import { toast } from 'vue-sonner'
 import { useTranslation } from '../../composables/useTranslation'
-import { buildTypeConfig, toIsoDay } from '../../functions/tabular'
+import { buildCellValueFilter, buildTypeConfig } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import type { ColumnType, ColumnFilters } from './types'
 
@@ -128,36 +128,10 @@ function close() {
 
 function filterByValue() {
   if (!cell.value) return
-  const val = String(cell.value.value ?? '')
   const col = cell.value.column
-  const existing = filters.value[col] ?? {}
-  // A date goes through the same `date` filter the column panel writes, so the
-  // calendar opens on the day that was clicked instead of on an empty month.
-  if (cell.value.columnType === 'date') {
-    const day = toIsoDay(cell.value.value)
-    if (day) {
-      filters.value = { ...filters.value, [col]: { ...existing, date: { operator: 'is', start: day } } }
-    }
-    // An empty cell has no day to select: filtering on the missing values is
-    // what "this value" means there, and the panel shows it as such.
-    else if (cell.value.value == null || cell.value.value === '') {
-      filters.value = { ...filters.value, [col]: { ...existing, null: 'only' } }
-    }
-  }
-  else if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || 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 } }
+  filters.value = {
+    ...filters.value,
+    [col]: buildCellValueFilter(cell.value.columnType, cell.value.value, filters.value[col] ?? {}),
   }
   close()
 }

package/src/functions/tabular.ts

@@ -93,6 +93,39 @@ export function buildDateFilterParams(column: string, filter: DateFilter): Recor
   return params
 }
 
+/**
+ * The filter "filter by this value" sets on a column for the cell that was
+ * clicked, merged into the filters already set on that column.
+ *
+ * An empty cell holds no value to match on: whatever the column type, filtering
+ * on the missing values is what "this value" means there — and it is the filter
+ * the column panel offers for them.
+ */
+export function buildCellValueFilter(columnType: ColumnType, value: unknown, existing: ColumnFilters): ColumnFilters {
+  if (value == null || value === '') return { ...existing, null: 'only' }
+  switch (columnType) {
+    // A date goes through the same `date` filter the column panel writes, so the
+    // calendar opens on the day that was clicked instead of on an empty month.
+    case 'date': {
+      const day = toIsoDay(value)
+      return day ? { ...existing, date: { operator: 'is', start: day } } : existing
+    }
+    case 'number': {
+      const num = Number(value)
+      return Number.isFinite(num) ? { ...existing, min: num, max: num } : existing
+    }
+    case 'boolean':
+      return { ...existing, exact: String(value) }
+    case 'categorical':
+    case 'text':
+    case 'year': {
+      const val = String(value)
+      const selected = existing.in ?? []
+      return selected.includes(val) ? existing : { ...existing, in: [...selected, val] }
+    }
+  }
+}
+
 export type TypeDisplay = {
   icon: Component
   label: string