sprintify-ui 0.8.27 → 0.8.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.27",
+  "version": "0.8.28",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseTable.vue

@@ -99,7 +99,6 @@ function scrollTop() {
 }
 
 // Virtual Scrolling
-
 const virtualScrollingDefaultRowHeight = ref(null) as Ref<number | null | undefined>;
 function setVirtualScrollingDefaultRowHeight(height: number) {
   virtualScrollingDefaultRowHeight.value = height;

package/src/components/BaseTableRow.vue

@@ -21,10 +21,10 @@
 <script lang="ts" setup>
 import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
-import { useIntersectionObserver } from '@vueuse/core';
 import { cellClasses } from '../services/table/classes';
 import { CellConfig, TableProps } from '../services/table/types';
 import { ComputedRef, Ref } from 'vue';
+import { debounce } from 'lodash';
 
 defineOptions({
   inheritAttrs: false,
@@ -40,13 +40,66 @@ const isHead = computed(() => baseTableHead !== undefined);
 
 // Virtual scrolling
 
+const trRef = ref<HTMLTableRowElement | null>(null);
+const inViewport = ref(false);
+const trRenderedHeight = ref(undefined) as Ref<number | undefined>;
+
 const baseTableVirtualScrollingDefaultRowHeight = inject('table:virtualScrollingDefaultRowHeight', undefined) as ComputedRef<number> | undefined;
 const setVirtualScrollingDefaultRowHeight = inject('table:setVirtualScrollingDefaultRowHeight', undefined) as ((height: number) => void) | undefined;
 
-const inViewport = ref(false);
-const trRef = ref<HTMLTableRowElement | null>(null);
+const onScrollDebounce = debounce(onScroll, 10);
 
-const trRenderedHeight = ref(undefined) as Ref<number | undefined>;
+window.addEventListener('scroll', onScrollDebounce);
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScrollDebounce);
+});
+
+onMounted(() => {
+  onScroll();
+});
+
+
+function onScroll() {
+
+  if (isHead.value) {
+    return;
+  }
+
+  if (!baseTable?.value?.virtualScrolling) {
+    return;
+  }
+
+  const isInViewport = isElementInViewport();
+
+  inViewport.value = isInViewport;
+
+  if (isInViewport) {
+    nextTick(() => {
+      trRenderedHeight.value = trRef.value?.offsetHeight;
+
+      if (trRenderedHeight.value && setVirtualScrollingDefaultRowHeight) {
+        setVirtualScrollingDefaultRowHeight(trRenderedHeight.value);
+      }
+    });
+  }
+}
+
+function isElementInViewport() {
+
+  if (!trRef.value) {
+    return false;
+  }
+
+  const rect = trRef.value.getBoundingClientRect();
+
+  const offsetY = 500;
+
+  return (
+    rect.top >= -offsetY &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetY
+  );
+}
 
 const height = computed(() => {
   if (isHead.value) {
@@ -84,31 +137,7 @@ const cellClass = computed(() => {
   return cellClasses(cellConfig.value) + ' text-white border-t border-gray-200';
 });
 
-if (!isHead.value && baseTable.value.virtualScrolling) {
-
-  const margin = '300px';
-
-  useIntersectionObserver(
-    trRef,
-    ([{ isIntersecting }]) => {
-
-      inViewport.value = isIntersecting;
-
-      if (isIntersecting) {
-        nextTick(() => {
-          trRenderedHeight.value = trRef.value?.offsetHeight;
-
-          if (trRenderedHeight.value && setVirtualScrollingDefaultRowHeight) {
-            setVirtualScrollingDefaultRowHeight(trRenderedHeight.value);
-          }
-        });
-      }
-    },
-    {
-      rootMargin: margin,
-    }
-  );
-}
+// Emit
 
 const emit = defineEmits(['click', 'mouseenter', 'mouseleave']);