feat(pagination+pagination-nav): disabled styling now works in BS V4.…

…beta.2 (#1381)

* feat(pagination): disabled styling now works in BS V4.beta.2

Removing custom style for disabled links as it is now working in native bootstrap  V4.beta.2 CSS

* pagination: remove no longer needed CSS

src/components/pagination-nav/pagination-nav.vue

@@ -2,101 +2,98 @@
     .b-pagination .page-item {
         user-select: none;
     }
-    .b-pagination .page-item.disabled {
-        cursor: not-allowed;
-        opacity: .65;
-    }
+    /* Bootstrap V4.beta.2 (and beta.1) missing focus styling for active link */
     .b-pagination .page-item .page-link.active:focus {
         box-shadow: 0 0 0 3px rgba(0,123,255,.5);
         z-index: 1;
     }
 </style>
 
 <script>
-import { assign } from '../../utils/object';
-import { KeyCodes } from '../../utils';
-import { paginationMixin } from '../../mixins';
-import { pickLinkProps } from '../link/link';
+import { assign } from '../../utils/object'
+import { KeyCodes } from '../../utils'
+import { paginationMixin } from '../../mixins'
+import { pickLinkProps } from '../link/link'
 
 // Props needed for router links
-const routerProps = pickLinkProps('activeClass','exactActiveClass','append','exact','replace','target','rel');
+const routerProps = pickLinkProps('activeClass','exactActiveClass','append','exact','replace','target','rel')
 
 // Props object
 const props = assign(
-    // pagination-nav specific props
-    {
-        numberOfPages: {
-            type: Number,
-            default: 1
-        },
-        baseUrl: {
-            type: String,
-            default: '/'
-        },
-        useRouter: {
-            type: Boolean,
-            default: false
-        },
-        linkGen: {
-            type: Function,
-            default: null
-        },
-        pageGen: {
-            type: Function,
-            default: null
-        }
+  // pagination-nav specific props
+  {
+    numberOfPages: {
+      type: Number,
+      default: 1
+    },
+    baseUrl: {
+      type: String,
+      default: '/'
+    },
+    useRouter: {
+      type: Boolean,
+      default: false
+    },
+    linkGen: {
+      type: Function,
+      default: null
     },
-    // Router specific props
-    routerProps
-);
+    pageGen: {
+      type: Function,
+      default: null
+    }
+  },
+  // Router specific props
+  routerProps
+)
 
 // Our render function is brought in via the pagination mixin
 export default {
-    mixins: [ paginationMixin ],
-    props,
-    computed: {
-        // Used by render function to trigger wraping in '<nav>' element
-        isNav() {
-            return true;
-        }
+  mixins: [ paginationMixin ],
+  props,
+  computed: {
+    // Used by render function to trigger wraping in '<nav>' element
+    isNav() {
+      return true
+    }
+  },
+  methods: {
+    onClick(pageNum, evt) {
+      this.currentPage = pageNum
+    },
+    makePage(pagenum) {
+      if (this.pageGen && typeof this.pageGen === 'function') {
+        return this.pageGen(pagenum)
+      }
+      return pagenum
+    },
+    makeLink(pagenum) {
+      if (this.linkGen && typeof this.linkGen === 'function') {
+        return this.linkGen(pagenum)
+      }
+      const link = `${this.baseUrl}${pagenum}`
+      return this.useRouter ? { path: link } : link
     },
-    methods: {
-        onClick(pageNum, evt) {
-            this.currentPage = pageNum;
-        },
-        makePage(pagenum) {
-            if (this.pageGen && typeof this.pageGen === 'function') {
-                return this.pageGen(pagenum);
-            }
-            return pagenum;
-        },
-        makeLink(pagenum) {
-            if (this.linkGen && typeof this.linkGen === 'function') {
-                return this.linkGen(pagenum);
-            }
-            const link = `${this.baseUrl}${pagenum}`;
-            return this.useRouter ? { path: link } : link;
-        },
-        linkProps(pagenum) {
-            const link = this.makeLink(pagenum);
-            let props = {
-                href: typeof link === 'string' ? link : void 0,
-                target: this.target || null,
-                rel: this.rel || null,
-                disabled: this.disabled
-            };
-            if (this.useRouter || typeof link === 'object') {
-                props = assign(props, {
-                    to: link,
-                    exact: this.exact,
-                    activeClass: this.activeClass,
-                    exactActiveClass: this.exactActiveClass,
-                    append: this.append,
-                    replace: this.replace
-                });
-            }
-            return props;
-        }
+    linkProps(pagenum) {
+      const link = this.makeLink(pagenum)
+      let props = {
+        href: typeof link === 'string' ? link : void 0,
+        target: this.target || null,
+        rel: this.rel || null,
+        disabled: this.disabled
+      }
+      if (this.useRouter || typeof link === 'object') {
+        props = assign(props, {
+          to: link,
+          exact: this.exact,
+          activeClass: this.activeClass,
+          exactActiveClass: this.exactActiveClass,
+          append: this.append,
+          replace: this.replace
+        })
+      }
+      return props
     }
-};
+  }
+}
 </script>

src/components/pagination/pagination.vue

@@ -1,77 +1,71 @@
 <style>
     .b-pagination .page-item {
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
         user-select: none;
     }
-    .b-pagination .page-item.disabled {
-        cursor: not-allowed;
-        opacity: .65;
-    }
+    /* Bootstrap V4.beta.2 (and beta.1) missing focus styling for active link */
     .b-pagination .page-item .page-link.active:focus {
         box-shadow: 0 0 0 3px rgba(0,123,255,.5);
         z-index: 1;
     }
 </style>
 
 <script>
-import { paginationMixin } from '../../mixins';
-import { isVisible } from '../../utils/dom';
-import { KeyCodes } from '../../utils';
+import { paginationMixin } from '../../mixins'
+import { isVisible } from '../../utils/dom'
+import { KeyCodes } from '../../utils'
 
 const props = {
-    perPage: {
-        type: Number,
-        default: 20
-    },
-    totalRows: {
-        type: Number,
-        default: 20
-    },
-    ariaControls: {
-        type: String,
-        default: null
-    }
-};
+  perPage: {
+    type: Number,
+    default: 20
+  },
+  totalRows: {
+    type: Number,
+    default: 20
+  },
+  ariaControls: {
+    type: String,
+    default: null
+  }
+}
 
 // Our render function is brought in from the pagination mixin
 export default {
-    mixins: [ paginationMixin ],
-    props,
-    computed: {
-        numberOfPages() {
-            const result = Math.ceil(this.totalRows / this.perPage);
-            return (result < 1) ? 1 : result;
+  mixins: [ paginationMixin ],
+  props,
+  computed: {
+    numberOfPages() {
+      const result = Math.ceil(this.totalRows / this.perPage)
+      return (result < 1) ? 1 : result
+    }
+  },
+  methods: {
+    // These methods are used by the render function
+    onClick(num, evt) {
+      // Handle edge cases where number of pages has changed (i.e. if perPage changes)
+      if (num > this.numberOfPages) {
+        num = this.numberOfPages
+      } else if (num < 1) {
+        num = 1
+      }
+      this.currentPage = num;
+      this.$nextTick(() => {
+        // Keep the current button focused if possible
+        const target = evt.target
+        if (isVisible(target) && this.$el.contains(target) && target.focus) {
+          target.focus()
+        } else {
+          this.focusCurrent()
         }
+      })
+      this.$emit('change', this.currentPage)
     },
-    methods: {
-        // These methods are used by the render function
-        onClick(num, evt) {
-            // Handle edge cases where number of pages has changed (i.e. if perPage changes)
-            if (num > this.numberOfPages) {
-                num = this.numberOfPages;
-            } else if (num < 1) {
-                num = 1;
-            }
-            this.currentPage = num;
-            this.$nextTick(() => {
-                // Keep the current button focused if possible
-                const target = evt.target;
-                if (isVisible(target) && this.$el.contains(target) && target.focus) {
-                    target.focus();
-                } else {
-                    this.focusCurrent();
-                }
-            });
-            this.$emit('change', this.currentPage);
-        },
-        makePage(pagenum) {
-            return pagenum;
-        },
-        linkProps(pagenum) {
-            return { href: '#' };
-        }
+    makePage(pagenum) {
+      return pagenum
+    },
+    linkProps(pagenum) {
+      return { href: '#' }
     }
-};
+  }
+}
 </script>