@soft-stech/bootsman-ui-shadcn 2.0.15 → 2.0.17

package/src/components/table/BuiDataTable.vue

@@ -393,6 +393,12 @@ const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
     header.column.toggleSorting(header.column.getIsSorted() === 'asc')
   }
 }
+
+const handleHeaderCellMouseDown = (e: Event) => {
+  const targetHTMLElement = e.target as HTMLElement
+  isMouseDownOnHandler.value =
+    targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
+}
 </script>
 
 <template>
@@ -450,55 +456,58 @@ const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
       </BuiPopover>
     </template>
     <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader" ref="tableHeaderRef">
-      <BuiTableHead
-        v-for="(header, index) in tableHeaders"
-        :key="header.id"
-        :id="`${header.id}_cell`"
-        :style="{
-          ...getPinningStyle(header.column),
-          cursor: getHeaderCellSortingButton(header) ? 'pointer' : 'auto'
-        }"
-        :freeze-header="props.freezeHeader"
-        :can-resize="header.column.getCanResize() ? true : undefined"
-        @click="handleHeaderCellSorting(header)"
-      >
-        <FlexRender
-          v-if="!header.isPlaceholder"
-          :render="header.column.columnDef.header"
-          :props="header.getContext()"
-        />
-        <div
-          v-if="
-            enableColumnResizing && index < tableHeaders.length - 1 && header.column.getCanResize()
-          "
-          @dblclick="resetCells"
-          @mousedown.self="
-            (e: Event) => handleResizeControlMouseDown(e, header.id, props.enableColumnResizing)
-          "
-          @click.stop
-          :className="
-            cn(
-              'resize-handler absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
-              isResizing && resizingCellId === header.id ? 'bg-primary opacity-50' : ''
-            )
-          "
-        />
-        <template #actions>
-          <BuiContextMenuContent v-if="availableHeaderCellActions(header).length > 0">
-            <BuiContextMenuItem
-              v-for="(action, idx) in availableHeaderCellActions(header)"
-              @click="onHeaderCellAction(header, action)"
-              :key="idx"
-            >
-              {{
-                headerContextMenuTranslations && headerContextMenuTranslations[action]
-                  ? headerContextMenuTranslations[action]
-                  : defaultColumnContextMenuTranslations[action]
-              }}
-            </BuiContextMenuItem>
-          </BuiContextMenuContent>
-        </template>
-      </BuiTableHead>
+      <BuiTableRow class="border-0">
+        <BuiTableHead
+          v-for="(header, index) in tableHeaders"
+          :key="header.id"
+          :id="`${header.id}_cell`"
+          :style="{
+            ...getPinningStyle(header.column),
+            cursor: getHeaderCellSortingButton(header) ? 'pointer' : 'auto'
+          }"
+          :freeze-header="props.freezeHeader"
+          :can-resize="header.column.getCanResize() ? true : undefined"
+          @click="handleHeaderCellSorting(header)"
+          @mousedown="handleHeaderCellMouseDown"
+        >
+          <FlexRender
+            v-if="!header.isPlaceholder"
+            :render="header.column.columnDef.header"
+            :props="header.getContext()"
+          />
+          <div
+            v-if="
+              enableColumnResizing &&
+              index < tableHeaders.length - 1 &&
+              header.column.getCanResize()
+            "
+            @dblclick="resetCells"
+            @mousedown.self="handleResizeControlMouseDown(header.id, props.enableColumnResizing)"
+            @click.stop
+            :className="
+              cn(
+                'resize-handler absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
+                isResizing && resizingCellId === header.id ? 'bg-primary opacity-50' : ''
+              )
+            "
+          />
+          <template #actions>
+            <BuiContextMenuContent v-if="availableHeaderCellActions(header).length > 0">
+              <BuiContextMenuItem
+                v-for="(action, idx) in availableHeaderCellActions(header)"
+                @click="onHeaderCellAction(header, action)"
+                :key="idx"
+              >
+                {{
+                  headerContextMenuTranslations && headerContextMenuTranslations[action]
+                    ? headerContextMenuTranslations[action]
+                    : defaultColumnContextMenuTranslations[action]
+                }}
+              </BuiContextMenuItem>
+            </BuiContextMenuContent>
+          </template>
+        </BuiTableHead>
+      </BuiTableRow>
     </BuiTableHeader>
     <BuiTableBody>
       <template v-if="table.getRowModel().rows?.length">

package/src/components/table/BuiTableHeader.vue

@@ -20,12 +20,11 @@ const props = defineProps<{
         props.class,
         props.freezeHeader
           ? 'sticky top-0 z-1 [&_th:first-child>div>div]:pl-3 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-14 [&_tr:last-child]:border-b-0'
-          : '[&_th:first-child>div]:pl-3 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-14'
+          : '[&_th:first-child>div]:pl-3 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-14',
+        '[&>tr]:h-10'
       )
     "
   >
-    <tr class="h-10">
-      <slot />
-    </tr>
+    <slot />
   </thead>
 </template>

package/src/lib/useResizeColumns.ts

@@ -59,15 +59,7 @@ export function useResizeColumns() {
   const isMouseDownOnHandler = ref<boolean>(false)
   const isMouseUpOnHandler = ref<boolean>(false)
 
-  const handleResizeControlMouseDown = (
-    e: Event,
-    cellId: string,
-    enableColumnResizing: boolean
-  ) => {
-    const targetHTMLElement = e.target as HTMLElement
-    isMouseDownOnHandler.value =
-      targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
-
+  const handleResizeControlMouseDown = (cellId: string, enableColumnResizing: boolean) => {
     if (!enableColumnResizing) return
 
     isResizing.value = true

package/src/stories/components/BuiDataTableStory.vue

@@ -18,7 +18,7 @@ import {
   SignalMediumIcon,
   SignalLowIcon
 } from 'lucide-vue-next'
-import { computed, h, ref } from 'vue'
+import { computed, h, ref, withModifiers } from 'vue'
 import { z } from 'zod'
 import tasks from '@/stories/data/tasks.json'
 import { BuiCheckbox } from '@/components/checkbox'
@@ -51,7 +51,8 @@ const columns: ColumnDef<Task>[] = [
             table.getIsSomePageRowsSelected()
               ? table.toggleAllPageRowsSelected(false)
               : table.toggleAllPageRowsSelected(!!value),
-          ariaLabel: 'Select row'
+          ariaLabel: 'Select row',
+          onClick: withModifiers(() => {}, ['stop'])
         }),
         tableColumnSortCommon(column, 'ID')
       ])