@bagelink/vue 1.10.1 → 1.10.3

package/src/components/Spreadsheet/SpreadsheetCell.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { ColumnConfig } from './types'
+import { CheckInput } from '@bagelink/vue'
+import { formatCellValue } from './utils'
+
+interface Props {
+	col: ColumnConfig
+	row: { [key: string]: any }
+	rowIndex: number
+	globalColIndex: number
+	editing: boolean
+	editable: boolean
+	wrapText?: boolean
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+	(e: 'updateCell', rowIndex: number, key: string, value: string | boolean): void
+	(e: 'stopEditing', cancelled: boolean): void
+	(e: 'setInputRef', el: any, key: string): void
+}>()
+</script>
+
+<template>
+	<template v-if="editing">
+		<input
+			:ref="el => $emit('setInputRef', el, `cell-${rowIndex}-${globalColIndex}`)"
+			:value="row[col.key]"
+			type="text"
+			class="spreadsheet-input"
+			@input="(e) => $emit('updateCell', rowIndex, col.key, (e.target as HTMLInputElement).value)"
+			@blur="$emit('stopEditing', false)"
+			@keydown.enter.prevent="$emit('stopEditing', false)"
+			@keydown.esc.prevent="$emit('stopEditing', true)"
+			@mousedown.stop
+		>
+		<span class="spreadsheet-cell spreadsheetCellPlaceHolder">{{ formatCellValue(row[col.key], col.format) }}</span>
+	</template>
+	<template v-else-if="col.format === 'image'">
+		<div class="h40px w-100p flex align-items-center justify-content-center overflow-hidden">
+			<img class="w-100p h-100p contain radius-05" :src="row[col.key]" :alt="col.label || col.key">
+		</div>
+	</template>
+	<template v-else-if="col.format === 'boolean'">
+		<CheckInput
+			:modelValue="!!row[col.key]"
+			:disabled="!editable"
+			@update:modelValue="(value) => $emit('updateCell', rowIndex, col.key, !!value)"
+			@mousedown.stop
+		/>
+	</template>
+	<template v-else>
+		<span class="spreadsheet-cell">{{ formatCellValue(row[col.key], col.format) }}</span>
+	</template>
+</template>

package/src/components/Spreadsheet/SpreadsheetTable.vue

@@ -1,23 +1,7 @@
 <script lang="ts" setup>
-import { Icon, CheckInput } from '@bagelink/vue'
-
-// Define column configuration types from parent
-interface CellPosition {
-	row: number
-	col: number
-}
-
-interface ColumnConfig {
-	key: string
-	label?: string
-	locked?: boolean
-	format?: 'text' | 'number' | 'currency' | 'date' | 'percentage' | 'image' | 'boolean'
-	sortable?: boolean
-	width?: string
-	fixed?: boolean
-	hidden?: boolean
-	defaultValue?: any
-}
+import type { CellPosition, ColumnConfig } from './types'
+import { Icon } from '@bagelink/vue'
+import SpreadsheetCell from './SpreadsheetCell.vue'
 
 interface Props {
 	columns: ColumnConfig[]
@@ -32,6 +16,7 @@ interface Props {
 	editingCell: CellPosition | null
 	baseColumnIndex: number
 	wrapText?: boolean
+	emptyMessage?: string
 }
 
 const props = defineProps<Props>()
@@ -78,31 +63,31 @@ function isEditing(row: number, localColIndex: number): boolean {
 	return props.editingCell.row === row && props.editingCell.col === colIndex
 }
 
-// Format cell value based on column configuration
-function formatCellValue(value: any, format?: ColumnConfig['format']): string {
-	if (value === null || value === undefined) { return '' }
+// Returns a stable key representing this row's selection state.
+// Used by v-memo so rows outside the selection don't re-render on selection changes.
+function rowSelectionKey(rowIndex: number): string {
+	if (!props.selectionStart || !props.selectionEnd) { return 'none' }
+	const startRow = Math.min(props.selectionStart.row, props.selectionEnd.row)
+	const endRow = Math.max(props.selectionStart.row, props.selectionEnd.row)
+	if (rowIndex < startRow || rowIndex > endRow) { return 'none' }
+	const startCol = Math.min(props.selectionStart.col, props.selectionEnd.col)
+	const endCol = Math.max(props.selectionStart.col, props.selectionEnd.col)
+	return `${startCol}-${endCol}`
+}
 
-	switch (format) {
-		case 'image':
-			return String(value) // Return raw value for images
-		case 'boolean':
-			return '' // Return empty string since we're using CheckInput component
-		case 'number':
-			return Number(value).toLocaleString()
-		case 'currency':
-			return Number(value).toLocaleString(undefined, {
-				style: 'currency',
-				currency: 'USD'
-			})
-		case 'date':
-			return value ? new Date(value).toLocaleDateString() : ''
-		case 'percentage':
-			return Number(value).toLocaleString(undefined, {
-				style: 'percent',
-				minimumFractionDigits: 2
-			})
-		default:
-			return String(value)
+function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<string, boolean> {
+	if (!props.selectionStart || !props.selectionEnd) { return {} }
+	const startRow = Math.min(props.selectionStart.row, props.selectionEnd.row)
+	const endRow = Math.max(props.selectionStart.row, props.selectionEnd.row)
+	const startCol = Math.min(props.selectionStart.col, props.selectionEnd.col)
+	const endCol = Math.max(props.selectionStart.col, props.selectionEnd.col)
+	const colIndex = getActualColumnIndex(localColIndex)
+	if (rowIndex < startRow || rowIndex > endRow || colIndex < startCol || colIndex > endCol) { return {} }
+	return {
+		'sel-top': rowIndex === startRow,
+		'sel-bottom': rowIndex === endRow,
+		'sel-left': colIndex === startCol,
+		'sel-right': colIndex === endCol,
 	}
 }
 </script>
@@ -136,7 +121,11 @@ function formatCellValue(value: any, format?: ColumnConfig['format']): string {
 			</tr>
 		</thead>
 		<tbody>
-			<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+			<tr
+				v-for="(row, rowIndex) in rows"
+				:key="rowIndex"
+				v-memo="[rowSelectionKey(rowIndex), editingCell?.row === rowIndex, row, wrapText]"
+			>
 				<td
 					v-if="showRowNumbers"
 					class="row-number txt-center hover user-select-none pointer txt12 regular"
@@ -151,6 +140,7 @@ function formatCellValue(value: any, format?: ColumnConfig['format']): string {
 						'selected': isCellSelected(rowIndex, colIndex),
 						'locked': !isCellEditable(col.key),
 						'wrap-text': wrapText,
+						...selectionEdgeClasses(rowIndex, colIndex),
 					}"
 					:style="{ width: columnWidths.get(col.key) ? `${columnWidths.get(col.key)}px` : col.width }"
 					:tabindex="col.hidden ? undefined : 0"
@@ -160,38 +150,26 @@ function formatCellValue(value: any, format?: ColumnConfig['format']): string {
 					@dblclick="$emit('cellEditStart', rowIndex, getActualColumnIndex(colIndex))"
 					@keydown="$emit('cellKeyDown', $event, rowIndex, getActualColumnIndex(colIndex))"
 				>
-					<template v-if="isEditing(rowIndex, colIndex)">
-						<input
-							:ref="el => $emit('setInputRef', el, `cell-${rowIndex}-${getActualColumnIndex(colIndex)}`)"
-							:value="row[col.key]"
-							type="text"
-							class="spreadsheet-input"
-							@input="(e) => $emit('updateCell', rowIndex, col.key, (e.target as HTMLInputElement).value)"
-							@blur="$emit('stopEditing', false)"
-							@keydown.enter.prevent="$emit('stopEditing', false)"
-							@keydown.esc.prevent="$emit('stopEditing', true)"
-							@mousedown.stop
-						>
-						<span class="spreadsheet-cell spreadsheetCellPlaceHolder">{{ formatCellValue(row[col.key], col.format) }}</span>
-					</template>
-					<template v-else>
-						<template v-if="col.format === 'image'">
-							<div class="h40px w-100p flex align-items-center justify-content-center overflow-hidden">
-								<img class="w-100p h-100p contain radius-05" :src="row[col.key]" :alt="col.label || col.key">
-							</div>
-						</template>
-						<template v-else-if="col.format === 'boolean'">
-							<CheckInput
-								:modelValue="!!row[col.key]"
-								:disabled="!isCellEditable(col.key)"
-								@update:modelValue="(value) => $emit('updateCell', rowIndex, col.key, !!value)"
-								@mousedown.stop
-							/>
-						</template>
-						<template v-else>
-							<span class="spreadsheet-cell">{{ formatCellValue(row[col.key], col.format) }}</span>
-						</template>
-					</template>
+					<SpreadsheetCell
+						:col="col"
+						:row="row"
+						:row-index="rowIndex"
+						:global-col-index="getActualColumnIndex(colIndex)"
+						:editing="isEditing(rowIndex, colIndex)"
+						:editable="isCellEditable(col.key)"
+						:wrap-text="wrapText"
+						@updateCell="(ri, key, val) => $emit('updateCell', ri, key, val)"
+						@stopEditing="(cancelled) => $emit('stopEditing', cancelled)"
+						@setInputRef="(el, key) => $emit('setInputRef', el, key)"
+					/>
+				</td>
+			</tr>
+			<tr v-if="!isFixed && rows.length === 0">
+				<td
+					:colspan="columns.length + (showRowNumbers ? 1 : 0)"
+					class="empty-state"
+				>
+					{{ emptyMessage ?? 'No results' }}
 				</td>
 			</tr>
 		</tbody>
@@ -202,7 +180,8 @@ function formatCellValue(value: any, format?: ColumnConfig['format']): string {
 .row-number{
 	position: sticky;
 	inset-inline-start: 0;
-	background: var(--bgl-gray-80);
+	background: var(--input-bg);
+	color: var(--txt-muted, #888);
 	z-index: 1;
 }
 .row-number:before{
@@ -256,6 +235,20 @@ th .bgl_icon-font{
 td.selected {
 	background: var(--bgl-primary-light);
 }
+td.sel-top    { box-shadow: inset 0 2px 0 var(--bgl-primary); }
+td.sel-bottom { box-shadow: inset 0 -2px 0 var(--bgl-primary); }
+td.sel-left   { box-shadow: inset 2px 0 0 var(--bgl-primary); }
+td.sel-right  { box-shadow: inset -2px 0 0 var(--bgl-primary); }
+td.sel-top.sel-bottom    { box-shadow: inset 0 2px 0 var(--bgl-primary), inset 0 -2px 0 var(--bgl-primary); }
+td.sel-top.sel-left      { box-shadow: inset 2px 2px 0 var(--bgl-primary); }
+td.sel-top.sel-right     { box-shadow: inset -2px 2px 0 var(--bgl-primary); }
+td.sel-bottom.sel-left   { box-shadow: inset 2px -2px 0 var(--bgl-primary); }
+td.sel-bottom.sel-right  { box-shadow: inset -2px -2px 0 var(--bgl-primary); }
+td.sel-top.sel-left.sel-right      { box-shadow: inset 2px 2px 0 var(--bgl-primary), inset -2px 2px 0 var(--bgl-primary); }
+td.sel-bottom.sel-left.sel-right   { box-shadow: inset 2px -2px 0 var(--bgl-primary), inset -2px -2px 0 var(--bgl-primary); }
+td.sel-top.sel-bottom.sel-left     { box-shadow: inset 2px 2px 0 var(--bgl-primary), inset 2px -2px 0 var(--bgl-primary); }
+td.sel-top.sel-bottom.sel-right    { box-shadow: inset -2px 2px 0 var(--bgl-primary), inset -2px -2px 0 var(--bgl-primary); }
+td.sel-top.sel-bottom.sel-left.sel-right { box-shadow: inset 2px 2px 0 var(--bgl-primary), inset -2px -2px 0 var(--bgl-primary), inset -2px 2px 0 var(--bgl-primary), inset 2px -2px 0 var(--bgl-primary); }
 td.locked {
 	background: var(--bgl-gray-light);
 	cursor: default;
@@ -355,4 +348,13 @@ td:has(:checked){
 .resize-handle:hover {
 	background: var(--bgl-primary);
 }
+
+.empty-state {
+	text-align: center;
+	padding: 2rem 1rem;
+	color: var(--txt-muted, #888);
+	font-size: 0.875rem;
+	background: var(--bgl-white);
+	border: 1px solid var(--border-color);
+}
 </style>

package/src/components/Spreadsheet/composables/useSpreadsheetClipboard.ts

@@ -0,0 +1,71 @@
+import type { Ref, ComputedRef } from 'vue'
+import type { CellPosition, ColumnConfig, Row, SpreadsheetChange } from '../types'
+import { formatCellValue, parseValueForFormat } from '../utils'
+
+export function useSpreadsheetClipboard(
+	localRows: Ref<Row[]>,
+	columns: ComputedRef<ColumnConfig[]>,
+	selectionStart: Ref<CellPosition | null>,
+	selectionEnd: Ref<CellPosition | null>,
+	saveState: (type: SpreadsheetChange['type']) => void,
+	isCellEditable: (key: string) => boolean,
+	createEmptyRow: () => Row,
+	emitUpdate: () => void,
+) {
+	async function copySelection() {
+		if (!selectionStart.value || !selectionEnd.value) { return }
+
+		const startRow = Math.min(selectionStart.value.row, selectionEnd.value.row)
+		const endRow = Math.max(selectionStart.value.row, selectionEnd.value.row)
+		const startCol = Math.min(selectionStart.value.col, selectionEnd.value.col)
+		const endCol = Math.max(selectionStart.value.col, selectionEnd.value.col)
+
+		const tsv = Array.from({ length: endRow - startRow + 1 }, (_, ri) => {
+			return Array.from({ length: endCol - startCol + 1 }, (_, ci) => {
+				const col = columns.value[startCol + ci]
+				return formatCellValue(localRows.value[startRow + ri][col.key], col.format)
+			}).join('\t')
+		}).join('\n')
+
+		try {
+			await navigator.clipboard.writeText(tsv)
+		} catch (err) {
+			console.error('Failed to copy:', err)
+		}
+	}
+
+	async function pasteSelection() {
+		if (!selectionStart.value) { return }
+
+		try {
+			const text = await navigator.clipboard.readText()
+			const pasteRows = text.split('\n').map(r => r.split('\t'))
+
+			saveState('paste')
+
+			const startRow = selectionStart.value.row
+			const startCol = selectionStart.value.col
+
+			const neededRows = startRow + pasteRows.length - localRows.value.length
+			for (let i = 0; i < neededRows; i++) {
+				localRows.value.push(createEmptyRow())
+			}
+
+			pasteRows.forEach((rowData, ri) => {
+				rowData.forEach((cellValue, ci) => {
+					const targetCol = startCol + ci
+					if (targetCol >= columns.value.length) { return }
+					const col = columns.value[targetCol]
+					if (!isCellEditable(col.key)) { return }
+					localRows.value[startRow + ri][col.key] = parseValueForFormat(cellValue, col.format)
+				})
+			})
+
+			emitUpdate()
+		} catch (err) {
+			console.error('Failed to paste:', err)
+		}
+	}
+
+	return { copySelection, pasteSelection }
+}

package/src/components/Spreadsheet/composables/useSpreadsheetColumns.ts

@@ -0,0 +1,110 @@
+import type { Ref } from 'vue'
+import type { ColumnConfig, Row } from '../types'
+import { computed, ref, watch, onUnmounted } from 'vue'
+
+export function useSpreadsheetColumns(
+	localRows: Ref<Row[]>,
+	getColumnConfig: () => ColumnConfig[] | undefined,
+) {
+	const visibleColumns = ref<string[]>([])
+	const columnWidths = ref<Map<string, number>>(new Map())
+
+	const isResizing = ref(false)
+	const resizingColumn = ref<string | null>(null)
+	const startX = ref(0)
+	const startWidth = ref(0)
+
+	const columns = computed<ColumnConfig[]>(() => {
+		const dataKeys = localRows.value.length
+			? new Set(localRows.value.flatMap(row => Object.keys(row)))
+			: new Set<string>()
+
+		const config = getColumnConfig()
+		const configMap = new Map((config || []).map(c => [c.key, c]))
+		const allKeys = new Set([...dataKeys, ...(config?.map(c => c.key) || [])])
+
+		return Array.from(allKeys).map((key) => {
+			const col = configMap.get(key)
+			return {
+				key,
+				label: col?.label ?? key,
+				locked: col?.locked ?? false,
+				sortable: col?.sortable ?? true,
+				format: col?.format ?? 'text',
+				width: col?.width,
+				fixed: col?.fixed ?? false,
+				hidden: col?.hidden ?? false,
+				defaultValue: col?.defaultValue,
+			}
+		})
+	})
+
+	const fixedColumns = computed(() => columns.value.filter(col => col.fixed && !col.hidden && visibleColumns.value.includes(col.key))
+	)
+
+	const scrollableColumns = computed(() => columns.value.filter(col => !col.fixed && !col.hidden && visibleColumns.value.includes(col.key))
+	)
+
+	const columnOptions = computed(() => columns.value.filter(col => !col.hidden))
+
+	watch(columns, (newColumns) => {
+		if (newColumns.length > 0 && visibleColumns.value.length === 0) {
+			visibleColumns.value = newColumns.filter(col => !col.hidden).map(col => col.key)
+		}
+	})
+
+	function isCellEditable(columnKey: string): boolean {
+		return !(columns.value.find(col => col.key === columnKey)?.locked ?? false)
+	}
+
+	function createEmptyRow(): Row {
+		const row: Row = {}
+		columns.value.forEach((col) => {
+			row[col.key] = col.defaultValue !== undefined
+				? col.defaultValue
+				: col.format === 'boolean' ? false : ''
+		})
+		return row
+	}
+
+	function handleResizeMove(e: MouseEvent) {
+		if (!isResizing.value || !resizingColumn.value) { return }
+		e.preventDefault()
+		const newWidth = Math.max(80, startWidth.value + (e.pageX - startX.value))
+		columnWidths.value.set(resizingColumn.value, newWidth)
+	}
+
+	function handleResizeEnd() {
+		isResizing.value = false
+		resizingColumn.value = null
+		document.removeEventListener('mousemove', handleResizeMove)
+		document.removeEventListener('mouseup', handleResizeEnd)
+	}
+
+	function handleResizeStart(e: MouseEvent, columnKey: string) {
+		isResizing.value = true
+		resizingColumn.value = columnKey
+		startX.value = e.pageX
+		const th = (e.target as HTMLElement).closest('th')
+		startWidth.value = columnWidths.value.get(columnKey) ?? (th?.getBoundingClientRect().width ?? 0)
+		document.addEventListener('mousemove', handleResizeMove)
+		document.addEventListener('mouseup', handleResizeEnd)
+	}
+
+	onUnmounted(() => {
+		document.removeEventListener('mousemove', handleResizeMove)
+		document.removeEventListener('mouseup', handleResizeEnd)
+	})
+
+	return {
+		columns,
+		fixedColumns,
+		scrollableColumns,
+		columnOptions,
+		visibleColumns,
+		columnWidths,
+		isCellEditable,
+		createEmptyRow,
+		handleResizeStart,
+	}
+}

package/src/components/Spreadsheet/composables/useSpreadsheetSelection.ts

@@ -0,0 +1,43 @@
+import type { ComputedRef } from 'vue'
+import type { CellPosition, ColumnConfig } from '../types'
+import { ref, onUnmounted } from 'vue'
+
+export function useSpreadsheetSelection(columns: ComputedRef<ColumnConfig[]>) {
+	const isSelecting = ref(false)
+	const selectionStart = ref<CellPosition | null>(null)
+	const selectionEnd = ref<CellPosition | null>(null)
+
+	function handleMouseDown(row: number, col: number) {
+		selectionStart.value = { row, col }
+		selectionEnd.value = { row, col }
+		isSelecting.value = true
+	}
+
+	function handleMouseOver(row: number, col: number) {
+		if (isSelecting.value) {
+			selectionEnd.value = { row, col }
+		}
+	}
+
+	function handleMouseUp() {
+		isSelecting.value = false
+	}
+
+	function selectEntireRow(rowIndex: number) {
+		selectionStart.value = { row: rowIndex, col: 0 }
+		selectionEnd.value = { row: rowIndex, col: columns.value.length - 1 }
+	}
+
+	window.addEventListener('mouseup', handleMouseUp)
+	onUnmounted(() => { window.removeEventListener('mouseup', handleMouseUp) })
+
+	return {
+		isSelecting,
+		selectionStart,
+		selectionEnd,
+		handleMouseDown,
+		handleMouseOver,
+		handleMouseUp,
+		selectEntireRow,
+	}
+}

package/src/components/Spreadsheet/composables/useSpreadsheetSort.ts

@@ -0,0 +1,42 @@
+import type { Ref, ComputedRef } from 'vue'
+import type { ColumnConfig, Row } from '../types'
+import { ref, nextTick } from 'vue'
+
+export function useSpreadsheetSort(
+	localRows: Ref<Row[]>,
+	columns: ComputedRef<ColumnConfig[]>,
+	visibleColumns: Ref<string[]>,
+	emitUpdate: () => void,
+) {
+	const sortColumn = ref<string | null>(null)
+	const sortDirection = ref<'asc' | 'desc'>('asc')
+
+	function sortByColumn(columnKey: string) {
+		const column = columns.value.find(col => col.key === columnKey)
+		if (!column?.sortable) { return }
+
+		if (sortColumn.value === columnKey) {
+			sortDirection.value = sortDirection.value === 'desc' ? 'asc' : 'desc'
+		} else {
+			sortColumn.value = columnKey
+			sortDirection.value = 'desc'
+		}
+
+		const sorted = [...localRows.value].sort((a, b) => {
+			const aVal = a[columnKey]
+			const bVal = b[columnKey]
+			if (aVal === bVal) { return 0 }
+			if (aVal == null) { return 1 }
+			if (bVal == null) { return -1 }
+			const modifier = sortDirection.value === 'desc' ? 1 : -1
+			return aVal < bVal ? -modifier : modifier
+		})
+
+		const savedVisible = [...visibleColumns.value]
+		localRows.value = sorted
+		emitUpdate()
+		nextTick(() => { visibleColumns.value = savedVisible })
+	}
+
+	return { sortColumn, sortDirection, sortByColumn }
+}

package/src/components/Spreadsheet/composables/useSpreadsheetUndo.ts

@@ -0,0 +1,55 @@
+import type { Ref } from 'vue'
+import type { CellPosition, Row, SpreadsheetChange } from '../types'
+import { ref, computed } from 'vue'
+
+export function useSpreadsheetUndo(
+	localRows: Ref<Row[]>,
+	selectionStart: Ref<CellPosition | null>,
+	selectionEnd: Ref<CellPosition | null>,
+	emitUpdate: () => void,
+) {
+	const undoStack = ref<SpreadsheetChange[]>([])
+	const redoStack = ref<SpreadsheetChange[]>([])
+
+	const canUndo = computed(() => undoStack.value.length > 0)
+	const canRedo = computed(() => redoStack.value.length > 0)
+
+	function snapshot(): SpreadsheetChange['data'] {
+		return {
+			rows: JSON.parse(JSON.stringify(localRows.value)),
+			selection: selectionStart.value && selectionEnd.value
+				? { start: { ...selectionStart.value }, end: { ...selectionEnd.value } }
+				: undefined,
+		}
+	}
+
+	function restoreSnapshot(change: SpreadsheetChange) {
+		localRows.value = JSON.parse(JSON.stringify(change.data.rows))
+		if (change.data.selection) {
+			selectionStart.value = { ...change.data.selection.start }
+			selectionEnd.value = { ...change.data.selection.end }
+		}
+		emitUpdate()
+	}
+
+	function saveState(type: SpreadsheetChange['type']) {
+		undoStack.value.push({ type, data: snapshot() })
+		redoStack.value = []
+	}
+
+	function undo() {
+		const change = undoStack.value.pop()
+		if (!change) { return }
+		redoStack.value.push({ type: change.type, data: snapshot() })
+		restoreSnapshot(change)
+	}
+
+	function redo() {
+		const change = redoStack.value.pop()
+		if (!change) { return }
+		undoStack.value.push({ type: change.type, data: snapshot() })
+		restoreSnapshot(change)
+	}
+
+	return { undoStack, redoStack, canUndo, canRedo, saveState, undo, redo }
+}

package/src/components/Spreadsheet/types.ts

@@ -0,0 +1,35 @@
+export type ColumnFormat = 'text' | 'number' | 'currency' | 'date' | 'percentage' | 'image' | 'boolean'
+
+export interface Row { [key: string]: any }
+
+export interface ColumnConfig {
+	key: string
+	label?: string
+	locked?: boolean
+	format?: ColumnFormat
+	sortable?: boolean
+	width?: string
+	fixed?: boolean
+	hidden?: boolean
+	defaultValue?: any
+}
+
+export interface CellPosition {
+	row: number
+	col: number
+}
+
+export interface SpreadsheetChange {
+	type: 'cell' | 'row' | 'paste'
+	data: {
+		rows: Row[]
+		selection?: { start: CellPosition, end: CellPosition }
+	}
+}
+
+export interface SpreadsheetProps {
+	modelValue: Row[]
+	columnConfig?: ColumnConfig[]
+	label?: string
+	allowAddRow?: boolean
+}