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

Refactored Paginator

pull/5677/head
Cagatay Civici 2024-04-26 11:07:08 +03:00
parent bee86061aa
commit 28d563323c
3 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/lib/paginator/style/PaginatorStyle.js
View File

@ -8,47 +8,47 @@ const classes = {
[`p-paginator-${key}`]: instance.hasBreakpoints() [`p-paginator-${key}`]: instance.hasBreakpoints()
} }
], ],
start: 'p-paginator-left-content', start: 'p-paginator-content-start',
end: 'p-paginator-right-content', end: 'p-paginator-content-end',
firstPageButton: ({ instance }) => [ firstPageButton: ({ instance }) => [
'p-paginator-first p-paginator-element p-link', 'p-paginator-first',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
firstPageIcon: 'p-paginator-icon', firstPageIcon: 'p-paginator-first-icon',
previousPageButton: ({ instance }) => [ previousPageButton: ({ instance }) => [
'p-paginator-prev p-paginator-element p-link', 'p-paginator-prev',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
previousPageIcon: 'p-paginator-icon', previousPageIcon: 'p-paginator-prev-icon',
nextPageButton: ({ instance }) => [ nextPageButton: ({ instance }) => [
'p-paginator-next p-paginator-element p-link', 'p-paginator-next',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
nextPageIcon: 'p-paginator-icon', nextPageIcon: 'p-paginator-next-icon',
lastPageButton: ({ instance }) => [ lastPageButton: ({ instance }) => [
'p-paginator-last p-paginator-element p-link', 'p-paginator-last',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
lastPageIcon: 'p-paginator-icon', lastPageIcon: 'p-paginator-last-icon',
pages: 'p-paginator-pages', pages: 'p-paginator-pages',
pageButton: ({ props, pageLink }) => [ pageButton: ({ props, pageLink }) => [
'p-paginator-page p-paginator-element p-link', 'p-paginator-page',
{ {
'p-highlight': pageLink - 1 === props.page 'p-paginator-page-active': pageLink - 1 === props.page
} }
], ],
current: 'p-paginator-current', current: 'p-paginator-current',
rowPerPageDropdown: 'p-paginator-rpp-options', rowPerPageDropdown: 'p-paginator-rpp-dropdown',
jumpToPageDropdown: 'p-paginator-page-options', jumpToPageDropdown: 'p-paginator-jtp-dropdown',
jumpToPageInput: 'p-paginator-page-input' jumpToPageInput: 'p-paginator-jtp-input'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

12
components/lib/themes/primeone/base/paginator/index.js
View File

@ -13,11 +13,11 @@ export default {
gap: 0.25rem; gap: 0.25rem;
} }
.p-paginator-left-content { .p-paginator-content-start {
margin-right: auto; margin-right: auto;
} }
.p-paginator-right-content { .p-paginator-content-end {
margin-left: auto; margin-left: auto;
} }
@ -41,9 +41,11 @@ export default {
height: 2.5rem; height: 2.5rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: 50%; border-radius: 50%;
padding: 0;
margin: 0;
} }
.p-paginator-page:not(.p-disabled):not(.p-highlight):hover, .p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover,
.p-paginator-first:not(.p-disabled):hover, .p-paginator-first:not(.p-disabled):hover,
.p-paginator-prev:not(.p-disabled):hover, .p-paginator-prev:not(.p-disabled):hover,
.p-paginator-next:not(.p-disabled):hover, .p-paginator-next:not(.p-disabled):hover,
@ -62,12 +64,12 @@ export default {
gap: 0.25rem; gap: 0.25rem;
} }
.p-paginator-page.p-highlight { .p-paginator-page.p-paginator-page-active {
background: ${dt('highlight.background')}; background: ${dt('highlight.background')};
color: ${dt('highlight.color')}; color: ${dt('highlight.color')};
} }
.p-paginator-page-input .p-inputtext { .p-paginator-jtp-input .p-inputtext {
max-width: 2.5rem; max-width: 2.5rem;
} }
` `

3
components/lib/themes/primeone/base/tree/index.js
View File

@ -58,7 +58,7 @@ export default {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
margin-right: 0.5rem; margin: 0 0.5rem 0 0;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: ${dt('tree.toggle.color')}; color: ${dt('tree.toggle.color')};
@ -67,6 +67,7 @@ export default {
border-radius: 50%; border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent; outline-color: transparent;
padding: 0;
} }
.p-tree-node-toggle-button:enabled:hover { .p-tree-node-toggle-button:enabled:hover {