2019-01-12 03:33:27 +00:00
|
|
|
import PropTypes from '../../_util/vue-types';
|
|
|
|
import KeyCode from '../../_util/KeyCode';
|
2020-06-23 09:34:41 +00:00
|
|
|
import { getSlot } from '../../_util/props-util';
|
2018-12-14 15:31:02 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' };
|
2018-12-14 15:31:02 +00:00
|
|
|
export default {
|
|
|
|
name: 'Sentinel',
|
|
|
|
props: {
|
|
|
|
setRef: PropTypes.func,
|
|
|
|
prevElement: PropTypes.any,
|
|
|
|
nextElement: PropTypes.any,
|
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
onKeyDown({ target, which, shiftKey }) {
|
|
|
|
const { nextElement, prevElement } = this.$props;
|
|
|
|
if (which !== KeyCode.TAB || document.activeElement !== target) return;
|
2018-12-14 15:31:02 +00:00
|
|
|
|
|
|
|
// Tab next
|
|
|
|
if (!shiftKey && nextElement) {
|
2019-01-12 03:33:27 +00:00
|
|
|
nextElement.focus();
|
2018-12-14 15:31:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Tab prev
|
|
|
|
if (shiftKey && prevElement) {
|
2019-01-12 03:33:27 +00:00
|
|
|
prevElement.focus();
|
2018-12-14 15:31:02 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
|
|
|
const { setRef } = this.$props;
|
2018-12-14 15:31:02 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2020-07-17 09:13:30 +00:00
|
|
|
tabindex={0}
|
2020-06-24 15:45:36 +00:00
|
|
|
ref={setRef}
|
2018-12-14 15:31:02 +00:00
|
|
|
style={sentinelStyle}
|
|
|
|
onKeydown={this.onKeyDown}
|
2019-01-12 03:33:27 +00:00
|
|
|
role="presentation"
|
|
|
|
>
|
2020-06-23 09:34:41 +00:00
|
|
|
{getSlot(this)}
|
2019-01-12 03:33:27 +00:00
|
|
|
</div>
|
|
|
|
);
|
2018-12-14 15:31:02 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|