ivue-material-plus
Version:
A high quality UI components Library with Vue.js
170 lines (167 loc) • 5.21 kB
JavaScript
import { ref, isRef, nextTick } from 'vue';
import { hasOwn } from '@vue/shared';
class TableLayout {
constructor(options) {
this.scrollX = ref(false);
this.scrollY = ref(false);
this.bodyWidth = ref(null);
this.height = ref(null);
this.observers = [];
this.gutterWidth = 0;
for (const name in options) {
if (hasOwn(options, name)) {
if (isRef(this[name])) {
this[name].value = options[name];
} else {
this[name] = options[name];
}
}
}
}
getFlattenColumns() {
const flattenColumns = [];
const columns = this.table.store.states.columns.value;
columns.forEach((column) => {
flattenColumns.push(column);
});
return flattenColumns;
}
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((item) => {
var _a, _b;
if (event === "columns") {
(_a = item.state) == null ? void 0 : _a.handleColumnsChange(this);
}
if (event === "scrollable") {
(_b = item.state) == null ? void 0 : _b.handleScrollableWidthChange(this);
}
});
}
updateColumnsWidth() {
var _a;
const fit = this.fit;
const bodyWidth = (_a = this.table.vnode.el) == null ? void 0 : _a.clientWidth;
const flattenColumns = this.getFlattenColumns();
const flexColumns = flattenColumns.filter(
(item) => typeof item.width !== "number"
);
let bodyMinWidth = 0;
flattenColumns.forEach((item) => {
if (typeof item.width === "number" && item.columnWidth)
item.columnWidth = 0;
});
if (flexColumns.length > 0 && fit) {
flattenColumns.forEach((item) => {
bodyMinWidth += Number(item.width || item.minWidth || 80);
});
if (bodyMinWidth <= bodyWidth) {
this.scrollX.value = false;
const totalFlexWidth = bodyWidth - bodyMinWidth;
if (flexColumns.length === 1) {
flexColumns[0].columnWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
} else {
const allColumnWidth = flexColumns.reduce(
(prev, item) => prev + Number(item.minWidth || 80),
0
);
const flexWidthPerPixel = totalFlexWidth / allColumnWidth;
let noneFirstWidth = 0;
flexColumns.forEach((item, index) => {
if (index === 0) {
return;
}
const flexWidth = Math.floor(
Number(item.minWidth || 80) * flexWidthPerPixel
);
noneFirstWidth += flexWidth;
item.columnWidth = Number(item.minWidth || 80) + flexWidth;
});
flexColumns[0].columnWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
}
} else {
this.scrollX.value = true;
flexColumns.forEach((item) => {
item.columnWidth = Number(item.minWidth);
});
}
this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
this.table.state.resizeState.value.width = this.bodyWidth.value;
} else {
flattenColumns.forEach((item) => {
if (!item.width && !item.minWidth) {
item.columnWidth = 80;
} else {
item.columnWidth = Number(item.width || item.minWidth);
}
bodyMinWidth += item.columnWidth;
});
this.scrollX.value = bodyMinWidth > bodyWidth;
this.bodyWidth.value = bodyMinWidth;
}
this.notifyObservers("columns");
}
setHeight(value, prop = "height") {
const el = this.table.vnode.el;
value = this.parseHeight(value);
this.height.value = Number(value);
if (!el && (value || value === 0)) {
return nextTick(() => {
this.setHeight(value, prop);
});
}
if (typeof value === "number") {
el.style[prop] = `${value}px`;
this.updateTableContentHeight();
} else if (typeof value === "string") {
el.style[prop] = value;
this.updateTableContentHeight();
}
}
setMaxHeight(value) {
this.setHeight(value, "max-height");
}
parseHeight(height) {
if (typeof height === "number") {
return height;
}
if (typeof height === "string") {
if (/^\d+(?:px)?$/.test(height)) {
return Number.parseInt(height, 10);
} else {
return height;
}
}
return 0;
}
updateTableContentHeight() {
this.updateScrollY();
this.notifyObservers("scrollable");
}
updateScrollY() {
const height = this.height.value;
if (!height) {
return false;
}
const scrollbar = this.table.refs.scrollbar;
if (this.table.vnode.el && scrollbar) {
let scrollY = true;
const prevScrollY = this.scrollY.value;
scrollY = scrollbar.scrollbarWrapper.scrollHeight > scrollbar.scrollbarWrapper.clientHeight;
this.scrollY.value = scrollY;
return prevScrollY !== scrollY;
}
return false;
}
}
export { TableLayout as default };
//# sourceMappingURL=table-layout.mjs.map