@datagouv/components-next 1.0.2-dev.195 → 1.0.2-dev.197

package/dist/{vue3-xml-viewer.common-AEbzQxXP.js → vue3-xml-viewer.common-IPjY1Ugx.js}

@@ -1,24 +1,24 @@
-import { g as Ke } from "./main-B3IzELg_.js";
+import { g as Ke } from "./main-J2uwmRv6.js";
 import We from "vue";
-function Fe($, K) {
+function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {
     const p = K[V];
     if (typeof p != "string" && !Array.isArray(p)) {
       for (const X in p)
-        if (X !== "default" && !(X in $)) {
+        if (X !== "default" && !(X in I)) {
           const _ = Object.getOwnPropertyDescriptor(p, X);
-          _ && Object.defineProperty($, X, _.get ? _ : {
+          _ && Object.defineProperty(I, X, _.get ? _ : {
             enumerable: !0,
             get: () => p[X]
           });
         }
     }
   }
-  return Object.freeze(Object.defineProperty($, Symbol.toStringTag, { value: "Module" }));
+  return Object.freeze(Object.defineProperty(I, Symbol.toStringTag, { value: "Module" }));
 }
 var Y = { exports: {} }, ee;
 function ze() {
-  return ee || (ee = 1, (function($) {
+  return ee || (ee = 1, (function(I) {
     (function() {
       var K = {
         /***/
@@ -426,7 +426,7 @@ function ze() {
           default: function() {
             return (
               /* binding */
-              $e
+              Ie
             );
           }
         }), typeof window < "u") {
@@ -466,7 +466,7 @@ function ze() {
           class: "bracket"
         }, ">", -1));
         function G(o, v, g, E, h, b) {
-          const y = (0, e.resolveComponent)("CaretDown"), S = (0, e.resolveComponent)("CaretRight"), I = (0, e.resolveComponent)("XmlElementName"), Q = (0, e.resolveComponent)("XmlAttributeLine"), q = (0, e.resolveComponent)("XmlElement", !0), B = (0, e.resolveComponent)("XmlElementContent"), je = (0, e.resolveComponent)("XmlCDataSection"), Ue = (0, e.resolveComponent)("XmlRemark");
+          const y = (0, e.resolveComponent)("CaretDown"), S = (0, e.resolveComponent)("CaretRight"), $ = (0, e.resolveComponent)("XmlElementName"), Q = (0, e.resolveComponent)("XmlAttributeLine"), q = (0, e.resolveComponent)("XmlElement", !0), B = (0, e.resolveComponent)("XmlElementContent"), je = (0, e.resolveComponent)("XmlCDataSection"), Ue = (0, e.resolveComponent)("XmlRemark");
           return (0, e.openBlock)(), (0, e.createElementBlock)("div", r, [(0, e.createElementVNode)("div", null, [o.selfClosing ? (0, e.createCommentVNode)("", !0) : ((0, e.openBlock)(), (0, e.createElementBlock)(e.Fragment, {
             key: 0
           }, [o.collapsed ? ((0, e.openBlock)(), (0, e.createBlock)(S, {
@@ -477,7 +477,7 @@ function ze() {
             key: 0,
             class: "caret",
             onClick: o.toggleCollapsed
-          }, null, 8, ["onClick"]))], 64)), u, (0, e.createVNode)(I, {
+          }, null, 8, ["onClick"]))], 64)), u, (0, e.createVNode)($, {
             class: "clickable",
             name: o.name,
             onClick: o.toggleCollapsed
@@ -496,7 +496,7 @@ function ze() {
           }, null, 8, ["cdataSection"]))), 128)), ((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.remarks, (L, N) => ((0, e.openBlock)(), (0, e.createBlock)(Ue, {
             key: `r${N}`,
             remark: L
-          }, null, 8, ["remark"]))), 128))])])), !o.selfClosing && !o.collapsed ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", w, [O, (0, e.createVNode)(I, {
+          }, null, 8, ["remark"]))), 128))])])), !o.selfClosing && !o.collapsed ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", w, [O, (0, e.createVNode)($, {
             name: o.name,
             closing: !0
           }, null, 8, ["name"]), f])) : (0, e.createCommentVNode)("", !0)]);
@@ -549,8 +549,8 @@ function ze() {
         var c = /* @__PURE__ */ (0, M.A)(d, [["render", m], ["__scopeId", "data-v-75f773a5"]]);
         function D(o, v, g, E, h, b) {
           const y = (0, e.resolveComponent)("XmlAttribute");
-          return (0, e.openBlock)(), (0, e.createElementBlock)("span", null, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.attributes, (S, I) => ((0, e.openBlock)(), (0, e.createBlock)(y, {
-            key: I,
+          return (0, e.openBlock)(), (0, e.createElementBlock)("span", null, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.attributes, (S, $) => ((0, e.openBlock)(), (0, e.createBlock)(y, {
+            key: $,
             attribute: S
           }, null, 8, ["attribute"]))), 128))]);
         }
@@ -705,12 +705,12 @@ function ze() {
             node: Element
           },
           setup(o) {
-            const v = (0, e.ref)(!1), g = (0, e.computed)(() => o.node.nodeName), E = (0, e.computed)(() => Array.from(o.node.childNodes)), h = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 1)), b = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 3)), y = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 4)), S = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 8)), I = (0, e.computed)(() => o.node.attributes && Array.from(o.node.attributes) || []), Q = !h.value.length && !b.value.length && !y.value.length && !S.value.length;
+            const v = (0, e.ref)(!1), g = (0, e.computed)(() => o.node.nodeName), E = (0, e.computed)(() => Array.from(o.node.childNodes)), h = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 1)), b = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 3)), y = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 4)), S = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 8)), $ = (0, e.computed)(() => o.node.attributes && Array.from(o.node.attributes) || []), Q = !h.value.length && !b.value.length && !y.value.length && !S.value.length;
             return {
               name: g,
               childElements: h,
               childContents: b,
-              attributes: I,
+              attributes: $,
               cdataSections: y,
               remarks: S,
               selfClosing: Q,
@@ -744,8 +744,8 @@ function ze() {
               rootNode: g
             };
           }
-        }), Ve = /* @__PURE__ */ (0, M.A)(Ne, [["render", t]]), Ie = Ve, $e = Ie;
-      })(), $.exports = X;
+        }), Ve = /* @__PURE__ */ (0, M.A)(Ne, [["render", t]]), $e = Ve, Ie = $e;
+      })(), I.exports = X;
     })();
   })(Y)), Y.exports;
 }

package/package.json

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

package/src/components/LoadingBlock.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="relative">
     <div :class="{ 'opacity-50 min-h-64': loading }">
+      <!-- Keep the previous content while reloading, dimmed under the loader:
+           dropping it collapses the page height, which makes the browser clamp
+           the scroll and throws the reader back to the top. -->
       <slot
-        v-if="!loading && !hasError && data"
+        v-if="!hasError && data"
         :data="data"
       />
       <slot

package/src/components/Pagination.vue

@@ -104,6 +104,7 @@ import { computed, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
 import { useTranslation } from '../composables/useTranslation'
 import { clampPage, getVisiblePages } from '../functions/paginate'
+import { scrollToBlockTop } from '../functions/scroll'
 
 type Props = {
   /**
@@ -141,10 +142,7 @@ const nav = useTemplateRef('navRef')
 function change(index: number) {
   emit('change', index)
 
-  if (!nav.value || !nav.value.parentElement) return
-
-  nav.value.parentElement.style.scrollMarginTop = '100px'
-  nav.value.parentElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  scrollToBlockTop(nav.value?.parentElement)
 }
 
 function onClick(index: number) {

package/src/components/Search/GlobalSearch.vue

@@ -6,7 +6,6 @@
   >
     <div
       v-if="!hideSearchInput"
-      ref="search"
       class="flex flex-wrap items-center justify-between"
       data-cy="search"
     >
@@ -357,6 +356,7 @@
 <script setup lang="ts">
 import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Component, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
+import { useRoute } from 'vue-router'
 import { RiBookShelfLine, RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
 import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
 import { useTranslation } from '../../composables/useTranslation'
@@ -365,6 +365,7 @@ import { configKey, forEachActiveCustomFilter, isCustomFilterActive, searchFilte
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
+import { scrollToBlockTop } from '../../functions/scroll'
 import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
@@ -423,6 +424,7 @@ if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class
 
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
+const route = useRoute()
 
 // Custom filter registry for useSearchFilter composable
 const customFilterRegistry = shallowReactive(new Map<string, CustomFilterEntry>())
@@ -797,14 +799,15 @@ function getFacets(key: string): FacetItem[] | undefined {
 }
 
 // Scroll handling
-const searchRef = useTemplateRef('search')
+const resultsRef = useTemplateRef('results')
 
-function scrollToTop() {
-  searchRef.value?.scrollIntoView({ behavior: 'smooth' })
-}
+// Every criteria lives in the URL, custom filters included, so watching the
+// query covers them all: whenever the result list is replaced, bring its top
+// back into view rather than leaving the reader in the middle of a list they
+// have not seen yet.
+watch(() => route.query, () => scrollToBlockTop(resultsRef.value))
 
 function changePage(newPage: number) {
   page.value = newPage
-  scrollToTop()
 }
 </script>

package/src/components/TabularExplorer/types.ts

@@ -24,25 +24,28 @@ export type TabularProfileResponse = {
   indexes: null
 }
 
+// Only CSV resources go through csv-detective: for the other formats the API
+// indexes (parquet…), the profile is reduced to the column names, their types
+// and the row count. Everything csv-detective produces is therefore optional.
 export type TabularProfile = {
   header: string[]
   columns: Record<string, TabularColumnInfo>
-  formats: Record<string, string[]>
-  profile: Record<string, TabularColumnProfile>
-  encoding: string
-  separator: string
-  categorical: string[]
   total_lines: number
-  nb_duplicates: number
-  columns_fields: Record<string, TabularColumnInfo>
-  columns_labels: Record<string, TabularColumnInfo>
-  header_row_idx: number
-  heading_columns: number
-  trailing_columns: number
+  formats?: Record<string, string[]>
+  profile?: Record<string, TabularColumnProfile>
+  encoding?: string
+  separator?: string
+  categorical?: string[]
+  nb_duplicates?: number
+  columns_fields?: Record<string, TabularColumnInfo>
+  columns_labels?: Record<string, TabularColumnInfo>
+  header_row_idx?: number
+  heading_columns?: number
+  trailing_columns?: number
 }
 
 export type TabularColumnInfo = {
-  score: number
+  score?: number
   format: string
   python_type: string
 }

package/src/components/TabularExplorer/useColumnMetadata.ts

@@ -38,7 +38,7 @@ export function useColumnMetadata(
     if (!profile) return 'text'
     const colInfo = profile.columns[col]
     if (!colInfo) return 'text'
-    return resolveColumnType(colInfo, profile.categorical.includes(col))
+    return resolveColumnType(colInfo, profile.categorical?.includes(col) ?? false)
   }
 
   const columnTypesMap = computed<Record<string, ColumnType>>(() => {

package/src/functions/charts.ts

@@ -72,13 +72,13 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
 export function buildColumnsFromProfile(profile: { profile: TabularProfile }): Array<ColumnDefinition> {
   return profile.profile.header.map((name) => {
     const colInfo = profile.profile.columns[name]
-    const isCategorical = profile.profile.categorical.includes(name)
+    const isCategorical = profile.profile.categorical?.includes(name) ?? false
     // The chart stack only branches on 'number' and 'date' (continuous axis,
     // aggregatable series, time formatting): it has no notion of a year column,
     // and on an axis a year is a number.
     const resolvedType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
     const colType = resolvedType === 'year' ? 'number' : resolvedType
-    const colProfile = profile.profile.profile[name]
+    const colProfile = profile.profile.profile?.[name]
     return {
       name,
       type: colType,

package/src/functions/scroll.ts

@@ -0,0 +1,20 @@
+// Leaves room for the sticky elements sitting at the top of the viewport.
+const SCROLL_MARGIN = 100
+
+/**
+ * Bring the top of a block back into view after its content changed (paging,
+ * searching, filtering), so the reader restarts at the first result.
+ *
+ * Does nothing when the top of the block is already on screen: aligning the
+ * viewport on a block the reader is already looking at moves the page under
+ * them for no reason.
+ */
+export function scrollToBlockTop(block: HTMLElement | null | undefined) {
+  if (!block) return
+
+  const { top } = block.getBoundingClientRect()
+  if (top >= 0 && top <= window.innerHeight) return
+
+  block.style.scrollMarginTop = `${SCROLL_MARGIN}px`
+  block.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}