Skip to content

Commit

Permalink
Fixed #6679 - Paginator: Headless mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Oct 30, 2024
1 parent 31e8344 commit bf5aa08
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 83 deletions.
54 changes: 54 additions & 0 deletions packages/primevue/src/paginator/Paginator.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,60 @@ export interface PaginatorSlots {
*/
class: string;
}): VNode[];
/**
* Custom container slot.
* @param {Object} scope - container slot's params.
*/
container(scope: {
/**
* Index of first record
*/
first: number;
/**
* Index of last record
*/
last: number;
/**
* Number of rows to display in new page
*/
rows: number;
/**
* New page number
*/
page: number;
/**
* Total number of pages
*/
pageCount?: number;
/**
* Total records
*/
totalRecords?: number;
/**
* First page function.
* @param {Event} event - Browser event
*/
firstPageCallback: (event: Event) => void;
/**
* Last page function.
* @param {Event} event - Browser event
*/
lastPageCallback: (event: Event) => void;
/**
* Previous page function.
* @param {Event} event - Browser event
*/
prevCallback: (event: Event) => void;
/**
* Next page function.
* @param {Event} event - Browser event
*/
nextCallback: (event: Event) => void;
/**
* Row change function.
*/
rowChangeCallback: (value: number) => void;
}): VNode[];
}

/**
Expand Down
186 changes: 103 additions & 83 deletions packages/primevue/src/paginator/Paginator.vue
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,106 @@
<template>
<nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptmi('paginatorContainer')">
<div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
<div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
<slot name="start" :state="currentState"></slot>
</div>
<div :class="cx('content')" v-bind="ptm('content')">
<template v-for="item in value" :key="item">
<FirstPageLink
v-if="item === 'FirstPageLink'"
:aria-label="getAriaLabel('firstPageLabel')"
:template="$slots.firsticon || $slots.firstpagelinkicon"
@click="changePageToFirst($event)"
:disabled="isFirstPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<PrevPageLink
v-else-if="item === 'PrevPageLink'"
:aria-label="getAriaLabel('prevPageLabel')"
:template="$slots.previcon || $slots.prevpagelinkicon"
@click="changePageToPrev($event)"
:disabled="isFirstPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<NextPageLink
v-else-if="item === 'NextPageLink'"
:aria-label="getAriaLabel('nextPageLabel')"
:template="$slots.nexticon || $slots.nextpagelinkicon"
@click="changePageToNext($event)"
:disabled="isLastPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<LastPageLink
v-else-if="item === 'LastPageLink'"
:aria-label="getAriaLabel('lastPageLabel')"
:template="$slots.lasticon || $slots.lastpagelinkicon"
@click="changePageToLast($event)"
:disabled="isLastPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :unstyled="unstyled" :pt="pt" />
<CurrentPageReport
v-else-if="item === 'CurrentPageReport'"
aria-live="polite"
:template="currentPageReportTemplate"
:currentPage="currentPage"
:page="page"
:pageCount="pageCount"
:first="d_first"
:rows="d_rows"
:totalRecords="totalRecords"
:unstyled="unstyled"
:pt="pt"
/>
<RowsPerPageDropdown
v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
:aria-label="getAriaLabel('rowsPerPageLabel')"
:rows="d_rows"
:options="rowsPerPageOptions"
@rows-change="onRowChange($event)"
:disabled="empty"
:templates="$slots"
:unstyled="unstyled"
:pt="pt"
/>
<JumpToPageDropdown
v-else-if="item === 'JumpToPageDropdown'"
:aria-label="getAriaLabel('jumpToPageDropdownLabel')"
:page="page"
:pageCount="pageCount"
@page-change="changePage($event)"
:disabled="empty"
:templates="$slots"
:unstyled="unstyled"
:pt="pt"
/>
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
</template>
</div>
<div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
<slot name="end" :state="currentState"></slot>
</div>
<slot
v-if="$slots.container"
name="container"
:first="d_first + 1"
:last="last"
:rows="d_rows"
:page="page"
:pageCount="pageCount"
:totalRecords="totalRecords"
:firstPageCallback="changePageToFirst"
:lastPageCallback="changePageToLast"
:prevCallback="changePageToPrev"
:nextCallback="changePageToNext"
:rowChangeCallback="onRowChange"
/>
<template v-else>
<div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
<slot name="start" :state="currentState"></slot>
</div>
<div :class="cx('content')" v-bind="ptm('content')">
<template v-for="item in value" :key="item">
<FirstPageLink
v-if="item === 'FirstPageLink'"
:aria-label="getAriaLabel('firstPageLabel')"
:template="$slots.firsticon || $slots.firstpagelinkicon"
@click="changePageToFirst($event)"
:disabled="isFirstPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<PrevPageLink
v-else-if="item === 'PrevPageLink'"
:aria-label="getAriaLabel('prevPageLabel')"
:template="$slots.previcon || $slots.prevpagelinkicon"
@click="changePageToPrev($event)"
:disabled="isFirstPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<NextPageLink
v-else-if="item === 'NextPageLink'"
:aria-label="getAriaLabel('nextPageLabel')"
:template="$slots.nexticon || $slots.nextpagelinkicon"
@click="changePageToNext($event)"
:disabled="isLastPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<LastPageLink
v-else-if="item === 'LastPageLink'"
:aria-label="getAriaLabel('lastPageLabel')"
:template="$slots.lasticon || $slots.lastpagelinkicon"
@click="changePageToLast($event)"
:disabled="isLastPage || empty"
:unstyled="unstyled"
:pt="pt"
/>
<PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :unstyled="unstyled" :pt="pt" />
<CurrentPageReport
v-else-if="item === 'CurrentPageReport'"
aria-live="polite"
:template="currentPageReportTemplate"
:currentPage="currentPage"
:page="page"
:pageCount="pageCount"
:first="d_first"
:rows="d_rows"
:totalRecords="totalRecords"
:unstyled="unstyled"
:pt="pt"
/>
<RowsPerPageDropdown
v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
:aria-label="getAriaLabel('rowsPerPageLabel')"
:rows="d_rows"
:options="rowsPerPageOptions"
@rows-change="onRowChange($event)"
:disabled="empty"
:templates="$slots"
:unstyled="unstyled"
:pt="pt"
/>
<JumpToPageDropdown
v-else-if="item === 'JumpToPageDropdown'"
:aria-label="getAriaLabel('jumpToPageDropdownLabel')"
:page="page"
:pageCount="pageCount"
@page-change="changePage($event)"
:disabled="empty"
:templates="$slots"
:unstyled="unstyled"
:pt="pt"
/>
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
</template>
</div>
<div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
<slot name="end" :state="currentState"></slot>
</div>
</template>
</div>
</nav>
</template>
Expand Down Expand Up @@ -317,6 +334,9 @@ export default {
},
currentPage() {
return this.pageCount > 0 ? this.page + 1 : 0;
},
last() {
return Math.min(this.d_first + this.rows, this.totalRecords);
}
},
components: {
Expand Down

0 comments on commit bf5aa08

Please sign in to comment.