vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #3802 - Improve folder structure for nuxt configurations

Browse source
This commit is contained in:
mertsincan 2023-03-26 06:22:57 +01:00
parent 851950270b
commit f5fe822afb
563 changed files with 1703 additions and 1095 deletions
Download patch file Download diff file Expand all files Collapse all files

148
components/scrolltop/ScrollTop.vue
View file

@ -1,148 +0,0 @@
<template>
<transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave">
<button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button" :aria-label="scrollTopAriaLabel">
<span :class="iconClass"></span>
</button>
</transition>
</template>
<script>
import { DomHandler, ZIndexUtils } from 'primevue/utils';
export default {
name: 'ScrollTop',
scrollListener: null,
container: null,
props: {
target: {
type: String,
default: 'window'
},
threshold: {
type: Number,
default: 400
},
icon: {
type: String,
default: 'pi pi-chevron-up'
},
behavior: {
type: String,
default: 'smooth'
}
},
data() {
return {
visible: false
};
},
mounted() {
if (this.target === 'window') this.bindDocumentScrollListener();
else if (this.target === 'parent') this.bindParentScrollListener();
},
beforeUnmount() {
if (this.target === 'window') this.unbindDocumentScrollListener();
else if (this.target === 'parent') this.unbindParentScrollListener();
if (this.container) {
ZIndexUtils.clear(this.container);
this.overlay = null;
}
},
methods: {
onClick() {
let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
scrollElement.scroll({
top: 0,
behavior: this.behavior
});
},
checkVisibility(scrollY) {
if (scrollY > this.threshold) this.visible = true;
else this.visible = false;
},
bindParentScrollListener() {
this.scrollListener = () => {
this.checkVisibility(this.$el.parentElement.scrollTop);
};
this.$el.parentElement.addEventListener('scroll', this.scrollListener);
},
bindDocumentScrollListener() {
this.scrollListener = () => {
this.checkVisibility(DomHandler.getWindowScrollTop());
};
window.addEventListener('scroll', this.scrollListener);
},
unbindParentScrollListener() {
if (this.scrollListener) {
this.$el.parentElement.removeEventListener('scroll', this.scrollListener);
this.scrollListener = null;
}
},
unbindDocumentScrollListener() {
if (this.scrollListener) {
window.removeEventListener('scroll', this.scrollListener);
this.scrollListener = null;
}
},
onEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
},
onAfterLeave(el) {
ZIndexUtils.clear(el);
},
containerRef(el) {
this.container = el;
}
},
computed: {
containerClass() {
return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
},
iconClass() {
return ['p-scrolltop-icon', this.icon];
},
scrollTopAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.scrollTop : undefined;
}
}
};
</script>
<style>
.p-scrolltop {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.p-scrolltop-sticky {
position: sticky;
}
.p-scrolltop-sticky.p-link {
margin-left: auto;
}
.p-scrolltop-enter-from {
opacity: 0;
}
.p-scrolltop-enter-active {
transition: opacity 0.15s;
}
.p-scrolltop.p-scrolltop-leave-to {
opacity: 0;
}
.p-scrolltop-leave-active {
transition: opacity 0.15s;
}
</style>