vue-gantt-3
Version:
A gantt component for Vue 3
168 lines (167 loc) • 6.39 kB
JavaScript
import { defineComponent, ref, provide, watch, createElementBlock, openBlock, normalizeStyle, unref, createElementVNode, createVNode, normalizeClass, createBlock, resolveDynamicComponent, withCtx, renderSlot } from "vue";
import { useResizeObserver } from "@vueuse/core";
import _sfc_main$1 from "./Bar.vue.mjs";
/* empty css */
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "ScrollBar",
props: {
tag: { default: "div" },
viewClass: {},
wrapClass: {},
viewStyle: { type: [Boolean, null, String, Object, Array] },
wrapStyle: { type: [Boolean, null, String, Object, Array] },
interceptShiftScroll: { type: Boolean, default: false },
alwayHorizontal: { type: Boolean, default: false },
alwayVertical: { type: Boolean, default: false }
},
emits: ["scroll", "resize", "wrapResize", "shiftScroll", "wheel", "verticalScrollBarShow"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const resizeRef = ref();
const wrapRef = ref();
const barRef = ref();
const horizontalWidth = ref(0);
const verticalHeight = ref(0);
const horizontalVisible = ref(false);
const verticalVisible = ref(false);
const scrollFromThumb = ref(false);
provide(
"wrapRef",
wrapRef
);
provide(
"scrollFromThumb",
scrollFromThumb
);
function getScrollbarSize() {
const outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.overflow = "scroll";
document.body.appendChild(outer);
const inner = document.createElement("div");
inner.style.height = "100%";
outer.appendChild(inner);
const scrollbarWidth2 = outer.offsetWidth - inner.offsetWidth;
const scrollbarHeight2 = outer.offsetHeight - inner.offsetHeight;
document.body.removeChild(outer);
return { scrollbarWidth: scrollbarWidth2, scrollbarHeight: scrollbarHeight2 };
}
const { scrollbarWidth, scrollbarHeight } = getScrollbarSize();
watch(verticalVisible, (val) => {
emit("verticalScrollBarShow", { show: val, scrollbarWidth });
});
const onResize = () => {
var _a, _b, _c, _d;
if (!resizeRef.value || !wrapRef.value) return;
const resizeRefWidth = (_a = resizeRef.value) == null ? void 0 : _a.offsetWidth;
const resizeRefHeight = (_b = resizeRef.value) == null ? void 0 : _b.offsetHeight;
const wrapRefOffsetWidth = (_c = wrapRef.value) == null ? void 0 : _c.offsetWidth;
const wrapRefOffsetHeight = (_d = wrapRef.value) == null ? void 0 : _d.offsetHeight;
horizontalWidth.value = resizeRefWidth;
verticalHeight.value = resizeRefHeight;
if (resizeRefWidth > wrapRefOffsetWidth) {
horizontalVisible.value = true;
} else {
horizontalVisible.value = props.alwayHorizontal || false;
}
if (resizeRefHeight > wrapRefOffsetHeight) {
verticalVisible.value = true;
} else {
verticalVisible.value = props.alwayVertical || false;
}
};
const onWrapResize = () => {
wrapRef.value && emit("resize", wrapRef.value);
};
useResizeObserver(resizeRef, onResize);
useResizeObserver(wrapRef, onWrapResize);
const handleScroll = () => {
if (wrapRef.value && barRef.value) {
if (!scrollFromThumb.value) {
emit("scroll", { scrollTop: wrapRef.value.scrollTop, scrollLeft: wrapRef.value.scrollLeft });
barRef.value.handleScroll(wrapRef.value);
} else {
scrollFromThumb.value = false;
}
}
};
const triggerScrollFromThumb = (options) => {
scrollTo(options);
if (wrapRef.value && barRef.value) {
const scrollLeft = options.left === void 0 ? wrapRef.value.scrollLeft : options.left;
const scrollTop = options.top === void 0 ? wrapRef.value.scrollTop : options.top;
emit("scroll", { scrollLeft, scrollTop });
}
};
const triggerScrollFromOutSide = (options) => {
var _a;
triggerScrollFromThumb(options);
if (wrapRef.value && barRef.value) {
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
}
scrollFromThumb.value = true;
};
const handleWheel = (e) => {
if (props.interceptShiftScroll && e.shiftKey) {
emit("shiftScroll", e);
} else {
emit("wheel", e);
}
};
const scrollTo = (options) => {
wrapRef.value.scrollTo(options);
};
__expose({
onResize,
scrollTo,
handleScroll,
triggerScrollFromOutSide
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "vg-scrollbar",
style: normalizeStyle({
paddingBottom: horizontalVisible.value ? `${unref(scrollbarHeight)}px` : 0,
paddingRight: verticalVisible.value ? `${unref(scrollbarWidth)}px` : 0
})
}, [
createElementVNode("div", {
ref_key: "wrapRef",
ref: wrapRef,
class: normalizeClass(["vg-scrollbar-wrap", _ctx.wrapClass]),
style: normalizeStyle(_ctx.wrapStyle),
onWheel: handleWheel,
onScroll: handleScroll
}, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
ref_key: "resizeRef",
ref: resizeRef,
class: normalizeClass(["vg-scrollbar-view", _ctx.viewClass]),
style: normalizeStyle(_ctx.viewStyle)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "style"]))
], 38),
createVNode(_sfc_main$1, {
ref_key: "barRef",
ref: barRef,
scrollbarWidth: unref(scrollbarWidth),
scrollbarHeight: unref(scrollbarHeight),
horizontalWidth: horizontalWidth.value,
verticalHeight: verticalHeight.value,
horizontalVisible: horizontalVisible.value,
verticalVisible: verticalVisible.value,
onTriggerScrollFromThumb: triggerScrollFromThumb
}, null, 8, ["scrollbarWidth", "scrollbarHeight", "horizontalWidth", "verticalHeight", "horizontalVisible", "verticalVisible"])
], 4);
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=ScrollBar.vue.mjs.map