Pager Unavailable

<e-pager
  :currentPage="0"
/>

<e-pager
  :currentPage="2"
  :pageCount="5"
/>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

import EIcon from '../e-icon/e-icon.vue';

export type Props = {
  pageCount?: number;
  currentPage: number;
  displayOffset?: number;
};
withDefaults(defineProps<Props>(), {
  pageCount: 1,
  displayOffset: 2
});

const emit = defineEmits<{
  (e: 'emit-key', goto: string, gotoValue: number): void;
  (e: 'goto:first'): void;
  (e: 'goto:last'): void;
  (e: 'goto', gotoValue: number): void;
  (e: 'goto:next'): void;
  (e: 'goto:prev'): void;
}>();

const { t } = useI18n({ useScope: 'global' });

function isDisabled(page: number) {
  return page === 0;
}
</script>

<template>
  <nav
    class="e-pager"
    aria-label="Pager"
  >
    <button
      :disabled="isDisabled(currentPage)"
      :title="t('pager.context.gotoX', [t('pager.first')])"
      type="button"
      :aria-label="t('pager.context.gotoX', [t('pager.first')])"
      :aria-disabled="isDisabled(currentPage)"
      @click="emit('goto:first')"
    >
      <e-icon :icon="['chevron-double-left']" />
    </button>

    <button
      :disabled="isDisabled(currentPage)"
      :title="t('pager.context.gotoX', [t('pager.previous')])"
      type="button"
      :aria-label="t('pager.context.gotoX', [t('pager.previous')])"
      :aria-disabled="isDisabled(currentPage)"
      @click="emit('goto:prev')"
    >
      <e-icon :icon="['chevron-left']" />
    </button>

    <template v-if="!isDisabled(currentPage)">
      <template
        v-for="index in pageCount"
        :key="index"
      >
        <button
          v-if="
            !(index - 1 > currentPage + displayOffset || index - 1 < currentPage - displayOffset)
          "
          class="e-pager-item"
          :class="{
            active: currentPage === index - 1
          }"
          :title="`Page ${index}`"
          type="button"
          :aria-label="`Page ${index}`"
          :aria-current="currentPage === index - 1"
          :aria-disabled="currentPage === index - 1"
          @click="emit('goto', index)"
          v-text="index"
        />
      </template>
    </template>

    <button
      :disabled="currentPage >= pageCount - 1"
      :title="t('pager.context.gotoX', [t('pager.next')])"
      type="button"
      :aria-label="t('pager.context.gotoX', [t('pager.next')])"
      :aria-disabled="currentPage >= pageCount - 1"
      @click="emit('goto:next')"
    >
      <e-icon :icon="['chevron-right']" />
    </button>

    <button
      :disabled="currentPage >= pageCount - 1"
      :title="t('pager.context.gotoX', [t('pager.last')])"
      type="button"
      :aria-label="t('pager.context.gotoX', [t('pager.last')])"
      :aria-disabled="currentPage >= pageCount - 1"
      @click="emit('goto:last')"
    >
      <e-icon :icon="['chevron-double-right']" />
    </button>
  </nav>
</template>

<style scoped lang="scss">
.e-pager {
  height: 50px;
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;

  button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font: normal normal 600 20px/30px Urbanist;
    color: var(--e-foreground);
    fill: var(--e-foreground);
    align-content: center;
    display: flex;
    padding: 0;

    &.e-pager-item {
      padding: 5px;
    }

    .e-icon {
      width: 24px;
      height: 24px;
      margin: auto;
      fill: var(--e-foreground);
    }

    &:hover {
      color: var(--e-accent);

      .e-icon {
        fill: var(--e-accent);
      }
    }

    &:disabled {
      cursor: default;
      color: var(--e-disabled);

      .e-icon {
        fill: var(--e-disabled);
      }
    }
  }

  .e-pager-item {
    &.active {
      cursor: default;
      color: var(--e-accent);
    }
  }
}
</style>