Refactored Paginator
parent
bee86061aa
commit
28d563323c
|
@ -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({
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue