vue-gantt-3/es/components/tableView/TableView.vue.mjs.map

A gantt component for Vue 3

{"version":3,"file":"TableView.vue.mjs","sources":["../../../../src/components/tableView/TableView.vue"],"sourcesContent":["<template>\n  <div ref=\"tableViewRef\" class=\"vg-table-view\">\n    <div v-show=\"showSecondLevel && showFirstLevel\" class=\"first-level-header\" :style=\"{height: headerHeight + 1 + 'px'}\"></div>\n    <ag-grid-vue\n      class=\"ag-theme-alpine ag-theme-mgantttheme\"\n      :gridOptions=\"gridOptions\"\n      :getRowId=\"getTableRowId\"\n      :columnDefs=\"columnDefs\"\n      :rowData=\"rowData\"\n      :defaultColDef=\"defaultCol\"\n      :rowHeight=\"rowHeight\"\n      :headerHeight=\"headerHeight\"\n      :rowBuffer=\"rowBuffer\"\n      :suppressNoRowsOverlay=\"true\"\n      :rowSelection=\"rowSelection\"\n      :alwaysShowHorizontalScroll=\"true\"\n      :suppressRowHoverHighlight=\"true\"\n      :suppressCellFocus=\"true\"\n      :suppressRowClickSelection=\"true\"\n      :processRowPostCreate=\"processRowPostCreate\"\n      :domLayout=\"domLayout\"\n      @grid-ready=\"onGridReady\"\n      @viewport-changed=\"onViewPortChanged\"\n      @cell-double-clicked=\"onCellDoubleClicked\"\n      @selection-changed=\"onSelectionChanged\"\n      @cell-context-menu=\"onCellContextMenu\"\n    >\n    </ag-grid-vue>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { AgGridVue } from \"ag-grid-vue3\";\nimport type { GridApi, IRowNode, GridReadyEvent, ViewportChangedEvent, CellDoubleClickedEvent,\n  SelectionChangedEvent, CellContextMenuEvent, ProcessRowParams } from \"ag-grid-community\";\nimport \"ag-grid-community/styles/ag-grid.css\";\nimport \"ag-grid-community/styles/ag-theme-alpine.css\";\nimport { ref, inject, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport type { RowData, ColDef, DefaultColDef, GanttRowNode } from '@/types';\nimport { useTableColumns } from './useTableColumn';\nimport { useTableRow } from './useTableRow';\nimport { useTableScroll } from './useTableScroll';\n\nexport interface Props {\n  getRowId: (rowData: RowData) => string,\n  columns: ColDef[],\n  rows: RowData[],\n  rowNodeMap: Map<string, GanttRowNode>,\n  defaultCol?: DefaultColDef,\n  rowHeight: number,\n  headerHeight: number,\n  rowBuffer: number,\n  rowSelection: 'single' | 'multiple' | 'none',\n  getEmptyRows?: (count: number) => RowData[],\n\n}\n\nconst props = defineProps<Props>();\nconst emit = defineEmits<{\n  (e: 'viewPortChanged', data: RowData[]): void,\n  (e: 'cellDoubleClicked', rowData: RowData | undefined, columnData?: ColDef): void,\n  (e: 'selectionChanged', data: SelectionChangedEvent<RowData>): void,\n  (e: 'cellContextMenu', data: CellContextMenuEvent<RowData>): void,\n  (e: 'triggerGanttViewScroll', options: ScrollToOptions): void,\n}>();\n\nconst tableViewRef = ref<HTMLDivElement>();\nconst tableRef = ref<GridApi<RowData>>();\nconst tableBodyView = ref<HTMLDivElement | null>(null);\nconst tableBodyVerticalScrollViewport = ref<HTMLDivElement | null>(null);\nconst selectedRowIds = inject('selectedRowIds') as Ref<Set<string>>;\nconst showSecondLevel = inject('showSecondLevel') as Ref<boolean>;\nconst showFirstLevel = inject('showFirstLevel') as Ref<boolean>;\nconst domLayout = ref('normal');\n\nconst gridOptions = {\n  rowClass: 'vg-row',\n  doesExternalFilterPass,\n  isExternalFilterPresent,\n};\n\nconst onGridReady = (params: GridReadyEvent<RowData>) => {\n  tableRef.value = params.api;\n  tableBodyView.value = tableViewRef.value!.querySelector('.ag-body-viewport');\n  tableBodyView.value?.addEventListener('wheel', bodyWheel, { passive: false });\n  tableBodyVerticalScrollViewport.value = tableViewRef.value!.querySelector('.ag-body-vertical-scroll-viewport');\n  tableBodyVerticalScrollViewport.value?.addEventListener('scroll', verticalScrollViewportScroll);\n};\n\nconst emitTriggerGanttViewScroll = (options: ScrollToOptions) => {\n  emit('triggerGanttViewScroll', options);\n};\n\nwatch(selectedRowIds, () => {\n  setTableRowSelected();\n}, { deep: true });\n\nconst setTableRowSelected = () => {\n  tableRef.value?.deselectAll();\n  const rowNodes: IRowNode<RowData>[] = [];\n  const rowIds = [...selectedRowIds.value];\n  rowIds.forEach(id => {\n    const rowNode = tableRef.value?.getRowNode(id);\n    rowNode && rowNodes.push(rowNode);\n  });\n  tableRef.value?.setNodesSelected({ nodes: rowNodes, newValue: true });\n};\n\nconst onViewPortChanged = (data: ViewportChangedEvent<RowData>) => {\n  const firstRow = data.firstRow;\n  const lastRow = data.lastRow;\n\n  emit('viewPortChanged', visibleRowDataList.value.slice(firstRow, lastRow + 1));\n};\n\nconst onCellDoubleClicked = (data: CellDoubleClickedEvent<Omit<RowData, 'children'>>) => {\n  emit('cellDoubleClicked', data.data, data.colDef as ColDef);\n};\n\nconst onSelectionChanged = (data: SelectionChangedEvent<RowData>) => {\n  emit('selectionChanged', data);\n};\n\nconst onCellContextMenu = (data: CellContextMenuEvent<RowData>) => {\n  emit('cellContextMenu', data);\n};\n\nconst processRowPostCreate = (data: ProcessRowParams<RowData>) => {\n  if (!data.node.data?.isEmpty) {\n    data.eRow.setAttribute('data-row-id', data.node.id as string);\n  }\n};\n\nfunction isExternalFilterPresent () {\n  return true;\n}\n\nfunction doesExternalFilterPass (node: IRowNode<RowData>) {\n  const currentRowNode = getRowNode(node.data);\n  return !currentRowNode?.hide;\n}\n\nconst onFilterChanged = () => {\n  handleEmptyRowChanged();\n  tableRef.value?.onFilterChanged();\n};\n\nconst refreshCells = (rowIds: string[], force = false) => {\n  const rowNodes: IRowNode<RowData>[] = [];\n  rowIds.forEach(id => {\n    const rowNode = tableRef.value?.getRowNode(id);\n    rowNode && rowNodes.push(rowNode);\n  });\n  if (rowNodes.length) {\n    tableRef.value?.refreshCells({ rowNodes: rowNodes, force });\n  }\n\n};\n\nconst getFirstDisplayedRow = () => {\n  return tableRef.value?.getFirstDisplayedRow();\n};\n\nconst getLastDisplayedRow = () => {\n  return tableRef.value?.getLastDisplayedRow();\n};\n\nconst {\n  rowData,\n  getTableRowId,\n  getRowNode,\n  handleEmptyRowChanged,\n  visibleRowDataList\n} = useTableRow({\n  props,\n  setTableRowSelected,\n  rowClass: gridOptions.rowClass,\n  tableRef,\n  tableBodyView,\n  tableBodyVerticalScrollViewport\n});\n\nconst { columnDefs } = useTableColumns({ props, getRowNode });\n\nconst {\n  scrollTo,\n  bodyWheel,\n  verticalScrollViewportScroll\n} = useTableScroll({\n  tableBodyView,\n  tableBodyVerticalScrollViewport,\n  emitTriggerGanttViewScroll\n});\n\ndefineExpose({\n  scrollTo,\n  refreshCells,\n  onFilterChanged,\n  handleEmptyRowChanged,\n  getFirstDisplayedRow,\n  getLastDisplayedRow\n});\n\n</script>\n<style lang=\"scss\">\n.vg-table-view {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  .first-level-header {\n    background: #F3F3F4;\n    border-bottom: 1px solid #D0D0D0;\n  }\n  .ag-theme-mgantttheme {\n    flex: 1;\n    height: 100%;\n    overflow: hidden;\n    --ag-borders: none,\n    --ag-odd-row-background-color: #fff;\n    --ag-border-color: #e9e9e9;\n    --ag-row-border-color: #e9e9e9;\n    --ag-cell-horizontal-border: 1px solid #e9e9e9;\n    --ag-header-column-resize-handle-height: 100%;\n    --ag-header-column-resize-handle-width: 1px;\n    --ag-header-column-resize-handle-color: #e9e9e9;\n    --ag-header-background-color: #fff;\n    --ag-cell-horizontal-padding: 9px;\n    --ag-selected-row-background-color: #0078d7;\n    --ag-odd-row-background-color: #fff;\n    .ag-row {\n      .ag-cell:last-of-type {\n        // --ag-cell-horizontal-border: 1px solid transparent;\n      }\n    }\n    .ag-header {\n      --ag-borders-critical: 1px solid;\n    }\n    .ag-row-last.no-bottom-border-row {\n      border-bottom: 0;\n    }\n    .ag-header-row {\n      .ag-header-cell:last-of-type {\n\n      }\n    }\n  }\n}\n</style>"],"names":["_a"],"mappings":"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"}