Merge pull request #12 from feload/master

Add v-html directive to template.ts in order to render raw HTML.

Author: Santiago Aguilar Hernández

demo/commonjs/index.html

@@ -20,6 +20,9 @@ <h4>Default</h4>
 
         <div is="uib-pagination" :direction-links="false" :total-items="totalItems" v-model="pagination1"></div>
 
+        <h6><code>page-label</code> returning <code>raw html</code>:</h6>
+        <div is="uib-pagination"  :direction-links="false" :total-items="totalItems" v-model="pagination1" :page-label="pageLabelHtml"></div>
+
         <pre>The selected page no: {{pagination1.currentPage}}</pre>
 
         <button type="button" class="btn btn-info" @click="setPage(3)">Set current page to: 3</button>
@@ -44,6 +47,7 @@ <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate
         <uib-pagination :total-items="bigTotalItems" v-model="pagination2" :max-size="maxSize" class="pagination-sm" :boundary-link-numbers="true" :rotate="false"></uib-pagination>
 
         <pre>Page: {{pagination2.currentPage}} / {{pagination2.numPages}}</pre>
+
     </div>
 
     <script src="dist/main.js"></script>

demo/commonjs/src/main.js

@@ -14,6 +14,10 @@ var app = new Vue({
             this.pagination1.currentPage = pageNo;
         },
 
+        pageLabelHtml: function (pageNo) {
+            return `<b>${pageNo}</b>`;
+        },
+
         pageChanged: function() {
             console.log('Page changed to: ' + this.pagination1.currentPage);
         },

demo/es6/index.html

@@ -20,6 +20,9 @@ <h4>Default</h4>
 
         <div is="uib-pagination" :direction-links="false" :total-items="totalItems" v-model="pagination1"></div>
 
+        <h6><code>page-label</code> returning <code>raw html</code>:</h6>
+        <div is="uib-pagination"  :direction-links="false" :total-items="totalItems" v-model="pagination1" :page-label="pageLabelHtml"></div>
+
         <pre>The selected page no: {{pagination1.currentPage}}</pre>
 
         <button type="button" class="btn btn-info" @click="setPage(3)">Set current page to: 3</button>
@@ -49,4 +52,4 @@ <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate
     <script src="dist/main.js"></script>
 </body>
 
-</html>
+</html>

demo/es6/src/main.js

@@ -14,6 +14,10 @@ var app = new Vue({
             this.pagination1.currentPage = pageNo;
         },
 
+        pageLabelHtml: function (pageNo) {
+            return `<b>${pageNo}</b>`;
+        },
+
         pageChanged: function () {
             console.log('Page changed to: ' + this.pagination1.currentPage);
         },

demo/global/dist/main.js

@@ -2,7 +2,7 @@ var app = new Vue({
     el: "#app",
     data: {
         totalItems: 64,
-        
+
         pagination1: {
             currentPage: 4
         },
@@ -15,6 +15,10 @@ var app = new Vue({
             this.pagination1.currentPage = pageNo;
         },
 
+        pageLabelHtml: function (pageNo) {
+            return `<b>${pageNo}</b>`;
+        },
+
         pageChanged: function () {
             console.log('Page changed to: ' + this.pagination1.currentPage);
         },

demo/global/index.html

@@ -20,6 +20,9 @@ <h4>Default</h4>
 
         <div is="uib-pagination" :direction-links="false" :total-items="totalItems" v-model="pagination1"></div>
 
+        <h6><code>page-label</code> returning <code>raw html</code>:</h6>
+        <div is="uib-pagination"  :direction-links="false" :total-items="totalItems" v-model="pagination1" :page-label="pageLabelHtml"></div>
+
         <pre>The selected page no: {{pagination1.currentPage}}</pre>
 
         <button type="button" class="btn btn-info" @click="setPage(3)">Set current page to: 3</button>

dist/vuejs-uib-pagination.js

@@ -7,7 +7,7 @@
     </li>
     <li role="menuitem" v-for="(page, index) in pages" :key="index" :class="{ active: page.active, disabled: disabled && !page.active }"
         class="pagination-page">
-        <a href @click="selectPage(page.number, $event)" :disabled="disabled && !page.active" v-uib-tabindex-toggle="disabled && !page.active">{{ page.text }}</a>
+        <a href @click="selectPage(page.number, $event)" :disabled="disabled && !page.active" v-uib-tabindex-toggle="disabled && !page.active" v-html="page.text"></a>
     </li>
     <li role="menuitem" v-if="directionLinks" :class="{ disabled: isNoNextOrDisabled }" class="pagination-next">
         <a href @click="selectPage(currentPage + 1, $event)" :disabled="isNoNextOrDisabled" v-uib-tabindex-toggle="isNoNextOrDisabled">{{ getText('next') }}</a>