# vuetify3-mask-field

> Mask components to Vuetify 3 with Slots working Perfectly and Merged with useful VueTheMask.Vite & Vuejs 3 supported.

Latest version **0.0.1** (published 2023-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuetify3-mask-field
pnpm add vuetify3-mask-field
yarn add vuetify3-mask-field
bun add vuetify3-mask-field
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-11-25 |
| First published | 2023-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 59.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | DrCodeMonster |
| Maintainers | drcodemonster |
| Keywords | vuejs, vuetify, v-text-field, mask, number, money, integer, datetime, decimal, percent, phonenumber, creditcard, base64 |

## Links

- npm: https://www.npmjs.com/package/vuetify3-mask-field
- Repository: https://github.com/drcodemonster/vuetify3-mask-field
- Homepage: https://github.com/drcodemonster/vuetify3-mask-field#readme
- Issues: https://github.com/drcodemonster/vuetify3-mask-field/issues
- npm.io page: https://npm.io/package/vuetify3-mask-field

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.3.8
- [vuetify](https://npm.io/package/vuetify.md) ^3.4.2

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2023-11-25

## README

# 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](https://github.com/gabrielhrp31/vuetify-mask), who is also forked from [juareznasato](https://github.com/juareznasato/vuetify-mask) to solve component without slot inheritance problem and in V3 merged with useful [VueTheMask](https://github.com/vuejs-tips/vue-the-mask).

[comment]: <> (## Links)
[comment]: <> ([See Demo here]&#40;https://rzfpe.csb.app/&#41;.  )

[comment]: <> ([GitHub]&#40;https://github.com/juareznasato/vuetify-mask&#41;.  )

[comment]: <> ([npm]&#40;https://www.npmjs.com/package/vuetify-mask&#41;.)

## 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:
```js

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](https://vuetifyjs.com/en/api/v-text-field/#links).

Some of the props as follows:
```vue
    <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)
```vue
<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)
```vue
<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)
```vue
<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)
```vue
<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)
```vue
<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)
&nbsp; You can create your masks.
```vue
<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)
&nbsp; You can create your input and output masks seperately.
```vue
<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)
&nbsp;Convert files to base 64.
```vue
<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)
&nbsp;Accept only dot and numbers.
```vue
<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)
&nbsp;Accept year, month, start day and end day.
```vue
<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)
```javascript
'#': {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

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

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

---
_Source: https://npm.io/package/vuetify3-mask-field · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._