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

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,

package/src/tailwind-preset.ts

@@ -28,6 +28,7 @@ export default {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        sidebar: 'hsl(var(--side-bar))',
         primary: {
           DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
           foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'