xdesign-vue-next/cjs/table/thead.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

'use strict';

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

var _typeof = require('@babel/runtime/helpers/typeof');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var isFunction = require('lodash/isFunction');
var table_hooks_useFixed = require('./hooks/useFixed.js');
var table_hooks_useClassName = require('./hooks/useClassName.js');
var table_hooks_useTableHeader = require('./hooks/useTableHeader.js');
var table_ellipsis = require('./ellipsis.js');
var table_utils = require('./utils.js');
require('@babel/runtime/helpers/slicedToArray');
require('lodash/get');
require('lodash/debounce');
require('lodash/xorWith');
require('../_common/js/log/log.js');
require('../_common/js/utils/getScrollbarWidth.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/isString');
require('lodash/isNull');
require('lodash/isUndefined');
require('lodash/isNumber');
require('lodash/isArray');
require('../utils/dom.js');
require('../_chunks/dep-8d10b59f.js');
require('../utils/easing.js');
require('../hooks/useConfig.js');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/en_US.js');
require('./hooks/useMultiHeader.js');
require('../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../tooltip/index.js');
require('../tooltip/tooltip.js');
require('lodash/omit');
require('../tooltip/props.js');
require('../popup/props.js');
require('../popup/index.js');
require('../popup/popup.js');
require('@popperjs/core');
require('../hooks/useVModel.js');
require('../_common/js/utils/set-style.js');
require('../popup/container.js');
require('../hooks/useResizeObserver.js');
require('../hooks/tnode.js');
require('../utils/withInstall.js');
require('../tooltip/util.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var THead = vue.defineComponent({
  name: "XHead",
  props: {
    classPrefix: String,
    ellipsisOverlayClassName: String,
    isFixedHeader: Boolean,
    thDraggable: Boolean,
    maxHeight: [String, Number],
    height: [String, Number],
    rowAndColFixedPosition: Map,
    thWidthList: Object,
    bordered: Boolean,
    isMultipleHeader: Boolean,
    resizable: Boolean,
    attach: [String, Function],
    spansAndLeafNodes: Object,
    thList: Array,
    columnResizeParams: Object,
    showColumnShadow: Object
  },
  setup: function setup(props, _ref) {
    var slots = _ref.slots;
    var theadRef = vue.ref();
    var classnames = table_hooks_useClassName["default"]();
    var tableHeaderClasses = classnames.tableHeaderClasses,
      tableBaseClass = classnames.tableBaseClass;
    var theadClasses = vue.computed(function () {
      var _ref2;
      return [tableHeaderClasses.header, (_ref2 = {}, _defineProperty__default["default"](_ref2, tableHeaderClasses.fixed, Boolean(props.maxHeight || props.height)), _defineProperty__default["default"](_ref2, tableBaseClass.bordered, props.bordered && props.isMultipleHeader), _defineProperty__default["default"](_ref2, tableHeaderClasses.multipleHeader, props.isMultipleHeader), _ref2)];
    });
    var colspanSkipMap = vue.computed(function () {
      var map = {};
      var list = props.thList[0];
      for (var i = 0, len = list.length; i < len; i++) {
        var item = list[i];
        if (item.colspan > 1) {
          for (var j = i + 1; j < i + item.colspan; j++) {
            if (list[j]) {
              map[list[j].colKey] = true;
            }
          }
        }
      }
      return map;
    });
    var getTableNode = function getTableNode(thead) {
      var parent = thead;
      while (parent) {
        var _parent;
        parent = parent.parentNode;
        if ((_parent = parent) !== null && _parent !== void 0 && (_parent = _parent.classList) !== null && _parent !== void 0 && _parent.contains("".concat(props.classPrefix, "-table"))) {
          break;
        }
      }
      return parent;
    };
    return _objectSpread(_objectSpread({}, classnames), {}, {
      colspanSkipMap: colspanSkipMap,
      theadClasses: theadClasses,
      theadRef: theadRef,
      slots: slots,
      getTableNode: getTableNode
    });
  },
  render: function render() {
    var _this = this;
    var renderThNodeList = function renderThNodeList(rowAndColFixedPosition, thWidthList) {
      var thBorderMap = /* @__PURE__ */new Map();
      var thRowspanAndColspan = _this.spansAndLeafNodes.rowspanAndColspanMap;
      return _this.thList.map(function (row, rowIndex) {
        var thRow = row.map(function (col, index) {
          var _ref3, _col$children;
          if (_this.colspanSkipMap[col.colKey]) return null;
          var rowspanAndColspan = thRowspanAndColspan.get(col);
          if (index === 0 && rowspanAndColspan.rowspan > 1) {
            for (var j = rowIndex + 1; j < rowIndex + rowspanAndColspan.rowspan; j++) {
              thBorderMap.set(_this.thList[j][0], true);
            }
          }
          var thStyles = table_hooks_useFixed.getColumnFixedStyles(col, index, rowAndColFixedPosition, _this.tableColFixedClasses);
          var colParams = {
            col: col,
            colIndex: index,
            row: {},
            rowIndex: -1
          };
          var customClasses = table_utils.formatClassNames(col.className, _objectSpread(_objectSpread({}, colParams), {}, {
            type: "th"
          }));
          var isLeftFixedActive = _this.showColumnShadow.left && col.fixed === "left";
          var isRightFixedActive = _this.showColumnShadow.right && col.fixed === "right";
          var canDragSort = _this.thDraggable && !(isLeftFixedActive || isRightFixedActive);
          var thClasses = [thStyles.classes, customClasses, (_ref3 = {}, _defineProperty__default["default"](_ref3, _this.tableHeaderClasses.thBordered, thBorderMap.get(col)), _defineProperty__default["default"](_ref3, "".concat(_this.classPrefix, "-table__th-").concat(col.colKey), col.colKey), _defineProperty__default["default"](_ref3, _this.tdAlignClasses[col.align], col.align && col.align !== "left"), _defineProperty__default["default"](_ref3, _this.tableDraggableClasses.dragSortTh, canDragSort), _ref3)];
          var withoutChildren = !((_col$children = col.children) !== null && _col$children !== void 0 && _col$children.length);
          var width = withoutChildren && thWidthList !== null && thWidthList !== void 0 && thWidthList[col.colKey] ? "".concat(thWidthList === null || thWidthList === void 0 ? void 0 : thWidthList[col.colKey], "px") : void 0;
          var styles = _objectSpread(_objectSpread({}, thStyles.style || {}), {}, {
            width: width
          });
          var innerTh = table_hooks_useTableHeader.renderTitle(_this.slots, col, index);
          var resizeColumnListener = _this.resizable || !canDragSort ? {
            onMousedown: function onMousedown(e) {
              if (_this.resizable) {
                var _this$columnResizePar, _this$columnResizePar2;
                (_this$columnResizePar = _this.columnResizeParams) === null || _this$columnResizePar === void 0 || (_this$columnResizePar2 = _this$columnResizePar.onColumnMousedown) === null || _this$columnResizePar2 === void 0 ? void 0 : _this$columnResizePar2.call(_this$columnResizePar, e, col, index);
              }
              if (!canDragSort) {
                var timer = setTimeout(function () {
                  var _thList$index;
                  var thList = _this.theadRef.querySelectorAll("th");
                  (_thList$index = thList[index]) === null || _thList$index === void 0 ? void 0 : _thList$index.removeAttribute("draggable");
                  clearTimeout(timer);
                }, 10);
              }
            },
            onMousemove: function onMousemove(e) {
              var _this$columnResizePar3, _this$columnResizePar4;
              _this.resizable && ((_this$columnResizePar3 = _this.columnResizeParams) === null || _this$columnResizePar3 === void 0 || (_this$columnResizePar4 = _this$columnResizePar3.onColumnMouseover) === null || _this$columnResizePar4 === void 0 ? void 0 : _this$columnResizePar4.call(_this$columnResizePar3, e, col));
            }
          } : {};
          var content = isFunction__default["default"](col.ellipsisTitle) ? col.ellipsisTitle(vue.h, {
            col: col,
            colIndex: index
          }) : void 0;
          var isEllipsis = col.ellipsisTitle !== void 0 ? Boolean(col.ellipsisTitle) : Boolean(col.ellipsis);
          var attrs = (isFunction__default["default"](col.attrs) ? col.attrs(_objectSpread(_objectSpread({}, colParams), {}, {
            type: "th"
          })) : col.attrs) || {};
          if (col.colspan > 1) {
            attrs.colspan = col.colspan;
          }
          return vue.createVNode("th", vue.mergeProps({
            "key": col.colKey,
            "data-colkey": col.colKey,
            "class": thClasses,
            "style": styles
          }, attrs, rowspanAndColspan, resizeColumnListener), [vue.createVNode("div", {
            "class": _this.tableBaseClass.thCellInner
          }, [isEllipsis ? vue.createVNode(table_ellipsis["default"], {
            "placement": "bottom",
            "attach": _this.attach || (_this.theadRef ? function () {
              return _this.getTableNode(_this.theadRef);
            } : void 0),
            "tooltipContent": content && function () {
              return content;
            },
            "tooltipProps": _typeof__default["default"](col.ellipsisTitle) === "object" ? col.ellipsisTitle : void 0,
            "overlayClassName": _this.ellipsisOverlayClassName,
            "classPrefix": _this.classPrefix
          }, _isSlot(innerTh) ? innerTh : {
            "default": function _default() {
              return [innerTh];
            }
          }) : innerTh])]);
        });
        return vue.createVNode("tr", {
          "key": rowIndex
        }, [thRow]);
      });
    };
    return vue.createVNode("thead", {
      "ref": "theadRef",
      "class": this.theadClasses
    }, [renderThNodeList(this.rowAndColFixedPosition, this.thWidthList)]);
  }
});

exports["default"] = THead;
//# sourceMappingURL=thead.js.map