@paris-ias/list 1.0.111 → 1.0.113

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

@@ -0,0 +1,194 @@
+<template>
+  <v-btn-toggle
+    value="currentPage"
+    role="navigation"
+    aria-label="Pagination Navigation"
+  >
+    <!--  TODO: switch to page as route param -->
+    <v-btn
+      v-if="!(hidePrevNext && firstPageSelected())"
+      :disabled="firstPageSelected()"
+      min-width="35"
+      height="35"
+      width="35"
+      :tabindex="!hidePrevNext && firstPageSelected() ? -1 : 0"
+      aria-label="Previous Page"
+      nuxt
+      @click="updatePage(currentPage - 1)"
+      @keyup.enter="updatePage(currentPage - 1)"
+    >
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+
+    <template v-for="(page, index) in renderPages" :key="page.key">
+      <v-btn
+        v-if="page.isGap"
+        min-width="35"
+        height="35"
+        width="35"
+        icon
+        nuxt
+        @keyup.enter="updatePage(getGapPage(index))"
+        @click="updatePage(getGapPage(index))"
+      >
+        ...
+      </v-btn>
+      <template v-else>
+        <v-btn
+          :class="{ 'active-page': !!page.current }"
+          tabindex="0"
+          outlined
+          min-width="35"
+          height="35"
+          tile
+          nuxt
+          :active="!!page.current"
+          :color="!!page.current ? 'white' : 'black'"
+          text
+          width="35"
+          :aria-current="!!page.current ? 'true' : 'false'"
+          :aria-label="
+            page.current
+              ? `Current page, Page ${page.value}`
+              : `Goto Page ${page.value}`
+          "
+          @click="updatePage(page.value)"
+          @keyup.enter="updatePage(page.value)"
+        >
+          {{ page.value }}
+        </v-btn>
+      </template>
+    </template>
+
+    <v-btn
+      v-if="!(hidePrevNext && lastPageSelected())"
+      :tabindex="!hidePrevNext && lastPageSelected() ? -1 : 0"
+      :disabled="lastPageSelected()"
+      aria-label="Next Page"
+      min-width="35"
+      height="35"
+      width="35"
+      nuxt
+      @click="updatePage(currentPage + 1)"
+      @keyup.enter="updatePage(currentPage + 1)"
+    >
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </v-btn-toggle>
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { useRoute, computed, useI18n } from "#imports";
+const { locale } = useI18n();
+const route = useRoute();
+const rootStore = useRootStore();
+const props = defineProps({
+  totalPages: {
+    type: Number,
+    required: true
+  },
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  pagePadding: {
+    type: Number,
+    default: 1,
+    validator: (value) => {
+      return value > 0;
+    }
+  },
+  pageGap: {
+    type: Number,
+    default: 2,
+    validator: (value) => {
+      return value > 0;
+    }
+  },
+  hidePrevNext: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: "",
+    required: true
+  }
+});
+const renderPages = computed(() => {
+  const pages = [];
+  for (let pageIndex = 1; pageIndex <= props.totalPages; pageIndex++) {
+    if (pageIndex === props.currentPage || pageIndex < props.pageGap || pageIndex > props.totalPages - props.pageGap + 1) {
+      pages.push(createPage(pageIndex));
+      continue;
+    }
+    let minimum;
+    let maximum;
+    if (props.currentPage <= props.pageGap + props.pagePadding) {
+      minimum = props.pageGap + 1;
+      maximum = minimum + props.pagePadding * 2;
+    } else if (props.currentPage >= props.totalPages - props.pageGap - props.pagePadding) {
+      maximum = props.totalPages - props.pageGap;
+      minimum = maximum - props.pagePadding * 2;
+    } else {
+      minimum = props.currentPage - props.pagePadding;
+      maximum = props.currentPage + props.pagePadding;
+    }
+    if (pageIndex >= minimum && pageIndex <= props.currentPage || pageIndex >= props.currentPage && pageIndex <= maximum) {
+      pages.push(createPage(pageIndex));
+      continue;
+    }
+    if (pageIndex === props.pageGap) {
+      if (minimum > props.pageGap + 1 && props.currentPage > props.pageGap + props.pagePadding + 1) {
+        pages.push(createGap(pageIndex));
+      } else {
+        pages.push(createPage(pageIndex));
+      }
+      continue;
+    }
+    if (pageIndex === props.totalPages - props.pageGap + 1) {
+      if (maximum < props.totalPages - props.pageGap && props.currentPage < props.totalPages - props.pageGap - props.pagePadding) {
+        pages.push(createGap(pageIndex));
+      } else {
+        pages.push(createPage(pageIndex));
+      }
+      continue;
+    }
+  }
+  return pages;
+});
+const createPage = (pageIndex) => {
+  return {
+    key: pageIndex,
+    current: props.currentPage === pageIndex,
+    value: pageIndex
+  };
+};
+const firstPageSelected = () => {
+  return props.currentPage === 1;
+};
+const lastPageSelected = () => {
+  return props.currentPage === props.totalPages || props.totalPages === 0;
+};
+const createGap = (pageIndex) => {
+  return {
+    key: pageIndex,
+    isGap: true
+  };
+};
+const emit = defineEmits(["update"]);
+const updatePage = (page) => {
+  rootStore.updatePage({ page, type: props.type, lang: locale.value });
+  emit("update", page);
+};
+const getGapPage = (index) => {
+  return Math.floor(
+    renderPages.value[index - 1].key + ((renderPages.value[index + 1].key || props.totalPages) - renderPages.value[index - 1].key) / 2
+  );
+};
+</script>
+
+<style>
+.active-page{background-color:#000!important;color:#f5f5f5!important}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="d-flex align-center justify-space-between my-6">
+      <v-btn
+        variant="text"
+        size="large"
+        class=""
+        @click="$emit('toggle', type)"
+      >
+        <v-icon size="large">{{
+          open ? "mdi-chevron-down" : "mdi-chevron-right"
+        }}</v-icon>
+      </v-btn>
+      <div
+        class="d-flex flex-column cursor-pointer"
+        @click="$emit('toggle', type)"
+      >
+        <div class="text-h4">
+          {{ capitalize($t("items." + props.type, 2)) }}
+        </div>
+        <div class="text-overline">
+          {{
+            feminine
+              ? $t(
+                  "list.0-items-found-f",
+                  [
+                    $rootStore.results[type].total,
+                    $t("items." + props.type, $rootStore.results[type].total),
+                  ],
+                  $rootStore.results[type].total,
+                )
+              : $t(
+                  "list.0-items-found",
+                  [
+                    $rootStore.results[type].total,
+                    $t("items." + props.type, $rootStore.results[type].total),
+                  ],
+                  $rootStore.results[type].total,
+                )
+          }}
+        </div>
+      </div>
+      <v-spacer />
+    </div>
+    <slot />
+    <v-btn
+      class="ma-2 float-right"
+      color="default"
+      variant="text"
+      rounded="0"
+      :to="localePath(type === 'people' ? '/people' : '/activities/' + type)"
+    >
+      {{ $t("list.pls-x-more", [$rootStore.results[type].total]) }}
+    </v-btn>
+  </div>
+</template>
+
+<script setup>
+import { useNuxtApp, useLocalePath } from "#imports";
+const localePath = useLocalePath();
+const { $rootStore } = useNuxtApp();
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  feminine: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  open: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+});
+</script>

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

@@ -0,0 +1,110 @@
+<template>
+  <ListMoleculesHeader :type="type" />
+  <component :is="view">
+    <component
+      :is="itemTemplate"
+      v-for="(item, index) in items"
+      :key="index"
+      :item="item"
+      :index="index"
+    />
+  </component>
+  <div class="text-center">
+    <ListMoleculesPagination
+      v-if="numberOfPages > 1"
+      :type="type"
+      color="black"
+      large
+      :current-page="page"
+      :total-pages="numberOfPages"
+      :page-padding="1"
+      :page-gap="2"
+      :hide-prev-next="false"
+      @update="onPageChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { capitalize } from "../../../composables/useUtils";
+import {
+  useNuxtApp,
+  resolveComponent,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  useI18n,
+  useRoute
+} from "#imports";
+const { $stores } = useNuxtApp();
+const { locale } = useI18n();
+const route = useRoute();
+const rootStore = useRootStore();
+const props = defineProps({
+  addBtn: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  type: {
+    type: String,
+    default: "people",
+    required: true
+  },
+  layout: {
+    type: Object,
+    required: false,
+    default: () => {
+      return {
+        cols: 12,
+        xl: 12
+      };
+    }
+  },
+  pagination: {
+    type: Object,
+    required: false,
+    default: () => {
+      return {};
+    }
+  },
+  addButton: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  items: [Object]
+});
+const view = computed(
+  () => props.customView ? resolveComponent("ListViews" + capitalize(props.customView)) : resolveComponent("ListViews" + capitalize($stores[props.type].view.name))
+);
+const itemTemplate = computed(
+  () => resolveComponent(
+    (capitalize(props.type) + capitalize($stores[props.type].view.name) + "Item").toString()
+  )
+);
+const numberOfPages = computed(() => $stores[props.type].numberOfPages);
+const page = computed(() => +$stores[props.type].page);
+const items = computed(() => $stores[props.type].items);
+console.log("setup list");
+onMounted(() => {
+  console.log("mounted list");
+});
+rootStore.loadRouteQuery(props.type);
+try {
+  await rootStore.update(props.type, locale.value);
+} catch (error) {
+  console.log("error fetching update list: ", error);
+}
+onBeforeUnmount(() => {
+  rootStore.resetState(props.type, locale.value);
+});
+const onPageChange = (newPage) => {
+  rootStore.updatePage({ page: newPage, type: props.type, lang: locale.value });
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+};
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <ListMoleculesGlobalSearchInput
+    type="all"
+    :placeholder="$t('search')"
+    variant="outlined"
+  />
+  <ListMoleculesResultsContainer
+    v-for="type in sortedModules"
+    :key="type"
+    :feminine="type === 'people'"
+    :type
+    :open="
+      open[type] !== undefined
+        ? open[type]
+        : $rootStore.results[type]?.total > 0
+    "
+    @toggle="open[$event] = !open[$event]"
+  >
+    <v-expand-transition class="results-container">
+      <div v-show="open[type]">
+        <ListAtomsResultsList :type />
+      </div>
+    </v-expand-transition>
+  </ListMoleculesResultsContainer>
+</template>
+
+<script setup>
+import {
+  useNuxtApp,
+  useLocalePath,
+  onBeforeUnmount,
+  onMounted,
+  useI18n,
+  useAppConfig,
+  ref,
+  computed
+} from "#imports";
+const localePath = useLocalePath();
+defineOptions({
+  name: "SearchResults"
+});
+const { $rootStore } = useNuxtApp();
+const appConfig = useAppConfig();
+const { locale } = useI18n();
+const open = ref({});
+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 };
+    return (bResults.total || 0) - (aResults.total || 0);
+  });
+});
+onMounted(async () => {
+  console.log("mounted list");
+  try {
+    await $rootStore.update("all", locale.value);
+    appConfig.list.modules.forEach((type) => {
+      if ($rootStore.results[type]?.total > 0) {
+        open.value[type] = true;
+      }
+    });
+  } catch (error) {
+    console.log("error fetching update list: ", error);
+  }
+});
+onBeforeUnmount(() => {
+});
+</script>
+
+<style scoped>
+.results-container{display:flex;flex-direction:column;gap:8px;margin-left:8px}
+</style>

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

@@ -0,0 +1,180 @@
+<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, useI18n } from "#imports";
+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, locale.value);
+});
+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/runtime/components/list/views/Dense.vue

@@ -0,0 +1,12 @@
+<template>
+  <section class="my-6 ml-2 pb-6">
+    <slot>
+      <!-- fallback content -->
+      Dense view
+    </slot>
+  </section>
+</template>
+
+<style>
+section{display:table;width:100%}section>*{display:table-row}section .v-col.dense{display:table-cell;vertical-align:middle}
+</style>

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

@@ -0,0 +1,10 @@
+<template>
+  <section>
+    <slot>
+      <!-- fallback content -->
+      Expanded view
+    </slot>
+  </section>
+</template>
+
+<script setup lang="ts"></script>

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

@@ -0,0 +1,13 @@
+<template>
+  GRID DISPLAY
+  <template v-for="(item, index) in items" :key="index">
+    <slot name="data" :item="item" />
+  </template>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: [Object],
+  type: String
+});
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <v-row>
+    <slot>
+      <!-- fallback content -->
+      Rows view
+    </slot>
+  </v-row>
+</template>
+
+<script setup>
+
+</script>