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

package/src/lib/useResizeColumns.ts

@@ -0,0 +1,202 @@
+import { ref } from 'vue'
+import BuiTableHeader from '@/components/ui/table/BuiTableHeader.vue'
+import { useEventListener } from '@vueuse/core'
+
+export function useResizeColumns() {
+  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 calculatedColumnSizing = ref<Record<string, number> | undefined>(undefined)
+  const tableHeaderElement = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+  const unregisterMouseMove = ref<Function | undefined>(undefined)
+
+  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 = cell.id.split('_')[0]
+
+        if (columnSizing && columnSizing[cellId]) {
+          cell.style.width = columnSizing[cellId] + 'px'
+        }
+      })
+    }
+  }
+
+  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]
+        return {
+          ...acc,
+          [cellId]: {
+            cell: cell,
+            initialWidth: cell.offsetWidth
+          }
+        }
+      }, {})
+
+      return headerCellsWidths
+    }
+
+    return undefined
+  }
+
+  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)
+    }
+  }
+
+  const handleResizeControlMouseUp = () => {
+    if (!isResizing.value) return
+
+    isResizing.value = false
+    resizingCellId.value = ''
+    neighborCellId.value = ''
+
+    if (unregisterMouseMove.value) {
+      unregisterMouseMove.value()
+    }
+
+    if (cells.value) {
+      const updatedColumnSizingValue: Record<string, number> = {}
+
+      for (let cell in cells.value) {
+        const currentCell = cells.value[cell]
+        const newWidth = !currentCell.cell.hasAttribute('can-resize')
+          ? currentCell.initialWidth
+          : Math.floor(currentCell.cell.offsetWidth) <= minCellWidth.value
+            ? minCellWidth.value
+            : currentCell.cell.offsetWidth
+
+        currentCell.cell.style.width = newWidth + 'px'
+        updatedColumnSizingValue[cell] = newWidth
+      }
+
+      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)
+      }
+    }
+
+    return 0
+  }
+
+  const resizeCells = (
+    cell: HTMLTableCellElement | null,
+    neighborCell: HTMLTableCellElement | null,
+    e: MouseEvent
+  ) => {
+    if (!cell || !neighborCell) {
+      resizingCellId.value = ''
+      neighborCellId.value = ''
+
+      return
+    }
+
+    const movementX = e.movementX
+    const direction: 'left' | 'right' = movementX < 0 ? 'left' : 'right'
+    const newCellWidth = Math.floor(parseInt(cell.style.width)) + movementX
+    const newNeighborCellWidth = Math.floor(parseInt(neighborCell.style.width)) - movementX
+
+    if (direction === 'left') {
+      if (newCellWidth <= minCellWidth.value || !cell.hasAttribute('can-resize')) {
+        const nextCell = cell.previousElementSibling as HTMLTableCellElement | null
+
+        resizeCells(nextCell, neighborCell, e)
+      } else {
+        cell.style.width = newCellWidth + 'px'
+        neighborCell.style.width = newNeighborCellWidth + 'px'
+      }
+    } else {
+      if (
+        newNeighborCellWidth <=
+          minCellWidth.value + getLastCellOnTheRightExtraSpace(neighborCell) ||
+        !neighborCell.hasAttribute('can-resize')
+      ) {
+        const nextNeighborCell = neighborCell.nextElementSibling as HTMLTableCellElement | null
+
+        resizeCells(cell, nextNeighborCell, e)
+      } else {
+        cell.style.width = newCellWidth + 'px'
+        neighborCell.style.width = newNeighborCellWidth + 'px'
+      }
+    }
+  }
+
+  const handleCellResize = (e: MouseEvent) => {
+    e.preventDefault()
+
+    if (cells.value) {
+      const resizingCell = cells.value[resizingCellId.value]?.cell
+      const neighborCell = cells.value[neighborCellId.value]?.cell
+
+      resizeCells(resizingCell, neighborCell, e)
+    }
+  }
+
+  const resetCells = () => {
+    if (cells.value) {
+      for (let cell in cells.value) {
+        cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
+      }
+    }
+  }
+
+  const setInitialColumnWidths = () => {
+    cells.value = getCells()
+
+    if (cells.value) {
+      for (let cell in cells.value) {
+        if (!cells.value[cell].cell.style.width) {
+          cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
+        }
+      }
+    }
+  }
+
+  return {
+    tableHeaderElement,
+    calculatedColumnSizing,
+    isResizing,
+    resizingCellId,
+    handleResizeControlMouseDown,
+    handleResizeControlMouseUp,
+    resetCells,
+    setInitialColumnWidths,
+    setProvidedCellWidths
+  }
+}

package/dist/BuiTableHead.vue_vue_type_script_setup_true_lang-Bz1T89Vm.js

@@ -1,32 +0,0 @@
-import { defineComponent as l, openBlock as n, createElementBlock as a, normalizeClass as r, unref as d, createElementVNode as o, renderSlot as c } from "vue";
-import { g as f } from "./utils-C11OfLQK.js";
-const p = { class: "flex h-full w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold" }, u = /* @__PURE__ */ l({
-  __name: "BuiTableHead",
-  props: {
-    class: {},
-    freezeHeader: { type: Boolean }
-  },
-  setup(t) {
-    const e = t;
-    return (s, i) => (n(), a("th", {
-      class: r(
-        d(f)(
-          "h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ",
-          e.class,
-          e.freezeHeader ? "bg-background p-0" : "bg-foreground/[0.04] p-0"
-        )
-      )
-    }, [
-      o("div", {
-        class: r(["flex h-full items-center !border-b !border-border/[0.16]", { "bg-foreground/[0.04]": e.freezeHeader }])
-      }, [
-        o("div", p, [
-          c(s.$slots, "default")
-        ])
-      ], 2)
-    ], 2));
-  }
-});
-export {
-  u as _
-};

package/dist/BuiTableHeader.vue_vue_type_script_setup_true_lang-H9TKoH8p.js

@@ -1,26 +0,0 @@
-import { defineComponent as d, openBlock as l, createElementBlock as o, normalizeClass as s, unref as i, renderSlot as a } from "vue";
-import { g as c } from "./utils-C11OfLQK.js";
-const _ = /* @__PURE__ */ d({
-  __name: "BuiTableHeader",
-  props: {
-    class: {},
-    freezeHeader: { type: Boolean }
-  },
-  setup(r) {
-    const e = r;
-    return (t, n) => (l(), o("thead", {
-      class: s(
-        i(c)(
-          "[&_tr]:border-border/[0.16]",
-          e.class,
-          e.freezeHeader ? "sticky top-0 z-[1] [&_th:first-child>div>div]:pl-3 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-14 [&_tr:last-child]:border-b-0" : "[&_th:first-child>div]:pl-3 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-14 [&_tr]:border-b"
-        )
-      )
-    }, [
-      a(t.$slots, "default")
-    ], 2));
-  }
-});
-export {
-  _
-};