@stonecrop/atable 0.4.22 → 0.4.24

package/src/stores/table.ts

@@ -3,6 +3,9 @@ import { type CSSProperties, computed, ref } from 'vue'
 
 import type {
 	CellContext,
+	ConnectionHandle,
+	ConnectionPath,
+	GanttBarInfo,
 	GanttDragEvent,
 	TableColumn,
 	TableConfig,
@@ -56,12 +59,15 @@ export const createTableStore = (initData: {
 
 			// TODO: (typing) is this type correct for the parent set?
 			const parents = new Set<string | number>()
-			for (let rowIndex = rows.value.length - 1; rowIndex >= 0; rowIndex--) {
+			for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
 				const row = rows.value[rowIndex]
-				if (row.parent) {
+				if (row.parent !== null && row.parent !== undefined) {
 					parents.add(row.parent)
 				}
+			}
 
+			for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
+				const row = rows.value[rowIndex]
 				defaultDisplay[rowIndex] = {
 					childrenOpen: false,
 					expanded: false,
@@ -85,9 +91,14 @@ export const createTableStore = (initData: {
 		const display = ref(createDisplayObject(initData.display))
 		const modal = ref<TableModal>(initData.modal || { visible: false })
 		const updates = ref<Record<string, string>>({})
+		const ganttBars = ref<GanttBarInfo[]>([])
+		const connectionHandles = ref<ConnectionHandle[]>([])
+		const connectionPaths = ref<ConnectionPath[]>([])
 
 		// getters
 		const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned))
+		const isGanttView = computed(() => config.value.view === 'gantt' || config.value.view === 'tree-gantt')
+		const isTreeView = computed(() => config.value.view === 'tree' || config.value.view === 'tree-gantt')
 
 		const numberedRowWidth = computed(() => {
 			const indent = Math.ceil(rows.value.length / 100 + 1)
@@ -95,7 +106,7 @@ export const createTableStore = (initData: {
 		})
 
 		const zeroColumn = computed(() =>
-			config.value.view ? ['list', 'tree', 'list-expansion'].includes(config.value.view) : false
+			config.value.view ? ['list', 'tree', 'tree-gantt', 'list-expansion'].includes(config.value.view) : false
 		)
 
 		// actions
@@ -109,7 +120,11 @@ export const createTableStore = (initData: {
 			}
 
 			table.value[index] = value
-			rows.value[rowIndex][col.name] = value
+			// Create a new row object to ensure reactivity
+			rows.value[rowIndex] = {
+				...rows.value[rowIndex],
+				[col.name]: value,
+			}
 		}
 
 		const setCellText = (colIndex: number, rowIndex: number, value: string) => {
@@ -154,32 +169,40 @@ export const createTableStore = (initData: {
 
 		const isRowGantt = (rowIndex: number) => {
 			const row = rows.value[rowIndex]
-			return config.value.view === 'gantt' && row.indent === 0
+			return isGanttView.value && row.gantt !== undefined
 		}
 
 		const isRowVisible = (rowIndex: number) => {
-			return config.value.view !== 'tree' || display.value[rowIndex].isRoot || display.value[rowIndex].open
+			return !isTreeView.value || display.value[rowIndex].isRoot || display.value[rowIndex].open
 		}
 
 		const getRowExpandSymbol = (rowIndex: number) => {
-			if (config.value.view !== 'tree') {
+			if (!isTreeView.value && config.value.view !== 'list-expansion') {
 				return ''
 			}
 
-			if (display.value[rowIndex].isRoot || display.value[rowIndex].isParent) {
-				return display.value[rowIndex].childrenOpen ? '-' : '+'
+			if (isTreeView.value && (display.value[rowIndex].isRoot || display.value[rowIndex].isParent)) {
+				return display.value[rowIndex].childrenOpen ? '▼' : '►'
+			}
+
+			if (config.value.view === 'list-expansion') {
+				return display.value[rowIndex].expanded ? '▼' : '►'
 			}
 
 			return ''
 		}
 
 		const toggleRowExpand = (rowIndex: number) => {
-			if (config.value.view === 'tree') {
+			if (isTreeView.value) {
 				display.value[rowIndex].childrenOpen = !display.value[rowIndex].childrenOpen
-				for (let index = rows.value.length - 1; index >= 0; index--) {
+				const isOpen = display.value[rowIndex].childrenOpen
+
+				for (let index = 0; index < rows.value.length; index++) {
 					if (display.value[index].parent === rowIndex) {
-						display.value[index].open = !display.value[index].open
-						if (display.value[index].childrenOpen) {
+						display.value[index].open = isOpen
+						if (!isOpen) {
+							// If we're closing, also close any children recursively
+							display.value[index].childrenOpen = false
 							toggleRowExpand(index)
 						}
 					}
@@ -255,11 +278,98 @@ export const createTableStore = (initData: {
 			}
 		}
 
+		const registerGanttBar = (barInfo: GanttBarInfo) => {
+			const existingIndex = ganttBars.value.findIndex(bar => bar.id === barInfo.id)
+			if (existingIndex >= 0) {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				ganttBars.value[existingIndex] = barInfo
+			} else {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				ganttBars.value.push(barInfo)
+			}
+		}
+
+		const unregisterGanttBar = (barId: string) => {
+			const index = ganttBars.value.findIndex(bar => bar.id === barId)
+			if (index >= 0) {
+				ganttBars.value.splice(index, 1)
+			}
+		}
+
+		const registerConnectionHandle = (handleInfo: ConnectionHandle) => {
+			const existingIndex = connectionHandles.value.findIndex(handle => handle.id === handleInfo.id)
+			if (existingIndex >= 0) {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				connectionHandles.value[existingIndex] = handleInfo
+			} else {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				connectionHandles.value.push(handleInfo)
+			}
+		}
+
+		const unregisterConnectionHandle = (handleId: string) => {
+			const index = connectionHandles.value.findIndex(handle => handle.id === handleId)
+			if (index >= 0) {
+				connectionHandles.value.splice(index, 1)
+			}
+		}
+
+		const createConnection = (
+			fromHandleId: string,
+			toHandleId: string,
+			options?: { style?: ConnectionPath['style']; label?: string }
+		) => {
+			const fromHandle = connectionHandles.value.find(h => h.id === fromHandleId)
+			const toHandle = connectionHandles.value.find(h => h.id === toHandleId)
+
+			if (!fromHandle || !toHandle) {
+				console.warn('Cannot create connection: handle not found')
+				return null
+			}
+
+			const connection: ConnectionPath = {
+				id: `connection-${fromHandleId}-${toHandleId}`,
+				from: {
+					barId: fromHandle.barId,
+					side: fromHandle.side,
+				},
+				to: {
+					barId: toHandle.barId,
+					side: toHandle.side,
+				},
+				style: options?.style,
+				label: options?.label,
+			}
+
+			connectionPaths.value.push(connection)
+			return connection
+		}
+
+		const deleteConnection = (connectionId: string) => {
+			const index = connectionPaths.value.findIndex(conn => conn.id === connectionId)
+			if (index >= 0) {
+				connectionPaths.value.splice(index, 1)
+				return true
+			}
+			return false
+		}
+
+		const getConnectionsForBar = (barId: string) => {
+			return connectionPaths.value.filter(conn => conn.from.barId === barId || conn.to.barId === barId)
+		}
+
+		const getHandlesForBar = (barId: string) => {
+			return connectionHandles.value.filter(handle => handle.barId === barId)
+		}
+
 		return {
 			// state
 			columns,
 			config,
+			connectionHandles,
+			connectionPaths,
 			display,
+			ganttBars,
 			modal,
 			rows,
 			table,
@@ -267,23 +377,33 @@ export const createTableStore = (initData: {
 
 			// getters
 			hasPinnedColumns,
+			isGanttView,
+			isTreeView,
 			numberedRowWidth,
 			zeroColumn,
 
 			// actions
 			closeModal,
+			createConnection,
+			deleteConnection,
 			getCellData,
 			getCellDisplayValue,
+			getConnectionsForBar,
 			getFormattedValue,
+			getHandlesForBar,
 			getHeaderCellStyle,
-			resizeColumn,
 			getIndent,
 			getRowExpandSymbol,
 			isRowGantt,
 			isRowVisible,
+			registerConnectionHandle,
+			registerGanttBar,
+			resizeColumn,
 			setCellData,
 			setCellText,
 			toggleRowExpand,
+			unregisterConnectionHandle,
+			unregisterGanttBar,
 			updateGanttBar,
 		}
 	})

package/src/types/index.ts

@@ -1,4 +1,5 @@
 import { useElementBounding } from '@vueuse/core'
+import type { Ref, ShallowRef } from 'vue'
 
 import { createTableStore } from '../stores/table'
 
@@ -133,8 +134,8 @@ export interface TableColumn {
 	ganttComponent?: string
 
 	/**
-	 * The colspan of the Gantt-bar for the column. This is used to determine how many columns
-	 * the Gantt-bar should span.
+	 * The colspan of the Gantt bar for the column. This determines how many columns
+	 * the Gantt bar should span across.
 	 *
 	 * Only applicable for Gantt tables.
 	 *
@@ -143,8 +144,8 @@ export interface TableColumn {
 	colspan?: number
 
 	/**
-	 * The starting column index for the Gantt-bar, excluding any pinned columns. This is
-	 * evaluated automatically while rendering the table.
+	 * The original column index for the Gantt bar, excluding any pinned columns.
+	 * This is evaluated automatically while rendering the table.
 	 *
 	 * Only applicable for Gantt tables.
 	 *
@@ -185,8 +186,10 @@ export interface TableConfig {
 	 * - `list` - row numbers are displayed in the table
 	 * - `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
+	 * - `gantt` - view that allows specific rows to be displayed with Gantt functionality
+	 * - `tree-gantt` - similar to `gantt`, but allows for tree functionality as well
 	 */
-	view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt'
+	view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt' | 'tree-gantt'
 
 	/**
 	 * Control whether the table should be allowed to use the full width of its container.
@@ -303,29 +306,33 @@ export interface TableRow {
 }
 
 /**
- * This interface defines the options for a row when it is being viewed as a Gantt chart.
+ * Gantt chart options for table rows.
  * @public
  */
 export interface GanttOptions {
 	/**
-	 * The colour to be applied to the row's gantt bar.
+	 * The color to be applied to the row's gantt bar.
+	 *
+	 * @defaultValue '#cccccc'
 	 */
 	color?: string
 
 	/**
 	 * The starting column index for the gantt bar.
+	 *
+	 * @defaultValue 0
 	 */
 	startIndex?: number
 
 	/**
-	 * The ending column index for the gantt bar. If the endIndex and colspan are not provided,
+	 * The ending column index for the gantt bar. If endIndex and colspan are not provided,
 	 * the bar will stretch to the end of the table.
 	 */
 	endIndex?: number
 
 	/**
-	 * The length of the gantt bar. Useful when only the start index is provided. If the
-	 * colspan and endIndex are not provided, the bar will stretch to the end of the table.
+	 * The length of the gantt bar in columns. Useful when only the start index is provided.
+	 * If colspan and endIndex are not provided, the bar will stretch to the end of the table.
 	 */
 	colspan?: number
 }
@@ -468,3 +475,145 @@ export interface TableModalProps {
 	 */
 	store: ReturnType<typeof createTableStore>
 }
+
+/**
+ * Gantt bar information for VueFlow integration.
+ * @public
+ */
+export interface GanttBarInfo {
+	/**
+	 * Unique identifier for the gantt bar.
+	 */
+	id: string
+
+	/**
+	 * The row index of the gantt bar.
+	 */
+	rowIndex: number
+
+	/**
+	 * The primary column index of the gantt bar (typically the start index).
+	 */
+	colIndex: number
+
+	/**
+	 * Starting column index of the gantt bar.
+	 */
+	startIndex: Ref<number>
+
+	/**
+	 * Ending column index of the gantt bar.
+	 */
+	endIndex: Ref<number>
+
+	/**
+	 * Color of the gantt bar.
+	 */
+	color: Ref<string>
+
+	/**
+	 * The position of the gantt bar in the ATable component.
+	 */
+	position: {
+		x: ShallowRef<number>
+		y: ShallowRef<number>
+	}
+
+	/**
+	 * Display label for the gantt bar.
+	 */
+	label?: string
+}
+
+/**
+ * Connection handle information for gantt bar connections.
+ * @public
+ */
+export interface ConnectionHandle {
+	/**
+	 * Unique identifier for the connection handle.
+	 */
+	id: string
+
+	/**
+	 * The row index of the gantt bar this handle belongs to.
+	 */
+	rowIndex: number
+
+	/**
+	 * The column index of the gantt bar this handle belongs to.
+	 */
+	colIndex: number
+
+	/**
+	 * The side of the gantt bar where this handle is located.
+	 */
+	side: 'left' | 'right'
+
+	/**
+	 * The position of the connection handle.
+	 */
+	position: {
+		x: ShallowRef<number>
+		y: ShallowRef<number>
+	}
+
+	/**
+	 * Whether the handle is currently visible (on hover).
+	 */
+	visible: Ref<boolean>
+
+	/**
+	 * Reference to the gantt bar this handle belongs to.
+	 */
+	barId: string
+}
+
+/**
+ * Connection path between two gantt bars.
+ * @public
+ */
+export interface ConnectionPath {
+	/**
+	 * Unique identifier for the connection path.
+	 */
+	id: string
+
+	/**
+	 * The source connection handle.
+	 */
+	from: {
+		barId: string
+		side: 'left' | 'right'
+	}
+
+	/**
+	 * The target connection handle.
+	 */
+	to: {
+		barId: string
+		side: 'left' | 'right'
+	}
+
+	/**
+	 * Optional styling for the connection path.
+	 */
+	style?: {
+		color?: string
+		width?: number
+	}
+
+	/**
+	 * Optional label for the connection.
+	 */
+	label?: string
+}
+
+/**
+ * Connection event for handling connection creation/deletion.
+ * @public
+ */
+export type ConnectionEvent = {
+	type: 'create' | 'delete'
+	connection: ConnectionPath
+}