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

Fixed #3921 - DataTable and TreeTable: new Paginator dropdown icon slots

pull/4402/head
Tuğçe Küçükoğlu 2023-09-06 11:50:14 +03:00
parent 1b300b54f0
commit 43faf8704d
8 changed files with 100 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/lib/datatable/DataTable.d.ts vendored
View File

@ -1224,6 +1224,26 @@ export interface DataTableSlots {
* Custom paginator last page link icon template.
*/
paginatorlastpagelinkicon(): VNode[];
/**
* Custom paginatorrowsperpagedropdownicon template.
* @param {Object} scope - paginator rowsperpagedropdownicon's params.
*/
paginatorrowsperpagedropdownicon(scope: {
/**
* Style class of the paginator rowsperpagedropdown icon.
*/
class: string;
}): VNode[];
/**
* Custom paginatorjumptopagedropdownicon template.
* @param {Object} scope - paginator jumptopagedropdownicon's params.
*/
paginatorjumptopagedropdownicon(scope: {
/**
* Style class of the paginator jumptopagedropdown icon.
*/
class: string;
}): VNode[];
}
/**
* Defines valid emits in Datatable component.

12
components/lib/datatable/DataTable.vue
View File

@ -45,6 +45,12 @@
<template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
<slot name="paginatorlastpagelinkicon"></slot>
</template>
<template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
<slot name="paginatorjumptopagedropdownicon"></slot>
</template>
<template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template>
</DTPaginator>
<div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')">
<DTVirtualScroller
@ -257,6 +263,12 @@
<template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
<slot name="paginatorlastpagelinkicon"></slot>
</template>
<template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon="slotProps">
<slot name="paginatorjumptopagedropdownicon" :class="slotProps.class"></slot>
</template>
<template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template>
</DTPaginator>
<div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
<span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('reorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">

9
components/lib/paginator/JumpToPageDropdown.vue
View File

@ -11,7 +11,11 @@
:pt="ptm('jumpToPageDropdown')"
data-pc-section="jumptopagedropdown"
data-pc-group-section="pagedropdown"
></JTPDropdown>
>
<template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">
<component :is="templates['jumptopagedropdownicon']" :class="slotProps.class" />
</template>
</JTPDropdown>
</template>
<script>
@ -26,7 +30,8 @@ export default {
props: {
page: Number,
pageCount: Number,
disabled: Boolean
disabled: Boolean,
templates: null
},
methods: {
onChange(value) {

20
components/lib/paginator/Paginator.d.ts vendored
View File

@ -302,6 +302,26 @@ export interface PaginatorSlots {
* Custom last page link icon template.
*/
lastpagelinkicon(): VNode[];
/**
* Custom rowsperpagedropdownicon template.
* @param {Object} scope - rowsperpagedropdownicon's params.
*/
rowsperpagedropdownicon(scope: {
/**
* Style class of the rowsperpagedropdown icon.
*/
class: string;
}): VNode[];
/**
* Custom jumptopagedropdownicon template.
* @param {Object} scope - jumptopagedropdownicon's params.
*/
jumptopagedropdownicon(scope: {
/**
* Style class of the jumptopagedropdown icon.
*/
class: string;
}): VNode[];
}
/**

2
components/lib/paginator/Paginator.vue
View File

@ -30,6 +30,7 @@
:options="rowsPerPageOptions"
@rows-change="onRowChange($event)"
:disabled="empty"
:templates="$slots"
:unstyled="unstyled"
:pt="pt"
/>
@ -40,6 +41,7 @@
:pageCount="pageCount"
@page-change="changePage($event)"
:disabled="empty"
:templates="$slots"
:unstyled="unstyled"
:pt="pt"
/>

9
components/lib/paginator/RowsPerPageDropdown.vue
View File

@ -11,7 +11,11 @@
:pt="ptm('rowPerPageDropdown')"
data-pc-section="rowperpagedropdown"
data-pc-group-section="pagedropdown"
></RPPDropdown>
>
<template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">
<component :is="templates['rowsperpagedropdownicon']" :class="slotProps.class" />
</template>
</RPPDropdown>
</template>
<script>
@ -26,7 +30,8 @@ export default {
props: {
options: Array,
rows: Number,
disabled: Boolean
disabled: Boolean,
templates: null
},
methods: {
onChange(value) {

20
components/lib/treetable/TreeTable.d.ts vendored
View File

@ -655,6 +655,26 @@ export interface TreeTableSlots {
* Custom paginator last page link icon template.
*/
paginatorlastpagelinkicon(): VNode[];
/**
* Custom paginatorrowsperpagedropdownicon template.
* @param {Object} scope - paginator rowsperpagedropdownicon's params.
*/
paginatorrowsperpagedropdownicon(scope: {
/**
* Style class of the paginator rowsperpagedropdown icon.
*/
class: string;
}): VNode[];
/**
* Custom paginatorjumptopagedropdownicon template.
* @param {Object} scope - paginator jumptopagedropdownicon's params.
*/
paginatorjumptopagedropdownicon(scope: {
/**
* Style class of the paginator jumptopagedropdown icon.
*/
class: string;
}): VNode[];
}
/**

12
components/lib/treetable/TreeTable.vue
View File

@ -44,6 +44,12 @@
<template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
<slot name="paginatorlastpagelinkicon"></slot>
</template>
<template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
<slot name="paginatorjumptopagedropdownicon"></slot>
</template>
<template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template>
</TTPaginator>
<div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
<table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
@ -144,6 +150,12 @@
<template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
<slot name="paginatorlastpagelinkicon"></slot>
</template>
<template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
<slot name="paginatorjumptopagedropdownicon"></slot>
</template>
<template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template>
</TTPaginator>
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
<slot name="footer"></slot>