birdpaper-ui/lib/table/src/table.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const util = require("../../utils/util.js");
const dom = require("../../utils/dom.js");
const useTable = (props, slots, emit) => {
  const bpTable = vue.ref(null);
  const columns = vue.ref([]);
  const table_width = vue.ref();
  let _remainder_col = 0;
  let _fixed_width = 0;
  let _min_width_list = [];
  let _col_width_list = [];
  const _min_column_width = 80;
  const getColumnsBySlot = () => {
    var _a, _b, _c;
    if (!((_a = slots.columns) == null ? void 0 : _a.call(slots)))
      return;
    const children = dom.getAllElements((_b = slots.columns) == null ? void 0 : _b.call(slots), true).filter((item) => item.type !== vue.Comment);
    if (children.length === 0)
      return;
    let arr = [];
    for (let i = 0; i < children.length; i++) {
      arr.push((_c = children[i]) == null ? void 0 : _c.props);
    }
    return arr;
  };
  let cols = [];
  const initColumns = () => {
    var _a, _b;
    const el = bpTable.value;
    cols = getColumnsBySlot() || props.cols;
    if (cols.length === 0 || cols.length > 99)
      return;
    _fixed_width = 0;
    _remainder_col = cols.length;
    _min_width_list = [];
    if (((_a = props.selection) == null ? void 0 : _a.type) && !((_b = cols[0]) == null ? void 0 : _b.type)) {
      cols.unshift({
        type: props.selection.type,
        width: 46,
        align: "center"
      });
      _remainder_col++;
    }
    for (let i = 0; i < cols.length; i++) {
      const { width } = cols[i];
      const minWidth = cols[i]["minWidth"] || cols[i]["min-width"];
      if (width) {
        _fixed_width += Number(width);
        _remainder_col--;
      }
      minWidth && _min_width_list.push(Number(minWidth));
    }
    table_width.value = el && el.offsetWidth - 2;
    _col_width_list = getWidthList() || [];
    columns.value = [];
    for (let i = 0; i < cols.length; i++) {
      columns.value.push({ ...cols[i], width: _col_width_list[i] });
    }
    return columns.value;
  };
  function getWidthList() {
    let width_list = [];
    let adapt_width = getAdaptWidth();
    if (_min_width_list.length) {
      _min_width_list.map((item, index) => {
        if (adapt_width > item) {
          _fixed_width += item;
          _remainder_col--;
          _min_width_list.splice(index, 1);
          adapt_width = getAdaptWidth();
        }
      });
    }
    for (let i = 0; i < cols.length; i++) {
      const { width, minWidth } = cols[i];
      if (width) {
        width_list.push(width);
        continue;
      }
      const hasMinWidth = minWidth && minWidth > adapt_width;
      if (hasMinWidth) {
        width_list.push(minWidth);
        continue;
      }
      width_list.push(adapt_width < _min_column_width ? _min_column_width : adapt_width);
    }
    return width_list;
  }
  function getAdaptWidth() {
    let width = (table_width.value - _fixed_width) / _remainder_col;
    return Number(Number(width).toFixed(2));
  }
  vue.watch(
    () => props.cols,
    () => {
      initColumns();
    }
  );
  vue.onMounted(() => {
    vue.nextTick(() => {
      initColumns();
      util.on(
        window,
        "resize",
        util.throttle(() => initColumns(), 400)
      );
    });
  });
  vue.onBeforeUnmount(() => util.off(window, "resize", () => initColumns()));
  return {
    initColumns,
    bpTable,
    table_width,
    columns
  };
};
exports.useTable = useTable;