@tagplus/components 5.3.2 → 5.3.4

package/src/components/InputNumber/InputNumber.vue

@@ -0,0 +1,430 @@
+<template>
+  <div
+    :class="[
+      'el-input-number',
+      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
+      { 'is-disabled': inputNumberDisabled },
+      { 'is-without-controls': !controls },
+      { 'is-controls-right': controlsAtRight }
+    ]"
+    @dragstart.prevent
+  >
+    <span
+      v-if="controls"
+      v-repeat-click="decrease"
+      class="el-input-number__decrease"
+      role="button"
+      :class="{'is-disabled': minDisabled}"
+      @keydown.enter="decrease"
+    >
+      <em :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`" />
+    </span>
+    <span
+      v-if="controls"
+      v-repeat-click="increase"
+      class="el-input-number__increase"
+      role="button"
+      :class="{'is-disabled': maxDisabled}"
+      @keydown.enter="increase"
+    >
+      <em :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`" />
+    </span>
+    <el-input
+      ref="input"
+      :value="displayValue"
+      :placeholder="placeholder"
+      :disabled="inputNumberDisabled"
+      :size="inputNumberSize"
+      :max="max"
+      :min="min"
+      :name="name"
+      :label="label"
+      @keydown.up.native.prevent="increase"
+      @keydown.down.native.prevent="decrease"
+      @blur="handleBlur"
+      @focus="handleFocus"
+      @input="handleInput"
+      @change="handleInputChange"
+    />
+  </div>
+</template>
+
+<script>
+import ElInput from 'element-ui/packages/input'
+import Focus from 'element-ui/src/mixins/focus'
+import RepeatClick from 'element-ui/src/directives/repeat-click'
+
+export default {
+  name: 'TpInputNumber',
+
+  directives: {
+    repeatClick: RepeatClick
+  },
+
+  components: {
+    ElInput
+  },
+
+  mixins: [Focus('input')],
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  props: {
+    step: {
+      type: Number,
+      default: 1
+    },
+    stepStrictly: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    value: {
+      type: [Number, String],
+      default: null
+    },
+    disabled: Boolean,
+    size: {
+      type: [String, Boolean],
+      default: false
+    },
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    controlsPosition: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: [String, Boolean],
+      default: false
+    },
+    label: {
+      type: [String],
+      default: ''
+    },
+    placeholder: {
+      type: [String, Boolean],
+      default: false
+    },
+    precision: {
+      type: Number,
+      default: 2,
+      validator (val) {
+        return val >= 0 && val === parseInt(val, 10)
+      }
+    },
+    // Customizada
+    usarVirgula: {
+      type: Boolean,
+      default: true
+    },
+    // Customizada - Se false permite campo vazio
+    stringDefaultsZero: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      currentValue: '',
+      userInput: null
+    }
+  },
+
+  computed: {
+    /**
+     * Sobrescrito do element
+     */
+    minDisabled () {
+      return this.value < this.min
+    },
+
+    /**
+     * Sobrescrito do element
+     */
+    maxDisabled () {
+      return this.value > this.max
+    },
+    numPrecision () {
+      const { value, step, getPrecision, precision } = this
+      const stepPrecision = getPrecision(step)
+
+      if (precision !== undefined) {
+        if (stepPrecision > precision) {
+          console.warn('[Element Warn][InputNumber]precision should not be less than the decimal places of step')
+        }
+
+        return precision
+      }
+
+      return Math.max(getPrecision(value), stepPrecision)
+    },
+    controlsAtRight () {
+      return this.controls && this.controlsPosition === 'right'
+    },
+    _elFormItemSize () {
+      return (this.elFormItem || {}).elFormItemSize
+    },
+    inputNumberSize () {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
+    },
+    inputNumberDisabled () {
+      return this.disabled || Boolean((this.elForm || {}).disabled)
+    },
+    /**
+     * Sobrescrito do element
+     */
+    displayValue () {
+      if (this.userInput !== null) {
+        // corrige o bug para deixar limpar o campo
+        if (!this.stringDefaultsZero && this.userInput === '') {
+          this.currentValue = ''
+        }
+
+        return this.userInput
+      }
+
+      let currentValue
+
+      if (this.value === '' && !this.stringDefaultsZero) {
+        currentValue = ''
+      } else {
+        currentValue = this.currentValue
+      }
+
+      if (typeof currentValue === 'number') {
+        if (this.stepStrictly) {
+          const stepPrecision = this.getPrecision(this.step)
+          const precisionFactor = Math.pow(10, stepPrecision)
+
+          currentValue =
+            (Math.round(currentValue / this.step) *
+              precisionFactor *
+              this.step) /
+            precisionFactor
+        }
+
+        if (this.precision !== undefined) {
+          currentValue = currentValue.toFixed(this.precision)
+        }
+      }
+
+      if (this.usarVirgula) {
+        currentValue = (`${currentValue }`).replace('.', ',')
+      }
+
+      return currentValue
+    }
+  },
+
+  watch: {
+    /**
+     * Sobrescrito do element
+     */
+    value: {
+      immediate: true,
+      handler (value) {
+        let newVal
+
+        if (value === undefined) {
+          newVal = value
+        } else if (!this.stringDefaultsZero && value === '') {
+          newVal = ''
+        } else {
+          newVal = Number(value)
+        }
+
+        if (newVal !== undefined) {
+          if (isNaN(newVal)) {
+            return
+          }
+
+          if (this.stepStrictly) {
+            const stepPrecision = this.getPrecision(this.step)
+            const precisionFactor = Math.pow(10, stepPrecision)
+
+            newVal = Math.round(newVal / this.step) * precisionFactor * this.step / precisionFactor
+          }
+
+          if (this.precision !== undefined) {
+            newVal = this.toPrecision(newVal, this.precision)
+          }
+        }
+
+        if (newVal >= this.max) newVal = this.max
+
+        if (newVal <= this.min) newVal = this.min
+
+        this.currentValue = newVal
+        this.userInput = null
+        this.$emit('input', newVal)
+      }
+    }
+  },
+
+  mounted () {
+    const innerInput = this.$refs.input.$refs.input
+
+    innerInput.setAttribute('role', 'spinbutton')
+    innerInput.setAttribute('aria-valuemax', this.max)
+    innerInput.setAttribute('aria-valuemin', this.min)
+    innerInput.setAttribute('aria-valuenow', this.currentValue)
+    innerInput.setAttribute('aria-disabled', this.inputNumberDisabled)
+  },
+
+  updated () {
+    if (!this.$refs || !this.$refs.input) return
+
+    const innerInput = this.$refs.input.$refs.input
+
+    innerInput.setAttribute('aria-valuenow', this.currentValue)
+  },
+
+  methods: {
+    toPrecision (num, precision) {
+      if (precision === undefined) precision = this.numPrecision
+
+      return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision))
+    },
+    getPrecision (value) {
+      if (value === undefined) return 0
+
+      const valueString = value.toString()
+      const dotPosition = valueString.indexOf('.')
+      let precision = 0
+
+      if (dotPosition !== -1) {
+        precision = valueString.length - dotPosition - 1
+      }
+
+      return precision
+    },
+    _increase (val, step) {
+      if (typeof val !== 'number' && val !== undefined) return this.currentValue
+
+      const precisionFactor = Math.pow(10, this.numPrecision)
+
+      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.
+      return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor)
+    },
+    _decrease (val, step) {
+      if (typeof val !== 'number' && val !== undefined) return this.currentValue
+
+      const precisionFactor = Math.pow(10, this.numPrecision)
+
+      return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor)
+    },
+    increase () {
+      if (this.inputNumberDisabled || this.maxDisabled) return
+
+      const value = this.value || 0
+      const newVal = this._increase(value, this.step)
+
+      this.setCurrentValue(newVal)
+    },
+    decrease () {
+      if (this.inputNumberDisabled || this.minDisabled) return
+
+      const value = this.value || 0
+      const newVal = this._decrease(value, this.step)
+
+      this.setCurrentValue(newVal)
+    },
+    handleBlur (event) {
+      if (!this.value && this.stringDefaultsZero && !this.precision) {
+        this.currentValue = 0
+      }
+
+      this.$emit('blur', event)
+    },
+    handleFocus (event) {
+      if (!this.value && !this.precision) {
+        this.currentValue = ''
+      }
+
+      this.$emit('focus', event)
+    },
+
+    /**
+     * Sobrescrito do element
+     */
+    handleInput (value) {
+      this.userInput = value
+      let newVal
+
+      if (value === '' && this.stringDefaultsZero) {
+        newVal = Number(value.replace(',', '.'))
+      } else {
+        newVal = value
+      }
+
+      this.$emit('change', newVal)
+    },
+
+    /**
+     * Sobrescrito do element
+     */
+    handleInputChange (value) {
+      let newVal
+
+      if (value === '') {
+        // Por padrão converte '' para 0
+        if (this.stringDefaultsZero) {
+          newVal = 0
+        } else {
+          newVal = ''
+        }
+      } else {
+        newVal = Number(value.replace(',', '.'))
+      }
+
+      if (!isNaN(newVal) || value === '') {
+        this.setCurrentValue(newVal)
+      }
+
+      this.userInput = null
+    },
+
+    /**
+     * Sobrescrito do element
+     */
+    setCurrentValue (newVal) {
+      const oldVal = this.currentValue
+
+      if (typeof newVal === 'number' && this.precision !== undefined) {
+        newVal = this.toPrecision(newVal, this.precision)
+      }
+
+      if (newVal >= this.max) newVal = this.max
+
+      if (newVal <= this.min) newVal = this.min
+
+      if (oldVal === newVal && newVal === this.value) return
+
+      this.userInput = null
+      this.$emit('input', newVal)
+      this.$emit('change', newVal, oldVal)
+    },
+
+    select () {
+      this.$refs.input.select()
+    }
+  }
+}
+</script>

package/src/components/InputNumber/index.js

@@ -0,0 +1,3 @@
+import InputNumber from './InputNumber'
+
+export default InputNumber