@empathyco/x-components
Version:
Empathy X Components
218 lines (215 loc) • 10.2 kB
JavaScript
import { defineComponent, computed } from 'vue';
import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
import '../../../components/animations/animate-width.vue2.js';
import '../../../components/animations/animate-width.vue3.js';
import '../../../components/animations/change-height.vue2.js';
import '../../../components/animations/collapse-height.vue2.js';
import '../../../components/animations/collapse-height.vue3.js';
import '../../../components/animations/collapse-width.vue2.js';
import '../../../components/animations/collapse-width.vue3.js';
import '../../../components/animations/cross-fade.vue2.js';
import '../../../components/animations/cross-fade.vue3.js';
import '../../../components/animations/fade-and-slide.vue2.js';
import '../../../components/animations/fade-and-slide.vue3.js';
import '../../../components/animations/fade.vue2.js';
import '../../../components/animations/fade.vue3.js';
import _sfc_main$1 from '../../../components/animations/no-animation.vue.js';
import '../../../components/animations/staggered-fade-and-slide.vue2.js';
import '../../../components/animations/staggered-fade-and-slide.vue3.js';
import '../../../components/auto-progress-bar.vue2.js';
import '../../../components/auto-progress-bar.vue3.js';
import '../../../components/base-dropdown.vue2.js';
import '../../../components/base-dropdown.vue3.js';
import BaseEventButton from '../../../components/base-event-button.vue.js';
import '../../../components/base-grid.vue2.js';
import '../../../components/base-grid.vue3.js';
import '../../../components/base-keyboard-navigation.vue2.js';
import '../../../components/base-rating.vue2.js';
import '../../../components/base-rating.vue3.js';
import '../../../components/base-slider.vue2.js';
import '../../../components/base-slider.vue3.js';
import '../../../components/base-switch.vue2.js';
import '../../../components/base-switch.vue3.js';
import '../../../components/base-teleport.vue2.js';
import '../../../components/base-variable-column-grid.vue2.js';
import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
import '../../../components/column-picker/base-column-picker-list.vue2.js';
import '../../../components/currency/base-currency.vue2.js';
import '../../../components/display-click-provider.vue.js';
import '../../../components/display-emitter.vue.js';
import '../../../components/filters/labels/base-price-filter-label.vue.js';
import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
import '../../../components/global-x-bus.vue.js';
import '../../../components/highlight.vue2.js';
import '../../../components/items-list.vue2.js';
import '../../../components/layouts/fixed-header-and-asides-layout.vue2.js';
import '../../../components/layouts/fixed-header-and-asides-layout.vue3.js';
import '../../../components/layouts/multi-column-max-width-layout.vue2.js';
import '../../../components/layouts/multi-column-max-width-layout.vue3.js';
import '../../../components/layouts/multi-column-max-width-layout.vue4.js';
import '../../../components/layouts/single-column-layout.vue2.js';
import '../../../components/layouts/single-column-layout.vue3.js';
import '../../../components/location-provider.vue.js';
import '../../../components/modals/base-events-modal-close.vue2.js';
import '../../../components/modals/base-events-modal-open.vue2.js';
import '../../../components/modals/base-events-modal.vue2.js';
import '../../../components/modals/base-id-modal-close.vue2.js';
import '../../../components/modals/base-id-modal-open.vue2.js';
import '../../../components/modals/base-id-modal.vue2.js';
import '../../../components/modals/base-modal.vue2.js';
import '../../../components/modals/base-modal.vue3.js';
import '../../../components/modals/close-main-modal.vue2.js';
import '../../../components/modals/main-modal.vue2.js';
import '../../../components/modals/open-main-modal.vue2.js';
import '../../../components/page-loader-button.vue2.js';
import '../../../components/page-loader-button.vue3.js';
import '../../../components/page-selector.vue2.js';
import '../../../components/page-selector.vue3.js';
import '../../../components/panels/base-header-toggle-panel.vue2.js';
import '../../../components/panels/base-header-toggle-panel.vue3.js';
import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
import '../../../components/panels/base-id-toggle-panel.vue2.js';
import '../../../components/panels/base-tabs-panel.vue2.js';
import '../../../components/panels/base-tabs-panel.vue3.js';
import '../../../components/panels/base-toggle-panel.vue2.js';
import '../../../components/result/base-result-add-to-cart.vue2.js';
import '../../../components/result/base-result-current-price.vue2.js';
import '../../../components/result/base-result-image.vue2.js';
import '../../../components/result/base-result-image.vue3.js';
import '../../../components/result/base-result-link.vue2.js';
import '../../../components/result/base-result-link.vue3.js';
import '../../../components/result/base-result-previous-price.vue2.js';
import '../../../components/result/base-result-rating.vue2.js';
import '../../../components/result/base-result-rating.vue3.js';
import '../../../components/result/result-variant-selector.vue2.js';
import '../../../components/result/result-variant-selector.vue3.js';
import '../../../components/result/result-variants-provider.vue.js';
import '../../../components/scroll/base-scroll.vue2.js';
import '@empathyco/x-utils';
import 'vuex';
import '@vue/devtools-api';
import '../../../plugins/devtools/timeline.devtools.js';
import 'rxjs/operators';
import 'rxjs';
import '../../../plugins/devtools/colors.utils.js';
import '../../../plugins/x-bus.js';
import '../../../plugins/x-plugin.js';
import '../../../components/sliding-panel.vue2.js';
import '../../../components/sliding-panel.vue3.js';
import '../../../components/snippet-callbacks.vue2.js';
import '../../../components/suggestions/base-suggestion.vue2.js';
import '../../../components/suggestions/base-suggestions.vue2.js';
import '../../../components/suggestions/base-suggestions.vue3.js';
import '../../../composables/create-use-device.js';
import '@vueuse/core';
import { useState } from '../../../composables/use-state.js';
import { AnimationProp } from '../../../types/animation-prop.js';
import { scrollXModule } from '../x-module.js';
import { MainScrollId } from './scroll.const.js';
/**
* The `ScrollToTop` component is a button that the user can click to make a container scroll
* up to its initial position.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'ScrollToTop',
xModule: scrollXModule.name,
components: { BaseEventButton },
props: {
/**
* Animation to use for showing/hiding the button.
*
* @public
*/
animation: {
type: AnimationProp,
default: () => _sfc_main$1,
},
/**
* Threshold in pixels from the top to show the button.
*
* @public
*/
thresholdPx: Number,
/**
* Id of the target scroll component.
*
* @public
*/
scrollId: {
type: String,
default: MainScrollId,
},
},
setup(props) {
/**
* State of all the scroll components in this module.
*
* @internal
*/
// TODO: Directly retrieve the needed data in this computed property
const { data } = useState('scroll');
/**
* The scroll data retrieved for this component.
*
* @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been
* passed. Otherwise it returns `null`.
* @internal
*/
const scrollData = computed(() => {
return props.scrollId && data.value[props.scrollId]
? data.value[props.scrollId]
: {
position: 0,
direction: 'UP',
hasReachedStart: false,
hasAlmostReachedEnd: false,
hasReachedEnd: false,
};
});
/**
* Event that will be emitted when the scroll to top is clicked.
*
* @returns The event to be emitted when the scroll to top is clicked. The id as a payload.
* @internal
*/
const events = computed(() => ({ UserClickedScrollToTop: props.scrollId }));
/**
* Checks if the thresholdPx prop has been provided and if it is a number.
*
* @returns If the thresholdPx is a number or not.
* @internal
*/
const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');
/**
* Checks if the threshold has been reached in case the threshold strategy is in use.
*
* @returns If the scrollTop is bigger than the thresholdPx.
* @internal
*/
const isThresholdReached = computed(() => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx);
/**
* Returns if the scroll has almost reached its end or not.
*
* @returns True if the scroll has almost reached the end and the user is still scrolling down.
* @internal
*/
const hasAlmostReachedScrollEnd = computed(() => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN');
/**
* Whether if the button is visible or not depending on the strategy being used.
*
* @returns If the button should be visible or not.
* @internal
*/
const isVisible = computed(() => useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value);
return {
events,
isVisible,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=scroll-to-top.vue2.js.map