Use new components version (#513)

CHANGELOG.md

@@ -12,7 +12,7 @@
 - update DSFR to v1.11 [#502](https://github.com/datagouv/udata-front/pull/502) [#506](https://github.com/datagouv/udata-front/pull/506)
 - Replace the "MonComptePro" SSO login button with a "ProConnect" button [#482](https://github.com/datagouv/udata-front/pull/482)
   This needs the `PROCONNECT_*` related settings in `settings.py`, and an active [ProConnect flow](https://github.com/numerique-gouv/agentconnect-documentation/blob/main/doc_fs/implementation_technique.md)
-- update/remove code following the datagouv/components update [#507](https://github.com/datagouv/udata-front/pull/507)
+- update/remove code following the datagouv/components update [#507](https://github.com/datagouv/udata-front/pull/507) [#513](https://github.com/datagouv/udata-front/pull/513)
 - When disconnecting from udata, first disconnect from ProConnect if relevant [#504](https://github.com/datagouv/udata-front/pull/504)
 - update privacy policy [#510](https://github.com/datagouv/udata-front/pull/510)
 

package.json

@@ -105,7 +105,7 @@
   },
   "license": "LGPL-2.1-only",
   "dependencies": {
-    "@datagouv/components": "^1.3.0",
+    "@datagouv/components": "^1.3.1",
     "@datagouv/select-a11y": "^3.6.1",
     "@gouvfr/dsfr": "~1.11.2",
     "leaflet": "^1.9.4"

udata_front/theme/gouvfr/assets/js/components/dataset/CardList.vue

@@ -4,8 +4,8 @@
   </div>
   <template v-else-if="totalResults">
     <ul ref="listRef">
-      <li v-for="(dataset, key) in datasets" :key="dataset.id">
-        <CardLG :dataset="dataset" :style="zIndex(key)" />
+      <li v-for="dataset in datasets" :key="dataset.id">
+        <CardLG :dataset="dataset" />
       </li>
     </ul>
     <Pagination
@@ -38,7 +38,7 @@ import { Pagination } from '@datagouv/components';
 import Loader from "./loader.vue";
 import CardLG from './card-lg.vue';
 
-const props = withDefaults(defineProps<CardListProps>(), {
+withDefaults(defineProps<CardListProps>(), {
   loading: false,
   pageSize: defaultPageSize,
 });
@@ -57,10 +57,6 @@ function scrollToTop () {
   }
 };
 
-const zIndex = (key: number) => {
-  return {zIndex: props.datasets.length - key}
-};
-
 function changePage (page: number) {
   currentPage.value = page;
   emit("changePage", page);

udata_front/theme/gouvfr/assets/js/components/dataset/resource/resources.vue

@@ -14,17 +14,17 @@
         </a>
       </div>
     </div>
-    <div v-if="showSearch" class="fr-mt-3v">
+    <div v-if="showSearch" class="fr-my-3v">
       <SearchBar :eventName="RESOURCES_SEARCH" :type="type"></SearchBar>
     </div>
     <transition mode="out-in">
       <div v-if="loading">
         <ResourceAccordionLoader v-for="_i in pageSize" class="fr-mt-2w" />
       </div>
-      <div v-else>
+      <div class="flex flex-direction-column gap-10px" v-else>
         <p
           v-if="filteredResults"
-          class="fr-py-3v fr-my-0 fr-text--sm border-default-grey border-bottom"
+          class="fr-my-0 fr-text--sm border-bottom"
           role="status"
         >
           {{ t("{count} results", totalResults) }}
@@ -175,3 +175,8 @@ const firstLoad = () => {
 
 onMounted(() => firstLoad());
 </script>
+<style scoped>
+.gap-10px {
+  gap: 10px;
+}
+</style>

udata_front/theme/gouvfr/assets/js/components/search/Search/Search.vue

@@ -156,8 +156,8 @@
           </div>
           <div v-else-if="results.length">
             <ul class="fr-mt-1w border-default-grey border-top relative z-2">
-              <li v-for="(result, key) in results" :key="result.id">
-                <CardLg :dataset="result" :style="zIndex(key)" />
+              <li v-for="result in results" :key="result.id">
+                <CardLg :dataset="result" />
               </li>
             </ul>
             <Pagination
@@ -295,10 +295,6 @@ const searchSort = ref('');
  */
 const results = ref<Array<Dataset>>([]);
 
-const zIndex = (key: number) => {
-  return {zIndex: results.value.length - key}
-};
-
 /**
  * Count of search results
  */