vue-gantt-3
Version:
A gantt component for Vue 3
63 lines (62 loc) • 2.06 kB
JavaScript
import { defineComponent, ref, inject, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle } from "vue";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "Thumb",
props: {
width: {},
height: {},
isHorizontal: { type: Boolean }
},
emits: ["triggerScrollFromThumb"],
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const props = __props;
const thumbRef = ref();
const wrapRef = inject("wrapRef");
const scrollFromThumb = inject("scrollFromThumb");
const scrollFromWrap = ref(false);
const mouseHover = ref(false);
const handleScroll = (option) => {
if (thumbRef.value && !scrollFromThumb.value) {
scrollFromWrap.value = true;
thumbRef.value.scrollTo(option);
}
};
const onScroll = () => {
if (scrollFromWrap.value) {
scrollFromWrap.value = false;
return;
}
if (wrapRef.value && thumbRef.value) {
scrollFromThumb.value = true;
const { scrollTop, scrollLeft } = thumbRef.value;
if (props.isHorizontal) {
emit("triggerScrollFromThumb", { left: scrollLeft });
} else {
emit("triggerScrollFromThumb", { top: scrollTop });
}
}
};
__expose({
handleScroll
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "thumbRef",
ref: thumbRef,
class: normalizeClass(["vg-scrollbar-thumb-wrap", _ctx.isHorizontal ? "is-horizontal" : "is-vertical"]),
onScroll,
onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseHover.value = true),
onMouseleave: _cache[1] || (_cache[1] = ($event) => mouseHover.value = false)
}, [
createElementVNode("div", {
class: "vg-scrollbar-thumb",
style: normalizeStyle({ width: _ctx.width + "px", height: _ctx.height + "px" })
}, null, 4)
], 34);
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=Thumb.vue.mjs.map