{"version":3,"file":"PaginationComponent-Db0yNCg6.js","sources":["../../src/components/PaginationComponent.vue"],"sourcesContent":["<template>\n    <div class=\"flex flex-wrap items-center justify-between sm:justify-center gap-2 w-full mt-8 px-2 sm:px-0\">\n        <div class=\"flex justify-center gap-1 sm:flex-grow sm:-mr-[125px]\">\n            <button v-if=\"isPrevControlsActive\" @click=\"goToPrev\" class=\"mr-2\">\n                <ChevronLeftIcon class=\"text-[#BFDFE4] hover:text-default transition-all\" :size=\"appStore.windowWidth < 640 ? '14':'24'\" />\n            </button>\n            <button\n                v-for=\"(page, index) in pages\"\n                :id=\"`page-${index+1}`\"\n                :key=\"`page_${index}`\"\n                :class=\"{'active': page === pagination.current_page}\"\n                class=\"text-xl sm:text-2xl\"\n                @click=\"changePage(page)\"\n            >\n                <span v-if=\"page === null\">...</span>\n                <span v-else :class=\"{'font-semibold': page === pagination.current_page}\">{{ page }}<span v-if=\"index !== pages.length - 1\" class=\"text-black\">,</span></span>\n            </button>\n            <button v-if=\"isNextControlsActive\" @click=\"goToNext\" class=\"ml-2\">\n                <ChevronRightIcon class=\"text-[#BFDFE4] hover:text-default transition-all\" :size=\"appStore.windowWidth < 640 ? '14':'24'\" />\n            </button>\n        </div>\n        <div class=\"flex justify-end\">\n            <div class=\"flex item-center gap-2\">\n                <span class=\"text-xl\">Show:</span>\n                <select class=\"outline-none border-[1px] border-default text-black rounded-[5px] w-16\" v-model=\"perPage\" @change=\"changePerPage($event)\">\n                    <option v-for=\"option of perPages\" :key=\"`per_page_${option}`\">{{option}}</option>\n                </select>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import {computed, type PropType, type Ref, ref} from 'vue'\n    import {ChevronLeftIcon, ChevronRightIcon} from 'vue-tabler-icons'\n    import {useAppStore} from '@/stores/app'\n    import type {Pagination} from '@/types/Common'\n\n    const props = defineProps({\n        pagination: {\n            type: Object as PropType<Pagination>,\n            default: () => {\n                return {\n                    current_page: 1,\n                    per_page: 12,\n                    total_pages: 1,\n                    total_items: 12\n                }\n            }\n        },\n        perPages: {\n            type: Array as PropType<number[]>,\n            default: () => [12, 24, 48, 96]\n        },\n        scrollToTop: {\n            type: Boolean,\n            default: true\n        }\n    })\n\n    // data\n    const appStore = useAppStore()\n    const perPage: Ref<number> = ref(props.pagination.per_page)\n\n    // computed\n    const pages = computed((): (number | null)[] => {\n        const range = []\n        const minPaginationElems = 7\n\n        let rangeStart = props.pagination.total_pages <= minPaginationElems ? 1 : props.pagination.current_page - 1\n        let rangeEnd = props.pagination.total_pages <= minPaginationElems ? props.pagination.total_pages : props.pagination.current_page + 1\n\n        rangeEnd = rangeEnd > props.pagination.total_pages ? props.pagination.total_pages : rangeEnd\n        rangeStart = rangeStart < 1 ? 1 : rangeStart\n\n        if (props.pagination.total_pages > minPaginationElems) {\n            const isStartBoundaryReached = rangeStart - 1 < 3\n            const isEndBoundaryReached = props.pagination.total_pages - rangeEnd < 3\n\n            if (isStartBoundaryReached) {\n                rangeEnd = minPaginationElems - 2\n                for (let i = 1; i < rangeStart; i++) {\n                    range.push(i)\n                }\n            } else {\n                range.push(1)\n                range.push(null)\n            }\n\n            if (isEndBoundaryReached) {\n                rangeStart = props.pagination.total_pages - (minPaginationElems - 3)\n                for (let i = rangeStart; i <= props.pagination.total_pages; i++) {\n                    range.push(i)\n                }\n            } else {\n                for (let i = rangeStart; i <= rangeEnd; i++) {\n                    range.push(i)\n                }\n                range.push(null)\n                range.push(props.pagination.total_pages)\n            }\n        } else {\n            for (let i = rangeStart; i <= rangeEnd; i++) {\n                range.push(i)\n            }\n        }\n\n        return range\n    })\n\n    const isPrevControlsActive = computed((): boolean => {\n        return props.pagination.current_page > 1\n    })\n\n    const isNextControlsActive = computed((): boolean => {\n        return props.pagination.current_page < props.pagination.total_pages\n    })\n\n    // emit\n    const emit = defineEmits<{(e:'change', value: number): void, (e:'change-per-page', value: number): void }>()\n\n    // methods\n    const changePage = (page:number | null): void => {\n        if  (!page) return\n\n        // without timeout, page would sometimes load new data before window had a change to\n        // scroll to top. This would lead to page scroll to bottom. nextTick() does not help\n        setTimeout(() => {\n            emit('change', page)\n        }, 150)\n\n        if (props.scrollToTop) {\n            window.scrollTo({\n                top: 0,\n                behavior: 'smooth'\n            })\n        }\n    }\n\n    const changePerPage = (event: Event): void => {\n        const selected = Number((event.target as HTMLInputElement).value)\n        if  (!selected) return\n\n        setTimeout(() => {\n            emit('change-per-page', selected)\n        }, 150)\n\n        if (props.scrollToTop) {\n            window.scrollTo({\n                top: 0,\n                behavior: 'smooth'\n            })\n        }\n    }\n\n    const goToPrev = (): void => {\n        if (isPrevControlsActive.value) changePage(props.pagination.current_page - 1)\n    }\n\n    const goToNext = (): void => {\n        if (isNextControlsActive.value) changePage(props.pagination.current_page + 1)\n    }\n</script>\n\n<style scoped>\nbutton.active {\n  color: var(--color-blue-dark);\n}\n</style>\n"],"names":["props","__props","appStore","useAppStore","perPage","ref","pages","computed","range","rangeStart","rangeEnd","isStartBoundaryReached","isEndBoundaryReached","i","isPrevControlsActive","isNextControlsActive","emit","__emit","changePage","page","changePerPage","event","selected","goToPrev","goToNext"],"mappings":"2oCAsCI,MAAMA,EAAQC,EAuBRC,EAAWC,IACXC,EAAuBC,EAAIL,EAAM,WAAW,QAAQ,EAGpDM,EAAQC,EAAS,IAAyB,CAC5C,MAAMC,EAAQ,CAAA,EAGV,IAAAC,EAAaT,EAAM,WAAW,aAAe,EAAqB,EAAIA,EAAM,WAAW,aAAe,EACtGU,EAAWV,EAAM,WAAW,aAAe,EAAqBA,EAAM,WAAW,YAAcA,EAAM,WAAW,aAAe,EAK/H,GAHJU,EAAWA,EAAWV,EAAM,WAAW,YAAcA,EAAM,WAAW,YAAcU,EACvED,EAAAA,EAAa,EAAI,EAAIA,EAE9BT,EAAM,WAAW,YAAc,EAAoB,CAC7C,MAAAW,EAAyBF,EAAa,EAAI,EAC1CG,EAAuBZ,EAAM,WAAW,YAAcU,EAAW,EAEvE,GAAIC,EAAwB,CACxBD,EAAW,EACX,QAASG,EAAI,EAAGA,EAAIJ,EAAYI,IAC5BL,EAAM,KAAKK,CAAC,CAChB,MAEAL,EAAM,KAAK,CAAC,EACZA,EAAM,KAAK,IAAI,EAGnB,GAAII,EAAsB,CACTH,EAAAT,EAAM,WAAW,YAAe,EAC7C,QAASa,EAAIJ,EAAYI,GAAKb,EAAM,WAAW,YAAaa,IACxDL,EAAM,KAAKK,CAAC,CAChB,KACG,CACH,QAASA,EAAIJ,EAAYI,GAAKH,EAAUG,IACpCL,EAAM,KAAKK,CAAC,EAEhBL,EAAM,KAAK,IAAI,EACTA,EAAA,KAAKR,EAAM,WAAW,WAAW,CAC3C,CAAA,KAEA,SAASa,EAAIJ,EAAYI,GAAKH,EAAUG,IACpCL,EAAM,KAAKK,CAAC,EAIb,OAAAL,CAAA,CACV,EAEKM,EAAuBP,EAAS,IAC3BP,EAAM,WAAW,aAAe,CAC1C,EAEKe,EAAuBR,EAAS,IAC3BP,EAAM,WAAW,aAAeA,EAAM,WAAW,WAC3D,EAGKgB,EAAOC,EAGPC,EAAcC,GAA6B,CACvCA,IAIN,WAAW,IAAM,CACbH,EAAK,SAAUG,CAAI,GACpB,GAAG,EAEFnB,EAAM,aACN,OAAO,SAAS,CACZ,IAAK,EACL,SAAU,QAAA,CACb,EACL,EAGEoB,EAAiBC,GAAuB,CAC1C,MAAMC,EAAW,OAAQD,EAAM,OAA4B,KAAK,EAC1DC,IAEN,WAAW,IAAM,CACbN,EAAK,kBAAmBM,CAAQ,GACjC,GAAG,EAEFtB,EAAM,aACN,OAAO,SAAS,CACZ,IAAK,EACL,SAAU,QAAA,CACb,EACL,EAGEuB,EAAW,IAAY,CACrBT,EAAqB,OAAkBI,EAAAlB,EAAM,WAAW,aAAe,CAAC,CAAA,EAG1EwB,EAAW,IAAY,CACrBT,EAAqB,OAAkBG,EAAAlB,EAAM,WAAW,aAAe,CAAC,CAAA"}