element-pagination - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

package.json

 {
   "name": "element-pagination",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A pagination component for Vue.js.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -16,3 +16,3 @@ # element-pagination
 import ElPagination from 'element-pagination'
-import 'element-theme-default/dist/pagination.css'
+import 'element-theme-chalk/dist/pagination.css'
 
@@ -19,0 +19,0 @@ Vue.use(ElPagination)

src/pagination.js

 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';
+import { valueEquals } from 'element-ui/src/utils/util';
 
@@ -35,3 +37,11 @@ export default {
       }
-    }
+    },
+
+    popperClass: String,
+
+    prevText: String,
+
+    nextText: String,
+
+    background: Boolean
   },
@@ -47,3 +57,6 @@
   render(h) {
-    let template = <div class='el-pagination'></div>;
+    let template = <div class={['el-pagination', {
+      'is-background': this.background,
+      'el-pagination--small': this.small
+    }] }></div>;
     const layout = this.layout || '';
@@ -64,6 +77,2 @@ if (!layout) return;
 
-    if (this.small) {
-      template.data.class += ' el-pagination--small';
-    }
-
     components.forEach(compo => {
@@ -106,3 +115,7 @@ if (compo === '->') {
             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>
@@ -123,3 +136,7 @@ );
             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>
@@ -140,5 +157,6 @@ );
           immediate: true,
-          handler(value) {
-            if (Array.isArray(value)) {
-              this.$parent.internalPageSize = value.indexOf(this.$parent.pageSize) > -1
+          handler(newVal, oldVal) {
+            if (valueEquals(newVal, oldVal)) return;
+            if (Array.isArray(newVal)) {
+              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
                 ? this.$parent.pageSize
@@ -156,2 +174,3 @@ : this.pageSizes[0];
               value={ this.$parent.internalPageSize }
+              popperClass={ `${this.$parent.popperClass || ''} is-arrow-fixed` }
               on-input={ this.handleChange }>
@@ -162,3 +181,3 @@ {
                     value={ item }
-                    label={ item + ' ' + this.t('el.pagination.pagesize') }>
+                    label={ item + this.t('el.pagination.pagesize') }>
                   </el-option>
@@ -196,2 +215,4 @@ )
 
+      components: { ElInput },
+
       methods: {
@@ -201,6 +222,25 @@ handleFocus(event) {
         },
-
-        handleChange({ target }) {
-          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value);
+        handleBlur({ target }) {
+          this.resetValueIfNeed(target.value);
+          this.reassignMaxValue(target.value);
+        },
+        handleChange(value) {
+          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
           this.oldValue = null;
+          this.resetValueIfNeed(value);
+        },
+        resetValueIfNeed(value) {
+          const num = parseInt(value, 10);
+          if (!isNaN(num)) {
+            if (num < 1) {
+              this.$refs.input.$el.querySelector('input').value = 1;
+            } else {
+              this.reassignMaxValue(value);
+            }
+          }
+        },
+        reassignMaxValue(value) {
+          if (+value > this.$parent.internalPageCount) {
+            this.$refs.input.$el.querySelector('input').value = this.$parent.internalPageCount;
+          }
         }
@@ -213,11 +253,13 @@ },
             { this.t('el.pagination.goto') }
-            <input
-              class="el-pagination__editor"
-              type="number"
+            <el-input
+              class="el-pagination__editor is-in-pagination"
               min={ 1 }
-              max={ this.internalPageCount }
+              max={ this.$parent.internalPageCount }
               value={ this.$parent.internalCurrentPage }
-              on-change={ this.handleChange }
-              on-focus={ this.handleFocus }
-              number/>
+              domPropsValue={ this.$parent.internalCurrentPage }
+              type="number"
+              ref="input"
+              onChange={ this.handleChange }
+              onFocus={ this.handleFocus }
+              onBlur={ this.handleBlur }/>
             { this.t('el.pagination.pageClassifier') }
@@ -224,0 +266,0 @@ </span>

No alert changes

Improved metrics

Total package byte prevSize

97478

11.67%

Worsened metrics

Lines of code

337

-38.5%

No dependency changes