@empathyco/x-components/js/components/page-selector.vue2.js

Empathy X Components

import { defineComponent, computed } from 'vue';
import '../composables/create-use-device.js';
import 'vuex';
import '@vue/devtools-api';
import '../plugins/devtools/timeline.devtools.js';
import '@empathyco/x-utils';
import 'rxjs/operators';
import 'rxjs';
import '../plugins/devtools/colors.utils.js';
import '../plugins/x-bus.js';
import '../plugins/x-plugin.js';
import { useXBus } from '../composables/use-x-bus.js';
import '@vueuse/core';

/**
 * Component that renders a pagination control with buttons for navigating
 * between pages. It displays the current page, allows selecting other pages,
 * and emits events when a page is selected.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'PageSelector',
    props: {
        /**
         * CSS classes to customize the prev/next buttons.
         */
        buttonClasses: {
            type: Array,
            default: () => [],
        },
        /**
         * The current page number.
         */
        currentPage: {
            type: Number,
            required: true,
        },
        /**
         * The string content of the hidden pages.
         */
        hiddenPage: {
            type: String,
            default: '...',
        },
        /**
         * CSS classes to customize the page items.
         */
        itemClasses: {
            type: Function,
            default: () => [],
        },
        /**
         * The number of pages to show before and after the current page.
         */
        range: {
            type: Number,
            default: 2,
        },
        /**
         * The class of the scroll container to scroll to top when a page is selected.
         */
        scrollTarget: {
            type: String,
            default: 'main-scroll',
        },
        /**
         * The total number of pages.
         */
        totalPages: {
            type: Number,
            required: true,
        },
    },
    setup(props) {
        const bus = useXBus();
        const visiblePages = computed(() => {
            const start = Math.max(props.currentPage - props.range, 1);
            const end = Math.min(props.currentPage + props.range, props.totalPages);
            const pages = Array.from({ length: end - start + 1 }, (_, i) => {
                const pageValue = start + i;
                return { value: pageValue, isSelected: pageValue === props.currentPage };
            });
            // Ensure first and last pages are always visible when needed
            if (start > 1) {
                pages.unshift({ value: 1, isSelected: props.currentPage === 1 });
                if (start > 2) {
                    pages.splice(1, 0, { value: props.hiddenPage, isSelected: false });
                }
            }
            if (end < props.totalPages) {
                if (end < props.totalPages - 1) {
                    pages.push({ value: props.hiddenPage, isSelected: false });
                }
                pages.push({
                    value: props.totalPages,
                    isSelected: props.totalPages === props.currentPage,
                });
            }
            return pages;
        });
        /**
         * Handles the selection of a page.
         *
         * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.
         */
        const selectPage = (page) => {
            if (page === '...') {
                return;
            }
            if (typeof page === 'number' && page > 0 && page <= props.totalPages) {
                bus.emit('UserSelectedAPage', page);
                /**
                 * Emits scroll to top to prevent keeping the position if there is more content
                 * after results, as for example Next Queries Preview.
                 */
                bus.emit('UserClickedScrollToTop', props.scrollTarget);
            }
        };
        return {
            visiblePages,
            selectPage,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=page-selector.vue2.js.map