updating Paginator Vue component

src/resources/js/Components/Paginator.vue

@@ -1,5 +1,62 @@
+<script setup>
+import { computed } from 'vue'
+import { Link } from '@inertiajs/inertia-vue3'
+
+const props = defineProps({
+  paginationData: Object,
+})
+
+// computed properties
+const onFirstPage = computed(() => {
+  return props.paginationData.current_page === 1
+})
+
+const hasMorePages = computed(() => {
+  return props.paginationData.current_page < props.paginationData.last_page
+})
+
+const nextPageUrl = computed(() => {
+  return props.paginationData.next_page_url
+})
+
+const previousPageUrl = computed(() => {
+  return props.paginationData.prev_page_url
+})
+
+const firstItem = computed(() => {
+  if (props.paginationData.from == null) {
+    return '-'
+  }
+  return props.paginationData.from
+})
+
+const lastItem = computed(() => {
+  if (props.paginationData.to == null) {
+    return '-'
+  }
+  return props.paginationData.to
+})
+
+const total = computed(() => {
+  if (isNaN(props.paginationData.total)) {
+    return '0'
+  }
+  return props.paginationData.total
+})
+
+// watchers
+
+// lifecycle hooks
+
+// methods
+const isFirstOrLastOrDots = (index, linksLength, label) => {
+  return index === 0 || index === linksLength - 1 || label.includes('...')
+}
+
+</script>
+
 <template>
-    <nav v-if="pagi !== undefined" class="flex items-center justify-between" role="navigation">
+    <nav v-if="paginationData !== undefined" class="flex items-center justify-between" role="navigation">
         <div class="flex justify-between flex-1 sm:hidden">
             <span v-if="onFirstPage" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-gray-100 border border-gray-300 cursor-default leading-5 rounded-md">
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -45,8 +102,8 @@
                         </svg>
                     </Link>
 
-                    <div v-for="(link, index) in pagi.links">
+                    <div v-for="(link, index) in paginationData.links">
-                        <Link v-if="!isFirstOrLastOrDots(index, pagi.links.length, link.label)" :class="{ 'bg-blue-200' : link.active }" :href="link.url" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" v-html="link.label"></Link>
+                        <Link v-if="!isFirstOrLastOrDots(index, paginationData.links.length, link.label)" :class="{ 'bg-blue-200' : link.active }" :href="link.url" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" v-html="link.label"></Link>
                         <span v-else-if="link.label === '...'" aria-disabled="true" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5" v-html="link.label"></span>
                     </div>
 
@@ -65,63 +122,3 @@
         </div>
     </nav>
 </template>
-
-<script>
-import { defineComponent } from "vue"
-import { Link } from "@inertiajs/inertia-vue3"
-
-export default defineComponent({
-  props: {
-    pagi: Object,
-  },
-
-  components: {
-    Link,
-  },
-
-  computed: {
-    onFirstPage() {
-      return this.pagi.current_page === 1
-    },
-
-    hasMorePages() {
-      return this.pagi.current_page < this.pagi.last_page
-    },
-
-    nextPageUrl() {
-      return this.pagi.next_page_url
-    },
-
-    previousPageUrl() {
-      return this.pagi.prev_page_url
-    },
-
-    firstItem() {
-      if (this.pagi.from == null) {
-        return '-'
-      }
-      return this.pagi.from
-    },
-
-    lastItem() {
-      if (this.pagi.to == null) {
-        return '-'
-      }
-      return this.pagi.to
-    },
-
-    total() {
-      if (isNaN(this.pagi.total)) {
-        return '0'
-      }
-      return this.pagi.total
-    },
-  },
-
-  methods: {
-    isFirstOrLastOrDots(index, linksLength, label) {
-      return index === 0 || index === linksLength - 1 || label.includes('...')
-    },
-  },
-})
-</script>