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

package/dist/lib/useResizeColumns.js

@@ -1,16 +1,18 @@
 import { ref as o, computed as H } from "vue";
 import "vee-validate";
 import { useEventListener as N } from "@vueuse/core";
-const C = 90, j = 56, X = 10;
+const R = 90, j = 56, X = 10;
 function V() {
-  const p = o(!1), W = o(""), R = o(""), t = o(void 0), n = o(void 0), d = o(null), l = o(null), M = o(0), h = o(0), m = o(void 0), w = (e) => {
+  const p = o(!1), W = o(""), C = o(""), t = o(void 0), n = o(void 0), d = o(null), l = o(null), M = o(0), h = o(0), m = o(void 0), w = (e) => {
     d.value && d.value.headRef && [...d.value.headRef.querySelectorAll("th")].forEach((u) => {
       const s = r(u);
-      u.style.width = e && e[s] ? e[s] + "px" : "";
+      u.style.width = e && e[s] && e[s] !== 0 ? e[s] + "px" : "";
     });
   }, E = () => {
     if (d.value && d.value.headRef && l.value && l.value?.tableRef) {
-      const e = [...d.value.headRef.querySelectorAll("th")], a = g();
+      const e = [...d.value.headRef.querySelectorAll("th")];
+      n.value && n.value.table === 0 && (n.value = {}, l.value.tableRef.style.width = "");
+      const a = x();
       l.value.tableRef.style.width = "min-content";
       const u = e.reduce((s, i, f, c) => {
         const b = r(i);
@@ -21,7 +23,7 @@ function V() {
             isLast: f === c.length - 1,
             initialWidth: Math.floor(i.offsetWidth),
             baseWidth: Math.floor(i.offsetWidth),
-            minWidth: b === "actions" ? X : i.offsetWidth < C ? C : i.offsetWidth
+            minWidth: b === "actions" ? X : i.offsetWidth < R ? R : i.offsetWidth
           }
         };
       }, {});
@@ -35,11 +37,11 @@ function V() {
     if (a && (p.value = !0, W.value = e, t.value)) {
       const u = t.value[e].cell;
       let s = u.nextElementSibling;
-      s || (s = u.previousElementSibling), R.value = s ? s.id.split("_")[0] : "", m.value = N(document, "mousemove", A);
+      s || (s = u.previousElementSibling), C.value = s ? s.id.split("_")[0] : "", m.value = N(document, "mousemove", _);
     }
   }, z = (e) => {
     const a = e.target;
-    if (y.value = a.className.includes && a.className.includes("resize-handler"), !!p.value && (p.value = !1, W.value = "", R.value = "", m.value && m.value(), t.value)) {
+    if (y.value = a.className.includes && a.className.includes("resize-handler"), !!p.value && (p.value = !1, W.value = "", C.value = "", m.value && m.value(), t.value)) {
       const u = {};
       for (const s in t.value) {
         const i = t.value[s], f = i.cell.hasAttribute("can-resize") ? Math.floor(i.cell.offsetWidth) <= i.minWidth ? i.minWidth : i.cell.offsetWidth : i.initialWidth;
@@ -50,30 +52,30 @@ function V() {
   }, I = (e) => r(e) === "actions" ? j : 0, v = H(() => {
     if (t.value)
       return Object.values(t.value).find((e) => e.isLast);
-  }), r = (e) => e.id.split("_")[0], _ = (e, a) => {
+  }), r = (e) => e.id.split("_")[0], A = (e, a) => {
     if (!e || !l.value?.tableRef || !v.value) {
-      W.value = "", R.value = "";
+      W.value = "", C.value = "";
       return;
     }
     const u = a.movementX, s = u < 0 ? "left" : "right", i = Math.floor(parseInt(e.style.width)) + u, f = Math.floor(parseInt(l.value?.tableRef?.style.width)) + u, c = Math.floor(parseInt(v.value.cell.style.width)) - u;
     if (s === "left") {
-      const b = t.value && t.value[r(e)] ? t.value[r(e)].minWidth : C;
+      const b = t.value && t.value[r(e)] ? t.value[r(e)].minWidth : R;
       if (i >= b)
         e.style.width = i + "px", f >= h.value ? l.value.tableRef.style.width = f + "px" : (l.value.tableRef.style.width = h.value + "px", v.value.cell.style.width = c + "px");
       else
         return;
     } else {
-      const b = t.value && t.value[r(v.value.cell)] ? t.value[r(v.value.cell)].minWidth + I(v.value.cell) : C;
+      const b = t.value && t.value[r(v.value.cell)] ? t.value[r(v.value.cell)].minWidth + I(v.value.cell) : R;
       c >= b && l.value.tableRef.offsetWidth <= h.value ? v.value.cell.style.width = c + "px" : l.value.tableRef.style.width = f + "px", e.style.width = i + "px";
     }
-  }, A = (e) => {
+  }, _ = (e) => {
     if (e.preventDefault(), t.value) {
       const a = t.value[W.value]?.cell;
-      _(a, e);
+      A(a, e);
     }
-  }, S = () => {
-    t.value && l.value && l.value?.tableRef && (l.value.tableRef.style.width = "", n.value = {}, x());
-  }, O = (e) => {
+  }, O = () => {
+    t.value && l.value && l.value?.tableRef && (l.value.tableRef.style.width = "", n.value = {}, g());
+  }, S = (e) => {
     if (t.value && n.value && v.value && l.value && l.value?.tableRef) {
       const a = t.value[e].baseWidth, u = n.value[e], s = a - u;
       let i = n.value.table + s;
@@ -83,14 +85,14 @@ function V() {
       }
       t.value[e].cell.style.width = a + "px", l.value.tableRef.style.width = i + "px", n.value[e] = a, n.value.table = i;
     }
-  }, D = () => l.value && l.value.scrollAreaElementRef?.tableWrapperRef ? l.value.scrollAreaElementRef?.tableWrapperRef.$el.offsetWidth - 3 : 0, g = () => l.value && l.value?.tableRef ? l.value.tableRef.offsetWidth : 0, x = () => {
+  }, D = () => l.value && l.value.scrollAreaElementRef?.tableWrapperRef ? l.value.scrollAreaElementRef?.tableWrapperRef.$el.offsetWidth - 3 : 0, x = () => l.value && l.value?.tableRef ? l.value.tableRef.offsetWidth : 0, g = () => {
     if (t.value = E(), t.value) {
       const e = {};
       for (const a in t.value)
         t.value[a].cell.style.width || (t.value[a].cell.style.width = t.value[a].initialWidth + "px"), t.value[a].cell.style.minWidth = t.value[a].minWidth + "px", e[a] = t.value[a].cell.offsetWidth;
       if (l.value && l.value?.tableRef) {
-        const a = g();
-        n.value?.table && !l.value.tableRef.style.width ? l.value.tableRef.style.width = n.value.table + "px" : (M.value = a, l.value.tableRef.style.width = a + "px", e.table = a);
+        const a = x();
+        n.value?.table && !l.value.tableRef.style.width ? l.value.tableRef.style.width = n.value.table + "px" : (M.value = a, l.value.tableRef.style.width = a + "px", l.value.tableRef.setAttribute("initialResize", "set"), e.table = a);
       }
       h.value = D(), n.value = e;
     }
@@ -104,9 +106,9 @@ function V() {
     resizingCellId: W,
     handleResizeControlMouseDown: T,
     handleResizeControlMouseUp: z,
-    resetCell: O,
-    resetCells: S,
-    setInitialColumnWidths: x,
+    resetCell: S,
+    resetCells: O,
+    setInitialColumnWidths: g,
     setProvidedCellWidths: w,
     isMouseDownOnHandler: L,
     isMouseUpOnHandler: y

package/package.json

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

package/src/components/table/BuiDataTable.vue

@@ -299,16 +299,35 @@ const {
   isMouseUpOnHandler
 } = useResizeColumns()
 
+const isColumnSizingEnabled = computed(() => props.enableColumnResizing && columnSizing.value)
+
 onBeforeMount(() => {
   calculatedColumnSizing.value = columnSizing.value
 })
 
 onMounted(() => {
-  if (tableElementRef.value && tableHeaderRef.value) {
+  if (isColumnSizingEnabled.value && tableElementRef.value && tableHeaderRef.value) {
     tableElement.value = tableElementRef.value
     tableHeaderElement.value = tableHeaderRef.value
 
-    setInitialColumnWidths()
+    //проставляем изначальные значения ширины колонок, только если на маунте таблицу видно
+    if (tableElementRef.value.tableRef?.offsetWidth !== 0) {
+      setInitialColumnWidths()
+    }
+
+    //дополнительно проставляем значения ширины колонок, когда таблица появляется на экране
+    const { stop } = useIntersectionObserver(
+      tableElementRef.value.tableRef,
+      ([{ isIntersecting }]) => {
+        if (isIntersecting) {
+          if (!tableElementRef.value?.tableRef?.getAttribute('initialResize')) {
+            setInitialColumnWidths()
+          }
+
+          stop()
+        }
+      }
+    )
   }
 
   groupsOpenStateInStorage.value = {}
@@ -587,7 +606,7 @@ watch(rowsLength, async () => {
           />
           <div
             v-if="
-              enableColumnResizing &&
+              isColumnSizingEnabled &&
               index < tableHeaders.length - 1 &&
               header.column.getCanResize()
             "

package/src/lib/useResizeColumns.ts

@@ -36,7 +36,10 @@ export function useResizeColumns() {
       headerCells.forEach((cell) => {
         const cellId = getCellId(cell)
 
-        cell.style.width = columnSizing && columnSizing[cellId] ? columnSizing[cellId] + 'px' : ''
+        cell.style.width =
+          columnSizing && columnSizing[cellId] && columnSizing[cellId] !== 0
+            ? columnSizing[cellId] + 'px'
+            : ''
       })
     }
   }
@@ -49,6 +52,12 @@ export function useResizeColumns() {
       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 tableInitialWidth = getTableWidth()
 
       tableElement.value.tableRef.style.width = 'min-content'
@@ -316,11 +325,14 @@ export function useResizeColumns() {
         } else {
           initialTableWidth.value = tableOffsetWidth
           tableElement.value.tableRef.style.width = tableOffsetWidth + 'px'
+
+          tableElement.value.tableRef.setAttribute('initialResize', 'set')
           updatedColumnSizingValue['table'] = tableOffsetWidth
         }
       }
 
       minTableWidth.value = getTableWrapperWidth()
+
       calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }