@meistrari/tela-build 1.53.0 → 1.54.1

package/components/tela/combobox/combobox-trigger.vue

@@ -13,14 +13,17 @@ const delegatedProps = reactiveOmit(props, 'class')
     <ComboboxTrigger
         v-bind="delegatedProps"
         :class="cn(
-            'group select-none flex items-center justify-between body-14-semibold gap-3 rounded-10px pl-11px pr-10px py-7px bg-white border-0.5px border transition hover:border-strong hover:bg-subtle',
-            'data-[state=open]:text-secondary data-[state=open]:border-strong data-[state=open]:bg-subtle',
-            '[box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
+            !props.asChild && [
+                'group select-none flex items-center justify-between body-14-semibold gap-3 rounded-10px pl-11px pr-10px py-7px bg-white border-0.5px border transition hover:border-strong hover:bg-subtle',
+                'data-[state=open]:text-secondary data-[state=open]:border-strong data-[state=open]:bg-subtle',
+                '[box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
+            ],
             props.class,
         )"
     >
         <slot />
         <TelaIcon
+            v-if="!props.asChild"
             name="i-ph-caret-down-bold"
             size="15px"
             color="icon-secondary"

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/components/tela/icon-button/icon-button.vue

@@ -33,9 +33,9 @@ const style = computed(() => {
     const size = ({
         '3xs': 'text-6px p-1 rounded-8px',
         '2xs': 'text-8px p-4px rounded-4px', // 16px
-        'xs': 'text-12px p-6px rounded-6px', // 24px
-        'sm': 'text-16px p-0.4em rounded-8px', // 32px
-        'md': 'text-20px p-0.4em rounded-10px', // 44px
+        'xs': 'text-12px p-6px rounded-6px', // 26px
+        'sm': 'text-16px p-6px rounded-8px', // 32px
+        'md': 'text-20px p-6.4px rounded-10px', // 44px
     } as Record<typeof props.size, string>)[props.size]
 
     const color = ({

package/components/tela/icon.vue

@@ -13,7 +13,7 @@ const iconSize = computed(() => {
         case 'xs':
             return '8px'
         case 'sm':
-            return '12px'
+            return '14px'
         case '17px':
             return '17px'
         case '20px':
@@ -23,6 +23,7 @@ const iconSize = computed(() => {
         case 'xl':
             return '32px'
         case 'md':
+            return '20px'
         default:
             return '16px'
     }

package/package.json

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