feat(pagination): use bem method to generate customizable classes

algolia · Apr 7, 2017 · 7e1c52d · 7e1c52d
1 parent 22feb62
commit 7e1c52d
Showing 1 changed file with 29 additions and 18 deletions.
diff --git a/packages/vue-instantsearch-pagination/src/Pagination.vue b/packages/vue-instantsearch-pagination/src/Pagination.vue
@@ -1,40 +1,28 @@
 <template>
-  <ul class="ais-pagination">
-    <li class="ais-pagination__item ais-pagination__item--first"
-        :class="{'ais-pagination__item--disabled': page === 1}"
-    >
+  <ul :class="bem()">
+    <li :class="[bem('item', 'first'), page === 1 ? bem('item', 'disabled') : '']">
       <a href="#" @click.prevent="goToFirstPage">
         <slot name="first">&lt;&lt;</slot>
       </a>
     </li>
-    <li class="ais-pagination__item ais-pagination__item--previous"
-        :class="{'ais-pagination__item--disabled': page === 1}"
-    >
+    <li :class="[bem('item', 'previous'), page === 1 ? bem('item', 'disabled') : '']">
       <a href="#" @click.prevent="goToPreviousPage">
         <slot name="previous">&lt;</slot>
       </a>
     </li>
-    <li
-        v-for="item in pages"
-        class="ais-pagination__item"
-        :class="{ 'ais-pagination__item--active': item === page }"
-    >
+    <li v-for="item in pages" :class="[bem('item'), page === item ? bem('item', 'active') : '']" >
       <a href="#" @click.prevent="goToPage(item)">
         <slot :value="item" :active="item === page">
           {{ item }}
         </slot>
       </a>
     </li>
-    <li class="ais-pagination__item ais-pagination__item--next"
-        :class="{'ais-pagination__item--disabled': page >= totalPages }"
-    >
+    <li :class="[bem('item', 'next'), page >= totalPages ? bem('item', 'disabled') : '']">
       <a href="#" @click.prevent="goToNextPage">
         <slot name="next">&gt;</slot>
       </a>
     </li>
-    <li class="ais-pagination__item ais-pagination__item--last"
-        :class="{'ais-pagination__item--disabled': page >= totalPages }"
-    >
+    <li :class="[bem('item', 'last'), page >= totalPages ? bem('item', 'disabled') : '']">
       <a href="#" @click.prevent="goToLastPage">
         <slot name="last">&gt;&gt;</slot>
       </a>
@@ -54,6 +42,12 @@
         validator (value) {
           return value > 0
         }
+      },
+      classNames: {
+        type: Object,
+        default () {
+          return {}
+        }
       }
     },
     computed: {
@@ -94,6 +88,23 @@
       }
     },
     methods: {
+      bem (element, modifier) {
+        const blockClassName = 'ais-pagination'
+        if(!element) {
+          return this.customClassName(blockClassName)
+        }
+        const elementClassName = blockClassName + '__' + element
+        if (!modifier) {
+          return this.customClassName(elementClassName)
+        }
+
+        const modifierClassName = elementClassName + '--' + modifier
+
+        return this.customClassName(elementClassName) + ' ' + this.customClassName(modifierClassName)
+      },
+      customClassName (className) {
+        return !this.classNames[className] ? className : this.classNames[className]
+      },
       goToPage (page) {
         page = Math.min(this.totalPages, page)
         this.searchStore.page = page