vue-gantt-3
Version:
A gantt component for Vue 3
168 lines (167 loc) • 6.5 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const core = require("@vueuse/core");
const Bar_vue_vue_type_script_setup_true_lang = require("./Bar.vue.js");
;/* empty css */
const _sfc_main = /* @__PURE__ */ vue.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 = vue.ref();
const wrapRef = vue.ref();
const barRef = vue.ref();
const horizontalWidth = vue.ref(0);
const verticalHeight = vue.ref(0);
const horizontalVisible = vue.ref(false);
const verticalVisible = vue.ref(false);
const scrollFromThumb = vue.ref(false);
vue.provide(
"wrapRef",
wrapRef
);
vue.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();
vue.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);
};
core.useResizeObserver(resizeRef, onResize);
core.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 vue.openBlock(), vue.createElementBlock("div", {
class: "vg-scrollbar",
style: vue.normalizeStyle({
paddingBottom: horizontalVisible.value ? `${vue.unref(scrollbarHeight)}px` : 0,
paddingRight: verticalVisible.value ? `${vue.unref(scrollbarWidth)}px` : 0
})
}, [
vue.createElementVNode("div", {
ref_key: "wrapRef",
ref: wrapRef,
class: vue.normalizeClass(["vg-scrollbar-wrap", _ctx.wrapClass]),
style: vue.normalizeStyle(_ctx.wrapStyle),
onWheel: handleWheel,
onScroll: handleScroll
}, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
ref_key: "resizeRef",
ref: resizeRef,
class: vue.normalizeClass(["vg-scrollbar-view", _ctx.viewClass]),
style: vue.normalizeStyle(_ctx.viewStyle)
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "style"]))
], 38),
vue.createVNode(Bar_vue_vue_type_script_setup_true_lang.default, {
ref_key: "barRef",
ref: barRef,
scrollbarWidth: vue.unref(scrollbarWidth),
scrollbarHeight: vue.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);
};
}
});
exports.default = _sfc_main;
//# sourceMappingURL=ScrollBar.vue.js.map