element-plus
Version:
A Component Library for Vue 3
105 lines (103 loc) • 3.32 kB
JavaScript
import { isArray, isFunction, isObject, isString } from "../../../../utils/types.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { ensurePosition, getFixedColumnOffset, getFixedColumnsClass } from "../util.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import { inject } from "vue";
//#region ../../packages/components/table/src/table-body/styles-helper.ts
function useStyles(props) {
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const getRowStyle = (row, rowIndex) => {
const rowStyle = parent?.props.rowStyle;
if (isFunction(rowStyle)) return rowStyle.call(null, {
row,
rowIndex
});
return rowStyle || null;
};
const getRowClass = (row, rowIndex, displayIndex) => {
const classes = [ns.e("row")];
if (parent?.props.highlightCurrentRow && row === props.store?.states.currentRow.value) classes.push("current-row");
if (props.stripe && displayIndex % 2 === 1) classes.push(ns.em("row", "striped"));
const rowClassName = 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?.props.cellStyle;
let cellStyles = cellStyle ?? {};
if (isFunction(cellStyle)) cellStyles = cellStyle.call(null, {
rowIndex,
columnIndex,
row,
column
});
const fixedStyle = getFixedColumnOffset(columnIndex, 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?.fixed, props.store, void 0, offset);
const classes = [
column.id,
column.align,
column.className,
...fixedClasses
];
const cellClassName = 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?.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
};
}
//#endregion
export { useStyles as default };
//# sourceMappingURL=styles-helper.mjs.map