Permalink
Browse files

feat(pagination+pagination-nav): remove need for custom active focus …

…style (#1384)

* [pagination-mixin] use btn-primary to get focus styling

Avoids the need for custom CSS until properly addressed in Bootstrap V4.

See twbs/bootstrap#24838

* Update pagination-nav.js

* Delete pagination-nav.vue

* Update pagination.js

* Delete pagination.vue

* ESLint

* ESLint

* Include active style when pagination disabled

* Update pagination.js
  • Loading branch information...
tmorehouse authored and pi0 committed Nov 21, 2017
1 parent 537050b commit ecd9b6a657e0e126c86437f80f7adf1577975e1d
@@ -1,3 +1,84 @@
import bPaginationNav from './pagination-nav.vue'
import { assign } from '../../utils/object'
import { paginationMixin } from '../../mixins'
import { pickLinkProps } from '../link/link'
export default bPaginationNav
// Props needed for router links
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
}
},
// 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
}
},
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
}
}
}

This file was deleted.

Oops, something went wrong.
@@ -1,3 +1,57 @@
import bPagination from './pagination.vue'
import { paginationMixin } from '../../mixins'
import { isVisible } from '../../utils/dom'
export default bPagination
const props = {
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
}
},
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: '#' }
}
}
}

This file was deleted.

Oops, something went wrong.
@@ -186,17 +186,18 @@ export default {
if (t.disabled) {
inner = h('span', { class: [ 'page-link' ], domProps: { innerHTML: pageNum } })
} else {
const active = t.isActive(page.number)
inner = h(
'b-link',
{
class: t.pageLinkClasses(page),
props: t.linkProps(page.number),
attrs: {
role: 'menuitemradio',
tabindex: t.isActive(page.number) ? '0' : '-1',
tabindex: active ? '0' : '-1',
'aria-controls': t.ariaControls || null,
'aria-label': `${t.labelPage} ${page.number}`,
'aria-checked': t.isActive(page.number) ? 'true' : 'false',
'aria-checked': active ? 'true' : 'false',
'aria-posinset': page.number,
'aria-setsize': t.numberOfPages
},
@@ -380,7 +381,9 @@ export default {
return [
'page-link',
this.disabled ? 'disabled' : '',
this.isActive(page.number) ? 'active' : ''
// Interim workaround to get better focus styling of active button
// See https://github.com/twbs/bootstrap/issues/24838
this.isActive(page.number) ? 'btn-primary' : ''
]
},
getButtons () {

0 comments on commit ecd9b6a

Please sign in to comment.