Add Pagination component

Deprecate the paginator slot scope prop
Expose a pageCount slot scope prop instead (Math.ceil(totalCount / pageSize)

https://github.com/spatie/vue-data-component/blob/eefd8371192bfa5a685d0ad5b5d91f5b513916cc/src/components/DataComponent.js#L184

Add a new data-paginator renderless component. pages slot scope prop contains an object like the old paginator

<data-paginator :page="page" :page-count="pageCount">
    <ul slot-scope="{ pages }">
        <li v-for="page in pages" :class="{ 'is-active': page.active }">
            {{ page.number }}
        </li>
    </ul>
</data-paginator>

Add an optional :links-on-each-side prop to data-paginator to reduce the number of pages in the pages slot scope prop (idea stolen from https://laravel-news.com/laravel-5-7-pagination-link-customizations)

<data-paginator :page="page" :page-count="pageCount" :links-on-each-side="2">
    <ul slot-scope="{ pages, firstPage, lastPage }">
        <li :class="{ 'is-active': firstPage.active }">
            {{ firstPage.number }}
        </li>
        <li>...</li>
        <li v-for="page in pages" :class="{ 'is-active': page.active }">
            {{ page.number }}
        </li>
        <li>...</li>
        <li :class="{ 'is-active': lastPage.active }">
            {{ lastPage.number }}
        </li>
    </ul>
</data-paginator>

The last example is going to be a bit harder to implement. Some example (edge) cases:

<data-paginator :page="4" :page-count="10" :links-on-each-side="2">
1 ... 2 3 [4] 5 6 ... 10

<data-paginator :page="9" :page-count="10" :links-on-each-side="2">
1 ... 7 8 [9] 10

<data-paginator :page="2" :page-count="3" :links-on-each-side="2">
1 [2] 3

Other and better ideas are more than welcome 😄

spatie / vue-data-component

Add Pagination component #3