1.1.2 • Published 3 years ago

vuetify-mask v1.1.2

Weekly downloads
209
License
MIT
Repository
github
Last release
3 years ago

vuetify-mask

Project

vuetify-mask is a component for working with some of the main types of masks in the v-text-field.

Links

See Demo here.
GitHub.
npm.

Dependencies

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

Install

$ npm install vuetify-mask --save

Register

1- Create a file src/plugins/vuetify-mask.js with:
import Vue from "vue";
import VuetifyMask from "vuetify-mask";
Vue.use(VuetifyMask);
export default VuetifyMask;

2- Add in src/mains.js file:
import "./plugins/vuetify-mask.js";

Properties (v-bind:properties)

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

Properties that have hyphens (single-line, background-color...) should be changed as follows:

v-bind:properties="{
  singleLine: true,
  backgroundColor: 'red'
}"

or

v-bind:properties="{
  'single-line': true,
  'background-color': 'red'
}"

Options (v-bind:options)

OptionComponentDefaultDescription
inputMaskMoney, Percent, Integer, DateTime, SimpleMaskmask that will be applied in the v-text-field
outputMaskMoney, Percent, Integer, SimpleMask, CPF, CNPJ, CEPmask that will be applied in the v-model
emptyMoney, Percent, Integer, DateTime, SimpleMask, CPF, CNPJ, CEP, DotNumber""Value in v-model when v-text-field is empty. Can be null, "" or other
applyAfterInteger, SimpleMask, CPF, CNPJ, CEP, DotNumberThe value is masked only after all typing
alphanumericSimpleMaskfalse
lowerCaseSimpleMaskfalse
acceptFileFileBase64image/*Sets the file type to convert to base64

Events

EventvalueDescription
blurEventEmitted when the input is blurred
changeanyEmitted when the input is changed by user interaction
clickMouseEventEmitted when input is clicked
focusEventEmitted when component is focused
keydownKeyboardEventEmitted when any key is pressed
mousedownMouseEventEmitted when click is pressed
mouseupMouseEventEvent mouseup

How to use

- Money (v-text-field-money)

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

- Percent (v-text-field-percent)

<template>
  <div>
    <v-text-field-percent
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        suffix: '%',
        readonly: false,
        disabled: false,
        outlined: false,
        clearable: true,
        placeholder: '',
      }"
      v-bind: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"
      v-bind:label="label"
      v-bind:properties="{
        readonly: false,
        disabled: false,
        outlined: false,
        clearable: true,
        placeholder: '',
      }"
      v-bind: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>

- DateTime (v-text-field-datetime)

  works in milliseconds

<template>
  <div>
    <v-text-field-datetime
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        readonly: false,
        disabled: false,
        outlined: false,
        clearable: true,
        placeholder: 'YYYY-MM-DD HH:mm:ss',
        'prepend-icon': 'mdi-calendar',
      }"
      v-bind:options="{
        inputMask: 'YYYY-MM-DD HH:mm:ss',
        empty: null,
      }"
      v-bind:focus="focus"
      v-on:focus="focus = false"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1595386800000",    // Milliseconds
    label: "DateTime",
    focus: false,
  }),
};
</script>

- DateTimePicker (v-text-field-datetimepicker)

  works in milliseconds

<template>
  <div>
    <v-text-field-datetimepicker
      v-model="value"
      label="Date Time"
      v-bind:properties="{
        backgroundColor: '#EEE9E9',
        clearable: false,
        outlined: true,
        prependIcon: 'mdi-calendar',
        appendIcon: 'mdi-av-timer',
      }"
      v-bind:options="{
        tabDateTitle: 'Date',
        tabTimeTitle: 'Time',
        tabBackgroundColor: 'green',
        locale: 'en-US',
        format: 'YYYY-MM-DD',
        closeOnDateClick: false,
        useSeconds: false,
      }"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: 1558220700000,
  }),
};
</script>

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

<template>
  <div>
    <v-text-field-simplemask
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        prefix: '',
        suffix: '',
        readonly: false,
        disabled: false,
        outlined: false,
        clearable: true,
        placeholder: '',
      }"
      v-bind:options="{
        inputMask: '#### #### #### ####',
        outputMask: '################',
        empty: null,
        applyAfter: false,
        alphanumeric: true,
        lowerCase: false,
      }"
      v-bind:focus="focus"
      v-on:focus="focus = false"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1234432112344321",
    label: "Credit Card",
    focus: false,
  }),
};
</script>

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

<template>
  <div>
    <v-text-field-simplemask
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        prefix: '',
        suffix: '',
        readonly: false,
        disabled: false,
        outlined: false,
        clearable: true,
        placeholder: '',
      }"
      v-bind:options="{
        inputMask: '(##) #####-####',
        outputMask: '###########',
        empty: null,
        applyAfter: false,
        alphanumeric: true,
        lowerCase: false,
      }"
      v-bind:focus="focus"
      v-on:focus="focus = false"
    />
  </div>
</template>

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

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

  You can create your masks.

<template>
  <div>
    <v-text-field-simplemask
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        prefix: '',
        suffix: '',
        readonly: false,
        disabled: false,
        outlined: false,
        clearable: true,
        placeholder: '',
      }"
      v-bind:options="{
        inputMask: '##-####-####-###',
        outputMask: '##-####-####-###',
        empty: null,
        applyAfter: false,
        alphanumeric: true,
        lowerCase: false,
      }"
      v-bind:focus="focus"
      v-on:focus="focus = false"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "23-A568-B953-356", // "23-A568-B953-356" or "" or null
    label: "Simple Mask",
    focus: false,
  }),
};
</script>

- Files (v-text-field-filebase64)

 Convert files to base 64.

<template>
  <div>
    <v-text-field-filebase64
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        outlined: true,
        placeholder: ' ',
        appendIcon:'mdi-message-image-outline',
      }"
      v-bind:options="{
        acceptFile:'image/*',
      }"
      v-on: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"
      v-bind:label="label"
      v-bind:properties="{
        readonly: false,
        disabled: false,
        outlined: false,
        clearable: true,
        placeholder: '',
      }"
      v-bind: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>

- CPF (v-text-field-cpf)

 brazilian mask

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

- CNPJ (v-text-field-cnpj)

 brazilian mask

<template>
  <div>
    <v-text-field-cnpj
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        disabled: false,
        outlined: true,
        clearable: true,
        placeholder: '',
      }"
      v-bind:options="{
        outputMask: '##############',
        empty: null,
        applyAfter: true,
      }"
      v-bind:focus="focus"
      v-on:focus="focus = false"
    />
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "50703512000192", // 50703512000192 or "50703512000192" or "" or null
    label: "CNPJ (Brazilian mask)",
    focus: false,
  }),
};
</script>

- CEP (v-text-field-cep)

 brazilian mask

<template>
  <div>
    <v-text-field-cep
      v-model="value"
      v-bind:label="label"
      v-bind:properties="{
        disabled: false,
        outlined: true,
        clearable: true,
        placeholder: '',
      }"
      v-bind:options="{
        outputMask: '########',
        empty: null,
        applyAfter: true,
      }"
      v-bind:focus="focus"
      v-on:focus="focus = false"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    value: "82515260", // 82515260 or "82515260" or "" or null
    label: "CEP (Brazilian mask)",
    focus: false,
  }),
};
</script>