@bagelink/vue 1.0.16 → 1.0.22

package/src/components/Spreadsheet/Index.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
-import { Btn, Icon, CheckInput, TextInput } from '@bagelink/vue'
-import { computed, ref, watch, nextTick } from 'vue'
+import { Btn, CheckInput, TextInput } from '@bagelink/vue'
+import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
+import Dropdown from '../Dropdown.vue'
+import SpreadsheetTable from './SpreadsheetTable.vue'
 
 // Define column configuration types
 type ColumnFormat = 'text' | 'number' | 'currency' | 'date' | 'percentage' | 'image' | 'boolean'
@@ -91,6 +93,9 @@ function emitUpdate() {
 	emit('update:modelValue', localRows.value.map(row => unflattenObject({ ...row })))
 }
 
+// After other ref declarations but before the columns computed property
+const visibleColumns = ref<string[]>([])
+
 // Sort state
 const sortColumn = ref<string | null>(null)
 const sortDirection = ref<'asc' | 'desc'>('asc')
@@ -178,7 +183,7 @@ function isCellEditable(columnKey: string): boolean {
 	return !(column?.locked ?? false)
 }
 
-// Sort rows by column
+// Update the sortByColumn function to preserve column visibility
 function sortByColumn(columnKey: string) {
 	const column = columns.value.find(col => col.key === columnKey)
 	if (!column?.sortable) return
@@ -202,8 +207,16 @@ function sortByColumn(columnKey: string) {
 		return aVal < bVal ? -modifier : modifier
 	})
 
+	// Save the current visibleColumns state
+	const currentVisibleColumns = [...visibleColumns.value]
+
 	localRows.value = sorted
 	emitUpdate()
+
+	// Restore the visibleColumns state after the update
+	nextTick(() => {
+		visibleColumns.value = currentVisibleColumns
+	})
 }
 
 // Variables to handle cell selection
@@ -232,15 +245,15 @@ function setInputRef(el: any, key: string) {
 	}
 }
 
-// Determines if the given cell is within the currently selected range
-function isCellSelected(row: number, col: number): boolean {
-	if (!selectionStart.value || !selectionEnd.value) return false
-	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)
-	return row >= startRow && row <= endRow && col >= startCol && col <= endCol
-}
+// // Determines if the given cell is within the currently selected range
+// function isCellSelected(row: number, col: number): boolean {
+// 	if (!selectionStart.value || !selectionEnd.value) return false
+// 	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)
+// 	return row >= startRow && row <= endRow && col >= startCol && col <= endCol
+// }
 
 // Mouse event handlers to manage the selection range
 function handleMouseDown(row: number, col: number) {
@@ -356,13 +369,25 @@ function updateCell(rowIndex: number, key: string, newValue: string | boolean) {
 	emitUpdate()
 }
 
-// Update the fixed and scrollable columns computed properties to filter out hidden columns
+// After other ref declarations but before computed properties
+// const visibleColumns = ref<string[]>([])
+
+// After the columns computed property
+// Initialize visibleColumns with all columns when columns change
+watch(() => columns.value, (newColumns) => {
+	if (newColumns.length > 0 && visibleColumns.value.length === 0) {
+		visibleColumns.value = newColumns.filter(col => !col.hidden).map(col => col.key)
+	}
+})
+
+// Update the fixedColumns computed property
 const fixedColumns = computed(() => {
-	return columns.value.filter(col => col.fixed && !col.hidden)
+	return columns.value.filter(col => col.fixed && !col.hidden && visibleColumns.value.includes(col.key))
 })
 
+// Update the scrollableColumns computed property
 const scrollableColumns = computed(() => {
-	return columns.value.filter(col => !col.fixed && !col.hidden)
+	return columns.value.filter(col => !col.fixed && !col.hidden && visibleColumns.value.includes(col.key))
 })
 
 // Update createEmptyRow to use defaultValue from column config
@@ -418,7 +443,16 @@ async function copySelection() {
 	}
 }
 
-// Paste function using Navigator Clipboard API
+// Add a ref for the search input
+const searchInputRef = ref<any>(null)
+
+// Add a method to check if the search input is focused
+function isSearchFocused(): boolean {
+	const inputElement = searchInputRef.value?.$el?.querySelector('input')
+	return document.activeElement === inputElement
+}
+
+// Update the pasteSelection function to handle search focus
 async function pasteSelection() {
 	if (!selectionStart.value) return
 
@@ -543,8 +577,8 @@ function handleCellKeyDown(event: KeyboardEvent, row: number, col: number) {
 // Update keyboard shortcuts to include undo/redo
 function handleSpreadsheetKeyDown(event: KeyboardEvent) {
 	// Don't intercept keyboard shortcuts when editing a cell
-	if (editingCell.value) return
-
+	if (editingCell.value || isSearchFocused()) return
+	console.log('handleSpreadsheetKeyDown', event)
 	const isCtrlOrCmd = event.ctrlKey || event.metaKey
 
 	if (isCtrlOrCmd) {
@@ -593,6 +627,64 @@ const filteredRows = computed(() => {
 		})
 	})
 })
+
+// Add after other ref declarations
+const columnWidths = ref<Map<string, number>>(new Map())
+const isResizing = ref(false)
+const resizingColumn = ref<string | null>(null)
+const startX = ref<number>(0)
+const startWidth = ref<number>(0)
+
+// Add after other function declarations
+function handleResizeStart(e: MouseEvent, columnKey: string) {
+	isResizing.value = true
+	resizingColumn.value = columnKey
+	startX.value = e.pageX
+
+	// Find the column header element
+	const columnHeader = (e.target as HTMLElement).closest('th')
+	if (!columnHeader) return
+
+	// Get the actual computed width of the column
+	const computedWidth = columnHeader.getBoundingClientRect().width
+	const currentWidth = columnWidths.value.get(columnKey) || computedWidth
+	startWidth.value = currentWidth
+
+	// Add event listeners for mousemove and mouseup
+	document.addEventListener('mousemove', handleResizeMove)
+	document.addEventListener('mouseup', handleResizeEnd)
+}
+
+function handleResizeMove(e: MouseEvent) {
+	if (!isResizing.value || !resizingColumn.value) return
+
+	e.preventDefault()
+
+	const diff = e.pageX - startX.value
+	const newWidth = Math.max(80, startWidth.value + diff) // Keep minimum width of 80px
+
+	columnWidths.value.set(resizingColumn.value, newWidth)
+}
+
+function handleResizeEnd() {
+	isResizing.value = false
+	resizingColumn.value = null
+
+	// Remove event listeners
+	document.removeEventListener('mousemove', handleResizeMove)
+	document.removeEventListener('mouseup', handleResizeEnd)
+}
+
+// Clean up event listeners when component is unmounted
+onUnmounted(() => {
+	document.removeEventListener('mousemove', handleResizeMove)
+	document.removeEventListener('mouseup', handleResizeEnd)
+})
+
+// Add a computed property for visible column options
+const columnOptions = computed(() => {
+	return columns.value.filter(col => !col.hidden)
+})
 </script>
 
 <template>
@@ -600,7 +692,22 @@ const filteredRows = computed(() => {
 		<div class="flex gap-05 py-05 justify-content-end m_flex-wrap">
 			<label v-if="label" class="label me-auto">{{ label }}</label>
 			<div class="flex gap-075">
-				<TextInput v-model="search" icon="search" placeholder="Search" class="m-0 max-w200px" />
+				<Dropdown flat thin icon="view_column">
+					<div class="p-05">
+						<div class="flex space-between">
+							<Btn flat thin small value="Select All" @click="visibleColumns = columnOptions.map(col => col.key)" />
+							<Btn flat thin small value="Clear All" @click="visibleColumns = []" />
+						</div>
+						<CheckInput
+							v-for="col in columnOptions"
+							:key="col.key"
+							v-model="visibleColumns"
+							:value="col.key"
+							:label="col.label || col.key"
+						/>
+					</div>
+				</Dropdown>
+				<TextInput ref="searchInputRef" v-model="search" icon="search" placeholder="Search" class="m-0 max-w200px" />
 				<Btn v-tooltip="'Paste'" flat thin round icon="paste" @click="pasteSelection" />
 				<Btn v-tooltip="'copy'" flat thin round icon="copy" @click="copySelection" />
 				<Btn v-tooltip="'Undo'" flat thin round icon="undo" :disabled="!canUndo" @click="undo" />
@@ -610,156 +717,57 @@ const filteredRows = computed(() => {
 		<div class="spreadsheet" @mouseup="handleMouseUp">
 			<div class="flex w-100p relative">
 				<!-- Fixed Columns -->
-				<table v-if="fixedColumns.length" class="fixed-columns sticky z-2 start-0 bg-white">
-					<thead>
-						<tr>
-							<th class="row-number-header bg-white" />
-							<th
-								v-for="col in fixedColumns"
-								:key="col.key"
-							>
-								<span @click="col.sortable && sortByColumn(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' }"
-								/>
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="(row, rowIndex) in filteredRows" :key="rowIndex">
-							<td class="row-number txt-center hover user-select-none pointer txt12 regular" @click="selectEntireRow(rowIndex)">
-								{{ rowIndex + 1 }}
-							</td>
-							<td
-								v-for="col in fixedColumns"
-								:key="col.key"
-								:class="{
-									selected: isCellSelected(rowIndex, fixedColumns.indexOf(col)),
-									locked: !isCellEditable(col.key),
-								}"
-								:style="{ width: col.width }"
-								:tabindex="col.hidden ? undefined : 0"
-								@mousedown="handleMouseDown(rowIndex, fixedColumns.indexOf(col))"
-								@mouseover="handleMouseOver(rowIndex, fixedColumns.indexOf(col))"
-								@focusin="handleMouseOver(rowIndex, fixedColumns.indexOf(col))"
-								@dblclick="startEditing(rowIndex, fixedColumns.indexOf(col))"
-								@keydown="handleCellKeyDown($event, rowIndex, fixedColumns.indexOf(col))"
-							>
-								<template v-if="editingCell && editingCell.row === rowIndex && editingCell.col === fixedColumns.indexOf(col)">
-									<input
-										:ref="el => setInputRef(el, `cell-${rowIndex}-${fixedColumns.indexOf(col)}`)"
-										:value="row[col.key]"
-										type="text"
-										class="spreadsheet-input"
-										@input="(e: Event) => updateCell(rowIndex, col.key, (e.target as HTMLInputElement).value)"
-										@blur="handleStopEditingAndBlur(false)"
-										@keydown.enter.prevent="handleStopEditingAndBlur(false)"
-										@keydown.esc.prevent="handleStopEditingAndBlur(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: boolean | any[] | undefined) => 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>
+				<SpreadsheetTable
+					v-if="fixedColumns.length"
+					:columns="fixedColumns"
+					:rows="filteredRows"
+					:is-fixed="true"
+					:show-row-numbers="true"
+					:column-widths="columnWidths"
+					:sort-column="sortColumn"
+					:sort-direction="sortDirection"
+					:selection-start="selectionStart"
+					:selection-end="selectionEnd"
+					:editing-cell="editingCell"
+					:base-column-index="0"
+					class="sticky z-2 start-0 bg-white"
+					@sortColumn="sortByColumn"
+					@resizeStart="handleResizeStart"
+					@selectRow="selectEntireRow"
+					@cellMouseDown="handleMouseDown"
+					@cellMouseOver="handleMouseOver"
+					@cellEditStart="startEditing"
+					@cellKeyDown="handleCellKeyDown"
+					@updateCell="updateCell"
+					@stopEditing="handleStopEditingAndBlur"
+					@setInputRef="setInputRef"
+				/>
 
 				<!-- Scrollable Columns -->
 				<div class="flex-shrink flex-grow overflow-x">
-					<table class="w-100p">
-						<thead>
-							<tr>
-								<th v-if="!fixedColumns.length" class="row-number-header bg-white" />
-								<th
-									v-for="col in scrollableColumns"
-									:key="col.key"
-								>
-									<span @click="col.sortable && sortByColumn(col.key)">
-										{{ col.label || col.key }}
-									</span>
-
-									<Icon v-if="sortColumn === col.key" name="keyboard_arrow_down" class="line-height-0 inline-block" :class="{ 'rotate-180': sortColumn === col.key && sortDirection === 'desc' }" />
-								</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr v-for="(row, rowIndex) in filteredRows" :key="rowIndex">
-								<td v-if="!fixedColumns.length" class="row-number txt-center hover user-select-none pointer txt12 regular" @click="selectEntireRow(rowIndex)">
-									{{ rowIndex + 1 }}
-								</td>
-								<td
-									v-for="(col, colIndex) in scrollableColumns"
-									:key="col.key"
-									:class="{
-										selected: isCellSelected(rowIndex, fixedColumns.length + colIndex),
-										locked: !isCellEditable(col.key),
-									}"
-									:style="{ width: col.width }"
-									:tabindex="col.hidden ? undefined : 0"
-									@mousedown="handleMouseDown(rowIndex, fixedColumns.length + colIndex)"
-									@mouseover="handleMouseOver(rowIndex, fixedColumns.length + colIndex)"
-									@focusin="handleMouseOver(rowIndex, fixedColumns.length + colIndex)"
-									@dblclick="startEditing(rowIndex, fixedColumns.length + colIndex)"
-									@keydown="handleCellKeyDown($event, rowIndex, fixedColumns.length + colIndex)"
-								>
-									<template v-if="editingCell && editingCell.row === rowIndex && editingCell.col === (fixedColumns.length + colIndex)">
-										<input
-											:ref="el => setInputRef(el, `cell-${rowIndex}-${fixedColumns.length + colIndex}`)"
-											:value="row[col.key]"
-											type="text"
-											class="spreadsheet-input"
-											@input="(e: Event) => updateCell(rowIndex, col.key, (e.target as HTMLInputElement).value)"
-											@blur="handleStopEditingAndBlur(false)"
-											@keydown.enter.prevent="handleStopEditingAndBlur(false)"
-											@keydown.esc.prevent="handleStopEditingAndBlur(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 v-if="row[col.key]" 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: boolean | any[] | undefined) => 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>
+					<SpreadsheetTable
+						:columns="scrollableColumns"
+						:rows="filteredRows"
+						:is-fixed="false"
+						:show-row-numbers="!fixedColumns.length"
+						:column-widths="columnWidths"
+						:sort-column="sortColumn"
+						:sort-direction="sortDirection"
+						:selection-start="selectionStart"
+						:selection-end="selectionEnd"
+						:editing-cell="editingCell"
+						:base-column-index="fixedColumns.length"
+						@sortColumn="sortByColumn"
+						@resizeStart="handleResizeStart"
+						@selectRow="selectEntireRow"
+						@cellMouseDown="handleMouseDown"
+						@cellMouseOver="handleMouseOver"
+						@cellEditStart="startEditing"
+						@cellKeyDown="handleCellKeyDown"
+						@updateCell="updateCell"
+						@stopEditing="handleStopEditingAndBlur"
+						@setInputRef="setInputRef"
+					/>
 				</div>
 			</div>
 			<Btn v-if="allowAddRow" outline thin round icon="add" value="Add Row" class="mt-05" @click="addRow" />
@@ -768,97 +776,8 @@ const filteredRows = computed(() => {
 </template>
 
 <style scoped>
-.fixed-columns {
-	border-right: 2px solid var(--border-color);
-}
-.spreadsheet table {
-	border-collapse: collapse;
-}
-.spreadsheet th, .spreadsheet td {
-	border: 1px solid var(--border-color);
-	padding: 0.1rem 0.5rem;
-	min-width: 80px;
-	background: var(--bgl-white);
-	user-select: none;
-}
-.spreadsheet th {
-	background: var(--input-bg);
-	white-space: nowrap;
-	position: relative;
-	padding: 0.25rem 0.5rem;
-	font-weight: 500;
-	text-align: start;
-}
-.spreadsheet th .bgl_icon-font{
-	vertical-align: middle;
-}
-.spreadsheet td.selected {
-	background: var(--bgl-primary-light);
-}
-.spreadsheet td.locked {
-	background: var(--bgl-gray-light);
-	cursor: default;
-}
-.spreadsheet td.locked.selected {
-	background: var(--bgl-primary-light);
-}
-.spreadsheet td {
-	height: 40px;
-	vertical-align: middle;
-}
-.spreadsheet td:has(img){
-	padding: 0;
-}
-.spreadsheet 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;
-}
-.spreadsheet input {
-	width: 100%;
-	border: none;
-	background: transparent;
-	padding: 0;
-	margin: 0;
-	min-height: 0;
-	min-width: 0;
-}
-.spreadsheet input:focus {
-	outline: 2px solid var(--bgl-primary);
-	outline-offset: 6px;
-}
-.spreadsheet th.sortable {
-	cursor: pointer;
-}
-.row-number-header, .row-number {
-	width: fit-content;
-	min-width: fit-content !important;
-	padding: 0.1rem 0.7rem !important;
-}
-.spreadsheet td .bgl-checkbox{
-	margin: 0;
-	text-align: center;
-	justify-content: center;
-
-}
-.spreadsheet td:has(.bgl-checkbox){
-	text-align: center;
-	background: var(--input-bg);
-}
-.spreadsheet td:has(:checked){
-	background: var(--bgl-primary-light);
-}
-
-.spreadsheetCellPlaceHolder{
-	height: 0px;
-	overflow: hidden;
-	opacity: 0;
-	pointer-events: none;
+/* Spreadsheet container styles */
+.spreadsheet {
 	user-select: none;
 }
 </style>