@stonecrop/atable 0.31.0 → 0.33.0

package/src/components/AGanttConnection.vue

@@ -1,164 +0,0 @@
-<template>
-	<div class="gantt-connection-overlay">
-		<svg
-			class="connection-svg"
-			:style="{
-				position: 'absolute',
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				pointerEvents: 'none',
-				zIndex: 1,
-			}">
-			<defs>
-				<!-- Define arrowhead marker for connections -->
-				<path id="arrowhead" d="M 0 -7 L 20 0 L 0 7Z" stroke="black" stroke-width="1" fill="currentColor"></path>
-				<marker
-					id="arrowhead-marker"
-					markerWidth="10"
-					markerHeight="7"
-					refX="5"
-					refY="3.5"
-					orient="auto"
-					markerUnits="strokeWidth">
-					<polygon points="0 0, 10 3.5, 0 7" fill="currentColor" />
-				</marker>
-			</defs>
-
-			<!-- Invisible wider path for easier double-click interaction -->
-			<path
-				v-for="connection in visibleConnections"
-				:key="`${connection.id}-hitbox`"
-				:d="getPathData(connection)"
-				stroke="transparent"
-				:stroke-width="(connection.style?.width || 2) + 10"
-				fill="none"
-				class="connection-hitbox"
-				@dblclick="handleConnectionDelete(connection)" />
-
-			<!-- Visible connection path -->
-			<path
-				v-for="connection in visibleConnections"
-				:id="connection.id"
-				:key="connection.id"
-				:d="getPathData(connection)"
-				:stroke="connection.style?.color || '#666'"
-				:stroke-width="connection.style?.width || 2"
-				fill="none"
-				marker-mid="url(#arrowhead-marker)"
-				class="connection-path animated-path"
-				@dblclick="handleConnectionDelete(connection)" />
-		</svg>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { createTableStore } from '../stores/table'
-import type { ConnectionPath } from '../types'
-
-const { store } = defineProps<{
-	store: ReturnType<typeof createTableStore>
-}>()
-
-const emit = defineEmits<{
-	'connection:delete': [connection: ConnectionPath]
-}>()
-
-const BEZIER_CURVE_FACTOR = 0.25 // Control point offset factor for bezier curves
-const CONNECTION_HANDLE_SIZE = 16 // Width of the connection handles; this should match the handle size in the AGanttCell component
-
-const visibleConnections = computed(() => {
-	return store.connectionPaths.filter(connection => {
-		const fromBar = store.ganttBars.find(bar => bar.id === connection.from.barId)
-		const toBar = store.ganttBars.find(bar => bar.id === connection.to.barId)
-		return fromBar && toBar
-	})
-})
-
-const getPathData = (connection: ConnectionPath) => {
-	const fromHandle = store.connectionHandles.find(
-		handle => handle.barId === connection.from.barId && handle.side === connection.from.side
-	)
-	const toHandle = store.connectionHandles.find(
-		handle => handle.barId === connection.to.barId && handle.side === connection.to.side
-	)
-
-	if (!fromHandle || !toHandle) return ''
-
-	const fromX = fromHandle.position.x + CONNECTION_HANDLE_SIZE / 2 // Center of the handle
-	const fromY = fromHandle.position.y + CONNECTION_HANDLE_SIZE / 2
-	const toX = toHandle.position.x + CONNECTION_HANDLE_SIZE / 2
-	const toY = toHandle.position.y + CONNECTION_HANDLE_SIZE / 2
-
-	// Calculate control points for smooth bezier curve
-	const deltaX = Math.abs(toX - fromX)
-	const controlPointOffset = Math.max(deltaX * BEZIER_CURVE_FACTOR, 50) // Minimum offset for better curves
-	const cp1X = fromX + (connection.from.side === 'left' ? -controlPointOffset : controlPointOffset)
-	const cp2X = toX + (connection.to.side === 'left' ? -controlPointOffset : controlPointOffset)
-
-	// Use cubic bezier curve for smooth connections
-
-	//calculate the mid point of the curve
-	const m0 = { x: 0.5 * fromX + 0.5 * cp1X, y: 0.5 * fromY + 0.5 * fromY }
-	const m1 = { x: 0.5 * cp1X + 0.5 * cp2X, y: 0.5 * fromY + 0.5 * toY }
-	const m2 = { x: 0.5 * cp2X + 0.5 * toX, y: 0.5 * toY + 0.5 * toY }
-	const m3 = { x: 0.5 * m0.x + 0.5 * m1.x, y: 0.5 * m0.y + 0.5 * m1.y }
-	const m4 = { x: 0.5 * m1.x + 0.5 * m2.x, y: 0.5 * m1.y + 0.5 * m2.y }
-	const midpoint = { x: 0.5 * m3.x + 0.5 * m4.x, y: 0.5 * m3.y + 0.5 * m4.y }
-
-	// Calculate the bezier curve using two arcs
-	return `M ${fromX} ${fromY} Q ${cp1X} ${fromY}, ${midpoint.x} ${midpoint.y} Q ${cp2X} ${toY}, ${toX} ${toY}`
-}
-
-const handleConnectionDelete = (connection: ConnectionPath) => {
-	if (store.deleteConnection(connection.id)) {
-		emit('connection:delete', connection)
-	}
-}
-</script>
-
-<style scoped>
-.gantt-connection-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	z-index: 15;
-}
-
-.connection-path {
-	transition: stroke-width 0.2s ease;
-	pointer-events: auto;
-	cursor: pointer;
-	stroke-dasharray: 5px;
-	stroke: var(--sc-cell-text-color);
-}
-#arrowhead-marker polygon {
-	fill: var(--sc-cell-text-color);
-}
-.animated-path {
-	animation: animated-dash infinite 1.5s linear;
-}
-
-.connection-path:hover {
-	stroke-width: 3px;
-}
-
-.connection-hitbox {
-	pointer-events: auto;
-	cursor: pointer;
-}
-@keyframes animated-dash {
-	0% {
-		stroke-dashoffset: 0px;
-	}
-	100% {
-		stroke-dashoffset: -10px;
-	}
-}
-</style>

package/src/components/ARow.vue

@@ -1,251 +0,0 @@
-<template>
-	<tr
-		v-show="isRowVisible"
-		v-bind="$attrs"
-		ref="rowEl"
-		:tabindex="tabIndex"
-		class="atable-row"
-		:class="{ 'atable-row-clickable': isClickable }"
-		@click="onRowClick">
-		<!-- Row actions before index (default position) -->
-		<ARowActions
-			v-if="showRowActions && actionsPosition === 'before-index'"
-			:row-index="rowIndex"
-			:store="store"
-			:config="rowActionsConfig"
-			:position="actionsPosition"
-			@action="onRowAction" />
-
-		<!-- render numbered/tree view index; skip render for uncounted lists -->
-		<slot v-if="store.config.view !== 'uncounted'" name="index">
-			<td
-				v-if="store.config.view === 'list'"
-				:tabIndex="-1"
-				class="list-index"
-				:class="store.hasPinnedColumns ? 'sticky-index' : ''">
-				{{ rowIndex + 1 }}
-			</td>
-			<td
-				v-else-if="store.isTreeView"
-				:tabIndex="-1"
-				class="tree-index"
-				:class="store.hasPinnedColumns ? 'sticky-index' : ''"
-				@click="store.toggleRowExpand(rowIndex)">
-				{{ rowExpandSymbol }}
-			</td>
-			<td
-				v-else-if="store.config.view === 'list-expansion'"
-				:tabIndex="-1"
-				class="expansion-index"
-				:class="store.hasPinnedColumns ? 'sticky-index' : ''"
-				@click="store.toggleRowExpand(rowIndex)">
-				{{ rowExpandSymbol }}
-			</td>
-		</slot>
-
-		<!-- Row actions after index -->
-		<ARowActions
-			v-if="showRowActions && actionsPosition === 'after-index'"
-			:row-index="rowIndex"
-			:store="store"
-			:config="rowActionsConfig"
-			:position="actionsPosition"
-			@action="onRowAction" />
-
-		<!-- render cell content -->
-		<slot></slot>
-
-		<!-- Row actions at end -->
-		<ARowActions
-			v-if="showRowActions && actionsPosition === 'end'"
-			:row-index="rowIndex"
-			:store="store"
-			:config="rowActionsConfig"
-			:position="actionsPosition"
-			@action="onRowAction" />
-	</tr>
-
-	<!-- list-expansion content panel: a second row spanning the whole width -->
-	<tr v-if="isExpanded" :tabindex="tabIndex" class="atable-expanded-row">
-		<td :tabIndex="-1" :colspan="expandedColspan" class="atable-expanded-content">
-			<slot name="content" :row="store.rows[rowIndex]" :row-index="rowIndex" :store="store" />
-		</td>
-	</tr>
-</template>
-
-<script setup lang="ts">
-import { type KeypressHandlers, useKeyboardNav, defaultKeypressHandlers } from '@stonecrop/utilities'
-import { computed, useTemplateRef } from 'vue'
-
-import ARowActions from './ARowActions.vue'
-import { createTableStore } from '../stores/table'
-import type { RowActionsConfig, RowActionType } from '../types'
-
-const {
-	rowIndex,
-	store,
-	tabIndex = -1,
-	addNavigation = false, // default to allowing cell navigation
-} = defineProps<{
-	rowIndex: number
-	store: ReturnType<typeof createTableStore>
-	tabIndex?: number
-	addNavigation?: boolean | KeypressHandlers
-}>()
-
-const emit = defineEmits<{
-	'row:action': [type: RowActionType, rowIndex: number, event?: MouseEvent]
-	'row:click': [rowIndex: number, event: MouseEvent]
-}>()
-
-const rowRef = useTemplateRef<HTMLTableRowElement>('rowEl')
-
-const isRowVisible = computed(() => store.isRowVisible(rowIndex))
-const rowExpandSymbol = computed(() => store.getRowExpandSymbol(rowIndex))
-const isClickable = computed(() => store.config.clickable ?? false)
-
-// Row actions configuration
-const rowActionsConfig = computed((): RowActionsConfig => {
-	return store.config.rowActions || { enabled: false }
-})
-
-const showRowActions = computed(() => {
-	return rowActionsConfig.value.enabled
-})
-
-const actionsPosition = computed(() => {
-	return rowActionsConfig.value.position || 'before-index'
-})
-
-// list-expansion: this row owns an expandable content panel (a second <tr>).
-const isExpanded = computed(() => store.config.view === 'list-expansion' && Boolean(store.display[rowIndex]?.expanded))
-
-// The content panel spans every column the main row occupies: data columns + the
-// index/chevron column (absent only in uncounted) + the row-actions column when enabled.
-const expandedColspan = computed(() => {
-	const indexCol = store.config.view === 'uncounted' ? 0 : 1
-	const actionsCol = showRowActions.value ? 1 : 0
-	return store.columns.length + indexCol + actionsCol
-})
-
-const onRowAction = (actionType: RowActionType, index: number, event?: MouseEvent) => {
-	emit('row:action', actionType, index, event)
-}
-
-const onRowClick = (event: MouseEvent) => {
-	// Ignore clicks on the row actions cell or an expand/collapse chevron (tree or list-expansion),
-	// so toggling a chevron never doubles as a row-click navigation.
-	const target = event.target as HTMLElement
-	if (target.closest('.atable-row-actions') || target.closest('.tree-index') || target.closest('.expansion-index'))
-		return
-	emit('row:click', rowIndex, event)
-}
-
-// A list-expansion row always binds Ctrl+G to toggle its own panel while opt-in
-// cell navigation stays gated on `addNavigation` (default off), so other view
-// types are unchanged.
-const isListExpansion = store.config.view === 'list-expansion'
-
-if (addNavigation || isListExpansion) {
-	let handlers: KeypressHandlers = {}
-
-	if (addNavigation === true) {
-		handlers = { ...defaultKeypressHandlers }
-	} else if (typeof addNavigation === 'object') {
-		handlers = { ...defaultKeypressHandlers, ...addNavigation }
-	}
-
-	if (isListExpansion && !handlers['keydown.control.g']) {
-		handlers['keydown.control.g'] = (event: KeyboardEvent) => {
-			event.stopPropagation()
-			event.preventDefault()
-			store.toggleRowExpand(rowIndex)
-		}
-	}
-
-	useKeyboardNav([
-		{
-			selectors: rowRef,
-			handlers: handlers,
-		},
-	])
-}
-</script>
-
-<style>
-.atable-row {
-	background-color: white;
-}
-
-.atable-row-clickable {
-	cursor: pointer;
-}
-
-.atable-row-clickable:hover > td {
-	background-color: var(--sc-row-hover-color);
-}
-
-.atable-row:last-child > td {
-	border-bottom: 1px solid var(--sc-row-border-color);
-}
-
-.atable-row > td:first-child {
-	border-left: 4px solid var(--sc-row-border-color);
-}
-
-.atable-row > td:last-child {
-	border-right: 1px solid var(--sc-row-border-color);
-}
-
-.list-index {
-	color: var(--sc-header-text-color);
-	font-weight: bold;
-	padding-left: var(--sc-atable-row-padding);
-	padding-right: 0.5em;
-	text-align: left;
-	user-select: none;
-	/* width: 7ch; */
-	border-top: 1px solid var(--sc-row-border-color);
-	text-overflow: ellipsis;
-	overflow: hidden;
-	box-sizing: border-box;
-	padding-top: var(--sc-atable-row-padding);
-	padding-bottom: var(--sc-atable-row-padding);
-}
-
-.tree-index,
-.expansion-index {
-	color: var(--sc-header-text-color);
-	font-weight: bold;
-	text-align: center;
-	user-select: none;
-	width: 2ch;
-	box-sizing: border-box;
-	cursor: pointer;
-	padding-top: var(--sc-atable-row-padding);
-	padding-bottom: var(--sc-atable-row-padding);
-}
-
-.atable-expanded-row {
-	border-left: 2px solid var(--sc-row-border-color);
-}
-
-.atable-expanded-content {
-	border-top: 1px solid var(--sc-row-border-color);
-	padding: 1.5rem;
-}
-/* sticky cells in modified rows should be a solid color to properly hide non-sticky cells */
-.atable-row:has(td.cell-modified) > td.sticky-column,
-.atable-row:has(td.cell-modified) > th.sticky-column,
-.atable-row:has(td.cell-modified) > td.sticky-index,
-.atable-row:has(td.cell-modified) > th.sticky-index {
-	background: var(--sc-cell-changed-color);
-}
-</style>
-<style scoped>
-.atable-row.changed-row-gradient:has(td.cell-modified) {
-	--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);
-	--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);
-	background: linear-gradient(90deg, var(--cell-color-start), var(--cell-color-end));
-}
-</style>