Pagination: add chalk theme (#7005)

* Pagination: add chalk theme

* Pagination: fix test

* Pagination: del useless test case

* Pagination: fix shake of number

examples/docs/en-US/pagination.md

@@ -206,6 +206,8 @@ Add more modules based on your scenario.
 | layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |
 | popper-class | custom class name for the page size Select's dropdown | string | — | — |
+| prev-text | text for the prev button | string | — | — |
+| next-text | text for the next button | string | — | — |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/pagination.md

@@ -206,6 +206,8 @@
 | layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |
 | popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
+| prev-text | 替代图标显示的上一页文字 | string | — | — |
+| next-text | 替代图标显示的下一页文字 | string | — | — |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

examples/play/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div style="margin: 20px;">
+    <el-pagination
+        layout="prev, pager, next, jumper"
+        :total="50">
+    </el-pagination>
   </div>
 </template>
 <script>

packages/pagination/src/pagination.js

@@ -1,6 +1,7 @@
 import Pager from './pager.vue';
 import ElSelect from 'element-ui/packages/select';
 import ElOption from 'element-ui/packages/option';
+import ElInput from 'element-ui/packages/input';
 import Locale from 'element-ui/src/mixins/locale';
 
 export default {
@@ -34,7 +35,11 @@ export default {
       }
     },
 
-    popperClass: String
+    popperClass: String,
+
+    prevText: String,
+
+    nextText: String
   },
 
   data() {
@@ -102,7 +107,11 @@ export default {
             type="button"
             class={['btn-prev', { disabled: this.$parent.internalCurrentPage <= 1 }]}
             on-click={ this.$parent.prev }>
-            <i class="el-icon el-icon-arrow-left"></i>
+            {
+              this.$parent.prevText
+                ? <span>{ this.$parent.prevText }</span>
+                : <i class="el-icon el-icon-arrow-left"></i>
+            }
           </button>
         );
       }
@@ -118,7 +127,11 @@ export default {
               { disabled: this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
             ]}
             on-click={ this.$parent.next }>
-            <i class="el-icon el-icon-arrow-right"></i>
+            {
+              this.$parent.nextText
+                ? <span>{ this.$parent.nextText }</span>
+                : <i class="el-icon el-icon-arrow-right"></i>
+            }
           </button>
         );
       }
@@ -166,7 +179,8 @@ export default {
 
       components: {
         ElSelect,
-        ElOption
+        ElOption,
+        ElInput
       },
 
       methods: {
@@ -203,8 +217,8 @@ export default {
             this.handleChange({ target: event.target });
           }
         },
-        handleChange({ target }) {
+        handleChange(value) {
-          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value);
+          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
           this.oldValue = null;
         },
         reassignMaxValue(target) {
@@ -218,18 +232,17 @@ export default {
         return (
           <span class="el-pagination__jump">
             { this.t('el.pagination.goto') }
-            <input
+            <el-input
-              class="el-pagination__editor"
+              class="el-pagination__editor is-in-pagination"
-              type="number"
               min={ 1 }
               max={ this.$parent.internalPageCount }
               value={ this.$parent.internalCurrentPage }
-              domProps-value={ this.$parent.internalCurrentPage }
+              domPropsValue={ this.$parent.internalCurrentPage }
-              on-change={ this.handleChange }
+              type="number"
-              on-focus={ this.handleFocus }
+              onChange={ this.handleChange }
-              on-blur={ this.handleBlur }
+              onFocus={ this.handleFocus }
-              on-keyup={ this.handleKeyUp }
+              onBlur={ this.handleBlur }
-              number/>
+              nativeOnKeyup={ this.handleKeyUp }/>
             { this.t('el.pagination.pageClassifier') }
           </span>
         );

packages/theme-chalk/src/common/var.scss

@@ -478,15 +478,15 @@ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
 
 /* Pagination
 -------------------------- */
-$--pagination-font-size: 13px;
+$--pagination-font-size: 14px;
 $--pagination-fill: $--color-white;
-$--pagination-color: $--link-color;
+$--pagination-color: $--color-text-primary;
-$--pagination-border-radius: 2px;
+$--pagination-border-radius: 3px;
-$--pagination-button-color: $--color-text-secondary;
+$--pagination-button-color: $--color-text-primary;
-$--pagination-button-size: 28px;
+$--pagination-button-width: 35.5px;
-$--pagination-button-disabled-color: #e4e4e4;
+$--pagination-button-height: 28px;
+$--pagination-button-disabled-color: $--color-text-placeholder;
 $--pagination-button-disabled-fill: $--color-white;
-$--pagination-border-color: $--disabled-border-base;
 $--pagination-hover-fill: $--color-primary;
 $--pagination-hover-color: $--color-white;
 

packages/theme-chalk/src/index.scss

@@ -1,5 +1,4 @@
 @import "./base.scss";
-@import "./pagination.scss";
 @import "./dialog.scss";
 @import "./autocomplete.scss";
 @import "./dropdown.scss";
@@ -11,6 +10,7 @@
 @import "./menu-item-group.scss";
 @import "./input.scss";
 @import "./input-number.scss";
+@import "./pagination.scss";
 @import "./radio.scss";
 @import "./radio-group.scss";
 @import "./radio-button.scss";

packages/theme-chalk/src/input.scss

@@ -23,6 +23,7 @@
     padding: 3px 10px;
     transition: $--border-transition-base;
     width: 100%;
+    text-align: inherit;
 
     &::placeholder {
       color: $--input-placeholder-color;

packages/theme-chalk/src/pagination.scss

@@ -7,25 +7,40 @@
   white-space: nowrap;
   padding: 2px 5px;
   color: $--pagination-color;
+  font-weight: bold;
   @include utils-clearfix;
 
   span,
   button {
     display: inline-block;
     font-size: $--pagination-font-size;
-    min-width: $--pagination-button-size;
+    min-width: $--pagination-button-width;
-    height: $--pagination-button-size;
+    height: $--pagination-button-height;
-    line-height: $--pagination-button-size;
+    line-height: $--pagination-button-height;
     vertical-align: top;
     box-sizing: border-box;
   }
 
+  .el-input__inner {
+    font-weight: bold;
+  }
+
+  // pagesize 的下拉 icon
+  .el-input__suffix {
+    right: -3px;
+  }
+
   .el-select .el-input {
-    width: 110px;
+    width: 100px;
-    input {
+    margin: 0 5px;
+    .el-input__icon {
+      width: 24px;
+    }
+
+    .el-input__inner {
       padding-right: 25px;
-      border-radius: $--border-radius-small;
+      border-radius: $--pagination-border-radius;
-      height: 28px;
+      height: $--pagination-button-height;
     }
   }
 
@@ -54,7 +69,6 @@
     background: center center no-repeat;
     background-size: 16px;
     background-color: $--pagination-fill;
-    border: 1px solid $--pagination-border-color;
     cursor: pointer;
     margin: 0;
     color: $--pagination-button-color;
@@ -66,13 +80,11 @@
   }
 
   .btn-prev {
-    border-radius: $--pagination-border-radius 0 0 $--pagination-border-radius;
+    padding-right: 12px;
-    border-right: 0;
   }
 
   .btn-next {
-    border-radius: 0 $--pagination-border-radius $--pagination-border-radius 0;
+    padding-left: 12px;    
-    border-left: 0;
   }
 
   @include m(small) {
@@ -90,18 +102,13 @@
     .arrow.disabled {
       visibility: hidden;
     }
-
-    .el-pager li {
-      border-radius: $--pagination-border-radius;
-    }
   }
 
   @include e(sizes) {
     margin: 0 10px 0 0;
 
     .el-input .el-input__inner {
-      font-size: 13px;
+      font-size: $--pagination-font-size;
-      border-color: $--pagination-border-color;
 
       &:hover {
         border-color: $--pagination-hover-fill;
@@ -109,12 +116,16 @@
     }
   }
 
-  @include e(jump) {
+  @include e(total) {
-    margin-left: 10px;
+    margin-right: 10px;
+
+    & + .el-pagination__sizes {
+      margin-left: -10px;
+    }
   }
 
-  @include e(total) {
+  @include e(jump) {
-    margin: 0 10px;
+    margin-left: 24px;
   }
 
   @include e(rightwrapper) {
@@ -122,27 +133,29 @@
   }
 
   @include e(editor) {
-    border: 1px solid $--pagination-border-color;
-    border-radius: $--pagination-border-radius;
     line-height: 18px;
-    padding: 4px 2px;
+    padding: 0 2px;
-    width: 30px;
+    height: $--pagination-button-height;
+      
     text-align: center;
-    margin: 0 6px;
+    margin: 0 2px;
     box-sizing: border-box;
-    transition: border .3s;
+    border-radius: $--pagination-border-radius;
     -moz-appearance: textfield;
 
-    &::-webkit-inner-spin-button,
+    &.el-input {
-    &::-webkit-outer-spin-button {
+      width: 50px;
+    }
+
+    .el-input__inner {
+      height: $--pagination-button-height;
+    }
+
+    .el-input__inner::-webkit-inner-spin-button,
+    .el-input__inner::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
-
-    &:focus {
-      outline: none;
-      border-color: $--pagination-hover-fill;
-    };
   }
 }
 
@@ -155,26 +168,24 @@
   padding: 0;
   margin: 0;
 
+  .el-icon-more::before {
+    vertical-align: -4px;
+  }
+
   li {
     padding: 0 4px;
-    border: 1px solid $--pagination-border-color;
-    border-right: 0;
     background: $--pagination-fill;
     vertical-align: top;
     display: inline-block;
     font-size: $--pagination-font-size;
-    min-width: $--pagination-button-size;
+    min-width: $--pagination-button-width;
-    height: $--pagination-button-size;
+    height: $--pagination-button-height;
-    line-height: $--pagination-button-size;
+    line-height: $--pagination-button-height;
     cursor: pointer;
     box-sizing: border-box;
     text-align: center;
     margin: 0;
 
-    &:last-child {
-      border-right: 1px solid $--pagination-border-color;
-    }
-
     &.btn-quicknext,
     &.btn-quickprev {
       line-height: 28px;
@@ -191,7 +202,6 @@
 
     &.active + li {
       border-left: 0;
-      padding-left: 5px;
     }
 
     &:hover {
@@ -199,9 +209,7 @@
     }
 
     &.active {
-      border-color: $--pagination-hover-fill;
+      color: $--pagination-hover-fill;
-      background-color: $--pagination-hover-fill;
-      color: $--pagination-hover-color;
       cursor: default;
     }
   }

test/unit/specs/pagination.spec.js

@@ -194,6 +194,7 @@ describe('Pagination', () => {
         <el-pagination
           @current-change="handleChange"
           :page-size="10"
+          layout="pager, jumper"
           :total="100" />
       `,
 
@@ -204,25 +205,35 @@ describe('Pagination', () => {
       },
 
       data() {
-        return { page: 1 };
+        return {
+          page: 1,
+          inputer: null
+        };
+      },
+
+      mounted() {
+        this.inputer = this.$children[0].$children[1].$children[0];
       }
     }, true);
-    const input = vm.$el.querySelector('.el-pagination__jump input');
+    const input = vm.inputer;
+    const changeValue = (value) => {
+      input.$emit('input', value);
+      input.setCurrentValue(value);
+      input.$emit('change', value);
+    };
+
+    changeValue(1);
 
-    input.focus();
-    input.value = -1;
-    triggerEvent(input, 'change');
     setTimeout(() => {
       expect(vm.page).to.equal(1);
 
-      input.value = 10000;
+      changeValue(10000);
-      triggerEvent(input, 'change');
+
       setTimeout(() => {
         expect(vm.page).to.equal(10);
-        expect(input.value).to.equal('10');
 
-        input.value = '我好帅';
+        changeValue('我好帅');
-        triggerEvent(input, 'change');
+
         setTimeout(() => {
           expect(vm.page).to.equal(1);
           done();