feat: refs #8655 simplified code

src/App.vue

@@ -39,7 +39,7 @@ quasar.iconMapFn = (iconName) => {
 
 <template>
     <RouterView />
-    <VnScroll mode="window" />
+    <VnScroll/>
 </template>
 
 <style lang="scss">

src/components/VnTable/VnTable.vue

@@ -190,13 +190,14 @@ const tableModes = [
 ];
 
 const onVirtualScroll = ({ to }) => {
-  const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
+    handleScroll();
-  if (virtualScrollContainer) {
+    const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
-    virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
+    if (virtualScrollContainer) {
-    if (vnScrollRef.value) {
+      virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
-      vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
+      if (vnScrollRef.value) {
+        vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
+      }
     }
-  }
 };
 
 onBeforeMount(() => {
@@ -336,7 +337,13 @@ function handleOnDataSaved(_) {
     if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
     else $props.create.onDataSaved(_);
 }
-
+function handleScroll() {
+    if ($props.crudModel.disableInfiniteScroll) return;		
+    const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');		
+    const { scrollHeight, scrollTop, clientHeight } = tMiddle;		
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;		
+    if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();		
+}
 function handleSelection({ evt, added, rows: selectedRows }, rows) {
     if (evt?.shiftKey && added) {
         const rowIndex = selectedRows[0].$index;
@@ -1090,7 +1097,6 @@ const rowCtrlClickFunction = computed(() => {
       ref="vnScrollRef"
       v-if="isTableMode"
       :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
-      mode="table"
     />
 </template>
 <i18n>

src/components/common/VnScroll.vue

@@ -2,8 +2,7 @@
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 const props = defineProps({
-    scrollTarget: { type: [String, Object], default: 'window' },
+    scrollTarget: { type: [String, Object], default: 'window' }
-    mode: { type: String, default: 'window' }
 });
 
 const scrollPosition = ref(0);
@@ -13,7 +12,7 @@ let scrollContainer = null;
 const onScroll = () => {
     if (!scrollContainer) return;
     scrollPosition.value = 
-        props.mode === 'table' 
+        typeof props.scrollTarget === 'object' 
             ? scrollContainer.scrollTop 
             : window.scrollY;
 };
@@ -46,27 +45,17 @@ defineExpose({
 const initScrollContainer = async () => {
     await nextTick();
 
-    if (props.mode === 'table') {
+    if (typeof props.scrollTarget === 'object') {
-        if (typeof props.scrollTarget === 'object') {
+        scrollContainer = props.scrollTarget;
-            scrollContainer = props.scrollTarget;
-        } else {
-            scrollContainer = document.querySelector(props.scrollTarget);
-        }
-
-        if (!scrollContainer && props.scrollTarget !== 'window') {
-            setTimeout(initScrollContainer, 100);
-            return;
-        }
     } else {
         scrollContainer = window;
     }
 
-    if (scrollContainer) {
+    if (!scrollContainer) return
-        scrollContainer.addEventListener('scroll', onScroll);
+        scrollContainer.addEventListener('scroll', onScroll);    
-        onScroll();
-    }
 };
 
+
 onMounted(() => {
     initScrollContainer();
 });