Последняя версия с сервера прошлого разработчика

nova/resources/js/components/Pagination/PaginationSimple.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="bg-20 rounded-b-lg">
+    <nav class="flex justify-between items-center">
+      <!-- Previous Link -->
+      <button
+        :disabled="!hasPreviousPages || linksDisabled"
+        class="btn btn-link py-3 px-4"
+        :class="{
+          'text-primary dim': hasPreviousPages,
+          'text-80 opacity-50': !hasPreviousPages || linksDisabled,
+        }"
+        rel="prev"
+        @click.prevent="selectPreviousPage"
+        dusk="previous"
+      >
+        {{ __('Previous') }}
+      </button>
+
+      <slot />
+
+      <!-- Next Link -->
+      <button
+        :disabled="!hasMorePages || linksDisabled"
+        class="btn btn-link py-3 px-4"
+        :class="{
+          'text-primary dim': hasMorePages,
+          'text-80 opacity-50': !hasMorePages || linksDisabled,
+        }"
+        rel="next"
+        @click.prevent="selectNextPage"
+        dusk="next"
+      >
+        {{ __('Next') }}
+      </button>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    page: {
+      type: Number,
+      required: true,
+    },
+    pages: {
+      type: Number,
+      default: 0,
+    },
+    next: {
+      type: Boolean,
+      default: false,
+    },
+    previous: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data: () => ({ linksDisabled: false }),
+
+  mounted() {
+    Nova.$on('resources-loaded', () => {
+      this.linksDisabled = false
+    })
+  },
+
+  methods: {
+    /**
+     * Select the previous page.
+     */
+    selectPreviousPage() {
+      this.selectPage(this.page - 1)
+    },
+
+    /**
+     * Select the next page.
+     */
+    selectNextPage() {
+      this.selectPage(this.page + 1)
+    },
+
+    /**
+     * Select the page.
+     */
+    selectPage(page) {
+      this.linksDisabled = true
+      this.$emit('page', page)
+    },
+  },
+
+  computed: {
+    /**
+     * Determine if prior pages are available.
+     */
+    hasPreviousPages: function () {
+      return this.previous
+    },
+
+    /**
+     * Determine if more pages are available.
+     */
+    hasMorePages: function () {
+      return this.next
+    },
+  },
+}
+</script>