Permalink
Browse files

perf(button-toolbar): convert template to render function (#1315)

* [button-toolbar] convert to render function

* Delete button-toolbar.vue
  • Loading branch information...
tmorehouse committed Nov 10, 2017
1 parent 3168e93 commit 765bfe3b1baff692946b432547ae048db3ed1f17
Showing with 135 additions and 117 deletions.
  1. +135 −2 src/components/button-toolbar/button-toolbar.js
  2. +0 −115 src/components/button-toolbar/button-toolbar.vue
@@ -1,3 +1,136 @@
import bButtonToolbar from './button-toolbar.vue';
import { from as arrayFrom } from '../../utils/array';
import { isVisible, selectAll } from '../../utils/dom';
export default bButtonToolbar;
const ITEM_SELECTOR = [
'.btn:not(.disabled):not([disabled]):not(.dropdown-item)',
'.form-control:not(.disabled):not([disabled])',
'select:not(.disabled):not([disabled])',
'input[type="checkbox"]:not(.disabled)',
'input[type="radio"]:not(.disabled)'
].join(',');
const KEY = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
};
export default {
render(h) {
const t = this;
return h(
'div',
{
class: t.classObject,
attrs: {
role: 'toolbar',
tabindex: t.keyNav ? '0' : null
},
on: {
focusin: t.onFocusin,
keydown: t.onKeydown
}
},
[ t.$slots.default ]
);
},
computed: {
classObject() {
return [
'btn-toolbar',
(this.justify && !this.vertical) ? 'justify-content-between' : ''
];
}
},
props: {
justify: {
type: Boolean,
default: false
},
keyNav: {
type: Boolean,
default: false
}
},
methods: {
onFocusin(evt) {
if (evt.target === this.$el) {
evt.preventDefault();
evt.stopPropagation();
this.focusFirst(evt);
}
},
onKeydown(evt) {
if (!this.keyNav) {
return;
}
const key = evt.keyCode;
const shift = evt.shiftKey;
if (key === KEY.UP || key === KEY.LEFT) {
evt.preventDefault();
evt.stopPropagation();
if (shift) {
this.focusFirst(evt)
} else {
this.focusNext(evt, true);
}
} else if (key === KEY.DOWN || key === KEY.RIGHT) {
evt.preventDefault();
evt.stopPropagation();
if (shift) {
this.focusLast(evt)
} else {
this.focusNext(evt, false);
}
}
},
setItemFocus(item) {
this.$nextTick(() => {
item.focus();
});
},
focusNext(evt, prev) {
const items = this.getItems();
if (items.length < 1) {
return;
}
let index = items.indexOf(evt.target);
if (prev && index > 0) {
index--;
} else if (!prev && index < items.length - 1) {
index++;
}
if (index < 0) {
index = 0;
}
this.setItemFocus(items[index]);
},
focusFirst(evt) {
const items = this.getItems();
if (items.length > 0) {
this.setItemFocus(items[0]);
}
},
focusLast(evt) {
const items = this.getItems();
if (items.length > 0) {
this.setItemFocus([items.length - 1]);
}
},
getItems() {
let items = selectAll(ITEM_SELECTOR, this.$el);
items.forEach(item => {
// Ensure tabfocus is -1 on any new elements
item.tabIndex = -1;
});
return items.filter(el => isVisible(el));
}
},
mounted() {
if (this.keyNav) {
// Pre-set the tabindexes if the markup does not include tabindex="-1" on the toolbar items
this.getItems();
}
}
};

This file was deleted.

Oops, something went wrong.

0 comments on commit 765bfe3

Please sign in to comment.