@bagelink/vue 1.0.16 → 1.0.18

package/src/components/Spreadsheet/SpreadsheetTable.vue

@@ -0,0 +1,317 @@
+<script lang="ts" setup>
+import { Icon, CheckInput } from '@bagelink/vue'
+import { computed } from '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
+}
+
+interface Props {
+	columns: ColumnConfig[]
+	rows: Array<Record<string, any>>
+	isFixed: boolean
+	showRowNumbers: boolean
+	columnWidths: Map<string, number>
+	sortColumn: string | null
+	sortDirection: 'asc' | 'desc'
+	selectionStart: CellPosition | null
+	selectionEnd: CellPosition | null
+	editingCell: CellPosition | null
+	baseColumnIndex: number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+	(e: 'sortColumn', key: string): void
+	(e: 'resizeStart', event: MouseEvent, key: string): void
+	(e: 'selectRow', rowIndex: number): void
+	(e: 'cellMouseDown', rowIndex: number, colIndex: number): void
+	(e: 'cellMouseOver', rowIndex: number, colIndex: number): void
+	(e: 'cellEditStart', rowIndex: number, colIndex: number): void
+	(e: 'cellKeyDown', event: KeyboardEvent, rowIndex: number, colIndex: number): void
+	(e: 'updateCell', rowIndex: number, key: string, value: string | boolean): void
+	(e: 'stopEditing', cancelled: boolean): void
+	(e: 'setInputRef', el: any, key: string): void
+}>()
+
+// Calculate the actual column index including the base index
+const getActualColumnIndex = (localIndex: number) => props.baseColumnIndex + localIndex
+
+// Determines if a cell is selected
+function isCellSelected(row: number, localColIndex: number): boolean {
+	if (!props.selectionStart || !props.selectionEnd) return false
+
+	const colIndex = getActualColumnIndex(localColIndex)
+	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)
+
+	return row >= startRow && row <= endRow && colIndex >= startCol && colIndex <= endCol
+}
+
+// Check if a cell is editable
+function isCellEditable(columnKey: string): boolean {
+	const column = props.columns.find(col => col.key === columnKey)
+	return !(column?.locked ?? false)
+}
+
+// Check if a cell is currently being edited
+function isEditing(row: number, localColIndex: number): boolean {
+	if (!props.editingCell) return false
+	const colIndex = getActualColumnIndex(localColIndex)
+	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 ''
+
+	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)
+	}
+}
+</script>
+
+<template>
+	<table :class="{ 'fixed-columns': isFixed, 'w-100p': !isFixed }">
+		<thead>
+			<tr>
+				<th v-if="showRowNumbers" class="row-number-header bg-white" />
+				<th
+					v-for="col in columns"
+					:key="col.key"
+					:style="{ width: columnWidths.get(col.key) ? `${columnWidths.get(col.key)}px` : col.width }"
+				>
+					<div class="th-content">
+						<span @click="col.sortable && $emit('sortColumn', col.key)">
+							{{ col.label || col.key }}
+						</span>
+						<Icon
+							v-if="sortColumn === col.key"
+							class="line-height-0 transition-400"
+							name="keyboard_arrow_down"
+							:class="{ 'rotate-180': sortDirection === 'desc' }"
+						/>
+						<div
+							class="resize-handle"
+							@mousedown.stop="$emit('resizeStart', $event, col.key)"
+						/>
+					</div>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+				<td
+					v-if="showRowNumbers"
+					class="row-number txt-center hover user-select-none pointer txt12 regular"
+					@click="$emit('selectRow', rowIndex)"
+				>
+					{{ rowIndex + 1 }}
+				</td>
+				<td
+					v-for="(col, colIndex) in columns"
+					:key="col.key"
+					:class="{
+						selected: isCellSelected(rowIndex, colIndex),
+						locked: !isCellEditable(col.key),
+					}"
+					:style="{ width: columnWidths.get(col.key) ? `${columnWidths.get(col.key)}px` : col.width }"
+					:tabindex="col.hidden ? undefined : 0"
+					@mousedown="$emit('cellMouseDown', rowIndex, getActualColumnIndex(colIndex))"
+					@mouseover="$emit('cellMouseOver', rowIndex, getActualColumnIndex(colIndex))"
+					@focusin="$emit('cellMouseOver', rowIndex, getActualColumnIndex(colIndex))"
+					@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>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<style scoped>
+.fixed-columns {
+	border-right: 2px solid var(--border-color);
+}
+table {
+	border-collapse: collapse;
+}
+th, td {
+	border: 1px solid var(--border-color);
+	padding: 0.1rem 0.5rem;
+	min-width: 80px;
+	background: var(--bgl-white);
+	user-select: none;
+}
+th {
+	background: var(--input-bg);
+	white-space: nowrap;
+	position: relative;
+	padding: 0.25rem 0.5rem;
+	font-weight: 500;
+	text-align: start;
+}
+th .bgl_icon-font{
+	vertical-align: middle;
+}
+td.selected {
+	background: var(--bgl-primary-light);
+}
+td.locked {
+	background: var(--bgl-gray-light);
+	cursor: default;
+}
+td.locked.selected {
+	background: var(--bgl-primary-light);
+}
+td {
+	height: 40px;
+	vertical-align: middle;
+}
+td:has(img){
+	padding: 0;
+}
+td span{
+	display: block;
+    display: -webkit-box;
+    max-width: 100%;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+	word-break: break-all;
+}
+input {
+	width: 100%;
+	border: none;
+	background: transparent;
+	padding: 0;
+	margin: 0;
+	min-height: 0;
+	min-width: 0;
+}
+input:focus {
+	outline: 2px solid var(--bgl-primary);
+	outline-offset: 6px;
+}
+th.sortable {
+	cursor: pointer;
+}
+.row-number-header, .row-number {
+	width: fit-content;
+	min-width: fit-content !important;
+	padding: 0.1rem 0.7rem !important;
+}
+td .bgl-checkbox{
+	margin: 0;
+	text-align: center;
+	justify-content: center;
+}
+td:has(.bgl-checkbox){
+	text-align: center;
+	background: var(--input-bg);
+}
+td:has(:checked){
+	background: var(--bgl-primary-light);
+}
+
+.spreadsheetCellPlaceHolder{
+	height: 0px;
+	overflow: hidden;
+	opacity: 0;
+	pointer-events: none;
+	user-select: none;
+}
+
+.th-content {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.resize-handle {
+	position: absolute;
+	right: -8px;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	z-index: 100;
+	cursor: col-resize;
+	background: transparent;
+	transition: background 0.2s;
+}
+
+.resize-handle:hover {
+	background: var(--bgl-primary);
+}
+</style>