StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.2 KiB
113 lines
3.2 KiB
4 years ago
|
import Vue from '../../utils/vue';
|
||
|
|
import { isVisible, selectAll } from '../../utils/dom';
|
||
|
|
import normalizeSlotMixin from '../../mixins/normalize-slot';
|
||
|
|
import KeyCodes from '../../utils/key-codes';
|
||
|
|
var 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(','); // @vue/component
|
||
|
|
|
||
|
|
export var BButtonToolbar =
|
||
|
|
/*#__PURE__*/
|
||
|
|
Vue.extend({
|
||
|
|
name: 'BButtonToolbar',
|
||
|
|
mixins: [normalizeSlotMixin],
|
||
|
|
props: {
|
||
|
|
justify: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
keyNav: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted: function mounted() {
|
||
|
|
if (this.keyNav) {
|
||
|
|
// Pre-set the tabindexes if the markup does not include tabindex="-1" on the toolbar items
|
||
|
|
this.getItems();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onFocusin: function onFocusin(evt) {
|
||
|
|
if (evt.target === this.$el) {
|
||
|
|
evt.preventDefault();
|
||
|
|
evt.stopPropagation();
|
||
|
|
this.focusFirst(evt);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stop: function stop(evt) {
|
||
|
|
evt.preventDefault();
|
||
|
|
evt.stopPropagation();
|
||
|
|
},
|
||
|
|
onKeydown: function onKeydown(evt) {
|
||
|
|
if (!this.keyNav) {
|
||
|
|
/* istanbul ignore next: should never happen */
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var key = evt.keyCode;
|
||
|
|
var shift = evt.shiftKey;
|
||
|
|
|
||
|
|
if (key === KeyCodes.UP || key === KeyCodes.LEFT) {
|
||
|
|
this.stop(evt);
|
||
|
|
shift ? this.focusFirst(evt) : this.focusPrev(evt);
|
||
|
|
} else if (key === KeyCodes.DOWN || key === KeyCodes.RIGHT) {
|
||
|
|
this.stop(evt);
|
||
|
|
shift ? this.focusLast(evt) : this.focusNext(evt);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setItemFocus: function setItemFocus(item) {
|
||
|
|
item && item.focus && item.focus();
|
||
|
|
},
|
||
|
|
focusFirst: function focusFirst() {
|
||
|
|
var items = this.getItems();
|
||
|
|
this.setItemFocus(items[0]);
|
||
|
|
},
|
||
|
|
focusPrev: function focusPrev(evt) {
|
||
|
|
var items = this.getItems();
|
||
|
|
var index = items.indexOf(evt.target);
|
||
|
|
|
||
|
|
if (index > -1) {
|
||
|
|
items = items.slice(0, index).reverse();
|
||
|
|
this.setItemFocus(items[0]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
focusNext: function focusNext(evt) {
|
||
|
|
var items = this.getItems();
|
||
|
|
var index = items.indexOf(evt.target);
|
||
|
|
|
||
|
|
if (index > -1) {
|
||
|
|
items = items.slice(index + 1);
|
||
|
|
this.setItemFocus(items[0]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
focusLast: function focusLast() {
|
||
|
|
var items = this.getItems().reverse();
|
||
|
|
this.setItemFocus(items[0]);
|
||
|
|
},
|
||
|
|
getItems: function getItems() {
|
||
|
|
var items = selectAll(ITEM_SELECTOR, this.$el);
|
||
|
|
items.forEach(function (item) {
|
||
|
|
// Ensure tabfocus is -1 on any new elements
|
||
|
|
item.tabIndex = -1;
|
||
|
|
});
|
||
|
|
return items.filter(function (el) {
|
||
|
|
return isVisible(el);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
render: function render(h) {
|
||
|
|
return h('div', {
|
||
|
|
staticClass: 'btn-toolbar',
|
||
|
|
class: {
|
||
|
|
'justify-content-between': this.justify
|
||
|
|
},
|
||
|
|
attrs: {
|
||
|
|
role: 'toolbar',
|
||
|
|
tabindex: this.keyNav ? '0' : null
|
||
|
|
},
|
||
|
|
on: this.keyNav ? {
|
||
|
|
focusin: this.onFocusin,
|
||
|
|
keydown: this.onKeydown
|
||
|
|
} : {}
|
||
|
|
}, [this.normalizeSlot('default')]);
|
||
|
|
}
|
||
|
|
});
|