vue-gantt-3
Version:
A gantt component for Vue 3
269 lines (268 loc) • 9.13 kB
JavaScript
import { defineComponent, ref, toRef, provide, createElementBlock, openBlock, withModifiers, createVNode, withCtx, unref } from "vue";
import _sfc_main$1 from "./components/tableView/TableView.vue.mjs";
/* empty css */
import _sfc_main$2 from "./components/ganttView/GanttView.vue.mjs";
/* empty css */
import ExpandableBox from "./components/common/ExpandableBox.vue.mjs";
import dayjs from "dayjs";
import minMax from "dayjs/plugin/minMax";
import { useGanttRowNode } from "./composables/useGanttRowNode.mjs";
import { useGanttSelect } from "./composables/useGanttSelect.mjs";
import { useGanttExpand } from "./composables/useGanttExpand.mjs";
const rowClass = "vg-row";
const _sfc_main = /* @__PURE__ */ 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 = ref();
const tableViewRef = ref();
const vGanttRef = ref();
const rowsRef = toRef(props, "rows");
const rowHeightRef = toRef(props, "rowHeight");
const showFirstLevel = toRef(props, "defaultShowFirstLevel");
const rowSelectionRef = toRef(props, "rowSelection");
const showSecondLevel = ref(true);
provide(
"showSecondLevel",
showSecondLevel
);
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);
};
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);
};
provide(
"timePointContextMenu",
timePointContextMenu
);
const timeLineStretchChange = (rowId, timeLineIds, startDate, endDate) => {
emit("timeLineStretchChange", rowId, timeLineIds, startDate, endDate);
};
provide(
"timeLineStretchChange",
timeLineStretchChange
);
const timeLineMoveChange = (rowId, timeLineIds, movedTimeData) => {
emit("timeLineMoveChange", rowId, timeLineIds, movedTimeData);
};
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({
ganttViewRef,
tableViewRef,
rows: rowsRef,
getRowId: props.getRowId,
setExpand,
setSelect,
refreshCells,
onViewPortChanged
});
const {
handleSetSelect,
selectRows,
getTargetElementInfo
} = useGanttSelect({
vGanttRef,
visibleRowIds,
rowHeight: rowHeightRef,
rowSelection: rowSelectionRef,
rowClass,
emitGanttMouseDown,
emitSelectChange
});
const {
handleSetExpand,
expandAll
} = useGanttExpand({
tableViewRef,
rowNodeMap,
visibleRowIds,
rowNodeIds,
refreshCells,
emitExpandChange
});
__expose({
getRowNode,
getRowNodeChildren,
getRowDataList,
freshRowNodes,
refreshCells,
getDisplayRows,
expandAll,
freshTimeLines,
selectRows
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "vGanttRef",
ref: vGanttRef,
class: "vue-gantt-3",
onContextmenu: withModifiers(onContextmenu, ["prevent"])
}, [
createVNode(ExpandableBox, {
initWidth: _ctx.defaultTableViewWidth,
maxWidth: _ctx.maxTableViewWidth
}, {
default: withCtx(() => [
createVNode(_sfc_main$1, {
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: unref(rowDataList),
rowNodeMap: 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"]),
createVNode(_sfc_main$2, {
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: unref(rowNodeMap),
firstLevelRowNode: unref(firstLevelRowNode),
visibleRowIds: 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);
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=Gantt.vue.mjs.map