Skip to content

Commit 605d4c4

Browse files
tmorehousetmorehouse
authored
feat(b-pagination, b-pagination-nav): add pills style option (#4236)
1 parent d493298 commit 605d4c4

File tree

9 files changed

+146
-4
lines changed

9 files changed

+146
-4
lines changed

‎src/_utilities.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// --- BootstrapVue Utility Classes ---
1+
// --- BootstrapVue utility / helper classes ---
22

33
$bv-utility-classes-defined: false !default;
44

‎src/components/pagination-nav/README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,35 @@ smaller buttons or `'lg'` for larger buttons.
350350
<!-- b-pagination-nav-size.vue -->
351351
```
352352

353+
### Pill style
354+
355+
Easily switch to pill style buttons by setting hte `pills` prop
356+
357+
```html
358+
<template>
359+
<div class="overflow-auto">
360+
<div>
361+
<h6>Small Pills</h6>
362+
<b-pagination-nav pills size="sm" number-of-pages="10" base-url="#"></b-pagination-nav>
363+
</div>
364+
365+
<div class="mt-3">
366+
<h6>Default Pills</h6>
367+
<b-pagination-nav pills number-of-pages="10" base-url="#"></b-pagination-nav>
368+
</div>
369+
370+
<div class="mt-3">
371+
<h6>Large Pills</h6>
372+
<b-pagination-nav pills size="lg" number-of-pages="10" base-url="#"></b-pagination-nav>
373+
</div>
374+
</div>
375+
</template>
376+
377+
<!-- b-pagination-nav-pills.vue -->
378+
```
379+
380+
**Note:** Pill styling requires BootstrapVue's custom CSS/SCSS.
381+
353382
### Alignment
354383

355384
By default the pagination component is left aligned. Change the alignment to `center`, `right`

‎src/components/pagination-nav/_pagination-nav.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
// <pagination> and <pagination-nav> require the helper utility classes
2-
@import "../../utilities";
1+
// <pagination-nav> shares <pagination> SCSS
2+
@import "../pagination/index";

‎src/components/pagination-nav/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@
4848
"prop": "align",
4949
"description": "Alignment of the page buttons: 'start' (or 'left'), 'center', 'end' (or 'right'), or 'fill'"
5050
},
51+
{
52+
"prop": "pills",
53+
"version": "2.1.0",
54+
"description": "Applies pill styling to the pagination buttons"
55+
},
5156
{
5257
"prop": "hideGotoEndButtons",
5358
"description": "Hides the goto first and goto last page buttons"

‎src/components/pagination/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,46 @@ smaller buttons or `'lg'` for larger buttons.
224224
<!-- b-pagination-size.vue -->
225225
```
226226

227+
### Pill style
228+
229+
Easily switch to pill style buttons by setting hte `pills` prop
230+
231+
```html
232+
<template>
233+
<div class="overflow-auto">
234+
<div>
235+
<h6>Small Pills</h6>
236+
<b-pagination v-model="currentPage" pills :total-rows="rows" size="sm"></b-pagination>
237+
</div>
238+
239+
<div class="mt-3">
240+
<h6>Default Pills</h6>
241+
<b-pagination v-model="currentPage" pills :total-rows="rows"></b-pagination>
242+
</div>
243+
244+
<div class="mt-3">
245+
<h6>Large Pills</h6>
246+
<b-pagination v-model="currentPage" pills :total-rows="rows" size="lg"></b-pagination>
247+
</div>
248+
</div>
249+
</template>
250+
251+
<script>
252+
export default {
253+
data() {
254+
return {
255+
rows: 100,
256+
currentPage: 1
257+
}
258+
}
259+
}
260+
</script>
261+
262+
<!-- b-pagination-pills.vue -->
263+
```
264+
265+
**Note:** Pill styling requires BootstrapVue's custom CSS/SCSS.
266+
227267
### Alignment
228268

229269
By default the pagination component is left aligned. Change the alignment to `center`, `right`

‎src/components/pagination/_pagination.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,26 @@
11
// <pagination> and <pagination-nav> require the helper utility classes
22
@import "../../utilities";
3+
4+
$bv-pagination-classes-defined: false !default;
5+
6+
// Make sure to include these style definitions only once
7+
@if $bv-pagination-classes-defined == false {
8+
$bv-pagination-classes-defined: true;
9+
10+
// Pagination pill style
11+
.b-pagination-pills {
12+
.page-item {
13+
.page-link {
14+
border-radius: 50rem !important;
15+
margin-left: 0.25rem;
16+
line-height: 1;
17+
}
18+
19+
&:first-child {
20+
.page-link {
21+
margin-left: 0;
22+
}
23+
}
24+
}
25+
}
26+
}

‎src/components/pagination/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
"prop": "align",
3333
"description": "Alignment of the page buttons: 'start' (or 'left'), 'center', 'end' (or 'right'), or 'fill'"
3434
},
35+
{
36+
"prop": "pills",
37+
"version": "2.1.0",
38+
"description": "Applies pill styling to the pagination buttons"
39+
},
3540
{
3641
"prop": "hideGotoEndButtons",
3742
"description": "Hides the goto first and goto last page buttons"

‎src/components/pagination/pagination.spec.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ describe('pagination', () => {
1919
expect(wrapper.classes()).not.toContain('pagination-lg')
2020
expect(wrapper.classes()).not.toContain('justify-content-center')
2121
expect(wrapper.classes()).not.toContain('justify-content-end')
22+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
2223
// Attributes
2324
expect(wrapper.attributes('role')).toBe('menubar')
2425
expect(wrapper.attributes('aria-disabled')).toBe('false')
@@ -164,6 +165,30 @@ describe('pagination', () => {
164165
wrapper.destroy()
165166
})
166167

168+
it('has class "b-pagination-pills" when prop pills is set', async () => {
169+
const wrapper = mount(BPagination, {
170+
propsData: {
171+
pills: true,
172+
totalRows: 1,
173+
perPage: 1
174+
}
175+
})
176+
expect(wrapper.is('ul')).toBe(true)
177+
// Classes
178+
expect(wrapper.classes()).toContain('pagination')
179+
expect(wrapper.classes()).toContain('b-pagination')
180+
expect(wrapper.classes()).toContain('b-pagination-pills')
181+
expect(wrapper.classes()).not.toContain('pagination-lg')
182+
expect(wrapper.classes()).not.toContain('justify-content-center')
183+
expect(wrapper.classes()).not.toContain('justify-content-end')
184+
// Attributes
185+
expect(wrapper.attributes('role')).toBe('menubar')
186+
expect(wrapper.attributes('aria-disabled')).toBe('false')
187+
expect(wrapper.attributes('aria-label')).toBe('Pagination')
188+
189+
wrapper.destroy()
190+
})
191+
167192
it('has class "pagination-sm" when prop size="sm"', async () => {
168193
const wrapper = mount(BPagination, {
169194
propsData: {
@@ -180,6 +205,7 @@ describe('pagination', () => {
180205
expect(wrapper.classes()).not.toContain('pagination-lg')
181206
expect(wrapper.classes()).not.toContain('justify-content-center')
182207
expect(wrapper.classes()).not.toContain('justify-content-end')
208+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
183209
// Attributes
184210
expect(wrapper.attributes('role')).toBe('menubar')
185211
expect(wrapper.attributes('aria-disabled')).toBe('false')
@@ -204,6 +230,7 @@ describe('pagination', () => {
204230
expect(wrapper.classes()).toContain('pagination-lg')
205231
expect(wrapper.classes()).not.toContain('justify-content-center')
206232
expect(wrapper.classes()).not.toContain('justify-content-end')
233+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
207234
// Attributes
208235
expect(wrapper.attributes('role')).toBe('menubar')
209236
expect(wrapper.attributes('aria-disabled')).toBe('false')
@@ -229,6 +256,7 @@ describe('pagination', () => {
229256
expect(wrapper.classes()).not.toContain('pagination-lg')
230257
expect(wrapper.classes()).not.toContain('justify-content-center')
231258
expect(wrapper.classes()).not.toContain('justify-content-end')
259+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
232260
// Attributes
233261
expect(wrapper.attributes('role')).toBe('menubar')
234262
expect(wrapper.attributes('aria-disabled')).toBe('false')
@@ -253,6 +281,7 @@ describe('pagination', () => {
253281
expect(wrapper.classes()).not.toContain('pagination-lg')
254282
expect(wrapper.classes()).toContain('justify-content-center')
255283
expect(wrapper.classes()).not.toContain('justify-content-end')
284+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
256285
// Attributes
257286
expect(wrapper.attributes('role')).toBe('menubar')
258287
expect(wrapper.attributes('aria-disabled')).toBe('false')
@@ -277,6 +306,7 @@ describe('pagination', () => {
277306
expect(wrapper.classes()).not.toContain('pagination-lg')
278307
expect(wrapper.classes()).not.toContain('justify-content-center')
279308
expect(wrapper.classes()).toContain('justify-content-end')
309+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
280310
// Attributes
281311
expect(wrapper.attributes('role')).toBe('menubar')
282312
expect(wrapper.attributes('aria-disabled')).toBe('false')
@@ -301,6 +331,7 @@ describe('pagination', () => {
301331
expect(wrapper.classes()).not.toContain('pagination-lg')
302332
expect(wrapper.classes()).not.toContain('justify-content-center')
303333
expect(wrapper.classes()).toContain('justify-content-end')
334+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
304335
// Attributes
305336
expect(wrapper.attributes('role')).toBe('menubar')
306337
expect(wrapper.attributes('aria-disabled')).toBe('false')
@@ -329,6 +360,7 @@ describe('pagination', () => {
329360
expect(wrapper.classes()).not.toContain('pagination-lg')
330361
expect(wrapper.classes()).not.toContain('justify-content-center')
331362
expect(wrapper.classes()).not.toContain('justify-content-end')
363+
expect(wrapper.classes()).not.toContain('b-pagination-pills')
332364

333365
expect(wrapper.findAll('li.flex-fill').length).toBe(8)
334366

‎src/mixins/pagination.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,10 @@ export const props = {
7878
type: String,
7979
default: 'left'
8080
},
81+
pills: {
82+
type: Boolean,
83+
default: false
84+
},
8185
hideGotoEndButtons: {
8286
type: Boolean,
8387
default: false
@@ -166,6 +170,9 @@ export default {
166170
}
167171
return ''
168172
},
173+
styleClass() {
174+
return this.pills ? 'b-pagination-pills' : ''
175+
},
169176
computedCurrentPage() {
170177
return sanitizeCurrentPage(this.currentPage, this.localNumberOfPages)
171178
},
@@ -532,7 +539,7 @@ export default {
532539
{
533540
ref: 'ul',
534541
staticClass: 'pagination',
535-
class: ['b-pagination', this.btnSize, this.alignment],
542+
class: ['b-pagination', this.btnSize, this.alignment, this.styleClass],
536543
attrs: {
537544
role: 'menubar',
538545
'aria-disabled': disabled ? 'true' : 'false',

0 commit comments

Comments
 (0)