UNPKG

tdesign-mobile-vue

Version:
351 lines (343 loc) 16.7 kB
/** * 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