vue-gantt-3
Version:
A gantt component for Vue 3
269 lines (268 loc) • 9.48 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const TableView_vue_vue_type_script_setup_true_lang = require("./components/tableView/TableView.vue.js");
;/* empty css */
const GanttView_vue_vue_type_script_setup_true_lang = require("./components/ganttView/GanttView.vue.js");
;/* empty css */
const ExpandableBox = require("./components/common/ExpandableBox.vue.js");
const dayjs = require("dayjs");
const minMax = require("dayjs/plugin/minMax");
const useGanttRowNode = require("./composables/useGanttRowNode.js");
const useGanttSelect = require("./composables/useGanttSelect.js");
const useGanttExpand = require("./composables/useGanttExpand.js");
const rowClass = "vg-row";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "VueGantt3"
},
__name: "Gantt",
props: {
getRowId: {},
columns: { default: () => [] },
rows: { default: () => [] },
getEmptyRows: {},
headerTextRender: {},
headerTipRender: {},
defaultCol: {},
rowHeight: { default: 25 },
headerHeight: { default: 25 },
rowBuffer: { default: 5 },
rowSelection: { default: "multiple" },
defaultTableViewWidth: { default: 350 },
maxTableViewWidth: { default: 1e3 },
styleOption: {},
timePointComp: {},
defaultPerHourSpacing: {},
defaultTimeScale: {},
locale: {},
defaultShowFirstLevel: { type: Boolean, default: true },
timeLineRender: {},
timeLineRenderParams: {}
},
emits: ["selectChange", "expandChange", "rowContextMenu", "cellDoubleClicked", "ganttMouseDown", "timePointMoveFinished", "perHourSpacingChange", "timePointContextMenu", "timeLineStretchChange", "timeLineMoveChange", "viewPortChanged"],
setup(__props, { expose: __expose, emit: __emit }) {
dayjs.extend(minMax);
const props = __props;
const emit = __emit;
const ganttViewRef = vue.ref();
const tableViewRef = vue.ref();
const vGanttRef = vue.ref();
const rowsRef = vue.toRef(props, "rows");
const rowHeightRef = vue.toRef(props, "rowHeight");
const showFirstLevel = vue.toRef(props, "defaultShowFirstLevel");
const rowSelectionRef = vue.toRef(props, "rowSelection");
const showSecondLevel = vue.ref(true);
vue.provide(
"showSecondLevel",
showSecondLevel
);
vue.provide(
"showFirstLevel",
showFirstLevel
);
const triggerTableViewScroll = (options, onWheel) => {
var _a;
(_a = tableViewRef.value) == null ? void 0 : _a.scrollTo(options, onWheel);
};
const triggerGanttViewScroll = (options) => {
var _a;
(_a = ganttViewRef.value) == null ? void 0 : _a.scrollTo(options);
};
const emitSelectChange = (ids) => {
emit("selectChange", ids);
};
const emitExpandChange = (ids) => {
emit("expandChange", ids);
};
const freshTimeLines = (rowIds) => {
const rowNodes = [];
rowIds.forEach((id) => {
const currentRowNode = rowNodeMap.value.get(id);
if (currentRowNode) {
rowNodes.push(currentRowNode);
}
});
ganttViewRef.value && ganttViewRef.value.freshTimeLines(rowNodes);
};
const refreshCells = (ids, force = false) => {
var _a;
(_a = tableViewRef.value) == null ? void 0 : _a.refreshCells(ids, force);
};
const onCellDoubleClicked = (data, columnData) => {
emit("cellDoubleClicked", data, columnData);
};
const emitGanttMouseDown = (event, rowId) => {
emit("ganttMouseDown", event, rowId);
};
const onGanttBodyResize = (target) => {
var _a;
(_a = tableViewRef.value) == null ? void 0 : _a.handleEmptyRowChanged(target);
};
const onContextmenu = (event) => {
const { attributeValue: rowId } = getTargetElementInfo(event.target, rowClass, "data-row-id");
emit("rowContextMenu", event, rowId);
};
const timePointMoveFinished = (timePoint, date) => {
emit("timePointMoveFinished", timePoint, date);
};
vue.provide(
"timePointMoveFinished",
timePointMoveFinished
);
const perHourSpacingChange = (perHourSpacing) => {
emit("perHourSpacingChange", perHourSpacing);
};
const timePointContextMenu = (e, timePoints, rowNode) => {
if (rowNode) {
setSelect(rowNode.id);
}
emit("timePointContextMenu", e, timePoints, rowNode == null ? void 0 : rowNode.data);
};
vue.provide(
"timePointContextMenu",
timePointContextMenu
);
const timeLineStretchChange = (rowId, timeLineIds, startDate, endDate) => {
emit("timeLineStretchChange", rowId, timeLineIds, startDate, endDate);
};
vue.provide(
"timeLineStretchChange",
timeLineStretchChange
);
const timeLineMoveChange = (rowId, timeLineIds, movedTimeData) => {
emit("timeLineMoveChange", rowId, timeLineIds, movedTimeData);
};
vue.provide(
"timeLineMoveChange",
timeLineMoveChange
);
const onViewPortChanged = (data) => {
emit("viewPortChanged", data);
};
const setSelect = (id) => {
handleSetSelect(id);
};
const setExpand = (id, expand) => {
handleSetExpand(id, expand);
};
const {
rowNodeMap,
rowNodeIds,
visibleRowIds,
rowDataList,
firstLevelRowNode,
getRowNode,
getRowNodeChildren,
getRowDataList,
freshRowNodes,
getDisplayRows
} = useGanttRowNode.useGanttRowNode({
ganttViewRef,
tableViewRef,
rows: rowsRef,
getRowId: props.getRowId,
setExpand,
setSelect,
refreshCells,
onViewPortChanged
});
const {
handleSetSelect,
selectRows,
getTargetElementInfo
} = useGanttSelect.useGanttSelect({
vGanttRef,
visibleRowIds,
rowHeight: rowHeightRef,
rowSelection: rowSelectionRef,
rowClass,
emitGanttMouseDown,
emitSelectChange
});
const {
handleSetExpand,
expandAll
} = useGanttExpand.useGanttExpand({
tableViewRef,
rowNodeMap,
visibleRowIds,
rowNodeIds,
refreshCells,
emitExpandChange
});
__expose({
getRowNode,
getRowNodeChildren,
getRowDataList,
freshRowNodes,
refreshCells,
getDisplayRows,
expandAll,
freshTimeLines,
selectRows
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "vGanttRef",
ref: vGanttRef,
class: "vue-gantt-3",
onContextmenu: vue.withModifiers(onContextmenu, ["prevent"])
}, [
vue.createVNode(ExpandableBox.default, {
initWidth: _ctx.defaultTableViewWidth,
maxWidth: _ctx.maxTableViewWidth
}, {
default: vue.withCtx(() => [
vue.createVNode(TableView_vue_vue_type_script_setup_true_lang.default, {
ref_key: "tableViewRef",
ref: tableViewRef,
getRowId: _ctx.getRowId,
columns: _ctx.columns,
defaultCol: _ctx.defaultCol,
rowHeight: rowHeightRef.value,
headerHeight: _ctx.headerHeight,
rowBuffer: _ctx.rowBuffer,
rowSelection: rowSelectionRef.value,
rows: vue.unref(rowDataList),
rowNodeMap: vue.unref(rowNodeMap),
getEmptyRows: _ctx.getEmptyRows,
onTriggerGanttViewScroll: triggerGanttViewScroll,
onViewPortChanged,
onCellDoubleClicked
}, null, 8, ["getRowId", "columns", "defaultCol", "rowHeight", "headerHeight", "rowBuffer", "rowSelection", "rows", "rowNodeMap", "getEmptyRows"])
]),
_: 1
}, 8, ["initWidth", "maxWidth"]),
vue.createVNode(GanttView_vue_vue_type_script_setup_true_lang.default, {
ref_key: "ganttViewRef",
ref: ganttViewRef,
getRowId: _ctx.getRowId,
columns: _ctx.columns,
rows: rowsRef.value,
defaultCol: _ctx.defaultCol,
rowHeight: rowHeightRef.value,
headerHeight: _ctx.headerHeight,
rowBuffer: _ctx.rowBuffer,
rowNodeMap: vue.unref(rowNodeMap),
firstLevelRowNode: vue.unref(firstLevelRowNode),
visibleRowIds: vue.unref(visibleRowIds),
styleOption: _ctx.styleOption,
timePointComp: _ctx.timePointComp,
defaultPerHourSpacing: _ctx.defaultPerHourSpacing,
defaultTimeScale: _ctx.defaultTimeScale,
locale: _ctx.locale,
timeLineRender: _ctx.timeLineRender,
timeLineRenderParams: _ctx.timeLineRenderParams,
headerTextRender: _ctx.headerTextRender,
headerTipRender: _ctx.headerTipRender,
onTriggerTableViewScroll: triggerTableViewScroll,
onGanttBodyResize,
onPerHourSpacingChange: perHourSpacingChange
}, null, 8, ["getRowId", "columns", "rows", "defaultCol", "rowHeight", "headerHeight", "rowBuffer", "rowNodeMap", "firstLevelRowNode", "visibleRowIds", "styleOption", "timePointComp", "defaultPerHourSpacing", "defaultTimeScale", "locale", "timeLineRender", "timeLineRenderParams", "headerTextRender", "headerTipRender"])
], 544);
};
}
});
exports.default = _sfc_main;
//# sourceMappingURL=Gantt.vue.js.map