This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,39 @@
import type { PropType } from 'vue';
import type { Store } from '../store';
import type { ColumnCls, ColumnStyle, DefaultRow, Table } from '../table/defaults';
import type { TableOverflowTooltipOptions } from '../util';
interface TableBodyProps<T extends DefaultRow> {
store: Store<T>;
stripe?: boolean;
context: Table<T>;
rowClassName: ColumnCls<T>;
rowStyle: ColumnStyle<T>;
fixed: string;
highlight: boolean;
tooltipEffect?: string;
tooltipOptions?: TableOverflowTooltipOptions;
}
declare const defaultProps: {
store: {
required: boolean;
type: PropType<TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: PropType<TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: PropType<TableBodyProps<any>["context"]>;
};
rowClassName: PropType<TableBodyProps<any>["rowClassName"]>;
rowStyle: PropType<TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
};
export { TableBodyProps };
export default defaultProps;

View File

@@ -0,0 +1,25 @@
const defaultProps = {
store: {
required: true,
type: Object
},
stripe: Boolean,
tooltipEffect: String,
tooltipOptions: {
type: Object
},
context: {
default: () => ({}),
type: Object
},
rowClassName: [String, Function],
rowStyle: [Object, Function],
fixed: {
type: String,
default: ""
},
highlight: Boolean
};
export { defaultProps as default };
//# sourceMappingURL=defaults.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"defaults.mjs","sources":["../../../../../../../packages/components/table/src/table-body/defaults.ts"],"sourcesContent":["import type { PropType } from 'vue'\nimport type { Store } from '../store'\nimport type {\n ColumnCls,\n ColumnStyle,\n DefaultRow,\n Table,\n} from '../table/defaults'\nimport type { TableOverflowTooltipOptions } from '../util'\n\ninterface TableBodyProps<T extends DefaultRow> {\n store: Store<T>\n stripe?: boolean\n context: Table<T>\n rowClassName: ColumnCls<T>\n rowStyle: ColumnStyle<T>\n fixed: string\n highlight: boolean\n tooltipEffect?: string\n tooltipOptions?: TableOverflowTooltipOptions\n}\n\nconst defaultProps = {\n store: {\n required: true,\n type: Object as PropType<TableBodyProps<any>['store']>,\n },\n stripe: Boolean,\n tooltipEffect: String,\n tooltipOptions: {\n type: Object as PropType<TableBodyProps<any>['tooltipOptions']>,\n },\n context: {\n default: () => ({}),\n type: Object as PropType<TableBodyProps<any>['context']>,\n },\n rowClassName: [String, Function] as PropType<\n TableBodyProps<any>['rowClassName']\n >,\n rowStyle: [Object, Function] as PropType<TableBodyProps<any>['rowStyle']>,\n fixed: {\n type: String,\n default: '',\n },\n highlight: Boolean,\n}\n\nexport { TableBodyProps }\nexport default defaultProps\n"],"names":[],"mappings":"AAAK,MAAC,YAAY,GAAG;AACrB,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,IAAI;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,aAAa,EAAE,MAAM;AACvB,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;AAClC,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC9B,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB;;;;"}

View File

@@ -0,0 +1,17 @@
import type { TableBodyProps } from './defaults';
import type { TableOverflowTooltipOptions } from '../util';
import type { DefaultRow } from '../table/defaults';
declare function useEvents<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
handleDoubleClick: (event: Event, row: T) => void;
handleClick: (event: Event, row: T) => void;
handleContextMenu: (event: Event, row: T) => void;
handleMouseEnter: import("lodash").DebouncedFunc<(index: number) => void>;
handleMouseLeave: import("lodash").DebouncedFunc<() => void>;
handleCellMouseEnter: (event: MouseEvent, row: T, tooltipOptions: TableOverflowTooltipOptions) => void;
handleCellMouseLeave: (event: MouseEvent) => void;
tooltipContent: import("vue").Ref<string>;
tooltipTrigger: import("vue").Ref<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
};
export default useEvents;

View File

@@ -0,0 +1,146 @@
import { inject, ref, h } from 'vue';
import { debounce } from 'lodash-unified';
import { getCell, getColumnByCell, removePopper, createTablePopper } from '../util.mjs';
import { TABLE_INJECTION_KEY } from '../tokens.mjs';
import { hasClass, addClass, removeClass } from '../../../../utils/dom/style.mjs';
function isGreaterThan(a, b, epsilon = 0.03) {
return a - b > epsilon;
}
function useEvents(props) {
const parent = inject(TABLE_INJECTION_KEY);
const tooltipContent = ref("");
const tooltipTrigger = ref(h("div"));
const handleEvent = (event, row, name) => {
var _a, _b, _c;
const table = parent;
const cell = getCell(event);
let column = null;
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
if (cell) {
column = getColumnByCell({
columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
}, cell, namespace);
if (column) {
table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event);
}
}
table == null ? void 0 : table.emit(`row-${name}`, row, column, event);
};
const handleDoubleClick = (event, row) => {
handleEvent(event, row, "dblclick");
};
const handleClick = (event, row) => {
var _a;
(_a = props.store) == null ? void 0 : _a.commit("setCurrentRow", row);
handleEvent(event, row, "click");
};
const handleContextMenu = (event, row) => {
handleEvent(event, row, "contextmenu");
};
const handleMouseEnter = debounce((index) => {
var _a;
(_a = props.store) == null ? void 0 : _a.commit("setHoverRow", index);
}, 30);
const handleMouseLeave = debounce(() => {
var _a;
(_a = props.store) == null ? void 0 : _a.commit("setHoverRow", null);
}, 30);
const getPadding = (el) => {
const style = window.getComputedStyle(el, null);
const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
return {
left: paddingLeft,
right: paddingRight,
top: paddingTop,
bottom: paddingBottom
};
};
const toggleRowClassByCell = (rowSpan, event, toggle) => {
var _a;
let node = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.parentNode;
while (rowSpan > 1) {
node = node == null ? void 0 : node.nextSibling;
if (!node || node.nodeName !== "TR")
break;
toggle(node, "hover-row hover-fixed-row");
rowSpan--;
}
};
const handleCellMouseEnter = (event, row, tooltipOptions) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (!parent)
return;
const table = parent;
const cell = getCell(event);
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
let column = null;
if (cell) {
column = getColumnByCell({
columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
}, cell, namespace);
if (!column) {
return;
}
if (cell.rowSpan > 1) {
toggleRowClassByCell(cell.rowSpan, event, addClass);
}
const hoverState = table.hoverState = {
cell,
column,
row
};
table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
}
if (!tooltipOptions) {
if (((_d = removePopper) == null ? void 0 : _d.trigger) === cell) {
(_e = removePopper) == null ? void 0 : _e();
}
return;
}
const cellChild = event.target.querySelector(".cell");
if (!(hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length)) {
return;
}
const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
const { top, left, right, bottom } = getPadding(cellChild);
const horizontalPadding = left + right;
const verticalPadding = top + bottom;
if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
createTablePopper(tooltipOptions, (_f = (cell == null ? void 0 : cell.innerText) || (cell == null ? void 0 : cell.textContent)) != null ? _f : "", row, column, cell, table);
} else if (((_g = removePopper) == null ? void 0 : _g.trigger) === cell) {
(_h = removePopper) == null ? void 0 : _h();
}
};
const handleCellMouseLeave = (event) => {
const cell = getCell(event);
if (!cell)
return;
if (cell.rowSpan > 1) {
toggleRowClassByCell(cell.rowSpan, event, removeClass);
}
const oldHoverState = parent == null ? void 0 : parent.hoverState;
parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event);
};
return {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger
};
}
export { useEvents as default };
//# sourceMappingURL=events-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,82 @@
import type { VNode } from 'vue';
declare const _default: import("vue").DefineComponent<{
store: {
required: boolean;
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["context"]>;
};
rowClassName: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowClassName"]>;
rowStyle: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
onColumnsChange: (layout: import("../table-layout").default<import("../table/defaults").DefaultRow>) => void;
onScrollableChange: (layout: import("../table-layout").default<import("../table/defaults").DefaultRow>) => void;
wrappedRowRender: (row: any, $index: number) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[] | VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[][];
tooltipContent: import("vue").Ref<string>;
tooltipTrigger: import("vue").Ref<VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
store: {
required: boolean;
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["context"]>;
};
rowClassName: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowClassName"]>;
rowStyle: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
}>>, {
fixed: string;
highlight: boolean;
stripe: boolean;
context: import("element-plus").Table<any>;
}>;
export default _default;

View File

@@ -0,0 +1,97 @@
import { defineComponent, getCurrentInstance, inject, watch, onUnmounted, h } from 'vue';
import useLayoutObserver from '../layout-observer.mjs';
import { removePopper } from '../util.mjs';
import { TABLE_INJECTION_KEY } from '../tokens.mjs';
import useRender from './render-helper.mjs';
import defaultProps from './defaults.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { addClass, removeClass } from '../../../../utils/dom/style.mjs';
import { isClient } from '@vueuse/core';
import { rAF } from '../../../../utils/raf.mjs';
var TableBody = defineComponent({
name: "ElTableBody",
props: defaultProps,
setup(props) {
var _a;
const instance = getCurrentInstance();
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender(props);
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
const hoveredCellList = [];
watch((_a = props.store) == null ? void 0 : _a.states.hoverRow, (newVal, oldVal) => {
var _a2, _b;
const el = instance == null ? void 0 : instance.vnode.el;
const rows = Array.from((el == null ? void 0 : el.children) || []).filter((e) => e == null ? void 0 : e.classList.contains(`${ns.e("row")}`));
let rowNum = newVal;
const childNodes = (_a2 = rows[rowNum]) == null ? void 0 : _a2.childNodes;
if (childNodes == null ? void 0 : childNodes.length) {
let control = 0;
const indexes = Array.from(childNodes).reduce((acc, item, index) => {
var _a3, _b2;
if (((_a3 = childNodes[index]) == null ? void 0 : _a3.colSpan) > 1) {
control = (_b2 = childNodes[index]) == null ? void 0 : _b2.colSpan;
}
if (item.nodeName !== "TD" && control === 0) {
acc.push(index);
}
control > 0 && control--;
return acc;
}, []);
indexes.forEach((rowIndex) => {
var _a3;
rowNum = newVal;
while (rowNum > 0) {
const preChildNodes = (_a3 = rows[rowNum - 1]) == null ? void 0 : _a3.childNodes;
if (preChildNodes[rowIndex] && preChildNodes[rowIndex].nodeName === "TD" && preChildNodes[rowIndex].rowSpan > 1) {
addClass(preChildNodes[rowIndex], "hover-cell");
hoveredCellList.push(preChildNodes[rowIndex]);
break;
}
rowNum--;
}
});
} else {
hoveredCellList.forEach((item) => removeClass(item, "hover-cell"));
hoveredCellList.length = 0;
}
if (!((_b = props.store) == null ? void 0 : _b.states.isComplex.value) || !isClient)
return;
rAF(() => {
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow && !oldRow.classList.contains("hover-fixed-row")) {
removeClass(oldRow, "hover-row");
}
if (newRow) {
addClass(newRow, "hover-row");
}
});
});
onUnmounted(() => {
var _a2;
(_a2 = removePopper) == null ? void 0 : _a2();
});
return {
ns,
onColumnsChange,
onScrollableChange,
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
},
render() {
const { wrappedRowRender, store } = this;
const data = (store == null ? void 0 : store.states.data.value) || [];
return h("tbody", { tabIndex: -1 }, [
data.reduce((acc, row) => {
return acc.concat(wrappedRowRender(row, acc.length));
}, [])
]);
}
});
export { TableBody as default };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,16 @@
import type { TableBodyProps } from './defaults';
import type { DefaultRow } from '../table/defaults';
declare function useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
wrappedRowRender: (row: T, $index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[] | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[][];
tooltipContent: import("vue").Ref<string>;
tooltipTrigger: import("vue").Ref<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
};
export default useRender;

View File

@@ -0,0 +1,226 @@
import { inject, computed, h } from 'vue';
import { merge } from 'lodash-unified';
import { getRowIdentity } from '../util.mjs';
import { TABLE_INJECTION_KEY } from '../tokens.mjs';
import useEvents from './events-helper.mjs';
import useStyles from './styles-helper.mjs';
import TdWrapper from './td-wrapper.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { isBoolean, isPropAbsent } from '../../../../utils/types.mjs';
function useRender(props) {
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger
} = useEvents(props);
const {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth
} = useStyles(props);
let displayIndex = -1;
const firstDefaultColumnIndex = computed(() => {
var _a;
return (_a = props.store) == null ? void 0 : _a.states.columns.value.findIndex(({ type }) => type === "default");
});
const getKeyOfRow = (row, index) => {
var _a;
const rowKey = (_a = parent == null ? void 0 : parent.props) == null ? void 0 : _a.rowKey;
if (rowKey) {
return getRowIdentity(row, rowKey);
}
return index;
};
const rowRender = (row, $index, treeRowData, expanded = false) => {
const { tooltipEffect, tooltipOptions, store } = props;
const { indent, columns } = store.states;
const rowClasses = [];
let display = true;
if (treeRowData) {
rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
display = !!treeRowData.display;
}
if ($index === 0) {
displayIndex = -1;
}
if (props.stripe && display) {
displayIndex++;
}
rowClasses.push(...getRowClass(row, $index, displayIndex));
const displayStyle = display ? null : { display: "none" };
return h("tr", {
style: [displayStyle, getRowStyle(row, $index)],
class: rowClasses,
key: getKeyOfRow(row, $index),
onDblclick: ($event) => handleDoubleClick($event, row),
onClick: ($event) => handleClick($event, row),
onContextmenu: ($event) => handleContextMenu($event, row),
onMouseenter: () => handleMouseEnter($index),
onMouseleave: handleMouseLeave
}, columns.value.map((column, cellIndex) => {
const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
if (!rowspan || !colspan) {
return null;
}
const columnData = Object.assign({}, column);
columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
const data = {
store,
_self: props.context || parent,
column: columnData,
row,
$index,
cellIndex,
expanded
};
if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
data.treeNode = {
indent: treeRowData.level && treeRowData.level * indent.value,
level: treeRowData.level
};
if (isBoolean(treeRowData.expanded)) {
data.treeNode.expanded = treeRowData.expanded;
if ("loading" in treeRowData) {
data.treeNode.loading = treeRowData.loading;
}
if ("noLazyChildren" in treeRowData) {
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
}
}
}
const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`;
const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
const mergedTooltipOptions = column.showOverflowTooltip && merge({
effect: tooltipEffect
}, tooltipOptions, column.showOverflowTooltip);
return h(TdWrapper, {
style: getCellStyle($index, cellIndex, row, column),
class: getCellClass($index, cellIndex, row, column, colspan - 1),
key: `${patchKey}${baseKey}`,
rowspan,
colspan,
onMouseenter: ($event) => handleCellMouseEnter($event, row, mergedTooltipOptions),
onMouseleave: handleCellMouseLeave
}, {
default: () => cellChildren(cellIndex, column, data)
});
}));
};
const cellChildren = (_cellIndex, column, data) => {
return column.renderCell(data);
};
const wrappedRowRender = (row, $index) => {
const store = props.store;
const { isRowExpanded, assertRowKey } = store;
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
const columns = store.states.columns.value;
const hasExpandColumn = columns.some(({ type }) => type === "expand");
if (hasExpandColumn) {
const expanded = isRowExpanded(row);
const tr = rowRender(row, $index, void 0, expanded);
const renderExpanded = parent == null ? void 0 : parent.renderExpanded;
if (!renderExpanded) {
console.error("[Element Error]renderExpanded is required.");
return tr;
}
const rows = [[tr]];
if (parent.props.preserveExpandedContent || expanded) {
rows[0].push(h("tr", {
key: `expanded-row__${tr.key}`,
style: { display: expanded ? "" : "none" }
}, [
h("td", {
colspan: columns.length,
class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
}, [renderExpanded({ row, $index, store, expanded })])
]));
}
return rows;
} else if (Object.keys(treeData.value).length) {
assertRowKey();
const key = getRowIdentity(row, rowKey.value);
let cur = treeData.value[key];
let treeRowData = null;
if (cur) {
treeRowData = {
expanded: cur.expanded,
level: cur.level,
display: true,
noLazyChildren: void 0,
loading: void 0
};
if (isBoolean(cur.lazy)) {
if (treeRowData && isBoolean(cur.loaded) && cur.loaded) {
treeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
treeRowData.loading = cur.loading;
}
}
const tmp = [rowRender(row, $index, treeRowData != null ? treeRowData : void 0)];
if (cur) {
let i = 0;
const traverse = (children, parent2) => {
if (!(children && children.length && parent2))
return;
children.forEach((node) => {
const innerTreeRowData = {
display: parent2.display && parent2.expanded,
level: parent2.level + 1,
expanded: false,
noLazyChildren: false,
loading: false
};
const childKey = getRowIdentity(node, rowKey.value);
if (isPropAbsent(childKey)) {
throw new Error("For nested data item, row-key is required.");
}
cur = { ...treeData.value[childKey] };
if (cur) {
innerTreeRowData.expanded = cur.expanded;
cur.level = cur.level || innerTreeRowData.level;
cur.display = !!(cur.expanded && innerTreeRowData.display);
if (isBoolean(cur.lazy)) {
if (isBoolean(cur.loaded) && cur.loaded) {
innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
innerTreeRowData.loading = cur.loading;
}
}
i++;
tmp.push(rowRender(node, $index + i, innerTreeRowData));
if (cur) {
const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
traverse(nodes2, cur);
}
});
};
cur.display = true;
const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
traverse(nodes, cur);
}
return tmp;
} else {
return rowRender(row, $index, void 0);
}
};
return {
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
}
export { useRender as default };
//# sourceMappingURL=render-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
import type { TableColumnCtx } from '../table-column/defaults';
import type { TableBodyProps } from './defaults';
import type { DefaultRow } from '../table/defaults';
declare function useStyles<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
getRowStyle: (row: T, rowIndex: number) => any;
getRowClass: (row: T, rowIndex: number, displayIndex: number) => string[];
getCellStyle: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => import("vue").CSSProperties;
getCellClass: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>, offset: number) => string;
getSpan: (row: T, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number) => {
rowspan: number;
colspan: number;
};
getColspanRealWidth: (columns: TableColumnCtx<T>[], colspan: number, index: number) => number;
};
export default useStyles;

View File

@@ -0,0 +1,112 @@
import { inject } from 'vue';
import { getFixedColumnOffset, ensurePosition, getFixedColumnsClass } from '../util.mjs';
import { TABLE_INJECTION_KEY } from '../tokens.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { isFunction, isString, isArray, isObject } from '@vue/shared';
function useStyles(props) {
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const getRowStyle = (row, rowIndex) => {
const rowStyle = parent == null ? void 0 : parent.props.rowStyle;
if (isFunction(rowStyle)) {
return rowStyle.call(null, {
row,
rowIndex
});
}
return rowStyle || null;
};
const getRowClass = (row, rowIndex, displayIndex) => {
var _a;
const classes = [ns.e("row")];
if ((parent == null ? void 0 : parent.props.highlightCurrentRow) && row === ((_a = props.store) == null ? void 0 : _a.states.currentRow.value)) {
classes.push("current-row");
}
if (props.stripe && displayIndex % 2 === 1) {
classes.push(ns.em("row", "striped"));
}
const rowClassName = parent == null ? void 0 : parent.props.rowClassName;
if (isString(rowClassName)) {
classes.push(rowClassName);
} else if (isFunction(rowClassName)) {
classes.push(rowClassName.call(null, {
row,
rowIndex
}));
}
return classes;
};
const getCellStyle = (rowIndex, columnIndex, row, column) => {
const cellStyle = parent == null ? void 0 : parent.props.cellStyle;
let cellStyles = cellStyle != null ? cellStyle : {};
if (isFunction(cellStyle)) {
cellStyles = cellStyle.call(null, {
rowIndex,
columnIndex,
row,
column
});
}
const fixedStyle = getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
ensurePosition(fixedStyle, "left");
ensurePosition(fixedStyle, "right");
return Object.assign({}, cellStyles, fixedStyle);
};
const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
const classes = [column.id, column.align, column.className, ...fixedClasses];
const cellClassName = parent == null ? void 0 : parent.props.cellClassName;
if (isString(cellClassName)) {
classes.push(cellClassName);
} else if (isFunction(cellClassName)) {
classes.push(cellClassName.call(null, {
rowIndex,
columnIndex,
row,
column
}));
}
classes.push(ns.e("cell"));
return classes.filter((className) => Boolean(className)).join(" ");
};
const getSpan = (row, column, rowIndex, columnIndex) => {
let rowspan = 1;
let colspan = 1;
const fn = parent == null ? void 0 : parent.props.spanMethod;
if (isFunction(fn)) {
const result = fn({
row,
column,
rowIndex,
columnIndex
});
if (isArray(result)) {
rowspan = result[0];
colspan = result[1];
} else if (isObject(result)) {
rowspan = result.rowspan;
colspan = result.colspan;
}
}
return { rowspan, colspan };
};
const getColspanRealWidth = (columns, colspan, index) => {
if (colspan < 1) {
return columns[index].realWidth;
}
const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan);
return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1));
};
return {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth
};
}
export { useStyles as default };
//# sourceMappingURL=styles-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,33 @@
import { defineComponent, openBlock, createElementBlock, renderSlot } from 'vue';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
const __default__ = defineComponent({
name: "TableTdWrapper"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
colspan: {
type: Number,
default: 1
},
rowspan: {
type: Number,
default: 1
}
},
setup(__props) {
return (_ctx, _cache) => {
return openBlock(), createElementBlock("td", {
colspan: __props.colspan,
rowspan: __props.rowspan
}, [
renderSlot(_ctx.$slots, "default")
], 8, ["colspan", "rowspan"]);
};
}
});
var TdWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "td-wrapper.vue"]]);
export { TdWrapper as default };
//# sourceMappingURL=td-wrapper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"td-wrapper.mjs","sources":["../../../../../../../packages/components/table/src/table-body/td-wrapper.vue"],"sourcesContent":["<template>\n <td :colspan=\"colspan\" :rowspan=\"rowspan\"><slot /></td>\n</template>\n\n<script setup lang=\"ts\">\ndefineOptions({\n name: 'TableTdWrapper',\n})\n\ndefineProps({\n colspan: {\n type: Number,\n default: 1,\n },\n rowspan: {\n type: Number,\n default: 1,\n },\n})\n</script>\n"],"names":[],"mappings":";;;mCAKc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,32 @@
declare function __VLS_template(): {
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
colspan: {
type: NumberConstructor;
default: number;
};
rowspan: {
type: NumberConstructor;
default: number;
};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
colspan: {
type: NumberConstructor;
default: number;
};
rowspan: {
type: NumberConstructor;
default: number;
};
}>>, {
rowspan: number;
colspan: number;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};