Refactored DataView

pull/5677/head
Cagatay Civici 2024-04-26 00:39:48 +03:00
parent 59b315ca23
commit e6294869c4
3 changed files with 13 additions and 21 deletions

View File

@ -12,7 +12,7 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator')" :class="cx('paginator', { position: 'top' })"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
@page="onPage($event)" @page="onPage($event)"
:unstyled="unstyled" :unstyled="unstyled"
@ -45,7 +45,7 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator')" :class="cx('paginator', { position: 'bottom' })"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
@page="onPage($event)" @page="onPage($event)"
:unstyled="unstyled" :unstyled="unstyled"

View File

@ -9,9 +9,9 @@ const classes = {
} }
], ],
header: 'p-dataview-header', header: 'p-dataview-header',
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''), paginator: ({ position }) => 'p-dataview-paginator-' + position,
content: 'p-dataview-content', content: 'p-dataview-content',
emptyMessage: 'p-dataview-emptymessage', emptyMessage: 'p-dataview-empty-message', // TODO: remove?
footer: 'p-dataview-footer' footer: 'p-dataview-footer'
}; };

View File

@ -1,42 +1,34 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-dataview .p-paginator-top {
border-width: 0 0 1px 0;
border-radius: 0;
}
.p-dataview .p-paginator-bottom {
border-width: 0 0 1px 0;
border-radius: 0;
}
.p-dataview-header { .p-dataview-header {
background: ${dt('dataview.header.background')}; background: ${dt('dataview.header.background')};
color: ${dt('dataview.header.color')}; color: ${dt('dataview.header.color')};
border: 1px solid ${dt('dataview.header.border.color')}; border: 1px solid ${dt('dataview.header.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600;
} }
.p-dataview-content { .p-dataview-content {
background: ${dt('dataview.content.background')}; background: ${dt('dataview.content.background')};
color: ${dt('dataview.content.color')}; color: ${dt('dataview.content.color')};
border: 0 none;
padding: 0;
} }
.p-dataview-footer { .p-dataview-footer {
background: ${dt('dataview.footer.background')}; background: ${dt('dataview.footer.background')};
color: ${dt('dataview.footer.color')}; color: ${dt('dataview.footer.color')};
border: 1px solid ${dt('dataview.footer.border.color')}; border: 1px solid ${dt('dataview.footer.border.color')};
border-width: 0 0 1px 0; border-width: 1px 0 0 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600;
} }
.p-dataview-layout-options.p-selectbutton .p-button svg { .p-dataview-paginator-top {
position: relative; border: solid ${dt('dataview.header.border.color')};
border-width: 0 0 1px 0;
}
.p-dataview-paginator-bottom {
border: solid ${dt('dataview.footer.border.color')};
border-width: 1px 0 0 0;
} }
` `
}; };