ivue-material-plus/dist/unplugin-vue-components/lib/components/ivue-tree/hooks/useKeydown.js

A high quality UI components Library with Vue.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var helpers = require('../../../utils/helpers.js');

const useKeydown = (el, store) => {
  const treeItems = vue.shallowRef([]);
  const checkboxItems = vue.shallowRef([]);
  const initTabIndex = () => {
    var _a;
    treeItems.value = Array.from(
      el.value.querySelectorAll(".is-focusable[role=treeItem]")
    );
    checkboxItems.value = Array.from(
      el.value.querySelectorAll("input[type=checkbox]")
    );
    const checkedItem = el.value.querySelectorAll(".is-checked[role=treeItem]");
    if (checkedItem.length) {
      checkedItem[0].setAttribute("tabindex", "0");
      return;
    }
    (_a = treeItems.value[0]) == null ? void 0 : _a.setAttribute("tabindex", "0");
  };
  const handleKeydown = (event) => {
    const currentItem = event.target;
    if (!currentItem.className.includes("ivue-tree-node")) {
      return;
    }
    const code = event.code;
    treeItems.value = Array.from(
      el.value.querySelectorAll(".is-focusable[role=treeItem]")
    );
    const currentIndex = treeItems.value.indexOf(currentItem);
    let nextIndex;
    if ([helpers.EVENT_CODE.up, helpers.EVENT_CODE.down].includes(code)) {
      event.preventDefault();
      if (code === helpers.EVENT_CODE.up) {
        if (currentIndex === -1) {
          nextIndex = 0;
        } else if (currentIndex !== 0) {
          nextIndex = currentIndex - 1;
        } else {
          nextIndex = treeItems.value.length - 1;
        }
        const startIndex = nextIndex;
        treeItems.value.forEach(() => {
          if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) {
            return;
          }
          nextIndex--;
          if (nextIndex === startIndex) {
            nextIndex = -1;
            return;
          }
          if (nextIndex < 0) {
            nextIndex = treeItems.value.length - 1;
          }
        });
      } else {
        if (currentIndex === -1) {
          nextIndex = 0;
        } else if (currentIndex < treeItems.value.length - 1) {
          nextIndex = currentIndex + 1;
        } else {
          nextIndex = 0;
        }
        const startIndex = nextIndex;
        treeItems.value.forEach(() => {
          if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) {
            return;
          }
          nextIndex++;
          if (nextIndex === startIndex) {
            nextIndex = -1;
            return;
          }
          if (nextIndex >= treeItems.value.length) {
            nextIndex = 0;
          }
        });
      }
      nextIndex !== -1 && treeItems.value[nextIndex].focus();
    }
    if ([helpers.EVENT_CODE.left, helpers.EVENT_CODE.right].includes(code)) {
      event.preventDefault();
      currentItem.click();
    }
    const hasInput = currentItem.querySelector(
      '[type="checkbox"]'
    );
    if ([helpers.EVENT_CODE.enter, helpers.EVENT_CODE.space].includes(code) && hasInput) {
      event.preventDefault();
      hasInput.click();
    }
  };
  vue.watch(checkboxItems, (value) => {
    value.forEach((checkbox) => {
      checkbox.setAttribute("tabindex", "-1");
    });
  });
  vue.onMounted(() => {
    initTabIndex();
    core.useEventListener(el, "keydown", handleKeydown);
  });
  vue.onUpdated(() => {
    treeItems.value = Array.from(el.value.querySelectorAll("[role=treeItem]"));
    checkboxItems.value = Array.from(
      el.value.querySelectorAll("input[type=checkbox]")
    );
  });
};

exports.useKeydown = useKeydown;
//# sourceMappingURL=useKeydown.js.map