@soft-stech/bootsman-ui-shadcn 2.0.13 → 2.0.14

package/dist/index.js

@@ -129,7 +129,7 @@ import { _ as ba } from "./BuiAlertTitle.vue_vue_type_script_setup_true_lang-DtZ
 import { _ as Aa } from "./BuiAlertDescription.vue_vue_type_script_setup_true_lang-CGkBGnhJ.js";
 import { _ as Pa } from "./BuiAvatarImage.vue_vue_type_script_setup_true_lang-CzKZeFgo.js";
 import { _ as wa } from "./BuiAvatarFallback.vue_vue_type_script_setup_true_lang-jxz_saON.js";
-import { _ as Va } from "./BuiTable.vue_vue_type_script_setup_true_lang-C3hr0DBS.js";
+import { _ as Va } from "./BuiTable.vue_vue_type_script_setup_true_lang-Dd_dkcy4.js";
 import { _ as La } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-CZvFJVkb.js";
 import { _ as Ra } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-BzFROkZg.js";
 import { _ as ka } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-DA2KX8Pg.js";

package/dist/lib/useResizeColumns.d.ts

@@ -130,9 +130,11 @@ export declare function useResizeColumns(): {
     calculatedColumnSizing: import('vue').Ref<Record<string, number> | undefined, Record<string, number> | undefined>;
     isResizing: import('vue').Ref<boolean, boolean>;
     resizingCellId: import('vue').Ref<string, string>;
-    handleResizeControlMouseDown: (cellId: string, enableColumnResizing: boolean) => void;
-    handleResizeControlMouseUp: () => void;
+    handleResizeControlMouseDown: (e: Event, cellId: string, enableColumnResizing: boolean) => void;
+    handleResizeControlMouseUp: (e: Event) => void;
     resetCells: () => void;
     setInitialColumnWidths: () => void;
     setProvidedCellWidths: (columnSizing: Record<string, number> | undefined) => void;
+    isMouseDownOnHandler: import('vue').Ref<boolean, boolean>;
+    isMouseUpOnHandler: import('vue').Ref<boolean, boolean>;
 };

package/dist/lib/useResizeColumns.js

@@ -1,94 +1,98 @@
 import { ref as o } from "vue";
 import "vee-validate";
-import { useEventListener as M } from "@vueuse/core";
+import { useEventListener as _ } from "@vueuse/core";
 function b() {
-  const r = o(!1), u = o(""), d = o(""), l = o(void 0), h = 90, x = 56, z = 10, c = o(void 0), n = o(null), f = o(void 0), y = (e) => {
-    n.value && n.value.headRef && [...n.value.headRef.querySelectorAll("th")].forEach((i) => {
-      const s = a(i);
-      e && e[s] && (i.style.width = e[s] + "px");
+  const c = o(!1), d = o(""), v = o(""), l = o(void 0), f = 90, E = 56, x = 10, h = o(void 0), u = o(null), m = o(void 0), M = (e) => {
+    u.value && u.value.headRef && [...u.value.headRef.querySelectorAll("th")].forEach((s) => {
+      const i = r(s);
+      e && e[i] && (s.style.width = e[i] + "px");
     });
-  }, E = () => {
-    if (n.value && n.value.headRef)
-      return [...n.value.headRef.querySelectorAll("th")].reduce((i, s) => {
-        const v = a(s);
+  }, y = () => {
+    if (u.value && u.value.headRef)
+      return [...u.value.headRef.querySelectorAll("th")].reduce((s, i) => {
+        const n = r(i);
         return {
-          ...i,
-          [v]: {
-            cell: s,
-            initialWidth: s.offsetWidth,
-            minWidth: v === "actions" ? z : Math.min(s.offsetWidth, h)
+          ...s,
+          [n]: {
+            cell: i,
+            initialWidth: i.offsetWidth,
+            minWidth: n === "actions" ? x : Math.min(i.offsetWidth, f)
           }
         };
       }, {});
-  }, I = (e, t) => {
-    if (t && (r.value = !0, u.value = e, l.value)) {
-      const i = l.value[e].cell;
-      let s = i.nextElementSibling;
-      s || (s = i.previousElementSibling), d.value = s ? s.id.split("_")[0] : "", f.value = M(document, "mousemove", R);
+  }, w = o(!1), z = o(!1), I = (e, t, s) => {
+    const i = e.target;
+    if (w.value = i.className.includes && i.className.includes("resize-handler"), !!s && (c.value = !0, d.value = t, l.value)) {
+      const n = l.value[t].cell;
+      let a = n.nextElementSibling;
+      a || (a = n.previousElementSibling), v.value = a ? a.id.split("_")[0] : "", m.value = _(document, "mousemove", R);
     }
-  }, g = () => {
-    if (r.value && (r.value = !1, u.value = "", d.value = "", f.value && f.value(), l.value)) {
-      const e = {};
-      for (const t in l.value) {
-        const i = l.value[t], s = i.cell.hasAttribute("can-resize") ? Math.floor(i.cell.offsetWidth) <= i.minWidth ? i.minWidth : i.cell.offsetWidth : i.initialWidth;
-        i.cell.style.width = s + "px", e[t] = s;
+  }, S = (e) => {
+    const t = e.target;
+    if (z.value = t.className.includes && t.className.includes("resize-handler"), !!c.value && (c.value = !1, d.value = "", v.value = "", m.value && m.value(), l.value)) {
+      const s = {};
+      for (const i in l.value) {
+        const n = l.value[i], a = n.cell.hasAttribute("can-resize") ? Math.floor(n.cell.offsetWidth) <= n.minWidth ? n.minWidth : n.cell.offsetWidth : n.initialWidth;
+        n.cell.style.width = a + "px", s[i] = a;
       }
-      c.value = e;
+      h.value = s;
     }
-  }, S = (e) => a(e) === "actions" ? x : 0, a = (e) => e.id.split("_")[0], m = (e, t, i) => {
+  }, L = (e) => r(e) === "actions" ? E : 0, r = (e) => e.id.split("_")[0], C = (e, t, s) => {
     if (!e || !t) {
-      u.value = "", d.value = "";
+      d.value = "", v.value = "";
       return;
     }
-    const s = i.movementX, v = s < 0 ? "left" : "right", C = Math.floor(parseInt(e.style.width)) + s, W = Math.floor(parseInt(t.style.width)) - s;
-    if (v === "left") {
-      const p = l.value && l.value[a(e)] ? l.value[a(e)].minWidth : h;
-      if (C <= p || !e.hasAttribute("can-resize")) {
-        const w = e.previousElementSibling;
-        m(w, t, i);
+    const i = s.movementX, n = i < 0 ? "left" : "right", a = Math.floor(parseInt(e.style.width)) + i, p = Math.floor(parseInt(t.style.width)) - i;
+    if (n === "left") {
+      const W = l.value && l.value[r(e)] ? l.value[r(e)].minWidth : f;
+      if (a <= W || !e.hasAttribute("can-resize")) {
+        const g = e.previousElementSibling;
+        C(g, t, s);
       } else
-        e.style.width = C + "px", t.style.width = W + "px";
+        e.style.width = a + "px", t.style.width = p + "px";
     } else {
-      const p = l.value && l.value[a(t)] ? l.value[a(t)].minWidth + S(t) : h;
-      if (W <= p || !t.hasAttribute("can-resize")) {
-        const w = t.nextElementSibling;
-        m(e, w, i);
+      const W = l.value && l.value[r(t)] ? l.value[r(t)].minWidth + L(t) : f;
+      if (p <= W || !t.hasAttribute("can-resize")) {
+        const g = t.nextElementSibling;
+        C(e, g, s);
       } else
-        e.style.width = C + "px", t.style.width = W + "px";
+        e.style.width = a + "px", t.style.width = p + "px";
     }
   }, R = (e) => {
     if (e.preventDefault(), l.value) {
-      const t = l.value[u.value]?.cell, i = l.value[d.value]?.cell;
-      m(t, i, e);
+      const t = l.value[d.value]?.cell, s = l.value[v.value]?.cell;
+      C(t, s, e);
     }
   };
   return {
     cells: l,
-    tableHeaderElement: n,
-    calculatedColumnSizing: c,
-    isResizing: r,
-    resizingCellId: u,
+    tableHeaderElement: u,
+    calculatedColumnSizing: h,
+    isResizing: c,
+    resizingCellId: d,
     handleResizeControlMouseDown: I,
-    handleResizeControlMouseUp: g,
+    handleResizeControlMouseUp: S,
     resetCells: () => {
       if (l.value) {
         const e = {};
         for (const t in l.value) {
-          const i = l.value[t].initialWidth;
-          l.value[t].cell.style.width = i + "px", e[t] = i;
+          const s = l.value[t].initialWidth;
+          l.value[t].cell.style.width = s + "px", e[t] = s;
         }
-        c.value = e;
+        h.value = e;
       }
     },
     setInitialColumnWidths: () => {
-      if (l.value = E(), l.value) {
+      if (l.value = y(), l.value) {
         const e = {};
         for (const t in l.value)
           l.value[t].cell.style.width || (l.value[t].cell.style.width = l.value[t].initialWidth + "px"), e[t] = l.value[t].cell.offsetWidth;
-        c.value = e;
+        h.value = e;
       }
     },
-    setProvidedCellWidths: y
+    setProvidedCellWidths: M,
+    isMouseDownOnHandler: w,
+    isMouseUpOnHandler: z
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "type": "module",
   "files": [
     "dist",

package/src/components/table/BuiDataTable.vue

@@ -268,7 +268,9 @@ const {
   handleResizeControlMouseDown,
   handleResizeControlMouseUp,
   setInitialColumnWidths,
-  setProvidedCellWidths
+  setProvidedCellWidths,
+  isMouseDownOnHandler,
+  isMouseUpOnHandler
 } = useResizeColumns()
 
 onBeforeMount(() => {
@@ -383,6 +385,10 @@ watch(
 )
 
 const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
+  if (isMouseDownOnHandler.value && !isMouseUpOnHandler.value) {
+    return false
+  }
+
   if (getHeaderCellSortingButton(header)) {
     header.column.toggleSorting(header.column.getIsSorted() === 'asc')
   }
@@ -466,11 +472,13 @@ const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
             enableColumnResizing && index < tableHeaders.length - 1 && header.column.getCanResize()
           "
           @dblclick="resetCells"
-          @mousedown="() => handleResizeControlMouseDown(header.id, props.enableColumnResizing)"
+          @mousedown.self="
+            (e: Event) => handleResizeControlMouseDown(e, header.id, props.enableColumnResizing)
+          "
           @click.stop
           :className="
             cn(
-              'absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
+              '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' : ''
             )
           "

package/src/components/table/BuiTable.vue

@@ -8,7 +8,7 @@ const props = defineProps<{ class?: string }>()
 <template>
   <BuiScrollArea class="border-border/16 w-full grow overflow-auto rounded-sm border">
     <slot name="columnVisibility" />
-    <div class="min-h-[90px]">
+    <div class="flex min-h-[90px] grow flex-col">
       <table :class="cn('h-full w-full caption-top text-sm', props.class)">
         <slot />
       </table>

package/src/lib/useResizeColumns.ts

@@ -56,7 +56,18 @@ export function useResizeColumns() {
     return undefined
   }
 
-  const handleResizeControlMouseDown = (cellId: string, enableColumnResizing: boolean) => {
+  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')
+
     if (!enableColumnResizing) return
 
     isResizing.value = true
@@ -76,7 +87,11 @@ export function useResizeColumns() {
     }
   }
 
-  const handleResizeControlMouseUp = () => {
+  const handleResizeControlMouseUp = (e: Event) => {
+    const targetHTMLElement = e.target as HTMLElement
+    isMouseUpOnHandler.value =
+      targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
+
     if (!isResizing.value) return
 
     isResizing.value = false
@@ -221,6 +236,8 @@ export function useResizeColumns() {
     handleResizeControlMouseUp,
     resetCells,
     setInitialColumnWidths,
-    setProvidedCellWidths
+    setProvidedCellWidths,
+    isMouseDownOnHandler,
+    isMouseUpOnHandler
   }
 }