comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
78 lines (77 loc) • 2.36 kB
JavaScript
import { unrefElement } from "@vueuse/core";
import { computed, ref, onMounted } from "vue";
import { useResize } from "../../../../hooks/resize.mjs";
const useTableStyle = ({ containerRef, columns, MIN_SIZE }) => {
const expandColumn = computed(() => columns.value.find((v) => v.type === "expand"));
const containerEl = computed(() => {
return unrefElement(containerRef);
});
const barWidth = ref(0);
const leftShadow = ref(false);
const rightShadow = 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 = 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;
};
useResize(containerRef, () => {
getBodyScrollbarWidth();
updateShadow();
});
onMounted(() => {
getBodyScrollbarWidth();
updateShadow();
});
return {
barWidth,
leftShadow,
rightShadow,
expandColumn,
onscroll,
setColumnWidth,
getCellClass
};
};
export {
useTableStyle
};