Merge pull request #1 from ediamin/master

Add button and disabled classes to pagination buttons

Author: romalytvynenko

src/components/ListTable.vue

@@ -28,11 +28,11 @@
         <span class="displaying-num">{{ itemsTotal }} items</span>
 
         <span class="pagination-links" v-if="hasPagination">
-          <span v-if="disableFirst" class="tablenav-pages-navspan" aria-hidden="true">&laquo;</span>
-          <a v-else href="#" class="first-page" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>
+          <span v-if="disableFirst" class="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>
+          <a v-else href="#" class="first-page button" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>
 
-          <span v-if="disablePrev" class="tablenav-pages-navspan" aria-hidden="true">&lsaquo;</span>
-          <a v-else href="#" class="prev-page" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>
+          <span v-if="disablePrev" class="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>
+          <a v-else href="#" class="prev-page button" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>
 
           <span class="paging-input">
             <span class="tablenav-paging-text">
@@ -41,11 +41,11 @@
             </span>
           </span>
 
-          <span v-if="disableNext" class="tablenav-pages-navspan" aria-hidden="true">&rsaquo;</span>
-          <a v-else href="#" class="next-page" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>
+          <span v-if="disableNext" class="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>
+          <a v-else href="#" class="next-page button" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>
 
-          <span v-if="disableLast" class="tablenav-pages-navspan" aria-hidden="true">&raquo;</span>
-          <a v-else href="#" class="last-page" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
+          <span v-if="disableLast" class="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>
+          <a v-else href="#" class="last-page button" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
         </span>
       </div>
     </div>
@@ -120,11 +120,11 @@
         <span class="displaying-num">{{ itemsTotal }} items</span>
 
         <span class="pagination-links" v-if="hasPagination">
-          <span v-if="disableFirst" class="tablenav-pages-navspan" aria-hidden="true">&laquo;</span>
-          <a v-else href="#" class="first-page" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>
+          <span v-if="disableFirst" class="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>
+          <a v-else href="#" class="first-page button" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>
 
-          <span v-if="disablePrev" class="tablenav-pages-navspan" aria-hidden="true">&lsaquo;</span>
-          <a v-else href="#" class="prev-page" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>
+          <span v-if="disablePrev" class="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>
+          <a v-else href="#" class="prev-page button" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>
 
           <span class="paging-input">
             <span class="tablenav-paging-text">
@@ -133,11 +133,11 @@
             </span>
           </span>
 
-          <span v-if="disableNext" class="tablenav-pages-navspan" aria-hidden="true">&rsaquo;</span>
-          <a v-else href="#" class="next-page" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>
+          <span v-if="disableNext" class="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>
+          <a v-else href="#" class="next-page button" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>
 
-          <span v-if="disableLast" class="tablenav-pages-navspan" aria-hidden="true">&raquo;</span>
-          <a v-else href="#" class="last-page" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
+          <span v-if="disableLast" class="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>
+          <a v-else href="#" class="last-page button" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
         </span>
       </div>
     </div>
@@ -485,4 +485,4 @@ export default {
   }
 }
 
-</style>
+</style>