vue-gantt-3
Version:
A gantt component for Vue 3
65 lines (64 loc) • 2.43 kB
JavaScript
import { defineComponent, ref, createElementBlock, openBlock, Fragment, withDirectives, createVNode, normalizeStyle, vShow } from "vue";
import _sfc_main$1 from "./Thumb.vue.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "Bar",
props: {
horizontalWidth: {},
verticalHeight: {},
horizontalVisible: { type: Boolean },
verticalVisible: { type: Boolean },
scrollbarHeight: { default: 0 },
scrollbarWidth: { default: 0 }
},
emits: ["triggerScrollFromThumb"],
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const horizontalThumbRef = ref();
const verticalThumbRef = ref();
const handleScroll = (wrap) => {
const { scrollTop, scrollLeft } = wrap;
if (horizontalThumbRef.value) {
horizontalThumbRef.value.handleScroll({ top: 0, left: scrollLeft });
}
if (verticalThumbRef.value) {
verticalThumbRef.value.handleScroll({ top: scrollTop, left: 0 });
}
};
const triggerScrollFromThumb = (options) => {
emit("triggerScrollFromThumb", options);
};
__expose({
handleScroll
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
withDirectives(createVNode(_sfc_main$1, {
ref_key: "horizontalThumbRef",
ref: horizontalThumbRef,
isHorizontal: true,
width: _ctx.horizontalWidth,
height: _ctx.scrollbarHeight,
style: normalizeStyle({ maxHeight: _ctx.scrollbarHeight + "px", width: `calc(100% - ${_ctx.verticalVisible ? _ctx.scrollbarWidth : 0}px)` }),
onTriggerScrollFromThumb: triggerScrollFromThumb
}, null, 8, ["width", "height", "style"]), [
[vShow, _ctx.horizontalVisible]
]),
withDirectives(createVNode(_sfc_main$1, {
ref_key: "verticalThumbRef",
ref: verticalThumbRef,
isHorizontal: false,
height: _ctx.verticalHeight,
width: _ctx.scrollbarWidth,
style: normalizeStyle({ maxWidth: _ctx.scrollbarWidth + "px", height: `calc(100% - ${_ctx.horizontalVisible ? _ctx.scrollbarHeight : 0}px)` }),
onTriggerScrollFromThumb: triggerScrollFromThumb
}, null, 8, ["height", "width", "style"]), [
[vShow, _ctx.verticalVisible]
])
], 64);
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=Bar.vue.mjs.map