tdesign-vue/lib/table/hooks/useHoverKeyboardEvent.js

tdesign-vue

/**
 * tdesign v1.14.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { toRefs, ref, computed } from '@vue/composition-api';
import { get } from 'lodash-es';
import { on, off } from '../../utils/dom.js';
import { ARROW_DOWN_REG, ARROW_UP_REG, SPACE_REG, ARROW_LEFT_REG, ARROW_RIGHT_REG } from '../../_common/js/common.js';
import 'vue';
import 'raf';
import '../../utils/easing.js';

function useHoverKeyboardEvent(props, tableRef) {
  var _toRefs = toRefs(props),
    hover = _toRefs.hover,
    data = _toRefs.data,
    activeRowType = _toRefs.activeRowType,
    keyboardRowHover = _toRefs.keyboardRowHover;
  var hoverRow = ref();
  var currentHoverRowIndex = ref(-1);
  var tableRefTabIndex = ref(0);
  var needKeyboardRowHover = computed(function () {
    if (activeRowType.value === "single") return false;
    if (activeRowType.value === "multiple") return true;
    return hover.value || keyboardRowHover.value;
  });
  var onHoverRow = function onHoverRow(ctx, extra) {
    var rowValue = get(ctx.row, props.rowKey);
    if (hoverRow.value === rowValue && (extra === null || extra === void 0 ? void 0 : extra.action) !== "hover") {
      hoverRow.value = void 0;
    } else {
      hoverRow.value = rowValue;
    }
    currentHoverRowIndex.value = ctx.index;
  };
  var clearHoverRow = function clearHoverRow() {
    hoverRow.value = void 0;
    currentHoverRowIndex.value = -1;
  };
  var keyboardDownListener = function keyboardDownListener(e) {
    var _e$key;
    if (!needKeyboardRowHover.value) return;
    var code = ((_e$key = e.key) === null || _e$key === void 0 ? void 0 : _e$key.trim()) || e.code;
    if (ARROW_DOWN_REG.test(code)) {
      e.preventDefault();
      var index = Math.min(data.value.length - 1, currentHoverRowIndex.value + 1);
      onHoverRow({
        row: data.value[index],
        index: index,
        e: e
      }, {
        action: "hover"
      });
    } else if (ARROW_UP_REG.test(code)) {
      e.preventDefault();
      var _index = Math.max(0, currentHoverRowIndex.value - 1);
      onHoverRow({
        row: data.value[_index],
        index: _index,
        e: e
      }, {
        action: "hover"
      });
    } else if (SPACE_REG.test(code) && props.activeRowType !== "multiple") {
      var _index2 = currentHoverRowIndex.value;
      onHoverRow({
        row: data.value[_index2],
        index: _index2,
        e: e
      });
    }
    if (ARROW_LEFT_REG.test(code) || ARROW_RIGHT_REG.test(code)) {
      tableRefTabIndex.value = void 0;
    } else {
      tableRefTabIndex.value = 0;
    }
  };
  var addRowHoverKeyboardListener = function addRowHoverKeyboardListener() {
    on(tableRef.value, "keydown", keyboardDownListener);
  };
  var removeRowHoverKeyboardListener = function removeRowHoverKeyboardListener() {
    off(tableRef.value, "keydown", keyboardDownListener);
  };
  return {
    hoverRow: hoverRow,
    needKeyboardRowHover: needKeyboardRowHover,
    clearHoverRow: clearHoverRow,
    addRowHoverKeyboardListener: addRowHoverKeyboardListener,
    removeRowHoverKeyboardListener: removeRowHoverKeyboardListener,
    tableRefTabIndex: tableRefTabIndex
  };
}

export { useHoverKeyboardEvent as default, useHoverKeyboardEvent };
//# sourceMappingURL=useHoverKeyboardEvent.js.map