[add] component for page browser

src/components/PageBrowser/PageBrowser.vue

+<template>
+  <div class="ul-navi-pagebrowser">
+    <ul>
+      <template v-if="currentSelection > 4 && pages > 5">
+        <li>
+          <a @click="setCurrentSelection(1)">1</a>
+        </li>
+        <li><span>...</span></li>
+      </template>
+      <template v-for="page in pages" :key="page">
+        <li v-if="page === currentSelection" class="ul-navi-pagebrowser-current">
+          <span>{{ page }}</span>
+        </li>
+        <li v-else-if="setPage(page)">
+          <a @click="setCurrentSelection(page)" rel="nofollow">{{ page }}</a>
+        </li>
+      </template>
+      <li v-if="pages > 5 && currentSelection < pages - 2"><span>...</span></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  name: 'PageBrowser',
+  props: {
+    pages: {
+      type: Number,
+      required: true
+    },
+    currentPage: Number
+  },
+  setup(props, { emit }) {
+    const currentSelection = ref(1)
+
+    const setCurrentSelection = (selectedPage) => {
+      currentSelection.value = selectedPage
+      emit('selectedPage', currentSelection.value)
+    }
+
+    const setPage = (page) => {
+      if (currentSelection.value < 4 && page < 6) {
+        return true
+      } else if (currentSelection.value == 4 && page < 7) {
+        return true
+      } else if (page > currentSelection.value - 3 && page < currentSelection.value + 3) {
+        return true
+      } else if (currentSelection.value > props.pages - 1 && page > currentSelection.value - 5) {
+        return true
+      } else if (currentSelection.value > props.pages - 2 && page > currentSelection.value - 4) {
+        return true
+      }
+
+      return false
+    }
+
+    return {
+      currentSelection,
+      setCurrentSelection,
+      setPage
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.ul-navi-pagebrowser {
+  font: normal 1.5rem/1.6 'Futura', 'Open Sans', arial, sans-serif;
+  text-align: center;
+  user-select: none;
+
+  .ul-navi-pagebrowser-current {
+    font-weight: bold;
+
+    span {
+      border-bottom: 2px solid #262a31;
+      color: #000000;
+    }
+  }
+
+  ul {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 4px;
+    list-style: none;
+    padding: 0;
+
+    li {
+      a,
+      span {
+        border-bottom: 2px solid transparent;
+        color: #262a31;
+        display: block;
+        font-size: 1.4rem;
+        height: 3.2rem;
+        line-height: 2.286;
+        width: 3.2rem;
+      }
+
+      a {
+        &:focus,
+        &:hover {
+          border-bottom: 2px solid #262a31;
+          color: #000000;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>