feat: with pageNumber

Author: vis97c

packages/common-helpers/src/locale/en.ts

@@ -198,6 +198,7 @@ export const localeTable: tLocaleTable = {
 export const localePagination: tLocalePagination = {
 	pagination_items: "No items | Single item | {count} items",
 	pagination_pages: "No pages | Single page | {count} pages",
+	pagination_page: "Page {count} of",
 	// swal: {},
 };
 

packages/common-helpers/src/locale/es.ts

@@ -199,6 +199,7 @@ export const localeTable: tLocaleTable = {
 export const localePagination: tLocalePagination = {
 	pagination_items: "Sin elementos | Único elemento | {count} elementos",
 	pagination_pages: "Sin páginas | Única página | {count} páginas",
+	pagination_page: "Página {count} de",
 	// swal: {},
 };
 

packages/common-types/src/fetch.ts

@@ -16,6 +16,7 @@ export interface iPageEdge<T, C extends string | number = string> {
 export interface iPageInfo<C extends string | number = string> {
 	nextCursor?: C;
 	previousCursor?: C;
+	pageNumber?: number;
 	hasNextPage: boolean;
 	hasPreviousPage: boolean;
 	path?: string;

packages/common-types/src/locale.ts

@@ -299,6 +299,8 @@ export type tLocalePagination = {
 	pagination_items: string;
 	/** @example "No pages | Single page | {count} pages" */
 	pagination_pages: string;
+	/** @example "Page {count} of" */
+	pagination_page: string;
 	// swal: {};
 };
 

packages/components-vue/src/components/pagination/Simple.vue

@@ -10,7 +10,7 @@
 			<p class="--txtSize-sm">
 				{{ t("pagination_items", currentPage.totalCount) }}
 				⋅
-				{{ t("pagination_pages", Math.ceil(currentPage.totalCount / modelValue.first)) }}
+				{{ pageCountText }}
 			</p>
 		</li>
 		<li v-if="!hidePageLength && currentPage.totalCount > 5">
@@ -113,9 +113,22 @@
 	 * PaginationSimple first model
 	 */
 	const firstModel = computed({
-		get: () => props.modelValue?.first ?? defaultFirst,
+		get: () => props.modelValue?.first ?? defaultFirst ?? 0,
 		set(first) {
 			emit("update:model-value", { ...props.modelValue, first });
 		},
 	});
+
+	const pageCountText = computed(() => {
+		const totalCount = props.currentPage?.totalCount ?? 0;
+		const pagesText = t("pagination_pages", Math.ceil(totalCount / firstModel.value));
+
+		if (!props.currentPage?.pageInfo.pageNumber) {
+			const pageText = t("pagination_page", props.currentPage?.pageInfo.pageNumber);
+
+			return `${pageText} ${pagesText}`;
+		}
+
+		return pagesText;
+	});
 </script>