verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 77 Releases Wiki Activity

feat: #8655 added button for scrolling up #1523

Merged
provira merged 34 commits from 8655-scrollUpButton into dev 2025-04-15 11:26:07 +00:00
Conversation 2 Commits 34 Files Changed 8 +31 -5
4 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 27866e7090 - Show all commits

10
src/components/VnTable/VnTable.vue
View File

@ -226,6 +226,16 @@ onUnmounted(async () => {
if ($props.isEditable) document.removeEventListener('click', clickHandler);
});
watch(
mode,
(newMode) => {
if (newMode === CARD_MODE) {
showButton.value = false;
}
},
{ immediate: true }
);
provira marked this conversation as resolved Outdated
alexm commented 2025-03-13 06:45:51 +00:00
Outdated
Review
Copy Link

Ver si se puede capturar el evento al hacer scroll de QTable (para no poner watchers ni ifs)

Ver si se puede capturar el evento al hacer scroll de QTable (para no poner watchers ni ifs)
watch(
() => $props.columns,
(value) => splitColumns(value),

24
src/components/common/VnScroll.vue
View File

@ -1,11 +1,16 @@
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
scrollTarget: { type: [String, Object], default: 'window' } // Puede ser un selector o un ref
});
const scrollPosition = ref(0);
const showButton = ref(false);
let scrollContainer = null;
const onScroll = () => {
scrollPosition.value = window.scrollY;
scrollPosition.value = scrollContainer.scrollTop || window.scrollY;
};
watch(scrollPosition, (newValue) => {
@ -13,17 +18,24 @@ watch(scrollPosition, (newValue) => {
});
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
};
onMounted(() => {
window.addEventListener('scroll', onScroll);
scrollContainer = props.scrollTarget === 'window' ? window : document.querySelector(props.scrollTarget);
if (scrollContainer) {
scrollContainer.addEventListener('scroll', onScroll);
}
});
onUnmounted(() => {
window.removeEventListener('scroll', onScroll);
if (scrollContainer) {
scrollContainer.removeEventListener('scroll', onScroll);
}
});
</script>
<template>
<QBtn
v-if="showButton"
@ -32,7 +44,9 @@ onUnmounted(() => {
icon="arrow_upward"
class="scroll-to-top"
@click="scrollToTop"
alexm commented 2025-03-27 13:08:00 +00:00
Review
Copy Link

Yo esto lo simplificaria a:

const initScrollContainer = async () => {
await nextTick();
let scrollContainer  = window;
    if (props.target) {
        if (typeof props.scrollTarget === 'object') {
            scrollContainer = props.scrollTarget;
        } else {
            scrollContainer = document.querySelector(props.scrollTarget);
        }
    }

    if (!scrollContainer) return
        scrollContainer.addEventListener('scroll', onScroll);    
};
Yo esto lo simplificaria a: ``` const initScrollContainer = async () => { await nextTick(); let scrollContainer = window; if (props.target) { if (typeof props.scrollTarget === 'object') { scrollContainer = props.scrollTarget; } else { scrollContainer = document.querySelector(props.scrollTarget); } } if (!scrollContainer) return scrollContainer.addEventListener('scroll', onScroll); }; ```
provira commented 2025-03-27 13:25:03 +00:00
Review
Copy Link

Se carga el window scroll. Esta solución funciona y reduce el codigo innecesario, además se puede prescindir de la prop mode (ya no es necesaria):

const initScrollContainer = async () => {
    await nextTick();

    if (typeof props.scrollTarget === 'object') {
        scrollContainer = props.scrollTarget;
    } else {
        scrollContainer = window;
    }

    if (!scrollContainer) return
        scrollContainer.addEventListener('scroll', onScroll);    
};
Se carga el window scroll. Esta solución funciona y reduce el codigo innecesario, además se puede prescindir de la prop mode (ya no es necesaria): ``` const initScrollContainer = async () => { await nextTick(); if (typeof props.scrollTarget === 'object') { scrollContainer = props.scrollTarget; } else { scrollContainer = window; } if (!scrollContainer) return scrollContainer.addEventListener('scroll', onScroll); }; ```
/>
>
<QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
</QBtn>
</template>
<style scoped>

1
src/i18n/locale/en.yml
View File

@ -6,6 +6,7 @@ globals:
quantity: Quantity
entity: Entity
preview: Preview
scrollToTop: Go up
user: User
details: Details
collapseMenu: Collapse lateral menu

1
src/i18n/locale/es.yml
View File

@ -6,6 +6,7 @@ globals:
quantity: Cantidad
entity: Entidad
preview: Vista previa
scrollToTop: Ir arriba
user: Usuario
details: Detalles
collapseMenu: Contraer menú lateral