yanzhen-design-vue
Version:
235 lines (234 loc) • 8.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const core = require("@vueuse/core");
const lodashEs = require("lodash-es");
const utils = require("@yanzhen-libs/utils");
const utilsVue = require("@yanzhen-libs/utils-vue");
const index = require("../utils/index.cjs");
function useVxeTableObserver(tableRef, options) {
var _a;
const resize = utilsVue.createResizeObserver();
const tableScrollDataRef = vue.ref();
const tableWrapper = vue.ref(getElementContentRect());
const wrapperRef = vue.computed(() => vue.unref(tableWrapper));
const tableWrapperRef = vue.computed(() => {
return index.unrefTbodyElement(core.unrefElement(tableRef));
});
const tableResize = core.useResizeObserver(tableRef, lodashEs.debounce(onTableResizeObserver, 300));
function onTableResizeObserver(entries, observer2) {
try {
tableWrapper.value = getElementContentRect(entries[0].target);
} catch (e) {
console.error(e, "onTableResizeObserver");
}
const onTableResizeObserver2 = options == null ? void 0 : options.onTableResizeObserver;
if (lodashEs.isFunction(onTableResizeObserver2)) {
vue.nextTick(() => {
onTableResizeObserver2(vue.unref(wrapperRef));
}).catch((e) => {
console.error(e, "onTableResizeObserver");
});
}
}
const NodeWeakMap = /* @__PURE__ */ new WeakMap();
const mutation = core.useMutationObserver(tableWrapperRef, onMutationObserver, {
childList: true,
attributes: true
// subtree: true,
});
function onMutationObserver(mutations, observer2) {
console.log(mutations, "mutation:mutations");
if (lodashEs.isArray(mutations)) {
for (const mutation2 of mutations) {
const { addedNodes, removedNodes } = mutation2;
if (addedNodes.length > 0) {
for (const el of addedNodes) {
if (index.isTableRow(el)) {
resize.add(el, onTrResizeObserver);
}
}
}
if (removedNodes.length > 0) {
for (const el of removedNodes) {
resize.delete(el);
NodeWeakMap.delete(el);
}
}
}
}
}
function onResizeBodyRowRecord(entries, callback) {
const target = entries[0].target;
if (!index.isTableRow(target)) return null;
const record = index.unrefTbodyRowRecord(target, tableRef);
lodashEs.isFunction(callback) && callback(record);
return record;
}
function onResizeBodyColRecord(entries, callback) {
var _a2;
const rowEl = entries[0].target;
const colEls = (_a2 = rowEl == null ? void 0 : rowEl.getElementsByTagName) == null ? void 0 : _a2.call(rowEl, "td");
const rowRecord = index.unrefTbodyRowRecord(rowEl, tableRef);
if (!colEls) return null;
const records = [];
for (const columnTarget of colEls) {
if (index.isTableCol(columnTarget)) {
const colRecord = index.unrefTbodyColRecord(columnTarget, tableRef);
const record = {
...rowRecord,
...colRecord
};
lodashEs.isFunction(callback) && callback(record);
records.push(record);
}
}
return records;
}
async function onTrResizeObserver(entries) {
await vue.nextTick();
const events = {
onResizeBodyRowRecord,
onResizeBodyColRecord
};
const onTrResizeObserver2 = options == null ? void 0 : options.onTrResizeObserver;
if (lodashEs.isFunction(onTrResizeObserver2)) {
try {
onTrResizeObserver2(entries);
} catch (e) {
console.error(e, "onTrResizeObserver");
}
}
for (const [name, onCallback] of Object.entries(events)) {
const callback = options == null ? void 0 : options[name];
if (lodashEs.isFunction(callback)) {
try {
onCallback(entries, callback);
} catch (e) {
console.error(e, `onTrResizeObserver:${name}`);
}
}
}
}
function getElementContentRect(target) {
function getContent() {
var _a2, _b, _c, _d;
const { params: scrollParams, ...scroll } = getScrollContent();
const el = core.unrefElement(tableRef);
if (!target) target = el;
const parent = (_a2 = vue.unref(el)) == null ? void 0 : _a2.parentElement;
const tbody = index.unrefTbodyElement(el);
const contentRect = ((_b = target == null ? void 0 : target.getBoundingClientRect) == null ? void 0 : _b.call(target)) ?? null;
const parentRect = ((_c = parent == null ? void 0 : parent.getBoundingClientRect) == null ? void 0 : _c.call(parent)) ?? null;
const tbodyRect = ((_d = tbody == null ? void 0 : tbody.getBoundingClientRect) == null ? void 0 : _d.call(tbody)) ?? null;
return {
...scroll,
scrollWidth: (tbodyRect == null ? void 0 : tbodyRect.width) ?? (scroll == null ? void 0 : scroll.scrollWidth) ?? 0,
scrollHeight: (tbodyRect == null ? void 0 : tbodyRect.height) ?? (scroll == null ? void 0 : scroll.scrollHeight) ?? 0,
bodyWidth: (contentRect == null ? void 0 : contentRect.width) ?? (scroll == null ? void 0 : scroll.bodyWidth) ?? 0,
bodyHeight: (contentRect == null ? void 0 : contentRect.height) ?? (scroll == null ? void 0 : scroll.bodyHeight) ?? 0,
parentHeight: (parentRect == null ? void 0 : parentRect.height) ?? 0,
parentWidth: (parentRect == null ? void 0 : parentRect.width) ?? 0,
parentRect,
contentRect,
tbodyRect,
parent,
target,
tbody,
scrollParams
};
}
const contentTarget = getContent();
return new Proxy(contentTarget, {
get(_target, p, receiver) {
const content = getContent();
const value = Reflect.get(content, p, receiver);
const oldValue = Reflect.get(contentTarget, p, receiver);
if (value !== oldValue) {
contentTarget[p] = value;
}
return value;
}
});
}
function getScrollContent() {
function getContent() {
var _a2, _b;
const scroll1 = (_b = (_a2 = vue.unref(tableRef)) == null ? void 0 : _a2.getScroll) == null ? void 0 : _b.call(_a2);
const scroll2 = vue.unref(tableScrollDataRef);
const scroll = {
type: "body",
scrollTop: 0,
scrollLeft: 0,
scrollHeight: 0,
scrollWidth: 0,
bodyWidth: 0,
bodyHeight: 0,
isX: false,
isY: false,
params: [scroll2, scroll1]
};
const keys = Object.keys(scroll);
for (const data of [scroll1, scroll2]) {
if (data && lodashEs.isPlainObject(data)) {
for (const [key, value] of Object.entries(data)) {
if (keys.includes(key)) {
if (!utils.isEmptyValue(value)) {
scroll[key] = value;
}
}
}
}
}
return scroll;
}
const content = getContent();
return new Proxy(content, {
get(_target, p, receiver) {
const content2 = getContent();
const value = Reflect.get(content2, p, receiver);
const oldValue = Reflect.get(content2, p, receiver);
if (value !== oldValue) {
content2[p] = value;
}
return value;
}
});
}
function onTableScroll(data) {
if (!data) return;
tableScrollDataRef.value = data;
vue.nextTick(() => {
if (lodashEs.isFunction(options == null ? void 0 : options.onScroll)) {
try {
options == null ? void 0 : options.onScroll(vue.unref(wrapperRef), data);
} catch (e) {
console.error(e, "onTableScroll");
}
}
}).catch((r) => r);
}
function handleUnmounted() {
resize.stop();
mutation.stop();
tableResize.stop();
}
vue.onUnmounted(() => {
handleUnmounted();
});
const observer = {
mutation,
resize,
tableResize
};
const sdebounce = (_a = options == null ? void 0 : options.scroll) == null ? void 0 : _a.debounce;
const _onTableScroll = sdebounce && sdebounce > 0 ? lodashEs.debounce(onTableScroll, sdebounce) : onTableScroll;
return {
observer,
tableWrapperRef,
tableWrapper: wrapperRef,
stop: handleUnmounted,
onTableScroll: _onTableScroll
};
}
exports.useVxeTableObserver = useVxeTableObserver;