@paris-ias/list 1.0.180 → 1.0.182

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

@@ -0,0 +1,350 @@
+<template>
+  <v-overlay
+    :model-value="active"
+    scrim="white"
+    class="align-center justify-center loader-overlay"
+    :class="{ 'loader-overlay--inactive': !active }"
+  >
+    <div
+      v-motion
+      :initial="{ scale: 0.8, opacity: 0 }"
+      :enter="{
+        scale: 1,
+        opacity: 1,
+        transition: { duration: 800, ease: 'easeOut' },
+      }"
+      :leave="{ scale: 0.9, opacity: 0, transition: { duration: 400 } }"
+      class="logo-container"
+    >
+      <ListAtomsLogoPlaceholder class="loader-logo" :class="{ 'loader-logo--active': active }" />
+    </div>
+  </v-overlay>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  active: boolean
+}>()
+</script>
+
+<style scoped>
+.loader-overlay {
+  background: rgb(255, 255, 255) !important;
+  backdrop-filter: blur(3px);
+  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  height: calc(100vh - 5px) !important;
+  top: 5px !important;
+}
+
+.loader-overlay--inactive {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.loader-overlay--inactive .logo-container {
+  transform: scale(0.9);
+  opacity: 0;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.loader-logo {
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
+  max-width: 350px;
+  height: auto;
+  width: 280px;
+}
+
+.v-overlay--active {
+  animation: fade-in 0.5s ease-in-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.loader-logo--active :deep([class^="IEA_"]) {
+  fill: transparent;
+  stroke: #000;
+  stroke-opacity: 1;
+  fill-opacity: 1;
+  fill-rule: nonzero;
+}
+
+.loader-logo--active :deep(.IEA_0) {
+  stroke-dasharray: 1223 1225;
+  stroke-dashoffset: 1224;
+  animation: IEA_draw_0 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_5) {
+  stroke-dasharray: 335 337;
+  stroke-dashoffset: 336;
+  animation: IEA_draw_5 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_1) {
+  stroke-dasharray: 1351 1353;
+  stroke-dashoffset: 1352;
+  animation: IEA_draw_1 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_2) {
+  stroke-dasharray: 1311 1313;
+  stroke-dashoffset: 1312;
+  animation: IEA_draw_2 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_3),
+.loader-logo--active :deep(.IEA_4) {
+  stroke-dasharray: 13 15;
+  stroke-dashoffset: 14;
+}
+
+.loader-logo--active :deep(.IEA_3) {
+  animation: IEA_draw_3 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_4) {
+  animation: IEA_draw_4 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_6),
+.loader-logo--active :deep(.IEA_7),
+.loader-logo--active :deep(.IEA_8) {
+  stroke-dasharray: 102 104;
+  stroke-dashoffset: 103;
+}
+
+.loader-logo--active :deep(.IEA_6) {
+  animation: IEA_draw_6 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_7) {
+  animation: IEA_draw_7 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_8) {
+  animation: IEA_draw_8 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_9) {
+  stroke-dasharray: 372 374;
+  stroke-dashoffset: 373;
+  animation: IEA_draw_9 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_10) {
+  stroke-dasharray: 96 98;
+  stroke-dashoffset: 97;
+  animation: IEA_draw_10 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_11) {
+  stroke-dasharray: 184 186;
+  stroke-dashoffset: 185;
+  animation: IEA_draw_11 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_12) {
+  stroke-dasharray: 169 171;
+  stroke-dashoffset: 170;
+  animation: IEA_draw_12 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_13) {
+  stroke-dasharray: 1020 1022;
+  stroke-dashoffset: 1021;
+  animation: IEA_draw_13 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-circles 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_14) {
+  stroke-dasharray: 939 941;
+  stroke-dashoffset: 940;
+  animation: IEA_draw_14 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-circles 3141ms ease 0ms 1 forwards;
+}
+
+.loader-logo--active :deep(.IEA_15) {
+  stroke-dasharray: 326 328;
+  stroke-dashoffset: 327;
+  animation: IEA_draw_15 3141ms ease 0ms 1 forwards, stroke-fade 3141ms linear 0ms 1 forwards, fill-standard 3141ms ease 0ms 1 forwards;
+}
+
+@keyframes fill-standard {
+  0%, 35% {
+    fill: transparent;
+  }
+  60% {
+    fill: rgba(0, 0, 0, 0.3);
+  }
+  80% {
+    fill: rgba(0, 0, 0, 0.7);
+  }
+  100% {
+    fill: #000;
+  }
+}
+@keyframes fill-circles {
+  0%, 35% {
+    fill: transparent;
+  }
+  60% {
+    fill: rgba(0, 0, 0, 0.2);
+  }
+  80% {
+    fill: rgba(0, 0, 0, 0.5);
+  }
+  100% {
+    fill: #000;
+  }
+}
+@keyframes stroke-fade {
+  0%, 65% {
+    stroke-opacity: 1;
+  }
+  80% {
+    stroke-opacity: 0.5;
+  }
+  95% {
+    stroke-opacity: 0.2;
+  }
+  100% {
+    stroke-opacity: 0;
+  }
+}
+@keyframes draw {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_0 {
+  5% {
+    stroke-dashoffset: 1224;
+  }
+  30%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_1 {
+  8% {
+    stroke-dashoffset: 1352;
+  }
+  35%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_2 {
+  10% {
+    stroke-dashoffset: 1312;
+  }
+  40%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_3 {
+  12% {
+    stroke-dashoffset: 14;
+  }
+  45%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_4 {
+  15% {
+    stroke-dashoffset: 14;
+  }
+  50%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_5 {
+  15.74% {
+    stroke-dashoffset: 336;
+  }
+  43.52%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_6 {
+  16.67% {
+    stroke-dashoffset: 103;
+  }
+  44.44%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_7 {
+  17.59% {
+    stroke-dashoffset: 103;
+  }
+  45.37%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_8 {
+  18.52% {
+    stroke-dashoffset: 103;
+  }
+  46.3%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_9 {
+  19.44% {
+    stroke-dashoffset: 373;
+  }
+  47.22%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_10 {
+  20.37% {
+    stroke-dashoffset: 97;
+  }
+  48.15%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_11 {
+  21.3% {
+    stroke-dashoffset: 185;
+  }
+  49.07%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_12 {
+  22.22% {
+    stroke-dashoffset: 170;
+  }
+  50%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_13 {
+  23.15% {
+    stroke-dashoffset: 1021;
+  }
+  50.93%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_14 {
+  24.07% {
+    stroke-dashoffset: 940;
+  }
+  51.85%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_15 {
+  25% {
+    stroke-dashoffset: 327;
+  }
+  52.78%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+</style>

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

@@ -2,83 +2,115 @@
   <ListMoleculesGlobalSearchInput
     type="all"
     :placeholder="$t('search')"
-    variant="outlined"
     :categories="selectedCategories"
-    @change="updateSearch($event)"
+    filter
     @filter-change="handleFilterChange"
+    class="mb-6"
   />
-  <ListMoleculesResultsContainer
-    v-for="type in filteredSortedModules"
-    :key="type"
-    :feminine="type === 'people'"
-    :type
-    :open="$rootStore.results[type]?.total > 0 ?? open[type]"
-    @toggle="open[$event] = !open[$event]"
-  >
-    {{ $rootStore.results[type]?.total }}
-    <v-expand-transition class="results-container">
-      <div v-show="$rootStore.results[type]?.total > 0 || open[type]">
-        <ListAtomsResultsList :type />
-      </div>
-    </v-expand-transition>
-  </ListMoleculesResultsContainer>
+  <div v-if="searchTerm.length === 0" class="search-empty">
+    <ListAtomsLogoPlaceholder idle />
+  </div>
+  <template v-else>
+    <div v-if="loading" class="search-pending">
+      <ListAtomsLogoPlaceholder />
+    </div>
+    <template v-else-if="!loading">
+      <ListMoleculesResultsContainer
+        v-for="type in filteredSortedModules"
+        :key="type"
+        :feminine="
+          type === 'people' || type === 'news' || type === 'publications'
+        "
+        :type
+        :open="open[type] ?? false"
+        @toggle="(t) => (open[t] = !open[t])"
+      >
+        <v-expand-transition class="results-container">
+          <div v-show="open[type]">
+            <ListAtomsResultsList
+              :type
+              :pathPrefix="
+                type === 'people'
+                  ? 'people-slug'
+                  : 'activities-' + type + '-slug'
+              "
+            />
+          </div>
+        </v-expand-transition>
+      </ListMoleculesResultsContainer>
+    </template>
+  </template>
 </template>
 
 <script setup>
 import {
   useNuxtApp,
-  onBeforeUnmount,
   useI18n,
   useAppConfig,
+  useRoute,
   ref,
+  reactive,
   useAsyncQuery,
   computed,
+  watch,
 } from "#imports"
 import SEARCH from "@paris-ias/trees/dist/graphql/client/misc/query.search.all.gql"
-// Component name for linting
-defineOptions({
-  name: "SearchResults",
-})
 
 const { $rootStore } = useNuxtApp()
-
 const appConfig = useAppConfig()
 const { locale } = useI18n()
-const open = ref({})
+const route = useRoute()
+if (route.query.search) {
+  $rootStore.search = route.query.search
+}
+
+const loading = ref(true)
+
+const open = reactive(
+  appConfig.list.modules.reduce((acc, type) => {
+    acc[type] = false
+    return acc
+  }, {}),
+)
 
-// State for selected categories (default to all selected)
 const selectedCategories = ref([...appConfig.list.modules])
 
-// Handle filter changes
 const handleFilterChange = (filterData) => {
   selectedCategories.value = filterData.categories
 }
 
-// Computed property to sort modules by total count (highest first)
 const sortedModules = computed(() => {
   return appConfig.list.modules.slice().sort((a, b) => {
-    const aResults = $rootStore.results[a] || { total: 0 }
-    const bResults = $rootStore.results[b] || { total: 0 }
-
-    // Sort by highest total count first
-    return (bResults.total || 0) - (aResults.total || 0)
+    const aMaxScore = Math.max(
+      ...($rootStore.results[a]?.items || []).map((i) => i.score ?? 0),
+      0,
+    )
+    const bMaxScore = Math.max(
+      ...($rootStore.results[b]?.items || []).map((i) => i.score ?? 0),
+      0,
+    )
+    return bMaxScore - aMaxScore
   })
 })
-
-// Computed property to filter and sort modules based on selected categories
 const filteredSortedModules = computed(() => {
   return sortedModules.value.filter((type) =>
     selectedCategories.value.includes(type),
   )
 })
 
-// Apollo GraphQL query with proper reactivity
-const { data, pending, error, refresh } = await useAsyncQuery(
+const searchTerm = computed(() => $rootStore.search || "")
+const currentLocale = computed(() => locale.value)
+
+const { data, pending, error } = useAsyncQuery(
   SEARCH,
-  { search: $rootStore.search, appId: "iea", locale: locale.value },
+  computed(() => ({
+    search: searchTerm.value,
+    appId: "iea",
+    lang: currentLocale.value,
+  })),
   {
-    key: `search-${$rootStore.search}`, // Unique key for caching
-    server: true, // Enable SSR
+    server: false,
+    enabled: computed(() => searchTerm.value.length > 0),
   },
 )
 if (error.value) {
@@ -87,94 +119,26 @@ if (error.value) {
   /*  console.log("Query result data: ", data.value.items?.length) */
 }
 
-// Apply data to store immediately if available
-if (data.value) {
-  console.log("Applying data to store directly [first load scenario]")
-  $rootStore.applyListResult("all", data.value)
-  // Initialize open state for types with results
+const applyData = (newData) => {
+  if (!newData) return
+  $rootStore.applyListResult("all", newData)
   appConfig.list.modules.forEach((type) => {
-    if ($rootStore.results[type]?.total > 0) {
-      open.value[type] = true
+    if (newData.search?.[type]?.total > 0) {
+      open[type] = true
     }
   })
+  loading.value = false
 }
 
-const updateSearch = async (newSearch) => {
-  console.log("update search")
-  if (newSearch !== $rootStore.search) {
-    await refresh()
-    if (data.value) {
-      console.log("Applying data to store directly [first load scenario]")
-      $rootStore.applyListResult("all", data.value)
-      // Initialize open state for types with results
-      appConfig.list.modules.forEach((type) => {
-        if ($rootStore.results[type]?.total > 0) {
-          open.value[type] = true
-        }
-      })
-    }
+watch(data, applyData, { immediate: true })
+
+watch(error, (err) => {
+  if (err) {
+    console.error("GraphQL query error:", err)
+    loading.value = false
   }
-}
-onBeforeUnmount(() => {
-  /* rootStore.resetState("all", locale.value) */
 })
-
-const socioscope = {
-  appId: ["iea"],
-  url: "https://thesocioscope.org",
-  subtitle: {
-    en: "Seeing How Social Change Takes Shape",
-    fr: "Voir comment le changement social prend forme",
-  },
-  date: {
-    $date: "2023-03-18T00:00:00.000Z",
-  },
-  image: {
-    url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/project/the_socioscope.svg",
-  },
-  summary: {
-    en: "Through large scale data collection around the world and LLM-driven research, the Socioscope analyses how behaviours, norms, and practices evolve within sustainable food transitions.\nWe're building a systemic way to help make complex social patterns measurable, comparable, and understandable.",
-    fr: "Grâce à la collecte de données à grande échelle dans le monde entier et à la recherche pilotée par LLM, le Socioscope analyse comment les comportements, normes et pratiques évoluent dans les transitions alimentaires durables.\nNous construisons une méthode systématique pour rendre les schémas sociaux complexes mesurables, comparables et compréhensibles.",
-  },
-  description: {
-    en: "The Socioscope is a transformative qualitative research project that maps how behaviours, norms, and communities influence the transition toward sustainable food systems.\nThe Socioscope serves as a comprehensive observatory of these efforts, making knowledge accessible to researchers, policymakers, and practitioners worldwide. Equally important is shining a light on local initiatives that lead change on the ground and drive the shift toward a more sustainable food system.",
-    fr: "Le Socioscope est un projet de recherche qualitative transformatif qui cartographie comment les comportements, normes et communautés influencent la transition vers des systèmes alimentaires durables.\nLe Socioscope sert d'observatoire complet de ces efforts, rendant les connaissances accessibles aux chercheurs, décideurs politiques et praticiens du monde entier. Tout aussi important, il met en lumière les initiatives locales qui mènent le changement sur le terrain et conduisent la transition vers un système alimentaire plus durable.",
-  },
-  name: {
-    en: "The Socioscope",
-    fr: "Le Socioscope",
-  },
-  related: {
-    people: [
-      {
-        firstname: "Antoine",
-        lastname: "Cordelois",
-        image: {
-          url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/people/antoine_cordelois.jpg",
-        },
-      },
-      {
-        firstname: "Saadi",
-        lastname: "Lahlou",
-        image: {
-          url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/people/lahlou_saadi.jpg",
-        },
-      },
-      {
-        firstname: "Paulius",
-        lastname: "Yamin",
-        image: {
-          url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/people/Paulius_Yamin.jpg",
-        },
-      },
-    ],
-  },
-  slug: {
-    fr: "le-socioscope",
-    en: "the-socioscope",
-  },
-}
 </script>
 <style scoped>
-.results-container{display:flex;flex-direction:column;gap:8px;margin-left:8px}
+.results-container{display:flex;flex-direction:column;gap:8px;margin-left:8px}.search-empty{min-height:100vh;opacity:.8}.search-empty,.search-pending{display:flex;justify-content:center}.search-pending{padding:48px 0}
 </style>

package/dist/runtime/components/list/views/Dense.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="my-6 ml-2 pb-6">
+  <section class="my-6 pb-6">
     <slot>
       <!-- fallback content -->
     </slot>

package/dist/runtime/components/list/views/Slider.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO: make it after the slider of seed without swiper -->
   <v-row class="mb-9">
     <v-col class="justify-center">
       <slot />
@@ -79,10 +80,10 @@
   - Meaningful behavior when clicking on the arrrows
   - Add a slide-in from right animation when the items are entering viewport
   */
-import { useDisplay } from "vuetify";
-const { locale } = useI18n();
-const { name, mdAndUp } = useDisplay();
-const model = ref(0);
+import { useDisplay } from "vuetify"
+const { locale } = useI18n()
+const { name, mdAndUp } = useDisplay()
+const model = ref(0)
 const swiperBreakpoints = ref({
   320: {
     slidesPerView: "auto",
@@ -108,7 +109,7 @@ const swiperBreakpoints = ref({
     slidesPerView: "auto",
     spaceBetween: 35,
   },
-});
+})
 const props = defineProps({
   type: {
     type: String,
@@ -118,44 +119,39 @@ const props = defineProps({
   loading: { type: Boolean, default: false },
   dark: { type: Boolean, default: false },
   more: { type: Boolean, default: true },
-});
+})
 
 /* const { data, error } = await useAsyncData(props.type, () =>
   )
   console.log("error: ", error) */
-const spaceBetween = 10;
+const spaceBetween = 10
 const onProgress = (e) => {
-  console.log("e: progress ", e);
-  const [swiper, progress] = e.detail;
-  console.log(progress);
-};
+  const [swiper, progress] = e.detail
+}
 
-const onSlideChange = (e) => {
-  console.log("slide changed", e);
-};
 const computedWidth = computed(() => {
-  let modifier = 1;
+  let modifier = 1
   switch (props.type) {
     case "events":
-      modifier = 1.1;
-      break;
+      modifier = 1.1
+      break
     case "people":
-      break;
+      break
     case "image":
-      break;
+      break
     default:
-      break;
+      break
   }
   return (
     [250, 300, 350, 380, 430, 460][
       ["xs", "sm", "md", "lg", "xl", "xxl"].indexOf(name.value || "md")
     ] * modifier
-  );
-});
+  )
+})
 
 onMounted(() => {
-  console.log("Resolved Item", capitalize(props.type) + "SlidingItem");
-});
+  console.log("Resolved Item", capitalize(props.type) + "SlidingItem")
+})
 </script>
 <style scoped>
 .swiper-slide{width:auto}