@tagplus/components 4.8.0 → 4.8.1

package/package.json

@@ -8,7 +8,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "4.8.0",
+  "version": "4.8.1",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"

package/src/components/Money/Money.vue

@@ -2,12 +2,13 @@
   <el-input
     :id="`${_id}`"
     class="tp-money"
-    :value="formattedValue"
+    :value="isTyping ? rawValue : formattedValue"
     v-bind="$attrs"
     :maxlength="maxlength"
-    @input="input"
+    @input="handleInput"
     @change="handleChange"
-    @focus="$event.target.select()"
+    @focus="handleFocus"
+    @blur="handleBlur"
   >
     <template
       v-if="!removePrepend"
@@ -36,6 +37,7 @@ export default {
   name: 'TpMoney',
 
   mixins: [Locale, floatFormatterMixin],
+
   props: {
     id: {
       type: String,

package/src/mixins/floatFormatter.js

@@ -1,12 +1,14 @@
 import { formatMoney } from 'tp-ui/utils/currency'
 
 /**
- * Eventos para componentes tp-money e tp-percent mostratem o número formatado com a precisão correta e devolver float sem arredondar
+ * Mixin para formatar valores float.
  */
 export default {
   data () {
     return {
-      formattedValue: this.value
+      formattedValue: this.value,
+      isTyping: false,
+      rawValue: ''
     }
   },
 
@@ -15,7 +17,6 @@ export default {
       type: Boolean,
       default: false
     },
-
     customPrecision: {
       default: false
     }
@@ -38,16 +39,80 @@ export default {
   },
 
   methods: {
-    input (evt) {
-      this.formattedValue = formatMoney(evt, true, this.locale, this.customPrecision)
-      const moneyFormatado = formatMoney(evt, false, this.locale, this.customPrecision)
+    /**
+     * Converte o valor de entrada para float.
+     * @param {string} value - O valor de entrada.
+     * @returns {number} O valor float convertido.
+     */
+    parseValue (value) {
+      if (!value) return 0
+      const parts = value.split(',')
+      if (parts.length > 1) {
+        const precision = this.customPrecision !== false ? this.customPrecision : 2
+        parts[1] = parts[1].slice(0, precision)
+      }
+      return parseFloat(parts.join('.')) || 0
+    },
+
+    /**
+     * Manipula o valor de entrada sanitizando-o, limitando a precisão decimal e emitindo o número analisado.
+     *
+     * Esta função executa os seguintes passos:
+     * 1. Remove todos os caracteres do valor de entrada que não são dígitos ou a primeira vírgula.
+     * 2. Garante que há no máximo uma vírgula no valor sanitizado.
+     * 3. Divide o valor sanitizado em partes inteiras e fracionárias com base na vírgula.
+     * 4. Limita a parte fracionária a uma precisão especificada (o padrão é 2 se `customPrecision` não estiver definido).
+     * 5. Junta as partes inteiras e fracionárias novamente e atualiza `rawValue`.
+     * 6. Converte o `rawValue` para um número float e o emite usando o evento `input`.
+     *
+     * @param {string} value - O valor de entrada a ser manipulado.
+     * @emits input - Emite o valor numérico analisado.
+     */
+    handleInput (value) {
+      // remove todos os caracteres que não são números ou a primeira vírgula
+      const sanitized = value.replace(/[^\d,]/g, '')
+      const commaCount = (sanitized.match(/,/g) || []).length
+
+      if (commaCount > 1) return
+
+      const parts = sanitized.split(',')
+      if (parts.length > 1) {
+        const precision = this.customPrecision !== false ? this.customPrecision : 2
+        parts[1] = parts[1].slice(0, precision)
+        this.rawValue = parts.join(',')
+      } else {
+        this.rawValue = sanitized
+      }
+
+      const numberValue = this.parseValue(this.rawValue)
+      this.$emit('input', numberValue)
+    },
 
-      this.$emit('input', moneyFormatado)
+    /**
+     * Ao focar o input, o valor existente é selecionado e
+     * caso o usuário comece a digitar, o valor é substituído.
+     * @param {Event} event - O evento de foco.
+     */
+    handleFocus (event) {
+      this.isTyping = true
+      this.rawValue = this.formattedValue
+      event.target.select()
+    },
+
+    /**
+     * Função responsável por formatar o valor de acordo com a locale
+     * e emitir o valor convertido, após o usuário sair do input.
+     */
+    handleBlur () {
+      this.isTyping = false
+      const value = this.parseValue(this.rawValue)
+      this.formattedValue = formatMoney(value, true, this.locale, this.customPrecision)
+      this.$emit('input', value)
     },
 
     handleChange (evt) {
-      this.$emit('change', formatMoney(evt, false, this.locale, this.customPrecision))
+      const value = this.parseValue(evt)
+      this.$emit('change', value)
     }
   }
-
 }