fix(VPagination): max length (#9423)

* fix(VPagination): max length

* test(VPagination): add more length cases

Author: dmitriytat

packages/vuetify/src/components/VPagination/VPagination.ts

@@ -61,11 +61,14 @@ export default mixins(Colorable, Themeable).extend({
 
     items (): (string | number)[] {
       const totalVisible = parseInt(this.totalVisible, 10)
-      const maxLength = totalVisible > this.maxButtons
-        ? this.maxButtons
-        : totalVisible || this.maxButtons
 
-      if (this.length <= maxLength || maxLength < 1) {
+      const maxLength = Math.min(
+        Math.max(0, totalVisible) || this.length,
+        Math.max(0, this.maxButtons) || this.length,
+        this.length
+      )
+
+      if (this.length <= maxLength) {
         return this.range(1, this.length)
       }
 

packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.ts

@@ -244,6 +244,35 @@ describe('VPagination.ts', () => {
     expect(wrapper.vm.items).toHaveLength(10)
   })
 
+  it('should never show more than the number of total visible buttons', () => {
+    const wrapper = mountFunction({
+      data: () => ({
+        maxButtons: 0,
+      }),
+
+      propsData: {
+        length: 5,
+        totalVisible: undefined,
+      },
+    })
+
+    expect(wrapper.vm.items).toHaveLength(5)
+
+    wrapper.setProps({ length: 40 })
+
+    wrapper.setData({ maxButtons: 0 })
+    wrapper.setProps({ totalVisible: 10 })
+    expect(wrapper.vm.items).toHaveLength(10)
+
+    wrapper.setData({ maxButtons: 11 })
+    wrapper.setProps({ totalVisible: undefined })
+    expect(wrapper.vm.items).toHaveLength(11)
+
+    wrapper.setData({ maxButtons: 12 })
+    wrapper.setProps({ totalVisible: 13 })
+    expect(wrapper.vm.items).toHaveLength(12)
+  })
+
   it('should return length when maxButtons is less than 1', () => {
     const wrapper = mountFunction({
       data: () => ({ maxButtons: -3 }),