@soft-stech/bootsman-ui-shadcn 2.0.23 → 2.0.24

package/src/lib/useResizeColumns.ts

@@ -6,6 +6,7 @@ import { useEventListener } from '@vueuse/core'
 const MIN_CELL_WIDTH = 90
 const LAST_CELL_EXTRA_SPACE = 56
 const ACTIONS_CELL_MIN_WIDTH = 10
+const TABLE_ID = 'table'
 
 export function useResizeColumns() {
   type CELL = {
@@ -14,12 +15,10 @@ export function useResizeColumns() {
       initialWidth: number
       minWidth: number
       baseWidth: number
-      isLast: boolean
     }
   }
   const isResizing = ref<boolean>(false)
   const resizingCellId = ref<string>('')
-  const neighborCellId = ref<string>('')
   const cells = ref<CELL | undefined>(undefined)
   const calculatedColumnSizing = ref<Record<string, number> | undefined>(undefined)
   const tableHeaderElement = ref<InstanceType<typeof BuiTableHeader> | null>(null)
@@ -27,156 +26,148 @@ export function useResizeColumns() {
   const initialTableWidth = ref<number>(0)
   const minTableWidth = ref<number>(0)
   const unregisterMouseMove = ref<(() => void) | undefined>(undefined)
+  const isMouseDownOnHandler = ref<boolean>(false)
+  const isMouseUpOnHandler = ref<boolean>(false)
 
   const setProvidedCellWidths = (columnSizing: Record<string, number> | undefined) => {
-    if (tableHeaderElement.value && tableHeaderElement.value.headRef) {
-      const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
-
-      //установить заданные как модель изначальные размеры
-      headerCells.forEach((cell) => {
-        const cellId = getCellId(cell)
-
-        cell.style.width =
-          columnSizing && columnSizing[cellId] && columnSizing[cellId] !== 0
-            ? columnSizing[cellId] + 'px'
-            : ''
-      })
-    }
+    if (!tableHeaderElement.value?.headRef || !columnSizing) return
+
+    const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
+
+    //установить заданные как модель изначальные размеры
+    headerCells.forEach((cell) => {
+      const cellId = getCellId(cell)
+      const width = columnSizing[cellId]
+
+      cell.style.width = width && width !== 0 ? columnSizing[cellId] + 'px' : ''
+    })
   }
 
   const getCells = () => {
-    if (
-      tableHeaderElement.value &&
-      tableHeaderElement.value.headRef &&
-      tableElement.value &&
-      tableElement.value?.tableRef
-    ) {
-      const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
-
-      if (calculatedColumnSizing.value && calculatedColumnSizing.value['table'] === 0) {
-        calculatedColumnSizing.value = {}
-        tableElement.value.tableRef.style.width = ''
-      }
+    const tableRef = tableElement.value?.tableRef
+    const headRef = tableHeaderElement.value?.headRef
 
-      const tableInitialWidth = getTableWidth()
-
-      tableElement.value.tableRef.style.width = 'min-content'
-
-      const headerCellsWidths: CELL = headerCells.reduce((acc, cell, index, array) => {
-        const cellId = getCellId(cell)
-
-        return {
-          ...acc,
-          [cellId]: {
-            cell: cell,
-            isLast: index === array.length - 1,
-            initialWidth: Math.floor(cell.offsetWidth),
-            baseWidth: Math.floor(cell.offsetWidth),
-            minWidth:
-              cellId === 'actions'
-                ? ACTIONS_CELL_MIN_WIDTH
-                : cell.offsetWidth < MIN_CELL_WIDTH
-                  ? MIN_CELL_WIDTH
-                  : cell.offsetWidth
-          }
-        }
-      }, {})
+    if (!headRef || !tableRef) return undefined
+
+    const headerCells = [...headRef.querySelectorAll('th')]
+
+    if (calculatedColumnSizing.value?.[TABLE_ID] === 0) {
+      calculatedColumnSizing.value = {}
+      tableRef.style.width = ''
+    }
 
-      tableElement.value.tableRef.style.width = ''
+    const tableInitialWidth = getTableWidth()
+
+    tableRef.style.width = 'min-content'
+
+    const headerCellsWidths: CELL = headerCells.reduce((acc, cell) => {
+      const cellId = getCellId(cell)
+      const offsetWidth = Math.floor(cell.offsetWidth)
+      const minWidth =
+        cellId === 'actions'
+          ? ACTIONS_CELL_MIN_WIDTH
+          : cell.offsetWidth < MIN_CELL_WIDTH
+            ? MIN_CELL_WIDTH
+            : cell.offsetWidth
+
+      return {
+        ...acc,
+        [cellId]: {
+          cell: cell,
+          initialWidth: offsetWidth,
+          baseWidth: offsetWidth,
+          minWidth: minWidth
+        }
+      }
+    }, {})
 
-      Object.values(headerCellsWidths).forEach((cellElement) => {
-        cellElement.baseWidth = Math.floor(cellElement.cell.offsetWidth)
-      })
+    tableRef.style.width = ''
 
-      setProvidedCellWidths(calculatedColumnSizing.value)
-      tableElement.value.tableRef.style.width =
-        (calculatedColumnSizing.value?.['table'] || tableInitialWidth) + 'px'
+    Object.values(headerCellsWidths).forEach((cellElement) => {
+      cellElement.baseWidth = Math.floor(cellElement.cell.offsetWidth)
+    })
 
-      Object.values(headerCellsWidths).forEach((cellElement) => {
-        cellElement.initialWidth = Math.floor(cellElement.cell.offsetWidth)
-      })
+    setProvidedCellWidths(calculatedColumnSizing.value)
+    tableRef.style.width = (calculatedColumnSizing.value?.[TABLE_ID] || tableInitialWidth) + 'px'
 
-      return headerCellsWidths
-    }
+    Object.values(headerCellsWidths).forEach((cellElement) => {
+      cellElement.initialWidth = Math.floor(cellElement.cell.offsetWidth)
+    })
 
-    return undefined
+    return headerCellsWidths
   }
 
-  const isMouseDownOnHandler = ref<boolean>(false)
-  const isMouseUpOnHandler = ref<boolean>(false)
-
   const handleResizeControlMouseDown = (cellId: string, enableColumnResizing: boolean) => {
     if (!enableColumnResizing) return
 
     isResizing.value = true
     resizingCellId.value = cellId
-
-    if (cells.value) {
-      const resizingCell = cells.value[cellId].cell
-      let neighborCell = resizingCell.nextElementSibling as HTMLTableCellElement
-
-      if (!neighborCell) {
-        neighborCell = resizingCell.previousElementSibling as HTMLTableCellElement
-      }
-
-      neighborCellId.value = neighborCell ? neighborCell.id.split('_')[0] : ''
-
-      unregisterMouseMove.value = useEventListener(document, 'mousemove', handleCellResize)
-    }
+    unregisterMouseMove.value = useEventListener(document, 'mousemove', handleCellResize)
   }
 
   const handleResizeControlMouseUp = (e: Event) => {
     const targetHTMLElement = e.target as HTMLElement
-    isMouseUpOnHandler.value =
-      targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
+    isMouseUpOnHandler.value = targetHTMLElement.className?.includes?.('resize-handler') || false
 
     if (!isResizing.value) return
 
+    cleanupResizeState()
+    updateColumnSizingAfterResize()
+  }
+
+  const cleanupResizeState = () => {
     isResizing.value = false
     resizingCellId.value = ''
-    neighborCellId.value = ''
 
     if (unregisterMouseMove.value) {
       unregisterMouseMove.value()
+      unregisterMouseMove.value = undefined
     }
+  }
 
-    if (cells.value) {
-      const updatedColumnSizingValue: Record<string, number> = {}
-
-      for (const cell in cells.value) {
-        const currentCell = cells.value[cell]
-        const newWidth = !currentCell.cell.hasAttribute('can-resize')
-          ? currentCell.initialWidth
-          : Math.floor(currentCell.cell.offsetWidth) <= currentCell.minWidth
-            ? currentCell.minWidth
-            : currentCell.cell.offsetWidth
+  const updateColumnSizingAfterResize = () => {
+    if (!cells.value || !tableElement.value?.tableRef) return
 
-        currentCell.cell.style.width = newWidth + 'px'
-        updatedColumnSizingValue[cell] = newWidth
-      }
+    const updatedColumnSizingValue: Record<string, number> = {}
 
-      if (tableElement.value && tableElement.value?.tableRef) {
-        updatedColumnSizingValue['table'] = tableElement.value.tableRef.offsetWidth
-      }
+    for (const cell in cells.value) {
+      const currentCell = cells.value[cell]
+      const newWidth = !currentCell.cell.hasAttribute('can-resize')
+        ? currentCell.initialWidth
+        : Math.floor(currentCell.cell.offsetWidth) <= currentCell.minWidth
+          ? currentCell.minWidth
+          : currentCell.cell.offsetWidth
 
-      calculatedColumnSizing.value = updatedColumnSizingValue
+      currentCell.cell.style.width = newWidth + 'px'
+      updatedColumnSizingValue[cell] = newWidth
     }
-  }
 
-  const getLastCellOnTheRightExtraSpace = (cell: HTMLTableCellElement) => {
-    if (getCellId(cell) === 'actions') {
-      return LAST_CELL_EXTRA_SPACE
-    }
+    updatedColumnSizingValue[TABLE_ID] = tableElement.value.tableRef.offsetWidth
+    calculatedColumnSizing.value = updatedColumnSizingValue
+  }
 
-    return 0
+  const getLastCellOnTheRightExtraSpace = (cellId: string) => {
+    return cellId === 'actions' ? LAST_CELL_EXTRA_SPACE : 0
   }
 
   const lastCell = computed(() => {
-    if (cells.value) {
-      return Object.values(cells.value).find((cell) => cell.isLast)
-    }
+    if (!cells.value || !tableHeaderElement.value?.headRef) return undefined
+
+    const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
+    if (headerCells.length === 0) return undefined
 
-    return undefined
+    const lastCellElement = headerCells[headerCells.length - 1]
+    return cells.value[getCellId(lastCellElement)]
+  })
+
+  const secondToLastCell = computed(() => {
+    if (!cells.value || !tableHeaderElement.value?.headRef) return undefined
+
+    const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
+    if (headerCells.length < 2) return undefined
+
+    const secondToLastCellElement = headerCells[headerCells.length - 2]
+    return cells.value[getCellId(secondToLastCellElement)]
   })
 
   const getCellId = (cell: HTMLTableCellElement) => {
@@ -186,7 +177,6 @@ export function useResizeColumns() {
   const resizeCells = (cell: HTMLTableCellElement | null, e: MouseEvent) => {
     if (!cell || !tableElement.value?.tableRef || !lastCell.value) {
       resizingCellId.value = ''
-      neighborCellId.value = ''
 
       return
     }
@@ -194,8 +184,8 @@ export function useResizeColumns() {
     const movementX = e.movementX
     const direction: 'left' | 'right' = movementX < 0 ? 'left' : 'right'
     const newCellWidth = Math.floor(parseInt(cell.style.width)) + movementX
-    const newTableWidth =
-      Math.floor(parseInt(tableElement.value?.tableRef?.style.width)) + movementX
+
+    const newTableWidth = Math.floor(parseInt(tableElement.value.tableRef.style.width)) + movementX
     const newLastCellWidth = Math.floor(parseInt(lastCell.value.cell.style.width)) - movementX
 
     if (direction === 'left') {
@@ -217,10 +207,10 @@ export function useResizeColumns() {
         return
       }
     } else {
+      const lastCellId = getCellId(lastCell.value.cell)
       const min =
-        cells.value && cells.value[getCellId(lastCell.value.cell)]
-          ? cells.value[getCellId(lastCell.value.cell)].minWidth +
-            getLastCellOnTheRightExtraSpace(lastCell.value.cell)
+        cells.value && cells.value[lastCellId]
+          ? cells.value[lastCellId].minWidth + getLastCellOnTheRightExtraSpace(lastCellId)
           : MIN_CELL_WIDTH
 
       if (
@@ -239,104 +229,196 @@ export function useResizeColumns() {
   const handleCellResize = (e: MouseEvent) => {
     e.preventDefault()
 
-    if (cells.value) {
-      const resizingCell = cells.value[resizingCellId.value]?.cell
+    if (!cells.value) return
 
-      resizeCells(resizingCell, e)
-    }
+    const resizingCell = cells.value[resizingCellId.value]?.cell
+    resizeCells(resizingCell, e)
   }
 
   const resetCells = () => {
-    if (cells.value && tableElement.value && tableElement.value?.tableRef) {
-      tableElement.value.tableRef.style.width = ''
+    if (!cells.value || !tableElement.value?.tableRef) return
 
-      calculatedColumnSizing.value = {}
-      setInitialColumnWidths()
-    }
+    tableElement.value.tableRef.style.width = ''
+    calculatedColumnSizing.value = {}
+    setInitialColumnWidths()
   }
 
   const resetCell = (cellId: string) => {
     if (
-      cells.value &&
-      calculatedColumnSizing.value &&
-      lastCell.value &&
-      tableElement.value &&
-      tableElement.value?.tableRef
-    ) {
-      const thisCellBaseWidth = cells.value[cellId].baseWidth
-      const thisCellCurrentWidth = calculatedColumnSizing.value[cellId]
-      const diff = thisCellBaseWidth - thisCellCurrentWidth
-
-      let newTableWidth = calculatedColumnSizing.value['table'] + diff
-
-      if (newTableWidth < minTableWidth.value) {
-        const tableWidthDiff = minTableWidth.value - newTableWidth
-        const newLastCellWidth =
-          calculatedColumnSizing.value[getCellId(lastCell.value.cell)] + tableWidthDiff
+      !cells.value ||
+      !calculatedColumnSizing.value ||
+      !lastCell.value ||
+      !tableElement.value?.tableRef
+    )
+      return
+
+    const updatedColumnSizingValue: Record<string, number> = { ...calculatedColumnSizing.value }
 
+    const cellData = cells.value[cellId]
+    const thisCellBaseWidth = cellData.baseWidth
+    const thisCellCurrentWidth = calculatedColumnSizing.value[cellId]
+    const diff = thisCellBaseWidth - thisCellCurrentWidth
+
+    let newTableWidth = calculatedColumnSizing.value[TABLE_ID] + diff
+    let lastCellId = getCellId(lastCell.value.cell)
+
+    if (newTableWidth < minTableWidth.value) {
+      const tableWidthDiff = minTableWidth.value - newTableWidth
+      let newLastCellWidth: number
+
+      if (cellId === lastCellId) {
+        //если ресетим последнюю колонку, то восстанавливаем ее ширину за счет соседней слева
+        if (!secondToLastCell.value) {
+          resetCells()
+          return
+        }
+
+        lastCellId = getCellId(secondToLastCell.value.cell)
+        newLastCellWidth = calculatedColumnSizing.value[lastCellId] + tableWidthDiff
+        secondToLastCell.value.cell.style.width = newLastCellWidth + 'px'
+      } else {
+        newLastCellWidth =
+          calculatedColumnSizing.value[getCellId(lastCell.value.cell)] + tableWidthDiff
         lastCell.value.cell.style.width = newLastCellWidth + 'px'
-        newTableWidth = minTableWidth.value
       }
 
-      cells.value[cellId].cell.style.width = thisCellBaseWidth + 'px'
-      tableElement.value.tableRef.style.width = newTableWidth + 'px'
-      calculatedColumnSizing.value[cellId] = thisCellBaseWidth
-      calculatedColumnSizing.value['table'] = newTableWidth
+      newTableWidth = minTableWidth.value
+      updatedColumnSizingValue[lastCellId] = newLastCellWidth
     }
+
+    cells.value[cellId].cell.style.width = thisCellBaseWidth + 'px'
+    tableElement.value.tableRef.style.width = newTableWidth + 'px'
+    updatedColumnSizingValue[cellId] = thisCellBaseWidth
+    updatedColumnSizingValue[TABLE_ID] = newTableWidth
+
+    calculatedColumnSizing.value = updatedColumnSizingValue
   }
 
   const getTableWrapperWidth = () => {
-    if (tableElement.value && tableElement.value.scrollAreaElementRef?.tableWrapperRef) {
-      return tableElement.value.scrollAreaElementRef?.tableWrapperRef.$el.offsetWidth - 3
-    }
-
-    return 0
+    return tableElement.value?.scrollAreaElementRef?.tableWrapperRef?.$el.offsetWidth - 3 || 0
   }
 
   const getTableWidth = () => {
-    if (tableElement.value && tableElement.value?.tableRef) {
-      return tableElement.value.tableRef.offsetWidth
-    }
-
-    return 0
+    return tableElement.value?.tableRef?.offsetWidth || 0
   }
 
   const setInitialColumnWidths = () => {
     cells.value = getCells()
 
-    if (cells.value) {
-      const updatedColumnSizingValue: Record<string, number> = {}
-
-      for (const cell in cells.value) {
-        if (!cells.value[cell].cell.style.width) {
-          cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
-        }
+    if (!cells.value) return
 
-        cells.value[cell].cell.style.minWidth = cells.value[cell].minWidth + 'px'
+    const updatedColumnSizingValue: Record<string, number> = {}
 
-        updatedColumnSizingValue[cell] = cells.value[cell].cell.offsetWidth
+    for (const cell in cells.value) {
+      if (!cells.value[cell].cell.style.width) {
+        cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
       }
 
-      if (tableElement.value && tableElement.value?.tableRef) {
-        const tableOffsetWidth = getTableWidth()
+      cells.value[cell].cell.style.minWidth = cells.value[cell].minWidth + 'px'
+      updatedColumnSizingValue[cell] = cells.value[cell].cell.offsetWidth
+    }
+
+    if (tableElement.value?.tableRef) {
+      const tableOffsetWidth = getTableWidth()
+      const tableWrapperWidth = getTableWrapperWidth()
+      minTableWidth.value = tableWrapperWidth
+      tableElement.value.tableRef.setAttribute('initialResize', 'set')
 
-        if (calculatedColumnSizing.value?.['table'] && !tableElement.value.tableRef.style.width) {
-          tableElement.value.tableRef.style.width = calculatedColumnSizing.value['table'] + 'px'
+      if (calculatedColumnSizing.value?.[TABLE_ID] && !tableElement.value.tableRef.style.width) {
+        tableElement.value.tableRef.style.width = calculatedColumnSizing.value[TABLE_ID] + 'px'
+      } else {
+        if (tableOffsetWidth < minTableWidth.value) {
+          setTableFullScreen()
         } else {
           initialTableWidth.value = tableOffsetWidth
           tableElement.value.tableRef.style.width = tableOffsetWidth + 'px'
+          updatedColumnSizingValue[TABLE_ID] = tableOffsetWidth
+        }
+      }
+    }
+
+    calculatedColumnSizing.value = updatedColumnSizingValue
+  }
+
+  const setColumnWidthsOnColumnVisibilityChange = () => {
+    if (!tableHeaderElement.value?.headRef || !cells.value) return
+
+    const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
+    const updatedColumnSizingValue: Record<string, number> = {}
+
+    headerCells.forEach((cell, index, array) => {
+      const cellId = getCellId(cell)
+
+      if (cells.value) {
+        cells.value[cellId].cell = cell
+      }
 
-          tableElement.value.tableRef.setAttribute('initialResize', 'set')
-          updatedColumnSizingValue['table'] = tableOffsetWidth
+      if (index < array.length - 1) {
+        const storedWidth = calculatedColumnSizing.value?.[cellId]
+
+        if (storedWidth) {
+          cell.style.width = storedWidth + 'px'
+          updatedColumnSizingValue[cellId] = storedWidth
+        } else {
+          cell.style.width = ''
+
+          const baseWidth = cells.value?.[cellId]?.baseWidth || cell.offsetWidth
+          const minWidth = cells.value?.[cellId]?.minWidth || MIN_CELL_WIDTH
+          cell.style.width = baseWidth + 'px'
+          cell.style.minWidth = minWidth + 'px'
+          updatedColumnSizingValue[cellId] = baseWidth
         }
+      } else {
+        const newLastCellWidth = cells.value?.[cellId]?.baseWidth || cell.offsetWidth
+        updatedColumnSizingValue[cellId] = newLastCellWidth
       }
+    })
+
+    const wouldBeTableWidth = Object.values(updatedColumnSizingValue).reduce(
+      (acc, value) => (acc += value),
+      0
+    )
 
+    if (tableElement.value?.tableRef) {
       minTableWidth.value = getTableWrapperWidth()
+      const newTableWidth = Math.max(wouldBeTableWidth, minTableWidth.value)
+      tableElement.value.tableRef.style.width = newTableWidth + 'px'
+      updatedColumnSizingValue[TABLE_ID] = newTableWidth
+    }
+
+    if (lastCell.value) {
+      lastCell.value.cell.style.width = ''
+      const newLastCellWidth = Math.floor(lastCell.value.cell.offsetWidth)
+      updatedColumnSizingValue[getCellId(lastCell.value.cell)] = newLastCellWidth
+      lastCell.value.cell.style.width = newLastCellWidth + 'px'
+    }
+
+    calculatedColumnSizing.value = updatedColumnSizingValue
+  }
+
+  const setColumnWidthsOnWindowResize = () => {
+    const tableWidth = getTableWidth()
+    minTableWidth.value = getTableWrapperWidth()
 
-      calculatedColumnSizing.value = updatedColumnSizingValue
+    if (tableWidth < minTableWidth.value) {
+      setTableFullScreen()
     }
   }
 
+  const setTableFullScreen = () => {
+    if (!lastCell.value || !calculatedColumnSizing.value || !tableElement.value?.tableRef) return
+
+    const lastCellId = getCellId(lastCell.value.cell)
+
+    calculatedColumnSizing.value[TABLE_ID] = minTableWidth.value
+    tableElement.value.tableRef.style.width = minTableWidth.value + 'px'
+    lastCell.value.cell.style.width = ''
+
+    const newLastCellWidth = Math.floor(lastCell.value.cell.offsetWidth)
+    calculatedColumnSizing.value[lastCellId] = newLastCellWidth
+    lastCell.value.cell.style.width = newLastCellWidth + 'px'
+  }
+
   return {
     cells,
     tableElement,
@@ -350,6 +432,8 @@ export function useResizeColumns() {
     resetCells,
     setInitialColumnWidths,
     setProvidedCellWidths,
+    setColumnWidthsOnColumnVisibilityChange,
+    setColumnWidthsOnWindowResize,
     isMouseDownOnHandler,
     isMouseUpOnHandler
   }