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

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/BuiAutoFormFieldInput.vue_vue_type_script_setup_true_lang-D4RSWQ2a.js

@@ -1,58 +0,0 @@
-import { defineComponent as _, computed as b, openBlock as i, createBlock as r, unref as o, withCtx as a, createVNode as n, normalizeProps as m, guardReactiveProps as l, createTextVNode as d, toDisplayString as f, createCommentVNode as s, renderSlot as g, resolveDynamicComponent as $, mergeProps as y } from "vue";
-import { _ as B } from "./BuiAutoFormLabel.vue_vue_type_script_setup_true_lang-NhOJHYJA.js";
-import { beautifyObjectName as N } from "./components/ui/auto-form/utils.js";
-import { Field as C } from "vee-validate";
-import { d as k, a as q, c as F, f as h } from "./utils-C11OfLQK.js";
-import { BuiInput as v } from "./components/ui/input/index.js";
-import "@vueuse/core";
-import { BuiTextarea as P } from "./components/ui/textarea/index.js";
-const L = /* @__PURE__ */ _({
-  __name: "BuiAutoFormFieldInput",
-  props: {
-    fieldName: {},
-    label: {},
-    required: { type: Boolean },
-    config: {},
-    disabled: { type: Boolean }
-  },
-  setup(p) {
-    const u = p, c = b(() => u.config?.component === "textarea" ? P : v);
-    return (e, V) => (i(), r(o(C), { name: e.fieldName }, {
-      default: a((t) => [
-        n(o(k), m(l(e.$attrs)), {
-          default: a(() => [
-            e.config?.hideLabel ? s("", !0) : (i(), r(B, {
-              key: 0,
-              required: e.required
-            }, {
-              default: a(() => [
-                d(f(e.config?.label || o(N)(e.label ?? e.fieldName)), 1)
-              ]),
-              _: 1
-            }, 8, ["required"])),
-            n(o(q), null, {
-              default: a(() => [
-                g(e.$slots, "default", m(l(t)), () => [
-                  (i(), r($(c.value), y({ type: "text" }, { ...t.componentField, ...e.config?.inputProps }, { disabled: e.disabled }), null, 16, ["disabled"]))
-                ])
-              ]),
-              _: 2
-            }, 1024),
-            e.config?.description ? (i(), r(o(F), { key: 1 }, {
-              default: a(() => [
-                d(f(e.config.description), 1)
-              ]),
-              _: 1
-            })) : s("", !0),
-            n(o(h))
-          ]),
-          _: 2
-        }, 1040)
-      ]),
-      _: 3
-    }, 8, ["name"]));
-  }
-});
-export {
-  L as _
-};

package/dist/BuiAutoFormFieldNumber.vue_vue_type_script_setup_true_lang-Db9bTqM3.js

@@ -1,57 +0,0 @@
-import { defineComponent as f, openBlock as o, createBlock as n, unref as i, withCtx as r, createVNode as a, createTextVNode as t, toDisplayString as m, createCommentVNode as d, renderSlot as s, normalizeProps as u, guardReactiveProps as p, mergeProps as c } from "vue";
-import { _ } from "./BuiAutoFormLabel.vue_vue_type_script_setup_true_lang-NhOJHYJA.js";
-import { beautifyObjectName as b } from "./components/ui/auto-form/utils.js";
-import { Field as g } from "vee-validate";
-import { d as N, a as y, c as $, f as B } from "./utils-C11OfLQK.js";
-import { BuiInput as h } from "./components/ui/input/index.js";
-import "@vueuse/core";
-const v = /* @__PURE__ */ f({
-  inheritAttrs: !1,
-  __name: "BuiAutoFormFieldNumber",
-  props: {
-    fieldName: {},
-    label: {},
-    required: { type: Boolean },
-    config: {},
-    disabled: { type: Boolean }
-  },
-  setup(k) {
-    return (e, q) => (o(), n(i(g), { name: e.fieldName }, {
-      default: r((l) => [
-        a(i(N), null, {
-          default: r(() => [
-            e.config?.hideLabel ? d("", !0) : (o(), n(_, {
-              key: 0,
-              required: e.required
-            }, {
-              default: r(() => [
-                t(m(e.config?.label || i(b)(e.label ?? e.fieldName)), 1)
-              ]),
-              _: 1
-            }, 8, ["required"])),
-            a(i(y), null, {
-              default: r(() => [
-                s(e.$slots, "default", u(p(l)), () => [
-                  a(i(h), c({ type: "number" }, { ...l.componentField, ...e.config?.inputProps }, { disabled: e.disabled }), null, 16, ["disabled"])
-                ])
-              ]),
-              _: 2
-            }, 1024),
-            e.config?.description ? (o(), n(i($), { key: 1 }, {
-              default: r(() => [
-                t(m(e.config.description), 1)
-              ]),
-              _: 1
-            })) : d("", !0),
-            a(i(B))
-          ]),
-          _: 2
-        }, 1024)
-      ]),
-      _: 3
-    }, 8, ["name"]));
-  }
-});
-export {
-  v as _
-};

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 {
-  _
-};