@paris-ias/list 1.0.192 → 1.0.194

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.0.192",
+  "version": "1.0.194",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/events/DenseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover py-2">
+  <ListMoleculesDenseItemContainer>
     <v-col v-if="mdAndUp" cols="1">
       <MiscAtomsDateStamp
         v-if="item.start"
@@ -21,7 +21,7 @@
       />
     </v-col>
 
-    <v-col align-self="start" class="pl-4">
+    <v-col align-self="start" class="pl-md-4">
       <v-skeleton-loader v-if="loading" type="chip" class="mr-3" width="120" />
       <v-chip
         v-else
@@ -82,14 +82,7 @@
         )}`"
       />
     </v-col>
-
-    <!--     <v-col align-self="center" cols="auto">
-      <v-skeleton-loader v-if="loading" type="button" />
-      <div v-else>
-        <EventsBadges :item />
-      </div>
-    </v-col> -->
-  </v-row>
+  </ListMoleculesDenseItemContainer>
 </template>
 
 <script setup>
@@ -124,6 +117,4 @@ const props = defineProps({
     default: false,
   },
 })
-
-// const loading = computed(() => rootStore.loading || props.loading)
 </script>

package/dist/runtime/components/fellowships/DenseItem.vue

@@ -1,19 +1,17 @@
 <template>
-  <v-row
-    v-ripple
-    no-gutters
-    class="cursor-pointer highlight-on-hover pt-2 pl-md-2"
-  >
+  <ListMoleculesDenseItemContainer>
     <v-col
       v-if="mdAndUp"
-      cols="1"
+      cols="auto"
       class="align-center"
       :offset="name.startsWith('search') ? 1 : 0"
     >
       <MiscAtomsImageContainer
         cover
         :loading="loading"
-        :src="item?.image?.url || '/default.png'"
+        :src="
+          item && item.image && item.image.url ? item.image.url : '/default.png'
+        "
         :ratio="1 / 1"
         :width="100"
       />
@@ -21,8 +19,7 @@
 
     <v-col
       :cols="mdAndUp ? 8 : undefined"
-      class="text-h5 dense d-flex flex-column ml-md-2"
-      :offset="name.startsWith('search') ? 1 : 0"
+      class="text-h5 dense d-flex flex-column"
     >
       <v-skeleton-loader
         v-if="loading"
@@ -37,6 +34,7 @@
             ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
             : item.name
         "
+        class="pl-md-4"
       />
       <FellowshipsBadges :item="item" :loading="loading" />
 
@@ -60,7 +58,7 @@
       </template>
     </v-col>
 
-    <v-col v-if="mdAndUp" class="d-flex flex-column">
+    <v-col v-if="mdAndUp" class="d-flex flex-column" cols="1">
       <v-skeleton-loader v-if="loading" type="chip" width="260" class="mt-2" />
       <MiscMoleculesChipContainer
         v-else
@@ -72,7 +70,7 @@
         class="mt-2"
       />
     </v-col>
-  </v-row>
+  </ListMoleculesDenseItemContainer>
 </template>
 
 <script setup>
@@ -81,7 +79,7 @@ import { useNuxtApp, useRoute, computed } from "#imports"
 import { highlightAndTruncate } from "../../composables/useUtils"
 const { $rootStore, $stores } = useNuxtApp()
 const { name } = useRoute()
-const { mdAndUp, mdAndDown } = useDisplay()
+const { mdAndUp, mdAndDown, smAndDown } = useDisplay()
 const searchQuery = computed(() =>
   name.startsWith("search")
     ? $rootStore.search

package/dist/runtime/components/list/molecules/DenseItemContainer.vue

@@ -0,0 +1,5 @@
+<template>
+  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover pa-2">
+    <slot />
+  </v-row>
+</template>

package/dist/runtime/components/list/molecules/GlobalSearchInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex align-center">
     <v-menu
-      v-if="filter"
+      v-if="filter && mdAndUp"
       v-model="filterMenuOpen"
       :close-on-content-click="false"
       location="bottom end"
@@ -150,8 +150,14 @@ const allFilterOptions = computed(() => ({
   people: { value: "people", label: capitalize(t("items.people", 2)) },
   events: { value: "events", label: capitalize(t("items.events", 2)) },
   news: { value: "news", label: capitalize(t("items.news", 2)) },
-  publications: { value: "publications", label: capitalize(t("items.publications", 2)) },
-  fellowships: { value: "fellowships", label: capitalize(t("items.fellowships", 2)) },
+  publications: {
+    value: "publications",
+    label: capitalize(t("items.publications", 2)),
+  },
+  fellowships: {
+    value: "fellowships",
+    label: capitalize(t("items.fellowships", 2)),
+  },
   projects: { value: "projects", label: capitalize(t("items.projects", 2)) },
 }))
 
@@ -159,7 +165,9 @@ const filterOptions = computed(() => {
   const map = allFilterOptions.value
   if (props.filterOrder.length > 0) {
     const ordered = props.filterOrder.filter((k) => map[k]).map((k) => map[k])
-    const rest = Object.values(map).filter((o) => !props.filterOrder.includes(o.value))
+    const rest = Object.values(map).filter(
+      (o) => !props.filterOrder.includes(o.value),
+    )
     return [...ordered, ...rest]
   }
   return Object.values(map)

package/dist/runtime/components/list/molecules/ResultsContainer.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="d-flex align-center justify-space-between my-2">
       <v-btn
+        v-if="mdAndUp"
         variant="text"
         class="mr-2"
         @click="$emit('toggle', type)"
@@ -16,6 +17,7 @@
         @click="$emit('toggle', type)"
       >
         <h3
+          class="mt-4 mb-0"
           :class="
             $rootStore.results[type] && $rootStore.results[type].total > 0
               ? 'black'
@@ -24,7 +26,7 @@
         >
           {{ capitalize($t("items." + props.type, 2)) }}
         </h3>
-        <div class="text-overline">
+        <div class="text-overline mb-3">
           {{
             feminine
               ? $t(
@@ -83,8 +85,11 @@
 </template>
 <script setup>
 import { useNuxtApp, useLocalePath } from "#imports"
+import { useDisplay } from "vuetify"
 const localePath = useLocalePath()
 
+const { mdAndUp } = useDisplay()
+
 // Utility function to capitalize first letter
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
 

package/dist/runtime/components/list/organisms/Results.vue

@@ -61,14 +61,16 @@ import {
   computed,
   watch,
 } from "#imports"
+import { useRootStore } from "../../../stores/root"
 import SEARCH from "@paris-ias/trees/dist/graphql/client/misc/query.search.all.gql"
 
 const { $rootStore } = useNuxtApp()
+const rootStore = useRootStore()
 const appConfig = useAppConfig()
 const { locale } = useI18n()
 const route = useRoute()
 if (route.query.search) {
-  $rootStore.search = route.query.search
+  rootStore.search = String(route.query.search)
 }
 
 const open = reactive(
@@ -109,16 +111,15 @@ const searchTerm = computed(() => $rootStore.search || "")
 const currentLocale = computed(() => locale.value)
 
 const { data, pending, error } = useAsyncQuery(
-  SEARCH,
-  computed(() => ({
-    search: searchTerm.value,
-    appId: "iea",
-    lang: currentLocale.value,
-  })),
   {
-    server: false,
-    enabled: computed(() => searchTerm.value.length > 0),
+    query: SEARCH,
+    variables: computed(() => ({
+      search: searchTerm.value,
+      appId: "iea",
+      lang: currentLocale.value,
+    })),
   },
+  { server: false },
 )
 
 watch(data, (newData) => {

package/dist/runtime/components/news/DenseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover pa-2">
+  <ListMoleculesDenseItemContainer>
     <v-col v-if="mdAndUp" cols="1">
       <MiscAtomsDateStamp
         v-if="item.date"
@@ -8,7 +8,7 @@
         class="mr-4"
       />
     </v-col>
-    <v-col v-if="mdAndUp" align-self="start" cols="1">
+    <v-col v-if="mdAndUp" align-self="start" cols="auto">
       <MiscAtomsImageContainer
         cover
         :loading="loading"
@@ -19,7 +19,7 @@
         :width="100"
       />
     </v-col>
-    <v-col align-self="start" class="text-h5 dense pl-4 paragraph">
+    <v-col align-self="start" class="text-h5 dense pl-md-4 paragraph">
       <v-skeleton-loader v-if="loading" type="heading" />
       <template v-else>
         <v-skeleton-loader
@@ -67,7 +67,7 @@
         />
       </template>
     </v-col>
-  </v-row>
+  </ListMoleculesDenseItemContainer>
 </template>
 
 <script setup>

package/dist/runtime/components/people/DenseItem.vue

@@ -1,6 +1,10 @@
 <template>
-  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover">
-    <v-col v-if="mdAndUp" cols="1" :offset="name.startsWith('search') ? 1 : 0">
+  <ListMoleculesDenseItemContainer>
+    <v-col
+      v-if="mdAndUp"
+      cols="auto"
+      :offset="name.startsWith('search') ? 1 : 0"
+    >
       <MiscAtomsImageContainer
         cover
         :loading="loading"
@@ -12,11 +16,11 @@
         class="ma-1"
       />
     </v-col>
-    <v-col align-self="start" class="text-sm-h6 dense ml-4">
+    <v-col align-self="start" class="dense ml-md-4">
       <v-skeleton-loader v-if="loading" type="heading" />
       <div
         v-else
-        class="d-flex justify-space-between text-title text-md-h5 align-center"
+        class="d-flex justify-space-between text-title text-h5 align-center pt-md-2"
       >
         <span
           v-html="
@@ -63,7 +67,7 @@
         "
       />
     </v-col>
-  </v-row>
+  </ListMoleculesDenseItemContainer>
 </template>
 
 <script setup>

package/dist/runtime/components/projects/DenseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover">
+  <ListMoleculesDenseItemContainer>
     <v-col
       v-if="mdAndUp"
       align-self="start"
@@ -16,7 +16,7 @@
         :width="100"
       />
     </v-col>
-    <v-col align-self="center" class="text-h5 dense pt-2 pl-4">
+    <v-col align-self="start" class="text-h5 dense pl-md-4">
       <v-skeleton-loader v-if="loading" type="heading" width="50%" />
       <span
         v-else
@@ -44,7 +44,7 @@
         )}`"
       />
     </v-col>
-  </v-row>
+  </ListMoleculesDenseItemContainer>
 </template>
 
 <script setup>

package/dist/runtime/components/publications/DenseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover my-2">
+  <ListMoleculesDenseItemContainer>
     <v-col v-if="mdAndUp" cols="1">
       <MiscAtomsDateStamp
         v-if="item.date"
@@ -8,7 +8,7 @@
         class="mr-4"
       />
     </v-col>
-    <v-col v-if="mdAndUp" cols="1" class="align-center">
+    <v-col v-if="mdAndUp" cols="auto" class="align-center">
       <MiscAtomsImageContainer
         cover
         :loading="loading"
@@ -19,8 +19,8 @@
         :width="100"
       />
     </v-col>
-    <v-col class="pl-4">
-      <div class="inline-flex flex-row flex-wrap">
+    <v-col class="" cols="8">
+      <div class="inline-flex flex-row flex-wrap pl-md-4">
         <v-skeleton-loader v-if="loading" :type="heading" />
 
         <template v-else>
@@ -69,7 +69,7 @@
           )}`"
         />
       </div> </v-col
-  ></v-row>
+  ></ListMoleculesDenseItemContainer>
 </template>
 
 <script setup>

package/package.json

@@ -1,14 +1,14 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.192",
+  "version": "1.0.194",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",
     "type": "git"
   },
   "dependencies": {
-    "@paris-ias/trees": "^2.0.48"
+    "@paris-ias/trees": "^2.0.49"
   },
   "description": "Paris IAS List Module",
   "peerDependencies": {