ivue-material-plus

Version:
A high quality UI components Library with Vue.js
66 lines (63 loc) • 2.08 kB
JavaScript
import { defineComponent, getCurrentInstance, inject, watch, onUnmounted, onUpdated, h } from 'vue';
import defaultProps from './defaults.mjs';
import useRender from './render.mjs';
import useLayoutObserver from '../table-layout-observer.mjs';
import { removePopper } from '../utils.mjs';
import { removeClass, addClass } from '../../../utils/assist.mjs';
import { TableContextKey } from '../table/defaults.mjs';

const prefixCls = "ivue-table-body";
var TableBody = defineComponent({
  name: prefixCls,
  props: defaultProps,
  setup(props) {
    const vm = getCurrentInstance();
    const IvueTable = inject(TableContextKey);
    const { wrappedRowRender } = useRender(props);
    const { handleColumnsChange, handleScrollableWidthChange } = useLayoutObserver(IvueTable);
    const renderRow = () => {
      const list = props.store.states.data.value || [];
      return list.reduce((prev, row) => {
        return prev.concat(wrappedRowRender(row, prev.length));
      }, []);
    };
    watch(props.store.states.hoverRow, (newVal, oldVal) => {
      if (!props.store.states.isFixedColumns.value) {
        return;
      }
      let raf = window.requestAnimationFrame;
      if (!raf) {
        raf = (fn) => window.setTimeout(fn, 16);
      }
      raf(() => {
        var _a;
        const rows = (_a = vm == null ? void 0 : vm.vnode.el) == null ? void 0 : _a.querySelectorAll(".ivue-table-row");
        const oldRow = rows[oldVal];
        const newRow = rows[newVal];
        if (oldRow) {
          removeClass(oldRow, "hover-row");
        }
        if (newRow) {
          addClass(newRow, "hover-row");
        }
      });
    });
    onUnmounted(() => {
      var _a;
      (_a = removePopper) == null ? void 0 : _a();
    });
    onUpdated(() => {
      var _a;
      (_a = removePopper) == null ? void 0 : _a();
    });
    return {
      renderRow,
      handleColumnsChange,
      handleScrollableWidthChange
    };
  },
  render() {
    return h("tbody", {}, [this.renderRow()]);
  }
});

export { TableBody as default };
//# sourceMappingURL=index.mjs.map