@tagplus/components 4.8.5 → 4.9.0

package/package.json

@@ -8,7 +8,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "4.8.5",
+  "version": "4.9.0",
   "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="handleInputMoney"
     @change="handleChange"
-    @focus="$event.target.select()"
+    @focus="handleFocus"
+    @blur="handleBlur"
   >
     <template
       v-if="!removePrepend"
@@ -25,6 +26,14 @@
         v-bind="scope"
       />
     </template>
+
+    <template
+      slot="append"
+    >
+      <slot
+        name="append"
+      />
+    </template>
   </el-input>
 </template>
 
@@ -36,6 +45,7 @@ export default {
   name: 'TpMoney',
 
   mixins: [Locale, floatFormatterMixin],
+
   props: {
     id: {
       type: String,

package/src/components/Multisuggest/Multisuggest.vue

@@ -731,6 +731,25 @@ export default {
       }
     },
 
+    /**
+     * Sobrescreve função do select para apagar a query após a seleção de um item
+     * Link para a função original: https://github.com/ElemeFE/element/blob/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/select/src/select.vue#L685
+     * Manipula a seleção de uma opção em Multisuggest.
+     * @param {Object} option - A opção selecionada.
+     * @param {boolean} byClick - Indica se a seleção foi feita por clique.
+     * Se o componente permite múltiplas seleções (this.multiple):
+     * - Clona o valor atual (this.value) e obtém o index da opção selecionada.
+     * - Se a opção já estiver selecionada, a remove das opções selecionadas.
+     * - Se a opção não estiver selecionada e o limite de múltiplas seleções não foi atingido, adiciona a opções selecionadas.
+     * - Emite o evento 'input' com o novo valor e chama emitChange.
+     * - Limpa a query e, se a opção foi criada, redefine a query e o comprimento do input.
+     * - Se o componente for filtrável, foca no input.
+     * Se o componente não permite múltiplas seleções:
+     * - Emite o evento 'input' com o valor da opção e chama emitChange.
+     * - Define a visibilidade como falsa.
+     * Define isSilentBlur com base no parâmetro byClick e chama setSoftFocus.
+     * Se o componente não estiver visível, rola até a opção selecionada no próximo tick.
+     */
     handleOptionSelect (option, byClick) {
       if (this.multiple) {
         const value = (this.value || []).slice()

package/src/components/Percent/Percent.vue

@@ -5,7 +5,7 @@
     :value="formattedValue"
     v-bind="$attrs"
     :maxlength="maxlength"
-    @input="input"
+    @input="inputPercent"
     @change="handleChange"
     @focus="$event.target.select()"
   >

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,87 @@ export default {
   },
 
   methods: {
-    input (evt) {
+    inputPercent (evt) {
       this.formattedValue = formatMoney(evt, true, this.locale, this.customPrecision)
       const moneyFormatado = formatMoney(evt, false, this.locale, this.customPrecision)
 
       this.$emit('input', moneyFormatado)
     },
 
+    /**
+     * 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.
+     */
+    handleInputMoney (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)
+    },
+
+    /**
+     * 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)
     }
   }
-
 }