Added keep length parameter

.vscode/extensions.json

@@ -1,6 +1,6 @@
 {
     "recommendations": [
         "dbaeumer.vscode-eslint",
-        "johnsoncodehk.volar"
+        "vue.volar"
     ]
 }

docs/demo.md

@@ -8,6 +8,7 @@
         class="mb-0"
         :data="laravelData"
         :limit="limit"
+        :keep-length="keepLength"
         :show-disabled="showDisabled"
         :size="size"
         :align="align"
@@ -23,6 +24,7 @@
         class="mb-0"
         :data="laravelData"
         :limit="limit"
+        :keep-length="keepLength"
         :show-disabled="showDisabled"
         :size="size"
         :align="align"
@@ -36,6 +38,7 @@
     <TailwindPagination
         :data="laravelData"
         :limit="limit"
+        :keep-length="keepLength"
         @pagination-change-page="getResults"
     />
 </RenderToIFrame>
@@ -81,6 +84,7 @@ export default {
             laravelResourceData: {},
             style: 'bootstrap4',
             limit: 2,
+            keepLength: false,
             showDisabled: false,
             size: 'default',
             align: 'left'
@@ -143,6 +147,9 @@ export default {
                 this.limit = 0;
             }
         },
+        keepLength (newVal) {
+            this.keepLength = Boolean(newVal);
+        },
     },
 }
 </script>
@@ -155,4 +162,4 @@ iframe {
     height: 4rem;
     background-color: transparent;
 }
-</style>
+</style>

docs/guide/advanced/renderless-pagination.md

@@ -11,6 +11,7 @@ Below is an example of how you might use the `RenderlessPagination` component to
     <RenderlessPagination
         :data="data"
         :limit="limit"
+        :keep-length="keepLength"
         @pagination-change-page="onPaginationChangePage"
         v-slot="slotProps"
     >
@@ -70,6 +71,10 @@ export default {
             type: Number,
             default: 0
         },
+        keepLength: {
+            type: Boolean,
+            default: false
+        },
     },
 
     methods: {
@@ -92,6 +97,10 @@ The `data` prop that was passed to the `RenderlessPagination` component.
 
 The `limit` prop that was passed to the `RenderlessPagination` component.
 
+### keepLength
+
+The `keepLength` prop that was passed to the `RenderlessPagination` component.
+
 ### computed
 
 Some computed properties that are used by the `RenderlessPagination` component:
@@ -125,4 +134,4 @@ An object containing the event listeners for the next button:
 
 An function containing the event listeners for a page button. Takes the `page` number as an argument:
 
-* `click` - Event listener for the `click` event
+* `click` - Event listener for the `click` event

docs/guide/api/props.md

@@ -14,3 +14,8 @@ An object containing the structure of a [Laravel paginator](https://laravel.com/
 
 Limit of pages to be rendered. `0` shows all pages (default). `-1` will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. `2`) will define how many pages should be shown on either side of the current page when only a range of pages are shown.
 
+## keepLength
+
+* `Boolean` (optional)
+
+When `true`, the pagination component will keep the same length regardless of the position of the page number. This is useful when you want to keep the pagination component always the same size and not vary at the first or last pages. It does uses the `limit` to determine the length of the pagination component.

package.json

@@ -32,7 +32,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "vue": "^3.2.41"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.2.0",
@@ -48,6 +48,6 @@
     "tailwindcss": "^3.2.1",
     "vite": "^3.2.2",
     "vitest": "^0.24.5",
-    "vuepress": "^2.0.0-beta.53"
+    "vuepress": "^2.0.0-beta.61"
   }
 }

src/Bootstrap4Pagination.vue

@@ -2,6 +2,7 @@
     <RenderlessPagination
         :data="data"
         :limit="limit"
+        :keep-length="keepLength"
         @pagination-change-page="onPaginationChangePage"
         v-slot="slotProps"
     >
@@ -70,6 +71,10 @@ export default {
             type: Number,
             default: 0
         },
+        keepLength: {
+            type: Boolean,
+            default: false
+        },
         showDisabled: {
             type: Boolean,
             default: false

src/Bootstrap5Pagination.vue

@@ -2,6 +2,7 @@
     <RenderlessPagination
         :data="data"
         :limit="limit"
+        :keep-length="keepLength"
         @pagination-change-page="onPaginationChangePage"
         v-slot="slotProps"
     >
@@ -71,6 +72,10 @@ export default {
             type: Boolean,
             default: false
         },
+        keepLength: {
+            type: Boolean,
+            default: false
+        },
         size: {
             type: String,
             default: 'default',

src/RenderlessPagination.vue

@@ -11,6 +11,10 @@ export default {
             type: Number,
             default: 0
         },
+        keepLength: {
+            type: Boolean,
+            default: false
+        },
     },
 
     computed: {
@@ -57,16 +61,32 @@ export default {
             }
 
             var current = this.currentPage;
+            var size = this.keepLength;
             var last = this.lastPage;
             var delta = this.limit;
             var left = current - delta;
-            var right = current + delta + 1;
+            var right = current + delta;
+            var leftPad = (delta + 2) * 2;
+            var rightPad = ((delta + 2) * 2) - 1;
             var range = [];
             var pages = [];
             var l;
 
             for (var i = 1; i <= last; i++) {
-                if (i === 1 || i === last || (i >= left && i < right)) {
+                // Item is first or last
+                if (i === 1 || i === last) {
+                    range.push(i);
+                }
+                // Item is within the delta
+                else if (i >= left && i <= right) {
+                    range.push(i);
+                }
+                // Item is before max left padding
+                else if (size && i < leftPad && current < leftPad - 2) {
+                    range.push(i);
+                }
+                // Item is after max right padding
+                else if (size && i > last - rightPad && current > last - rightPad + 2) {
                     range.push(i);
                 }
             }

src/TailwindPagination.vue

@@ -2,6 +2,7 @@
     <RenderlessPagination
         :data="data"
         :limit="limit"
+        :keep-length="keepLength"
         @pagination-change-page="onPaginationChangePage"
         v-slot="slotProps"
     >
@@ -87,6 +88,10 @@ export default {
             type: Number,
             default: 0
         },
+        keepLength: {
+            type: Boolean,
+            default: false
+        },
         itemClasses: {
             type: Array,
             default: () => [

src/demo/App.vue

@@ -24,6 +24,14 @@
                     </select>
                 </div>
             </div>
+            <div class="row">
+                <div class="col">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="keep-length" v-model="keepLength">
+                        <label class="form-check-label" for="keep-length">Keep Length</label>
+                    </div>
+                </div>
+            </div>
             <div class="row">
                 <div class="col">
                     <div class="form-check">
@@ -43,6 +51,7 @@
                         class="mb-0"
                         :data="laravelData"
                         :limit="limit"
+                        :keep-length="keepLength"
                         :show-disabled="showDisabled"
                         :size="size"
                         :align="align"
@@ -57,6 +66,7 @@
                         class="mb-0"
                         :data="laravelData"
                         :limit="limit"
+                        :keep-length="keepLength"
                         :show-disabled="showDisabled"
                         :size="size"
                         :align="align"
@@ -69,6 +79,7 @@
                     <TailwindPagination
                         :data="laravelData"
                         :limit="limit"
+                        :keep-length="keepLength"
                         @pagination-change-page="getResults"
                     />
                 </RenderToIFrame>
@@ -119,6 +130,7 @@ export default {
             laravelResourceData: {},
             style: 'bootstrap4',
             limit: 2,
+            keepLength: false,
             showDisabled: false,
             size: 'default',
             align: 'left'
@@ -181,6 +193,9 @@ export default {
                 this.limit = 0;
             }
         },
+        keepLength (newVal) {
+            this.keepLength = Boolean(newVal);
+        },
     },
 }
 </script>