evui 2.0.9 → 2.1.2

package/src/components/input/input.number.vue

@@ -14,7 +14,7 @@
           @click="preventDefault"
         />
         <icon
-          class="fa-sort-up"
+          class="ei-arrow-up"
         />
       </a>
       <a
@@ -26,7 +26,7 @@
           :class="innerDownClasses"
           @click="preventDefault"
         />
-        <icon class="fa-sort-down"/>
+        <icon class="ei-arrow-down" />
       </a>
     </div>
     <div
@@ -55,7 +55,7 @@
 <script>
   import icon from '@/components/icon/icon';
 
-  const prefixCls = 'evui-input-number';
+  const prefixCls = 'ev-input-number';
 
   function parsedStyle(value) {
     const mark = value.toString();
@@ -82,295 +82,312 @@
     return (Math.round(num1 * sf) + Math.round(num2 * sf)) / sf;
   }
   export default {
-      components: {
-        icon,
+    components: {
+      icon,
+    },
+    props: {
+      max: {
+        type: Number,
+        default: Infinity,
       },
-      props: {
-        max: {
-          type: Number,
-          default: Infinity,
-        },
-        min: {
-          type: Number,
-          default: -Infinity,
-        },
-        step: {
-          type: Number,
-          default: 0.1,
-        },
-        width: {
-          type: [String, Number],
-          default: '100%',
-        },
-        height: {
-          type: [String, Number],
-          default: '100%',
-        },
-        value: {
-          type: Number,
-          default: null,
-        },
-        disabled: {
-          type: Boolean,
-          default: false,
-        },
-        precision: {
-          type: Number,
-          default: 1,
-          validator(value) {
-            return !isNaN(Number(value)) && value >= 0 && value <= 100;
-          },
-        },
-        formatter: {
-          type: Function,
-          default: null,
-        },
-        readonly: {
-          type: Boolean,
-          default: false,
+      min: {
+        type: Number,
+        default: -Infinity,
+      },
+      step: {
+        type: Number,
+        default: 0.1,
+      },
+      width: {
+        type: [String, Number],
+        default: '100%',
+      },
+      height: {
+        type: [String, Number],
+        default: '100%',
+      },
+      value: {
+        type: Number,
+        default: null,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      precision: {
+        type: Number,
+        default: 1,
+        validator(value) {
+          return typeof value === 'number' && !Number.isNaN(value) && value >= 0 && value <= 100;
         },
       },
-      data() {
+      formatter: {
+        type: Function,
+        default: null,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        focused: false,
+        upDisabled: false,
+        downDisabled: false,
+        currentValue: this.setValue(this.value),
+      };
+    },
+    computed: {
+      styleObject() {
         return {
-          focused: false,
-          upDisabled: false,
-          downDisabled: false,
-          currentValue: this.setValue(this.value),
+          width: parsedStyle(this.width),
+          height: parsedStyle(this.height),
         };
       },
-      computed: {
-        styleObject: function styleObject() {
-          return {
-            width: parsedStyle(this.width),
-            height: parsedStyle(this.height),
-          };
-        },
-        formatterValue: function formatterValue() {
-          if (this.formatter) {
-            return this.formatter(this.currentValue);
-          }
-          return this.currentValue;
-        },
-        wrapClasses: function wrapClasses() {
-          return [
-            `${prefixCls}`,
-            {
-              [`${prefixCls}-disabled`]: this.disabled,
-            },
-          ];
-        },
-        handlerClasses: function handlerClasses() {
-          return `${prefixCls}-handler-wrap`;
-        },
-        upClasses: function upClasses() {
-          return [
-            `${prefixCls}-handler`,
-            `${prefixCls}-handler-up`,
-          ];
-        },
-        innerUpClasses: function innerUpClasses() {
-          return `${prefixCls}-handler-up-inner icon`;
-        },
-        downClasses: function downClasses() {
-          return [
-            `${prefixCls}-handler`,
-            `${prefixCls}-handler-down`,
-          ];
-        },
-        innerDownClasses: function innerDownClasses() {
-          return `${prefixCls}-handler-down-inner icon`;
-        },
-        inputWrapClasses: function inputWrapClasses() {
-          return `${prefixCls}-input-wrap`;
-        },
-        inputClasses: function inputClasses() {
-          return `${prefixCls}-input`;
-        },
+      formatterValue() {
+        if (this.formatter) {
+          this.$emit('input', this.formatter(this.currentValue));
+          return this.formatter(this.currentValue);
+        }
+        this.$emit('input', this.currentValue);
+        return this.currentValue;
       },
-      watch: {
-        value(updatedValue) {
-          this.currentValue = updatedValue;
-        },
+      wrapClasses() {
+        return [
+          `${prefixCls}`,
+          {
+            [`${prefixCls}-disabled`]: this.disabled,
+          },
+        ];
       },
-      methods: {
-        preventDefault(e) {
-          e.preventDefault();
-        },
-        up(e) {
-          const targetValue = Number(e.target.value);
-          if (this.upDisabled && isNaN(targetValue)) {
-            return false;
-          }
-          this.changeStep('up', e);
-          return true;
-        },
-        down(e) {
-          const targetValue = Number(e.target.value);
-          if (this.downDisabled && isNaN(targetValue)) {
-            return false;
-          }
-          this.changeStep('down', e);
-          return true;
-        },
-        changeStep(type, e) {
-          if (this.disabled || this.readonly) {
-            return false;
-          }
-          const step = Number(this.step);
-          const targetValue = Number(e.target.value);
-          let updatedValue = Number(this.currentValue);
+      handlerClasses() {
+        return `${prefixCls}-handler-wrap`;
+      },
+      upClasses() {
+        return [
+          `${prefixCls}-handler`,
+          `${prefixCls}-handler-up`,
+        ];
+      },
+      innerUpClasses() {
+        return `${prefixCls}-handler-up-inner icon`;
+      },
+      downClasses() {
+        return [
+          `${prefixCls}-handler`,
+          `${prefixCls}-handler-down`,
+        ];
+      },
+      innerDownClasses() {
+        return `${prefixCls}-handler-down-inner icon`;
+      },
+      inputWrapClasses() {
+        return `${prefixCls}-input-wrap`;
+      },
+      inputClasses() {
+        return `${prefixCls}-input`;
+      },
+    },
+    watch: {
+      value(updatedValue) {
+        this.currentValue = updatedValue;
+      },
+    },
+    methods: {
+      preventDefault(e) {
+        e.preventDefault();
+      },
+      up(e) {
+        const targetValue = Number(e.target.value);
+        if (this.upDisabled && isNaN(targetValue)) {
+          return false;
+        }
+        this.changeStep('up', e);
+        return true;
+      },
+      down(e) {
+        const targetValue = Number(e.target.value);
+        if (this.downDisabled && isNaN(targetValue)) {
+          return false;
+        }
+        this.changeStep('down', e);
+        return true;
+      },
+      changeStep(type, e) {
+        if (this.disabled || this.readonly) {
+          return false;
+        }
+        const step = Number(this.step);
+        const targetValue = Number(e.target.value);
+        let updatedValue = Number(this.currentValue);
 
-          if (isNaN(updatedValue)) {
-            return false;
-          }
-          if (!isNaN(targetValue) && type !== null) {
-              if (addNum(targetValue, updatedValue) <= this.max ||
-                addNum(targetValue, -updatedValue) >= this.min) {
-                updatedValue = targetValue;
-              } else {
-                return false;
-              }
-          }
-          if (type === 'up') {
-            updatedValue = addNum(updatedValue, step);
-          } else if (type === 'down') {
-            updatedValue = addNum(updatedValue, -step);
-          }
-          this.setValue(updatedValue);
-          return true;
-        },
-        setValue(value) {
-          const updatedValue = Number(Number(value).toFixed(this.precision));
-          this.$nextTick(() => {
-              this.currentValue = updatedValue;
-            });
-          return updatedValue;
-        },
-        change(e) {
-          let updatedValue;
-          const max = this.max;
-          const min = this.min;
-          const value = e.target.value.trim();
-          const isEmptyString = value.length === 0;
-          if (isEmptyString) {
-            this.setValue(null);
-            return false;
-          }
-          if (this.validateValue(e.type, value)) {
+        if (isNaN(updatedValue)) {
+          return false;
+        }
+        if (!isNaN(targetValue) && type !== null) {
+          if (e.wheelDeltaY === 120 && addNum(targetValue, step) <= this.max) {
+            updatedValue = targetValue;
+          } else if (e.wheelDeltaY === -120 && addNum(targetValue, -step) >= this.min) {
+            updatedValue = targetValue;
+          } else {
             return false;
           }
-          if (isNaN(value)) {
-            e.target.value = this.setValue(this.currentValue);
+        }
+        if (type === 'up' && addNum(updatedValue, step) <= this.max) {
+          updatedValue = addNum(updatedValue, step);
+        } else if (type === 'down' && addNum(updatedValue, -step) >= this.min) {
+          updatedValue = addNum(updatedValue, -step);
+        } else {
+          return false;
+        }
+        this.setValue(updatedValue);
+        return true;
+      },
+      setValue(value) {
+        const updatedValue = Number(Number(value).toFixed(this.precision));
+        this.$nextTick(() => {
+            this.currentValue = updatedValue;
+          });
+        return updatedValue;
+      },
+      change(e) {
+        let updatedValue;
+        const max = this.max;
+        const min = this.min;
+        const value = e.target.value.trim();
+        const isEmptyString = value.length === 0;
+        if (isEmptyString) {
+          this.setValue(null);
+          return false;
+        }
+        if (this.validateValue(e.type, value)) {
+          return false;
+        }
+        if (isNaN(value)) {
+          e.target.value = this.setValue(this.currentValue);
+          return false;
+        }
+        if (!isNaN(value)) {
+          updatedValue = Number(value);
+          if (e.type === 'input' && value < min) {
             return false;
           }
-          if (!isNaN(value)) {
-            updatedValue = Number(value);
-            if (e.type === 'input' && value < min) {
-              return false;
-            }
-            if (value > max || value < min) {
-              updatedValue = value > max ? max : min;
-            } else {
-              updatedValue = value;
-            }
-            this.setValue(updatedValue);
+          if (value > max || value < min) {
+            updatedValue = value > max ? max : min;
+          } else {
+            updatedValue = value;
           }
           this.setValue(updatedValue);
-          this.currentValue = value;
-          return true;
-        },
-        validateValue(type, value) {
-          let result = false;
-          if (type === 'input'
-            && value.match(/^-?\.?$|\.$/)) {
-            result = true;
-          }
-          if (type === 'change'
-            && value === this.currentValue) {
-            result = true;
-          }
-          return result;
-        },
-        focus() {
-          this.focused = true;
-        },
-        blur() {
-          this.focused = false;
-        },
-        keyDownEvent(e) {
-          if (e.keyCode === 38) {
-            e.preventDefault();
-            this.up(e);
-          } else if (e.keyCode === 40) {
-            e.preventDefault();
-            this.down(e);
-          }
-        },
-        wheelEvent(e) {
+        }
+        this.setValue(updatedValue);
+        this.currentValue = value;
+        return true;
+      },
+      validateValue(type, value) {
+        let result = false;
+        if (type === 'input'
+          && value.match(/^-?\.?$|\.$/)) {
+          result = true;
+        }
+        if (type === 'change'
+          && value === this.currentValue) {
+          result = true;
+        }
+        return result;
+      },
+      focus(e) {
+        this.focused = true;
+        this.$emit('focus', e);
+      },
+      blur(e) {
+        this.focused = false;
+        this.$emit('blur', e);
+      },
+      keyDownEvent(e) {
+        if (e.keyCode === 38) {
           e.preventDefault();
-          if (e.wheelDeltaY === 120) {
-            this.up(e);
-          } else if (e.wheelDeltaY === -120) {
-            this.down(e);
-          }
-        },
+          this.up(e);
+        } else if (e.keyCode === 40) {
+          e.preventDefault();
+          this.down(e);
+        }
       },
-      init() {
+      wheelEvent(e) {
+        e.preventDefault();
+        if (e.wheelDeltaY === 120) {
+          this.up(e);
+        } else if (e.wheelDeltaY === -120) {
+          this.down(e);
+        }
       },
-    };
+    },
+    init() {
+    },
+  };
 </script>
-<style scoped>
-  /*base class*/
-  .evui-input-number {
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-input-number {
     display: inline-block;
     width: 100%;
     line-height: 1.5;
-    padding: 0px;
+    padding: 0;
     font-size: 12px;
     color: #495060;
-    background-color: #fff;
+    background-color: #FFFFFF;
     background-image: none;
     position: relative;
     cursor: text;
     margin: 0;
     height: 32px;
     vertical-align: middle;
-    border: 1px solid #dddee1;
+    border: 1px solid #DDDEE1;
     border-radius: 4px;
     overflow: hidden;
     transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('number-input-border');
+      background-color: evThemed('number-input-background');
+    }
   }
-  .evui-input-number-handler-wrap {
+
+  .ev-input-number-handler-wrap {
     width: 22px;
     height: 100%;
-    border-left: 1px solid #dddee1;
+    border-left: 1px solid #DDDEE1;
     border-radius: 0 4px 4px 0;
-    background: #fff;
+    background: #FFFFFF;
     position: absolute;
     top: 0;
     right: 0;
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
   }
-  /*border color when mouse hover*/
-  .evui-input-number:hover {
-    border-color : #2d8cf0;
+  /* border color when mouse hover */
+  .ev-input-number:hover {
+    border-color: #2D8CF0;
   }
-  .evui-input-number:hover .evui-input-number-handler-wrap {
-    border-color : #2d8cf0;
+
+  .ev-input-number:hover .ev-input-number-handler-wrap {
+    border-color: #2D8CF0;
     opacity: 1;
   }
 
-  .evui-input-number:hover i{
-    color : #2d8cf0;
+  .ev-input-number:hover i {
+    color: #2D8CF0;
   }
 
-  /*inner input div class*/
-  .evui-input-number-input-wrap {
+  /* inner input div class */
+  .ev-input-number-input-wrap {
     overflow: hidden;
     height: 32px;
   }
-  .evui-input-number-input {
+
+  .ev-input-number-input {
     width: 100%;
     height: 32px;
     line-height: 32px;
@@ -378,63 +395,78 @@
     text-align: left;
     outline: 0;
     -moz-appearance: textfield;
-    color: #666;
     border: 0;
     border-radius: 4px;
+    background-color: transparent;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
-  /*handler line class*/
-  .evui-input-number-handler  {
+
+  /* handler line class */
+  .ev-input-number-handler {
     display: block;
     width: 100%;
     height: 16px;
     line-height: 0;
     text-align: center;
     overflow: hidden;
-    color: #999;
+    color: #999999;
     position: relative;
+    padding-top: 1px;
+    padding-left: 1px;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('number-input-border');
+      background-color: evThemed('number-input-background');
+    }
   }
-  .evui-input-number-handler-up {
+
+  .ev-input-number-handler-up {
     cursor: pointer;
   }
-  .evui-input-number-handler-down {
-    border-top: 1px solid #dddee1;
+
+  .ev-input-number-handler-down {
+    border-top: 1px solid #DDDEE1;
     top: -1px;
     cursor: pointer;
   }
-  /*disable base class*/
-  .evui-input-number-disabled {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #ccc;
-  }
-  /*use border color when mouse hover*/
-  .evui-input-number-disabled:hover {
-    border-color : #D77F7F;
-  }
-  /*inner input div class*/
-  .evui-input-number-disabled .evui-input-number {
-    opacity: .72;
+  /* disable base class */
+  .ev-input-number-disabled {
     cursor: not-allowed;
-    background-color: #f3f3f3;
-  }
-  /*handler line class*/
-  .evui-input-number-disabled .evui-input-number-handler-wrap {
-    display: none;
+
+    @include evThemify() {
+      color: evThemed('number-input-disabled');
+      background-color: evThemed('number-input-disabled-background');
+    }
+
+    .ev-input-number-handler-wrap {
+      display: none;
+    }
+
+    .ev-input-number-handler {
+      opacity: .72;
+      cursor: not-allowed;
+    }
+
+    .ev-input-number-input {
+      opacity: 1;
+      cursor: not-allowed;
+
+      @include evThemify() {
+        color: evThemed('textfield-input-disabled');
+      }
+    }
   }
-  .evui-input-number-disabled .evui-input-number-handler {
-    opacity: .72;
-    color: #ccc!important;
-    cursor: not-allowed;
+  /* use border color when mouse hover */
+  .ev-input-number-disabled:hover {
+    border-color: $color-not-allow;
   }
-  .evui-input-number-input[disabled] {
-    background-color: #f3f3f3;
+
+  .ev-input-number-input[disabled] {
     opacity: 1;
     cursor: not-allowed;
-    color: #ccc;
-  }
-  /*TODO SET ICON CLASS*/
-  .fa-sort-up {
-    margin-top: 4px;
   }
 </style>