ivue-material-plus/dist/unplugin-vue-components/lib/components/ivue-table/table-header/events.js

A high quality UI components Library with Vue.js

'use strict';

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

var vue = require('vue');
var assist = require('../../../utils/assist.js');
var dom = require('../../../utils/dom.js');
var defaults = require('../table/defaults.js');

function useEvent(props, emit) {
  const vm = vue.getCurrentInstance();
  const IvueTable = vue.inject(defaults.TableContextKey);
  const draggingColumn = vue.ref(null);
  const dragging = vue.ref(false);
  const dragState = vue.ref({});
  const toggleOrder = ({ order, sortOrders }) => {
    if (order === "") {
      return sortOrders[0];
    }
    const index = sortOrders.indexOf(order || null);
    return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
  };
  const handleSortClick = (event, column, givenOrder) => {
    event.stopPropagation();
    const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
    let target = event.target;
    while (target && target.tagName !== "TH") {
      target = target.parentNode;
    }
    if (target && target.tagName === "TH") {
      if (assist.hasClass(target, "noclick")) {
        assist.removeClass(target, "noclick");
        return;
      }
    }
    if (!column.sortable) {
      return;
    }
    const states = props.store.states;
    let sortProp = states.sortProp.value;
    const sortingColumn = states.sortingColumn.value;
    let sortOrder;
    if (sortingColumn !== column || sortingColumn === column && sortingColumn.order === null) {
      if (sortingColumn) {
        sortingColumn.order = null;
      }
      states.sortingColumn.value = column;
      sortProp = column.property;
    }
    if (!order) {
      column.order = null;
      sortOrder = null;
    } else {
      sortOrder = order;
      column.order = order;
    }
    states.sortProp.value = sortProp;
    states.sortOrder.value = sortOrder;
    IvueTable.store.commit("changeSortCondition");
  };
  const handleHeaderClick = (event, column) => {
    event.preventDefault();
    if (!column.filters && column.sortable) {
      handleSortClick(event, column, false);
    }
    IvueTable.emit("on-header-click", column, event);
  };
  const handleMouseDown = (event, column) => {
    if (column.children && column.children.length > 0) {
      return;
    }
    if (draggingColumn.value && props.border) {
      dragging.value = true;
      emit("on-drag-visible", true);
      const tableDom = IvueTable.vnode.el;
      const tableLeft = tableDom.getBoundingClientRect().left;
      const currentColumnDom = vm.vnode.el.querySelector(`th.${column.id}`);
      const columnRect = currentColumnDom.getBoundingClientRect();
      const cellDom = currentColumnDom.querySelector(".cell-content");
      const minLeft = columnRect.left - tableLeft + (cellDom.offsetWidth + 30);
      assist.addClass(currentColumnDom, "noclick");
      dragState.value = {
        startMouseLeft: event.clientX,
        startLeft: columnRect.right - tableLeft,
        startColumnLeft: columnRect.left - tableLeft,
        tableLeft
      };
      const draggingDottedDom = IvueTable.refs.draggingDotted;
      draggingDottedDom.style.left = `${dragState.value.startLeft}px`;
      document.onselectstart = () => {
        return false;
      };
      document.ondragstart = () => {
        return false;
      };
      const handleDocumentMouseMove = (event2) => {
        const deltaLeft = event2.clientX - dragState.value.startMouseLeft;
        let maxLeft = dragState.value.startLeft + deltaLeft;
        if (maxLeft >= tableDom.offsetWidth) {
          maxLeft = tableDom.offsetWidth;
        }
        draggingDottedDom.style.left = `${Math.max(minLeft, maxLeft)}px`;
      };
      const handleDocumentMouseUp = () => {
        if (dragging.value) {
          const { startColumnLeft, startLeft } = dragState.value;
          const draggingDottedDomLeft = Number.parseInt(
            draggingDottedDom.style.left,
            10
          );
          const columnWidth = draggingDottedDomLeft - startColumnLeft;
          column.width = columnWidth;
          column.columnWidth = columnWidth;
          IvueTable.emit(
            "on-header-dragend",
            column.width,
            startLeft - startColumnLeft,
            column,
            event
          );
          requestAnimationFrame(() => {
            props.store.scheduleLayout(false, true);
          });
          document.body.style.cursor = "";
          dragging.value = false;
          draggingColumn.value = null;
          dragState.value = {};
          emit("on-drag-visible", false);
        }
        dom.off(document, "mousemove", handleDocumentMouseMove);
        dom.off(document, "mouseup", handleDocumentMouseUp);
        document.onselectstart = null;
        document.ondragstart = null;
        setTimeout(() => {
          assist.removeClass(currentColumnDom, "noclick");
        }, 0);
      };
      dom.on(document, "mousemove", handleDocumentMouseMove);
      dom.on(document, "mouseup", handleDocumentMouseUp);
    }
  };
  const handleMouseMove = (event, column) => {
    if (column.children && column.children.length > 0) {
      return;
    }
    let target = event.target;
    while (target && target.tagName !== "TH") {
      target = target.parentNode;
    }
    if (!column || !column.resizable) {
      return;
    }
    if (!dragging.value && props.border) {
      const rect = target.getBoundingClientRect();
      const bodyStyle = document.body.style;
      if (rect.width > 12 && rect.right - event.pageX < 8) {
        bodyStyle.cursor = "col-resize";
        if (assist.hasClass(target, "is-sortable")) {
          target.style.cursor = "col-resize";
        }
        draggingColumn.value = column;
      } else if (!dragging.value) {
        bodyStyle.cursor = "";
        if (assist.hasClass(target, "is-sortable") && column.filterable) {
          target.style.cursor = "inherit";
        } else if (assist.hasClass(target, "is-sortable")) {
          target.style.cursor = "pointer";
        }
        draggingColumn.value = null;
      }
    }
  };
  const handleMouseOut = () => {
    document.body.style.cursor = "";
  };
  return {
    handleSortClick,
    handleHeaderClick,
    handleMouseDown,
    handleMouseMove,
    handleMouseOut
  };
}

exports["default"] = useEvent;
//# sourceMappingURL=events.js.map