From 11d2acbbf76f4365df460828f9901b47107a75e5 Mon Sep 17 00:00:00 2001
From: timothe <timothe@rezo-zero.com>
Date: Thu, 31 Oct 2024 13:17:33 +0100
Subject: [PATCH 1/4] feat: fix page length value

---
 .../VRoadizPaginatedList/VRoadizPaginatedList.vue     | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue b/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue
index 84ea35b6..64d47f1a 100644
--- a/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue
+++ b/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue
@@ -37,8 +37,9 @@ const items = computed(() => {
 
     return data.value?.['hydra:member'] || []
 })
-const totalItems = computed(() => {
-    return (data.value?.['hydra:totalItems'] / itemsPerPage.value) || 0
+const pageLength = computed(() => {
+    const totalItems = data.value?.['hydra:totalItems'] || 0
+    return Math.ceil(totalItems / itemsPerPage.value)
 })
 </script>
 
@@ -49,23 +50,23 @@ const totalItems = computed(() => {
     >
         <template v-if="items.length">
             <div
-                class="grid"
                 :class="$style.list"
+                class="grid"
             >
                 <template
                     v-for="(item, index) in items"
                     :key="itemBaseId + '-' + index"
                 >
                     <slot
-                        v-bind="{ item, classNames: $style.item, index }"
                         name="item"
+                        v-bind="{ item, classNames: $style.item, index }"
                     />
                 </template>
             </div>
             <VPagination
                 v-model="page"
-                :length="totalItems"
                 :class="$style.pagination"
+                :length="pageLength"
             />
         </template>
         <slot

From 292211b3e94b4118305404fb5f6e4a951d015e05 Mon Sep 17 00:00:00 2001
From: timothe <timothe@rezo-zero.com>
Date: Thu, 31 Oct 2024 13:18:42 +0100
Subject: [PATCH 2/4] chore: lint fix

---
 components/molecules/VRoadizImage/VRoadizImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/molecules/VRoadizImage/VRoadizImage.vue b/components/molecules/VRoadizImage/VRoadizImage.vue
index 0ba0b0b4..82af6aaf 100644
--- a/components/molecules/VRoadizImage/VRoadizImage.vue
+++ b/components/molecules/VRoadizImage/VRoadizImage.vue
@@ -60,7 +60,7 @@ export default defineComponent({
                     || (!isPicture.value
                         && !props.densities
                         && ($img.options.presets?.default?.sizes || $img.options.screens))
-                    || undefined,
+                        || undefined,
                 provider: 'interventionRequest',
                 modifiers: {
                     ...modifiers.value,

From 53003e3913b42aedeb65927762b44bbc64b9dcbd Mon Sep 17 00:00:00 2001
From: timothe <timothe@rezo-zero.com>
Date: Thu, 31 Oct 2024 14:20:37 +0100
Subject: [PATCH 3/4] chore: lint fix

---
 components/molecules/VRoadizImage/VRoadizImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/molecules/VRoadizImage/VRoadizImage.vue b/components/molecules/VRoadizImage/VRoadizImage.vue
index 82af6aaf..0ba0b0b4 100644
--- a/components/molecules/VRoadizImage/VRoadizImage.vue
+++ b/components/molecules/VRoadizImage/VRoadizImage.vue
@@ -60,7 +60,7 @@ export default defineComponent({
                     || (!isPicture.value
                         && !props.densities
                         && ($img.options.presets?.default?.sizes || $img.options.screens))
-                        || undefined,
+                    || undefined,
                 provider: 'interventionRequest',
                 modifiers: {
                     ...modifiers.value,

From ebbc8ef4d21418cfc51875cb1b8264fbc0261089 Mon Sep 17 00:00:00 2001
From: timothe <timothe@rezo-zero.com>
Date: Fri, 8 Nov 2024 12:14:55 +0100
Subject: [PATCH 4/4] feat: rename var and add slot type safety

---
 .../VRoadizPaginatedList/Default.stories.vue  | 17 +++++++++--
 .../VRoadizPaginatedList.vue                  | 30 ++++++++++++++-----
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/components/organisms/VRoadizPaginatedList/Default.stories.vue b/components/organisms/VRoadizPaginatedList/Default.stories.vue
index 7c3fb71d..7146c031 100644
--- a/components/organisms/VRoadizPaginatedList/Default.stories.vue
+++ b/components/organisms/VRoadizPaginatedList/Default.stories.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { delay, http, HttpResponse } from 'msw'
 
 const NUM_PAGES = 8
@@ -10,6 +10,14 @@ const props = defineProps({
     },
 })
 
+function generatePlaceholder(index: number) {
+    return {
+        '@id': `item-${index}`,
+        '@type': 'Custom item',
+        'title': undefined,
+    }
+}
+
 useMockRequest(
     http.get('*/items', async ({ request }) => {
         const url = new URL(request.url)
@@ -33,7 +41,10 @@ useMockRequest(
 <template>
     <NuxtStory>
         <ClientOnly>
-            <VRoadizPaginatedList url="/items">
+            <VRoadizPaginatedList
+                :generate-placeholder="generatePlaceholder"
+                url="/items"
+            >
                 <template #item="{ item, classNames }">
                     <div
                         v-if="item"
@@ -43,8 +54,8 @@ useMockRequest(
                     </div>
                     <div
                         v-else
-                        class="loading-animation"
                         :class="[classNames, $style.item]"
+                        class="loading-animation"
                     />
                 </template>
             </VRoadizPaginatedList>
diff --git a/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue b/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue
index 64d47f1a..092b02b0 100644
--- a/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue
+++ b/components/organisms/VRoadizPaginatedList/VRoadizPaginatedList.vue
@@ -1,6 +1,6 @@
-<script lang="ts" setup>
+<script generic="T extends JsonLdObject" lang="ts" setup>
 import type { ComponentPublicInstance, PropType } from 'vue'
-import type { HydraCollection, RoadizNodesSources, RoadizRequestNSParams } from '@roadiz/types'
+import type { HydraCollection, JsonLdObject, RoadizRequestNSParams } from '@roadiz/types'
 import { usePaginatedList } from '~/composables/use-paginated-list'
 
 const props = defineProps({
@@ -10,6 +10,7 @@ const props = defineProps({
     },
     params: Object as PropType<RoadizRequestNSParams>,
     itemElements: Array as PropType<(ComponentPublicInstance | HTMLElement)[]>,
+    generatePlaceholder: Function as PropType<(i: number) => T>,
 })
 
 const root = ref<HTMLElement | null>(null)
@@ -26,21 +27,35 @@ const { itemBaseId } = useList({
     url: props.url,
     params: internalParams,
 })
-const { data, status } = await useRoadizFetch<HydraCollection<RoadizNodesSources>>(props.url, {
+
+const { data, status } = await useRoadizFetch<HydraCollection<T>>(props.url, {
     params: internalParams,
     watch: [page],
 })
+
 const items = computed(() => {
     if (status.value === 'pending' || isScrollingToTop.value) {
-        return Array.from({ length: itemsPerPage.value }).map(() => null)
+        return [...Array(itemsPerPage.value).keys()].map((i: number) => {
+            return props.generatePlaceholder?.(i) || null
+        })
     }
 
     return data.value?.['hydra:member'] || []
 })
-const pageLength = computed(() => {
+
+const totalPages = computed(() => {
     const totalItems = data.value?.['hydra:totalItems'] || 0
     return Math.ceil(totalItems / itemsPerPage.value)
 })
+
+const hasMoreThanOnePage = computed(() => {
+    return (totalPages.value > itemsPerPage.value) || (page.value > 1)
+})
+
+defineSlots<{
+    'item': (props: { item: T | null, classNames: string, index: number }) => unknown
+    'no-result'?: () => unknown
+}>()
 </script>
 
 <template>
@@ -63,10 +78,11 @@ const pageLength = computed(() => {
                     />
                 </template>
             </div>
-            <VPagination
+            <LazyVPagination
+                v-if="hasMoreThanOnePage"
                 v-model="page"
                 :class="$style.pagination"
-                :length="pageLength"
+                :length="totalPages"
             />
         </template>
         <slot