Skip to content

Commit 362a943

Browse files
sahaAcatsahaAcat
committed
fix: BasePagination: #1449: upgrade to Vue 2.6.13 which solves warning with .native modifier (vuejs/vue/issues/10939) and finally revert changes in basePagination introduced in commit 1d4b2fa 
1 parent 6eea099 commit 362a943

File tree

3 files changed

+111
-111
lines changed

3 files changed

+111
-111
lines changed

‎package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,12 @@
8282
"sass": "^1.32.8",
8383
"sass-loader": "^10.1.1",
8484
"source-map-loader": "^1.1.3",
85-
"vue": "^2.6.12",
85+
"vue": "^2.6.13",
8686
"vue-cli-plugin-styleguidist": "~4.35.0",
87-
"vue-template-compiler": "^2.6.12"
87+
"vue-template-compiler": "^2.6.13"
8888
},
8989
"peerDependencies": {
90-
"vue": "^2.6.11"
90+
"vue": "^2.6.13"
9191
},
9292
"browserslist": [
9393
"> 1%",

‎src/components/BasePagination/BasePagination.vue

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,109 @@
11
<template>
2-
<div class="base-pagination">
3-
<div
2+
<nav
3+
class="base-pagination">
4+
<component
5+
:is="numberElement"
6+
:to="!!useLinkElement ? getLinkPath(active - 1 > 0 ? active - 1 : 1) : false"
7+
:aria-disabled="active <= 1"
8+
:tabindex="active <= 1 ? -1 : 0"
49
:class="[
5-
'base-pagination__arrow-wrapper',
10+
'base-pagination__arrow',
611
{ 'base-pagination__arrow-icon-inactive': active <= 1 }
712
]"
8-
@click="active - 1 > 0 ? setActivePage(active - 1) : false">
9-
<component
10-
:is="numberElement"
11-
:to="!!useLinkElement ? getLinkPath(active - 1 > 0 ? active - 1 : 1) : false"
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-
<base-icon
18-
class="base-pagination__arrow-icon base-pagination__arrow-icon-left"
19-
name="arrow-left" />
20-
</component>
21-
</div>
22-
<div
23-
v-if="total > maxNumbers"
24-
class="base-pagination__row">
25-
<div
26-
v-if="start !== 1"
27-
:class="['base-pagination__number', { 'base-pagination__number-active': active === 1}]"
28-
@click="setActivePage(1)">
13+
aria-label="Go to previous page"
14+
@click="active - 1 > 0 ? setActivePage(active - 1) : false"
15+
@click.native="active - 1 > 0 ? setActivePage(active - 1) : false"
16+
@keypress.enter="active - 1 > 0 ? setActivePage(active - 1) : false">
17+
<base-icon
18+
class="base-pagination__arrow-icon base-pagination__arrow-icon-left"
19+
name="arrow-left" />
20+
</component>
21+
<div class="base-pagination__row">
22+
<!-- ELEMENT TO DISPLAY WHEN TOTAL NUMBER OF ELEMENTS FITS INTO PARENT -->
23+
<template v-if="total <= maxNumbers">
2924
<component
3025
: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 }}
26+
v-for="n in total"
27+
:key="n"
28+
:to="useLinkElement ? getLinkPath(n) : false"
29+
:tabindex="!useLinkElement ? 0 : false"
30+
:aria-current="active === n ? 'true' : false"
31+
:aria-label="`${active === n ? 'Current Page, Page' : 'Go to page'} ${n}`"
32+
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
33+
@keypress.enter="setActivePage(n)"
34+
@click.native="setActivePage(n)"
35+
@click="setActivePage(n)">
36+
{{ n }}
3737
</component>
38-
</div>
39-
<span
40-
v-if="start > 2"
41-
class="base-pagination__more">&#8943;</span>
42-
<div
43-
v-for="n in subset"
44-
:key="n"
45-
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
46-
@click="setActivePage(n)">
38+
</template>
39+
<template v-else>
4740
<component
4841
:is="numberElement"
49-
:to="!!useLinkElement ? getLinkPath(n) : false"
50-
:tabindex="active === n ? -1 : 0"
51-
:aria-label="`Page ${n}`"
52-
class="base-pagination__number-inner"
53-
@keypress.enter="setActivePage(n)">
54-
{{ n }}
42+
v-if="start !== 1"
43+
:to="useLinkElement ? getLinkPath(1) : false"
44+
:tabindex="!useLinkElement ? 0 : false"
45+
:aria-current="active === 1 ? 'true' : false"
46+
:aria-label="`${active === 1 ? 'Current Page, Page' : 'Go to page'} ${1}`"
47+
:class="['base-pagination__number', { 'base-pagination__number-active': active === 1}]"
48+
@keypress.enter="setActivePage(1)"
49+
@click.native="setActivePage(1)"
50+
@click="setActivePage(1)">
51+
{{ 1 }}
5552
</component>
56-
</div>
57-
<span
58-
v-if="(end) < (total - 1) && (end) !== (total - 1)"
59-
class="base-pagination__more">&#8943;</span>
60-
<div
61-
v-if="(end - 1) < (total - 1) && (end - 1) !== (total - 1)"
62-
:class="['base-pagination__number', { 'base-pagination__number-active': active === total}]"
63-
@click="setActivePage(total)">
53+
<span
54+
v-if="start > 2"
55+
class="base-pagination__more">&#8943;</span>
6456
<component
6557
:is="numberElement"
66-
:to="!!useLinkElement ? getLinkPath(total) : false"
67-
:tabindex="active === total ? -1 : 0"
68-
:aria-label="`Page ${total}`"
69-
class="base-pagination__number-inner"
70-
@keypress.enter="setActivePage(total)">
71-
{{ total }}
58+
v-for="n in subset"
59+
:key="n"
60+
:to="useLinkElement ? getLinkPath(n) : false"
61+
:tabindex="!useLinkElement ? 0 : false"
62+
:aria-current="active === n ? 'true' : false"
63+
:aria-label="`${active === n ? 'Current Page, Page' : 'Go to page'} ${n}`"
64+
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
65+
@keypress.enter="setActivePage(n)"
66+
@click.native="setActivePage(n)"
67+
@click="setActivePage(n)">
68+
{{ n }}
7269
</component>
73-
</div>
74-
</div>
75-
<div
76-
v-else
77-
class="base-pagination__row">
78-
<div
79-
v-for="n in total"
80-
:key="n"
81-
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
82-
@click="setActivePage(n)">
70+
<span
71+
v-if="(end) < (total - 1) && (end) !== (total - 1)"
72+
class="base-pagination__more">&#8943;</span>
8373
<component
8474
: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 }}
75+
v-if="(end - 1) < (total - 1) && (end - 1) !== (total - 1)"
76+
:to="useLinkElement ? getLinkPath(total) : false"
77+
:tabindex="!useLinkElement ? 0 : false"
78+
:aria-current="active === total ? 'true' : false"
79+
:aria-label="`${active === total ? 'Current Page, Page' : 'Go to page'} ${total}`"
80+
:class="['base-pagination__number',
81+
{ 'base-pagination__number-active': active === total}]"
82+
@keypress.enter="setActivePage(total)"
83+
@click.native="setActivePage(total)"
84+
@click="setActivePage(total)">
85+
{{ total }}
9186
</component>
92-
</div>
87+
</template>
9388
</div>
94-
<div
89+
<component
90+
:is="numberElement"
91+
:to="!!useLinkElement ? getLinkPath(active + 1 <= total ? active + 1 : total) : false"
92+
:aria-disabled="active >= total"
93+
:tabindex="active >= total ? -1 : 0"
9594
:class="[
96-
'base-pagination__arrow-wrapper',
95+
'base-pagination__arrow',
9796
{ 'base-pagination__arrow-icon-inactive': active >= total }
9897
]"
99-
@click="active + 1 <= total ? setActivePage(active + 1) : false">
100-
<component
101-
:is="numberElement"
102-
:to="!!useLinkElement ? getLinkPath(active + 1 <= total ? active + 1 : total) : false"
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-
<base-icon
109-
class="base-pagination__arrow-icon base-pagination__arrow-icon-right"
110-
name="arrow-left" />
111-
</component>
112-
</div>
113-
</div>
98+
aria-label="Go to next Page"
99+
@click="active + 1 <= total ? setActivePage(active + 1) : false"
100+
@click.native="active + 1 <= total ? setActivePage(active + 1) : false"
101+
@keypress.enter="active + 1 <= total ? setActivePage(active + 1) : false">
102+
<base-icon
103+
class="base-pagination__arrow-icon base-pagination__arrow-icon-right"
104+
name="arrow-left" />
105+
</component>
106+
</nav>
114107
</template>
115108

116109
<script>
@@ -219,7 +212,7 @@ export default {
219212
* @returns {String|Boolean|string}
220213
*/
221214
numberElement() {
222-
return this.useLinkElement ? this.useLinkElement : 'span';
215+
return this.useLinkElement ? this.useLinkElement : 'div';
223216
},
224217
},
225218
watch: {
@@ -289,6 +282,7 @@ export default {
289282
* @param {number} page - the new page number
290283
*/
291284
setActivePage(page) {
285+
console.log('trigg');
292286
// set internal variable to new page number
293287
this.active = page;
294288
},
@@ -318,7 +312,7 @@ export default {
318312
align-items: center;
319313
justify-content: center;
320314
321-
.base-pagination__arrow-wrapper, .base-pagination__number {
315+
.base-pagination__arrow, .base-pagination__number {
322316
cursor: pointer;
323317
}
324318
@@ -328,6 +322,7 @@ export default {
328322
justify-content: center;
329323
330324
.base-pagination__number {
325+
position: relative;
331326
font-weight: bold;
332327
background-color: $box-color;
333328
padding: 0 $spacing-small;
@@ -356,17 +351,22 @@ export default {
356351
color: white;
357352
}
358353
}
354+
.base-pagination__link {
355+
position: absolute;
356+
height: 100%;
357+
width: 100%;
358+
}
359359
}
360360
361361
.base-pagination__more {
362362
margin-right: $spacing-small;
363363
}
364364
}
365365
366-
.base-pagination__arrow-wrapper {
367-
&:hover .base-pagination__arrow .base-pagination__arrow-icon,
368-
.base-pagination__arrow:active .base-pagination__arrow-icon,
369-
.base-pagination__arrow:focus .base-pagination__arrow-icon {
366+
.base-pagination__arrow {
367+
&:hover .base-pagination__arrow-icon,
368+
&:active .base-pagination__arrow-icon,
369+
&:focus .base-pagination__arrow-icon {
370370
fill: $app-color;
371371
}
372372
@@ -383,8 +383,8 @@ export default {
383383
&.base-pagination__arrow-icon-inactive {
384384
cursor: default;
385385
386-
.base-pagination__arrow .base-pagination__arrow-icon,
387-
&:hover .base-pagination__arrow .base-pagination__arrow-icon {
386+
.base-pagination__arrow-icon,
387+
&:hover .base-pagination__arrow-icon {
388388
fill: $graytext-color;
389389
}
390390
}
@@ -394,7 +394,7 @@ export default {
394394
flex: 0 0 auto;
395395
}
396396
397-
.base-pagination__arrow, .base-pagination__number-inner {
397+
.base-pagination__arrow, .base-pagination__number {
398398
outline: none;
399399
}
400400
}

0 commit comments

Comments
 (0)