<commit_before><template>
<nav>
    <ul :class="['pagination',btnSize,alignment]"
        :aria-disabled="disabled ? 'true' : 'false'"
        :aria-label="ariaLabel ? ariaLabel : null"
        role="menubar"
        @focusin.self="focusCurrent"
        @keydown.left.prevent="focusPrev"
        @keydown.right.prevent="focusNext"
        @keydown.shift.left.prevent="focusFirst"
        @keydown.shift.right.prevent="focusLast"
    >

        <!-- Goto First Page button -->
        <template v-if="!hideGotoEndButtons">
            <li v-if="isActive(1) || disabled" class="page-item disabled" role="none presentation" aria-hidden="true">
                <span class="page-link" v-html="firstText"></span>
            </li>
            <li v-else class="page-item" role="none presentation">
                <b-link class="page-link"
                        v-bind="linkProps(1)"
                        :aria-label="labelFirstPage"
                        role="menuitem"
                        tabindex="-1"
                        @click="onClick(1)"
                ><span aria-hidden="true" v-html="firstText"></span></b-link>
            </li>
        </template>

        <!-- Goto Previous page button -->
        <li v-if="isActive(1) || disabled" class="page-item disabled" role="none presentation" aria-hidden="true">
            <span class="page-link" v-html="prevText"></span>
        </li>
        <li v-else class="page-item" role="none presentation">
            <b-link class="page-link"
                    v-bind="linkProps(currentPage - 1)"
                    :aria-label="labelPrevPage"
                    role="menuitem"
                    tabindex="-1"
                    @click="onClick(currentPage - 1)"
            ><span aria-hidden="true" v-html="prevText"></span></b-link>
        </li>

        <!-- First Ellipsis Bookend -->
        <li v-if="showFirstDots" class="page-item disabled d-none d-sm-flex" role="separator">
            <span class="page-link" v-html="ellipsisText"></span>
        </li>

        <!-- Pages links -->
        <li v-for="page in pageList" role="none presentation" :class="pageItemClasses(page)" :key="page.number">
            <span v-if="disabled" class="page-link">{{ page.number }}</span>
            <b-link v-else
                    v-bind="linkProps(page.number)"
                    :class="pageLinkClasses(page)"
                    :disabled="disabled"
                    :aria-disabled="disabled ? 'true' : null"
                    :aria-label="labelPage + ' ' + page.number"
                    :aria-checked="isActive(page.number) ? 'true' : 'false'"
                    :aria-posinset="page.number"
                    :aria-setsize="numberOfPages"
                    role="menuitemradio"
                    tabindex="-1"
                    @click="onClick(page.number)"
                    v-html="makePage(page.number)"
            ></b-link>
        </li>

        <!-- Last Ellipsis Bookend -->
        <li v-if="showLastDots" class="page-item disabled d-none d-sm-flex" role="separator">
            <span class="page-link" v-html="ellipsisText"></span>
        </li>

        <!-- Goto Next page -->
        <li v-if="isActive(numberOfPages) || disabled" class="page-item disabled" role="none presentation" aria-hidden="true">
            <span class="page-link" v-html="nextText"></span>
        </li>
        <li v-else class="page-item" role="none presentation">
            <b-link class="page-link"
                    v-bind="linkProps(currentPage + 1)"
                    :aria-label="labelNextPage"
                    role="menuitem"
                    tabindex="-1"
                    @click="onClick(currentPage + 1)"
            ><span aria-hidden="true" v-html="nextText"></span></b-link>
        </li>

        <!-- Goto Last page -->
        <template v-if="!hideGotoEndButtons">
            <li v-if="isActive(numberOfPages) || disabled"
                class="page-item disabled"
                role="none presentation"
                aria-hidden="true"
            >
                <span class="page-link" v-html="lastText"></span>
            </li>
            <li v-else class="page-item" role="none presentation">
                <b-link class="page-link"
                        v-bind="linkProps(numberOfPages)"
                        :aria-label="labelLastPage"
                        role="menuitem"
                        @click="onClick(numberOfPages)"
                ><span aria-hidden="true" v-html="lastText"></span></b-link>
            </li>
        </template>
    </ul>
</nav>
</template>

<style scoped>
    .page-item {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .page-item.disabled {
        cursor: not-allowed;
        opacity: .65;
    }
</style>

<script>
import bLink, { pickLinkProps } from './link';
import { assign } from '../utils/object';
import { paginationMixin } from '../mixins';

// Props needed for router links
const routerProps = pickLinkProps('activeClass','exactActiveClass','append','exact','replace','target','rel');

// Props object
const props = assign(
    // pagination-nav specific props
    {
        numberOfPages: {
            type: Number,
            default: 1
        },
        baseUrl: {
            type: String,
            default: '/'
        },
        useRouter: {
            type: Boolean,
            default: false
        },
        linkGen: {
            type: Function,
            default: null<commit_msg>fix(pagination-nav): ARIA tabing control<commit_after><template>
<nav>
    <ul :class="['pagination',btnSize,alignment]"
        :aria-disabled="disabled ? 'true' : 'false'"
        :aria-label="ariaLabel ? ariaLabel : null"
        role="menubar"
        tabindex="0"
        @focusin.self="focusCurrent"
        @keydown.left.prevent="focusPrev"
        @keydown.right.prevent="focusNext"
        @keydown.shift.left.prevent="focusFirst"
        @keydown.shift.right.prevent="focusLast"
    >

        <!-- Goto First Page button -->
        <template v-if="!hideGotoEndButtons">
            <li v-if="isActive(1) || disabled" class="page-item disabled" role="none presentation" aria-hidden="true">
                <span class="page-link" v-html="firstText"></span>
            </li>
            <li v-else class="page-item" role="none presentation">
                <b-link class="page-link"
                        v-bind="linkProps(1)"
                        :aria-label="labelFirstPage"
                        role="menuitem"
                        tabindex="-1"
                        @click="onClick(1)"
                ><span aria-hidden="true" v-html="firstText"></span></b-link>
            </li>
        </template>

        <!-- Goto Previous page button -->
        <li v-if="isActive(1) || disabled" class="page-item disabled" role="none presentation" aria-hidden="true">
            <span class="page-link" v-html="prevText"></span>
        </li>
        <li v-else class="page-item" role="none presentation">
            <b-link class="page-link"
                    v-bind="linkProps(currentPage - 1)"
                    :aria-label="labelPrevPage"
                    role="menuitem"
                    tabindex="-1"
                    @click="onClick(currentPage - 1)"
            ><span aria-hidden="true" v-html="prevText"></span></b-link>
        </li>

        <!-- First Ellipsis Bookend -->
        <li v-if="showFirstDots" class="page-item disabled d-none d-sm-flex" role="separator">
            <span class="page-link" v-html="ellipsisText"></span>
        </li>

        <!-- Pages links -->
        <li v-for="page in pageList" role="none presentation" :class="pageItemClasses(page)" :key="page.number">
            <span v-if="disabled" class="page-link">{{ page.number }}</span>
            <b-link v-else
                    v-bind="linkProps(page.number)"
                    :class="pageLinkClasses(page)"
                    :disabled="disabled"
                    :aria-disabled="disabled ? 'true' : null"
                    :aria-label="labelPage + ' ' + page.number"
                    :aria-checked="isActive(page.number) ? 'true' : 'false'"
                    :aria-posinset="page.number"
                    :aria-setsize="numberOfPages"
                    role="menuitemradio"
                    tabindex="-1"
                    @click="onClick(page.number)"
                    v-html="makePage(page.number)"
            ></b-link>
        </li>

        <!-- Last Ellipsis Bookend -->
        <li v-if="showLastDots" class="page-item disabled d-none d-sm-flex" role="separator">
            <span class="page-link" v-html="ellipsisText"></span>
        </li>

        <!-- Goto Next page -->
        <li v-if="isActive(numberOfPages) || disabled" class="page-item disabled" role="none presentation" aria-hidden="true">
            <span class="page-link" v-html="nextText"></span>
        </li>
        <li v-else class="page-item" role="none presentation">
            <b-link class="page-link"
                    v-bind="linkProps(currentPage + 1)"
                    :aria-label="labelNextPage"
                    role="menuitem"
                    tabindex="-1"
                    @click="onClick(currentPage + 1)"
            ><span aria-hidden="true" v-html="nextText"></span></b-link>
        </li>

        <!-- Goto Last page -->
        <template v-if="!hideGotoEndButtons">
            <li v-if="isActive(numberOfPages) || disabled"
                class="page-item disabled"
                role="none presentation"
                aria-hidden="true"
            >
                <span class="page-link" v-html="lastText"></span>
            </li>
            <li v-else class="page-item" role="none presentation">
                <b-link class="page-link"
                        v-bind="linkProps(numberOfPages)"
                        :aria-label="labelLastPage"
                        role="menuitem"
                        tabindex="-1"
                        @click="onClick(numberOfPages)"
                ><span aria-hidden="true" v-html="lastText"></span></b-link>
            </li>
        </template>
    </ul>
</nav>
</template>

<style scoped>
    .page-item {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .page-item.disabled {
        cursor: not-allowed;
        opacity: .65;
    }
    .page-item .page-link:hover,
    .page-item .page-link:focus {
        box-shadow: 0 0 0 3px rgba(0,123,255,.5);
        z-index: 1;
    }
</style>

<script>
import bLink, { pickLinkProps } from './link';
import { assign } from '../utils/object';
import { paginationMixin } from '../mixins';

// Props needed for router links
const routerProps = pickLinkProps('activeClass','exactActiveClass','append','exact','replace','target','rel');

// Props object
const props = assign(
    // pagination-nav specific props
    {
        numberOfPages: {
            type: Number,
            default: 1
        },
        baseUrl: {
            type: String,
            default: '/'
        },
        useRouter: {
            type: Boolean,
            default: false
        },
        linkGen: {
            type: Function,
            default: null
{'fraction_non_alphanumeric': 0.1546690048224463, 'fraction_numerical': 0.00394563787812363, 'mean_word_length': 1.6556461001164144, 'pattern_counts': {'":': 0, '<': 151, '<?xml version=': 0, '>': 151, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6519250', 'n_tokens_mistral': 3304, 'n_tokens_neox': 3169, 'n_words': 584}