tdesign-mobile-vue
Version:
tdesign-mobile-vue
351 lines (343 loc) • 16.7 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 TDesign Group
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var table_baseTableProps = require('./base-table-props.js');
var config = require('../config.js');
var table_hooks_useClassName = require('./hooks/useClassName.js');
var table_hooks_useStyle = require('./hooks/useStyle.js');
var table_hooks_useFixed = require('./hooks/useFixed.js');
var loading_index = require('../loading/index.js');
var configProvider_useConfig = require('../_chunks/dep-21f18d3b.js');
var hooks_tnode = require('../hooks/tnode.js');
var table_utils_index = require('./utils/index.js');
var isFunction = require('../_chunks/dep-88fe047a.js');
var get = require('../_chunks/dep-7fa39e6f.js');
var isString = require('../_chunks/dep-c3cb976c.js');
require('../hooks/useClass.js');
require('@babel/runtime/helpers/slicedToArray');
require('../_common/js/log/log.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/setStyle.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('../_chunks/dep-6b5052db.js');
require('../_chunks/dep-f11711eb.js');
require('../_chunks/dep-757b152c.js');
require('../_chunks/dep-ff4786c0.js');
require('../_chunks/dep-2f809ed9.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-5be9198d.js');
require('../loading/icon/spinner.js');
require('../loading/props.js');
require('../shared/dom.js');
require('../loading/plugin.js');
require('../_chunks/dep-b9642a56.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-28b1e09d.js');
require('../_chunks/dep-57aa1aa0.js');
require('dayjs');
require('../_chunks/dep-85204fa0.js');
require('../_chunks/dep-f6b14f80.js');
require('../_chunks/dep-a8d60643.js');
require('../_chunks/dep-7c911ba3.js');
require('../_chunks/dep-ef223206.js');
require('../_chunks/dep-49f0a63e.js');
require('../_chunks/dep-d950aa21.js');
require('../_chunks/dep-a697b1b9.js');
require('../_chunks/dep-4dfb9b9c.js');
require('../_chunks/dep-c65deed7.js');
require('../_chunks/dep-94eeec5a.js');
require('../_chunks/dep-060bf1cf.js');
require('../_chunks/dep-0e05e959.js');
require('../_chunks/dep-324da301.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-a7319409.js');
require('../_chunks/dep-afa9f3f2.js');
require('../_chunks/dep-ae809b86.js');
require('../_chunks/dep-2b08c0a6.js');
require('../_chunks/dep-288156c7.js');
require('../_chunks/dep-3d4c38f1.js');
require('../_chunks/dep-6df33aaf.js');
require('../_chunks/dep-675798b4.js');
require('../_chunks/dep-ccc9ad3d.js');
require('../_common/js/utils/general.js');
require('../_chunks/dep-da6dc2cf.js');
require('../shared/component.js');
require('../_chunks/dep-0528a76d.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var prefix = config["default"].prefix;
var BaseTable = vue.defineComponent({
name: "".concat(prefix, "-base-table"),
props: table_baseTableProps["default"],
emits: ["cell-click", "row-click", "scroll"],
setup: function setup(props, context) {
var tableRef = vue.ref();
var theadRef = vue.ref();
var tableElmRef = vue.ref();
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var _useClassName = table_hooks_useClassName["default"](),
classPrefix = _useClassName.classPrefix,
tableLayoutClasses = _useClassName.tableLayoutClasses,
tableHeaderClasses = _useClassName.tableHeaderClasses,
tableBaseClass = _useClassName.tableBaseClass,
tdAlignClasses = _useClassName.tdAlignClasses,
tdEllipsisClass = _useClassName.tdEllipsisClass,
tableRowFixedClasses = _useClassName.tableRowFixedClasses,
tableColFixedClasses = _useClassName.tableColFixedClasses;
var _useConfig = configProvider_useConfig.useConfig("table"),
globalConfig = _useConfig.globalConfig,
t = _useConfig.t;
var defaultLoadingContent = vue.h(loading_index.Loading, _objectSpread({}, props.loadingProps));
var _useStyle = table_hooks_useStyle["default"](props),
tableClasses = _useStyle.tableClasses,
tableContentStyles = _useStyle.tableContentStyles,
tableElementStyles = _useStyle.tableElementStyles;
var _useFixed = table_hooks_useFixed["default"](props),
rowAndColFixedPosition = _useFixed.rowAndColFixedPosition,
tableContentRef = _useFixed.tableContentRef,
isFixedColumn = _useFixed.isFixedColumn,
isFixedHeader = _useFixed.isFixedHeader,
showColumnShadow = _useFixed.showColumnShadow,
refreshTable = _useFixed.refreshTable,
updateColumnFixedShadow = _useFixed.updateColumnFixedShadow;
var defaultColWidth = props.tableLayout === "fixed" ? "80px" : void 0;
var theadClasses = vue.computed(function () {
return [tableHeaderClasses.header, _defineProperty__default["default"](_defineProperty__default["default"]({}, tableHeaderClasses.fixed, Boolean(props.maxHeight || props.height)), tableBaseClass.bordered, props.bordered)];
});
var tbodyClasses = vue.computed(function () {
return [tableBaseClass.body];
});
var ellipsisClasses = vue.computed(function () {
return ["".concat(classPrefix, "-table__ellipsis"), "".concat(classPrefix, "-text-ellipsis")];
});
var handleRowClick = function handleRowClick(row, rowIndex, e) {
var _props$onRowClick;
(_props$onRowClick = props.onRowClick) === null || _props$onRowClick === void 0 || _props$onRowClick.call(props, {
row: row,
index: rowIndex,
e: e
});
};
var handleCellClick = function handleCellClick(row, col, rowIndex, colIndex, e) {
var _props$onCellClick;
if (col.stopPropagation) {
e.stopPropagation();
}
(_props$onCellClick = props.onCellClick) === null || _props$onCellClick === void 0 || _props$onCellClick.call(props, {
row: row,
col: col,
rowIndex: rowIndex,
colIndex: colIndex,
e: e
});
};
var dynamicBaseTableClasses = vue.computed(function () {
return [_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, tableBaseClass.headerFixed, isFixedHeader.value), tableBaseClass.columnFixed, isFixedColumn.value), tableColFixedClasses.leftShadow, showColumnShadow.left), tableColFixedClasses.rightShadow, showColumnShadow.right), tableClasses.value];
});
var tableElmClasses = vue.computed(function () {
return [[tableLayoutClasses[props.tableLayout || "fixed"]]];
});
var renderCell = function renderCell(params, cellEmptyContent) {
var _context$slots;
var col = params.col,
row = params.row,
rowIndex = params.rowIndex;
if (col.colKey === "serial-number") {
return rowIndex + 1;
}
if (isFunction.isFunction(col.cell)) {
return col.cell(vue.h, params);
}
if (context.slots[col.colKey]) {
return context.slots[col.colKey](params);
}
if (isString.isString(col.cell) && (_context$slots = context.slots) !== null && _context$slots !== void 0 && _context$slots[col.cell]) {
return context.slots[col.cell](params);
}
var r = get.get(row, col.colKey);
if (![void 0, "", null].includes(r)) return r;
if (cellEmptyContent) {
return isFunction.isFunction(cellEmptyContent) ? cellEmptyContent(vue.h, params) : cellEmptyContent;
}
if (context.slots.cellEmptyContent) return context.slots.cellEmptyContent(params);
if (context.slots["cell-empty-content"]) return context.slots["cell-empty-content"](params);
return r;
};
var loadingClasses = vue.computed(function () {
return ["".concat(classPrefix, "-table__loading--full")];
});
var onInnerVirtualScroll = function onInnerVirtualScroll(e) {
var _props$onScroll;
var target = e.target || e.srcElement;
updateColumnFixedShadow(target);
(_props$onScroll = props.onScroll) === null || _props$onScroll === void 0 || _props$onScroll.call(props, {
params: e
});
};
var tdClassName = function tdClassName(td_item, extra) {
var className = "";
if (td_item.ellipsis) {
className = tdEllipsisClass;
}
if (td_item.align && td_item.align !== "left") {
className = "".concat(className, " ").concat(tdAlignClasses["".concat(td_item.align)]);
}
return [className].concat(_toConsumableArray__default["default"](extra));
};
var colStyle = function colStyle(col_item) {
return {
width: "".concat(table_hooks_useStyle.formatCSSUnit(col_item.width || defaultColWidth)),
minWidth: "".concat(!table_hooks_useStyle.formatCSSUnit(col_item.width || defaultColWidth) && !col_item.minWidth && props.tableLayout === "fixed" ? "80px" : table_hooks_useStyle.formatCSSUnit(col_item.minWidth))
};
};
var thClassName = function thClassName(item_th, extra) {
var className = "";
if (item_th.colKey) {
className = "".concat(classPrefix, "-table__th-").concat(item_th.colKey);
}
if (item_th.ellipsisTitle || item_th.ellipsis) {
className = "".concat(className, " ").concat(tdEllipsisClass);
}
if (item_th.align && item_th.align !== "left") {
className = "".concat(className, " ").concat(tdAlignClasses["".concat(item_th.align)]);
}
return [className, extra];
};
var renderTitle = function renderTitle(item_th, index) {
if (isFunction.isFunction(item_th === null || item_th === void 0 ? void 0 : item_th.title)) {
return item_th === null || item_th === void 0 ? void 0 : item_th.title(vue.h, {
col: item_th,
colIndex: index
});
}
return item_th === null || item_th === void 0 ? void 0 : item_th.title;
};
var renderTableBody = function renderTableBody() {
var _props$data, _props$data2;
var renderContentEmpty = renderTNodeJSX("empty") || t(globalConfig.value.empty);
if (!((_props$data = props.data) !== null && _props$data !== void 0 && _props$data.length) && renderContentEmpty) {
var _props$columns;
return vue.createVNode("tr", {
"class": tableBaseClass.emptyRow
}, [vue.createVNode("td", {
"colspan": (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.length
}, [vue.createVNode("div", {
"class": tableBaseClass.empty
}, [renderContentEmpty])])]);
}
if ((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length) {
var _props$data3;
return (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : _props$data3.map(function (tr_item, tr_index) {
var _props$data4, _props$columns2;
var _getRowFixedStyles = table_hooks_useFixed.getRowFixedStyles(get.get(tr_item, props.rowKey || "id"), tr_index, ((_props$data4 = props.data) === null || _props$data4 === void 0 ? void 0 : _props$data4.length) || 0, props.fixedRows, rowAndColFixedPosition.value, tableRowFixedClasses),
style = _getRowFixedStyles.style,
classes = _getRowFixedStyles.classes;
var customClasses = table_utils_index.formatRowClassNames(props.rowClassName, {
row: tr_item,
rowKey: props.rowKey,
rowIndex: tr_index,
type: "body"
}, props.rowKey || "id");
var trAttributes = table_utils_index.formatRowAttributes(props.rowAttributes, {
row: tr_item,
rowIndex: tr_index,
type: "body"
}) || {};
return vue.createVNode("tr", vue.mergeProps(trAttributes, {
"key": tr_index,
"style": style,
"class": [classes, customClasses],
"onClick": function onClick($event) {
handleRowClick(tr_item, tr_index, $event);
}
}), [(_props$columns2 = props.columns) === null || _props$columns2 === void 0 ? void 0 : _props$columns2.map(function (td_item, td_index) {
var tdStyles = table_hooks_useFixed.getColumnFixedStyles(td_item, td_index, rowAndColFixedPosition.value, tableColFixedClasses);
var customClasses2 = table_utils_index.formatClassNames(td_item.className, {
col: td_item,
colIndex: td_index,
row: tr_item,
rowIndex: tr_index,
type: "td"
});
return vue.createVNode("td", {
"key": td_index,
"style": tdStyles.style,
"class": tdClassName(td_item, [tdStyles.classes, customClasses2]),
"onClick": function onClick($event) {
handleCellClick(tr_item, td_item, tr_index, td_index, $event);
}
}, [vue.createVNode("div", {
"class": td_item.ellipsis && ellipsisClasses.value
}, [renderCell({
row: tr_item,
col: td_item,
rowIndex: tr_index,
colIndex: td_index
}, props.cellEmptyContent)])]);
})]);
});
}
};
context.expose({
refreshTable: refreshTable
});
return function () {
var _props$columns3, _props$columns4;
var renderLoading = renderTNodeJSX("loading", {
defaultNode: defaultLoadingContent
});
return vue.createVNode("div", {
"ref": tableRef,
"class": dynamicBaseTableClasses.value,
"style": "position: relative"
}, [vue.createVNode("div", {
"ref": tableContentRef,
"class": tableBaseClass.content,
"style": tableContentStyles.value,
"onScroll": onInnerVirtualScroll
}, [vue.createVNode("table", {
"ref": tableElmRef,
"class": tableElmClasses.value,
"style": tableElementStyles.value
}, [vue.createVNode("colgroup", null, [(_props$columns3 = props.columns) === null || _props$columns3 === void 0 ? void 0 : _props$columns3.map(function (col_item) {
return vue.createVNode("col", {
"key": col_item.colKey,
"style": colStyle(col_item)
}, null);
})]), props.showHeader && vue.createVNode("thead", {
"ref": theadRef,
"class": theadClasses.value
}, [vue.createVNode("tr", null, [(_props$columns4 = props.columns) === null || _props$columns4 === void 0 ? void 0 : _props$columns4.map(function (item_th, index_th) {
var thStyles = table_hooks_useFixed.getColumnFixedStyles(item_th, index_th, rowAndColFixedPosition.value, tableColFixedClasses);
return vue.createVNode("th", {
"key": index_th,
"class": thClassName(item_th, thStyles.classes),
"style": thStyles.style,
"data-colKey": item_th.colKey
}, [vue.createVNode("div", {
"class": (item_th.ellipsisTitle || item_th.ellipsis) && ellipsisClasses.value
}, [renderTitle(item_th, index_th)])]);
})])]), vue.createVNode("tbody", {
"class": tbodyClasses.value
}, [renderTableBody()])]), renderLoading && vue.createVNode("div", {
"class": loadingClasses.value
}, [renderLoading])])]);
};
}
});
exports["default"] = BaseTable;
//# sourceMappingURL=base-table.js.map