@opensig/opendesign/es/table/useTableCommon.mjs

import { computed, toValue } from "vue";
import { isString, isHoverDevice } from "../_utils/is.mjs";
import { useI18n } from "../locale/index.mjs";
import { useTableMeta } from "./useTableMeta.mjs";
const useTableCommon = (options) => {
  const { tableEl, border, highlightCurrentRow } = options;
  const { t } = useI18n();
  const emptyLabel = computed(() => {
    var _a;
    return ((_a = options.emptyLabel) == null ? void 0 : _a.value) || t("common.empty");
  });
  const loadingLabel = computed(() => {
    var _a;
    return ((_a = options.loadingLabel) == null ? void 0 : _a.value) || t("common.loading");
  });
  const borderClass = computed(() => {
    if (isString(border == null ? void 0 : border.value)) {
      return border.value.split("-").map((item) => `o-table-border-${item}`);
    }
    return "";
  });
  const tableMeta = useTableMeta(tableEl, { markCellLastCol: true, markCellLastRow: true, markRowLast: true });
  const highlightedDoms = [];
  let highlightTrigger = null;
  const clearHighlight = () => {
    if (!highlightCurrentRow.value) {
      return;
    }
    highlightedDoms.forEach((cell) => {
      cell.classList.remove("o-table-highlight");
    });
    highlightedDoms.length = 0;
    highlightTrigger = null;
  };
  const applyHighlight = (dom, className) => {
    highlightedDoms.push(dom);
    dom.classList.add(className);
  };
  const highlightTable = (cell) => {
    if (highlightTrigger === cell) {
      return;
    }
    clearHighlight();
    highlightTrigger = cell;
    const cellMeta = tableMeta.getMeta(cell);
    if (!cellMeta || cellMeta.section.scope !== "body") {
      return;
    }
    const section = cellMeta.section;
    const rowEl = section.rows[cellMeta.rowStart];
    const rowSpan = cellMeta.el.rowSpan;
    const className = "o-table-highlight";
    applyHighlight(rowEl, className);
    if (rowSpan === 1) {
      const rows = section.data[cellMeta.rowStart];
      rows.forEach((item) => {
        if (item && item.el.parentElement !== rowEl) {
          applyHighlight(item.el, className);
        }
      });
    } else {
      for (let i = cellMeta.rowStart + 1; i < cellMeta.rowEnd; i++) {
        const rowElItem = section.rows[i];
        if (rowElItem) {
          applyHighlight(rowElItem, className);
        }
      }
    }
  };
  const getTdEl = (el) => {
    if (!(el instanceof HTMLElement)) {
      return null;
    }
    let current = el;
    while (current && current.tagName !== "TD" && current.tagName !== "TH" && current !== toValue(tableEl) && current !== document.body) {
      current = current.parentElement;
    }
    return (current == null ? void 0 : current.tagName) === "TD" ? current : null;
  };
  const handleMouseOver = (e) => {
    if (!highlightCurrentRow.value) {
      return;
    }
    const target = getTdEl(e.target);
    if (!target || !isHoverDevice) {
      return;
    }
    highlightTable(target);
  };
  const handleTouchStart = (e) => {
    if (!highlightCurrentRow.value) {
      return;
    }
    const target = getTdEl(e.target);
    if (!target) {
      return;
    }
    highlightTable(target);
  };
  return {
    emptyLabel,
    loadingLabel,
    borderClass,
    handleMouseOver,
    clearHighlight,
    handleTouchStart
  };
};
export {
  useTableCommon
};