@paris-ias/list 1.0.117 → 1.0.118

package/dist/module.json

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

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

@@ -3,93 +3,71 @@
     value="currentPage"
     role="navigation"
     aria-label="Pagination Navigation"
+    class="d-inline-flex"
   >
-    <!--  TODO: switch to page as route param -->
+    <!-- Previous button -->
     <v-btn
-      v-if="!(hidePrevNext && firstPageSelected())"
-      :disabled="firstPageSelected()"
+      v-if="!(hidePrevNext && isFirstPage)"
+      :disabled="isFirstPage"
       min-width="35"
       height="35"
       width="35"
-      :tabindex="!hidePrevNext && firstPageSelected() ? -1 : 0"
+      :tabindex="isFirstPage && hidePrevNext ? -1 : 0"
       aria-label="Previous Page"
-      nuxt
-      @click="updatePage(currentPage - 1)"
-      @keyup.enter="updatePage(currentPage - 1)"
+      @click="onChange(currentPage - 1)"
+      @keyup.enter="onChange(currentPage - 1)"
     >
       <v-icon>mdi-chevron-left</v-icon>
     </v-btn>
 
+    <!-- Page buttons and gaps -->
     <template v-for="(page, index) in renderPages" :key="page.key">
+      <!-- Ellipsis gap -->
       <v-btn
         v-if="page.isGap"
+        icon
         min-width="35"
         height="35"
         width="35"
-        icon
-        nuxt
-        @keyup.enter="updatePage(getGapPage(index))"
-        @click="updatePage(getGapPage(index))"
+        @click="onChange(getGapPage(index))"
+        @keyup.enter="onChange(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> -->
 
-        <v-btn
-          :class="['page-button', { 'active-page': page.current }]"
-          tabindex="0"
-          min-width="35"
-          height="35"
-          tile
-          width="35"
-          aria-current="page"
-          :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>
+      <!-- Page number -->
+      <v-btn
+        v-else
+        :class="['page-button', { 'active-page': page.current }]"
+        tabindex="0"
+        min-width="35"
+        height="35"
+        tile
+        width="35"
+        :aria-current="page.current ? 'page' : undefined"
+        :aria-label="
+          page.current
+            ? `Current page, Page ${page.value}`
+            : `Go to Page ${page.value}`
+        "
+        @click="onChange(page.value)"
+        @keyup.enter="onChange(page.value)"
+      >
+        {{ page.value }}
+      </v-btn>
     </template>
 
+    <!-- Next button -->
     <v-btn
-      v-if="!(hidePrevNext && lastPageSelected())"
-      :tabindex="!hidePrevNext && lastPageSelected() ? -1 : 0"
-      :disabled="lastPageSelected()"
+      v-if="!(hidePrevNext && isLastPage)"
+      :disabled="isLastPage"
+      :tabindex="isLastPage && hidePrevNext ? -1 : 0"
       aria-label="Next Page"
       min-width="35"
       height="35"
       width="35"
-      nuxt
-      @click="updatePage(currentPage + 1)"
-      @keyup.enter="updatePage(currentPage + 1)"
+      @click="onChange(currentPage + 1)"
+      @keyup.enter="onChange(currentPage + 1)"
     >
       <v-icon>mdi-chevron-right</v-icon>
     </v-btn>
@@ -97,117 +75,76 @@
 </template>
 
 <script setup>
-import { useRootStore } from "../../../stores/root";
-import { useRoute, computed, useI18n } from "#imports";
-const { locale } = useI18n();
-const route = useRoute();
-const rootStore = useRootStore();
+import { computed } from "vue";
 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
-  }
+  currentPage: { type: Number, required: true },
+  totalPages: { type: Number, required: true },
+  pagePadding: { type: Number, default: 1, validator: (v) => v > 0 },
+  pageGap: { type: Number, default: 2, validator: (v) => v > 0 },
+  hidePrevNext: { type: Boolean, default: false }
 });
+const emit = defineEmits(["update"]);
+const isFirstPage = computed(() => props.currentPage === 1);
+const isLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 0
+);
 const renderPages = computed(() => {
+  const createPage = (pageIndex) => ({
+    key: `page-${pageIndex}`,
+    value: pageIndex,
+    current: pageIndex === props.currentPage
+  });
+  const createGap = (pageIndex) => ({ key: `gap-${pageIndex}`, isGap: true });
   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));
+  for (let i = 1; i <= props.totalPages; i++) {
+    if (i === props.currentPage || i < props.pageGap || i > props.totalPages - props.pageGap + 1) {
+      pages.push(createPage(i));
       continue;
     }
-    let minimum;
-    let maximum;
+    let min, max;
     if (props.currentPage <= props.pageGap + props.pagePadding) {
-      minimum = props.pageGap + 1;
-      maximum = minimum + props.pagePadding * 2;
+      min = props.pageGap + 1;
+      max = min + props.pagePadding * 2;
     } else if (props.currentPage >= props.totalPages - props.pageGap - props.pagePadding) {
-      maximum = props.totalPages - props.pageGap;
-      minimum = maximum - props.pagePadding * 2;
+      max = props.totalPages - props.pageGap;
+      min = max - props.pagePadding * 2;
     } else {
-      minimum = props.currentPage - props.pagePadding;
-      maximum = props.currentPage + props.pagePadding;
+      min = props.currentPage - props.pagePadding;
+      max = props.currentPage + props.pagePadding;
     }
-    if (pageIndex >= minimum && pageIndex <= props.currentPage || pageIndex >= props.currentPage && pageIndex <= maximum) {
-      pages.push(createPage(pageIndex));
+    if (i >= min && i <= props.currentPage || i <= max && i >= props.currentPage) {
+      pages.push(createPage(i));
       continue;
     }
-    if (pageIndex === props.pageGap) {
-      if (minimum > props.pageGap + 1 && props.currentPage > props.pageGap + props.pagePadding + 1) {
-        pages.push(createGap(pageIndex));
+    if (i === props.pageGap) {
+      if (min > props.pageGap + 1 && props.currentPage > props.pageGap + props.pagePadding + 1) {
+        pages.push(createGap(i));
       } else {
-        pages.push(createPage(pageIndex));
+        pages.push(createPage(i));
       }
       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));
+    if (i === props.totalPages - props.pageGap + 1) {
+      if (max < props.totalPages - props.pageGap && props.currentPage < props.totalPages - props.pageGap - props.pagePadding) {
+        pages.push(createGap(i));
       } else {
-        pages.push(createPage(pageIndex));
+        pages.push(createPage(i));
       }
       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
-  );
+  const before = renderPages.value[index - 1];
+  const after = renderPages.value[index + 1] || { value: props.totalPages };
+  return Math.floor((before.value + after.value) / 2);
 };
+function onChange(page) {
+  emit("update", page);
+}
 </script>
 
-<style>
+<style scoped>
 .page-button{background-color:transparent;border:1px solid rgba(0,0,0,.2);color:#000;transition:background-color .3s ease,color .3s ease,transform .2s ease}.page-button:hover{background-color:#f0f0f0}.page-button.active-page{background-color:#000!important;color:#fff!important;transform:scale(1.05)}.page-button:focus{box-shadow:0 0 0 2px rgba(0,0,0,.3);outline:none}
 </style>

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

@@ -32,6 +32,7 @@
 </template>
 
 <script setup>
+import { nextTick } from "vue";
 import { useRootStore } from "../../../stores/root";
 import { capitalize } from "../../../composables/useUtils";
 import {
@@ -91,26 +92,53 @@ const itemTemplate = computed(
   )
 );
 const numberOfPages = computed(() => $stores[props.type].numberOfPages);
-const page = computed(() => +$stores[props.type].page);
+const page = computed(() => {
+  const p = parseInt(route.query.page, 10);
+  return !isNaN(p) && p > 0 ? p : 1;
+});
 const items = computed(() => $stores[props.type].items);
 console.log("setup list");
-onMounted(() => {
-  console.log("mounted list");
+onMounted(async () => {
+  rootStore.loadRouteQuery(props.type);
+  const pageParam = parseInt(route.query.page, 10);
+  if (!isNaN(pageParam) && pageParam > 1) {
+    await rootStore.updatePage({
+      page: pageParam,
+      type: props.type,
+      lang: locale.value
+    });
+  }
+  try {
+    await rootStore.update(props.type, locale.value);
+  } catch (e) {
+    console.error("Error fetching list:", e);
+  }
 });
-rootStore.loadRouteQuery(props.type);
 try {
   await rootStore.update(props.type, locale.value);
 } catch (error) {
   console.log("error fetching update list: ", error);
 }
+watch(
+  () => page.value,
+  async (newPage) => {
+    const query = {
+      ...route.query,
+      page: newPage > 1 ? String(newPage) : void 0
+    };
+    navigateTo({ query }, { replace: true });
+    await nextTick();
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+);
 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"
+async function onPageChange(newPage) {
+  await rootStore.updatePage({
+    page: newPage,
+    type: props.type,
+    lang: locale.value
   });
-};
+}
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.117",
+  "version": "1.0.118",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",