🌐 AI搜索 & 代理 主页
Skip to content

Commit 3a3ee1d

Browse files
jacobmllr95tmorehouse
jacobmllr95
and
tmorehouse
committed
feat(b-pagination, b-pagination-nav): add page button class props and option to show first/last page numbers (closes #4597, #4533) (#4622)
Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
1 parent af0b6eb commit 3a3ee1d

File tree

11 files changed

+573
-103
lines changed

11 files changed

+573
-103
lines changed

‎docs/markdown/intro/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ some good starting points would be:
3636
- [Vue Guide](https://vuejs.org/v2/guide/)
3737
- [Vue API](https://vuejs.org/v2/api/)
3838
- [Bootstrap v{{bootstrapVersionMinor}} documentation](https://getbootstrap.com/)
39-
- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped styles
40-
in SFC (Single File Component) `.vue` files
39+
- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped
40+
styles in SFC (Single File Component) `.vue` files
4141

4242
## Documentation information
4343

‎src/components/dropdown/dropdown.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@ export const props = {
2929
default: false
3030
},
3131
menuClass: {
32-
type: [String, Array],
32+
type: [String, Array, Object],
3333
default: null
3434
},
3535
toggleTag: {
3636
type: String,
3737
default: 'button'
3838
},
3939
toggleClass: {
40-
type: [String, Array],
40+
type: [String, Array, Object],
4141
default: null
4242
},
4343
noCaret: {
@@ -61,7 +61,7 @@ export const props = {
6161
default: () => getComponentConfig(NAME, 'splitVariant')
6262
},
6363
splitClass: {
64-
type: [String, Array],
64+
type: [String, Array, Object],
6565
default: null
6666
},
6767
splitButtonType: {

‎src/components/modal/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -930,8 +930,8 @@ Example Confirm Message boxes
930930
by default. You can enable the header close button by setting `hideHeaderClose: false` in the
931931
options.
932932
- Message Boxes will throw an error (promise rejection) if they are closed/destroyed before they are
933-
hidden. Always include a `.catch(errHandler)` reject handler, event if using
934-
the async `await` style code.
933+
hidden. Always include a `.catch(errHandler)` reject handler, event if using the async `await`
934+
style code.
935935
- When using Vue Router (or similar), Message Boxes will close and reject if the route changes
936936
before the modal hides. If you wish for the message box to remain open when the route changes, use
937937
`this.$root.$bvModal` instead of `this.$bvModal`.

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,61 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
322322
| `index` | Number | Page number (indexed from `0` to `numberOfPages -1`) |
323323
| `disabled` | Boolean | If the page button is disabled |
324324

325+
### Goto first/last button type
326+
327+
If you prefer to have buttons with the first and last page number to go to the corresponding page,
328+
use the `first-number` and `last-number` props.
329+
330+
```html
331+
<template>
332+
<div class="overflow-auto">
333+
<div>
334+
<h6>Goto first button number</h6>
335+
<b-pagination-nav
336+
v-model="currentPage"
337+
:number-of-pages="pages"
338+
base-url="#"
339+
first-number
340+
></b-pagination-nav>
341+
</div>
342+
343+
<div class="mt-3">
344+
<h6>Goto last button number</h6>
345+
<b-pagination-nav
346+
v-model="currentPage"
347+
:number-of-pages="pages"
348+
base-url="#"
349+
last-number
350+
></b-pagination-nav>
351+
</div>
352+
353+
<div class="mt-3">
354+
<h6>Goto first and last button number</h6>
355+
<b-pagination-nav
356+
v-model="currentPage"
357+
:number-of-pages="pages"
358+
base-url="#"
359+
first-number
360+
last-number
361+
></b-pagination-nav>
362+
</div>
363+
</div>
364+
</template>
365+
366+
<script>
367+
export default {
368+
data() {
369+
return {
370+
pages: 100,
371+
currentPage: 5
372+
}
373+
}
374+
}
375+
</script>
376+
377+
<!-- b-pagination-nav-goto-first-last-number.vue -->
378+
```
379+
325380
### Button size
326381

327382
Optionally change from the default button size by setting the `size` prop to either `'sm'` for

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@
6161
"prop": "hideEllipsis",
6262
"description": "Do not show ellipsis buttons"
6363
},
64+
{
65+
"prop": "ellipsisText",
66+
"description": "Content to place in the ellipsis placeholder"
67+
},
6468
{
6569
"prop": "size",
6670
"description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"
@@ -104,6 +108,46 @@
104108
{
105109
"prop": "lastText",
106110
"description": "Content to place in the goto last page button"
111+
},
112+
{
113+
"prop": "firstClass",
114+
"version": "2.3.0",
115+
"description": "Class(es) to apply to the 'Go to first page' button"
116+
},
117+
{
118+
"prop": "prevClass",
119+
"version": "2.3.0",
120+
"description": "Class(es) to apply to the 'Go to previous page' button"
121+
},
122+
{
123+
"prop": "pageClass",
124+
"version": "2.3.0",
125+
"description": "Class(es) to apply to the 'Go to page #' buttons"
126+
},
127+
{
128+
"prop": "nextClass",
129+
"version": "2.3.0",
130+
"description": "Class(es) to apply to the 'Go to next page' button"
131+
},
132+
{
133+
"prop": "lastClass",
134+
"version": "2.3.0",
135+
"description": "Class(es) to apply to the 'Go to last page' button"
136+
},
137+
{
138+
"prop": "ellipsisClass",
139+
"version": "2.3.0",
140+
"description": "Class(es) to apply to the 'ellipsis' placeholders"
141+
},
142+
{
143+
"prop": "firstNumber",
144+
"version": "2.3.0",
145+
"description": "Display first page number instead of Goto First button"
146+
},
147+
{
148+
"prop": "lastNumber",
149+
"version": "2.3.0",
150+
"description": "Display last page number instead of Goto Last button"
107151
}
108152
],
109153
"events": [

‎src/components/pagination/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,62 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
185185
| `index` | Number | Page number (indexed from `0` to `numberOfPages -1`) |
186186
| `disabled` | Boolean | If the page button is disabled |
187187

188+
### Goto first/last button type
189+
190+
If you prefer to have buttons with the first and last page number to go to the corresponding page,
191+
use the `first-number` and `last-number` props.
192+
193+
```html
194+
<template>
195+
<div class="overflow-auto">
196+
<div>
197+
<h6>Goto first button number</h6>
198+
<b-pagination
199+
v-model="currentPage"
200+
:total-rows="rows"
201+
:per-page="perPage"
202+
first-number
203+
></b-pagination>
204+
</div>
205+
206+
<div class="mt-3">
207+
<h6>Goto last button number</h6>
208+
<b-pagination
209+
v-model="currentPage"
210+
:total-rows="rows"
211+
:per-page="perPage"
212+
last-number
213+
></b-pagination>
214+
</div>
215+
216+
<div class="mt-3">
217+
<h6>Goto first and last button number</h6>
218+
<b-pagination
219+
v-model="currentPage"
220+
:total-rows="rows"
221+
:per-page="perPage"
222+
first-number
223+
last-number
224+
></b-pagination>
225+
</div>
226+
</div>
227+
</template>
228+
229+
<script>
230+
export default {
231+
data() {
232+
return {
233+
rows: 100,
234+
perPage: 1,
235+
currentPage: 5
236+
}
237+
}
238+
}
239+
</script>
240+
241+
<!-- b-pagination-goto-first-last-number.vue -->
242+
```
243+
188244
### Button size
189245

190246
Optionally change from the default button size by setting the `size` prop to either `'sm'` for

‎src/components/pagination/package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545
"prop": "hideEllipsis",
4646
"description": "Do not show ellipsis buttons"
4747
},
48+
{
49+
"prop": "ellipsisText",
50+
"description": "Content to place in the ellipsis placeholder"
51+
},
4852
{
4953
"prop": "size",
5054
"description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"
@@ -88,6 +92,46 @@
8892
{
8993
"prop": "lastText",
9094
"description": "Content to place in the goto last page button"
95+
},
96+
{
97+
"prop": "firstClass",
98+
"version": "2.3.0",
99+
"description": "Class(es) to apply to the 'Go to first page' button"
100+
},
101+
{
102+
"prop": "prevClass",
103+
"version": "2.3.0",
104+
"description": "Class(es) to apply to the 'Go to previous page' button"
105+
},
106+
{
107+
"prop": "pageClass",
108+
"version": "2.3.0",
109+
"description": "Class(es) to apply to the 'Go to page #' buttons"
110+
},
111+
{
112+
"prop": "nextClass",
113+
"version": "2.3.0",
114+
"description": "Class(es) to apply to the 'Go to next page' button"
115+
},
116+
{
117+
"prop": "lastClass",
118+
"version": "2.3.0",
119+
"description": "Class(es) to apply to the 'Go to last page' button"
120+
},
121+
{
122+
"prop": "ellipsisClass",
123+
"version": "2.3.0",
124+
"description": "Class(es) to apply to the 'ellipsis' placeholders"
125+
},
126+
{
127+
"prop": "firstNumber",
128+
"version": "2.3.0",
129+
"description": "Display first page number instead of Goto First button"
130+
},
131+
{
132+
"prop": "lastNumber",
133+
"version": "2.3.0",
134+
"description": "Display last page number instead of Goto Last button"
91135
}
92136
],
93137
"events": [

0 commit comments

Comments
 (0)