@stonecrop/atable 0.4.10 → 0.4.12

package/src/components/ATable.vue

@@ -2,7 +2,9 @@
 	<table
 		ref="table"
 		class="atable"
-		:style="{ width: store.config.fullWidth ? '100%' : 'auto' }"
+		:style="{
+			width: store.config.fullWidth ? '100%' : 'auto',
+		}"
 		v-on-click-outside="store.closeModal">
 		<slot name="header" :data="store">
 			<ATableHeader :columns="store.columns" :store="store" />
@@ -11,21 +13,35 @@
 		<tbody>
 			<slot name="body" :data="store">
 				<ARow v-for="(row, rowIndex) in store.rows" :key="row.id" :row="row" :rowIndex="rowIndex" :store="store">
-					<ACell
-						v-for="(col, colIndex) in store.columns"
-						:key="col.name"
-						:store="store"
-						:col="col"
-						spellcheck="false"
-						:pinned="col.pinned"
-						:rowIndex="rowIndex"
-						:colIndex="colIndex"
-						:component="col.cellComponent"
-						:style="{
-							textAlign: col?.align || 'center',
-							minWidth: col?.width || '40ch',
-							width: store.config.fullWidth ? 'auto' : null,
-						}" />
+					<template v-for="(column, colIndex) in getProcessedColumnsForRow(row)" :key="column.name">
+						<component
+							v-if="column.isGantt"
+							:is="column.ganttComponent || 'AGanttCell'"
+							:store="store"
+							:color="row.gantt_color"
+							:colspan="column.colspan"
+							:pinned="column.pinned"
+							:rowIndex="rowIndex"
+							:colIndex="column.originalIndex ?? colIndex"
+							:style="{
+								textAlign: column?.align || 'center',
+								minWidth: column?.width || '40ch',
+								width: store.config.fullWidth ? 'auto' : null,
+							}" />
+						<component
+							v-else
+							:is="column.cellComponent || 'ACell'"
+							:store="store"
+							:pinned="column.pinned"
+							:rowIndex="rowIndex"
+							:colIndex="colIndex"
+							:style="{
+								textAlign: column?.align || 'center',
+								minWidth: column?.width || '40ch',
+								width: store.config.fullWidth ? 'auto' : null,
+							}"
+							spellcheck="false" />
+					</template>
 				</ARow>
 			</slot>
 		</tbody>
@@ -52,7 +68,6 @@ import { vOnClickOutside } from '@vueuse/components'
 import { useMutationObserver } from '@vueuse/core'
 import { nextTick, watch, onMounted, useTemplateRef } from 'vue'
 
-import ACell from './ACell.vue'
 import ARow from './ARow.vue'
 import ATableHeader from './ATableHeader.vue'
 import ATableModal from './ATableModal.vue'
@@ -102,7 +117,7 @@ watch(
 )
 
 onMounted(() => {
-	if (columns.some(col => col.pinned)) {
+	if (columns.some(column => column.pinned)) {
 		assignStickyCellWidths()
 
 		// in tree view, also add a mutation observer to capture and adjust expanded rows
@@ -163,6 +178,33 @@ window.addEventListener('keydown', (event: KeyboardEvent) => {
 	}
 })
 
+const getProcessedColumnsForRow = (row: TableRow) => {
+	const isGanttRow = row.indent === 0
+	const pinnedColumnCount = store.columns.filter(column => column.pinned).length
+	if (!isGanttRow || pinnedColumnCount === 0) {
+		return store.columns
+	}
+
+	// For Gantt views, first add the pinned columns
+	const result: TableColumn[] = []
+	for (let i = 0; i < pinnedColumnCount; i++) {
+		const column = { ...store.columns[i] }
+		column.originalIndex = i // Preserve original index
+		result.push(column)
+	}
+
+	// Finally, add the Gantt bar column with a full-width colspan
+	result.push({
+		...store.columns[pinnedColumnCount],
+		isGantt: true,
+		colspan: store.columns.length - pinnedColumnCount,
+		originalIndex: pinnedColumnCount,
+		width: 'auto', // TODO: refactor to API that can detect when data exists in a cell. Might have be custom and not generalizable
+	})
+
+	return result
+}
+
 defineExpose({ store })
 </script>
 
@@ -204,6 +246,7 @@ td.sticky-index {
 	table-layout: auto;
 	width: auto;
 	overflow: clip;
+	height: 1px;
 	/* border-left:4px solid var(--sc-form-border); */
 }
 .atable th {
@@ -224,4 +267,22 @@ td.sticky-index {
 .atable th:focus {
 	outline: none;
 }
+
+/* Make sure the vertical indicator doesn't extend into the header */
+.atable:tbody {
+	overflow: hidden; /* This ensures the indicator is clipped */
+	position: relative; /* Create a stacking context */
+}
+
+/* Ensure the indicator stays within the tbody */
+.atable:tbody::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 1px;
+	background-color: transparent;
+	z-index: 100;
+}
 </style>

package/src/components/ATableHeader.vue

@@ -35,9 +35,6 @@ const { columns, store } = defineProps<{
 <style>
 @import url('@stonecrop/themes/default.css');
 
-.atable-header-row {
-	display: flex;
-}
 .atable-header-row th {
 	padding-left: 0.5ch !important;
 	font-weight: 700;

package/src/index.ts

@@ -2,6 +2,7 @@ import { App } from 'vue'
 
 import ACell from './components/ACell.vue'
 import AExpansionRow from './components/AExpansionRow.vue'
+import AGanttCell from './components/AGanttCell.vue'
 import ARow from './components/ARow.vue'
 import ATable from './components/ATable.vue'
 import ATableHeader from './components/ATableHeader.vue'
@@ -27,6 +28,7 @@ export type {
 function install(app: App /* options */) {
 	app.component('ACell', ACell)
 	app.component('AExpansionRow', AExpansionRow)
+	app.component('AGanttCell', AGanttCell)
 	app.component('ARow', ARow)
 	app.component('ATable', ATable)
 	app.component('ATableHeader', ATableHeader)
@@ -35,4 +37,15 @@ function install(app: App /* options */) {
 	app.component('ATableModal', ATableModal)
 }
 
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal }
+export {
+	ACell,
+	AExpansionRow,
+	AGanttCell,
+	ARow,
+	ATable,
+	ATableHeader,
+	ATableLoading,
+	ATableLoadingBar,
+	ATableModal,
+	install,
+}

package/src/stores/table.ts

@@ -119,6 +119,12 @@ export const createTableStore = (initData: {
 			width: config.value.fullWidth ? 'auto' : undefined,
 		})
 
+		const isRowGantt = (rowIndex: number) => {
+			const row = rows.value[rowIndex]
+			console.log(config.value.view, row.indent)
+			return config.value.view === 'gantt' && row.indent === 0
+		}
+
 		const isRowVisible = (rowIndex: number) => {
 			return config.value.view !== 'tree' || display.value[rowIndex].isRoot || display.value[rowIndex].open
 		}
@@ -218,6 +224,7 @@ export const createTableStore = (initData: {
 			getHeaderCellStyle,
 			getIndent,
 			getRowExpandSymbol,
+			isRowGantt,
 			isRowVisible,
 			setCellData,
 			setCellText,

package/src/types/index.ts

@@ -16,6 +16,12 @@ export type TableColumn = {
 	width?: string
 	pinned?: boolean
 
+	// Gantt-specific fields
+	colspan?: number
+	ganttComponent?: string
+	isGantt?: boolean
+	originalIndex?: number
+
 	cellComponent?: string
 	cellComponentProps?: Record<string, any>
 	/**
@@ -61,7 +67,7 @@ export type TableConfig = {
 	 * - `list-expansion` - carets are displayed in the number column that expand/collapse the row inline
 	 * - `tree` - carets are displayed in the number column that expand/collapse grouped rows
 	 */
-	view?: 'uncounted' | 'list' | 'list-expansion' | 'tree'
+	view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt'
 	fullWidth?: boolean
 }
 
@@ -88,6 +94,11 @@ export type TableRow = {
 	[key: string]: any
 	indent?: number
 	parent?: number
+
+	/**
+	 * When a table is being viewed as a Gantt chart, this colour would be applied to the row's gantt bar, if one exists.
+	 */
+	gantt_color?: string
 }
 
 /**