vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add headless paginator demo

pull/6687/head
Cagatay Civici 2024-10-30 14:31:17 +03:00
parent b59ad4db99
commit 8080cf5926
5 changed files with 52 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/showcase/doc/paginator/CurrentPageReportDoc.vue
View File

@ -1,7 +1,7 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Current page report item in the template displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;</p>
<ul class="mb-6 leading-loose">
<ul class="mb-6 leading-relaxed">
<li>{currentPage}</li>
<li>{totalPages}</li>
<li>{rows}</li>

67
apps/showcase/doc/paginator/HeadlessDoc.vue
View File

@ -1,14 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
<p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements. The template receives the following data;</p>
<ul class="mb-6 leading-relaxed">
<li>first</li>
<li>last</li>
<li>rows</li>
<li>page</li>
<li>pageCount</li>
<li>totalRecords</li>
<li>firstPageCallback</li>
<li>lastPageCallback</li>
<li>prevPageCallback</li>
<li>nextPageCallback</li>
<li>rowChangeCallback</li>
</ul>
</DocSectionText>
<div class="card">
<Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
<div class="flex items-center gap-2">
<Button icon="pi pi-chevron-left" severity="secondary" text @click="prevCallback" />
<div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
<Button icon="pi pi-chevron-right" severity="secondary" text @click="nextCallback" />
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
<div class="text-primary-contrast font-medium">
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
</div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
</div>
</template>
</Paginator>
@ -23,11 +39,14 @@ export default {
code: {
basic: `
<Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
<div class="flex items-center gap-2">
<Button icon="pi pi-chevron-left" severity="secondary" text rounded @click="prevCallback" />
<div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
<Button icon="pi pi-chevron-right" severity="secondary" text rounded @click="nextCallback" />
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
<div class="text-primary-contrast font-medium">
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
</div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
</div>
</template>
</Paginator>
@ -36,11 +55,14 @@ export default {
<template>
<div class="card">
<Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
<div class="flex items-center gap-2">
<Button icon="pi pi-chevron-left" severity="secondary" text rounded @click="prevCallback" />
<div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
<Button icon="pi pi-chevron-right" severity="secondary" text rounded @click="nextCallback" />
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
<div class="text-primary-contrast font-medium">
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
</div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
</div>
</template>
</Paginator>
@ -54,11 +76,14 @@ export default {
<template>
<div class="card">
<Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
<div class="flex items-center gap-2">
<Button icon="pi pi-chevron-left" severity="secondary" text rounded @click="prevCallback" />
<div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
<Button icon="pi pi-chevron-right" severity="secondary" text rounded @click="nextCallback" />
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
<div class="text-primary-contrast font-medium">
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
</div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
</div>
</template>
</Paginator>

2
apps/showcase/doc/paginator/TemplateDoc.vue
View File

@ -4,7 +4,7 @@
Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
can be placed inside a paginator in any order.
</p>
<ul class="mb-6 leading-loose">
<ul class="mb-6 leading-relaxed">
<li>FirstPageLink</li>
<li>PrevPageLink</li>
<li>PageLinks</li>

4
packages/primevue/src/paginator/Paginator.d.ts vendored
View File

@ -459,12 +459,12 @@ export interface PaginatorSlots {
* Previous page function.
* @param {Event} event - Browser event
*/
prevCallback: (event: Event) => void;
prevPageCallback: (event: Event) => void;
/**
* Next page function.
* @param {Event} event - Browser event
*/
nextCallback: (event: Event) => void;
nextPageCallback: (event: Event) => void;
/**
* Row change function.
*/

4
packages/primevue/src/paginator/Paginator.vue
View File

@ -12,8 +12,8 @@
:totalRecords="totalRecords"
:firstPageCallback="changePageToFirst"
:lastPageCallback="changePageToLast"
:prevCallback="changePageToPrev"
:nextCallback="changePageToNext"
:prevPageCallback="changePageToPrev"
:nextPageCallback="changePageToNext"
:rowChangeCallback="onRowChange"
/>
<template v-else>