| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- require("../../../_virtual/_rolldown/runtime.js");
- const require_types = require("../../../utils/types.js");
- const require_fixed_size_grid = require("../../virtual-list/src/components/fixed-size-grid.js");
- const require_dynamic_size_grid = require("../../virtual-list/src/components/dynamic-size-grid.js");
- const require_utils = require("./utils.js");
- const require_tokens = require("./tokens.js");
- const require_grid = require("./grid.js");
- const require_header = require("./components/header.js");
- let vue = require("vue");
- let _vue_shared = require("@vue/shared");
- //#region ../../packages/components/table-v2/src/table-grid.tsx
- const COMPONENT_NAME = "ElTableV2Grid";
- const useTableGrid = (props) => {
- const headerRef = (0, vue.ref)();
- const bodyRef = (0, vue.ref)();
- const scrollLeft = (0, vue.ref)(0);
- const totalHeight = (0, vue.computed)(() => {
- const { data, rowHeight, estimatedRowHeight } = props;
- if (estimatedRowHeight) return;
- return data.length * rowHeight;
- });
- const fixedRowHeight = (0, vue.computed)(() => {
- const { fixedData, rowHeight } = props;
- return (fixedData?.length || 0) * rowHeight;
- });
- const headerHeight = (0, vue.computed)(() => require_utils.sum(props.headerHeight));
- const gridHeight = (0, vue.computed)(() => {
- const { height } = props;
- return Math.max(0, height - (0, vue.unref)(headerHeight) - (0, vue.unref)(fixedRowHeight));
- });
- const hasHeader = (0, vue.computed)(() => {
- return (0, vue.unref)(headerHeight) + (0, vue.unref)(fixedRowHeight) > 0;
- });
- const itemKey = ({ data, rowIndex }) => data[rowIndex][props.rowKey];
- function onItemRendered({ rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd }) {
- props.onRowsRendered?.({
- rowCacheStart,
- rowCacheEnd,
- rowVisibleStart,
- rowVisibleEnd
- });
- }
- function resetAfterRowIndex(index, forceUpdate) {
- bodyRef.value?.resetAfterRowIndex(index, forceUpdate);
- }
- function scrollTo(leftOrOptions, top) {
- const header$ = (0, vue.unref)(headerRef);
- const body$ = (0, vue.unref)(bodyRef);
- if ((0, _vue_shared.isObject)(leftOrOptions)) {
- header$?.scrollToLeft(leftOrOptions.scrollLeft);
- scrollLeft.value = leftOrOptions.scrollLeft;
- body$?.scrollTo(leftOrOptions);
- } else {
- header$?.scrollToLeft(leftOrOptions);
- scrollLeft.value = leftOrOptions;
- body$?.scrollTo({
- scrollLeft: leftOrOptions,
- scrollTop: top
- });
- }
- }
- function scrollToTop(scrollTop) {
- (0, vue.unref)(bodyRef)?.scrollTo({ scrollTop });
- }
- function scrollToRow(row, strategy) {
- const body = (0, vue.unref)(bodyRef);
- if (!body) return;
- const prevScrollLeft = scrollLeft.value;
- body.scrollToItem(row, 0, strategy);
- if (prevScrollLeft) scrollTo({ scrollLeft: prevScrollLeft });
- }
- function forceUpdate() {
- (0, vue.unref)(bodyRef)?.$forceUpdate();
- (0, vue.unref)(headerRef)?.$forceUpdate();
- }
- (0, vue.watch)(() => props.bodyWidth, () => {
- if (require_types.isNumber(props.estimatedRowHeight)) bodyRef.value?.resetAfter({ columnIndex: 0 }, false);
- });
- return {
- bodyRef,
- forceUpdate,
- fixedRowHeight,
- gridHeight,
- hasHeader,
- headerHeight,
- headerRef,
- totalHeight,
- itemKey,
- onItemRendered,
- resetAfterRowIndex,
- scrollTo,
- scrollToTop,
- scrollToRow,
- scrollLeft
- };
- };
- const TableGrid = /* @__PURE__ */ (0, vue.defineComponent)({
- name: COMPONENT_NAME,
- props: require_grid.tableV2GridProps,
- setup(props, { slots, expose }) {
- const { ns } = (0, vue.inject)(require_tokens.TableV2InjectionKey);
- const { bodyRef, fixedRowHeight, gridHeight, hasHeader, headerRef, headerHeight, totalHeight, forceUpdate, itemKey, onItemRendered, resetAfterRowIndex, scrollTo, scrollToTop, scrollToRow, scrollLeft } = useTableGrid(props);
- (0, vue.provide)(require_tokens.TABLE_V2_GRID_INJECTION_KEY, scrollLeft);
- (0, vue.onActivated)(async () => {
- await (0, vue.nextTick)();
- const scrollTop = bodyRef.value?.states.scrollTop;
- scrollTop && scrollToTop(Math.round(scrollTop) + 1);
- });
- expose({
- forceUpdate,
- /**
- * @description fetch total height
- */
- totalHeight,
- /**
- * @description scroll to a position
- */
- scrollTo,
- /**
- * @description scroll vertically to position y
- */
- scrollToTop,
- /**
- * @description scroll to a given row
- * @params row {Number} which row to scroll to
- * @params strategy {ScrollStrategy} use what strategy to scroll to
- */
- scrollToRow,
- /**
- * @description reset rendered state after row index
- */
- resetAfterRowIndex
- });
- const getColumnWidth = () => props.bodyWidth;
- return () => {
- const { cache, columns, data, fixedData, useIsScrolling, scrollbarAlwaysOn, scrollbarEndGap, scrollbarStartGap, style, rowHeight, bodyWidth, estimatedRowHeight, headerWidth, height, width, getRowHeight, onScroll } = props;
- const isDynamicRowEnabled = require_types.isNumber(estimatedRowHeight);
- const Grid = isDynamicRowEnabled ? require_dynamic_size_grid.default : require_fixed_size_grid.default;
- const _headerHeight = (0, vue.unref)(headerHeight);
- return (0, vue.createVNode)("div", {
- "role": "table",
- "class": [ns.e("table"), props.class],
- "style": style
- }, [(0, vue.createVNode)(Grid, {
- "ref": bodyRef,
- "data": data,
- "useIsScrolling": useIsScrolling,
- "itemKey": itemKey,
- "columnCache": 0,
- "columnWidth": isDynamicRowEnabled ? getColumnWidth : bodyWidth,
- "totalColumn": 1,
- "totalRow": data.length,
- "rowCache": cache,
- "rowHeight": isDynamicRowEnabled ? getRowHeight : rowHeight,
- "width": width,
- "height": (0, vue.unref)(gridHeight),
- "class": ns.e("body"),
- "role": "rowgroup",
- "scrollbarStartGap": scrollbarStartGap,
- "scrollbarEndGap": scrollbarEndGap,
- "scrollbarAlwaysOn": scrollbarAlwaysOn,
- "onScroll": onScroll,
- "onItemRendered": onItemRendered,
- "perfMode": false
- }, { default: (params) => {
- const rowData = data[params.rowIndex];
- return slots.row?.({
- ...params,
- columns,
- rowData
- });
- } }), (0, vue.unref)(hasHeader) && (0, vue.createVNode)(require_header.default, {
- "ref": headerRef,
- "class": ns.e("header-wrapper"),
- "columns": columns,
- "headerData": data,
- "headerHeight": props.headerHeight,
- "fixedHeaderData": fixedData,
- "rowWidth": headerWidth,
- "rowHeight": rowHeight,
- "width": width,
- "height": Math.min(_headerHeight + (0, vue.unref)(fixedRowHeight), height)
- }, {
- dynamic: slots.header,
- fixed: slots.row
- })]);
- };
- }
- });
- //#endregion
- exports.default = TableGrid;
- //# sourceMappingURL=table-grid.js.map
|