vuetify3-mask-field

Project

Vuetify3-mask-field is a component for working with some of the main types of masks in the v-text-yarn field. It is powered with Vite & Vuejs and Vuetify, that all compatible with the latest version 3. Also, it is simplified, such as using the same attributes/properties as Vuetify.

I forked the package from Gabriel Rodrigues, who is also forked from juareznasato to solve component without slot inheritance problem and in V3 merged with useful VueTheMask.

Dependencies

• vuejs 3
• vuetify 3 ($ npm install vuetify --save)
• moment ($ npm install moment --save)
• material design icon ($ npm install @mdi/font -D --save)

Install

$ npm i vuetify3-mask-field --save

or

$ yarn add vuetify3-mask-field

Register

1- In your file add this:

import { VTextFieldAdvancemask } from "vuetify3-mask-field";

...
  export default {
    components: {
      'v-text-field-advancemask': VTextFieldAdvancemask
    },
...

Properties (v-bind:properties)

You can add any v-text-field property v-text-field properties.

Some of the props as follows:

    <v-text-field
      v-model="value"
      :label="label"
      :placeholder="placeholder"
      prefix=''
      suffix=''
      :readonly="false"
      :disabled="false"
      :outlined="true"
      :clearable="false"
      :persistentPlaceholder="true"

Options (v-bind:options)

| Option | Component | Default | Description | | ------------ | ------------ | ------------ | ------------ | | inputMask | Money, Percent, Integer | | mask that will be applied in the v-text-field | | outputMask | Money, Percent, Integer, | | mask that will be applied in the v-model | | empty | Money, Percent, Integer, DotNumber | "" | Value in v-model when v-text-field is empty. Can be null, "" or other| | applyAfter | Integer, DotNumber| | The value is masked only after all typing | | alphanumeric | false | | | lowerCase | false | | | acceptFile| FileBase64 | image/* | Sets the file type to convert to base64 |

Events

All events documented in vuetify3 docs including slots events

How to use

- Money (v-text-field-money)

<template>
  <div>
    <v-text-field-money
      v-model="value"
      :label="label"
      :prefix="'R$'"
      :readonly="false"
      :disabled="disabled"
      :outlined="false"
      :clearable="true"
      placeholder=" "
      :options="{
        locale: 'pt-BR',
        length: 11,
        precision: 2,
        empty: null
      }"
      ref="ref"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
      value: 123456789.0, // 1.23 or "" or null
      label: 'Money',
      disabled: false
  }),
};
</script>

- Percent (v-text-field-percent)

<template>
  <div>
    <v-text-field-percent
      v-model="value"
      :label="label"
      suffix="%"
      :readonly="false"
      :disabled="false"
      :outlined="false"
      :clearable="true"
      placeholder=""
      :options="{
        locale: 'pt-BR',
        length: 3,
        precision: 2,
        empty: null
      }"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "12.34",        // 12.34 or "12.34" or "" or null
    label: "Percent",
    focus: false,
  }),
};
</script>

- Integer (v-text-field-integer)

<template>
  <div>
    <v-text-field-integer
      v-model="value"
      :label="label"
      :readonly="false"
      :disabled="false"
      :outlined="false"
      :clearable="true"
      placeholder=""
      :options="{
        inputMask: '#### #####',
        outputMask: '#########',
        empty: null,
        applyAfter: false
      }"
      v-bind:focus="focus"
      v-on:focus="focus = false"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "123456789", // 123456789 or "123456789" or "" or null
    label: "Integer",
    focus: false,
  }),
};
</script>

- Credit Card (v-text-field-simplemask)

<template>
  <div>
    <v-text-field-simplemask
      v-model="value"
      :label="label"
      mask="#### #### #### ####"
      masked
      focused
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1234432112344321",
    label: "Credit Card",
  }),
};
</script>

- Phone Number (v-text-field-simplemask)

<template>
  <div>
    <v-text-field-simplemask
      v-model="value"
      :label="label"
      :mask="['(##) ####-####', '(##) # ####-####']"
      focused
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    value: "99999999999",
    label: "Phone Number",
  }),
};
</script>

- Simple Mask (v-text-field-simplemask)

  You can create your masks.

<template>
  <div>
    <v-text-field-simplemask
      mask="XX-XXXX-XXXX-XXX"
      :masked="false"
      v-model="value"
      :label="label"
      prefix=""
      suffix=""
      :readonly="false"
      :disabled="false"
      :outlined="true"
      :clearable="true"
      placeholder="placeholder here"
      :dark="false"
      clearIcon="mdi-close"
      focused
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "23-A568-B953-356", // "23-A568-B953-356" or "" or null
    label: "Simple Mask",
  }),
};
</script>

- Advance Mask (v-text-field-advancemask)

  You can create your input and output masks seperately.

<template>
  <div>
    <v-text-field-advancemask
      v-model="value"
      :label="label"
      :disabled="false"
      :outlined="true"
      :clearable="true"
      placeholder=""
      :options="{
        outputMask: '############',
        inputMask: '##-###-###/##.##',
        empty: null,
        applyAfter: true
      }"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
      value: '515260379235', // 123 or "123" or "" or null
      label: 'Advance Mask with input and output mask'
  }),
};
</script>

- Files (v-text-field-filebase64)

 Convert files to base 64.

<template>
  <div>
    <v-text-field-filebase64
      v-model="value"
      :label="label"
      :outlined="true"
      placeholder=" "
      appendIcon="mdi-message-image-outline"
      :options="{
        acceptFile: 'image/*'
      }"
      @fileName="fileName = $event"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    value:"",
    fileName: "",
    label: "Select Image",
  }),
};
</script>

Other acceptFile options:
acceptFile:'image/*'
acceptFile:'application/pdf'
acceptFile:'image/jpeg,image/gif,image/png,application/pdf'
acceptFile:'image/jpeg,image/gif,image/png,application/pdf,image/x-eps'

- DotNumber (v-text-field-dotnumber)

 Accept only dot and numbers.

<template>
  <div>
    <v-text-field-dotnumber
      v-model="value"
      :label="label"
      :readonly="false"
      :disabled="false"
      :outlined="false"
      :clearable="true"
      placeholder=''
      :options="{
        length: 20,
        empty: null,
        applyAfter: false
      }"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1.23.456.789", // "" or null
    label: "Only Dot and Number",
  }),
};
</script>

- Date with start and end day (v-text-field-yearmonthdayday)

 Accept year, month, start day and end day.

<template>
  <div>
    <v-text-field-yearmonthdayday
      v-model="value"
      :label="label"
      :placeholder="placeholder"
      prefix=''
      suffix=''
      :readonly="false"
      :disabled="false"
      :outlined="true"
      :clearable="false"
      :persistentPlaceholder="true"
      :options="{
        splitYearMonthChar: '.',
        splitDayChar: '-',
        empty: ''
      }"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "2023.11.24-31",
    label: "Year.Month.StartDay-EndDay",
    placeholder: "YYYY.MM.SD-ED"
  }),
};
</script>

- SimpleMask Tokens (v-text-field-simplemask)

'#': {pattern: /\d/}, // just digits
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

You can customize using property tokens of v-text-field-simplemask

<v-text-field-simplemask mask="FFFFFF" :tokens="hexTokens" />

hexTokens: {
  F: {
    pattern: /[0-9a-fA-F]/,
    transform: v => v.toLocaleUpperCase()
  }
}