fix(table): stop selectable propagation

Author: jpntex

.changeset/few-ants-leave.md

@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+fix(table): stop selectable propagation

packages/ui/docs/pages/component/table/selectable.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { type TableHeader } from '@indielayer/ui'
 
 const headers: TableHeader[] = [
-  { text: '#', value: 'id', align: 'center' },
+  { text: '#', value: 'id' },
   { text: 'Title', value: 'title' },
   { text: 'Description', value: 'description', truncate: true, width: 400 },
   { text: 'Published', value: 'published', align: 'center' },
@@ -50,6 +50,7 @@ const singleSelected = ref<number>(2)
         selectable
         :headers="headers"
         :items="items"
+        @click-row="(item) => console.log('Row clicked:', item)"
       />
     </x-card>
     <x-card>

packages/ui/src/components/menu/MenuItem.vue

@@ -60,6 +60,7 @@ import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../../components/icon/Icon.vue'
 import XSpinner from '../../components/spinner/Spinner.vue'
+import XCheckbox from '../../components/checkbox/Checkbox.vue'
 
 import type { MenuArrayItem } from './Menu.vue'
 

packages/ui/src/components/table/Table.vue

@@ -87,6 +87,7 @@ import XSkeleton from '../skeleton/Skeleton.vue'
 import type { SkeletonShape } from '../skeleton/Skeleton.vue'
 
 import XIcon from '../icon/Icon.vue'
+import XCheckbox from '../checkbox/Checkbox.vue'
 
 import { chevronDownIcon } from '../../common/icons'
 
@@ -278,14 +279,14 @@ const { styles, classes, className } = useTheme('Table', {}, props)
         :class="classes.table"
       >
         <x-table-head :sticky-header="stickyHeader">
-          <x-table-header v-if="props.selectable && !props.singleSelect" width="48" class="!px-3 !py-2.5">
+          <x-table-header v-if="props.selectable && !props.singleSelect" width="40" class="!pl-3.5 !pr-0.5 !py-2.5 cursor-pointer" @click="toggleSelectAll">
             <x-checkbox
               :model-value="allRowsSelected || someRowsSelected"
               :indeterminate="someRowsSelected"
               hide-footer
               aria-label="Select all rows"
               skip-form-registry
-              @click.prevent="toggleSelectAll"
+              @click.prevent.stop="toggleSelectAll"
             />
           </x-table-header>
           <x-table-header v-if="expandable" width="48" class="!p-0"/>
@@ -354,13 +355,13 @@ const { styles, classes, className } = useTheme('Table', {}, props)
               :single-select="singleSelect"
               @click="onTableRowClick(item.data, item.index)"
             >
-              <x-table-cell v-if="props.selectable && !singleSelect" width="48">
+              <x-table-cell v-if="props.selectable && !singleSelect" width="40" class="!pl-3.5 !pr-0.5 cursor-pointer" @click.stop="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)">
                 <x-checkbox
                   :model-value="isRowSelected(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
                   hide-footer
                   :aria-label="`Select row ${index + 1}`"
                   skip-form-registry
-                  @click.prevent="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+                  @click.prevent.stop="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
                 />
               </x-table-cell>
               <x-table-cell v-if="expandable" width="48" class="!p-1">