Pagination
Basic usage
Selected page: 1
<script setup lang="ts">
import {
NmorphPagination,
NmorphCard,
NmorphButton,
NmorphNumberInput,
NmorphSkeleton,
NmorphSkeletonItem,
} from "@nmorph/nmorph-ui-kit";
const quantityElementsOnPage = ref(10);
const elements = ref<Elements>([]);
const total = ref<number>(0);
const loading = ref(false);
const currentPage = ref(1);
const disabled = ref(false);
type Elements = Array<{ id: string; body: string }>;
interface SomeResponse {
totalElementsQuantity: number;
elements: Elements;
}
const fetchFakeData = async (page: number): Promise<SomeResponse> => {
return new Promise((resolve) => {
setTimeout(() => {
const startIndex = page * 10;
resolve({
totalElementsQuantity: 40,
elements: Array.from(
{ length: quantityElementsOnPage.value },
(_, index) => {
const id = (startIndex + index).toString();
return {
id,
body: `Element ${id}`,
};
},
),
});
}, 2000);
});
};
const getData = async (page: number) => {
try {
loading.value = true;
disabled.value = true;
const data = await fetchFakeData(page);
elements.value = data.elements;
total.value = data.totalElementsQuantity;
} catch (error) {
console.error("Error fetching data:", error);
} finally {
disabled.value = false;
loading.value = false;
}
};
const placeholderElements = computed<Elements>(() =>
Array.from({ length: quantityElementsOnPage.value }, (_, index) => ({
id: `placeholder-${index}`,
body: "",
})),
);
const visibleElements = computed(() =>
loading.value ? placeholderElements.value : elements.value,
);
const toggleDisabled = () => {
disabled.value = !disabled.value;
};
const changeQuantityElementsOnPageHandler = (value: number) => {
quantityElementsOnPage.value = value;
getData(currentPage.value);
};
const quantityElementsOnPageModel = computed({
get: () => quantityElementsOnPage.value,
set: changeQuantityElementsOnPageHandler,
});
const currentPageModel = computed({
get: () => currentPage.value,
set: (value: number) => {
currentPage.value = value;
getData(value - 1);
},
});
getData(0);
</script><template>
<div class="pagination-basic-usage-overview">
<div class="actions">
<div class="actions__element">
<p>Selected page: {{ currentPage }}</p>
</div>
<div class="actions__element">
<NmorphButton text="Toggle disabled" @click="toggleDisabled" />
</div>
<div class="actions__element">
<NmorphNumberInput
v-model="quantityElementsOnPageModel"
:fill="false"
/>
</div>
</div>
<div class="cards">
<div class="cards__container">
<div
class="cards__card"
v-for="card in visibleElements"
:key="card.id"
>
<NmorphSkeleton v-if="loading" class="cards__skeleton" loading>
<template #template>
<NmorphSkeletonItem
variant="rect"
width="100%"
height="70px"
/>
</template>