@empathyco/x-components
Version:
Empathy X Components
87 lines (84 loc) • 2.54 kB
JavaScript
import { defineComponent, ref } from 'vue';
import { useScroll } from './use-scroll.js';
/**
* Base scroll component that depending on the user interactivity emits different events for
* knowing when the user scrolls, the direction of scroll and if user reaches the start or end.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'BaseScroll',
props: {
/**
* Distance to the end of the scroll that when reached will emit the
* `scroll:about-to-end` event.
*
* @public
*/
distanceToBottom: {
type: Number,
default: 100,
},
/**
* Positive vertical distance to still consider that the element is the first one visible.
* For example, if set to 100, after scrolling 100 pixels, the first rendered element
* will still be considered the first one.
*/
firstElementThresholdPx: {
type: Number,
default: 100,
},
/**
* Time duration to ignore the subsequent scroll events after an emission.
* Higher values will decrease events precision but can prevent performance issues.
*
* @public
*/
throttleMs: {
type: Number,
default: 100,
},
/**
* If true (default), sets the scroll position to the top when certain events are emitted.
*
* @public
*/
resetOnChange: {
type: Boolean,
default: true,
},
/**
* List of events that should reset the scroll when emitted.
*
* @public
*/
resetOn: {
type: [String, Array],
default: () => [
'SearchBoxQueryChanged',
'SortChanged',
'SelectedFiltersChanged',
'SelectedFiltersForRequestChanged',
'SelectedRelatedTagsChanged',
'UserChangedExtraParams',
],
},
},
emits: [
'scroll',
'scroll:at-start',
'scroll:almost-at-end',
'scroll:at-end',
'scroll:direction-change',
],
setup(props, context) {
const baseScrollEl = ref();
const { throttledStoreScrollData } = useScroll(props, context, baseScrollEl);
return {
throttledStoreScrollData,
baseScrollEl,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=base-scroll.vue2.js.map