'use strict';
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
var vue = require('vue');
|
require('../../../utils/index.js');
|
var util = require('./util.js');
|
var shared = require('@vue/shared');
|
var core = require('@vueuse/core');
|
|
class TableLayout {
|
constructor(options) {
|
this.observers = [];
|
this.table = null;
|
this.store = null;
|
this.columns = [];
|
this.fit = true;
|
this.showHeader = true;
|
this.height = vue.ref(null);
|
this.scrollX = vue.ref(false);
|
this.scrollY = vue.ref(false);
|
this.bodyWidth = vue.ref(null);
|
this.fixedWidth = vue.ref(null);
|
this.rightFixedWidth = vue.ref(null);
|
this.gutterWidth = 0;
|
for (const name in options) {
|
if (shared.hasOwn(options, name)) {
|
if (vue.isRef(this[name])) {
|
this[name].value = options[name];
|
} else {
|
this[name] = options[name];
|
}
|
}
|
}
|
if (!this.table) {
|
throw new Error("Table is required for Table Layout");
|
}
|
if (!this.store) {
|
throw new Error("Store is required for Table Layout");
|
}
|
}
|
updateScrollY() {
|
const height = this.height.value;
|
if (height === null)
|
return false;
|
const scrollBarRef = this.table.refs.scrollBarRef;
|
if (this.table.vnode.el && (scrollBarRef == null ? void 0 : scrollBarRef.wrapRef)) {
|
let scrollY = true;
|
const prevScrollY = this.scrollY.value;
|
scrollY = scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.clientHeight;
|
this.scrollY.value = scrollY;
|
return prevScrollY !== scrollY;
|
}
|
return false;
|
}
|
setHeight(value, prop = "height") {
|
if (!core.isClient)
|
return;
|
const el = this.table.vnode.el;
|
value = util.parseHeight(value);
|
this.height.value = Number(value);
|
if (!el && (value || value === 0))
|
return vue.nextTick(() => this.setHeight(value, prop));
|
if (typeof value === "number") {
|
el.style[prop] = `${value}px`;
|
this.updateElsHeight();
|
} else if (typeof value === "string") {
|
el.style[prop] = value;
|
this.updateElsHeight();
|
}
|
}
|
setMaxHeight(value) {
|
this.setHeight(value, "max-height");
|
}
|
getFlattenColumns() {
|
const flattenColumns = [];
|
const columns = this.table.store.states.columns.value;
|
columns.forEach((column) => {
|
if (column.isColumnGroup) {
|
flattenColumns.push.apply(flattenColumns, column.columns);
|
} else {
|
flattenColumns.push(column);
|
}
|
});
|
return flattenColumns;
|
}
|
updateElsHeight() {
|
this.updateScrollY();
|
this.notifyObservers("scrollable");
|
}
|
headerDisplayNone(elm) {
|
if (!elm)
|
return true;
|
let headerChild = elm;
|
while (headerChild.tagName !== "DIV") {
|
if (getComputedStyle(headerChild).display === "none") {
|
return true;
|
}
|
headerChild = headerChild.parentElement;
|
}
|
return false;
|
}
|
updateColumnsWidth() {
|
if (!core.isClient)
|
return;
|
const fit = this.fit;
|
const bodyWidth = this.table.vnode.el.clientWidth;
|
let bodyMinWidth = 0;
|
const flattenColumns = this.getFlattenColumns();
|
const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number");
|
flattenColumns.forEach((column) => {
|
if (typeof column.width === "number" && column.realWidth)
|
column.realWidth = null;
|
});
|
if (flexColumns.length > 0 && fit) {
|
flattenColumns.forEach((column) => {
|
bodyMinWidth += Number(column.width || column.minWidth || 80);
|
});
|
if (bodyMinWidth <= bodyWidth) {
|
this.scrollX.value = false;
|
const totalFlexWidth = bodyWidth - bodyMinWidth;
|
if (flexColumns.length === 1) {
|
flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
|
} else {
|
const allColumnsWidth = flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0);
|
const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
|
let noneFirstWidth = 0;
|
flexColumns.forEach((column, index) => {
|
if (index === 0)
|
return;
|
const flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel);
|
noneFirstWidth += flexWidth;
|
column.realWidth = Number(column.minWidth || 80) + flexWidth;
|
});
|
flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
|
}
|
} else {
|
this.scrollX.value = true;
|
flexColumns.forEach((column) => {
|
column.realWidth = Number(column.minWidth);
|
});
|
}
|
this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
|
this.table.state.resizeState.value.width = this.bodyWidth.value;
|
} else {
|
flattenColumns.forEach((column) => {
|
if (!column.width && !column.minWidth) {
|
column.realWidth = 80;
|
} else {
|
column.realWidth = Number(column.width || column.minWidth);
|
}
|
bodyMinWidth += column.realWidth;
|
});
|
this.scrollX.value = bodyMinWidth > bodyWidth;
|
this.bodyWidth.value = bodyMinWidth;
|
}
|
const fixedColumns = this.store.states.fixedColumns.value;
|
if (fixedColumns.length > 0) {
|
let fixedWidth = 0;
|
fixedColumns.forEach((column) => {
|
fixedWidth += Number(column.realWidth || column.width);
|
});
|
this.fixedWidth.value = fixedWidth;
|
}
|
const rightFixedColumns = this.store.states.rightFixedColumns.value;
|
if (rightFixedColumns.length > 0) {
|
let rightFixedWidth = 0;
|
rightFixedColumns.forEach((column) => {
|
rightFixedWidth += Number(column.realWidth || column.width);
|
});
|
this.rightFixedWidth.value = rightFixedWidth;
|
}
|
this.notifyObservers("columns");
|
}
|
addObserver(observer) {
|
this.observers.push(observer);
|
}
|
removeObserver(observer) {
|
const index = this.observers.indexOf(observer);
|
if (index !== -1) {
|
this.observers.splice(index, 1);
|
}
|
}
|
notifyObservers(event) {
|
const observers = this.observers;
|
observers.forEach((observer) => {
|
var _a, _b;
|
switch (event) {
|
case "columns":
|
(_a = observer.state) == null ? void 0 : _a.onColumnsChange(this);
|
break;
|
case "scrollable":
|
(_b = observer.state) == null ? void 0 : _b.onScrollableChange(this);
|
break;
|
default:
|
throw new Error(`Table Layout don't have event ${event}.`);
|
}
|
});
|
}
|
}
|
|
exports["default"] = TableLayout;
|
//# sourceMappingURL=table-layout.js.map
|
