@datagouv/components-next 1.0.2-dev.230 → 1.0.2-dev.232

package/src/components/ResourceAccordion/EditButton.vue

@@ -4,8 +4,7 @@
     icon-only
     :icon="RiPencilLine"
     color="warning"
-    :disabled="!!disabledReason"
-    :title="disabledReason ?? t('Éditer le fichier')"
+    :title="t('Éditer le fichier')"
     data-testid="edit-button"
   />
 </template>
@@ -20,12 +19,10 @@ type Props = {
   datasetId: string
   isCommunityResource?: boolean
   resourceId: string
-  disabledReason?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isCommunityResource: false,
-  disabledReason: null,
 })
 
 const { t } = useTranslation()

package/src/components/ResourceAccordion/MapContainer.client.vue

@@ -15,6 +15,15 @@ import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 
+type WmsCapabilitiesLayer = { Name: string }
+
+type LayerImportInternals = {
+  _serviceUrlImportInput: HTMLInputElement
+  _formContainer: HTMLFormElement
+  _getCapResponseWMSLayers: Array<WmsCapabilitiesLayer> | null
+  _addGetCapWMSLayer: (layerInfo: WmsCapabilitiesLayer | undefined) => void
+}
+
 const props = defineProps<{ resource: Resource }>()
 
 const { t } = useTranslation()
@@ -38,7 +47,6 @@ async function displayMap() {
     import('ol/control/ScaleLine'),
     import('ol/layer/Tile'),
     import('ol/source/OSM'),
-    // @ts-expect-error no types provided
     import('geopf-extensions-openlayers'),
   ])
 
@@ -94,12 +102,16 @@ async function displayMap() {
   map.addControl(attributions)
 
   const layerImport = new LayerImport({
+    // @ts-expect-error `position` is handled by the base control but missing from the published types
     position: 'bottom-left',
     listable: true,
     layerTypes: ['WMS'],
   })
-  layerImport._serviceUrlImportInput.value = props.resource.url
-  layerImport._formContainer.dispatchEvent(new CustomEvent('submit', { cancelable: true }))
+  // LayerImport has no public API to load a service URL: we fill and submit its form,
+  // then add the resource's layer once the GetCapabilities response is parsed.
+  const layerImportInternals = layerImport as unknown as LayerImportInternals
+  layerImportInternals._serviceUrlImportInput.value = props.resource.url
+  layerImportInternals._formContainer.dispatchEvent(new CustomEvent('submit', { cancelable: true }))
 
   map.addControl(layerImport)
 
@@ -108,7 +120,7 @@ async function displayMap() {
   const waitTimeout = 500
   let retry = 20
   function showLayer() {
-    if (!layerImport._getCapResponseWMSLayers) {
+    if (!layerImportInternals._getCapResponseWMSLayers) {
       retry--
       if (retry > 0)
         setTimeout(showLayer, waitTimeout)
@@ -116,9 +128,8 @@ async function displayMap() {
         hasError.value = true
     }
     else {
-      // @ts-expect-error no typing from library
-      const layerInfo = layerImport._getCapResponseWMSLayers.filter(layer => layer.Name == props.resource.title)[0]
-      layerImport._addGetCapWMSLayer(layerInfo)
+      const layerInfo = layerImportInternals._getCapResponseWMSLayers.filter(layer => layer.Name == props.resource.title)[0]
+      layerImportInternals._addGetCapWMSLayer(layerInfo)
     }
   }
   setTimeout(showLayer, waitTimeout)

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -173,7 +173,6 @@
             :dataset-id="dataset.id"
             :resource-id="resource.id"
             :is-community-resource="isCommunityResource"
-            :disabled-reason="editDisabledReason"
             size="xs"
           />
         </p>
@@ -328,7 +327,7 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceFilesize, isGeopfSynced, isImagePreviewFormat, resolveResourceExternalUrl } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceFilesize, isImagePreviewFormat, resolveResourceExternalUrl } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
@@ -385,10 +384,6 @@ const hasPmtiles = computed(() => {
   return props.resource.extras['analysis:parsing:pmtiles_url'] || props.resource.format === 'pmtiles'
 })
 
-const editDisabledReason = computed(() => {
-  return isGeopfSynced(props.resource) ? t('Vous ne pouvez pas modifier cette ressource car elle est synchronisée avec cartes.gouv.fr') : null
-})
-
 const hasDatafairPreview = computed(() => {
   // Checks if there are the corresponding extras for a datafair preview.
   // Limited only to datasets published by certified organizations since it will load an iframe.

package/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -14,8 +14,13 @@
       class="flex"
       :class="fullscreen ? 'min-h-0 flex-1 overflow-hidden' : 'overflow-hidden rounded border border-gray-default'"
     >
-      <div class="hidden md:flex">
+      <div
+        class="hidden md:flex"
+        :class="resourceListExpanded ? 'flex-1' : ''"
+      >
         <ResourceExplorerSidebar
+          v-model:expanded="resourceListExpanded"
+          :dataset
           :groups
           :selected-resource-id="selectedResource?.id ?? null"
           :collapsed="sidebarCollapsed"
@@ -31,7 +36,7 @@
       <div
         id="resource-explorer-viewer"
         class="flex-1 min-w-0"
-        :class="fullscreen ? 'flex flex-col' : ''"
+        :class="[fullscreen ? 'flex flex-col' : '', resourceListExpanded ? 'md:hidden' : '']"
         role="region"
         :aria-label="t('Détail de la ressource')"
       >
@@ -154,6 +159,7 @@ const {
 watch(selectedResource, resource => emit('select', resource), { immediate: true })
 
 const sidebarCollapsed = ref(false)
+const resourceListExpanded = ref(false)
 
 const resourceTo = (resource: Resource): RouteLocationRaw => ({
   query: { ...route.query, resource_id: resource.id },

package/src/components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -1,134 +1,183 @@
 <template>
-  <aside
-    class="relative flex shrink-0 flex-col overflow-hidden border-r border-gray-default bg-white"
-    :class="resizing ? '' : 'transition-[width] duration-200'"
-    :style="{ width: collapsed ? '48px' : `${width}px` }"
-    :aria-label="t('Ressources')"
+  <!-- The resize grip sits outside the aside: it straddles the border, and the
+       aside's overflow-hidden would clip its outer half. -->
+  <div
+    class="relative flex"
+    :class="expanded ? 'flex-1' : 'shrink-0'"
   >
-    <div
-      class="flex h-14 items-center border-b border-gray-default bg-gray-some px-3"
-      :class="collapsed ? 'justify-center' : 'justify-between'"
+    <!-- Expanded, the list takes the viewer's place (the explorer hides the viewer). -->
+    <aside
+      class="flex flex-col overflow-hidden bg-white"
+      :class="[
+        expanded ? 'flex-1' : 'shrink-0 border-r border-gray-default',
+        resizing ? '' : 'transition-[width] duration-200',
+      ]"
+      :style="expanded ? undefined : { width: collapsed ? '48px' : `${width}px` }"
+      :aria-label="t('Ressources')"
     >
-      <span
-        v-if="!collapsed"
-        class="text-[13px] font-medium text-gray-title"
-      >{{ t('Ressources') }}</span>
-      <button
-        type="button"
-        :title="collapsed ? t('Afficher le panneau des ressources') : t('Masquer le panneau')"
-        class="flex size-6 items-center justify-center rounded text-gray-plain hover:bg-gray-100"
-        @click="$emit('update:collapsed', !collapsed)"
+      <div
+        class="flex h-14 items-center border-b border-gray-default bg-gray-some px-3"
+        :class="collapsed ? 'justify-center' : 'justify-between'"
       >
-        <component
-          :is="collapsed ? RiSidebarUnfoldLine : RiSidebarFoldLine"
-          class="size-5"
-        />
-      </button>
-    </div>
+        <span
+          v-if="!collapsed"
+          class="text-[14px] font-medium text-gray-title"
+        >{{ t('Ressources') }}</span>
+        <span class="flex items-center gap-1">
+          <button
+            v-if="!collapsed"
+            type="button"
+            class="inline-flex h-7 items-center gap-1 rounded px-2 text-[13px] font-medium text-gray-title underline-offset-4 hover:bg-gray-100 hover:underline"
+            @click="$emit('update:expanded', !expanded)"
+          >
+            <template v-if="expanded">
+              <RiArrowLeftLine
+                class="size-3.5"
+                aria-hidden="true"
+              />
+              {{ t('Revenir à l’explorateur') }}
+            </template>
+            <template v-else>
+              {{ t('Tout afficher') }}
+            </template>
+          </button>
+          <button
+            v-if="!expanded"
+            type="button"
+            :title="collapsed ? t('Afficher le panneau des ressources') : t('Masquer le panneau')"
+            class="flex size-6 items-center justify-center rounded text-gray-plain hover:bg-gray-100"
+            @click="$emit('update:collapsed', !collapsed)"
+          >
+            <component
+              :is="collapsed ? RiSidebarUnfoldLine : RiSidebarFoldLine"
+              class="size-5"
+            />
+          </button>
+        </span>
+      </div>
 
-    <!-- min-w keeps the content laid out at the sidebar's min width so it doesn't
+      <!-- min-w keeps the content laid out at the sidebar's min width so it doesn't
          reflow (badges wrapping, section titles on 2 lines) while the width animates
          open from the collapsed state — the aside's overflow-hidden clips the rest. -->
-    <!-- Extra bottom padding so the last item can scroll clear of the browser's
+      <!-- Extra bottom padding so the last item can scroll clear of the browser's
          hover URL bar (Firefox shows it bottom-left). -->
-    <div
-      v-if="!collapsed"
-      class="flex min-h-0 min-w-[260px] flex-1 flex-col gap-3 overflow-y-auto p-2 pb-16"
-    >
-      <label class="flex h-8 items-center gap-1 rounded border border-gray-default bg-gray-some px-2">
-        <RiSearchLine class="size-3.5 shrink-0 text-gray-medium" />
-        <span class="sr-only">{{ t('Rechercher') }}</span>
-        <input
-          :value="search"
-          type="search"
-          class="min-w-0 flex-1 bg-transparent text-[13px] outline-none placeholder:text-gray-medium"
-          :placeholder="t('Rechercher une ressource')"
-          @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
-        >
-      </label>
-
-      <section
-        v-for="group in groups"
-        :key="group.type"
-        class="space-y-0.5"
+      <div
+        v-if="!collapsed"
+        class="flex min-h-0 min-w-[260px] flex-1 flex-col gap-3 overflow-y-auto p-2 pb-16"
       >
-        <p class="px-1 py-2 text-[12px] font-medium leading-3 text-gray-medium">
-          {{ getResourceLabel(group.type, group.total) }}
-        </p>
-        <ResourceListItem
-          v-for="resource in group.items"
-          :key="resource.id"
-          :resource
-          :to="resourceTo(resource)"
-          :replace
-          :selected="resource.id === selectedResourceId"
-        />
-        <button
-          v-if="group.items.length < group.total"
-          type="button"
-          :disabled="loadingType === group.type"
-          class="flex w-full items-center gap-1 px-1 py-1 text-left text-[13px] text-blue-default hover:underline disabled:cursor-default disabled:no-underline"
-          @click="$emit('load-more', group.type)"
+        <label class="flex h-8 items-center gap-1 rounded border border-gray-default bg-gray-some px-2">
+          <RiSearchLine class="size-3.5 shrink-0 text-gray-medium" />
+          <span class="sr-only">{{ t('Rechercher') }}</span>
+          <input
+            :value="search"
+            type="search"
+            class="min-w-0 flex-1 bg-transparent text-[14px] outline-none placeholder:text-gray-medium"
+            :placeholder="t('Rechercher une ressource')"
+            @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
+          >
+        </label>
+
+        <section
+          v-for="group in groups"
+          :key="group.type"
+          class="space-y-0.5"
         >
-          <RiLoader5Line
-            v-if="loadingType === group.type"
-            class="size-3.5 shrink-0 animate-spin"
+          <p class="px-1 py-2 text-[13px] font-medium leading-4 text-gray-medium">
+            {{ getResourceLabel(group.type, group.total) }}
+          </p>
+          <ResourceListItem
+            v-for="resource in group.items"
+            :key="resource.id"
+            :resource
+            :dataset
+            :to="resourceTo(resource)"
+            :replace
+            :selected="resource.id === selectedResourceId"
+            :expanded
+            @click="$emit('update:expanded', false)"
           />
-          {{ t('Charger plus…') }}
-        </button>
-      </section>
+          <button
+            v-if="group.items.length < group.total"
+            type="button"
+            :disabled="loadingType === group.type"
+            class="flex w-full items-center gap-1 px-1 py-1 text-left text-[14px] text-blue-default hover:underline disabled:cursor-default disabled:no-underline"
+            @click="$emit('load-more', group.type)"
+          >
+            <RiLoader5Line
+              v-if="loadingType === group.type"
+              class="size-3.5 shrink-0 animate-spin"
+            />
+            {{ t('Charger plus…') }}
+          </button>
+        </section>
 
-      <!-- The search lives here, so its outcome does too: the viewer only says that
+        <!-- The search lives here, so its outcome does too: the viewer only says that
            nothing is selected. -->
-      <div
-        v-if="search && !groups.length"
-        class="flex flex-col gap-2 px-1 py-2"
-      >
-        <p class="m-0 text-[13px] leading-snug text-gray-medium">
-          {{ t('Pas de résultats pour « {q} »', { q: search }) }}
-        </p>
-        <BrandedButton
-          color="secondary"
-          size="xs"
-          class="w-full"
-          @click="$emit('update:search', '')"
+        <div
+          v-if="search && !groups.length"
+          class="flex flex-col gap-2 px-1 py-2"
         >
-          {{ t('Réinitialiser la recherche') }}
-        </BrandedButton>
+          <p class="m-0 text-[14px] leading-snug text-gray-medium">
+            {{ t('Pas de résultats pour « {q} »', { q: search }) }}
+          </p>
+          <BrandedButton
+            color="secondary"
+            size="xs"
+            class="w-full"
+            @click="$emit('update:search', '')"
+          >
+            {{ t('Réinitialiser la recherche') }}
+          </BrandedButton>
+        </div>
       </div>
-    </div>
+    </aside>
 
     <!-- Drag the right edge to resize the panel and read longer resource titles.
          A separator rather than a button: it only answers to a drag, and a focusable
          button would announce an action that no key can trigger. Keyboard users fold
          the panel from the header instead. -->
     <div
-      v-if="!collapsed"
+      v-if="!collapsed && !expanded"
       role="separator"
       aria-orientation="vertical"
       :title="t('Glisser pour redimensionner')"
-      class="absolute right-0 top-0 z-20 h-full w-2 cursor-col-resize touch-none hover:bg-new-primary/10"
+      class="group absolute -right-1.5 top-0 z-20 flex h-full w-3 cursor-col-resize touch-none justify-center hover:bg-new-primary/10"
       @mousedown="startResize"
-    />
-  </aside>
+    >
+      <!-- Grip centered on the header so the resize affordance is visible at rest. -->
+      <span
+        aria-hidden="true"
+        class="mt-3 flex h-8 w-2 flex-col items-center justify-center gap-0.5 rounded-full border border-gray-default bg-white shadow-sm transition-colors group-hover:border-new-primary"
+      >
+        <span
+          v-for="dot in 3"
+          :key="dot"
+          class="size-0.5 rounded-full bg-gray-medium group-hover:bg-new-primary"
+        />
+      </span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
-import { RiSidebarFoldLine, RiSidebarUnfoldLine, RiSearchLine, RiLoader5Line } from '@remixicon/vue'
+import { RiArrowLeftLine, RiSidebarFoldLine, RiSidebarUnfoldLine, RiSearchLine, RiLoader5Line } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 import ResourceListItem from '../ResourceListItem.vue'
 import { getResourceLabel } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import { useResizable } from '../../composables/useResizable'
+import type { DatasetV2 } from '../../types/datasets'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 
 const { t } = useTranslation()
 
 defineProps<{
+  dataset: DatasetV2
   groups: ResourceGroup[]
   selectedResourceId: string | null
   collapsed: boolean
+  expanded: boolean
   search: string
   loadingType: ResourceType | null
   resourceTo: (resource: Resource) => RouteLocationRaw
@@ -138,11 +187,12 @@ defineProps<{
 defineEmits<{
   'load-more': [type: ResourceType]
   'update:collapsed': [value: boolean]
+  'update:expanded': [value: boolean]
   'update:search': [value: string]
 }>()
 
 const { width, resizing, startResize } = useResizable({
-  initialWidth: 300,
+  initialWidth: 340,
   minWidth: 260,
   maxWidth: 720,
 })

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -63,8 +63,17 @@
                 v-if="previewKind === 'tabular'"
                 :timeout="200"
               >
-                <TabularExplorer :resource-id="resource.id">
+                <TabularExplorer
+                  v-model:global-search="search"
+                  :resource-id="resource.id"
+                >
                   <TabularToolbar class="shrink-0 border-b border-gray-default p-2" />
+                  <div class="hidden shrink-0 md:block">
+                    <TabularActiveFilters
+                      with-clear
+                      class="border-b border-gray-default p-2"
+                    />
+                  </div>
                   <TabularTable :fill="fullscreen" />
                   <TabularMobileFilters />
                 </TabularExplorer>
@@ -161,7 +170,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
@@ -171,6 +180,7 @@ import TabList from '../Tabs/TabList.vue'
 import Tab from '../Tabs/Tab.vue'
 import TabPanels from '../Tabs/TabPanels.vue'
 import TabPanel from '../Tabs/TabPanel.vue'
+import TabularActiveFilters from '../TabularExplorer/TabularActiveFilters.vue'
 import TabularExplorer from '../TabularExplorer/TabularExplorer.vue'
 import TabularToolbar from '../TabularExplorer/TabularToolbar.vue'
 import TabularTable from '../TabularExplorer/TabularTable.vue'
@@ -251,6 +261,11 @@ if (hasTabularData.value) {
   await provideTabularProfile(() => props.resource.id)
 }
 
+// Kept here as well as in the table: the viewer outlives the data tab, so the search
+// survives a trip to another tab, and it resets with the resource since switching
+// resource remounts the viewer.
+const search = ref('')
+
 // The active tab lives in the URL so a shared link opens on the same one. Read once
 // at mount (TabGroup only takes an initial index), which is enough: switching resource
 // remounts the viewer, and the tab is preserved when the new resource also has it.

package/src/components/ResourceExplorer/ResourceSelector.vue

@@ -21,6 +21,7 @@
         >
           <ResourceListItem
             :resource="r"
+            :dataset
             :to="resourceTo(r)"
             :replace
             :selected="r.id === selectedId"
@@ -38,9 +39,11 @@ import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { RiArrowDownSLine } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
 import ResourceListItem from '../ResourceListItem.vue'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
 import type { Resource } from '../../types/resources'
 
 defineProps<{
+  dataset: Dataset | DatasetV2
   resources: Resource[]
   selectedId: string
   resourceTo: (resource: Resource) => RouteLocationRaw

package/src/components/ResourceExplorer/ResourceViewerHeader.vue

@@ -1,16 +1,14 @@
 <template>
   <header class="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-gray-default bg-gray-some px-3">
     <div class="flex min-w-0 items-center gap-1.5 overflow-hidden text-[13px] text-gray-medium">
-      <ResourceIcon
-        :resource
-        class="size-4 shrink-0"
-      />
+      <ResourceIconBadge :resource />
       <span
         class="min-w-0 truncate font-medium text-gray-title"
         :title="resource.title || t('Fichier sans nom')"
       >{{ resource.title || t('Fichier sans nom') }}</span>
       <ResourceSelector
         v-if="resources && resources.length > 1 && resourceTo"
+        :dataset
         :resources
         :selected-id="resource.id"
         :resource-to
@@ -87,7 +85,7 @@ import { computed } from 'vue'
 import { RiDownloadLine, RiFullscreenLine } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
-import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import ResourceIconBadge from '../ResourceIconBadge.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import ResourceSelector from './ResourceSelector.vue'
 import ResourceMainAction from './ResourceMainAction.vue'

package/src/components/ResourceIconBadge.vue

@@ -0,0 +1,28 @@
+<template>
+  <span
+    :class="[iconColor, '[&_svg]:fill-current']"
+    class="flex size-5 shrink-0 items-center justify-center rounded-[1px]"
+  >
+    <component
+      :is="iconComponent"
+      class="size-4"
+      aria-hidden="true"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import File from './Icons/File.vue'
+import { getResourceFormatIcon, getResourceIconColor } from '../functions/resources'
+import type { Resource } from '../types/resources'
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+// Render the icon directly (not via ResourceIcon which forces a gray color) so the
+// colored badge can tint it through currentColor + [&_svg]:fill-current.
+const iconComponent = computed(() => (props.resource.format ? getResourceFormatIcon(props.resource.format) : null) ?? File)
+const iconColor = computed(() => getResourceIconColor(props.resource.format))
+</script>