juareznasato / vuetify-money

vuetify-money

vuetify-money

If you use Vuejs with Vuetify 2.x and you need a component to work with money format, maybe this can help you.

v-text-field: R$ 12.345.678,90

v-model: 12345678.90

Dependency

• VueJS
• Vuetify 2.x

Links

See DEMO here

GitHub

npm

Install

$ npm install vuetify-money --save

Register component:
1- Create a src/plugins/vuetify-money.js file with the following content:
import Vue from "vue";
import VuetifyMoney from "vuetify-money";
Vue.use(VuetifyMoney);
export default VuetifyMoney;

2- Add file to src/main.js:
import "./plugins/vuetify-money.js";

Parent component:
<template>
  <div>
    <vuetify-money
      v-model="value"
      v-bind:label="label"
      v-bind:placeholder="placeholder"
      v-bind:readonly="readonly"
      v-bind:disabled="disabled"
      v-bind:outlined="outlined"
      v-bind:clearable="clearable"
      v-bind:valueWhenIsEmpty="valueWhenIsEmpty"
      v-bind:options="options"
      v-bind:properties="properties"
    />
    Parent v-model: {{ value }}
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1234567.89",
    label: "Value",
    placeholder: " ",
    readonly: false,
    disabled: false,
    outlined: true,
    clearable: true,
    valueWhenIsEmpty: "",
    options: {
      locale: "pt-BR",
      prefix: "R$",
      suffix: "",
      length: 11,
      precision: 2
    },
    properties: {
      hint: "my hint"
      // You can add other v-text-field properties, here.
    },
  })
};
</script>

Properties

Property	Type	Default	Description
label	String	“”	v-text-field property
placeholder	String	undefined	v-text-field property
readonly	Boolean	false	v-text-field property
dense	Boolean	false	v-text-field property
error	Boolean	false	v-text-field property
hideDetails	Boolean	false	v-text-field property
rules	Array or String	[]	v-text-field property
disabled	Boolean	false	v-text-field property
outlined	Boolean	false	v-text-field property
clearable	Boolean	false	v-text-field property
backgroundColor	String	white	v-text-field property
valueWhenIsEmpty	String	“”	value when TextField is empty. Ex: 0, “”, null

*** If you need to use other v-text-field properties, you can add them in properties object.

Options

Option	Type	Default	Description
locale	String	pt-BR	Locale to format number
prefix	String	“”	Currency symbol
suffix	String	“”	% or others
length	Number	11	Number length
precision	Number	2	Decimal precision

Option	Type	Default	Description
min	Number	0	Value min
minEvent	String	0	Custom event name
max	Number	-	Value max
maxEvent	String	-	Custom event name

vuetify-money's Issues

SyntaxError: Cannot use import statement outside a module

Erro in unit test with jest.

limit of numbers

hi @juareznasato ,

Is it possible to increase limit of digits?, it adds 0s in end when we increase length

Obrigado

@juareznasato obrigado por esse componente. Cara, migrei para quasar e o componente continua funcionando lindamente (com as devidas adaptações, é claro). Vuetify-money salvando vidas.

The "hint" property is missing

The v-text-field component has a "hint" property that will display when the the field gets focus. Can that be included?

Default behaviour on press Enter key while focused

Hi, i'm using this component in my project, but when I press Enter while focused in a vuetify-money input it does not try to submit the form as expected.

I don't think it is an issue with v-text-field because it behaves as expected.

Do I need to pass any param or anything like that or it is just an issue to resolve?

Thanks.

Possibility to react to events from `v-text-field`

It would be awesome if we could react to events from v-text-field component. I suggest something like the properties prop in vuetify-money. Another possibility is giving a ref attribute to the v-text-field so we can set up event listeners manually.

If this is a desired enhancement, I may try to implement as soon I have some free time.

Best regards.

Add disabled prop

Unable to set text field as disabled

How I can add prepend-icon property?

On v-text-field we can add a prepend-icon, it is possible on vuetify-money?

<v-text-field
          v-money="money"
          :rules="[rules.min]"
          v-model="paymentValue"
          label="Valor R$ (pagamento)"
          prepend-icon="attach_money"
        />

Property backgroundColor not working inside a dark layout

Hi guys!
If we put the vuetify-money inside a dark layout, tghere was a class 'white' localized in .v-text-field>.v-input__control>.v-input__slot that makes the field always backgrounded white event if i put the dark propery.
I could remove with jQuery this class white, but i believe that is a bug.




as you can see, the dark property works correctly, but the backgroundColor not

Environment Details:

Thanks in advance

v-text-field type="number"

I pass type="number" and step="1000" in properties
v-text-field is well displayed with the arrows at the end of the input.

I enter 1: ok
2: ok
3: ok
4: → The specified value "1\u202F234" cannot be parsed, or is out of range.

The same behavior when I click on the arrow up.

CDN / Compiled Version

Hi there

do you have a compiled version for the money component,

I tried to find vuetify-money.js to no avail.

Thank you.

negative value

Is there any way to input negative value ?

When empty, you can add arbitrary amount of zeros (0)

Hello!

Wonderful component, thank you!

When the input is zero, you can keep adding however many zeros you want and they will be appended to the number, it does not respect the maximum length / precision options.

I will try to fix it for myself and let you know with a PR, but keep it in mind !

Not able to use @change Event.

Hi, I need to use @chage Event so that I could trigger the event whenever the changes happen in the text field. Is there any way to do that without the use of watcher property?

How to pass rules in component?

i try, but dont work:

`

        v-model="maxValuePerPeriod.value"
        v-bind:label="maxValuePerPeriod.label"
        v-bind:placeholder="maxValuePerPeriod.placeholder"
        v-bind:readonly="maxValuePerPeriod.readonly"
        v-bind:disabled="maxValuePerPeriod.disabled"
        v-bind:outlined="maxValuePerPeriod.outlined"
        v-bind:clearable="maxValuePerPeriod.clearable"
        v-bind:valueWhenIsEmpty="maxValuePerPeriod.valueWhenIsEmpty"
        v-bind:options="maxValuePerPeriod.options"
        v-bind:properties="maxValuePerPeriod.properties"        

maxValuePerPeriod: {
label: "Valor máximo por período",
value: null,
placeholder: " ",
readonly: false,
disabled: false,
outlined: false,
clearable: false,
valueWhenIsEmpty: "",
options: {
locale: "pt-BR",
prefix: "",
suffix: "",
length: 11,
precision: 2
},
properties: {
rules: [value => !!value || 'Required.', value => (value && value.length >= 3) || 'Min 3 characters',]
}
}`

Error messages is broken

Hi, I am try to use vuelidate with your component.
The problem is that error messages validations is never showing.
Is possible you fix it?
If I use v-text-field all is ok.

I am using next code.

<vuetify-money
                        v-model="preco_proced.qm2"
                        class="purple-input"
                        label="Qtde M2 Filme"
                        placeholder="0,00"
                        :clearable="true"
                        :valueWhenIsEmpty="'0.000000'"
                        :options="optionsNumberFilme"
                        :error-messages="valorErrors($v.preco_proced.qm2)"
                        persistent-hint
                        required
                        @input="$v.preco_proced.qm2.$touch()"
                        @blur="$v.preco_proced.qm2.$touch()"
                      /> 


methods: {
    valorErrors(model) {
      //debugger;
      const errors = [];
      if (!model?.$dirty) return errors;
      !model.required && errors.push("Valor é obrigatório");
      console.log(model.isNumber);
      !model.isNumber && errors.push("Valor é obrigatório");
      console.log(errors);
      return errors;
    },

Numbers bigger than 17 digits

Problem

Tried to enter numbers with a length of 22 digits:

1234567890123456789012

The vuetify-money component was filled with the following after entering the number above:

1.234.567.890.123.457.000.000

After the 15th digit the following digit gets increased and followed by 0 for every appended digit

My Syntax

Template:

<vuetify-money
       class="px-4"
       style="width: 250px"
       v-model="testValue"
       v-bind:options="options"
       background-color="secondaryAccent"
       label="Answer"
/>

Script:

data() {
    return {
      testValue: "",
      options: {
        locale: "pt-BR",
        length: 30,
        precision: 0,
      },
   }
}

Action I tried to solve

Adjusting the length doesn't affect the issue.

min and max do not work in v-text-field-integer

:options="{
inputMask: '##',
outputMask: '##',
empty: null,
applyAfter: false,
min: 1,
max: 25,
}"
Hi,
How do I configure my input to prevent the entry of 0 or 26? For the moment it's possible despite the min and max parameters.
thanks

Using the component with vuetify

Hi, is posssible use it with v-text-field?
If yes, could you give a sample.

And, I´d like to use local into one vue component, not globally.
How can I install to use locally?