@stonecrop/atable 0.8.0 → 0.8.2

package/src/icons/stonecrop-ui-icon-insert-above.svg

@@ -1,15 +1,15 @@
 <?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 70.6 61.51">
-  <rect y="43.84" width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
-  <rect y="22.17" width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 70.6 61.5">
+  <path d="M68.6,45.8v13.7H2v-13.7h66.6M70.6,43.8H0v17.7h70.6v-17.7h0Z"/>
+  <path d="M68.6,24.2v13.7H2v-13.7h66.6M70.6,22.2H0v17.7h70.6v-17.7h0Z"/>
   <g>
-    <polygon points="70.6 2.5 68.63 2.5 68.63 2 68.14 2 68.14 0 70.6 0 70.6 2.5" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M65.28,2h-2.86V0h2.86v2ZM59.57,2h-2.86V0h2.86v2ZM53.86,2h-2.86V0h2.86v2ZM48.15,2h-2.86V0h2.86v2ZM42.44,2h-2.86V0h2.86v2ZM36.73,2h-2.86V0h2.86v2ZM31.02,2h-2.86V0h2.86v2ZM25.31,2h-2.86V0h2.86v2ZM19.6,2h-2.86V0h2.86v2ZM13.89,2h-2.86V0h2.86v2ZM8.18,2h-2.86V0h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
-    <polygon points="1.97 2.5 0 2.5 0 0 2.47 0 2.47 2 1.97 2 1.97 2.5" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M1.97,13.43H0v-2.73h1.97v2.73ZM1.97,7.97H0v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
-    <polygon points="2.47 18.67 0 18.67 0 16.17 1.97 16.17 1.97 16.67 2.47 16.67 2.47 18.67" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M65.28,18.67h-2.86v-2h2.86v2ZM59.57,18.67h-2.86v-2h2.86v2ZM53.86,18.67h-2.86v-2h2.86v2ZM48.15,18.67h-2.86v-2h2.86v2ZM42.44,18.67h-2.86v-2h2.86v2ZM36.73,18.67h-2.86v-2h2.86v2ZM31.02,18.67h-2.86v-2h2.86v2ZM25.31,18.67h-2.86v-2h2.86v2ZM19.6,18.67h-2.86v-2h2.86v2ZM13.89,18.67h-2.86v-2h2.86v2ZM8.18,18.67h-2.86v-2h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
-    <polygon points="70.6 18.67 68.14 18.67 68.14 16.67 68.63 16.67 68.63 16.17 70.6 16.17 70.6 18.67" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M70.6,13.43h-1.97v-2.73h1.97v2.73ZM70.6,7.97h-1.97v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="70.6 2.5 68.6 2.5 68.6 2 68.1 2 68.1 0 70.6 0 70.6 2.5"/>
+    <path d="M65.3,2h-2.9V0h2.9v2ZM59.6,2h-2.9V0h2.9v2ZM53.9,2h-2.9V0h2.9v2ZM48.2,2h-2.9V0h2.9v2ZM42.4,2h-2.9V0h2.9v2ZM36.7,2h-2.9V0h2.9v2ZM31,2h-2.9V0h2.9v2ZM25.3,2h-2.9V0h2.9v2ZM19.6,2h-2.9V0h2.9v2ZM13.9,2h-2.9V0h2.9v2ZM8.2,2h-2.9V0h2.9v2Z"/>
+    <polygon points="2 2.5 0 2.5 0 0 2.5 0 2.5 2 2 2 2 2.5"/>
+    <path d="M2,13.4H0v-2.7h2v2.7ZM2,8H0v-2.7h2v2.7Z"/>
+    <polygon points="2.5 18.7 0 18.7 0 16.2 2 16.2 2 16.7 2.5 16.7 2.5 18.7"/>
+    <path d="M65.3,18.7h-2.9v-2h2.9v2ZM59.6,18.7h-2.9v-2h2.9v2ZM53.9,18.7h-2.9v-2h2.9v2ZM48.2,18.7h-2.9v-2h2.9v2ZM42.4,18.7h-2.9v-2h2.9v2ZM36.7,18.7h-2.9v-2h2.9v2ZM31,18.7h-2.9v-2h2.9v2ZM25.3,18.7h-2.9v-2h2.9v2ZM19.6,18.7h-2.9v-2h2.9v2ZM13.9,18.7h-2.9v-2h2.9v2ZM8.2,18.7h-2.9v-2h2.9v2Z"/>
+    <polygon points="70.6 18.7 68.1 18.7 68.1 16.7 68.6 16.7 68.6 16.2 70.6 16.2 70.6 18.7"/>
+    <path d="M70.6,13.4h-2v-2.7h2v2.7ZM70.6,8h-2v-2.7h2v2.7Z"/>
   </g>
 </svg>

package/src/icons/stonecrop-ui-icon-insert-below.svg

@@ -1,15 +1,15 @@
 <?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 70.6 61.51">
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 70.6 61.5">
   <g>
-    <polygon points="70.6 45.34 68.63 45.34 68.63 44.84 68.14 44.84 68.14 42.84 70.6 42.84 70.6 45.34" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M65.28,44.84h-2.86v-2h2.86v2ZM59.57,44.84h-2.86v-2h2.86v2ZM53.86,44.84h-2.86v-2h2.86v2ZM48.15,44.84h-2.86v-2h2.86v2ZM42.44,44.84h-2.86v-2h2.86v2ZM36.73,44.84h-2.86v-2h2.86v2ZM31.02,44.84h-2.86v-2h2.86v2ZM25.31,44.84h-2.86v-2h2.86v2ZM19.6,44.84h-2.86v-2h2.86v2ZM13.89,44.84h-2.86v-2h2.86v2ZM8.18,44.84h-2.86v-2h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
-    <polygon points="1.97 45.34 0 45.34 0 42.84 2.47 42.84 2.47 44.84 1.97 44.84 1.97 45.34" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M1.97,56.27H0v-2.73h1.97v2.73ZM1.97,50.81H0v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
-    <polygon points="2.47 61.51 0 61.51 0 59.01 1.97 59.01 1.97 59.51 2.47 59.51 2.47 61.51" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M65.28,61.51h-2.86v-2h2.86v2ZM59.57,61.51h-2.86v-2h2.86v2ZM53.86,61.51h-2.86v-2h2.86v2ZM48.15,61.51h-2.86v-2h2.86v2ZM42.44,61.51h-2.86v-2h2.86v2ZM36.73,61.51h-2.86v-2h2.86v2ZM31.02,61.51h-2.86v-2h2.86v2ZM25.31,61.51h-2.86v-2h2.86v2ZM19.6,61.51h-2.86v-2h2.86v2ZM13.89,61.51h-2.86v-2h2.86v2ZM8.18,61.51h-2.86v-2h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
-    <polygon points="70.6 61.51 68.14 61.51 68.14 59.51 68.63 59.51 68.63 59.01 70.6 59.01 70.6 61.51" style="fill: #000; stroke-width: 0px;"/>
-    <path d="M70.6,56.27h-1.97v-2.73h1.97v2.73ZM70.6,50.81h-1.97v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="70.6 45.3 68.6 45.3 68.6 44.8 68.1 44.8 68.1 42.8 70.6 42.8 70.6 45.3"/>
+    <path d="M65.3,44.8h-2.9v-2h2.9v2ZM59.6,44.8h-2.9v-2h2.9v2ZM53.9,44.8h-2.9v-2h2.9v2ZM48.2,44.8h-2.9v-2h2.9v2ZM42.4,44.8h-2.9v-2h2.9v2ZM36.7,44.8h-2.9v-2h2.9v2ZM31,44.8h-2.9v-2h2.9v2ZM25.3,44.8h-2.9v-2h2.9v2ZM19.6,44.8h-2.9v-2h2.9v2ZM13.9,44.8h-2.9v-2h2.9v2ZM8.2,44.8h-2.9v-2h2.9v2Z"/>
+    <polygon points="2 45.3 0 45.3 0 42.8 2.5 42.8 2.5 44.8 2 44.8 2 45.3"/>
+    <path d="M2,56.3H0v-2.7h2v2.7ZM2,50.8H0v-2.7h2v2.7Z"/>
+    <polygon points="2.5 61.5 0 61.5 0 59 2 59 2 59.5 2.5 59.5 2.5 61.5"/>
+    <path d="M65.3,61.5h-2.9v-2h2.9v2ZM59.6,61.5h-2.9v-2h2.9v2ZM53.9,61.5h-2.9v-2h2.9v2ZM48.2,61.5h-2.9v-2h2.9v2ZM42.4,61.5h-2.9v-2h2.9v2ZM36.7,61.5h-2.9v-2h2.9v2ZM31,61.5h-2.9v-2h2.9v2ZM25.3,61.5h-2.9v-2h2.9v2ZM19.6,61.5h-2.9v-2h2.9v2ZM13.9,61.5h-2.9v-2h2.9v2ZM8.2,61.5h-2.9v-2h2.9v2Z"/>
+    <polygon points="70.6 61.5 68.1 61.5 68.1 59.5 68.6 59.5 68.6 59 70.6 59 70.6 61.5"/>
+    <path d="M70.6,56.3h-2v-2.7h2v2.7ZM70.6,50.8h-2v-2.7h2v2.7Z"/>
   </g>
-  <rect y="21.67" width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
-  <rect width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
+  <path d="M68.6,23.7v13.7H2v-13.7h66.6M70.6,21.7H0v17.7h70.6v-17.7h0Z"/>
+  <path d="M68.6,2v13.7H2V2h66.6M70.6,0H0v17.7h70.6V0h0Z"/>
 </svg>

package/src/index.ts

@@ -4,6 +4,7 @@ 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 ARowActions from './components/ARowActions.vue'
 import ATable from './components/ATable.vue'
 import ATableHeader from './components/ATableHeader.vue'
 import ATableLoading from './components/ATableLoading.vue'
@@ -13,6 +14,9 @@ export { createTableStore } from './stores/table'
 export type { FilterState, FilterStateRecord } from './stores/table'
 export type * from './types'
 
+// Icon exports
+export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, MoveIcon, actionIcons } from './icons'
+
 /**
  * Install all ATable components
  * @param app - Vue app instance
@@ -23,6 +27,7 @@ function install(app: App /* options */) {
 	app.component('AExpansionRow', AExpansionRow)
 	app.component('AGanttCell', AGanttCell)
 	app.component('ARow', ARow)
+	app.component('ARowActions', ARowActions)
 	app.component('ATable', ATable)
 	app.component('ATableHeader', ATableHeader)
 	app.component('ATableLoading', ATableLoading)
@@ -35,6 +40,7 @@ export {
 	AExpansionRow,
 	AGanttCell,
 	ARow,
+	ARowActions,
 	ATable,
 	ATableHeader,
 	ATableLoading,

package/src/stores/table.ts

@@ -677,6 +677,203 @@ export const createTableStore = (initData: {
 			delete filterState.value[colIndex]
 		}
 
+		// Row action methods
+
+		/**
+		 * Add a new row to the table.
+		 * @param rowData - Optional partial row data to initialize the new row with
+		 * @param position - Where to insert the row: 'start', 'end', or a specific index
+		 * @returns The index of the newly added row
+		 */
+		const addRow = (rowData?: Partial<TableRow>, position: 'start' | 'end' | number = 'end'): number => {
+			// Create a new row with default empty values for each column
+			const newRow: TableRow = {}
+			for (const column of columns.value) {
+				newRow[column.name] = ''
+			}
+
+			// Merge in any provided row data
+			if (rowData) {
+				Object.assign(newRow, rowData)
+			}
+
+			let insertIndex: number
+			if (position === 'start') {
+				insertIndex = 0
+				rows.value.unshift(newRow)
+			} else if (position === 'end') {
+				insertIndex = rows.value.length
+				rows.value.push(newRow)
+			} else {
+				insertIndex = Math.max(0, Math.min(position, rows.value.length))
+				rows.value.splice(insertIndex, 0, newRow)
+			}
+
+			return insertIndex
+		}
+
+		/**
+		 * Delete a row from the table.
+		 * @param rowIndex - The index of the row to delete
+		 * @returns The deleted row, or null if the index was invalid
+		 */
+		const deleteRow = (rowIndex: number): TableRow | null => {
+			if (rowIndex < 0 || rowIndex >= rows.value.length) {
+				return null
+			}
+
+			const [deletedRow] = rows.value.splice(rowIndex, 1)
+
+			// Clean up row modifications tracking for the deleted row
+			delete rowModifications.value[rowIndex]
+			delete rowExpandStates.value[rowIndex]
+
+			// Shift modification/expand state indices for rows after the deleted one
+			const newModifications: Record<number, boolean> = {}
+			const newExpandStates: Record<number, { childrenOpen?: boolean; expanded?: boolean }> = {}
+
+			for (const [key, value] of Object.entries(rowModifications.value)) {
+				const idx = parseInt(key)
+				if (idx > rowIndex) {
+					newModifications[idx - 1] = value
+				} else {
+					newModifications[idx] = value
+				}
+			}
+
+			for (const [key, value] of Object.entries(rowExpandStates.value)) {
+				const idx = parseInt(key)
+				if (idx > rowIndex) {
+					newExpandStates[idx - 1] = value
+				} else {
+					newExpandStates[idx] = value
+				}
+			}
+
+			rowModifications.value = newModifications
+			rowExpandStates.value = newExpandStates
+
+			return deletedRow
+		}
+
+		/**
+		 * Duplicate a row in the table.
+		 * @param rowIndex - The index of the row to duplicate
+		 * @returns The index of the new duplicated row, or -1 if the index was invalid
+		 */
+		const duplicateRow = (rowIndex: number): number => {
+			if (rowIndex < 0 || rowIndex >= rows.value.length) {
+				return -1
+			}
+
+			// Deep clone the row data
+			const originalRow = rows.value[rowIndex]
+			const duplicatedRow: TableRow = JSON.parse(JSON.stringify(originalRow))
+
+			// Insert the duplicated row after the original
+			const newIndex = rowIndex + 1
+			rows.value.splice(newIndex, 0, duplicatedRow)
+
+			return newIndex
+		}
+
+		/**
+		 * Insert a new row above the specified row.
+		 * @param rowIndex - The index of the row to insert above
+		 * @param rowData - Optional partial row data to initialize the new row with
+		 * @returns The index of the newly inserted row
+		 */
+		const insertRowAbove = (rowIndex: number, rowData?: Partial<TableRow>): number => {
+			const insertIndex = Math.max(0, rowIndex)
+			return addRow(rowData, insertIndex)
+		}
+
+		/**
+		 * Insert a new row below the specified row.
+		 * @param rowIndex - The index of the row to insert below
+		 * @param rowData - Optional partial row data to initialize the new row with
+		 * @returns The index of the newly inserted row
+		 */
+		const insertRowBelow = (rowIndex: number, rowData?: Partial<TableRow>): number => {
+			const insertIndex = Math.min(rowIndex + 1, rows.value.length)
+			return addRow(rowData, insertIndex)
+		}
+
+		/**
+		 * Move a row from one position to another.
+		 * @param fromIndex - The current index of the row to move
+		 * @param toIndex - The target index to move the row to
+		 * @returns true if the move was successful, false otherwise
+		 */
+		const moveRow = (fromIndex: number, toIndex: number): boolean => {
+			// Validate indices
+			if (
+				fromIndex < 0 ||
+				fromIndex >= rows.value.length ||
+				toIndex < 0 ||
+				toIndex >= rows.value.length ||
+				fromIndex === toIndex
+			) {
+				return false
+			}
+
+			// Remove the row from its current position
+			const [movedRow] = rows.value.splice(fromIndex, 1)
+
+			// Insert at the new position
+			rows.value.splice(toIndex, 0, movedRow)
+
+			// Update row modification and expand state indices
+			const newModifications: Record<number, boolean> = {}
+			const newExpandStates: Record<number, { childrenOpen?: boolean; expanded?: boolean }> = {}
+
+			for (const [key, value] of Object.entries(rowModifications.value)) {
+				const idx = parseInt(key)
+				let newIdx = idx
+
+				if (idx === fromIndex) {
+					// The moved row
+					newIdx = toIndex
+				} else if (fromIndex < toIndex) {
+					// Moving down: rows between fromIndex and toIndex shift up
+					if (idx > fromIndex && idx <= toIndex) {
+						newIdx = idx - 1
+					}
+				} else {
+					// Moving up: rows between toIndex and fromIndex shift down
+					if (idx >= toIndex && idx < fromIndex) {
+						newIdx = idx + 1
+					}
+				}
+
+				newModifications[newIdx] = value
+			}
+
+			for (const [key, value] of Object.entries(rowExpandStates.value)) {
+				const idx = parseInt(key)
+				let newIdx = idx
+
+				if (idx === fromIndex) {
+					newIdx = toIndex
+				} else if (fromIndex < toIndex) {
+					if (idx > fromIndex && idx <= toIndex) {
+						newIdx = idx - 1
+					}
+				} else {
+					if (idx >= toIndex && idx < fromIndex) {
+						newIdx = idx + 1
+					}
+				}
+
+				newExpandStates[newIdx] = value
+			}
+
+			rowModifications.value = newModifications
+			rowExpandStates.value = newExpandStates
+
+			return true
+		}
+
 		return {
 			// state
 			columns,
@@ -702,10 +899,13 @@ export const createTableStore = (initData: {
 			zeroColumn,
 
 			// actions
+			addRow,
 			clearFilter,
 			closeModal,
 			createConnection,
 			deleteConnection,
+			deleteRow,
+			duplicateRow,
 			getCellData,
 			getCellDisplayValue,
 			getConnectionsForBar,
@@ -714,8 +914,11 @@ export const createTableStore = (initData: {
 			getHeaderCellStyle,
 			getIndent,
 			getRowExpandSymbol,
+			insertRowAbove,
+			insertRowBelow,
 			isRowGantt,
 			isRowVisible,
+			moveRow,
 			registerConnectionHandle,
 			registerGanttBar,
 			resizeColumn,

package/src/types/index.ts

@@ -209,6 +209,92 @@ export interface CellContext {
 	table: { [key: string]: any }
 }
 
+/**
+ * Row action type identifiers.
+ * @public
+ */
+export type RowActionType = 'add' | 'delete' | 'duplicate' | 'insertAbove' | 'insertBelow' | 'move'
+
+/**
+ * Options for configuring individual row actions.
+ * @public
+ */
+export interface RowActionOptions {
+	/**
+	 * Whether the action is enabled.
+	 *
+	 * @defaultValue true
+	 */
+	enabled?: boolean
+
+	/**
+	 * Custom label for the action (used in dropdown mode).
+	 */
+	label?: string
+
+	/**
+	 * Custom icon override (raw SVG string).
+	 */
+	icon?: string
+
+	/**
+	 * Custom handler for the action. Return false to prevent the default behavior.
+	 *
+	 * @param rowIndex - The index of the row the action is being performed on
+	 * @param store - The table store instance
+	 * @returns void or false to prevent default behavior
+	 */
+	handler?: (rowIndex: number, store: ReturnType<typeof createTableStore>) => void | boolean
+}
+
+/**
+ * Configuration for row-level actions (add, delete, duplicate, etc.).
+ * @public
+ */
+export interface RowActionsConfig {
+	/**
+	 * Whether row actions are enabled.
+	 *
+	 * @defaultValue false
+	 */
+	enabled: boolean
+
+	/**
+	 * Position of the row actions column relative to the index column.
+	 *
+	 * @defaultValue 'before-index'
+	 */
+	position?: 'before-index' | 'after-index' | 'end'
+
+	/**
+	 * Pixel width threshold at which to switch from icons to dropdown mode.
+	 * Set to 0 to always use icons, or a large number to always use dropdown.
+	 *
+	 * @defaultValue 150
+	 */
+	dropdownThreshold?: number
+
+	/**
+	 * Force dropdown mode regardless of available width.
+	 *
+	 * @defaultValue false
+	 */
+	forceDropdown?: boolean
+
+	/**
+	 * Configuration for individual actions. Set to true to enable with defaults,
+	 * false to disable, or provide RowActionOptions for custom configuration.
+	 */
+	actions?: {
+		add?: boolean | RowActionOptions
+		delete?: boolean | RowActionOptions
+		duplicate?: boolean | RowActionOptions
+		insertAbove?: boolean | RowActionOptions
+		insertBelow?: boolean | RowActionOptions
+		move?: boolean | RowActionOptions
+	}
+}
+
 /**
  * Base table configuration properties shared across all view types.
  * @public
@@ -220,6 +306,11 @@ export interface BaseTableConfig {
 	 * @defaultValue false
 	 */
 	fullWidth?: boolean
+
+	/**
+	 * Configuration for row-level actions (add, delete, duplicate, etc.).
+	 */
+	rowActions?: RowActionsConfig
 }
 
 /**
@@ -726,3 +817,50 @@ export type ConnectionEvent = {
 	type: 'create' | 'delete'
 	connection: ConnectionPath
 }
+
+/**
+ * Event payload for row:add event.
+ * @public
+ */
+export interface RowAddEvent {
+	rowIndex: number
+	row: TableRow
+}
+
+/**
+ * Event payload for row:delete event.
+ * @public
+ */
+export interface RowDeleteEvent {
+	rowIndex: number
+	row: TableRow
+}
+
+/**
+ * Event payload for row:duplicate event.
+ * @public
+ */
+export interface RowDuplicateEvent {
+	sourceIndex: number
+	newIndex: number
+	row: TableRow
+}
+
+/**
+ * Event payload for row:insert-above and row:insert-below events.
+ * @public
+ */
+export interface RowInsertEvent {
+	targetIndex: number
+	newIndex: number
+	row: TableRow
+}
+
+/**
+ * Event payload for row:move event.
+ * @public
+ */
+export interface RowMoveEvent {
+	fromIndex: number
+	toIndex: number
+}