comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
78 lines (77 loc) • 2.47 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const core = require("@vueuse/core");
const vue = require("vue");
const resize = require("../../../../hooks/resize.js");
const useTableStyle = ({ containerRef, columns, MIN_SIZE }) => {
const expandColumn = vue.computed(() => columns.value.find((v) => v.type === "expand"));
const containerEl = vue.computed(() => {
return core.unrefElement(containerRef);
});
const barWidth = vue.ref(0);
const leftShadow = vue.ref(false);
const rightShadow = vue.ref(false);
const getBodyScrollbarWidth = () => {
var _a, _b;
barWidth.value = ((_a = containerEl.value) == null ? void 0 : _a.offsetWidth) - ((_b = containerEl.value) == null ? void 0 : _b.clientWidth);
columnDefaultWidth.value = updateColumnDefaultWidth();
};
const onscroll = (e) => {
leftShadow.value = e.target.scrollLeft > 0;
rightShadow.value = e.target.scrollWidth - (e.target.scrollLeft + e.target.clientWidth) > 1;
};
const updateShadow = () => {
let e = containerEl.value;
leftShadow.value = e.scrollLeft > 0;
rightShadow.value = e.scrollWidth - (e.scrollLeft + e.clientWidth) > 1;
};
const updateColumnDefaultWidth = () => {
let el = containerEl.value;
if (el && columns.value.length > 0) {
let i = 0;
let allWritesWidth = columns.value.reduce((v, o) => {
if (!o.props.width) {
i++;
return v += 0;
} else {
return v += Number(o.props.width);
}
}, 0);
let containerWidth = el.getBoundingClientRect().width - (barWidth.value ?? 0) - 2;
let res = (containerWidth - allWritesWidth) / i;
return Math.max(res, MIN_SIZE);
}
return MIN_SIZE;
};
const columnDefaultWidth = vue.ref(80);
const setColumnWidth = (col) => {
let width = col.props.width;
if (width && width !== "0") return width;
return columnDefaultWidth.value;
};
const getCellClass = (col) => {
let classList = [];
if (col.props.align) {
classList.push("is-" + col.props.align);
}
return classList;
};
resize.useResize(containerRef, () => {
getBodyScrollbarWidth();
updateShadow();
});
vue.onMounted(() => {
getBodyScrollbarWidth();
updateShadow();
});
return {
barWidth,
leftShadow,
rightShadow,
expandColumn,
onscroll,
setColumnWidth,
getCellClass
};
};
exports.useTableStyle = useTableStyle;