Initial commit

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

@@ -0,0 +1,175 @@
+<template>
+  <div class="bg-20 rounded-b-lg">
+    <nav class="flex items-center">
+      <div class="flex text-sm">
+        <!-- First Link -->
+        <button
+          :disabled="!hasPreviousPages || linksDisabled"
+          class="font-mono btn btn-link h-9 min-w-9 px-2 border-r border-50"
+          :class="{
+            'text-primary dim': hasPreviousPages,
+            'text-80 opacity-50': !hasPreviousPages || linksDisabled,
+          }"
+          rel="first"
+          @click.prevent="selectPage(1)"
+          dusk="first"
+        >
+          &laquo;
+        </button>
+
+        <!-- Previous Link -->
+        <button
+          :disabled="!hasPreviousPages || linksDisabled"
+          class="font-mono btn btn-link h-9 min-w-9 px-2 border-r border-50"
+          :class="{
+            'text-primary dim': hasPreviousPages,
+            'text-80 opacity-50': !hasPreviousPages || linksDisabled,
+          }"
+          rel="prev"
+          @click.prevent="selectPreviousPage()"
+          dusk="previous"
+        >
+          &lsaquo;
+        </button>
+
+        <!-- Pages Links -->
+        <button
+          :disabled="linksDisabled"
+          v-for="n in printPages"
+          :key="n"
+          class="btn btn-link h-9 min-w-9 px-2 border-r border-50"
+          :class="{
+            'text-primary dim': page !== n,
+            'text-80 opacity-50': page === n,
+          }"
+          @click.prevent="selectPage(n)"
+          :dusk="`page:${n}`"
+        >
+          {{ n }}
+        </button>
+
+        <!-- Next Link -->
+        <button
+          :disabled="!hasMorePages || linksDisabled"
+          class="font-mono btn btn-link h-9 min-w-9 px-2 border-r border-50"
+          :class="{
+            'text-primary dim': hasMorePages,
+            'text-80 opacity-50': !hasMorePages || linksDisabled,
+          }"
+          rel="next"
+          @click.prevent="selectNextPage()"
+          dusk="next"
+        >
+          &rsaquo;
+        </button>
+
+        <!-- Last Link -->
+        <button
+          :disabled="!hasMorePages || linksDisabled"
+          class="font-mono btn btn-link h-9 min-w-9 px-2 border-r border-50"
+          :class="{
+            'text-primary dim': hasMorePages,
+            'text-80 opacity-50': !hasMorePages || linksDisabled,
+          }"
+          rel="last"
+          @click.prevent="selectPage(pages)"
+          dusk="last"
+        >
+          &raquo;
+        </button>
+      </div>
+
+      <slot />
+    </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 page.
+     */
+    selectPage(page) {
+      if (this.page != page) {
+        this.linksDisabled = true
+        this.$emit('page', page)
+      }
+    },
+
+    /**
+     * Select the previous page.
+     */
+    selectPreviousPage() {
+      this.selectPage(this.page - 1)
+    },
+
+    /**
+     * Select the next page.
+     */
+    selectNextPage() {
+      this.selectPage(this.page + 1)
+    },
+  },
+
+  computed: {
+    /**
+     * Determine if prior pages are available.
+     */
+    hasPreviousPages: function () {
+      return this.page > 1
+    },
+
+    /**
+     * Determine if more pages are available.
+     */
+    hasMorePages: function () {
+      return this.page < this.pages
+    },
+
+    /**
+     * Get printable pages.
+     */
+    printPages() {
+      const middlePage = Math.min(Math.max(3, this.page), this.pages - 2),
+        fromPage = Math.max(middlePage - 2, 1),
+        toPage = Math.min(middlePage + 2, this.pages)
+
+      let pages = []
+
+      for (let n = fromPage; n <= toPage; ++n) {
+        if (n > 0) pages.push(n)
+      }
+
+      return pages
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="bg-20 p-3 text-center rounded-b-lg flex justify-between">
+    <p class="leading-normal text-sm text-80">{{ resourceCountLabel }}</p>
+
+    <p v-if="allResourcesLoaded" class="leading-normal text-sm text-80">
+      {{ __('All resources loaded.') }}
+    </p>
+
+    <button
+      v-else
+      @click="loadMore"
+      class="btn btn btn-link px-4 text-primary dim"
+    >
+      {{ buttonLabel }}
+    </button>
+
+    <p class="leading-normal text-sm text-80">
+      {{ __(':amount Total', { amount: resourceTotalCountLabel }) }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    currentResourceCount: {
+      type: Number,
+      required: true,
+    },
+    allMatchingResourceCount: {
+      type: Number,
+      required: true,
+    },
+    resourceCountLabel: {
+      type: String,
+      required: true,
+    },
+    perPage: {
+      type: [Number, String],
+      required: true,
+    },
+    page: {
+      type: Number,
+      required: true,
+    },
+    pages: {
+      type: Number,
+      default: 0,
+    },
+    next: {
+      type: Boolean,
+      default: false,
+    },
+    previous: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+    loadMore() {
+      this.$emit('load-more')
+    },
+  },
+
+  computed: {
+    buttonLabel() {
+      return this.__('Load :perPage More', {
+        perPage: Nova.formatNumber(this.perPage),
+      })
+    },
+
+    allResourcesLoaded() {
+      return this.currentResourceCount == this.allMatchingResourceCount
+    },
+
+    resourceTotalCountLabel() {
+      return Nova.formatNumber(this.allMatchingResourceCount)
+    },
+  },
+}
+</script>

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>