vue-gantt-3
Version:
A gantt component for Vue 3
193 lines (192 loc) • 6.95 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const agGridVue3 = require("ag-grid-vue3");
require("ag-grid-community/styles/ag-grid.css");
require("ag-grid-community/styles/ag-theme-alpine.css");
const useTableColumn = require("./useTableColumn.js");
const useTableRow = require("./useTableRow.js");
const useTableScroll = require("./useTableScroll.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "TableView",
props: {
getRowId: { type: Function },
columns: {},
rows: {},
rowNodeMap: {},
defaultCol: {},
rowHeight: {},
headerHeight: {},
rowBuffer: {},
rowSelection: {},
getEmptyRows: { type: Function }
},
emits: ["viewPortChanged", "cellDoubleClicked", "selectionChanged", "cellContextMenu", "triggerGanttViewScroll"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const tableViewRef = vue.ref();
const tableRef = vue.ref();
const tableBodyView = vue.ref(null);
const tableBodyVerticalScrollViewport = vue.ref(null);
const selectedRowIds = vue.inject("selectedRowIds");
const showSecondLevel = vue.inject("showSecondLevel");
const showFirstLevel = vue.inject("showFirstLevel");
const domLayout = vue.ref("normal");
const gridOptions = {
rowClass: "vg-row",
doesExternalFilterPass,
isExternalFilterPresent
};
const onGridReady = (params) => {
var _a, _b;
tableRef.value = params.api;
tableBodyView.value = tableViewRef.value.querySelector(".ag-body-viewport");
(_a = tableBodyView.value) == null ? void 0 : _a.addEventListener("wheel", bodyWheel, { passive: false });
tableBodyVerticalScrollViewport.value = tableViewRef.value.querySelector(".ag-body-vertical-scroll-viewport");
(_b = tableBodyVerticalScrollViewport.value) == null ? void 0 : _b.addEventListener("scroll", verticalScrollViewportScroll);
};
const emitTriggerGanttViewScroll = (options) => {
emit("triggerGanttViewScroll", options);
};
vue.watch(selectedRowIds, () => {
setTableRowSelected();
}, { deep: true });
const setTableRowSelected = () => {
var _a, _b;
(_a = tableRef.value) == null ? void 0 : _a.deselectAll();
const rowNodes = [];
const rowIds = [...selectedRowIds.value];
rowIds.forEach((id) => {
var _a2;
const rowNode = (_a2 = tableRef.value) == null ? void 0 : _a2.getRowNode(id);
rowNode && rowNodes.push(rowNode);
});
(_b = tableRef.value) == null ? void 0 : _b.setNodesSelected({ nodes: rowNodes, newValue: true });
};
const onViewPortChanged = (data) => {
const firstRow = data.firstRow;
const lastRow = data.lastRow;
emit("viewPortChanged", visibleRowDataList.value.slice(firstRow, lastRow + 1));
};
const onCellDoubleClicked = (data) => {
emit("cellDoubleClicked", data.data, data.colDef);
};
const onSelectionChanged = (data) => {
emit("selectionChanged", data);
};
const onCellContextMenu = (data) => {
emit("cellContextMenu", data);
};
const processRowPostCreate = (data) => {
var _a;
if (!((_a = data.node.data) == null ? void 0 : _a.isEmpty)) {
data.eRow.setAttribute("data-row-id", data.node.id);
}
};
function isExternalFilterPresent() {
return true;
}
function doesExternalFilterPass(node) {
const currentRowNode = getRowNode(node.data);
return !(currentRowNode == null ? void 0 : currentRowNode.hide);
}
const onFilterChanged = () => {
var _a;
handleEmptyRowChanged();
(_a = tableRef.value) == null ? void 0 : _a.onFilterChanged();
};
const refreshCells = (rowIds, force = false) => {
var _a;
const rowNodes = [];
rowIds.forEach((id) => {
var _a2;
const rowNode = (_a2 = tableRef.value) == null ? void 0 : _a2.getRowNode(id);
rowNode && rowNodes.push(rowNode);
});
if (rowNodes.length) {
(_a = tableRef.value) == null ? void 0 : _a.refreshCells({ rowNodes, force });
}
};
const getFirstDisplayedRow = () => {
var _a;
return (_a = tableRef.value) == null ? void 0 : _a.getFirstDisplayedRow();
};
const getLastDisplayedRow = () => {
var _a;
return (_a = tableRef.value) == null ? void 0 : _a.getLastDisplayedRow();
};
const {
rowData,
getTableRowId,
getRowNode,
handleEmptyRowChanged,
visibleRowDataList
} = useTableRow.useTableRow({
props,
setTableRowSelected,
rowClass: gridOptions.rowClass,
tableRef,
tableBodyView,
tableBodyVerticalScrollViewport
});
const { columnDefs } = useTableColumn.useTableColumns({ props, getRowNode });
const {
scrollTo,
bodyWheel,
verticalScrollViewportScroll
} = useTableScroll.useTableScroll({
tableBodyView,
tableBodyVerticalScrollViewport,
emitTriggerGanttViewScroll
});
__expose({
scrollTo,
refreshCells,
onFilterChanged,
handleEmptyRowChanged,
getFirstDisplayedRow,
getLastDisplayedRow
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "tableViewRef",
ref: tableViewRef,
class: "vg-table-view"
}, [
vue.withDirectives(vue.createElementVNode("div", {
class: "first-level-header",
style: vue.normalizeStyle({ height: _ctx.headerHeight + 1 + "px" })
}, null, 4), [
[vue.vShow, vue.unref(showSecondLevel) && vue.unref(showFirstLevel)]
]),
vue.createVNode(vue.unref(agGridVue3.AgGridVue), {
class: "ag-theme-alpine ag-theme-mgantttheme",
gridOptions,
getRowId: vue.unref(getTableRowId),
columnDefs: vue.unref(columnDefs),
rowData: vue.unref(rowData),
defaultColDef: _ctx.defaultCol,
rowHeight: _ctx.rowHeight,
headerHeight: _ctx.headerHeight,
rowBuffer: _ctx.rowBuffer,
suppressNoRowsOverlay: true,
rowSelection: _ctx.rowSelection,
alwaysShowHorizontalScroll: true,
suppressRowHoverHighlight: true,
suppressCellFocus: true,
suppressRowClickSelection: true,
processRowPostCreate,
domLayout: domLayout.value,
onGridReady,
onViewportChanged: onViewPortChanged,
onCellDoubleClicked,
onSelectionChanged,
onCellContextMenu
}, null, 8, ["getRowId", "columnDefs", "rowData", "defaultColDef", "rowHeight", "headerHeight", "rowBuffer", "rowSelection", "domLayout"])
], 512);
};
}
});
exports.default = _sfc_main;
//# sourceMappingURL=TableView.vue.js.map