Convert Pagination component to Composition API

lib/components/base/Pagination.vue

@@ -5,7 +5,7 @@
       :tabindex="page === 1 ? -1 : 0"
       class="left-arrow paginate has-icon"
       aria-label="Previous Page"
-      :href="linkFunction(page - 1)"
+      :href="linkFunction?.(page - 1)"
       @click.prevent="page !== 1 ? switchPage(page - 1) : null"
     >
       <LeftArrowIcon />
@@ -15,7 +15,7 @@
       :key="'page-' + item + '-' + index"
       :class="{
         'page-number': page !== item,
-        shrink: item > 99,
+        shrink: item !== '-' && item > 99,
       }"
       class="page-number-container"
     >
@@ -28,7 +28,7 @@
           'page-number current': page === item,
           shrink: item > 99,
         }"
-        :href="linkFunction(item)"
+        :href="linkFunction?.(item)"
         @click.prevent="page !== item ? switchPage(item) : null"
       >
         {{ item }}
@@ -42,73 +42,63 @@
       :tabindex="page === pages[pages.length - 1] ? -1 : 0"
       class="right-arrow paginate has-icon"
       aria-label="Next Page"
-      :href="linkFunction(page + 1)"
+      :href="linkFunction?.(page + 1)"
       @click.prevent="page !== pages[pages.length - 1] ? switchPage(page + 1) : null"
     >
       <RightArrowIcon />
     </a>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
+import { computed } from 'vue'
 import { GapIcon, LeftArrowIcon, RightArrowIcon } from '@'
-</script>
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    page: {
-      type: Number,
-      default: 1,
-    },
-    count: {
-      type: Number,
-      default: 1,
-    },
-    linkFunction: {
-      type: Function,
-      default() {
-        return null
-      },
-    },
-  },
-  emits: ['switch-page'],
-  computed: {
-    pages() {
-      let pages = []
-
-      if (this.count > 7) {
-        if (this.page + 3 >= this.count) {
-          pages = [
-            1,
-            '-',
-            this.count - 4,
-            this.count - 3,
-            this.count - 2,
-            this.count - 1,
-            this.count,
-          ]
-        } else if (this.page > 5) {
-          pages = [1, '-', this.page - 1, this.page, this.page + 1, '-', this.count]
-        } else {
-          pages = [1, 2, 3, 4, 5, '-', this.count]
-        }
-      } else {
-        pages = Array.from({ length: this.count }, (_, i) => i + 1)
-      }
-
-      return pages
-    },
-  },
-  methods: {
-    switchPage(newPage) {
-      this.$emit('switch-page', newPage)
-      if (newPage !== null && newPage !== '' && !isNaN(newPage)) {
-        this.$emit('switch-page', Math.min(Math.max(newPage, 1), this.count))
-      }
-    },
-  },
+
+const emit = defineEmits<{
+  'switch-page': [page: number]
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    page: number
+    count: number
+    linkFunction: (page: number) => string | undefined
+  }>(),
+  {
+    page: 1,
+    count: 1,
+    linkFunction: () => undefined,
+  }
+)
+
+const pages = computed(() => {
+  let pages: ('-' | number)[] = []
+
+  if (props.count > 7) {
+    if (props.page + 3 >= props.count) {
+      pages = [
+        1,
+        '-',
+        props.count - 4,
+        props.count - 3,
+        props.count - 2,
+        props.count - 1,
+        props.count,
+      ]
+    } else if (props.page > 5) {
+      pages = [1, '-', props.page - 1, props.page, props.page + 1, '-', props.count]
+    } else {
+      pages = [1, 2, 3, 4, 5, '-', props.count]
+    }
+  } else {
+    pages = Array.from({ length: props.count }, (_, i) => i + 1)
+  }
+
+  return pages
 })
+
+function switchPage(newPage: number) {
+  emit('switch-page', Math.min(Math.max(newPage, 1), props.count))
+}
 </script>
 
 <style scoped lang="scss">