| 1 | export default {
|
| 2 | data() {
|
| 3 | return {
|
| 4 | hoverOption: -1
|
| 5 | };
|
| 6 | },
|
| 7 |
|
| 8 | computed: {
|
| 9 | optionsAllDisabled() {
|
| 10 | return this.options.filter(option => option.visible).every(option => option.disabled);
|
| 11 | }
|
| 12 | },
|
| 13 |
|
| 14 | watch: {
|
| 15 | hoverIndex(val) {
|
| 16 | if (typeof val === 'number' && val > -1) {
|
| 17 | this.hoverOption = this.options[val] || {};
|
| 18 | }
|
| 19 | this.options.forEach(option => {
|
| 20 | option.hover = this.hoverOption === option;
|
| 21 | });
|
| 22 | }
|
| 23 | },
|
| 24 |
|
| 25 | methods: {
|
| 26 | navigateOptions(direction) {
|
| 27 | if (!this.visible) {
|
| 28 | this.visible = true;
|
| 29 | return;
|
| 30 | }
|
| 31 | if (this.options.length === 0 || this.filteredOptionsCount === 0) return;
|
| 32 | if (!this.optionsAllDisabled) {
|
| 33 | if (direction === 'next') {
|
| 34 | this.hoverIndex++;
|
| 35 | if (this.hoverIndex === this.options.length) {
|
| 36 | this.hoverIndex = 0;
|
| 37 | }
|
| 38 | } else if (direction === 'prev') {
|
| 39 | this.hoverIndex--;
|
| 40 | if (this.hoverIndex < 0) {
|
| 41 | this.hoverIndex = this.options.length - 1;
|
| 42 | }
|
| 43 | }
|
| 44 | const option = this.options[this.hoverIndex];
|
| 45 | if (option.disabled === true ||
|
| 46 | option.groupDisabled === true ||
|
| 47 | !option.visible) {
|
| 48 | this.navigateOptions(direction);
|
| 49 | }
|
| 50 | this.$nextTick(() => this.scrollToOption(this.hoverOption));
|
| 51 | }
|
| 52 | }
|
| 53 | }
|
| 54 | };
|