@meistrari/tela-build 1.53.0 → 1.54.0

package/components/tela/complex-table/complex-table-row.vue

@@ -31,7 +31,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-    select: [id: string]
+    select: [id: string, shiftKey: boolean]
     open: [id: string]
 }>()
 
@@ -87,10 +87,18 @@ function shouldEnableRowClick() {
     return props.hoverMechanism === HoverMechanismTypes.Row && !props.disableRowClick
 }
 
+// Captured in the capture phase (before the checkbox toggles) so range-select
+// with Shift can be resolved by the parent table.
+const shiftHeldOnSelect = ref(false)
+function captureSelectModifier(event: MouseEvent) {
+    shiftHeldOnSelect.value = event.shiftKey
+}
+
 function handleCheckboxChange() {
     if (props.row.id) {
-        emit('select', props.row.id)
+        emit('select', props.row.id, shiftHeldOnSelect.value)
     }
+    shiftHeldOnSelect.value = false
 }
 </script>
 
@@ -100,7 +108,7 @@ function handleCheckboxChange() {
         :class="computedRowClass"
         @click.stop="handleRowClick"
     >
-        <td v-if="allowSelect" class="sticky left-0 bg-white z-9" :class="[selectClass]" @click.stop>
+        <td v-if="allowSelect" class="sticky left-0 bg-white z-9" :class="[selectClass]" @click.capture="captureSelectModifier" @click.stop>
             <div
                 flex="~" h-px items-center justify-center w-32px relative z-0
             >

package/components/tela/complex-table/complex-table-virtualized.vue

@@ -36,6 +36,7 @@ const {
     isAllSelected,
     selectAll,
     toggleRow,
+    setSelectedRows,
 } = useTableSelection({
     rows: computed(() => props.rows),
     initialSelectedRows: props.selectedRows,
@@ -57,6 +58,7 @@ const {
     isAllSelected,
     selectAll,
     toggleRow,
+    setSelectedRows,
 })
 
 const hoverMechanism = computed(() => props.hoverMechanism || HoverMechanismTypes.Cell)

package/components/tela/complex-table/complex-table.vue

@@ -42,6 +42,7 @@ const {
     isAllSelected,
     selectAll,
     toggleRow,
+    setSelectedRows,
 } = useTableSelection({
     rows: computed(() => props.rows),
     initialSelectedRows: props.selectedRows,
@@ -63,6 +64,7 @@ const {
     isAllSelected,
     selectAll,
     toggleRow,
+    setSelectedRows,
 })
 
 const hoverMechanism = computed(() => props.hoverMechanism || HoverMechanismTypes.Cell)

package/components/tela/complex-table/composables/table-common.ts

@@ -19,23 +19,60 @@ export interface UseTableCommonOptions {
     isAllSelected: Ref<boolean>
     selectAll: (value: boolean) => string[]
     toggleRow: (id: string) => string[]
+    setSelectedRows?: (ids: string[]) => void
 }
 
 export function useTableCommon(options: UseTableCommonOptions) {
-    const { props, emit, mainTableEl, selectedRows, isAllSelected, selectAll, toggleRow } = options
+    const { props, emit, mainTableEl, selectedRows, isAllSelected, selectAll, toggleRow, setSelectedRows } = options
 
     const hasHorizontalScroll = ref(false)
+    // Anchor for Shift range-select: the last row toggled without Shift.
+    const selectionAnchor = ref<string | null>(null)
+    // Rows selected by the last Shift range-select; the next Shift-click from
+    // the same anchor replaces them instead of accumulating (Gmail/Finder style).
+    const lastShiftRange = ref<string[]>([])
 
     function shouldEnableRowClick(rowData: Row) {
         return props.hoverMechanism === HoverMechanismTypes.Row && !props.disableRowClick?.(rowData)
     }
 
-    function handleRowSelect(rowId: string) {
+    function selectableRowIds(): string[] {
+        return props.rows.map((row: Row) => row?.id).filter(Boolean) as string[]
+    }
+
+    function rangeBetween(anchorId: string, targetId: string): string[] | null {
+        const ids = selectableRowIds()
+        const from = ids.indexOf(anchorId)
+        const to = ids.indexOf(targetId)
+        if (from === -1 || to === -1)
+            return null
+        const [lo, hi] = from <= to ? [from, to] : [to, from]
+        return ids.slice(lo, hi + 1)
+    }
+
+    function handleRowSelect(rowId: string, shiftKey = false) {
+        if (shiftKey && selectionAnchor.value && selectionAnchor.value !== rowId) {
+            const range = rangeBetween(selectionAnchor.value, rowId)
+            if (range) {
+                const previousRange = new Set(lastShiftRange.value)
+                const kept = selectedRows.value.filter((id: string) => !previousRange.has(id))
+                const newSelection = Array.from(new Set([...kept, ...range]))
+                lastShiftRange.value = range
+                if (!props.selectedRows)
+                    setSelectedRows?.(newSelection)
+                emit('select', newSelection, newSelection.length === selectableRowIds().length)
+                return
+            }
+        }
+
+        selectionAnchor.value = rowId
+        lastShiftRange.value = []
+
         if (props.selectedRows) {
             const newSelection = selectedRows.value.includes(rowId)
                 ? selectedRows.value.filter((id: string) => id !== rowId)
                 : [...selectedRows.value, rowId]
-            emit('select', newSelection, newSelection.length === props.rows.length)
+            emit('select', newSelection, newSelection.length === selectableRowIds().length)
             return
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.53.0",
+  "version": "1.54.0",
   "type": "module",
   "files": [
     "app.config.ts",