@empathyco/x-components/js/x-modules/scroll/components/scroll.vue2.js

Empathy X Components

import { defineComponent, ref } from 'vue';
import BaseScroll from '../../../components/scroll/base-scroll.vue.js';
import { use$x } from '../../../composables/use-_x.js';
import { scrollXModule } from '../x-module.js';
import { MainScrollId } from './scroll.const.js';

/**
 * Scrollable container that emits scroll related X Events. It exposes all the listeners
 * and props from the {@link BaseScroll} component.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'Scroll',
    xModule: scrollXModule.name,
    components: { BaseScroll },
    props: {
        /**
         * Id to identify the component.
         *
         * @public
         */
        id: {
            type: String,
            default: MainScrollId,
        },
    },
    setup(props) {
        const $x = use$x();
        const scrollRef = ref();
        /**
         * Creates a {@link WireMetadata} metadata object for all the emitted events.
         *
         * @internal
         * @returns A new {@link WireMetadata} object.
         */
        const createEventMetadata = () => {
            return {
                target: scrollRef.value?.$el,
                id: props.id,
            };
        };
        /**
         * Emits the `UserScrolled` event.
         *
         * @param position - The new position of scroll.
         * @internal
         */
        const emitScroll = (position) => {
            $x.emit('UserScrolled', position, createEventMetadata());
        };
        /**
         * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.
         *
         * @param direction - The new direction of scroll.
         * @internal
         */
        const emitScrollDirectionChange = (direction) => {
            $x.emit('UserChangedScrollDirection', direction, createEventMetadata());
        };
        /**
         * Emits the 'UserReachedScrollStart' event when the user reaches the start.
         *
         * @param isAtStart - A boolean indicating if the scroll is at the ending position.
         * @internal
         */
        const emitScrollAtStart = (isAtStart) => {
            $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata());
        };
        /**
         * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.
         *
         * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.
         * @internal
         */
        const emitScrollAlmostAtEnd = (isAlmostAtEnd) => {
            $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata());
        };
        /**
         * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.
         *
         * @param isAtEnd - A boolean indicating if the scroll is at the ending position.
         * @internal
         */
        const emitScrollAtEnd = (isAtEnd) => {
            $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata());
        };
        /**
         * Scrolls to initial position when the user has clicked the scroll to top button.
         *
         * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.
         * @internal
         */
        $x.on('UserClickedScrollToTop', false).subscribe((scrollId) => {
            if (scrollId === props.id && scrollRef.value) {
                scrollRef.value.$el.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
        return {
            scrollRef,
            emitScrollAtEnd,
            emitScrollAlmostAtEnd,
            emitScrollAtStart,
            emitScrollDirectionChange,
            emitScroll,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=scroll.vue2.js.map