@tagplus/components 4.7.12 → 5.0.0

package/src/components/InputNumber/InputNumber.vue

@@ -1,46 +1,60 @@
 <template>
   <div
     :class="[
-      'el-input-number',
-      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
-      { 'is-disabled': inputNumberDisabled },
-      { 'is-without-controls': !controls },
-      { 'is-controls-right': controlsAtRight }
+      ns.b(),
+      ns.m(inputNumberSize),
+      ns.is('disabled', inputNumberDisabled),
+      ns.is('without-controls', !controls),
+      ns.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}"
+      :aria-label="t('el.inputNumber.decrease')"
+      :class="[ns.e('decrease'), ns.is('disabled', minDisabled)]"
       @keydown.enter="decrease"
     >
-      <em :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`" />
+      <el-icon>
+        <arrow-down v-if="controlsAtRight" />
+        <minus v-else />
+      </el-icon>
     </span>
     <span
       v-if="controls"
       v-repeat-click="increase"
-      class="el-input-number__increase"
       role="button"
-      :class="{'is-disabled': maxDisabled}"
+      :aria-label="t('el.inputNumber.increase')"
+      :class="[ns.e('increase'), ns.is('disabled', maxDisabled)]"
       @keydown.enter="increase"
     >
-      <em :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`" />
+      <el-icon>
+        <arrow-up v-if="controlsAtRight" />
+        <plus v-else />
+      </el-icon>
     </span>
     <el-input
+      :id="id"
       ref="input"
-      :value="displayValue"
+      :key="key"
+      :step="step"
+      :model-value="displayValue"
+      :formatter="displayFormatter"
+      :parser="inputParser"
       :placeholder="placeholder"
+      :readonly="readonly"
       :disabled="inputNumberDisabled"
       :size="inputNumberSize"
       :max="max"
       :min="min"
       :name="name"
       :label="label"
-      @keydown.up.native.prevent="increase"
-      @keydown.down.native.prevent="decrease"
+      :validate-event="false"
+      @wheel.prevent
+      @keydown.up.prevent="increase"
+      @keydown.down.prevent="decrease"
       @blur="handleBlur"
       @focus="handleFocus"
       @input="handleInput"
@@ -48,383 +62,320 @@
     />
   </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 {
+<script setup>
+import { computed, onMounted, onUpdated, reactive, ref, watch, getCurrentInstance } from 'vue'
+import { isNil } from 'lodash-unified'
+import {
+  useFormDisabled,
+  useFormItem,
+  useFormSize,
+  debugWarn,
+  isNumber,
+  isString,
+  isUndefined,
+  throwError,
+} from '@/utils'
+import { vRepeatClick } from 'element-plus'
+import { useLocale, useNamespace } from 'element-plus/es/hooks/index'
+import { ArrowDown, ArrowUp, Minus, Plus } from '@element-plus/icons-vue'
+import { inputNumberEmits, inputNumberProps } from '@/components/InputNumber/input-number'
+const props = defineProps(inputNumberProps)
+const emit = defineEmits(inputNumberEmits)
+const UPDATE_MODEL_EVENT = 'update:modelValue'
+const CHANGE_EVENT = 'change'
+const INPUT_EVENT = 'input'
+
+defineOptions({
   name: 'TpInputNumber',
-
-  directives: {
-    repeatClick: RepeatClick
-  },
-
-  components: {
-    ElInput
-  },
-
-  mixins: [Focus('input')],
-  inject: {
-    elForm: {
-      default: ''
-    },
-    elFormItem: {
-      default: ''
+})
+
+const { t } = useLocale()
+const ns = useNamespace('input-number')
+const input = ref()
+const vm = getCurrentInstance().proxy
+const key = ref(1)
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const data = reactive({
+  currentValue: props.modelValue,
+  userInput: null,
+})
+
+const { formItem } = useFormItem()
+
+const minDisabled = computed(
+  () => isNumber(props.modelValue) && props.modelValue <= props.min
+)
+const maxDisabled = computed(
+  () => isNumber(props.modelValue) && props.modelValue >= props.max
+)
+
+const numPrecision = computed(() => {
+  const stepPrecision = getPrecision(props.step)
+  if (!isUndefined(props.precision)) {
+    if (stepPrecision > props.precision) {
+      debugWarn(
+        'InputNumber',
+        'precision should not be less than the decimal places of step'
+      )
     }
-  },
+    return props.precision
+  } else {
+    return Math.max(getPrecision(props.modelValue), stepPrecision)
+  }
+})
+const controlsAtRight = computed(() => {
+  return props.controls && props.controlsPosition === 'right'
+})
+
+const inputNumberSize = useFormSize()
+const inputNumberDisabled = useFormDisabled()
+
+/**
+ * @tagplus
+ * Modificado para permitir um valor padrão vazio ou 0 de acordo com a prop
+ */
+const displayValue = computed(() => {
+  if (data.userInput !== null) {
+    return data.userInput
+  }
+  let currentValue = data.currentValue
 
-  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
-    }
-  },
+  const fallbackValue = props.stringDefaultsZero ? 0 : ''
+  if (props.modelValue === '' || isNil(currentValue) || currentValue === ''){
+    return fallbackValue
+  }
 
-  data () {
-    return {
-      currentValue: '',
-      userInput: null
+  if (isNumber(currentValue)) {
+    if (Number.isNaN(currentValue)) return fallbackValue
+    if (!isUndefined(props.precision)) {
+      currentValue = currentValue.toFixed(props.precision)
     }
-  },
-
-  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
+  }
+  return currentValue
+})
+
+/**
+ * @tagplus
+ * Criado para simular o comportamento do type=number porque ele não deixa
+ * exibir os valores formatados no padrão pt-br 100.555,55
+ */
+const displayFormatter = computed(() => {
+  const decimalChar = vm.$t('locale.number.decimal')
+  const thousandsChar = vm.$t('locale.number.thousands')
+  return (value) => {
+    // Essa linha simula o comportamento do type="number" para não deixar digitar letras
+    const noLetters = value.replaceAll(/[a-zA-Z]/g, '')
+    const res = noLetters.replace('.', decimalChar).replace(/\B(?=(\d{3})+(?!\d))/g, thousandsChar)
+    return res
+  }
+})
+
+/**
+ * @tagplus
+ * Criado em conjunto do displayFormatter para simular o type="number"
+ * @see displayFormatter
+ */
+const inputParser = computed(() => {
+  const decimalChar = vm.$t('locale.number.decimal')
+  const thousandsChar = vm.$t('locale.number.thousands')
+  return (value) => {
+    const regexThou = `/\$\s?|(${thousandsChar}*)/g`
+    const res = value.replace(regexThou, '').replace(decimalChar, '.')
+    return res
+  }
+})
+
+const toPrecision = (num, pre) => {
+  // eslint-disable-next-line no-param-reassign
+  if (isUndefined(pre)) pre = numPrecision.value
+  if (pre === 0) return Math.round(num)
+  let snum = String(num)
+  const pointPos = snum.indexOf('.')
+  if (pointPos === -1) return num
+  const nums = snum.replace('.', '').split('')
+  const datum = nums[pointPos + pre]
+  if (!datum) return num
+  const length = snum.length
+  if (snum.charAt(length - 1) === '5') {
+    snum = `${snum.slice(0, Math.max(0, length - 1))}6`
+  }
+  return Number.parseFloat(Number(snum).toFixed(pre))
+}
+const getPrecision = (value) => {
+  if (isNil(value)) return 0
+  const valueString = value.toString()
+  const dotPosition = valueString.indexOf('.')
+  let precision = 0
+  if (dotPosition !== -1) {
+    precision = valueString.length - dotPosition - 1
+  }
+  return precision
+}
+const ensurePrecision = (val, coefficient = 1) => {
+  if (!isNumber(val)) return data.currentValue
+  // Solve the accuracy problem of JS decimal calculation by converting the value to integer.
+  return toPrecision(val + props.step * coefficient)
+}
+const increase = () => {
+  if (props.readonly || inputNumberDisabled.value || maxDisabled.value) return
+  const value = Number(displayValue.value) || 0
+  const newVal = ensurePrecision(value)
+  setCurrentValue(newVal)
+  emit(INPUT_EVENT, data.currentValue)
+  setCurrentValueToModelValue()
+}
+const decrease = () => {
+  if (props.readonly || inputNumberDisabled.value || minDisabled.value) return
+  const value = Number(displayValue.value) || 0
+  const newVal = ensurePrecision(value, -1)
+  setCurrentValue(newVal)
+  emit(INPUT_EVENT, data.currentValue)
+  setCurrentValueToModelValue()
+}
+const verifyValue = (value, update) => {
+  const { max, min, step, precision, stepStrictly, valueOnClear } = props
+  if (max < min) {
+    throwError('InputNumber', 'min should not be greater than max.')
+  }
+  let newVal = Number(value)
+  if (isNil(value) || Number.isNaN(newVal)) {
+    return null
+  }
+  if (value === '') {
+    if (valueOnClear === null) {
+      return null
     }
-  },
-
-  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 = isString(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear
+  }
+  if (stepStrictly) {
+    newVal = toPrecision(Math.round(newVal / step) * step, precision)
+  }
+  if (!isUndefined(precision)) {
+    newVal = toPrecision(newVal, precision)
+  }
+  if (newVal > max || newVal < min) {
+    newVal = newVal > max ? max : min
+    update && emit(UPDATE_MODEL_EVENT, newVal)
+  }
+  return newVal
+}
+const setCurrentValue = (value, emitChange = true) => {
+  const oldVal = data.currentValue
+  const newVal = verifyValue(value)
+  if (!emitChange) {
+    emit(UPDATE_MODEL_EVENT, newVal)
+    return
+  }
+  if (oldVal === newVal) return
+  data.userInput = null
+  emit(UPDATE_MODEL_EVENT, newVal)
+  emit(CHANGE_EVENT, newVal, oldVal)
+  if (props.validateEvent) {
+    formItem?.validate?.('change').catch((err) => debugWarn(err))
+  }
+  data.currentValue = newVal
+}
+const handleInput = (value) => {
+  data.userInput = value
+  const newVal = value === '' ? null : Number(value)
+  emit(INPUT_EVENT, newVal)
+  setCurrentValue(newVal, false)
+}
+const handleInputChange = (value) => {
+  const newVal = value !== '' ? Number(value) : ''
+  if ((isNumber(newVal) && !Number.isNaN(newVal)) || value === '') {
+    setCurrentValue(newVal)
+  }
+  setCurrentValueToModelValue()
+  data.userInput = null
+}
 
-            newVal = Math.round(newVal / this.step) * precisionFactor * this.step / precisionFactor
-          }
+const focus = () => {
+  input.value?.focus?.()
+}
 
-          if (this.precision !== undefined) {
-            newVal = this.toPrecision(newVal, this.precision)
-          }
-        }
+const blur = () => {
+  input.value?.blur?.()
+}
 
-        if (newVal >= this.max) newVal = this.max
+const handleFocus = (event) => {
+  emit('focus', event)
+}
 
-        if (newVal <= this.min) newVal = this.min
+const handleBlur = (event) => {
+  data.userInput = null
+  emit('blur', event)
+  if (props.validateEvent) {
+    formItem?.validate?.('blur').catch((err) => debugWarn(err))
+  }
+}
 
-        this.currentValue = newVal
-        this.userInput = null
-        this.$emit('input', newVal)
-      }
+const setCurrentValueToModelValue = () => {
+  if (data.currentValue !== props.modelValue) {
+    data.currentValue = props.modelValue
+  }
+}
+watch(
+  () => props.modelValue,
+  (value, oldValue) => {
+    const newValue = verifyValue(value, true)
+    if (data.userInput === null && newValue !== oldValue) {
+      data.currentValue = newValue
     }
   },
-
-  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()
+  { immediate: true }
+)
+
+/**
+ * @tagplus
+ * Criado para observar se a lang mudou para reformatar o displayValue
+ */
+watch(
+  () => vm.$i18nHelper.hooks.onLanguageChanged,
+  (value, oldValue) => {
+    key.value++
+  }
+)
+
+onMounted(() => {
+  const { min, max, modelValue } = props
+  const innerInput = input.value?.input
+  innerInput.setAttribute('role', 'spinbutton')
+  if (Number.isFinite(max)) {
+    innerInput.setAttribute('aria-valuemax', String(max))
+  } else {
+    innerInput.removeAttribute('aria-valuemax')
+  }
+  if (Number.isFinite(min)) {
+    innerInput.setAttribute('aria-valuemin', String(min))
+  } else {
+    innerInput.removeAttribute('aria-valuemin')
+  }
+  innerInput.setAttribute(
+    'aria-valuenow',
+    data.currentValue || data.currentValue === 0
+      ? String(data.currentValue)
+      : ''
+  )
+  innerInput.setAttribute('aria-disabled', String(inputNumberDisabled.value))
+  // eslint-disable-next-line no-eq-null, eqeqeq
+  if (!isNumber(modelValue) && modelValue != null) {
+    let val = Number(modelValue)
+    if (Number.isNaN(val)) {
+      val = null
     }
+    emit(UPDATE_MODEL_EVENT, val)
   }
-}
+})
+onUpdated(() => {
+  const innerInput = input.value?.input
+  innerInput?.setAttribute('aria-valuenow', `${data.currentValue ?? ''}`)
+})
+defineExpose({
+  /** @description get focus the input component */
+  focus,
+  /** @description remove focus the input component */
+  blur,
+})
 </script>