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

View File

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

View File

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

View File

@ -58,7 +58,7 @@ export default {
overflow: hidden;
position: relative;
flex-shrink: 0;
margin-right: 0.5rem;
margin: 0 0.5rem 0 0;
width: 1.75rem;
height: 1.75rem;
color: ${dt('tree.toggle.color')};
@ -67,6 +67,7 @@ export default {
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')};
outline-color: transparent;
padding: 0;
}
.p-tree-node-toggle-button:enabled:hover {