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

[daveraynor]

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.

[CCodam]

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 "{"

primevue/packages/primevue/src/paginator/Paginator.vue

Line 210 in 69d0407

.p-paginator[${this.$attrSelector}],

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>

<script setup>
import { ref, onMounted } from 'vue';

const comPaginator = ref();

onMounted(() => {
    comPaginator.value.createStyle();
});
</script>