Skip to content

Commit 17be85d

Browse files
woothuwoothu
committed
Merge branch 'pagination' into woothu
2 parents 3f5e03f + 4cd5c71 commit 17be85d

File tree

3 files changed

+241
-0
lines changed

3 files changed

+241
-0
lines changed

‎src/components/Pagination/CPagination.vue

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<template>
2+
<ul :class="computedClasses" role="menubar" aria-disabled="false" aria-label="pagination">
3+
<li v-if="!noDoubleArrows"
4+
:class="firstClasses"
5+
>
6+
<CLink class="page-link"
7+
@click="setPage(1)"
8+
:disabled="page === 1"
9+
aria-label="Go to first page"
10+
>
11+
<span v-html="firstButtonText"></span>
12+
</CLink>
13+
</li>
14+
<li v-if="!noArrows"
15+
:class="firstClasses"
16+
>
17+
<CLink class="page-link"
18+
@click="setPage(page - 1)"
19+
:disabled="page === 1"
20+
aria-label="Go to previous page"
21+
>
22+
<span v-html="previousButtonText"></span>
23+
</CLink>
24+
</li>
25+
<li v-if="showFirstDots"
26+
role="separator"
27+
class="page-item disabled d-none d-sm-flex"
28+
>
29+
<span class="page-link">…</span>
30+
</li>
31+
32+
<li v-for="(item, index) in items"
33+
:key="index"
34+
:class="setStyle(item)"
35+
>
36+
<CLink class="page-link"
37+
@click="setPage(item)"
38+
:aria-label="`Goto page ${item}`"
39+
>
40+
{{item}}
41+
</CLink>
42+
</li>
43+
44+
<li v-if="showLastDots"
45+
role="separator"
46+
class="page-item disabled d-none d-sm-flex"
47+
>
48+
<span class="page-link">…</span>
49+
</li>
50+
<li v-if="!noArrows"
51+
:class="lastClasses"
52+
>
53+
<CLink class="page-link"
54+
@click="setPage(page + 1)"
55+
:disabled="page === pages"
56+
aria-label="Go to next page"
57+
>
58+
<span v-html="nextButtonText"></span>
59+
</CLink>
60+
</li>
61+
<li v-if="!noDoubleArrows"
62+
:class="lastClasses"
63+
>
64+
<CLink class="page-link"
65+
@click="setPage(pages)"
66+
:disabled="page === pages"
67+
aria-label="Go to last page"
68+
>
69+
<span v-html="lastButtonText"></span>
70+
</CLink>
71+
</li>
72+
</ul>
73+
</template>
74+
75+
<script>
76+
import elementResizeDetectorMaker from 'element-resize-detector'
77+
78+
export default {
79+
name: 'CPagination',
80+
model: {
81+
event: 'change'
82+
},
83+
data () {
84+
return {
85+
page: this.value,
86+
showFirstDots: false,
87+
showLastDots: false,
88+
rwd: this.size,
89+
erd: elementResizeDetectorMaker()
90+
}
91+
},
92+
watch: {
93+
value (val) {
94+
this.page = val
95+
},
96+
pages (val) {
97+
if(val < this.page)
98+
this.$emit('change', val)
99+
}
100+
},
101+
mounted () {
102+
if (this.size !== 'sm' && !this.notResponsive)
103+
this.erd.listenTo(this.$el, this.onWrapperResize)
104+
},
105+
computed: {
106+
firstClasses () { return ['page-item', { disabled: this.page === 1 }]},
107+
lastClasses () { return ['page-item', { disabled: this.page === this.pages }]},
108+
computedClasses () {
109+
return `pagination b-pagination pagination-${this.rwd} justify-content-${this.align} `
110+
},
111+
dots () {
112+
return this.noDots || this.limit < 4 ? false : true
113+
},
114+
items () {
115+
let maxPrevItems = Math.floor((this.limit - 1) / 2)
116+
let maxNextItems = Math.ceil((this.limit - 1) / 2)
117+
let items = []
118+
119+
if(!this.dots){
120+
this.showFirstDots = false
121+
this.showLastDots = false
122+
if(this.page <= maxPrevItems){
123+
for (let i = 1; i <= this.limit; i++)
124+
items.push(i)
125+
}else{
126+
let max = this.page + maxNextItems > this.pages ? this.pages : this.page + maxNextItems
127+
for (let i = max - this.limit + 1; i <= max; i++)
128+
items.push(i)
129+
}
130+
return items
131+
}
132+
133+
if(this.limit >= this.pages){
134+
this.showFirstDots = false
135+
this.showLastDots = false
136+
for (let i = 1; i <= this.pages; i++)
137+
items.push(i)
138+
return items
139+
}
140+
141+
if(this.page <= maxPrevItems){
142+
this.showFirstDots = false
143+
this.showLastDots = true
144+
for (let i = 1; i <= this.limit - 1; i++)
145+
items.push(i)
146+
return items
147+
}
148+
149+
if(this.page > maxPrevItems && this.page < this.pages - maxNextItems){
150+
this.showFirstDots = true
151+
this.showLastDots = true
152+
for (let i = 1 ; i < this.limit - 1 ; i++)
153+
items.push(this.page - maxPrevItems + i)
154+
return items
155+
}
156+
157+
if(this.page > maxPrevItems && this.page >= this.pages - maxNextItems){
158+
this.showFirstDots = true
159+
this.showLastDots = false
160+
for (let i = this.pages - this.limit + 2 ; i <= this.pages; i++)
161+
items.push(i)
162+
return items
163+
}
164+
},
165+
},
166+
methods: {
167+
onWrapperResize (el) {
168+
el.clientWidth > 600 ? this.rwd = this.size :
169+
el.clientWidth > 400 ?
170+
this.rwd = 'md' : this.rwd = 'sm'
171+
},
172+
setPage (number) {
173+
if(number !== this.page)
174+
this.$emit('change', number)
175+
},
176+
setStyle (item) {
177+
if(this.value === item) {
178+
return 'page-item active'
179+
}
180+
return 'page-item'
181+
}
182+
},
183+
props: {
184+
value: {
185+
type: Number,
186+
default: 1
187+
},
188+
pages: {
189+
type: Number,
190+
default: 10
191+
},
192+
size: {
193+
type: String,
194+
default: 'md'
195+
},
196+
align: {
197+
type: String,
198+
default: 'start'
199+
},
200+
limit: {
201+
type: Number,
202+
default: 5
203+
},
204+
noDots: Boolean,
205+
noArrows: Boolean,
206+
noDoubleArrows: Boolean,
207+
firstButtonText: {
208+
type: String,
209+
default: '&laquo;'
210+
},
211+
previousButtonText: {
212+
type: String,
213+
default: '&lsaquo;'
214+
},
215+
nextButtonText: {
216+
type: String,
217+
default: '&rsaquo;'
218+
},
219+
lastButtonText: {
220+
type: String,
221+
default: '&raquo;'
222+
},
223+
notResponsive: Boolean
224+
}
225+
}
226+
</script>
227+
228+
<style scoped>
229+
.page-link:focus {
230+
box-shadow: none;
231+
}
232+
</style>

‎src/components/Pagination/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import CPagination from './CPagination'
2+
3+
export {
4+
CPagination
5+
}

‎src/components/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,8 @@ export * from './Button'
1616
export * from './Card'
1717
export * from './Dropdown'
1818
export * from './ListGroup'
19+
<<<<<<< HEAD
1920
export * from './Toolip'
21+
=======
22+
export * from './Pagination'
23+
>>>>>>> pagination

0 commit comments

Comments
 (0)