Fixed #6679 - Paginator: Headless mode
tugcekucukoglu
parent
31e834447c
commit
bf5aa0872f
|
|
@ -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[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue