Permalink
Browse files

feat(pagination+pagination-nav): disabled styling now works in BS V4.…

…beta.2 (#1381)

* feat(pagination): disabled styling now works in BS V4.beta.2

Removing custom style for disabled links as it is now working in native bootstrap  V4.beta.2 CSS

* pagination: remove no longer needed CSS
  • Loading branch information...
tmorehouse committed Nov 20, 2017
1 parent 19ba693 commit d51349f173515b26283dd910aa02da50c0ac0017
Showing with 127 additions and 136 deletions.
  1. +76 −79 src/components/pagination-nav/pagination-nav.vue
  2. +51 −57 src/components/pagination/pagination.vue
@@ -2,101 +2,98 @@
.b-pagination .page-item {
user-select: none;
}
.b-pagination .page-item.disabled {
cursor: not-allowed;
opacity: .65;
}
/* Bootstrap V4.beta.2 (and beta.1) missing focus styling for active link */
.b-pagination .page-item .page-link.active:focus {
box-shadow: 0 0 0 3px rgba(0,123,255,.5);
z-index: 1;
}
</style>
<script>
import { assign } from '../../utils/object';
import { KeyCodes } from '../../utils';
import { paginationMixin } from '../../mixins';
import { pickLinkProps } from '../link/link';
import { assign } from '../../utils/object'
import { KeyCodes } from '../../utils'
import { paginationMixin } from '../../mixins'
import { pickLinkProps } from '../link/link'
// Props needed for router links
const routerProps = pickLinkProps('activeClass','exactActiveClass','append','exact','replace','target','rel');
const routerProps = pickLinkProps('activeClass','exactActiveClass','append','exact','replace','target','rel')
// Props object
const props = assign(
// pagination-nav specific props
{
numberOfPages: {
type: Number,
default: 1
},
baseUrl: {
type: String,
default: '/'
},
useRouter: {
type: Boolean,
default: false
},
linkGen: {
type: Function,
default: null
},
pageGen: {
type: Function,
default: null
}
// pagination-nav specific props
{
numberOfPages: {
type: Number,
default: 1
},
baseUrl: {
type: String,
default: '/'
},
useRouter: {
type: Boolean,
default: false
},
linkGen: {
type: Function,
default: null
},
// Router specific props
routerProps
);
pageGen: {
type: Function,
default: null
}
},
// Router specific props
routerProps
)
// Our render function is brought in via the pagination mixin
export default {
mixins: [ paginationMixin ],
props,
computed: {
// Used by render function to trigger wraping in '<nav>' element
isNav() {
return true;
}
mixins: [ paginationMixin ],
props,
computed: {
// Used by render function to trigger wraping in '<nav>' element
isNav() {
return true
}
},
methods: {
onClick(pageNum, evt) {
this.currentPage = pageNum
},
makePage(pagenum) {
if (this.pageGen && typeof this.pageGen === 'function') {
return this.pageGen(pagenum)
}
return pagenum
},
makeLink(pagenum) {
if (this.linkGen && typeof this.linkGen === 'function') {
return this.linkGen(pagenum)
}
const link = `${this.baseUrl}${pagenum}`
return this.useRouter ? { path: link } : link
},
methods: {
onClick(pageNum, evt) {
this.currentPage = pageNum;
},
makePage(pagenum) {
if (this.pageGen && typeof this.pageGen === 'function') {
return this.pageGen(pagenum);
}
return pagenum;
},
makeLink(pagenum) {
if (this.linkGen && typeof this.linkGen === 'function') {
return this.linkGen(pagenum);
}
const link = `${this.baseUrl}${pagenum}`;
return this.useRouter ? { path: link } : link;
},
linkProps(pagenum) {
const link = this.makeLink(pagenum);
let props = {
href: typeof link === 'string' ? link : void 0,
target: this.target || null,
rel: this.rel || null,
disabled: this.disabled
};
if (this.useRouter || typeof link === 'object') {
props = assign(props, {
to: link,
exact: this.exact,
activeClass: this.activeClass,
exactActiveClass: this.exactActiveClass,
append: this.append,
replace: this.replace
});
}
return props;
}
linkProps(pagenum) {
const link = this.makeLink(pagenum)
let props = {
href: typeof link === 'string' ? link : void 0,
target: this.target || null,
rel: this.rel || null,
disabled: this.disabled
}
if (this.useRouter || typeof link === 'object') {
props = assign(props, {
to: link,
exact: this.exact,
activeClass: this.activeClass,
exactActiveClass: this.exactActiveClass,
append: this.append,
replace: this.replace
})
}
return props
}
};
}
}
</script>
@@ -1,77 +1,71 @@
<style>
.b-pagination .page-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.b-pagination .page-item.disabled {
cursor: not-allowed;
opacity: .65;
}
/* Bootstrap V4.beta.2 (and beta.1) missing focus styling for active link */
.b-pagination .page-item .page-link.active:focus {
box-shadow: 0 0 0 3px rgba(0,123,255,.5);
z-index: 1;
}
</style>
<script>
import { paginationMixin } from '../../mixins';
import { isVisible } from '../../utils/dom';
import { KeyCodes } from '../../utils';
import { paginationMixin } from '../../mixins'
import { isVisible } from '../../utils/dom'
import { KeyCodes } from '../../utils'
const props = {
perPage: {
type: Number,
default: 20
},
totalRows: {
type: Number,
default: 20
},
ariaControls: {
type: String,
default: null
}
};
perPage: {
type: Number,
default: 20
},
totalRows: {
type: Number,
default: 20
},
ariaControls: {
type: String,
default: null
}
}
// Our render function is brought in from the pagination mixin
export default {
mixins: [ paginationMixin ],
props,
computed: {
numberOfPages() {
const result = Math.ceil(this.totalRows / this.perPage);
return (result < 1) ? 1 : result;
mixins: [ paginationMixin ],
props,
computed: {
numberOfPages() {
const result = Math.ceil(this.totalRows / this.perPage)
return (result < 1) ? 1 : result
}
},
methods: {
// These methods are used by the render function
onClick(num, evt) {
// Handle edge cases where number of pages has changed (i.e. if perPage changes)
if (num > this.numberOfPages) {
num = this.numberOfPages
} else if (num < 1) {
num = 1
}
this.currentPage = num;
this.$nextTick(() => {
// Keep the current button focused if possible
const target = evt.target
if (isVisible(target) && this.$el.contains(target) && target.focus) {
target.focus()
} else {
this.focusCurrent()
}
})
this.$emit('change', this.currentPage)
},
methods: {
// These methods are used by the render function
onClick(num, evt) {
// Handle edge cases where number of pages has changed (i.e. if perPage changes)
if (num > this.numberOfPages) {
num = this.numberOfPages;
} else if (num < 1) {
num = 1;
}
this.currentPage = num;
this.$nextTick(() => {
// Keep the current button focused if possible
const target = evt.target;
if (isVisible(target) && this.$el.contains(target) && target.focus) {
target.focus();
} else {
this.focusCurrent();
}
});
this.$emit('change', this.currentPage);
},
makePage(pagenum) {
return pagenum;
},
linkProps(pagenum) {
return { href: '#' };
}
makePage(pagenum) {
return pagenum
},
linkProps(pagenum) {
return { href: '#' }
}
};
}
}
</script>

0 comments on commit d51349f

Please sign in to comment.