Skip to content

Commit 1d4b2fa

Browse files
sahaAcatsahaAcat
committed
fix: refactor base pagination to be able to upgrade to [email protected] without warnings
1 parent 5b658a7 commit 1d4b2fa

File tree

3 files changed

+115
-109
lines changed

3 files changed

+115
-109
lines changed

‎package-lock.json

+7-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@
1616
"postversion": "./postversion.sh"
1717
},
1818
"peerDependencies": {
19-
"vue": "2.6.10"
19+
"vue": "^2.6.11"
2020
},
2121
"dependencies": {
2222
"body-scroll-lock": "^2.6.4",
2323
"hls.js": "^0.13.1",
2424
"normalize.css": "^8.0.1",
25-
"vue": "2.6.10",
25+
"vue": "^2.6.11",
2626
"vue-click-outside": "^1.0.7",
2727
"vue2-datepicker": "^3.2.2",
2828
"vuedraggable": "^2.23.2"
@@ -79,7 +79,7 @@
7979
"vue-style-loader": "^4.1.2",
8080
"vue-styleguidist": "^4.2.3",
8181
"vue-svgicon": "^3.2.1",
82-
"vue-template-compiler": "2.6.10",
82+
"vue-template-compiler": "^2.6.11",
8383
"webpack": "^4.41.5",
8484
"webpack-bundle-analyzer": "^3.6.1",
8585
"webpack-cli": "^3.3.10",

‎src/components/BasePagination/BasePagination.vue

+105-99
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,115 @@
11
<template>
22
<div class="base-pagination">
3-
<component
4-
:is="numberElement"
5-
:to="getLinkPath(active - 1 > 0 ? active - 1 : 1)"
6-
:aria-disabled="active <= 1"
7-
:tabindex="active <= 1 ? -1 : 0"
3+
<div
84
:class="[
95
'base-pagination__arrow-wrapper',
10-
{ 'base-pagination-arrow-inactive': active <= 1 }
6+
{ 'base-pagination__arrow-icon-inactive': active <= 1 }
117
]"
12-
aria-label="Previous page"
13-
@click.native="active - 1 > 0 ? setActivePage(active - 1) : false"
14-
@click="active - 1 > 0 ? setActivePage(active - 1) : false"
15-
@keypress.enter="active - 1 > 0 ? setActivePage(active - 1) : false">
16-
<SvgIcon
17-
class="base-pagination-arrow base-pagination-arrow-left"
18-
name="arrow-left" />
19-
</component>
8+
@click="active - 1 > 0 ? setActivePage(active - 1) : false">
9+
<component
10+
:is="'a'"
11+
:to="getLinkPath(active - 1 > 0 ? active - 1 : 1)"
12+
:aria-disabled="active <= 1"
13+
:tabindex="active <= 1 ? -1 : 0"
14+
aria-label="Previous page"
15+
class="base-pagination__arrow"
16+
@keypress.enter="active - 1 > 0 ? setActivePage(active - 1) : false">
17+
<SvgIcon
18+
class="base-pagination__arrow-icon base-pagination__arrow-icon-left"
19+
name="arrow-left" />
20+
</component>
21+
</div>
2022
<div
2123
v-if="total > maxNumbers"
22-
class="base-pagination-row">
23-
<component
24-
:is="numberElement"
24+
class="base-pagination__row">
25+
<div
2526
v-if="start !== 1"
26-
:to="getLinkPath(1)"
27-
:tabindex="active === 1 ? -1 : 0"
28-
:class="['base-pagination-number', { 'base-pagination-number-active': active === 1}]"
29-
aria-label="page 1"
30-
@click.native="setActivePage(1)"
31-
@click="setActivePage(1)"
32-
@keypress.enter="setActivePage(1)">
33-
{{ 1 }}
34-
</component>
27+
:class="['base-pagination__number', { 'base-pagination__number-active': active === 1}]"
28+
@click="setActivePage(1)">
29+
<component
30+
:is="numberElement"
31+
:to="useLinkElement ? getLinkPath(1) : false"
32+
:tabindex="active === 1 ? -1 : 0"
33+
aria-label="page 1"
34+
class="base-pagination__number-inner"
35+
@keypress.enter="setActivePage(1)">
36+
{{ 1 }}
37+
</component>
38+
</div>
3539
<span
3640
v-if="start > 2"
37-
class="base-pagination-more">&#8943;</span>
38-
<component
39-
:is="numberElement"
41+
class="base-pagination__more">&#8943;</span>
42+
<div
4043
v-for="n in subset"
4144
:key="n"
42-
:to="getLinkPath(n)"
43-
:tabindex="active === n ? -1 : 0"
44-
:aria-label="`Page ${n}`"
45-
:class="['base-pagination-number', { 'base-pagination-number-active': active === n}]"
46-
@click.native="setActivePage(n)"
47-
@click="setActivePage(n)"
48-
@keypress.enter="setActivePage(n)">
49-
{{ n }}
50-
</component>
45+
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
46+
@click="setActivePage(n)">
47+
<component
48+
:is="numberElement"
49+
:to="getLinkPath(n)"
50+
:tabindex="active === n ? -1 : 0"
51+
:aria-label="`Page ${n}`"
52+
class="base-pagination__number-inner"
53+
@keypress.enter="setActivePage(n)">
54+
{{ n }}
55+
</component>
56+
</div>
5157
<span
5258
v-if="(end) < (total - 1) && (end) !== (total - 1)"
53-
class="base-pagination-more">&#8943;</span>
54-
<component
55-
:is="numberElement"
59+
class="base-pagination__more">&#8943;</span>
60+
<div
5661
v-if="(end - 1) < (total - 1) && (end - 1) !== (total - 1)"
57-
:to="getLinkPath(total)"
58-
:tabindex="active === total ? -1 : 0"
59-
:aria-label="`Page ${total}`"
60-
:class="['base-pagination-number', { 'base-pagination-number-active': active === total}]"
61-
@click.native="setActivePage(total)"
62-
@click="setActivePage(total)"
63-
@keypress.enter="setActivePage(total)">
64-
{{ total }}
65-
</component>
62+
:class="['base-pagination__number', { 'base-pagination__number-active': active === total}]"
63+
@click="setActivePage(total)">
64+
<component
65+
:is="numberElement"
66+
:to="getLinkPath(total)"
67+
:tabindex="active === total ? -1 : 0"
68+
:aria-label="`Page ${total}`"
69+
class="base-pagination__number-inner"
70+
@keypress.enter="setActivePage(total)">
71+
{{ total }}
72+
</component>
73+
</div>
6674
</div>
6775
<div
6876
v-else
69-
class="base-pagination-row">
70-
<component
71-
:is="numberElement"
77+
class="base-pagination__row">
78+
<div
7279
v-for="n in total"
7380
:key="n"
74-
:to="getLinkPath(n)"
75-
:tabindex="active === n ? -1 : 0"
76-
:aria-label="`Page ${n}`"
77-
:class="['base-pagination-number', { 'base-pagination-number-active': active === n}]"
78-
@click.native="setActivePage(n)"
79-
@click="setActivePage(n)"
80-
@keypress.enter="setActivePage(n)">
81-
{{ n }}
82-
</component>
81+
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
82+
@click="setActivePage(n)">
83+
<component
84+
:is="numberElement"
85+
:to="useLinkElement ? getLinkPath(n) : false"
86+
:tabindex="active === n ? -1 : 0"
87+
:aria-label="`Page ${n}`"
88+
class="base-pagination__number-inner"
89+
@keypress.enter="setActivePage(n)">
90+
{{ n }}
91+
</component>
92+
</div>
8393
</div>
84-
<component
85-
:is="numberElement"
86-
:to="getLinkPath(active + 1 <= total ? active + 1 : total)"
87-
:aria-disabled="active >= total"
88-
:tabindex="active >= total ? -1 : 0"
94+
<div
8995
:class="[
9096
'base-pagination__arrow-wrapper',
91-
{ 'base-pagination-arrow-inactive': active >= total }
97+
{ 'base-pagination__arrow-icon-inactive': active >= total }
9298
]"
93-
aria-label="Next Page"
94-
@click.native="active + 1 <= total ? setActivePage(active + 1) : false"
95-
@click="active + 1 <= total ? setActivePage(active + 1) : false"
96-
@keypress.enter="active + 1 <= total ? setActivePage(active + 1) : false">
97-
<SvgIcon
98-
class="base-pagination-arrow base-pagination-arrow-right"
99-
name="arrow-left" />
100-
</component>
99+
@click="active + 1 <= total ? setActivePage(active + 1) : false">
100+
<component
101+
:is="numberElement"
102+
:to="getLinkPath(active + 1 <= total ? active + 1 : total)"
103+
:aria-disabled="active >= total"
104+
:tabindex="active >= total ? -1 : 0"
105+
aria-label="Next Page"
106+
class="base-pagination__arrow"
107+
@keypress.enter="active + 1 <= total ? setActivePage(active + 1) : false">
108+
<SvgIcon
109+
class="base-pagination__arrow-icon base-pagination__arrow-icon-right"
110+
name="arrow-left" />
111+
</component>
112+
</div>
101113
</div>
102114
</template>
103115

@@ -229,16 +241,16 @@ export default {
229241
align-items: center;
230242
justify-content: center;
231243
232-
.base-pagination_arrow-wrapper, .base-pagination-number {
244+
.base-pagination__arrow-wrapper, .base-pagination__number {
233245
cursor: pointer;
234246
}
235247
236-
.base-pagination-row {
248+
.base-pagination__row {
237249
display: flex;
238250
align-items: center;
239251
justify-content: center;
240252
241-
.base-pagination-number {
253+
.base-pagination__number {
242254
font-weight: bold;
243255
background-color: $box-color;
244256
padding: 0 $spacing-small;
@@ -254,11 +266,11 @@ export default {
254266
margin-right: 0;
255267
}
256268
257-
&:hover, &:focus, &:active {
269+
&:hover, &:focus, &:active, &:focus-within {
258270
color: $app-color;
259271
}
260272
261-
&.base-pagination-number-active {
273+
&.base-pagination__number-active {
262274
color: white;
263275
background-color: $app-color;
264276
cursor: default;
@@ -269,55 +281,49 @@ export default {
269281
}
270282
}
271283
272-
.base-pagination-more {
284+
.base-pagination__more {
273285
margin-right: $spacing-small;
274286
}
275287
}
276288
277289
.base-pagination__arrow-wrapper {
278-
&:hover .base-pagination-arrow,
279-
&:active .base-pagination-arrow,
280-
&:focus .base-pagination-arrow {
290+
&:hover .base-pagination__arrow .base-pagination__arrow-icon,
291+
.base-pagination__arrow:active .base-pagination__arrow-icon,
292+
.base-pagination__arrow:focus .base-pagination__arrow-icon {
281293
fill: $app-color;
282294
}
283295
284-
.base-pagination-arrow {
296+
.base-pagination__arrow-icon {
285297
height: $icon-medium;
286298
width: $icon-medium;
287299
margin: 0 $spacing;
288300
289-
&.base-pagination-arrow-right {
301+
&.base-pagination__arrow-icon-right {
290302
transform: rotate(180deg);
291303
}
292304
}
293305
294-
&.base-pagination-arrow-inactive {
306+
&.base-pagination__arrow-icon-inactive {
295307
cursor: default;
296308
297-
.base-pagination-arrow,
298-
&:hover .base-pagination-arrow,
299-
&:active .base-pagination-arrow,
300-
&:focus .base-pagination-arrow {
309+
.base-pagination__arrow .base-pagination__arrow-icon,
310+
&:hover .base-pagination__arrow .base-pagination__arrow-icon {
301311
fill: $graytext-color;
302312
}
303313
}
304-
305-
&:disabled .base-pagination-arrow {
306-
fill: red;
307-
}
308314
}
309315
310-
.base-pagination-row, .base-pagination-arrow {
316+
.base-pagination__row, .base-pagination__arrow-icon {
311317
flex: 0 0 auto;
312318
}
313319
314-
.base-pagination__arrow-wrapper, .base-pagination-number {
320+
.base-pagination__arrow, .base-pagination__number-inner {
315321
outline: none;
316322
}
317323
}
318324
319325
@media screen and (max-width: $mobile) {
320-
.base-pagination-arrow {
326+
.base-pagination__arrow-icon {
321327
margin: 0 $spacing-small;
322328
}
323329
}

0 commit comments

Comments
 (0)