From 64123c5cbdf7b983ec5b4c236845bca13c71d2f6 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Fri, 16 Feb 2024 14:44:56 +0300 Subject: [PATCH] Migrated paginator --- components/lib/theme/aura/index.js | 2 + components/lib/theme/aura/paginator/index.js | 106 ++++++++++++++++++ .../lib/theme/aura/paginator/package.json | 6 + 3 files changed, 114 insertions(+) create mode 100644 components/lib/theme/aura/paginator/index.js create mode 100644 components/lib/theme/aura/paginator/package.json diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 44459b8c7..1272d63a2 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -28,6 +28,7 @@ import metergroup from 'primevue/theme/aura/metergroup'; import orderlist from 'primevue/theme/aura/orderlist'; import organizationchart from 'primevue/theme/aura/organizationchart'; import overlaypanel from 'primevue/theme/aura/overlaypanel'; +import paginator from 'primevue/theme/aura/paginator'; import panel from 'primevue/theme/aura/panel'; import panelmenu from 'primevue/theme/aura/panelmenu'; import picklist from 'primevue/theme/aura/picklist'; @@ -198,6 +199,7 @@ export default { orderlist, organizationchart, overlaypanel, + paginator, panel, panelmenu, picklist, diff --git a/components/lib/theme/aura/paginator/index.js b/components/lib/theme/aura/paginator/index.js new file mode 100644 index 000000000..75a9c4800 --- /dev/null +++ b/components/lib/theme/aura/paginator/index.js @@ -0,0 +1,106 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + textColor: '{surface.700}' + }, + navigator: { + backgroundHover: '{surface.100}', + color: '{surface.500}', + colorHover: '{surface.600}' + }, + currentPageReport: { + textColor: '{surface.500}' + } + }, + dark: { + root: { + background: '{surface.900}', + textColor: '{surface.0}' + }, + navigator: { + backgroundHover: '{surface.800}', + color: '{surface.400}', + colorHover: '{surface.300}' + }, + currentPageReport: { + textColor: '{surface.400}' + } + } + } + }, + css: ` +.p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + background: var(--p-paginator-background); + color: var(--p-paginator-text-color); + border: 0 none; + padding: 0.5rem 1rem; + border-radius: var(--p-rounded-base); + gap: 0.25rem; +} + +.p-paginator-left-content { + margin-right: auto; +} + +.p-paginator-right-content { + margin-left: auto; +} + +.p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + background: transparent; + border: 0 none; + color: var(--p-paginator-navigator-color); + min-width: 2.5rem; + height: 2.5rem; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); + border-radius: 50%; +} + +.p-paginator-page:not(.p-disabled):not(.p-highlight):hover, +.p-paginator-first:not(.p-disabled):hover, +.p-paginator-prev:not(.p-disabled):hover, +.p-paginator-next:not(.p-disabled):hover, +.p-paginator-last:not(.p-disabled):hover { + background: var(--p-paginator-navigator-background-hover); + color: var(--p-paginator-navigator-color-hover); +} + +.p-paginator-current { + color: var(--p-paginator-current-page-report-text-color); +} + +.p-paginator-pages { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.p-paginator-page.p-highlight { + background: var(--p-list-item-highlight-background); + color: var(--p-list-item-highlight-text-color); +} + +.p-paginator-page-input .p-inputtext { + max-width: 2.5rem; +} +` +}; diff --git a/components/lib/theme/aura/paginator/package.json b/components/lib/theme/aura/paginator/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/paginator/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}