BasePagination

import BasePagination from "@wikicasa-dev/components/UIKit/BasePagination";

Use it under paginated lists: search results, agencies, favorites, messages. It computes the pages from count (total items) and limit (items per page, default 25) and tracks the current page with v-model:page-number (1-based, default 1).

Two modes:

• Full (default): ‹ 1 … 4 5 [6] 7 8 … 40 ›. siblings (default 3) sets how many numbers surround the current one.
• Compact (small): only ‹ prev, current page, next ›, with optional prevLabel / nextLabel text. Use it on mobile.

Without baseUrl the items are clickable <span>s that only update the model (fine for client-side lists and mockups). With baseUrl every item is a real link, which is what SEO pages need.

#Usage

<script setup lang="ts">
import BasePagination from "@wikicasa-dev/components/UIKit/BasePagination";
import { ref } from "vue";

const page = ref(1);
const totalListings = 1234; // static mock
</script>

<template>
  <BasePagination
    v-model:page-number="page"
    :count="totalListings"
    :limit="25"
    style="display: flex; justify-content: center; margin-top: 30px"
  />

  <BasePagination
    v-model:page-number="page"
    :count="totalListings"
    small
    prev-label="Precedente"
    next-label="Successiva"
    style="display: flex; justify-content: center"
  />
</template>

#Do / Don't

• Render it only when there is more than one page (v-if="count > limit"); with count 0 it renders an empty <nav>.
• baseUrl must be an absolute URL (https://www.wikicasa.it/vendita-case/milano/). A relative path fails to parse and no href is produced. The page goes in the p query parameter (change it with pageQueryParameter); page 1 drops the parameter.
• In a router app pass the link component as linkTag (it receives both href and to) and extra link attributes via linkProps.
• formatter formats the displayed numbers (e.g. 1.234 with Italian separators); it doesn't change the values.
• additionalCount adds extra items to count when computing the number of pages.

#Styling hooks

arrowColor sets the arrow color (hex string, default #2B5DFF). Alignment and spacing go in your own class/style on the component root (<nav>).

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
count	number	0
limit	number	25
siblings	number	3
additionalCount	number	0
arrowColor	string	"#2B5DFF"
small	boolean	false
prevLabel	string	""
nextLabel	string	""
prevDataCy	string
nextDataCy	string
linkProps	Record<string, unknown>
linkTag	"a" | Component	"a"
baseUrl	string
pageQueryParameter	string	"p"
formatter	((value?: Nullable<number> | undefined) => string)
pageNumber	Optional<number>	1

Events

Name	Payload
update:pageNumber	[value: Optional<number>]

v-model

• v-model:pageNumber (Optional<number>)

Slots

None.

Exposed (template ref)

None.