cynx-lib 1.3.64 → 1.3.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.64",
+  "version": "1.3.65",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/vue/components/Table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted, watch, nextTick } from "vue";
 import {
   ChevronUp,
   ChevronDown,
@@ -64,6 +64,45 @@ const emit = defineEmits<{
 const rootRef = ref<HTMLElement | null>(null);
 const headerScrollRef = ref<HTMLElement | null>(null);
 const bodyScrollRef = ref<HTMLElement | null>(null);
+const gutterWidth = ref(0);
+
+const updateGutter = () => {
+  if (bodyScrollRef.value) {
+    const hasVScroll = bodyScrollRef.value.scrollHeight > bodyScrollRef.value.clientHeight;
+    if (hasVScroll) {
+      const scrollWidth = bodyScrollRef.value.offsetWidth - bodyScrollRef.value.clientWidth;
+      gutterWidth.value = scrollWidth > 0 ? scrollWidth : 6;
+    } else {
+      gutterWidth.value = 0;
+    }
+  } else {
+    gutterWidth.value = 0;
+  }
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (bodyScrollRef.value && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      updateGutter();
+    });
+    resizeObserver.observe(bodyScrollRef.value);
+  }
+  nextTick(updateGutter);
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(
+  () => [props.data, props.columns, props.loading],
+  () => {
+    nextTick(updateGutter);
+  },
+  { deep: true }
+);
 
 const handleBodyScroll = () => {
   if (headerScrollRef.value && bodyScrollRef.value) {
@@ -148,6 +187,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
               minWidth: formatWidth(col.minWidth || col.width || 100),
             }"
           />
+          <col v-if="gutterWidth > 0" :style="{ width: `${gutterWidth}px` }" />
         </colgroup>
         <thead>
           <tr>
@@ -198,6 +238,11 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                 </span>
               </div>
             </th>
+            <th
+              v-if="gutterWidth > 0"
+              class="bg-[#f8fafc] dark:bg-[#16192e] p-0 border-0 pointer-events-none"
+              :style="{ width: `${gutterWidth}px`, minWidth: `${gutterWidth}px` }"
+            />
           </tr>
         </thead>
       </table>