+37
-34
lines changedFilter options
+37
-34
lines changed Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
1 1
import Vue from '../../utils/vue'
2 2
import KeyCodes from '../../utils/key-codes'
3 -
import { attemptFocus, isVisible, selectAll } from '../../utils/dom'
3 +
import { attemptFocus, contains, isVisible, selectAll } from '../../utils/dom'
4 4
import normalizeSlotMixin from '../../mixins/normalize-slot'
5 5 6 +
// --- Constants ---
7 + 6 8
const ITEM_SELECTOR = [
7 9
'.btn:not(.disabled):not([disabled]):not(.dropdown-item)',
8 10
'.form-control:not(.disabled):not([disabled])',
@@ -11,6 +13,15 @@ const ITEM_SELECTOR = [
11 13
'input[type="radio"]:not(.disabled)'
12 14
].join(',')
13 15 16 +
// --- Utility methods ---
17 + 18 +
const stopEvent = evt => {
19 +
evt.preventDefault()
20 +
evt.stopPropagation()
21 +
}
22 + 23 +
// --- Main component ---
24 + 14 25
// @vue/component
15 26
export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
16 27
name: 'BButtonToolbar',
@@ -26,37 +37,20 @@ export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
26 37
}
27 38
},
28 39
mounted() {
40 +
// Pre-set the tabindexes if the markup does not include
41 +
// `tabindex="-1"` on the toolbar items
29 42
if (this.keyNav) {
30 -
// Pre-set the tabindexes if the markup does not include tabindex="-1" on the toolbar items
31 43
this.getItems()
32 44
}
33 45
},
34 46
methods: {
35 -
onFocusin(evt) {
36 -
if (evt.target === this.$el) {
37 -
evt.preventDefault()
38 -
evt.stopPropagation()
39 -
this.focusFirst(evt)
40 -
}
41 -
},
42 -
stop(evt) {
43 -
evt.preventDefault()
44 -
evt.stopPropagation()
45 -
},
46 -
onKeydown(evt) {
47 -
if (!this.keyNav) {
48 -
/* istanbul ignore next: should never happen */
49 -
return
50 -
}
51 -
const key = evt.keyCode
52 -
const shift = evt.shiftKey
53 -
if (key === KeyCodes.UP || key === KeyCodes.LEFT) {
54 -
this.stop(evt)
55 -
shift ? this.focusFirst(evt) : this.focusPrev(evt)
56 -
} else if (key === KeyCodes.DOWN || key === KeyCodes.RIGHT) {
57 -
this.stop(evt)
58 -
shift ? this.focusLast(evt) : this.focusNext(evt)
59 -
}
47 +
getItems() {
48 +
const items = selectAll(ITEM_SELECTOR, this.$el)
49 +
// Ensure `tabindex="-1"` is set on every item
50 +
items.forEach(item => {
51 +
item.tabIndex = -1
52 +
})
53 +
return items.filter(el => isVisible(el))
60 54
},
61 55
focusFirst() {
62 56
const items = this.getItems()
@@ -82,13 +76,22 @@ export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
82 76
const items = this.getItems().reverse()
83 77
attemptFocus(items[0])
84 78
},
85 -
getItems() {
86 -
const items = selectAll(ITEM_SELECTOR, this.$el)
87 -
items.forEach(item => {
88 -
// Ensure tabfocus is -1 on any new elements
89 -
item.tabIndex = -1
90 -
})
91 -
return items.filter(el => isVisible(el))
79 +
onFocusin(evt) {
80 +
const { $el } = this
81 +
if (evt.target === $el && !contains($el, evt.relatedTarget)) {
82 +
stopEvent(evt)
83 +
this.focusFirst(evt)
84 +
}
85 +
},
86 +
onKeydown(evt) {
87 +
const { keyCode, shiftKey } = evt
88 +
if (keyCode === KeyCodes.UP || keyCode === KeyCodes.LEFT) {
89 +
stopEvent(evt)
90 +
shiftKey ? this.focusFirst(evt) : this.focusPrev(evt)
91 +
} else if (keyCode === KeyCodes.DOWN || keyCode === KeyCodes.RIGHT) {
92 +
stopEvent(evt)
93 +
shiftKey ? this.focusLast(evt) : this.focusNext(evt)
94 +
}
92 95
}
93 96
},
94 97
render(h) {
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4