@soft-stech/bootsman-ui-shadcn 1.4.36 → 1.4.37

package/dist/index.js

@@ -148,8 +148,8 @@ import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
 import { _ as Bi } from "./BuiTable.vue_vue_type_script_setup_true_lang-Z45MrzQA.js";
 import { _ as fi } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-BGWE-WLM.js";
 import { _ as _i } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-BMPBnL81.js";
-import { _ as di } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-Bz1T89Vm.js";
-import { _ as Ci } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-H9TKoH8p.js";
+import { _ as di } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-JNDLoSoG.js";
+import { _ as Ci } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-18MBtNeo.js";
 import { _ as Fi } from "./BuiTableRow.vue_vue_type_script_setup_true_lang-f1ZCSbzt.js";
 import { _ as Si } from "./BuiTableCaption.vue_vue_type_script_setup_true_lang-C9PP4Fcx.js";
 import { _ as Ai } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BxUialLd.js";

package/dist/lib/useResizeColumns.d.ts

@@ -0,0 +1,127 @@
+export declare function useResizeColumns(): {
+    tableHeaderElement: import('vue').Ref<({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly class?: string | undefined;
+            readonly freezeHeader?: boolean | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>, {
+            headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        class?: string;
+        freezeHeader?: boolean;
+    }> & Readonly<{}>, "headRef"> & import('vue').ShallowUnwrapRef<{
+        headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null, ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly class?: string | undefined;
+            readonly freezeHeader?: boolean | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>, {
+            headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        class?: string;
+        freezeHeader?: boolean;
+    }> & Readonly<{}>, "headRef"> & import('vue').ShallowUnwrapRef<{
+        headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null>;
+    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;
+    resetCells: () => void;
+    setInitialColumnWidths: () => void;
+    setProvidedCellWidths: (columnSizing: Record<string, number> | undefined) => void;
+};

package/dist/lib/useResizeColumns.js

@@ -0,0 +1,89 @@
+import { ref as n } from "vue";
+import "vee-validate";
+import { useEventListener as R } from "@vueuse/core";
+function A() {
+  const u = n(!1), o = n(""), r = n(""), i = n(void 0), d = n(90), m = n(void 0), a = n(null), v = n(void 0), w = (e) => {
+    a.value && a.value.headRef && [...a.value.headRef.querySelectorAll("th")].forEach((l) => {
+      const s = l.id.split("_")[0];
+      e && e[s] && (l.style.width = e[s] + "px");
+    });
+  }, W = () => {
+    if (a.value && a.value.headRef)
+      return [...a.value.headRef.querySelectorAll("th")].reduce((l, s) => {
+        const h = s.id.split("_")[0];
+        return {
+          ...l,
+          [h]: {
+            cell: s,
+            initialWidth: s.offsetWidth
+          }
+        };
+      }, {});
+  }, g = (e, t) => {
+    if (t && (u.value = !0, o.value = e, i.value)) {
+      const l = i.value[e].cell;
+      let s = l.nextElementSibling;
+      s || (s = l.previousElementSibling), r.value = s ? s.id.split("_")[0] : "", v.value = R(document, "mousemove", z);
+    }
+  }, x = () => {
+    if (u.value && (u.value = !1, o.value = "", r.value = "", v.value && v.value(), i.value)) {
+      const e = {};
+      for (let t in i.value) {
+        const l = i.value[t], s = l.cell.hasAttribute("can-resize") ? Math.floor(l.cell.offsetWidth) <= d.value ? d.value : l.cell.offsetWidth : l.initialWidth;
+        l.cell.style.width = s + "px", e[t] = s;
+      }
+      m.value = e;
+    }
+  }, y = (e) => {
+    if (!e.nextElementSibling) {
+      const t = e.querySelector(".header-cell_wrapper");
+      if (t)
+        return parseInt(window.getComputedStyle(t).paddingRight);
+    }
+    return 0;
+  }, c = (e, t, l) => {
+    if (!e || !t) {
+      o.value = "", r.value = "";
+      return;
+    }
+    const s = l.movementX, h = s < 0 ? "left" : "right", f = Math.floor(parseInt(e.style.width)) + s, p = Math.floor(parseInt(t.style.width)) - s;
+    if (h === "left")
+      if (f <= d.value || !e.hasAttribute("can-resize")) {
+        const C = e.previousElementSibling;
+        c(C, t, l);
+      } else
+        e.style.width = f + "px", t.style.width = p + "px";
+    else if (p <= d.value + y(t) || !t.hasAttribute("can-resize")) {
+      const C = t.nextElementSibling;
+      c(e, C, l);
+    } else
+      e.style.width = f + "px", t.style.width = p + "px";
+  }, z = (e) => {
+    if (e.preventDefault(), i.value) {
+      const t = i.value[o.value]?.cell, l = i.value[r.value]?.cell;
+      c(t, l, e);
+    }
+  };
+  return {
+    tableHeaderElement: a,
+    calculatedColumnSizing: m,
+    isResizing: u,
+    resizingCellId: o,
+    handleResizeControlMouseDown: g,
+    handleResizeControlMouseUp: x,
+    resetCells: () => {
+      if (i.value)
+        for (let e in i.value)
+          i.value[e].cell.style.width = i.value[e].initialWidth + "px";
+    },
+    setInitialColumnWidths: () => {
+      if (i.value = W(), i.value)
+        for (let e in i.value)
+          i.value[e].cell.style.width || (i.value[e].cell.style.width = i.value[e].initialWidth + "px");
+    },
+    setProvidedCellWidths: w
+  };
+}
+export {
+  A as useResizeColumns
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.36",
+  "version": "1.4.37",
   "type": "module",
   "files": [
     "dist",
@@ -27,6 +27,7 @@
     "@vueuse/integrations": "^13.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "lodash-es": "^4.17.21",
     "lucide-vue-next": "0.441.0",
     "radix-vue": "1.9.8",
     "sortablejs": "^1",
@@ -40,6 +41,7 @@
     "@rushstack/eslint-patch": "1.10.4",
     "@tsconfig/node18": "18.2.4",
     "@types/jsdom": "21.1.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "20.12.14",
     "@vitejs/plugin-vue": "5.1.3",
     "@vitest/coverage-v8": "2.1.1",

package/src/components/stories/BuiDataTable.story.vue

@@ -8,7 +8,6 @@ import type {
   PaginationState,
   Row,
   RowSelectionState,
-  ColumnSizingState,
   VisibilityState,
   ColumnOrderState
 } from '@tanstack/vue-table'
@@ -69,7 +68,8 @@ const columns: ColumnDef<Task>[] = [
   },
   {
     accessorKey: 'title',
-    header: 'Title'
+    header: 'Title',
+    enableResizing: false
   },
   {
     accessorKey: 'status',
@@ -108,7 +108,7 @@ function updateSelection(val: RowSelectionState) {
 }
 
 const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
-const columnSizing = ref<ColumnSizingState>({ title: 300 })
+const columnSizing = ref<Record<string, number>>({ title: 350, status: 200 })
 const columnOrder = ref<ColumnOrderState>()
 
 type GroupBy = 'none' | 'status' | 'priority'
@@ -190,8 +190,8 @@ function groupName(group: string | number) {
         :data="sortedData"
         v-model:sorting="sorting"
         v-model:pagination="pagination"
-        v-model:column-sizing="columnSizing"
         v-model:column-visibility="columnVisibility"
+        v-model:column-sizing="columnSizing"
         v-model:column-order="columnOrder"
         @update:selection="updateSelection"
         :total-items="totalItems"

package/src/components/ui/table/BuiDataTable.vue

@@ -11,7 +11,6 @@ import type {
   Column,
   ColumnDef,
   ColumnOrderState,
-  ColumnSizingState,
   PaginationState,
   Row,
   RowSelectionState,
@@ -25,7 +24,7 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed, watchEffect, ref, watch } from 'vue'
+import { computed, watchEffect, ref, watch, onMounted, onBeforeMount, onUnmounted } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -48,7 +47,9 @@ import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/u
 import { BuiScrollArea } from '@/components/ui/scroll-area'
 import { BuiButton } from '@/components/ui/button'
 import { Settings2Icon } from 'lucide-vue-next'
-import { useElementSize } from '@vueuse/core'
+import { useElementSize, useEventListener } from '@vueuse/core'
+import { useResizeColumns } from '@/lib/useResizeColumns'
+import { isEqual } from 'lodash-es'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 
@@ -67,6 +68,7 @@ const props = withDefaults(
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
     freezeHeader?: boolean
     enableColumnListControl?: boolean
+    enableColumnResizing?: boolean
     columnSearchPlaceholder?: string
     columnSearchNotFound?: string
     columnResetVisibility?: string
@@ -84,7 +86,8 @@ const props = withDefaults(
     totalItems: 0,
     columnSearchPlaceholder: 'Column name',
     columnSearchNotFound: 'Not found',
-    columnResetVisibility: 'Reset column visibility'
+    columnResetVisibility: 'Reset column visibility',
+    enableColumnResizing: true
   }
 )
 
@@ -92,8 +95,8 @@ const sorting = defineModel<SortingState>('sorting')
 const pagination = defineModel<PaginationState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
 const columnVisibility = defineModel<VisibilityState>('columnVisibility')
-const columnSizing = defineModel<ColumnSizingState>('columnSizing')
 const columnOrder = defineModel<ColumnOrderState>('columnOrder')
+const columnSizing = defineModel<Record<string, number>>('columnSizing')
 const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
@@ -128,18 +131,12 @@ const table = useVueTable({
   onColumnVisibilityChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnVisibility)
   },
-  onColumnSizingChange: (updaterOrValue) => {
-    valueUpdater(updaterOrValue, columnSizing)
-  },
   onColumnOrderChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnOrder)
   },
   autoResetPageIndex: false,
   manualPagination: props.manualPagination, // set to false to enable client-side pagination
   manualSorting: props.manualSorting,
-  enableColumnResizing: true,
-  columnResizeMode: 'onChange',
-  columnResizeDirection: 'ltr',
   state: {
     get sorting() {
       return sorting.value
@@ -153,9 +150,6 @@ const table = useVueTable({
     get columnVisibility() {
       return columnVisibility.value
     },
-    get columnSizing() {
-      return columnSizing.value
-    },
     get columnOrder() {
       return columnOrder.value
     }
@@ -241,6 +235,39 @@ watch(columnsListIds, () => {
 
 const tableHeaderRef = ref<InstanceType<typeof BuiTableHeader> | null>(null)
 const { height } = useElementSize(tableHeaderRef)
+
+const {
+  tableHeaderElement,
+  calculatedColumnSizing,
+  isResizing,
+  resizingCellId,
+  resetCells,
+  handleResizeControlMouseDown,
+  handleResizeControlMouseUp,
+  setInitialColumnWidths,
+  setProvidedCellWidths
+} = useResizeColumns()
+
+onBeforeMount(() => {
+  calculatedColumnSizing.value = columnSizing.value
+})
+
+onMounted(() => {
+  if (tableHeaderRef.value) {
+    tableHeaderElement.value = tableHeaderRef.value
+
+    setProvidedCellWidths(columnSizing.value)
+    setInitialColumnWidths()
+  }
+})
+
+watchEffect(() => {
+  if (!isEqual(calculatedColumnSizing.value, columnSizing.value)) {
+    columnSizing.value = calculatedColumnSizing.value
+  }
+})
+
+useEventListener(document, 'mouseup', handleResizeControlMouseUp)
 </script>
 
 <template>
@@ -272,7 +299,9 @@ const { height } = useElementSize(tableHeaderRef)
             <BuiCommandInput
               :placeholder="columnSearchPlaceholder"
               v-model="searchColumn"
-              @input="(event) => (searchColumn = event.target.value)"
+              @input="
+                (event: InputEvent) => (searchColumn = (event.target as HTMLInputElement)?.value)
+              "
             />
             <BuiCommandList>
               <BuiScrollArea class="h-[300px]">
@@ -295,10 +324,14 @@ const { height } = useElementSize(tableHeaderRef)
     </template>
     <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader" ref="tableHeaderRef">
       <BuiTableHead
-        v-for="header in tableHeaders"
+        v-for="(header, index) in tableHeaders"
         :key="header.id"
-        :style="{ ...getPinningStyle(header.column), width: header.getSize() + 'px' }"
+        :id="`${header.id}_cell`"
+        :style="{
+          ...getPinningStyle(header.column)
+        }"
         :freeze-header="props.freezeHeader"
+        :can-resize="header.column.getCanResize() ? true : undefined"
       >
         <FlexRender
           v-if="!header.isPlaceholder"
@@ -306,12 +339,15 @@ const { height } = useElementSize(tableHeaderRef)
           :props="header.getContext()"
         />
         <div
-          @dblclick="() => header.column.resetSize()"
-          @mousedown="header.getResizeHandler()?.($event)"
+          v-if="
+            enableColumnResizing && index < tableHeaders.length - 1 && header.column.getCanResize()
+          "
+          @dblclick="resetCells"
+          @mousedown="() => handleResizeControlMouseDown(header.id, props.enableColumnResizing)"
           :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',
-              header.column.getIsResizing() ? 'bg-primary opacity-50' : ''
+              isResizing && resizingCellId === header.id ? 'bg-primary opacity-50' : ''
             )
           "
         />

package/src/components/ui/table/BuiTableHead.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <th
     :class="
       cn(
-        'h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
+        'relative h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
         props.class,
         props.freezeHeader ? 'bg-background p-0' : 'bg-foreground/[0.04] p-0'
       )
@@ -19,10 +19,14 @@ const props = defineProps<{
   >
     <div
       class="flex h-full items-center !border-b !border-border/[0.16]"
-      :class="{ 'bg-foreground/[0.04]': props.freezeHeader }"
+      :class="{
+        'bg-foreground/[0.04]': props.freezeHeader,
+        'header-cell_wrapper': !props.freezeHeader
+      }"
     >
       <div
         class="flex h-full w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold"
+        :class="{ 'header-cell_wrapper': props.freezeHeader }"
       >
         <slot />
       </div>

package/src/components/ui/table/BuiTableHeader.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
+import { ref } from 'vue'
+
+const headRef = ref<HTMLElement | null>(null)
+
+defineExpose({ headRef })
 
 const props = defineProps<{
   class?: string
@@ -9,6 +14,7 @@ const props = defineProps<{
 
 <template>
   <thead
+    ref="headRef"
     :class="
       cn(
         '[&_tr]:border-border/[0.16]',