vuestic-ui
Version:
Vue 3 UI Framework
55 lines (54 loc) • 2.15 kB
JavaScript
import { getCurrentInstance, computed } from "vue";
import { u as useElementRef } from "../../../composables/useElementRef.mjs";
import { u as useNumericProp } from "../../../composables/useNumericProp.mjs";
import { u as useIntersectionObserver } from "../../../composables/useIntersectionObserver.mjs";
const useTableScrollProps = {
scrollTopMargin: { type: [Number, String], default: 0 },
scrollBottomMargin: { type: [Number, String], default: 0 }
};
const useTableScrollEmits = ["scroll:top", "scroll:bottom"];
const useTableScroll = (props, emit) => {
var _a;
const vNodeProps = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode.props;
const doRenderTopTrigger = (vNodeProps == null ? void 0 : vNodeProps["onScroll:top"]) !== void 0;
const doRenderBottomTrigger = (vNodeProps == null ? void 0 : vNodeProps["onScroll:bottom"]) !== void 0;
const scrollContainer = useElementRef();
const topTrigger = useElementRef();
const bottomTrigger = useElementRef();
const scrollTopMarginComputed = useNumericProp("scrollTopMargin");
const scrollBottomMarginComputed = useNumericProp("scrollBottomMargin");
const isObservable = computed(() => !!scrollContainer.value);
const intersectionHandler = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target === topTrigger.value ? emit("scroll:top") : emit("scroll:bottom");
}
});
};
const targets = computed(() => {
const list = [];
if (isObservable.value) {
topTrigger.value && list.push(topTrigger.value);
bottomTrigger.value && list.push(bottomTrigger.value);
}
return list;
});
const options = computed(() => ({
root: scrollContainer.value,
rootMargin: `${scrollTopMarginComputed.value ?? 0}px 0px ${scrollBottomMarginComputed.value ?? 0}px 0px`
}));
useIntersectionObserver(intersectionHandler, options, targets);
return {
scrollContainer,
topTrigger,
bottomTrigger,
doRenderTopTrigger,
doRenderBottomTrigger
};
};
export {
useTableScrollEmits as a,
useTableScroll as b,
useTableScrollProps as u
};
//# sourceMappingURL=useTableScroll.mjs.map