@bagelink/vue 1.4.69 → 1.4.71

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.69",
+  "version": "1.4.71",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/dataTable/DataTable.vue

@@ -121,76 +121,46 @@ const showLoading = computed(() => loading.value)
 </script>
 
 <template>
-	<div
-		class="table-list-wrap h-100"
-		v-bind="containerProps"
-		:class="{ overflowHiddenLoading: showLoading }"
-	>
+	<div class="table-list-wrap h-100" v-bind="containerProps" :class="{ overflowHiddenLoading: showLoading }">
 		<Loading v-if="showLoading" class="h100p" />
 		<div v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
-			<table class="infinite-wrapper">
+			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">
 				<thead class="row first-row">
 					<th v-if="isSelectable">
-						<input
-							ref="allSelectorEl"
-							type="checkbox"
-							@click.stop
-							@change="(e) => toggleSelectAll(e)"
-						>
+						<input ref="allSelectorEl" type="checkbox" @click.stop @change="(e) => toggleSelectAll(e)">
 						<!-- @change="toggleSelectAll" -->
 					</th>
 					<th
-						v-for="field in computedSchema"
-						:key="field.id"
-						class="col"
+						v-for="field in computedSchema" :key="field.id" class="col"
 						@click="toggleSort(field?.id || '')"
 					>
 						<div class="flex">
 							{{ field.label || keyToLabel(field?.id) }}
-							<div
-								class="list-arrows"
-								:class="{ sorted: sortField === field?.id }"
-							>
-								<Icon
-									:class="{ desc: sortDirection === 'DESC' }"
-									icon="keyboard_arrow_up"
-								/>
+							<div class="list-arrows" :class="{ sorted: sortField === field?.id }">
+								<Icon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 							</div>
 						</div>
 					</th>
 				</thead>
 				<tbody>
 					<tr
-						v-for="{ data: row } in list"
-						:key="row?.id || `row-${Math.random()}`"
+						v-for="{ data: row } in list" :key="row?.id || `row-${Math.random()}`"
 						class="row row-item position-relative"
 						:class="{ selected: row?.id && computedSelectedItems.includes(row.id) }"
-						@click="toggleSelectItem(row)"
+						@click="(event) => toggleSelectItem(row, event)"
 					>
 						<td v-if="isSelectable">
 							<div @click.stop>
-								<input
-									v-model="selectedItems"
-									type="checkbox"
-									:value="row?.id || ''"
-								>
+								<input v-model="selectedItems" type="checkbox" :value="row?.id || ''">
 							</div>
 						</td>
 						<td
-							v-for="field in computedSchema"
-							:key="`${field.id}-${row?.id || Math.random()}`"
+							v-for="field in computedSchema" :key="`${field.id}-${row?.id || Math.random()}`"
 							class="col"
 						>
-							<slot
-								v-if="field.id && slots?.[field.id]"
-								:name="field.id"
-								:row="row"
-								:field="field"
-							/>
+							<slot v-if="field.id && slots?.[field.id]" :name="field.id" :row="row" :field="field" />
 							<div v-else>
-								<component
-									:is="renderFieldForRow(field, row)"
-								/>
+								<component :is="renderFieldForRow(field, row)" />
 							</div>
 						</td>
 					</tr>
@@ -233,13 +203,19 @@ tbody tr.selected:hover {
 	border-radius: 5px;
 	object-fit: cover;
 }
+
 .col:has(img) {
 	padding-inline-end: 0.5rem;
 }
 
-.overflowHiddenLoading{
+.selecting .col {
+	user-select: none;
+}
+
+.overflowHiddenLoading {
 	overflow: hidden !important;
 }
+
 .list-arrows.sorted .desc {
 	transform: rotate(180deg);
 	display: inline-block;
@@ -313,7 +289,7 @@ th {
 	padding: 0rem 0.25rem;
 }
 
-.col > div {
+.col>div {
 	display: flex;
 	gap: 0.5rem;
 }

package/src/components/dataTable/useTableSelection.ts

@@ -9,6 +9,7 @@ export interface UseTableSelectionOptions<T> extends TableSelectionOptions<T> {
 
 export function useTableSelection<T extends { [key: string]: any }>(options: UseTableSelectionOptions<T>) {
 	const allSelectorEl = ref<HTMLInputElement>()
+	const lastSelectedIndex = ref<number | null>(null)
 	const computedSelectedItems = computed(() => options.selectedItems.value)
 	const isSelectable = computed(() => options.selectable === true && Array.isArray(options.selectedItems.value))
 	const allItems = $computed(() => options.data.value)
@@ -39,7 +40,37 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
     = !allSelected && options.selectedItems.value.length > 0
 	}
 
-	function toggleSelectItem(item: T) {
+	function toggleSelectItem(item: T, event?: MouseEvent) {
+		const currentIndex = allItems.findIndex(i => i.id === item.id)
+
+		// Handle Shift+click for range selection
+		if (event?.shiftKey && lastSelectedIndex.value !== null && currentIndex !== -1) {
+			const startIndex = Math.min(lastSelectedIndex.value, currentIndex)
+			const endIndex = Math.max(lastSelectedIndex.value, currentIndex)
+
+			// Get all items in the range
+			const rangeItems = allItems.slice(startIndex, endIndex + 1)
+			const rangeItemIds = rangeItems.map(i => i.id)
+
+			// Check if all items in range are currently selected
+			const allRangeSelected = rangeItemIds.every(id => options.selectedItems.value.includes(id)
+			)
+
+			if (allRangeSelected) {
+				// Deselect all items in range
+				options.selectedItems.value = options.selectedItems.value.filter(id => !rangeItemIds.includes(id)
+				)
+			} else {
+				// Select all items in range (add missing ones)
+				const newSelections = rangeItemIds.filter(id => !options.selectedItems.value.includes(id)
+				)
+				options.selectedItems.value.push(...newSelections)
+			}
+
+			return
+		}
+
+		// Regular single item selection logic
 		if (computedSelectedItems.value.length === 0) {
 			// Clean the item if a cleanData function is provided, otherwise use the default cleaning
 			const cleanItem = options.cleanData ? options.cleanData(item) : { ...item }
@@ -54,14 +85,19 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 			}
 
 			options.onSelect(cleanItem)
+			lastSelectedIndex.value = currentIndex
 			return
 		}
+
 		const index = computedSelectedItems.value.indexOf(item.id)
 		if (index > -1) {
 			options.selectedItems.value.splice(index, 1)
 		} else {
 			options.selectedItems.value.push(item.id)
 		}
+
+		// Update last selected index for future range selections
+		lastSelectedIndex.value = currentIndex
 	}
 
 	// Update toggleSelectAll to pass allItems to updateAllSelectorState
@@ -73,6 +109,9 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 		} else {
 			options.selectedItems.value = []
 		}
+
+		// Reset last selected index when selecting/deselecting all
+		lastSelectedIndex.value = null
 	}
 
 	return {