Feat(VRoadizPaginatedList): set HydraCollection Item type from parent component

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>

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,20 +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 totalItems = computed(() => {
-    return (data.value?.['hydra:totalItems'] / itemsPerPage.value) || 0
+
+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>
@@ -49,23 +65,24 @@ 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
+            <LazyVPagination
+                v-if="hasMoreThanOnePage"
                 v-model="page"
-                :length="totalItems"
                 :class="$style.pagination"
+                :length="totalPages"
             />
         </template>
         <slot