@stonecrop/atable 0.8.1 → 0.8.3

package/src/components/ARowActions.vue

@@ -0,0 +1,376 @@
+<template>
+	<td
+		ref="actionsCell"
+		class="atable-row-actions"
+		:class="{ 'sticky-column': position === 'before-index', 'dropdown-active': dropdownOpen }">
+		<!-- Dropdown mode -->
+		<div v-if="showDropdown" class="row-actions-dropdown">
+			<button
+				ref="toggleButton"
+				type="button"
+				class="row-actions-toggle"
+				:aria-expanded="dropdownOpen"
+				aria-haspopup="true"
+				@click.stop="toggleDropdown">
+				<span class="dropdown-icon">⋮</span>
+			</button>
+			<div
+				v-show="dropdownOpen"
+				class="row-actions-menu"
+				:class="{ 'menu-flipped': dropdownFlipped }"
+				:style="menuStyle"
+				role="menu">
+				<button
+					v-for="action in enabledActions"
+					:key="action.type"
+					type="button"
+					class="row-action-menu-item"
+					role="menuitem"
+					@click.stop="executeAction(action.type)">
+					<span class="action-icon" v-html="action.icon" />
+					<span class="action-label">{{ action.label }}</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Icon mode -->
+		<div v-else class="row-actions-icons">
+			<button
+				v-for="action in enabledActions"
+				:key="action.type"
+				type="button"
+				class="row-action-btn"
+				:title="action.label"
+				:aria-label="action.label"
+				@click.stop="executeAction(action.type)">
+				<span class="action-icon" v-html="action.icon" />
+			</button>
+		</div>
+	</td>
+</template>
+
+<script setup lang="ts">
+import { useResizeObserver, onClickOutside } from '@vueuse/core'
+import { computed, ref, useTemplateRef } from 'vue'
+
+import { actionIcons } from '../icons'
+import { createTableStore } from '../stores/table'
+import type { RowActionsConfig, RowActionType } from '../types'
+
+const props = defineProps<{
+	rowIndex: number
+	store: ReturnType<typeof createTableStore>
+	config: RowActionsConfig
+	position?: 'before-index' | 'after-index' | 'end'
+}>()
+
+const emit = defineEmits<{
+	action: [type: RowActionType, rowIndex: number]
+}>()
+
+const actionsCellRef = useTemplateRef<HTMLTableCellElement>('actionsCell')
+const toggleButtonRef = useTemplateRef<HTMLButtonElement>('toggleButton')
+const cellWidth = ref(0)
+const dropdownOpen = ref(false)
+const dropdownFlipped = ref(false)
+const menuPosition = ref({ top: 0, left: 0 })
+
+// Default labels for actions
+const defaultLabels: Record<RowActionType, string> = {
+	add: 'Add Row',
+	delete: 'Delete Row',
+	duplicate: 'Duplicate Row',
+	insertAbove: 'Insert Above',
+	insertBelow: 'Insert Below',
+	move: 'Move Row',
+}
+
+// Determine which actions are enabled
+const enabledActions = computed(() => {
+	const actions: Array<{ type: RowActionType; label: string; icon: string }> = []
+	const configActions = props.config.actions || {}
+
+	const actionTypes: RowActionType[] = ['add', 'delete', 'duplicate', 'insertAbove', 'insertBelow', 'move']
+
+	for (const type of actionTypes) {
+		const actionConfig = configActions[type]
+
+		// Skip if explicitly disabled
+		if (actionConfig === false) continue
+
+		// Skip if not configured and we're being explicit
+		if (actionConfig === undefined) continue
+
+		let enabled = true
+		let label = defaultLabels[type]
+		let icon = actionIcons[type]
+
+		if (typeof actionConfig === 'object') {
+			enabled = actionConfig.enabled !== false
+			label = actionConfig.label || label
+			icon = actionConfig.icon || icon
+		}
+
+		if (enabled) {
+			actions.push({ type, label, icon })
+		}
+	}
+
+	return actions
+})
+
+// Determine if we should show dropdown mode
+const showDropdown = computed(() => {
+	if (props.config.forceDropdown) return true
+
+	const threshold = props.config.dropdownThreshold ?? 150
+	if (threshold === 0) return false
+
+	return cellWidth.value > 0 && cellWidth.value < threshold
+})
+
+// Compute menu style for fixed positioning
+const menuStyle = computed(() => {
+	if (!dropdownOpen.value) return {}
+
+	if (dropdownFlipped.value) {
+		return {
+			position: 'fixed' as const,
+			bottom: `${window.innerHeight - menuPosition.value.top}px`,
+			left: `${menuPosition.value.left}px`,
+			top: 'auto',
+		}
+	}
+	return {
+		position: 'fixed' as const,
+		top: `${menuPosition.value.top}px`,
+		left: `${menuPosition.value.left}px`,
+	}
+})
+
+// Track cell width for responsive behavior
+useResizeObserver(actionsCellRef, entries => {
+	const entry = entries[0]
+	if (entry) {
+		cellWidth.value = entry.contentRect.width
+	}
+})
+
+// Toggle dropdown menu
+const toggleDropdown = () => {
+	if (!dropdownOpen.value) {
+		// Opening - check if we need to flip
+		checkDropdownPosition()
+	}
+	dropdownOpen.value = !dropdownOpen.value
+}
+
+// Check if dropdown should flip upward and calculate position
+const checkDropdownPosition = () => {
+	if (!toggleButtonRef.value) return
+
+	const buttonRect = toggleButtonRef.value.getBoundingClientRect()
+	const viewportHeight = window.innerHeight
+	const estimatedMenuHeight = enabledActions.value.length * 40 + 16 // ~40px per item + padding
+
+	// Check if menu would extend beyond viewport bottom
+	const spaceBelow = viewportHeight - buttonRect.bottom
+	const spaceAbove = buttonRect.top
+
+	// Flip if not enough space below but enough space above
+	dropdownFlipped.value = spaceBelow < estimatedMenuHeight && spaceAbove > estimatedMenuHeight
+
+	// Calculate fixed position
+	if (dropdownFlipped.value) {
+		menuPosition.value = {
+			top: buttonRect.top,
+			left: buttonRect.left,
+		}
+	} else {
+		menuPosition.value = {
+			top: buttonRect.bottom,
+			left: buttonRect.left,
+		}
+	}
+}
+
+onClickOutside(actionsCellRef, () => {
+	dropdownOpen.value = false
+})
+
+// Execute an action
+const executeAction = (actionType: RowActionType) => {
+	dropdownOpen.value = false
+
+	// Check for custom handler
+	const actionConfig = props.config.actions?.[actionType]
+	if (typeof actionConfig === 'object' && actionConfig.handler) {
+		const result = actionConfig.handler(props.rowIndex, props.store)
+		if (result === false) {
+			// Handler returned false, don't proceed with default behavior
+			return
+		}
+	}
+
+	// Emit the action event for parent to handle
+	emit('action', actionType, props.rowIndex)
+}
+</script>
+
+<style>
+@import url('@stonecrop/themes/default.css');
+
+.atable-row-actions {
+	width: 2rem;
+	min-width: 2rem;
+	padding: 0 0.25rem;
+	vertical-align: middle;
+	white-space: nowrap;
+	border-top: 1px solid var(--sc-row-border-color);
+	background: white;
+	user-select: none;
+	position: relative;
+}
+
+.atable-row-actions.dropdown-active {
+	z-index: 500;
+}
+
+.row-actions-icons {
+	display: flex;
+	gap: 0.25rem;
+	align-items: center;
+	justify-content: center;
+}
+
+.row-action-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0.125rem;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	border-radius: 0.25rem;
+	transition: background-color 0.15s ease;
+}
+
+.row-action-btn:hover {
+	background-color: var(--sc-gray-10, #e5e5e5);
+}
+
+.row-action-btn:focus {
+	outline: 2px solid var(--sc-focus-cell-outline, #3b82f6);
+	outline-offset: 1px;
+}
+
+.row-action-btn .action-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1rem;
+	height: 1rem;
+}
+
+.row-action-btn .action-icon :deep(svg) {
+	width: 100%;
+	height: 100%;
+}
+
+/* Dropdown mode styles */
+.row-actions-dropdown {
+	position: relative;
+	display: inline-block;
+}
+.row-actions-dropdown:has(button:focus) {
+	outline: 2px solid var(--sc-focus-cell-outline);
+	outline-offset: -2px;
+}
+
+.row-actions-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+	font-weight: bold;
+	transition: background-color 0.15s ease;
+}
+
+.row-actions-toggle:hover {
+	background-color: var(--sc-gray-10, #e5e5e5);
+}
+
+.row-actions-toggle:focus {
+	/* outline: 2px solid var(--sc-focus-cell-outline, #3b82f6);
+	outline-offset: 1px; */
+}
+
+.dropdown-icon {
+	line-height: 1;
+}
+
+.row-actions-menu {
+	position: fixed;
+	z-index: 9999;
+	min-width: 10rem;
+	padding: 0.25rem 0;
+	background: white;
+	border: 1px solid var(--sc-row-border-color);
+	border-left: 4px solid var(--sc-row-border-color);
+	border-radius: 0;
+}
+
+.row-actions-menu.menu-flipped {
+	box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.row-action-menu-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	width: 100%;
+	padding: 0.5rem 0.75rem;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	text-align: left;
+	font-size: 0.875rem;
+	transition: background-color 0.15s ease;
+}
+
+.row-action-menu-item:hover {
+	background-color: var(--sc-gray-10, #f5f5f5);
+}
+
+.row-action-menu-item:focus {
+	outline: none;
+	background-color: var(--sc-gray-10, #f5f5f5);
+}
+
+.row-action-menu-item .action-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1rem;
+	height: 1rem;
+	flex-shrink: 0;
+}
+
+.row-action-menu-item .action-icon :deep(svg) {
+	width: 100%;
+	height: 100%;
+}
+
+.row-action-menu-item .action-label {
+	flex: 1;
+}
+</style>

package/src/components/ATable.vue

@@ -18,7 +18,8 @@
 						:key="`${row.originalIndex}-${filteredIndex}`"
 						:row="row"
 						:rowIndex="row.originalIndex"
-						:store="store">
+						:store="store"
+						@row:action="handleRowAction">
 						<template v-for="(column, colIndex) in getProcessedColumnsForRow(row)" :key="column.name">
 							<component
 								:is="column.ganttComponent || 'AGanttCell'"
@@ -91,7 +92,20 @@ import ARow from './ARow.vue'
 import ATableHeader from './ATableHeader.vue'
 import ATableModal from './ATableModal.vue'
 import { createTableStore } from '../stores/table'
-import type { ConnectionEvent, ConnectionPath, GanttDragEvent, TableColumn, TableConfig, TableRow } from '../types'
+import type {
+	ConnectionEvent,
+	ConnectionPath,
+	GanttDragEvent,
+	RowActionType,
+	RowAddEvent,
+	RowDeleteEvent,
+	RowDuplicateEvent,
+	RowInsertEvent,
+	RowMoveEvent,
+	TableColumn,
+	TableConfig,
+	TableRow,
+} from '../types'
 
 const rows = defineModel<TableRow[]>('rows', { required: true })
 const columns = defineModel<TableColumn[]>('columns', { required: true })
@@ -106,6 +120,12 @@ const emit = defineEmits<{
 	'gantt:drag': [event: GanttDragEvent]
 	'connection:event': [event: ConnectionEvent]
 	'columns:update': [columns: TableColumn[]]
+	'row:add': [event: RowAddEvent]
+	'row:delete': [event: RowDeleteEvent]
+	'row:duplicate': [event: RowDuplicateEvent]
+	'row:insert-above': [event: RowInsertEvent]
+	'row:insert-below': [event: RowInsertEvent]
+	'row:move': [event: RowMoveEvent]
 }>()
 
 const tableRef = useTemplateRef<HTMLTableElement>('table')
@@ -267,12 +287,73 @@ const handleConnectionDelete = (connection: ConnectionPath) => {
 	emit('connection:event', { type: 'delete', connection })
 }
 
+/**
+ * Handle row action events from ARow components.
+ * Performs the default action and emits the appropriate event.
+ */
+const handleRowAction = (actionType: RowActionType, rowIndex: number) => {
+	switch (actionType) {
+		case 'add': {
+			// Add a new row after the current row
+			const newIndex = store.addRow({}, rowIndex + 1)
+			const newRow = store.rows[newIndex]
+			rows.value = [...store.rows]
+			emit('row:add', { rowIndex: newIndex, row: newRow })
+			break
+		}
+		case 'delete': {
+			const deletedRow = store.deleteRow(rowIndex)
+			if (deletedRow) {
+				rows.value = [...store.rows]
+				emit('row:delete', { rowIndex, row: deletedRow })
+			}
+			break
+		}
+		case 'duplicate': {
+			const newIndex = store.duplicateRow(rowIndex)
+			if (newIndex >= 0) {
+				const newRow = store.rows[newIndex]
+				rows.value = [...store.rows]
+				emit('row:duplicate', { sourceIndex: rowIndex, newIndex, row: newRow })
+			}
+			break
+		}
+		case 'insertAbove': {
+			const newIndex = store.insertRowAbove(rowIndex)
+			const newRow = store.rows[newIndex]
+			rows.value = [...store.rows]
+			emit('row:insert-above', { targetIndex: rowIndex, newIndex, row: newRow })
+			break
+		}
+		case 'insertBelow': {
+			const newIndex = store.insertRowBelow(rowIndex)
+			const newRow = store.rows[newIndex]
+			rows.value = [...store.rows]
+			emit('row:insert-below', { targetIndex: rowIndex, newIndex, row: newRow })
+			break
+		}
+		case 'move': {
+			// Move action requires a target index - for now, emit an event
+			// The consumer should handle showing a UI for selecting the target
+			emit('row:move', { fromIndex: rowIndex, toIndex: -1 })
+			break
+		}
+	}
+}
+
 defineExpose({
 	store,
 	createConnection: store.createConnection,
 	deleteConnection: store.deleteConnection,
 	getConnectionsForBar: store.getConnectionsForBar,
 	getHandlesForBar: store.getHandlesForBar,
+	// Row action methods
+	addRow: store.addRow,
+	deleteRow: store.deleteRow,
+	duplicateRow: store.duplicateRow,
+	insertRowAbove: store.insertRowAbove,
+	insertRowBelow: store.insertRowBelow,
+	moveRow: store.moveRow,
 })
 </script>
 

package/src/components/ATableHeader.vue

@@ -1,45 +1,63 @@
 <template>
-	<thead v-if="columns.length">
+	<thead v-if="props.columns.length">
 		<!-- Header row -->
 		<tr class="atable-header-row" tabindex="-1">
+			<!-- Row actions header cell (before-index position) -->
 			<th
-				v-if="store.zeroColumn"
+				v-if="showRowActionsHeader && rowActionsPosition === 'before-index'"
+				class="row-actions-header"
+				:class="{ 'sticky-column': rowActionsPosition === 'before-index' }" />
+			<th
+				v-if="props.store.zeroColumn"
 				id="header-index"
 				:class="[
-					store.hasPinnedColumns ? 'sticky-index' : '',
-					store.isTreeView ? 'tree-index' : '',
-					store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
+					props.store.hasPinnedColumns ? 'sticky-index' : '',
+					props.store.isTreeView ? 'tree-index' : '',
+					props.store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
 				]"
 				class="list-index" />
+			<!-- Row actions header cell (after-index position) -->
+			<th v-if="showRowActionsHeader && rowActionsPosition === 'after-index'" class="row-actions-header" />
 			<th
-				v-for="(column, colKey) in columns"
+				v-for="(column, colKey) in props.columns"
 				:key="column.name"
 				v-resize-observer="onResize"
 				:data-colindex="colKey"
 				tabindex="-1"
-				:style="store.getHeaderCellStyle(column)"
+				:style="props.store.getHeaderCellStyle(column)"
 				:class="`${column.pinned ? 'sticky-column' : ''} ${column.sortable === false ? '' : 'cursor-pointer'}`"
 				@click="column.sortable !== false ? handleSort(colKey) : undefined">
 				<slot>{{ column.label || String.fromCharCode(colKey + 97).toUpperCase() }}</slot>
 			</th>
+			<!-- Row actions header cell (end position) -->
+			<th v-if="showRowActionsHeader && rowActionsPosition === 'end'" class="row-actions-header" />
 		</tr>
 		<!-- Filters row -->
 		<tr v-if="filterableColumns.length > 0" class="atable-filters-row">
+			<!-- Row actions filter cell (before-index position) -->
+			<th
+				v-if="showRowActionsHeader && rowActionsPosition === 'before-index'"
+				class="row-actions-header"
+				:class="{ 'sticky-column': rowActionsPosition === 'before-index' }" />
 			<th
-				v-if="store.zeroColumn"
+				v-if="props.store.zeroColumn"
 				:class="[
-					store.hasPinnedColumns ? 'sticky-index' : '',
-					store.isTreeView ? 'tree-index' : '',
-					store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
+					props.store.hasPinnedColumns ? 'sticky-index' : '',
+					props.store.isTreeView ? 'tree-index' : '',
+					props.store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
 				]"
 				class="list-index" />
+			<!-- Row actions filter cell (after-index position) -->
+			<th v-if="showRowActionsHeader && rowActionsPosition === 'after-index'" class="row-actions-header" />
 			<th
-				v-for="(column, colKey) in columns"
+				v-for="(column, colKey) in props.columns"
 				:key="`filter-${column.name}`"
 				:class="`${column.pinned ? 'sticky-column' : ''}`"
-				:style="store.getHeaderCellStyle(column)">
-				<ATableColumnFilter v-if="column.filterable" :column="column" :col-index="colKey" :store="store" />
+				:style="props.store.getHeaderCellStyle(column)">
+				<ATableColumnFilter v-if="column.filterable" :column="column" :col-index="colKey" :store="props.store" />
 			</th>
+			<!-- Row actions filter cell (end position) -->
+			<th v-if="showRowActionsHeader && rowActionsPosition === 'end'" class="row-actions-header" />
 		</tr>
 	</thead>
 </template>
@@ -51,14 +69,18 @@ import ATableColumnFilter from './ATableColumnFilter.vue'
 import { createTableStore } from '../stores/table'
 import type { TableColumn } from '../types'
 
-const { columns, store } = defineProps<{
+const props = defineProps<{
 	columns: TableColumn[]
 	store: ReturnType<typeof createTableStore>
 }>()
 
-const filterableColumns = computed(() => columns.filter(column => column.filterable))
+const filterableColumns = computed(() => props.columns.filter(column => column.filterable))
+
+// Row actions header support
+const showRowActionsHeader = computed(() => props.store.config.value?.rowActions?.enabled ?? false)
+const rowActionsPosition = computed(() => props.store.config.value?.rowActions?.position ?? 'before-index')
 
-const handleSort = (colIndex: number) => store.sortByColumn(colIndex)
+const handleSort = (colIndex: number) => props.store.sortByColumn(colIndex)
 
 const onResize = (entries: ReadonlyArray<ResizeObserverEntry>) => {
 	for (const entry of entries) {
@@ -66,10 +88,10 @@ const onResize = (entries: ReadonlyArray<ResizeObserverEntry>) => {
 		const observedCell = entry.borderBoxSize[0]
 		const observedWidth = observedCell.inlineSize
 		const colIndex = Number((entry.target as HTMLElement).dataset.colindex)
-		const currentWidth = store.columns[colIndex]?.width
+		const currentWidth = props.store.columns[colIndex]?.width
 
 		if (typeof currentWidth === 'number' && currentWidth !== observedWidth) {
-			store.resizeColumn(colIndex, observedWidth)
+			props.store.resizeColumn(colIndex, observedWidth)
 		}
 	}
 }
@@ -81,6 +103,7 @@ const onResize = (entries: ReadonlyArray<ResizeObserverEntry>) => {
 .atable-header-row th {
 	padding-left: 0.5ch !important;
 	font-weight: 700;
+	min-width: 3ch;
 	padding-top: var(--sc-atable-row-padding);
 	padding-bottom: var(--sc-atable-row-padding);
 	box-sizing: border-box;
@@ -90,6 +113,7 @@ const onResize = (entries: ReadonlyArray<ResizeObserverEntry>) => {
 #header-index {
 	padding-left: var(--sc-atable-row-padding);
 	box-sizing: border-box;
+	border-top: none;
 }
 .tree-index {
 	padding-right: 0;
@@ -110,4 +134,10 @@ th {
 	padding: 0.25rem 0.5ch;
 	vertical-align: top;
 }
+
+.row-actions-header {
+	width: 2rem;
+	min-width: 2rem;
+	padding: 0 0.25rem;
+}
 </style>

package/src/icons/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Icon exports for ATable row actions.
+ * Icons are exported as raw SVG strings for flexibility in rendering.
+ * @packageDocumentation
+ */
+
+// @ts-expect-error Vite raw import
+import AddIcon from './stonecrop-ui-icon-add.svg?raw'
+// @ts-expect-error Vite raw import
+import DeleteIcon from './stonecrop-ui-icon-delete.svg?raw'
+// @ts-expect-error Vite raw import
+import DuplicateIcon from './stonecrop-ui-icon-duplicate.svg?raw'
+// @ts-expect-error Vite raw import
+import InsertAboveIcon from './stonecrop-ui-icon-insert-above.svg?raw'
+// @ts-expect-error Vite raw import
+import InsertBelowIcon from './stonecrop-ui-icon-insert-below.svg?raw'
+// @ts-expect-error Vite raw import
+import MoveIcon from './stonecrop-ui-icon-move.svg?raw'
+
+export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, MoveIcon }
+
+/**
+ * Map of action types to their default icons.
+ *
+ * @public
+ */
+export const actionIcons: Record<string, string> = {
+	add: AddIcon as string,
+	delete: DeleteIcon as string,
+	duplicate: DuplicateIcon as string,
+	insertAbove: InsertAboveIcon as string,
+	insertBelow: InsertBelowIcon as string,
+	move: MoveIcon as string,
+}

package/src/icons/stonecrop-ui-icon-add.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path d="M32,64C14.35,64,0,49.65,0,32S14.35,0,32,0s32,14.35,32,32-14.35,32-32,32ZM32,4c-15.44,0-28,12.56-28,28s12.56,28,28,28,28-12.56,28-28S47.44,4,32,4Z" style="fill: #000; stroke-width: 0px;"/>
+  <polygon points="34 18 30 18 30 30 18 30 18 34 30 34 30 46 34 46 34 34 46 34 46 30 34 30 34 18" style="fill: #000; stroke-width: 0px;"/>
+</svg>