feat: refs #8655 made VnTable to use VnScroll button

src/App.vue

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

src/components/VnTable/VnTable.vue

@@ -32,6 +32,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
+import VnScroll from '../common/VnScroll.vue'
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -166,13 +167,13 @@ const tableRef = ref();
 const params = ref(useFilterParams($attrs['data-key']).params);
 const orders = ref(useFilterParams($attrs['data-key']).orders);
 const app = inject('app');
+const vnScrollRef = ref(null);
 
 const editingRow = ref(null);
 const editingField = ref(null);
 const isTableMode = computed(() => mode.value == TABLE_MODE);
 const selectRegex = /select/;
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
-const showButton = ref(false);
 const tableModes = [
     {
         icon: 'view_column',
@@ -187,21 +188,17 @@ const tableModes = [
         disable: $props.disableOption?.card,
     },
 ];
-const scrollToTop = () => {
-  if (tableRef.value) {
-    const virtualScrollContainer = tableRef.value.$el.querySelector('.q-table__middle');
-    if (isTableMode) {
-      virtualScrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
-      showButton.value = false;
+
+const onVirtualScroll = ({ to }) => {
+  const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
+  if (virtualScrollContainer) {
+    virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
+    if (vnScrollRef.value) {
+      vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
     }
   }
 };
 
-const onVirtualScroll = ({ index }) => {
-  showButton.value = index !== 0;
-  handleScroll();
-};
-
 onBeforeMount(() => {
     const urlParams = route.query[$props.searchUrl];
     hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
@@ -234,16 +231,6 @@ onUnmounted(async () => {
     if ($props.isEditable) document.removeEventListener('click', clickHandler);
 });
 
-watch(
-    mode,
-    (newMode) => {
-        if (newMode === CARD_MODE) {
-            showButton.value = false;
-        }
-    },
-    { immediate: true }
-);
-
 watch(
     () => $props.columns,
     (value) => splitColumns(value),
@@ -653,16 +640,6 @@ const rowCtrlClickFunction = computed(() => {
 });
 </script>
 <template>
-    <QBtn
-        v-show="showButton"
-        round
-        color="primary"
-        icon="arrow_upward"
-        class="scroll-to-top"
-        @click="scrollToTop"
-    >
-    <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
-    </QBtn>
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
         <template #right-panel>
             <VnTableFilter
@@ -1110,6 +1087,12 @@ const rowCtrlClickFunction = computed(() => {
             </template>
         </FormModelPopup>
     </QDialog>
+    <VnScroll 
+      ref="vnScrollRef"
+      v-if="isTableMode"
+      :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
+      mode="table"
+    />
 </template>
 <i18n>
 en:
@@ -1317,11 +1300,4 @@ es:
 label.header-filter > .q-field__inner > .q-field__control {
     padding: inherit;
 }
-
-.scroll-to-top {
-  position: fixed;
-  top: 70px;
-  left: 50%;
-  z-index: 1000;
-}
 </style>

src/components/common/VnScroll.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 const props = defineProps({
-    scrollTarget: { type: [String, Object], default: 'window' } // Puede ser un selector o un ref
+    scrollTarget: { type: [String, Object], default: 'window' },
+    mode: { type: String, default: 'window' }
 });
 
 const scrollPosition = ref(0);
@@ -10,7 +11,11 @@ const showButton = ref(false);
 let scrollContainer = null;
 
 const onScroll = () => {
-    scrollPosition.value = scrollContainer.scrollTop || window.scrollY;
+    if (!scrollContainer) return;
+    scrollPosition.value = 
+        props.mode === 'table' 
+            ? scrollContainer.scrollTop 
+            : window.scrollY;
 };
 
 watch(scrollPosition, (newValue) => {
@@ -18,41 +23,79 @@ watch(scrollPosition, (newValue) => {
 });
 
 const scrollToTop = () => {
-    scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+    if (scrollContainer) {
+        scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+    }
 };
 
-onMounted(() => {
-    scrollContainer = props.scrollTarget === 'window' ? window : document.querySelector(props.scrollTarget);
+const updateScrollContainer = (container) => {
+  if (container) {
+    if (scrollContainer) {
+      scrollContainer.removeEventListener('scroll', onScroll);
+    }
+    scrollContainer = container;
+    scrollContainer.addEventListener('scroll', onScroll);
+    onScroll();
+  }
+};
+
+defineExpose({
+  updateScrollContainer
+});
+
+const initScrollContainer = async () => {
+    await nextTick();
+
+    if (props.mode === 'table') {
+        if (typeof props.scrollTarget === 'object') {
+            scrollContainer = props.scrollTarget;
+        } else {
+            scrollContainer = document.querySelector(props.scrollTarget);
+        }
+
+        if (!scrollContainer && props.scrollTarget !== 'window') {
+            setTimeout(initScrollContainer, 100);
+            return;
+        }
+    } else {
+        scrollContainer = window;
+    }
 
     if (scrollContainer) {
         scrollContainer.addEventListener('scroll', onScroll);
+        onScroll();
     }
+};
+
+onMounted(() => {
+    initScrollContainer();
 });
 
 onUnmounted(() => {
     if (scrollContainer) {
         scrollContainer.removeEventListener('scroll', onScroll);
+        scrollContainer = null;
     }
 });
 </script>
 
 <template>
-    <QBtn
+    <QIcon
         v-if="showButton"
-        round
         color="primary"
-        icon="arrow_upward"
+        name="keyboard_arrow_up"
         class="scroll-to-top"
         @click="scrollToTop"
     >
         <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
-    </QBtn>
+    </QIcon>
 </template>
 
 <style scoped>
 .scroll-to-top {
   position: fixed;
   top: 70px;
+  font-size: 50px;
   left: 50%;
   z-index: 1000;
 }