@meve/ui/es/utils/mixins/keyboardActive.js

Argon design system components library

export var KeyboardActiveMixin = {
  data: function data() {
    return {
      keyboardActiveIndex: 0,
      keyboardLastIndex: 0,
      keyboardDisabledIndexes: [],
      keyboardDisabled: false
    };
  },
  computed: {
    canMove: function canMove() {
      return this.keyboardLastIndex + 1 - this.keyboardDisabledIndexes.length > 1;
    }
  },
  methods: {
    handleKeydownActive: function handleKeydownActive(event) {
      if (this.keyboardDisabled) {
        return;
      }

      switch (event.code) {
        case 'ArrowDown':
          this.nextActiveIndex();
          this.handleKeydownArrow();
          break;

        case 'ArrowUp':
          this.prevActiveIndex();
          this.handleKeydownArrow();
          break;

        case 'Escape':
          this.handleKeydownEscape();
          break;

        case 'Enter':
        case 'NumpadEnter':
          this.handleKeydownEnter(this.keyboardActiveIndex);
          break;
      }
    },
    isDisabledIndex: function isDisabledIndex() {
      return this.keyboardDisabledIndexes.includes(this.keyboardActiveIndex);
    },
    nextActiveIndex: function nextActiveIndex() {
      if (!this.canMove) {
        return;
      }

      this.keyboardActiveIndex = this.keyboardActiveIndex === this.keyboardLastIndex ? 0 : this.keyboardActiveIndex + 1;

      if (this.isDisabledIndex()) {
        this.nextActiveIndex();
      }
    },
    prevActiveIndex: function prevActiveIndex() {
      if (!this.canMove) {
        return;
      }

      this.keyboardActiveIndex = this.keyboardActiveIndex === 0 ? this.keyboardLastIndex : this.keyboardActiveIndex - 1;

      if (this.isDisabledIndex()) {
        this.prevActiveIndex();
      }
    },
    // wait implement
    handleKeydownEnter: function handleKeydownEnter() {},
    // wait implement
    handleKeydownArrow: function handleKeydownArrow() {},
    // wait implement
    handleKeydownEscape: function handleKeydownEscape() {}
  },
  mounted: function mounted() {
    window.addEventListener('keydown', this.handleKeydownActive);
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeydownActive);
  }
};