@soft-stech/bootsman-ui-shadcn 1.5.0 → 1.5.1

package/dist/lib/useResizeColumns.d.ts

@@ -1,4 +1,17 @@
 export declare function useResizeColumns(): {
+    cells: import('vue').Ref<{
+        [key: string]: {
+            cell: HTMLTableCellElement;
+            initialWidth: number;
+            minWidth: number;
+        };
+    } | undefined, {
+        [key: string]: {
+            cell: HTMLTableCellElement;
+            initialWidth: number;
+            minWidth: number;
+        };
+    } | undefined>;
     tableHeaderElement: import('vue').Ref<({
         $: import('vue').ComponentInternalInstance;
         $data: {};

package/dist/lib/useResizeColumns.js

@@ -1,89 +1,96 @@
-import { ref as n } from "vue";
+import { ref as o } 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");
+import { useEventListener as M } from "@vueuse/core";
+function b() {
+  const r = o(!1), u = o(""), d = o(""), l = o(void 0), h = 90, x = 56, z = 10, v = 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");
     });
-  }, W = () => {
-    if (a.value && a.value.headRef)
-      return [...a.value.headRef.querySelectorAll("th")].reduce((l, s) => {
-        const h = s.id.split("_")[0];
+  }, E = () => {
+    if (n.value && n.value.headRef)
+      return [...n.value.headRef.querySelectorAll("th")].reduce((i, s) => {
+        const c = a(s);
         return {
-          ...l,
-          [h]: {
+          ...i,
+          [c]: {
             cell: s,
-            initialWidth: s.offsetWidth
+            initialWidth: s.offsetWidth,
+            minWidth: c === "actions" ? z : Math.min(s.offsetWidth, h)
           }
         };
       }, {});
-  }, 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);
+  }, 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);
     }
-  }, x = () => {
-    if (u.value && (u.value = !1, o.value = "", r.value = "", v.value && v.value(), i.value)) {
+  }, g = () => {
+    if (r.value && (r.value = !1, u.value = "", d.value = "", f.value && f.value(), l.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;
+      for (let 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;
       }
-      m.value = e;
+      v.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) => {
+  }, S = (e) => a(e) === "actions" ? x : 0, a = (e) => e.id.split("_")[0], m = (e, t, i) => {
     if (!e || !t) {
-      o.value = "", r.value = "";
+      u.value = "", d.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);
+    const s = i.movementX, c = s < 0 ? "left" : "right", C = Math.floor(parseInt(e.style.width)) + s, W = Math.floor(parseInt(t.style.width)) - s;
+    if (c === "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);
+      } else
+        e.style.width = C + "px", t.style.width = W + "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);
       } 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);
+        e.style.width = C + "px", t.style.width = W + "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);
     }
   };
   return {
-    tableHeaderElement: a,
-    calculatedColumnSizing: m,
-    isResizing: u,
-    resizingCellId: o,
-    handleResizeControlMouseDown: g,
-    handleResizeControlMouseUp: x,
+    cells: l,
+    tableHeaderElement: n,
+    calculatedColumnSizing: v,
+    isResizing: r,
+    resizingCellId: u,
+    handleResizeControlMouseDown: I,
+    handleResizeControlMouseUp: g,
     resetCells: () => {
-      if (i.value)
-        for (let e in i.value)
-          i.value[e].cell.style.width = i.value[e].initialWidth + "px";
+      if (l.value) {
+        const e = {};
+        for (let t in l.value) {
+          const i = l.value[t].initialWidth;
+          l.value[t].cell.style.width = i + "px", e[t] = i;
+        }
+        v.value = e;
+      }
     },
     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");
+      if (l.value = E(), l.value) {
+        const e = {};
+        for (let 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;
+        v.value = e;
+      }
     },
-    setProvidedCellWidths: w
+    setProvidedCellWidths: y
   };
 }
 export {
-  A as useResizeColumns
+  b as useResizeColumns
 };

package/package.json

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

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

@@ -31,7 +31,8 @@ const taskSchema = z.object({
   status: z.string().nullable().optional(),
   label: z.string(),
   priority: z.string(),
-  errorMessage: z.string().optional()
+  errorMessage: z.string().optional(),
+  age: z.string().optional()
 })
 type Task = z.infer<typeof taskSchema>
 
@@ -68,8 +69,7 @@ const columns: ColumnDef<Task>[] = [
   },
   {
     accessorKey: 'title',
-    header: 'Title',
-    enableResizing: false
+    header: 'Title'
   },
   {
     accessorKey: 'status',
@@ -80,6 +80,10 @@ const columns: ColumnDef<Task>[] = [
     accessorKey: 'priority',
     header: ({ column }) => tableColumnSortCommon(column, 'Priorities')
   },
+  {
+    accessorKey: 'age',
+    header: ({ column }) => tableColumnSortCommon(column, 'Age')
+  },
   { id: 'hiddenColumn', header: 'Hidden Column', cell: 'secret info' }
 ]
 const data = ref<Task[]>(tasks)
@@ -108,7 +112,7 @@ function updateSelection(val: RowSelectionState) {
 }
 
 const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
-const columnSizing = ref<Record<string, number>>({ title: 350, status: 200 })
+const columnSizing = ref<Record<string, number>>({ title: 450 })
 const columnOrder = ref<ColumnOrderState>()
 
 type GroupBy = 'none' | 'status' | 'priority'

package/src/components/stories/data/tasks.json

@@ -4,91 +4,104 @@
     "title": "You can't compress the program without quantifying the open-source SSD pixel!",
     "status": "in progress",
     "label": "documentation",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-7878",
     "title": "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!",
     "status": "backlog",
     "label": "documentation",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-7839",
     "title": "We need to bypass the neural TCP card!",
     "status": "todo",
     "label": "bug",
-    "priority": "high"
+    "priority": "high",
+    "age": "4 days"
   },
   {
     "id": "TASK-5562",
     "title": "The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!",
     "status": "backlog",
     "label": "feature",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-8686",
     "title": "I'll parse the wireless SSL protocol, that should driver the API panel!",
     "status": "canceled",
     "label": "feature",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-1280",
     "title": "Use the digital TLS panel, then you can transmit the haptic system!",
     "status": "done",
     "label": "bug",
-    "priority": "high"
+    "priority": "high",
+    "age": "4 days"
   },
   {
     "id": "TASK-7262",
     "title": "The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!",
     "status": "done",
     "label": "feature",
-    "priority": "high"
+    "priority": "high",
+    "age": "4 days"
   },
   {
     "id": "TASK-1138",
     "title": "Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!",
     "status": "in progress",
     "label": "feature",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-7184",
     "title": "We need to program the back-end THX pixel!",
     "status": "todo",
     "label": "feature",
-    "priority": "low"
+    "priority": "low",
+    "age": "4 days"
   },
   {
     "id": "TASK-5160",
     "title": "Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!",
     "status": "in progress",
     "label": "documentation",
-    "priority": "high"
+    "priority": "high",
+    "age": "4 days"
   },
   {
     "id": "TASK-5618",
     "title": "Generating the driver won't do anything, we need to index the online SSL application!",
     "status": "done",
     "label": "documentation",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-6699",
     "title": "I'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!",
     "status": "backlog",
     "label": "documentation",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-2858",
     "title": "We need to override the online UDP bus!",
     "status": "backlog",
     "label": "bug",
-    "priority": "medium"
+    "priority": "medium",
+    "age": "4 days"
   },
   {
     "id": "TASK-9864",

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

@@ -24,7 +24,16 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed, watchEffect, ref, watch, onMounted, onBeforeMount, onUnmounted } from 'vue'
+import {
+  computed,
+  watchEffect,
+  ref,
+  watch,
+  onMounted,
+  onBeforeMount,
+  onUnmounted,
+  nextTick
+} from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -128,8 +137,12 @@ const table = useVueTable({
   onRowSelectionChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, rowSelection)
   },
-  onColumnVisibilityChange: (updaterOrValue) => {
+  onColumnVisibilityChange: async (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnVisibility)
+
+    await nextTick()
+
+    setInitialColumnWidths()
   },
   onColumnOrderChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnOrder)

package/src/lib/useResizeColumns.ts

@@ -3,16 +3,16 @@ import BuiTableHeader from '@/components/ui/table/BuiTableHeader.vue'
 import { useEventListener } from '@vueuse/core'
 
 export function useResizeColumns() {
+  type CELL = {
+    [key: string]: { cell: HTMLTableCellElement; initialWidth: number; minWidth: number }
+  }
   const isResizing = ref<boolean>(false)
   const resizingCellId = ref<string>('')
   const neighborCellId = ref<string>('')
-  const cells = ref<
-    | {
-        [key: string]: { cell: HTMLTableCellElement; initialWidth: number }
-      }
-    | undefined
-  >(undefined)
-  const minCellWidth = ref<number>(90)
+  const cells = ref<CELL | undefined>(undefined)
+  const MIN_CELL_WIDTH = 90
+  const LAST_CELL_EXTRA_SPACE = 56
+  const ACTIONS_CELL_MIN_WIDTH = 10
   const calculatedColumnSizing = ref<Record<string, number> | undefined>(undefined)
   const tableHeaderElement = ref<InstanceType<typeof BuiTableHeader> | null>(null)
   const unregisterMouseMove = ref<Function | undefined>(undefined)
@@ -23,7 +23,7 @@ export function useResizeColumns() {
 
       //установить заданные как модель изначальные размеры
       headerCells.forEach((cell) => {
-        const cellId = cell.id.split('_')[0]
+        const cellId = getCellId(cell)
 
         if (columnSizing && columnSizing[cellId]) {
           cell.style.width = columnSizing[cellId] + 'px'
@@ -35,15 +35,17 @@ export function useResizeColumns() {
   const getCells = () => {
     if (tableHeaderElement.value && tableHeaderElement.value.headRef) {
       const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
-      const headerCellsWidths: {
-        [key: string]: { cell: HTMLTableCellElement; initialWidth: number }
-      } = headerCells.reduce((acc, cell) => {
-        const cellId = cell.id.split('_')[0]
+      const headerCellsWidths: CELL = headerCells.reduce((acc, cell) => {
+        const cellId = getCellId(cell)
         return {
           ...acc,
           [cellId]: {
             cell: cell,
-            initialWidth: cell.offsetWidth
+            initialWidth: cell.offsetWidth,
+            minWidth:
+              cellId === 'actions'
+                ? ACTIONS_CELL_MIN_WIDTH
+                : Math.min(cell.offsetWidth, MIN_CELL_WIDTH)
           }
         }
       }, {})
@@ -92,8 +94,8 @@ export function useResizeColumns() {
         const currentCell = cells.value[cell]
         const newWidth = !currentCell.cell.hasAttribute('can-resize')
           ? currentCell.initialWidth
-          : Math.floor(currentCell.cell.offsetWidth) <= minCellWidth.value
-            ? minCellWidth.value
+          : Math.floor(currentCell.cell.offsetWidth) <= currentCell.minWidth
+            ? currentCell.minWidth
             : currentCell.cell.offsetWidth
 
         currentCell.cell.style.width = newWidth + 'px'
@@ -103,18 +105,19 @@ export function useResizeColumns() {
       calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }
-  const getLastCellOnTheRightExtraSpace = (cell: HTMLTableCellElement) => {
-    if (!cell.nextElementSibling) {
-      const cellWrapperElement = cell.querySelector('.header-cell_wrapper') as HTMLElement | null
 
-      if (cellWrapperElement) {
-        return parseInt(window.getComputedStyle(cellWrapperElement).paddingRight)
-      }
+  const getLastCellOnTheRightExtraSpace = (cell: HTMLTableCellElement) => {
+    if (getCellId(cell) === 'actions') {
+      return LAST_CELL_EXTRA_SPACE
     }
 
     return 0
   }
 
+  const getCellId = (cell: HTMLTableCellElement) => {
+    return cell.id.split('_')[0]
+  }
+
   const resizeCells = (
     cell: HTMLTableCellElement | null,
     neighborCell: HTMLTableCellElement | null,
@@ -133,7 +136,12 @@ export function useResizeColumns() {
     const newNeighborCellWidth = Math.floor(parseInt(neighborCell.style.width)) - movementX
 
     if (direction === 'left') {
-      if (newCellWidth <= minCellWidth.value || !cell.hasAttribute('can-resize')) {
+      const min =
+        cells.value && cells.value[getCellId(cell)]
+          ? cells.value[getCellId(cell)].minWidth
+          : MIN_CELL_WIDTH
+
+      if (newCellWidth <= min || !cell.hasAttribute('can-resize')) {
         const nextCell = cell.previousElementSibling as HTMLTableCellElement | null
 
         resizeCells(nextCell, neighborCell, e)
@@ -142,11 +150,13 @@ export function useResizeColumns() {
         neighborCell.style.width = newNeighborCellWidth + 'px'
       }
     } else {
-      if (
-        newNeighborCellWidth <=
-          minCellWidth.value + getLastCellOnTheRightExtraSpace(neighborCell) ||
-        !neighborCell.hasAttribute('can-resize')
-      ) {
+      const min =
+        cells.value && cells.value[getCellId(neighborCell)]
+          ? cells.value[getCellId(neighborCell)].minWidth +
+            getLastCellOnTheRightExtraSpace(neighborCell)
+          : MIN_CELL_WIDTH
+
+      if (newNeighborCellWidth <= min || !neighborCell.hasAttribute('can-resize')) {
         const nextNeighborCell = neighborCell.nextElementSibling as HTMLTableCellElement | null
 
         resizeCells(cell, nextNeighborCell, e)
@@ -170,9 +180,16 @@ export function useResizeColumns() {
 
   const resetCells = () => {
     if (cells.value) {
+      const updatedColumnSizingValue: Record<string, number> = {}
+
       for (let cell in cells.value) {
-        cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
+        const inititalWidth = cells.value[cell].initialWidth
+
+        cells.value[cell].cell.style.width = inititalWidth + 'px'
+        updatedColumnSizingValue[cell] = inititalWidth
       }
+
+      calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }
 
@@ -180,15 +197,22 @@ export function useResizeColumns() {
     cells.value = getCells()
 
     if (cells.value) {
+      const updatedColumnSizingValue: Record<string, number> = {}
+
       for (let cell in cells.value) {
         if (!cells.value[cell].cell.style.width) {
           cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
         }
+
+        updatedColumnSizingValue[cell] = cells.value[cell].cell.offsetWidth
       }
+
+      calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }
 
   return {
+    cells,
     tableHeaderElement,
     calculatedColumnSizing,
     isResizing,