yanzhen-design-vue
Version:
196 lines (195 loc) • 6.54 kB
JavaScript
import { ref, unref, computed, readonly, onUnmounted } from "vue";
import { createResizeObserver } from "@yanzhen-libs/utils-vue";
import { isEmptyValue } from "@yanzhen-libs/utils";
import { isPlainObject, isString, isElement, isFunction, max } from "lodash-es";
import { unrefTbodyRowElements, unrefTbodyRowRecord, isHiddenDom } from "../utils/index.mjs";
import { VIRTUAL_CLASS, CELL_CLASS } from "../constants.mjs";
function useVxeTableColumnSlotRecord(tableRef) {
const contentRectRecords = ref({});
const rowRectRecords = ref({});
let resizeCache;
function handleExtractArgs(...args) {
const extract = {
name: void 0,
record: void 0
};
function isRecordParam(record) {
if (!isPlainObject(record)) return false;
const keys = Object.keys(record);
switch (true) {
case keys.includes("column"):
case keys.includes("row"):
return true;
}
return false;
}
for (const data of args) {
switch (true) {
case (isEmptyValue(extract["name"]) && isString(data)):
extract["name"] = data;
break;
case (isEmptyValue(extract["record"]) && isRecordParam(data)):
extract["record"] = data;
break;
}
}
return extract;
}
function isFixedRecord(...args) {
var _a;
const { record } = handleExtractArgs(...args);
const fixed = (_a = record == null ? void 0 : record.column) == null ? void 0 : _a.fixed;
return !isEmptyValue(fixed);
}
function isHiddenRecord(...args) {
const { record, name } = handleExtractArgs(...args);
switch (true) {
case (record == null ? void 0 : record.isHidden) === true:
return true;
case isFixedRecord(record):
case name === "edit":
return false;
}
return void 0;
}
function getRecordId(...args) {
var _a, _b;
const { record } = handleExtractArgs(...args);
if (!record) return;
const getRowid = (_a = unref(tableRef)) == null ? void 0 : _a.getRowid;
const getColid = (_b = unref(tableRef)) == null ? void 0 : _b.getColid;
let { $rowIndex = 0, row, column, type, rowid, colid } = record;
if (isEmptyValue(rowid)) rowid = getRowid == null ? void 0 : getRowid(row);
if (isEmptyValue(colid)) colid = getColid == null ? void 0 : getColid(column);
const recordIds = !isEmptyValue(rowid) ? [type, rowid, colid] : [type, $rowIndex, colid];
return recordIds.join(":");
}
function getElementRect(el, callback) {
function toJSON() {
var _a;
const contentRect = ((_a = el == null ? void 0 : el.getBoundingClientRect) == null ? void 0 : _a.call(el).toJSON()) ?? {};
return {
...contentRect,
realHeight: (el == null ? void 0 : el.offsetHeight) ?? 0,
realWidth: (el == null ? void 0 : el.offsetWidth) ?? 0,
target: el
};
}
if (isElement(el)) {
if (isFunction(callback)) {
if (!resizeCache) resizeCache = createResizeObserver();
resizeCache.add(el, callback);
}
const target = toJSON();
const contentRect = new Proxy(toJSON(), {
get(_target, p, receiver) {
if (p === "target") return el;
if (p === "toJSON") return toJSON;
const json = toJSON();
const value = Reflect.get(_target, p, receiver);
const newValue = Reflect.get(json, p, receiver);
if (newValue !== value) {
target[p] = newValue;
}
return newValue;
}
});
return {
target: el,
contentRect,
realHeight: contentRect.realHeight,
realWidth: contentRect.realWidth,
toJSON() {
return toJSON();
}
};
}
return null;
}
function getNodeRect(...args) {
const { name = "default", record } = handleExtractArgs(...args);
if (!record) return;
const recordId = getRecordId(name, record);
return unref(contentRectRecords)[recordId];
}
function updateNodeRect(...args) {
var _a;
const { name = "default", record } = handleExtractArgs(...args);
if (!record) return;
const recordId = getRecordId(name, record);
const target = record == null ? void 0 : record.target;
const newContentRect = (_a = getElementRect(target)) == null ? void 0 : _a.contentRect;
const contentRect = unref(contentRectRecords)[recordId];
if (newContentRect !== contentRect) {
unref(contentRectRecords)[recordId] = newContentRect;
}
}
function updateRowsNodeRect(tbody) {
const rows = unrefTbodyRowElements(tbody);
if (rows && rows.length > 0) {
unrefTbodyRowRecord(rows, tableRef, (record) => {
updateRowNodeRect(record);
});
}
}
function updateRowNodeRect(...args) {
const { record } = handleExtractArgs(...args);
if (!record || !record.rowid) return;
const el = record == null ? void 0 : record.target;
const cells = el == null ? void 0 : el.querySelectorAll(`td:not(.${VIRTUAL_CLASS})`);
const cellHeights = [...cells ?? []].reduce((prev, el2) => {
var _a, _b;
if (!isHiddenDom(el2)) {
const cell = el2.querySelector(`div.${CELL_CLASS}`);
if (isElement(cell)) {
const realHeight = (_b = (_a = getElementRect(cell)) == null ? void 0 : _a.contentRect) == null ? void 0 : _b.realHeight;
prev.push(realHeight);
}
}
return prev;
}, []);
const newValue = max(cellHeights);
const value = unref(rowRectRecords)[record.rowid];
if (newValue !== value) {
unref(rowRectRecords)[record.rowid] = newValue;
}
}
function getRowNodeRectHeight(...args) {
const { record } = handleExtractArgs(...args);
if (!record || !record.rowid) return;
return unref(rowRectRecords)[record.rowid];
}
function tableCellStyle(record) {
const height = getRowNodeRectHeight(record);
return {
"--vxe-cell-min-height": `${height ?? 0}px`
};
}
const nodeRecords = computed(() => readonly(unref(contentRectRecords)));
const cellNodeRect = {
updateNodeRect,
updateRowNodeRect,
updateRowsNodeRect,
getNodeRect,
nodeRecords,
getRowNodeRectHeight,
tableCellStyle
};
function handleUnmounted() {
resizeCache == null ? void 0 : resizeCache.stop();
}
onUnmounted(() => {
handleUnmounted();
});
return {
getRecordId,
getElementRect,
isFixedRecord,
isHiddenRecord,
cellNodeRect,
stop: handleUnmounted
};
}
export {
useVxeTableColumnSlotRecord
};