vue-gantt-3
Version:
A gantt component for Vue 3
136 lines (135 loc) • 5.05 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const GanttGrid_vue_vue_type_script_setup_true_lang = require("./ganttGrid/GanttGrid.vue.js");
;/* empty css */
const GanttTimeLineView_vue_vue_type_script_setup_true_lang = require("./ganttTimeLineView/GanttTimeLineView.vue.js");
;/* empty css */
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "GanttBody",
props: {
rowHeight: {},
edgeSpacing: {},
perHourSpacing: {},
rowBuffer: {},
ganttMinDate: {},
ganttMaxDate: {},
ganttViewWidth: {},
rows: {},
rowNodeMap: {},
visibleRowIds: {},
styleOption: {},
timePointComp: {},
timeLineRender: {},
timeLineRenderParams: {}
},
emits: ["updateMinDate", "updateMaxDate"],
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const props = __props;
const wrapRef = vue.inject("wrapRef");
const wrapRefWidth = vue.ref(0);
const ganttGridRef = vue.ref();
const ganttTimeLineViewRef = vue.ref();
const ganttViewWidth = vue.toRef(props, "ganttViewWidth");
const ganttBodyWidth = vue.ref("");
const ganttBodyHeight = vue.ref("");
const getGanttBodyWidth = () => {
if (!wrapRef.value) {
ganttBodyWidth.value = "100%";
return;
}
ganttBodyWidth.value = Math.max(wrapRefWidth.value, ganttViewWidth.value) + "px";
};
const getGanttBodyHeight = () => {
const { visibleRowIds, rowHeight } = props;
const contentHeight = visibleRowIds.length * rowHeight;
if (!wrapRef.value) {
ganttBodyHeight.value = contentHeight + "px";
} else {
const wrapHeight = wrapRef.value.offsetHeight;
ganttBodyHeight.value = Math.max(contentHeight, wrapHeight) + "px";
}
};
vue.watch(ganttViewWidth, () => {
getGanttBodyWidth();
});
vue.watch(() => props.visibleRowIds, () => {
getGanttBodyHeight();
});
const onScroll = ({ scrollTop, scrollLeft }) => {
if (ganttGridRef.value) {
ganttGridRef.value.onScroll({ scrollTop, scrollLeft });
}
if (ganttTimeLineViewRef.value) {
ganttTimeLineViewRef.value.onScroll({ scrollTop, scrollLeft });
}
};
const onResize = () => {
var _a;
wrapRefWidth.value = ((_a = wrapRef.value) == null ? void 0 : _a.offsetWidth) || 0;
getGanttBodyWidth();
getGanttBodyHeight();
if (ganttGridRef.value) {
ganttGridRef.value.onResize();
}
if (ganttTimeLineViewRef.value) {
ganttTimeLineViewRef.value.onResize();
}
};
const freshTimeLines = (rowNodes) => {
if (ganttTimeLineViewRef.value) {
ganttTimeLineViewRef.value.freshTimeLines(rowNodes);
}
};
const updateMinDate = (minDate) => {
emit("updateMinDate", minDate);
};
const updateMaxDate = (maxDate) => {
emit("updateMaxDate", maxDate);
};
__expose({
onResize,
onScroll,
freshTimeLines
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: "vg-body",
style: vue.normalizeStyle({ height: ganttBodyHeight.value, width: ganttBodyWidth.value })
}, [
vue.createVNode(GanttGrid_vue_vue_type_script_setup_true_lang.default, {
ref_key: "ganttGridRef",
ref: ganttGridRef,
rowHeight: _ctx.rowHeight,
perHourSpacing: _ctx.perHourSpacing,
rowBuffer: _ctx.rowBuffer,
edgeSpacing: _ctx.edgeSpacing,
ganttMinDate: _ctx.ganttMinDate,
styleOption: _ctx.styleOption
}, null, 8, ["rowHeight", "perHourSpacing", "rowBuffer", "edgeSpacing", "ganttMinDate", "styleOption"]),
vue.createVNode(GanttTimeLineView_vue_vue_type_script_setup_true_lang.default, {
ref_key: "ganttTimeLineViewRef",
ref: ganttTimeLineViewRef,
rowHeight: _ctx.rowHeight,
perHourSpacing: _ctx.perHourSpacing,
ganttMinDate: _ctx.ganttMinDate,
ganttMaxDate: _ctx.ganttMaxDate,
rowBuffer: _ctx.rowBuffer,
rowNodeMap: _ctx.rowNodeMap,
visibleRowIds: _ctx.visibleRowIds,
edgeSpacing: _ctx.edgeSpacing,
styleOption: _ctx.styleOption,
timePointComp: _ctx.timePointComp,
ganttViewWidth: ganttViewWidth.value,
timeLineRender: _ctx.timeLineRender,
timeLineRenderParams: _ctx.timeLineRenderParams,
onUpdateMinDate: updateMinDate,
onUpdateMaxDate: updateMaxDate
}, null, 8, ["rowHeight", "perHourSpacing", "ganttMinDate", "ganttMaxDate", "rowBuffer", "rowNodeMap", "visibleRowIds", "edgeSpacing", "styleOption", "timePointComp", "ganttViewWidth", "timeLineRender", "timeLineRenderParams"])
], 4);
};
}
});
exports.default = _sfc_main;
//# sourceMappingURL=GanttBody.vue.js.map