@soft-stech/bootsman-ui-shadcn 2.0.16 → 2.0.18

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,7 +456,7 @@ const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
       </BuiPopover>
     </template>
     <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader" ref="tableHeaderRef">
-      <BuiTableRow class="h-10">
+      <BuiTableRow class="border-0">
         <BuiTableHead
           v-for="(header, index) in tableHeaders"
           :key="header.id"
@@ -462,6 +468,7 @@ const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
           :freeze-header="props.freezeHeader"
           :can-resize="header.column.getCanResize() ? true : undefined"
           @click="handleHeaderCellSorting(header)"
+          @mousedown="handleHeaderCellMouseDown"
         >
           <FlexRender
             v-if="!header.isPlaceholder"
@@ -475,9 +482,7 @@ const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
               header.column.getCanResize()
             "
             @dblclick="resetCells"
-            @mousedown.self="
-              (e: Event) => handleResizeControlMouseDown(e, header.id, props.enableColumnResizing)
-            "
+            @mousedown.self="handleResizeControlMouseDown(header.id, props.enableColumnResizing)"
             @click.stop
             :className="
               cn(

package/src/components/table/BuiTableHeader.vue

@@ -20,7 +20,8 @@ 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'
       )
     "
   >

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')
       ])

package/src/theme.css

@@ -42,7 +42,7 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
 
-  --shadow-card: 0px 4px 8px 0px var(--card-shadow);
+  --shadow-card: 0px 4px 8px 0px var(--cards-box-shadow);
   --shadow-tab: 0px 2px 4px 0px var(--tab-shadow), 0px 4px 4px 0px var(--tab-shadow);
   --shadow-top: 0px -2px 4px 0px var(--tab-shadow);
   --shadow-level1:
@@ -150,7 +150,7 @@
 
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(222.2 84% 4.9%);
-  --card-shadow: hsl(241, 92%, 71%, 0.16);
+  --cards-box-shadow: hsl(241, 92%, 71%, 0.16);
   --tab-shadow: hsl(228, 51%, 11%, 0.08);
 
   --side-bar: hsl(0 0% 100%);
@@ -214,7 +214,7 @@
 
   --card: hsl(242 24% 21%);
   --card-foreground: hsl(210 40% 98%);
-  --card-shadow: hsl(241, 92%, 71%, 0.4);
+  --cards-box-shadow: hsl(241, 92%, 71%, 0.4);
   --tab-shadow: hsl(228, 51%, 11%, 0.08);
 
   --side-bar: hsl(243.2 24.1% 15.5%);