@tagplus/components 4.7.16 → 4.8.1

package/package.json

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

package/src/components/Autosuggest/Autosuggest.vue

@@ -279,7 +279,8 @@ export default {
 
   data () {
     return {
-      tooltipVisible: false
+      tooltipVisible: false,
+      modifiedLabel: null
     }
   },
 
@@ -327,7 +328,10 @@ export default {
 
       return this.filterable && this.allowCreate && !hasExistingOption
     },
-    rawSuggestionsList () {
+    // Monta a lista com ou sem "Cadastrar Novo Item"
+    suggestionsList () {
+      if (this.loading) return []
+
       // transformando em Array
       const list =
         typeof this.suggestions === 'object'
@@ -344,12 +348,6 @@ export default {
 
       return list
     },
-    // Monta a lista com ou sem "Cadastrar Novo Item"
-    suggestionsList () {
-      if (this.loading) return []
-
-      return this.rawSuggestionsList
-    },
 
     emptyText () {
       if (this.loading) {
@@ -481,11 +479,6 @@ export default {
       }
     },
 
-    /** Atualiza a label de algum dos elementos da listagem do altosuggest */
-    atualizarLabelOpcao (index, val) {
-      this.rawSuggestionsList[index].label = val
-    },
-
     /**
      * Sobrescreve o getOption do select para mostrar o labelValue em vez do idValue
      */
@@ -527,16 +520,13 @@ export default {
 
       for (let i = 0; i <= this.cachedOptions.length - 1; i++) {
         const cachedOption = this.cachedOptions[i]
-
         let isEqual = false
-
         if (isObject) {
           isEqual = getValueByPath(cachedOption.value, this.valueKey) === getValueByPath(value, this.valueKey)
         } else {
           isEqual = cachedOption.value === value
-
-          if (initialLabel && isEqual) {
-            this.atualizarLabelOpcao(i, initialLabel)
+          if (initialLabel) {
+            this.modifiedLabel = initialLabel
           }
         }
 
@@ -551,7 +541,7 @@ export default {
       const label = !isObject && !isNull && !isUndefined ? value : ''
       const newOption = {
         value,
-        currentLabel: initialLabel || label
+        currentLabel: this.modifiedLabel || label
       }
 
       if (this.multiple) {
@@ -560,6 +550,7 @@ export default {
 
       return newOption
     },
+
     checkDefaultFirstOption () {
       this.$nextTick(() => {
         this.hoverIndex = -1

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)
     }
   }
-
 }