@datagouv/components-next 1.0.2-dev.141 → 1.0.2-dev.143

package/dist/{vue3-xml-viewer.common-Cpui-Yi9.js → vue3-xml-viewer.common-DFRPttwN.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-BU6kP4dE.js";
+import { g as Ke } from "./main-BpmTmbJK.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.141",
+  "version": "1.0.2-dev.143",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/ReuseCard.vue

@@ -68,7 +68,7 @@ import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { useFormatDate } from '../functions/dates'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
 import AppLink from './AppLink.vue'
@@ -77,7 +77,7 @@ import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
 
 const props = withDefaults(defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 
   /**
   * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.

package/src/components/ReuseDetails.vue

@@ -32,11 +32,11 @@
 import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import { useReuseType } from '../composables/useReuseType'
 import { summarize } from '../functions/helpers'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 }>()
 
 const { t } = useTranslation()

package/src/components/ReuseHorizontalCard.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { RiArchiveLine, RiLineChartLine, RiLockLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
@@ -71,7 +71,7 @@ import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 
 defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
   reuseUrl?: RouteLocationRaw
   organizationUrl?: RouteLocationRaw
 }>()

package/src/components/Search/GlobalSearch.vue

@@ -266,7 +266,7 @@
                       name="reuse"
                       :reuse="result"
                     >
-                      <ReuseHorizontalCard :reuse="(result as Reuse)" />
+                      <ReuseHorizontalCard :reuse="(result as ReuseV2)" />
                     </slot>
                   </template>
                   <template v-else-if="currentTypeConfig?.class === 'organizations'">
@@ -368,7 +368,7 @@ import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
 import type { Organization } from '../../types/organizations'
-import type { Reuse } from '../../types/reuses'
+import type { ReuseV2 } from '../../types/reuses'
 import type { TopicV2 } from '../../types/topics'
 import type { GlobalSearchConfig, SearchResponseByClass, SearchType, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -597,6 +597,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
+import { useElementSize } from '@vueuse/core'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import {
@@ -832,18 +833,43 @@ function redistributeColumnWidths() {
   columnWidths.value = widths
 }
 
-// Measure once both data and profile are ready (so the <thead> is rendered with
-// content-driven natural widths), then distribute.
+// Measure the natural widths once (the <th> must still be auto-sized) and
+// distribute them. No-op once measured or while no column is displayed.
+function ensureMeasured() {
+  if (Object.keys(naturalWidths.value).length > 0) return
+  if (displayedColumns.value.length === 0) return
+  measureNaturalWidths()
+  redistributeColumnWidths()
+}
+
+// Drive measurement and re-stretch off the container's reactive width
+// (`useElementSize` wraps a ResizeObserver and disconnects it on unmount). The
+// width goes 0 -> N once the table is laid out in the DOM, which is also when
+// the <thead> carries its content-driven natural widths: the first non-zero
+// width measures the stable base, later changes (window resize) only
+// redistribute it.
+const { width: containerWidth } = useElementSize(scrollContainerRef)
+
+watch(containerWidth, (width) => {
+  if (width === 0) return
+  if (Object.keys(naturalWidths.value).length === 0) {
+    ensureMeasured()
+  }
+  else {
+    redistributeColumnWidths()
+  }
+})
+
+// Fallback: re-run once columns appear if they weren't available when the
+// container was first sized (standalone usage where the profile resolves late).
 watch(
   () => [tableData.value !== null, displayedColumns.value.length] as const,
   async ([dataReady, colCount]) => {
     if (!dataReady || colCount === 0) return
     if (Object.keys(naturalWidths.value).length > 0) return
     await nextTick()
-    measureNaturalWidths()
-    redistributeColumnWidths()
+    ensureMeasured()
   },
-  { immediate: true },
 )
 
 // Re-stretch the remaining columns whenever the displayed set changes (columns

package/src/functions/resources.ts

@@ -105,14 +105,29 @@ export const getResourceLabel = (type: ResourceType, count?: number) => {
       }
       return t('Fichiers principaux')
     case 'documentation':
+      if (typeof count === 'number') {
+        return t('Aucun fichier de documentation | 1 fichier de documentation | {n} fichiers de documentation', count)
+      }
       return t('Documentation')
     case 'update':
+      if (typeof count === 'number') {
+        return t('Aucune mise à jour | 1 mise à jour | {n} mises à jour', count)
+      }
       return t('Mise à jour')
     case 'api':
+      if (typeof count === 'number') {
+        return t('Aucune API | 1 API | {n} API', count)
+      }
       return t('API')
     case 'code':
+      if (typeof count === 'number') {
+        return t('Aucun fichier de code source | 1 fichier de code source | {n} fichiers de code source', count)
+      }
       return t('Code source')
     case 'other':
+      if (typeof count === 'number') {
+        return t('Aucun autre fichier | 1 autre fichier | {n} autres fichiers', count)
+      }
       return t('Autre')
   }
 }

package/src/main.ts

@@ -15,7 +15,7 @@ import type { Owned, OwnedWithFullObject, OwnedWithId } from './types/owned'
 import type { Comment, Thread } from './types/discussions'
 import type { PageBloc, ContentBloc, BlocWithTitle, DatasetsListBloc, DataservicesListBloc, ReusesListBloc, LinkInBloc, LinksListBloc, MarkdownBloc, AccordionItemBloc, AccordionListBloc, HeroBloc } from './types/pages'
 import type { Post } from './types/posts'
-import type { ReuseReference, NewReuse, Reuse, ReuseTopic, ReuseType } from './types/reuses'
+import type { ReuseReference, NewReuse, Reuse, ReuseV2, ReuseTopic, ReuseType } from './types/reuses'
 import type { RegisteredSchema, Schema, SchemaDetails, SchemaField, SchemaPath, SchemaPublicationMode, SchemaResponseData, SchemaVersion, ValidataError } from './types/schemas'
 import type { TopicV2, TopicElement, TopicElementClass, TopicElementRel } from './types/topics'
 import type { CommunityResource, FileResourceFileType, RemoteResourceFileType, ResourceFileType, ResourceGroup, ResourceType, Resource } from './types/resources'
@@ -228,6 +228,7 @@ export type {
   ResourceType,
   ReuseReference,
   Reuse,
+  ReuseV2,
   ReuseTopic,
   ReuseType,
   Schema,

package/src/types/reuses.ts

@@ -1,5 +1,5 @@
 import type { Owned, OwnedWithId } from './owned'
-import type { Dataset } from './datasets'
+import type { Dataset, Rel } from './datasets'
 import type { Badges } from './badges'
 import type { Dataservice } from './dataservices'
 
@@ -51,6 +51,17 @@ export type Reuse = BaseReuse & {
   permissions: { edit: boolean, delete: boolean }
 }
 
+/**
+ * Lightweight reuse returned by the listing endpoints (`/api/2/reuses/` and
+ * `/api/2/reuses/search/`): the `datasets` and `dataservices` reference lists
+ * are replaced by links to their respective listing endpoints filtered on this
+ * reuse, so that listing reuses does not dereference every linked dataset.
+ */
+export type ReuseV2 = Owned & Omit<Reuse, 'datasets' | 'dataservices'> & {
+  datasets: Rel
+  dataservices: Rel
+}
+
 export type ReuseType = {
   id: string
   label: string

package/src/types/search.ts

@@ -4,7 +4,7 @@ import type { AccessType } from './access_types'
 import type { Dataset } from './datasets'
 import type { Dataservice } from './dataservices'
 import type { Organization } from './organizations'
-import type { Reuse } from './reuses'
+import type { ReuseV2 } from './reuses'
 import type { TopicV2 } from './topics'
 import type {
   CERTIFIED,
@@ -372,7 +372,7 @@ export type GlobalSearchConfig = SearchTypeConfig[]
 export type SearchResponseByClass = {
   datasets: DatasetSearchResponse<Dataset>
   dataservices: DataserviceSearchResponse<Dataservice>
-  reuses: ReuseSearchResponse<Reuse>
+  reuses: ReuseSearchResponse<ReuseV2>
   organizations: OrganizationSearchResponse<Organization>
   topics: TopicSearchResponse<TopicV2>
 }