@paris-ias/list 1.0.80 → 1.0.83

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.0.80",
+  "version": "1.0.83",
   "builder": {
     "@nuxt/module-builder": "1.0.0",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -52,10 +52,6 @@ const module = defineNuxtModule({
       ...nuxt.options.build.transpile || [],
       "vuetify"
     ];
-    nuxt.options.css = [
-      ...nuxt.options.css || [],
-      "vuetify/lib/styles/main.sass"
-    ];
     nuxt.options.apollo = {
       ...nuxt.options.apollo
     };

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

@@ -0,0 +1,82 @@
+<template>
+  <v-card
+    v-ripple
+    class="event-sliding-item cursor-pointer"
+    elevation="2"
+    height="280"
+    @click="$router.push(localePath('/activities/events/' + item.slug[locale]))"
+  >
+    <v-card-text class="pa-4 d-flex flex-column h-100">
+      <!-- Date section -->
+      <div class="text-overline font-weight-black mb-2 text-primary">
+        {{
+          new Date(item.start).toLocaleDateString(locale, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })
+        }}
+      </div>
+      
+      <!-- Category badge -->
+      <v-chip
+        v-if="item.category"
+        size="small"
+        variant="outlined"
+        color="primary"
+        class="mb-3 align-self-start"
+      >
+        {{ $t("list.filters.events.category." + item.category) }}
+      </v-chip>
+      
+      <!-- Event title -->
+      <h3 class="text-h6 font-weight-bold mb-3 line-clamp-3">
+        {{ item.name }}
+      </h3>
+      
+      <!-- Event description if available -->
+      <p v-if="item.description" class="text-body-2 text-grey-darken-2 line-clamp-4 flex-grow-1">
+        {{ item.description }}
+      </p>
+      
+      <!-- Location if available -->
+      <div v-if="item.location" class="mt-auto pt-2">
+        <v-icon size="small" class="mr-1">mdi-map-marker</v-icon>
+        <span class="text-caption text-grey-darken-1">{{ item.location }}</span>
+      </div>
+    </v-card-text>
+    
+    <!-- Hover overlay -->
+    <v-overlay 
+      v-model="isHovered"
+      contained
+      opacity="0.1"
+      class="d-flex align-center justify-center"
+    >
+      <v-icon size="large" color="primary">mdi-eye</v-icon>
+    </v-overlay>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useLocalePath, useI18n } from "#imports";
+const { locale } = useI18n();
+const localePath = useLocalePath();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+const { item, index } = props;
+const isHovered = ref(false);
+</script>
+
+<style scoped>
+.event-sliding-item{border-radius:12px;overflow:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)}.event-sliding-item:hover{box-shadow:0 8px 25px rgba(0,0,0,.15)!important;transform:translateY(-4px)}.line-clamp-3{-webkit-line-clamp:3;line-clamp:3}.line-clamp-3,.line-clamp-4{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.line-clamp-4{-webkit-line-clamp:4;line-clamp:4}
+</style>

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

@@ -0,0 +1,188 @@
+<template>
+  <div class="slider-container">
+    <!-- Header with counter and navigation -->
+    <div class="slider-header">
+      <div class="slide-counter">
+        {{ activeSlideIndex + 1 }}/{{ items.length }}
+      </div>
+      <div class="navigation-controls">
+        <button
+          :disabled="!canGoBack"
+          class="nav-button nav-prev"
+          @click="goToSlide(activeSlideIndex - 1)"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+          </svg>
+        </button>
+        <button
+          :disabled="!canGoForward"
+          class="nav-button nav-next"
+          @click="goToSlide(activeSlideIndex + 1)"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Slider container -->
+    <div ref="sliderRef" class="slider-viewport" @scroll="handleScroll">
+      <div
+        class="slider-track"
+        :style="{ transform: `translateX(${offsetX}px)` }"
+      >
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          class="slide-item"
+          :class="{
+            'slide-visible': isSlideVisible(index),
+            'slide-entering': isSlideEntering(index),
+            'slide-exiting': isSlideExiting(index),
+          }"
+          :style="getSlideStyle(index)"
+        >
+          <component :is="itemComponent" :item="item" :index="index" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  watch
+} from "vue";
+import { useRootStore } from "../../../stores/root";
+import { capitalize } from "../../../composables/useUtils";
+import { useNuxtApp } from "#imports";
+import { useI18n } from "vue-i18n";
+defineOptions({ name: "ListOrganismsSlider" });
+const { $stores } = useNuxtApp();
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  }
+});
+const items = computed(() => $stores[props.type].items);
+const sliderRef = ref(null);
+const activeSlideIndex = ref(0);
+const offsetX = ref(0);
+const containerWidth = ref(0);
+const slideWidth = ref(0);
+const slidesPerView = ref(1);
+const itemComponent = computed(() => {
+  return capitalize(props.type) + "SlidingItem";
+});
+const totalSlides = computed(() => items.value.length);
+const canGoBack = computed(() => activeSlideIndex.value > 0);
+const canGoForward = computed(() => {
+  const maxIndex = Math.max(0, totalSlides.value - slidesPerView.value);
+  return activeSlideIndex.value < maxIndex;
+});
+const visibleSlideIndices = computed(() => {
+  const start = activeSlideIndex.value;
+  const end = Math.min(start + slidesPerView.value, totalSlides.value);
+  return Array.from({ length: end - start }, (_, i) => start + i);
+});
+const calculateDimensions = () => {
+  if (!sliderRef.value) return;
+  containerWidth.value = sliderRef.value.offsetWidth;
+  const breakpoints = {
+    320: { slidesPerView: 1.2, spacing: 20 },
+    640: { slidesPerView: 2, spacing: 24 },
+    960: { slidesPerView: 2.5, spacing: 28 },
+    1280: { slidesPerView: 3, spacing: 32 },
+    1600: { slidesPerView: 3.5, spacing: 36 }
+  };
+  const currentBreakpoint = Object.entries(breakpoints).reverse().find(([width]) => window.innerWidth >= Number.parseInt(width));
+  const config = currentBreakpoint ? currentBreakpoint[1] : breakpoints[320];
+  slidesPerView.value = Math.floor(config.slidesPerView);
+  slideWidth.value = (containerWidth.value - config.spacing * (config.slidesPerView - 1)) / config.slidesPerView;
+};
+const isSlideVisible = (index) => {
+  return visibleSlideIndices.value.includes(index);
+};
+const isSlideEntering = (index) => {
+  const rightmostVisible = Math.max(...visibleSlideIndices.value);
+  return index === rightmostVisible && index > activeSlideIndex.value;
+};
+const isSlideExiting = (index) => {
+  const leftmostVisible = Math.min(...visibleSlideIndices.value);
+  return index === leftmostVisible && index < activeSlideIndex.value;
+};
+const getSlideStyle = (index) => {
+  const baseStyles = {
+    width: `${slideWidth.value}px`,
+    opacity: isSlideVisible(index) ? 1 : 0,
+    transform: `translateX(${index * (slideWidth.value + 24)}px)`,
+    transition: "all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+  };
+  if (isSlideEntering(index)) {
+    baseStyles.transform += " translateX(20px)";
+    baseStyles.opacity = 0.8;
+  }
+  if (isSlideExiting(index)) {
+    baseStyles.transform += " translateX(-20px)";
+    baseStyles.opacity = 0.6;
+  }
+  return baseStyles;
+};
+const goToSlide = (targetIndex) => {
+  const maxIndex = Math.max(0, totalSlides.value - slidesPerView.value);
+  const newIndex = Math.max(0, Math.min(targetIndex, maxIndex));
+  if (newIndex === activeSlideIndex.value) return;
+  activeSlideIndex.value = newIndex;
+  updateSliderPosition();
+};
+const updateSliderPosition = () => {
+  const newOffset = -(activeSlideIndex.value * (slideWidth.value + 24));
+  const visualOffset = activeSlideIndex.value > 0 ? -40 : 0;
+  offsetX.value = newOffset + visualOffset;
+};
+const handleScroll = () => {
+};
+const handleResize = () => {
+  calculateDimensions();
+  updateSliderPosition();
+};
+onMounted(async () => {
+  await nextTick();
+  calculateDimensions();
+  updateSliderPosition();
+  window.addEventListener("resize", handleResize);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize);
+  rootStore.resetState(props.type);
+});
+watch(
+  () => items.value,
+  () => {
+    nextTick(() => {
+      calculateDimensions();
+      updateSliderPosition();
+    });
+  },
+  { deep: true }
+);
+try {
+  await rootStore.update(props.type, locale.value);
+} catch (error) {
+  console.log("error fetching update list: ", error);
+}
+</script>
+
+<style scoped>
+.slider-container{overflow:hidden;position:relative;width:100%}.slider-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:24px;padding:0 20px}.slide-counter{color:#666;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500}.navigation-controls{display:flex;gap:8px}.nav-button{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:4px;color:#333;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.nav-button:hover:not(:disabled){background:#f5f5f5;border-color:#d0d0d0}.nav-button:disabled{color:#999;cursor:not-allowed;opacity:.4}.slider-viewport{overflow:hidden;padding:0 20px;position:relative;width:100%}.slider-track{display:flex;transition:transform .4s cubic-bezier(.25,.46,.45,.94);will-change:transform}.slide-item{flex-shrink:0;margin-right:24px;transform-origin:center;will-change:transform,opacity}.slide-item:last-child{margin-right:0}.slide-entering{animation:slideInFromRight .4s cubic-bezier(.25,.46,.45,.94)}.slide-exiting{animation:slideOutToLeft .4s cubic-bezier(.25,.46,.45,.94)}@keyframes slideInFromRight{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}@keyframes slideOutToLeft{0%{opacity:1;transform:translateX(0)}to{opacity:.6;transform:translateX(-40px)}}@media (max-width:640px){.slider-header{margin-bottom:20px;padding:0 16px}.slider-viewport{padding:0 16px}.slide-item{margin-right:16px}}@media (max-width:480px){.slide-counter{font-size:12px}.nav-button{height:36px;width:36px}.nav-button svg{height:20px;width:20px}}
+</style>

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

@@ -58,7 +58,7 @@
         </div>
 
         <div
-          v-if="renderedDescription && mdAndUp"
+          v-if="item.description && mdAndUp"
           class="mt-md-n2 mx-4 mx-sm-8 mx-md-0 d-flex text-wrap text-h6 text-black mt-3"
         >
           <MDC v-if="item.description" :value="item.description" class="" />

package/dist/runtime/graphql/list/news.gql

@@ -16,6 +16,7 @@ query listNews(
       date
       description
       featured
+      summary
       image {
         alt
         backgroundColor

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.80",
+  "version": "1.0.83",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",
@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.16.2",
-    "@vue/apollo-composable": "^4.2.2"
+    "@vue/apollo-composable": "^4.2.2",
+    "vuetify": "3.8.0"
   },
   "description": "Paris IAS List Module",
   "devDependencies": {
@@ -38,8 +39,7 @@
     "vite-plugin-graphql-loader": "^4.0.4",
     "vitest": "^3.1.1",
     "vue": "^3.5.13",
-    "vue-tsc": "^2.2.8",
-    "vuetify": "3.8.0"
+    "vue-tsc": "^2.2.8"
   },
   "exports": {
     ".": {