ivue-material-plus
Version:
A high quality UI components Library with Vue.js
283 lines (280 loc) • 7.92 kB
JavaScript
import { ref, computed, watch, unref, watchEffect } from 'vue';
import { useEventListener, useResizeObserver } from '@vueuse/core';
function useStyle(props, layout, store, table) {
const scrollbarContentStyle = {
display: "inline-block",
verticalAlign: "middle"
};
const dragging = ref(false);
const renderExpanded = ref(null);
const tableScrollHeight = ref(0);
const bodyScrollHeight = ref(0);
const headerScrollHeight = ref(0);
const footerScrollHeight = ref(0);
const resizeState = ref({
width: null,
height: null,
headerHeight: null
});
const tableWidth = ref(0);
const isGroup = ref(false);
const tableLayout = computed(() => {
if (props.maxHeight) {
return "fixed";
}
return props.tableLayout;
});
const contentStyles = computed(() => {
let obj = {};
if (props.height) {
obj = {
height: !Number.isNaN(Number(props.height)) ? `${props.height}px` : props.height
};
}
if (props.maxHeight) {
obj = {
maxHeight: !Number.isNaN(Number(props.maxHeight)) ? `${props.maxHeight}px` : props.maxHeight
};
}
return obj;
});
const tableStyles = computed(() => {
const { scrollY, gutterWidth } = layout;
return {
width: layout.bodyWidth.value ? `${layout.bodyWidth.value - (scrollY.value ? gutterWidth : 0)}px` : ""
};
});
const shouldUpdateHeight = computed(() => {
return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0;
});
const placeholderStyle = computed(() => {
if (props.data && props.data.length) {
return null;
}
let height = "100%";
if (props.height && bodyScrollHeight.value) {
height = `${bodyScrollHeight.value}px`;
}
const width = tableWidth.value;
return {
width: width ? `${width}px` : "",
height
};
});
const tableBodyStyle = computed(() => {
const { bodyWidth } = layout;
const obj = {
tableLayout: tableLayout.value
};
if (bodyWidth.value) {
obj.width = `${bodyWidth.value}px`;
}
return obj;
});
const scrollbarWrapperStyle = computed(() => {
var _a;
if (props.height) {
return {
height: "100%"
};
}
if (props.maxHeight) {
if (!Number.isNaN(Number(props.maxHeight))) {
const headerHeight = ((_a = table.refs.header) == null ? void 0 : _a.scrollHeight) || 0;
const maxHeight = props.maxHeight;
const reachMaxHeight = tableScrollHeight.value >= Number(maxHeight);
if (reachMaxHeight) {
return {
maxHeight: `${tableScrollHeight.value - headerHeight}px`
};
}
} else {
return {
maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value}px)`
};
}
}
return {};
});
const handleBindEvents = () => {
const scrollbar = table.refs.scrollbar;
if (!scrollbar) {
return;
}
if (scrollbar.scrollbarWrapper) {
useEventListener(
scrollbar.scrollbarWrapper,
"scroll",
handleScrollbarScroll,
{
passive: true
}
);
}
if (props.fit) {
useResizeObserver(table.vnode.el, handleResizeListener);
} else {
useEventListener(window, "resize", handleResizeListener);
}
};
const handleMouseLeave = () => {
table.store.commit("setHoverRow", null);
if (table.hoverState) {
table.hoverState = null;
}
};
const handleMousewheel = (event, data) => {
const { pixelX, pixelY } = data;
if (Math.abs(pixelX) >= Math.abs(pixelY)) {
table.refs.bodyWrapper.scrollLeft += data.pixelX / 5;
}
};
const handleDragVisible = (visible) => {
dragging.value = visible;
};
const updateLayout = () => {
if (shouldUpdateHeight.value) {
layout.updateTableContentHeight();
}
layout.updateColumnsWidth();
requestAnimationFrame(handleScrollbarScroll);
};
const handleResizeListener = () => {
var _a, _b;
if (!table.$ready) {
return;
}
let shouldUpdateLayout = false;
const el = table.vnode.el;
const {
width: oldWidth,
height: oldHeight,
headerHeight: oldHeaderHeight
} = resizeState.value;
const width = tableWidth.value = el.offsetWidth;
if (oldWidth !== width) {
shouldUpdateLayout = true;
}
const height = el.offsetHeight;
if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
shouldUpdateLayout = true;
}
const tableHeader = table.refs.header || {};
if (tableHeader && props.showHeader && tableHeader.offsetHeight !== oldHeaderHeight) {
shouldUpdateLayout = true;
}
tableScrollHeight.value = table.refs.tableWrapper.scrollHeight;
headerScrollHeight.value = ((_a = table.refs.header) == null ? void 0 : _a.scrollHeight) || 0;
footerScrollHeight.value = ((_b = table.refs.footer) == null ? void 0 : _b.scrollHeight) || 0;
bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value;
if (shouldUpdateLayout) {
resizeState.value = {
width,
height,
headerHeight: props.showHeader ? tableHeader.offsetHeight : null
};
updateLayout();
}
};
const handleScrollbarScroll = () => {
const scrollbar = table.refs.scrollbar;
if (!scrollbar) {
return;
}
if (!layout.scrollX.value) {
const scrollingNoneClass = "is-scrolling-none";
if (!hasClass(scrollingNoneClass)) {
setTableClass(scrollingNoneClass);
}
}
const scrollContainer = scrollbar.scrollbarWrapper;
if (!scrollContainer) {
return;
}
const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer;
const { header, footer } = table.refs;
if (header) {
header.scrollLeft = scrollLeft;
}
if (footer) {
footer.scrollLeft = scrollLeft;
}
const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
if (scrollLeft >= maxScrollLeftPosition) {
setTableClass("is-scrolling-right");
} else if (scrollLeft === 0) {
setTableClass("is-scrolling-left");
} else {
setTableClass("is-scrolling-middle");
}
};
const hasClass = (className) => {
const { tableWrapper } = table.refs;
return !!(tableWrapper && tableWrapper.classList.contains(className));
};
const setTableClass = (className) => {
const { tableWrapper } = table.refs;
if (!tableWrapper) {
return;
}
const classList = Array.from(tableWrapper.classList).filter(
(item) => !item.startsWith("is-scrolling-")
);
classList.push(layout.scrollX.value ? className : "is-scrolling-none");
tableWrapper.className = classList.join(" ");
};
watch(
() => props.data,
(data) => {
table.store.commit("setData", data);
},
{
immediate: true,
deep: true
}
);
watch(
() => [store.states.rowKey],
([currentRowKey, rowKey]) => {
if (!unref(rowKey)) {
return;
}
store.setCurrentRowKey(`${currentRowKey}`);
},
{
immediate: true
}
);
watchEffect(() => {
props.height && layout.setHeight(props.height);
});
watchEffect(() => {
props.maxHeight && layout.setMaxHeight(props.maxHeight);
});
watchEffect(() => {
if (props.expandRowKeys) {
store.setExpandRowKeysAdapter(props.expandRowKeys);
}
});
return {
dragging,
renderExpanded,
resizeState,
tableWidth,
isGroup,
tableLayout,
contentStyles,
tableStyles,
placeholderStyle,
tableBodyStyle,
scrollbarWrapperStyle,
scrollbarContentStyle,
handleMouseLeave,
handleMousewheel,
handleDragVisible,
updateLayout,
handleBindEvents
};
}
export { useStyle as default };
//# sourceMappingURL=styles.mjs.map