Skip to content

Commit

Permalink
fix: BasePagination: #1449: upgrade to Vue 2.6.13 which solves warnin…
Browse files Browse the repository at this point in the history 
…g with .native modifier (vuejs/vue/issues/10939) and finally revert changes in basePagination introduced in commit 1d4b2fa
  • Loading branch information
@sahaAcat
sahaAcat committed Jul 14, 2021
1 parent 6eea099 commit 362a943
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 111 deletions.
12 changes: 6 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,12 @@
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"source-map-loader": "^1.1.3",
"vue": "^2.6.12",
"vue": "^2.6.13",
"vue-cli-plugin-styleguidist": "~4.35.0",
"vue-template-compiler": "^2.6.12"
"vue-template-compiler": "^2.6.13"
},
"peerDependencies": {
"vue": "^2.6.11"
"vue": "^2.6.13"
},
"browserslist": [
"> 1%",
Expand Down
204 changes: 102 additions & 102 deletions src/components/BasePagination/BasePagination.vue
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,109 @@
<template>
<div class="base-pagination">
<div
<nav
class="base-pagination">
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(active - 1 > 0 ? active - 1 : 1) : false"
:aria-disabled="active <= 1"
:tabindex="active <= 1 ? -1 : 0"
:class="[
'base-pagination__arrow-wrapper',
'base-pagination__arrow',
{ 'base-pagination__arrow-icon-inactive': active <= 1 }
]"
@click="active - 1 > 0 ? setActivePage(active - 1) : false">
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(active - 1 > 0 ? active - 1 : 1) : false"
:aria-disabled="active <= 1"
:tabindex="active <= 1 ? -1 : 0"
aria-label="Previous page"
class="base-pagination__arrow"
@keypress.enter="active - 1 > 0 ? setActivePage(active - 1) : false">
<base-icon
class="base-pagination__arrow-icon base-pagination__arrow-icon-left"
name="arrow-left" />
</component>
</div>
<div
v-if="total > maxNumbers"
class="base-pagination__row">
<div
v-if="start !== 1"
:class="['base-pagination__number', { 'base-pagination__number-active': active === 1}]"
@click="setActivePage(1)">
aria-label="Go to previous page"
@click="active - 1 > 0 ? setActivePage(active - 1) : false"
@click.native="active - 1 > 0 ? setActivePage(active - 1) : false"
@keypress.enter="active - 1 > 0 ? setActivePage(active - 1) : false">
<base-icon
class="base-pagination__arrow-icon base-pagination__arrow-icon-left"
name="arrow-left" />
</component>
<div class="base-pagination__row">
<!-- ELEMENT TO DISPLAY WHEN TOTAL NUMBER OF ELEMENTS FITS INTO PARENT -->
<template v-if="total <= maxNumbers">
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(1) : false"
:tabindex="active === 1 ? -1 : 0"
aria-label="page 1"
class="base-pagination__number-inner"
@keypress.enter="setActivePage(1)">
{{ 1 }}
v-for="n in total"
:key="n"
:to="useLinkElement ? getLinkPath(n) : false"
:tabindex="!useLinkElement ? 0 : false"
:aria-current="active === n ? 'true' : false"
:aria-label="`${active === n ? 'Current Page, Page' : 'Go to page'} ${n}`"
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
@keypress.enter="setActivePage(n)"
@click.native="setActivePage(n)"
@click="setActivePage(n)">
{{ n }}
</component>
</div>
<span
v-if="start > 2"
class="base-pagination__more">&#8943;</span>
<div
v-for="n in subset"
:key="n"
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
@click="setActivePage(n)">
</template>
<template v-else>
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(n) : false"
:tabindex="active === n ? -1 : 0"
:aria-label="`Page ${n}`"
class="base-pagination__number-inner"
@keypress.enter="setActivePage(n)">
{{ n }}
v-if="start !== 1"
:to="useLinkElement ? getLinkPath(1) : false"
:tabindex="!useLinkElement ? 0 : false"
:aria-current="active === 1 ? 'true' : false"
:aria-label="`${active === 1 ? 'Current Page, Page' : 'Go to page'} ${1}`"
:class="['base-pagination__number', { 'base-pagination__number-active': active === 1}]"
@keypress.enter="setActivePage(1)"
@click.native="setActivePage(1)"
@click="setActivePage(1)">
{{ 1 }}
</component>
</div>
<span
v-if="(end) < (total - 1) && (end) !== (total - 1)"
class="base-pagination__more">&#8943;</span>
<div
v-if="(end - 1) < (total - 1) && (end - 1) !== (total - 1)"
:class="['base-pagination__number', { 'base-pagination__number-active': active === total}]"
@click="setActivePage(total)">
<span
v-if="start > 2"
class="base-pagination__more">&#8943;</span>
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(total) : false"
:tabindex="active === total ? -1 : 0"
:aria-label="`Page ${total}`"
class="base-pagination__number-inner"
@keypress.enter="setActivePage(total)">
{{ total }}
v-for="n in subset"
:key="n"
:to="useLinkElement ? getLinkPath(n) : false"
:tabindex="!useLinkElement ? 0 : false"
:aria-current="active === n ? 'true' : false"
:aria-label="`${active === n ? 'Current Page, Page' : 'Go to page'} ${n}`"
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
@keypress.enter="setActivePage(n)"
@click.native="setActivePage(n)"
@click="setActivePage(n)">
{{ n }}
</component>
</div>
</div>
<div
v-else
class="base-pagination__row">
<div
v-for="n in total"
:key="n"
:class="['base-pagination__number', { 'base-pagination__number-active': active === n}]"
@click="setActivePage(n)">
<span
v-if="(end) < (total - 1) && (end) !== (total - 1)"
class="base-pagination__more">&#8943;</span>
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(n) : false"
:tabindex="active === n ? -1 : 0"
:aria-label="`Page ${n}`"
class="base-pagination__number-inner"
@keypress.enter="setActivePage(n)">
{{ n }}
v-if="(end - 1) < (total - 1) && (end - 1) !== (total - 1)"
:to="useLinkElement ? getLinkPath(total) : false"
:tabindex="!useLinkElement ? 0 : false"
:aria-current="active === total ? 'true' : false"
:aria-label="`${active === total ? 'Current Page, Page' : 'Go to page'} ${total}`"
:class="['base-pagination__number',
{ 'base-pagination__number-active': active === total}]"
@keypress.enter="setActivePage(total)"
@click.native="setActivePage(total)"
@click="setActivePage(total)">
{{ total }}
</component>
</div>
</template>
</div>
<div
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(active + 1 <= total ? active + 1 : total) : false"
:aria-disabled="active >= total"
:tabindex="active >= total ? -1 : 0"
:class="[
'base-pagination__arrow-wrapper',
'base-pagination__arrow',
{ 'base-pagination__arrow-icon-inactive': active >= total }
]"
@click="active + 1 <= total ? setActivePage(active + 1) : false">
<component
:is="numberElement"
:to="!!useLinkElement ? getLinkPath(active + 1 <= total ? active + 1 : total) : false"
:aria-disabled="active >= total"
:tabindex="active >= total ? -1 : 0"
aria-label="Next Page"
class="base-pagination__arrow"
@keypress.enter="active + 1 <= total ? setActivePage(active + 1) : false">
<base-icon
class="base-pagination__arrow-icon base-pagination__arrow-icon-right"
name="arrow-left" />
</component>
</div>
</div>
aria-label="Go to next Page"
@click="active + 1 <= total ? setActivePage(active + 1) : false"
@click.native="active + 1 <= total ? setActivePage(active + 1) : false"
@keypress.enter="active + 1 <= total ? setActivePage(active + 1) : false">
<base-icon
class="base-pagination__arrow-icon base-pagination__arrow-icon-right"
name="arrow-left" />
</component>
</nav>
</template>

<script>
Expand Down Expand Up @@ -219,7 +212,7 @@ export default {
* @returns {String|Boolean|string}
*/
numberElement() {
return this.useLinkElement ? this.useLinkElement : 'span';
return this.useLinkElement ? this.useLinkElement : 'div';
},
},
watch: {
Expand Down Expand Up @@ -289,6 +282,7 @@ export default {
* @param {number} page - the new page number
*/
setActivePage(page) {
console.log('trigg');
// set internal variable to new page number
this.active = page;
},
Expand Down Expand Up @@ -318,7 +312,7 @@ export default {
align-items: center;
justify-content: center;
.base-pagination__arrow-wrapper, .base-pagination__number {
.base-pagination__arrow, .base-pagination__number {
cursor: pointer;
}
Expand All @@ -328,6 +322,7 @@ export default {
justify-content: center;
.base-pagination__number {
position: relative;
font-weight: bold;
background-color: $box-color;
padding: 0 $spacing-small;
Expand Down Expand Up @@ -356,17 +351,22 @@ export default {
color: white;
}
}
.base-pagination__link {
position: absolute;
height: 100%;
width: 100%;
}
}
.base-pagination__more {
margin-right: $spacing-small;
}
}
.base-pagination__arrow-wrapper {
&:hover .base-pagination__arrow .base-pagination__arrow-icon,
.base-pagination__arrow:active .base-pagination__arrow-icon,
.base-pagination__arrow:focus .base-pagination__arrow-icon {
.base-pagination__arrow {
&:hover .base-pagination__arrow-icon,
&:active .base-pagination__arrow-icon,
&:focus .base-pagination__arrow-icon {
fill: $app-color;
}
Expand All @@ -383,8 +383,8 @@ export default {
&.base-pagination__arrow-icon-inactive {
cursor: default;
.base-pagination__arrow .base-pagination__arrow-icon,
&:hover .base-pagination__arrow .base-pagination__arrow-icon {
.base-pagination__arrow-icon,
&:hover .base-pagination__arrow-icon {
fill: $graytext-color;
}
}
Expand All @@ -394,7 +394,7 @@ export default {
flex: 0 0 auto;
}
.base-pagination__arrow, .base-pagination__number-inner {
.base-pagination__arrow, .base-pagination__number {
outline: none;
}
}
Expand Down

0 comments on commit 362a943

Please sign in to comment.