Paginator: Responsive paginator shows all variations at same time instead of at each breakpoint

primefaces / primevue

Next Generation Vue UI Component Library

MIT License

10.29k stars 1.21k forks source link

Describe the bug

The paginator component's responsive functionality isn't working. It shows all variations stacked instead of when resizing window.

You can go to the stackblitz link from the code examples in the primvue documentation

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-8fevuq?file=src%2FApp.vue,src%2Fmain.js

PrimeVue version

4.1.1

Vue version

4.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

chrome, safari, firefox

Steps to reproduce the behavior

No response

Expected behavior

Expecting paginator to display the single component that shows each variation at different screen sizes instead of all variants stacked on the same page.

This is due to the stylesheets being added in the wrong order. The highlighted one should be after the other two.

I'm not sure how we accomplish that. Maybe we need to wait for nextTick before calling or within the createStyle function?

Also, unrelated to this specific issue, there is syntax error in the css being generated. The "," needs to be replaced with a "{" https://github.com/primefaces/primevue/blob/69d0407fe6aa617bfd0f0d4cb5119d3446c1bf4d/packages/primevue/src/paginator/Paginator.vue#L210

[!TIP] Workaround https://stackblitz.com/edit/primevue-4-vite-issue-template-vgctwd?file=src%2FApp.vue

We ref the Paginator component

We call the createStyle() method at onMounted


<template>
<div class="card">
<Paginator
    ref="comPaginator"
    :template="{
        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
    }"
    :rows="10"
    :totalRecords="120">
</Paginator>
</div>
</template>

primefaces / primevue