### Alpine.js Setup with Maska Plugin

Source: https://github.com/beholdr/maska/blob/master/demo/alpine.html

Import Alpine.js and the xMaska plugin, then initialize Alpine.js. This setup is required before using Maska directives in your HTML.

```javascript
import Alpine from 'alpinejs'
import { xMaska } from '../src/alpine'

Alpine.plugin(xMaska)

window.Alpine = Alpine
Alpine.start()
```

--------------------------------

### Install Maska with npm

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Install the Maska package using npm for use with bundlers.

```sh
npm install maska
```

--------------------------------

### Mount Vue App with Maska Demo

Source: https://github.com/beholdr/maska/blob/master/demo/vue.html

This snippet shows the basic setup for mounting a Vue application and integrating the Maska library. Ensure Maska is correctly imported and configured within your Vue component.

```javascript
import { createApp } from 'vue'
import Demo from '../test/vue/Demo.vue'
createApp(Demo).mount('#app')
```

--------------------------------

### Configure Maska with onMaska Callback in Vanilla JS

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Initializes MaskInput with an `onMaska` option, providing a callback function that directly receives the mask details. This example logs the `completed` status.

```javascript
new MaskInput("input", {
  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
})
```

--------------------------------

### Transform Token Example

Source: https://github.com/beholdr/maska/blob/master/docs/v3/tokens.md

Defines a custom token 'A' that transforms input letters to uppercase using a `transform` function.

```javascript
{
  A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
}
```

--------------------------------

### Transform Masking Value with postProcess Hook

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Use the `postProcess` hook to modify the masked value before it's set on the input. This example limits the masked string to a maximum of 5 characters.

```javascript
new MaskInput("input", {
  postProcess: (value: string) => value.slice(0, 5)
})
```

--------------------------------

### Initialize MaskInput with Options

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Instantiate MaskInput with custom options, including event handlers and mask configurations. Options are passed as the second argument to the constructor.

```javascript
new MaskInput("input", {
  onMaska: (detail) => console.log(detail.completed),
  mask: "#-#",
  reversed: true,
})
```

--------------------------------

### Enable Number Mask with Options

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Initialize Maska with the `number: {}` option for basic number formatting. Provide locale, fraction, and unsigned settings within the `number` object for advanced configuration.

```javascript
new MaskInput("input", {
  number: {}
})
```

```javascript
new MaskInput("input", {
  number: {
    locale: "ru",
    fraction: 2,
    unsigned: true
  }
})
```

--------------------------------

### Initialize Maska with Vanilla JS

Source: https://github.com/beholdr/maska/blob/master/demo/index.html

Import the MaskInput class and initialize it by targeting elements with the data-maska attribute. Ensure the MaskInput class is correctly imported from its source.

```javascript
import { MaskInput } from '../src'
new MaskInput('[data-maska]')
```

--------------------------------

### Initialize MaskInput with data-maska attribute

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vanilla.md

Add the `data-maska` attribute to your input element to define the mask pattern. Then, import and initialize `MaskInput` by passing a query selector or the input element itself.

```html
<input data-maska="#-#">
```

```javascript
import { MaskInput } from "maska"

// init with query selector
new MaskInput("[data-maska]")

// or with element
const input = document.querySelector('[data-maska]')
new MaskInput(input)
```

--------------------------------

### Use Maska with Import Maps in Vanilla JS

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Configure import maps to use the ES modules build of Maska for Vanilla JS applications.

```html
<script type="importmap">
  {
    "imports": {
      "maska": "https://cdn.jsdelivr.net/npm/maska@3/dist/maska.mjs"
    }
  }
</script>
<script type="module">
  import { Mask, MaskInput } from "maska"

  new MaskInput("[data-maska]") // for masked input
  const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```

--------------------------------

### Include Maska from CDN for Alpine.js

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Include Maska from CDN before Alpine's core JS file to automatically register the Maska plugin.

```html
<!-- Maska Plugin -->
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/cdn/alpine.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Register Maska with Alpine.js

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Register Maska as a custom plugin for Alpine.js by importing xMaska and using Alpine.plugin.

```js
import Alpine from "alpinejs"
import { xMaska } from "maska/alpine"

Alpine.plugin(xMaska)
```

```html
<input x-maska="'#-#'">
```

--------------------------------

### Initialize Mask with Options

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Pass an object to the Mask constructor to set default options. These can be overridden by data-maska attributes.

```javascript
new Mask({ mask: "#-#", eager: true, number: { locale: 'de' }}})
```

--------------------------------

### Include Maska from CDN in Vanilla JS

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Include Maska from a CDN using a script tag to expose the library API on the global Maska object.

```html
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/cdn/maska.js"></script>
<script>
  const { Mask, MaskInput } = Maska

  new MaskInput("[data-maska]") // for masked input
  const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```

--------------------------------

### Import Maska in Vanilla JS with Bundler

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Import Mask and MaskInput classes from the Maska package for programmatic use or masked inputs.

```js
import { Mask, MaskInput } from "maska"

new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
```

--------------------------------

### Use Maska with Import Maps in Alpine.js

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Configure import maps to use the ES modules build of Maska for Alpine.js applications.

```html
<script type="importmap">
  {
    "imports": {
      "maska/alpine": "https://cdn.jsdelivr.net/npm/maska@3/dist/alpine.mjs"
    }
  }
</script>
<script type="module">
  import Alpine from "alpinejs"
  import { xMaska } from "maska/alpine"

  Alpine.plugin(xMaska)
</script>
```

--------------------------------

### Include Maska from CDN for Vue

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Include Maska from CDN and register the vMaska directive with Vue.createApp.

```html
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/cdn/vue.js"></script>
<script>
  const { vMaska } = Maska

  Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>
```

--------------------------------

### Enable Number Mask with Data Attributes

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Use `data-maska-number` for minimal number formatting. Configure locale, fraction, and unsigned behavior with additional `data-maska-number-*` attributes.

```html
<input data-maska-number>
```

```html
<input
  data-maska-number-locale="ru"
  data-maska-number-fraction="2"
  data-maska-number-unsigned
>
```

--------------------------------

### Implement Dynamic Masks with an Array

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Use an array for the `mask` option to apply different masks based on input length. The smallest mask is chosen first.

```javascript
new MaskInput("input", {
  mask: ["##-##", "###-###"]
})
```

--------------------------------

### Setting Mask Options with x-maska

Source: https://github.com/beholdr/maska/blob/master/docs/v3/alpine.md

Configure mask options by passing an object to the x-maska directive value or by using data attributes to override defaults.

```html
<div x-data="{ options: { mask: '#-#', eager: true }}">
  <input x-maska="options" data-maska-reversed>
</div>
```

```html
<input x-maska="{ mask: '#-#', eager: true }" data-maska-reversed>
```

--------------------------------

### Configure Maska with UI Frameworks

Source: https://github.com/beholdr/maska/blob/master/docs/v3/issues.md

When UI frameworks prevent `data-` attributes, set mask and options via the directive value.

```javascript
const options = { mask: '#-#' }
```

```vue
<input v-maska="options">
```

--------------------------------

### Mount Maska Demo Component in Svelte

Source: https://github.com/beholdr/maska/blob/master/demo/svelte.html

Use this snippet to mount the Maska demo component into your Svelte application. Ensure the target element with the ID 'app' exists in your HTML.

```javascript
import { mount } from 'svelte'
import Demo from '../test/svelte/Demo.svelte'

mount(Demo, { target: document.getElementById('app') })
```

--------------------------------

### Custom Tokens via Data Attributes (Simple Form)

Source: https://github.com/beholdr/maska/blob/master/docs/v3/tokens.md

Define custom tokens using the `data-maska-tokens` attribute with a simple `T:P:M` format. Multiple tokens can be separated by `|`.

```html
<input data-maska="Z-Z" data-maska-tokens="Z:[A-Z]">
```

```html
<input data-maska="Z-z" data-maska-tokens="Z:[A-Z]|z:[a-z]:multiple">
```

--------------------------------

### Programmatic Mask Manipulation

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vanilla.md

Import the `Mask` class for direct programmatic control. Use the `masked()`, `unmasked()`, and `completed()` methods to format values, retrieve unformatted values, and check mask completion status, respectively.

```javascript
import { Mask } from "maska"

const mask = new Mask({ mask: "#-#" })

mask.masked("12") // = 1-2
mask.unmasked("12") // = 12
mask.completed("12") // = true
```

--------------------------------

### Use Maska with Import Maps in Vue

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Configure import maps to use the ES modules build of Maska for Vue applications.

```html
<script type="importmap">
  {
    "imports": {
      "maska/vue": "https://cdn.jsdelivr.net/npm/maska@3/dist/vue.mjs"
    }
  }
</script>
<script type="module">
  import { vMaska } from "maska/vue"

  Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>
```

--------------------------------

### Implement Dynamic Masks with a Function

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Provide a function for the `mask` option to dynamically select a mask based on custom logic applied to the input value.

```javascript
new MaskInput("input", {
  mask: (value: string) => value.startsWith('1') ? '#-#' : '##-##'
})
```

--------------------------------

### Numeric Input with Text Type

Source: https://github.com/beholdr/maska/blob/master/docs/v3/issues.md

Use `type="text"` with `inputmode="numeric"` for a numeric keyboard when Maska is applied.

```html
<input type="text" inputmode="numeric">
```

--------------------------------

### Set Mask Options Programmatically

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vanilla.md

While masks are typically set via the `data-maska` attribute, you can also provide mask patterns and other options as the second argument to the `MaskInput` constructor. These options serve as defaults and can be overridden by `data-maska-` attributes.

```javascript
new MaskInput(input, { mask: "#-#" })
```

--------------------------------

### Configure Maska with onMaska Callback in Vue

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Sets up `maska` options in a Vue component, including an `onMaska` callback to log the completion status. The options are passed to the `v-maska` directive.

```vue
<script setup lang="ts">
const options = {
  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
}
</script>

<template>
  <input v-maska="options">
</template>
```

--------------------------------

### Basic Svelte Input Masking

Source: https://github.com/beholdr/maska/blob/master/docs/v3/svelte.md

Apply the maska action to an input element with a simple string mask. Ensure the mask value is enclosed in additional quotation marks.

```html
<input use:maska={value}>
```

```svelte
<script>
  import { maska } from "maska/svelte"
</script>

<input use:maska={'#-#'}>
```

--------------------------------

### Handle Maska Event in Vanilla JS

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Adds an event listener to an input element to capture the `maska` event. The `onMaska` function logs the event details.

```javascript
const onMaska = (event: CustomEvent<MaskaDetail>) => {
  console.log({
    masked: event.detail.masked,
    unmasked: event.detail.unmasked,
    completed: event.detail.completed
  })
}
```

```javascript
document.querySelector("input").addEventListener("maska", onMaska)
```

--------------------------------

### Svelte Input Masking with Options

Source: https://github.com/beholdr/maska/blob/master/docs/v3/svelte.md

Configure default mask options by passing an options object to the maska action. Options can be overridden using data-maska attributes.

```svelte
<script lang="ts">
  import { maska } from "maska/svelte"
  import type { MaskInputOptions } from "maska"

  const options: MaskInputOptions = {
    mask: "#-#",
    eager: true
  }
</script>

<input use:maska={options} data-maska-reversed>
```

--------------------------------

### Token Modifiers: Optional and Repeated

Source: https://github.com/beholdr/maska/blob/master/docs/v3/tokens.md

Demonstrates the use of `optional` and `repeated` modifiers for tokens. `optional` makes a token not required, while `repeated` allows the token to be repeated.

```javascript
{
  0: { pattern: /[0-9]/, optional: true },
  9: { pattern: /[0-9]/, repeated: true },
}
```

--------------------------------

### Custom Tokens via Data Attributes (JSON Form)

Source: https://github.com/beholdr/maska/blob/master/docs/v3/tokens.md

Define custom tokens using the `data-maska-tokens` attribute with a JSON-like string format. Ensure the pattern is a string.

```html
<input data-maska="Z-Z" data-maska-tokens="{ 'Z': { 'pattern': '[A-Z]' }}">
```

--------------------------------

### Basic x-maska Directive Usage

Source: https://github.com/beholdr/maska/blob/master/docs/v3/alpine.md

Use the x-maska directive to apply a mask to an input field. The mask value should be enclosed in additional quotation marks.

```html
<input x-maska:argument.modifier="value">
```

```html
<input x-maska="'#-#'">
```

--------------------------------

### MaskOptions Interface

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Defines the structure for Mask configuration options, including mask type, tokens, eager mode, and number formatting.

```typescript
interface MaskOptions {
  mask?: MaskType
  tokens?: MaskTokens
  tokensReplace?: boolean
  eager?: boolean
  reversed?: boolean
  number?: MaskNumber
}

type MaskType = string | string[] | ((input: string) => string) | null

interface MaskToken {
  pattern: RegExp
  multiple?: boolean
  optional?: boolean
  repeated?: boolean
  transform?: (char: string) => string
}

type MaskTokens = Record<string, MaskToken>

interface MaskNumber {
  locale?: string
  fraction?: number
  unsigned?: boolean
}
```

--------------------------------

### Maska Plugin for Nuxt 3

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vue.md

Register the v-maska directive globally in a Nuxt 3 application by creating a plugin.

```javascript
import { vMaska } from "maska/vue"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive("maska", vMaska)
})
```

```html
<input v-maska="'#-#'" />
```

--------------------------------

### Custom Tokens via JavaScript Option

Source: https://github.com/beholdr/maska/blob/master/docs/v3/tokens.md

Define custom tokens programmatically using the `tokens` option in the MaskInput constructor. Patterns should be regular expression objects.

```javascript
new MaskInput("[data-maska]", {
  mask: "A-A",
  tokens: {
    A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
  }
})
```

--------------------------------

### Configure Maska with onMaska Callback in Alpine.js

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Defines `maska` options within an Alpine.js component's `x-data`, including an `onMaska` callback. The options are bound to the `x-maska` directive.

```html
<div x-data="{ options: { onMaska: (detail) => console.log(detail.completed) }}">
  <input x-maska="options">
</div>
```

--------------------------------

### MaskInput Options Interface

Source: https://github.com/beholdr/maska/blob/master/docs/v3/options.md

Defines the structure for MaskInput configuration options, extending MaskOptions and including specific event handlers and processing hooks.

```typescript
interface MaskInputOptions extends MaskOptions {
  onMaska?: (detail: MaskaDetail) => void
  preProcess?: (value: string) => string
  postProcess?: (value: string) => string
}

interface MaskaDetail {
  masked: string
  unmasked: string
  completed: boolean
}
```

--------------------------------

### Pass Mask Options via Directive Argument in v2

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

In Maska v2, mask options like 'mask' and 'eager' were passed using the directive argument.

```vue
<script setup>
const options = reactive({
  mask: "#-#",
  eager: true
})
</script>

<template>
<input v-maska:[options]>
</template>

```

--------------------------------

### Token Modifier: Multiple

Source: https://github.com/beholdr/maska/blob/master/docs/v3/tokens.md

Illustrates the `multiple` modifier, which allows a token to match multiple characters until the next token begins.

```javascript
{ A:[A-Z]:multiple }
```

--------------------------------

### Default Tokens

Source: https://github.com/beholdr/maska/blob/master/docs/v3/tokens.md

These are the default tokens provided by Maska for common character types.

```javascript
{
  '#': { pattern: /[0-9]/ },       // digits
  '@': { pattern: /[a-zA-Z]/ },    // letters
  '*': { pattern: /[a-zA-Z0-9]/ }, // letters & digits
}
```

--------------------------------

### Basic Vue Input Masking

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vue.md

Apply the v-maska directive to an input element with a mask string. The mask value must be enclosed in additional quotation marks.

```html
<input v-maska:argument.modifier="value">
```

```vue
<script setup>
  import { vMaska } from "maska/vue"
</script>

<template>
  <input v-maska="'#-#'">
</template>
```

```vue
<script>
  import { vMaska } from "maska/vue"

  export default {
    directives: { maska: vMaska }
  }
</script>

<template>
  <input v-maska="'#-#'">
</template>
```

--------------------------------

### Binding Input Values with x-maska

Source: https://github.com/beholdr/maska/blob/master/docs/v3/alpine.md

Bind masked and unmasked values to Alpine.js variables using directive arguments and modifiers. Ensure bound variable names are in lower case.

```html
<div x-data="{ maskedvalue: '', unmaskedvalue: '' }">
  <input x-maska:unmaskedvalue.unmasked="'#-#'" x-model="maskedvalue">

  Masked value: <span x-text="maskedvalue"></span>
  Unmasked value: <span x-text="unmaskedvalue"></span>
</div>
```

--------------------------------

### Import Vue Directive in v3

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

For Maska v3, the Vue directive is now exported from 'maska/vue'. Ensure you update your import paths.

```js
import { vMaska } from "maska/vue"

```

--------------------------------

### Eager Mode Behavior in Maska v3

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

Maska v3's eager mode treats entered characters more strictly, considering them as part of the mask from the beginning. This provides more predictable input handling.

```js
const mask = new Mask({ mask: '1##', eager: true })
mask.masked('1') // -> 1
mask.masked('12') // -> 12
mask.masked('2') // -> 12

```

--------------------------------

### Import Vue Directive in v2

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

In Maska v2, the Vue directive was imported directly from the 'maska' package.

```js
import { vMaska } from "maska"

```

--------------------------------

### Use Maska in Vue Component

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Import and use the vMaska directive in a Vue component for input masking.

```js
<script setup>
  import { vMaska } from "maska/vue"
</script>

<template>
  <input v-maska="'#-#'">
</template>
```

--------------------------------

### Eager Mode Behavior in Maska v2

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

In Maska v2's eager mode, entered characters were appended after static mask characters, potentially leading to unexpected results if the input didn't align with the mask.

```js
const mask = new Mask({ mask: '1##', eager: true })
mask.masked('1') // -> 11
mask.masked('12') // -> 112
mask.masked('2') // -> 12

```

--------------------------------

### Configure Maska with onMaska Callback in Svelte

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Defines `maska` options in a Svelte component, including an `onMaska` callback. The options are passed to the `use:maska` directive.

```svelte
<script lang="ts">
const options = {
  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
}
</script>

<input use:maska={options}>
```

--------------------------------

### Global Registration of Maska Directive in Vue 3

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vue.md

Globally register the vMaska directive for use in a Vue 3 application.

```javascript
import { createApp } from "vue"
import { vMaska } from "maska/vue"

createApp({}).directive("maska", vMaska)

// or in case of CDN load
Vue.createApp({}).directive("maska", Maska.vMaska)
```

--------------------------------

### Use Maska Event in Svelte

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Applies the `maska` action to an input element in Svelte and listens for the `on:maska` event. The `onMaska` handler processes the event details.

```svelte
<input use:maska data-maska="#-#" on:maska={onMaska} />
```

--------------------------------

### Global Registration of Maska Directive in Vue 2

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vue.md

Globally register the vMaska directive for use in a Vue 2 application.

```javascript
import Vue from "vue"
import { vMaska } from "maska/vue"

Vue.directive("maska", vMaska)

// or in case of CDN load
Vue.directive("maska", Maska.vMaska)
```

--------------------------------

### Use Maska in Svelte Component

Source: https://github.com/beholdr/maska/blob/master/docs/v3/install.md

Import and use the maska directive in a Svelte component for input masking.

```svelte
<script>
  import { maska } from "maska/svelte"
</script>

<input use:maska={'#-#'}>
```

--------------------------------

### Configure Mask Options in Vue

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vue.md

Set default mask options by passing an object to the v-maska directive. Options can be overridden using data-maska attributes.

```vue
<script setup lang="ts">
  import { reactive } from "vue"
  import { vMaska } from "maska/vue"
  import type { MaskInputOptions } from "maska"

  const options = reactive<MaskInputOptions>({
    mask: "#-#",
    eager: true
  })
</script>

<template>
  <input v-maska="options" data-maska-reversed>
</template>
```

```vue
<script>
  import { vMaska } from "maska/vue"

  export default {
    directives: { maska: vMaska },
    data: () => ({
      options: {
        mask: "#-#",
        eager: true
      }
    })
  }
</script>

<template>
  <input v-maska="options" data-maska-reversed>
</template>
```

--------------------------------

### Use Maska Event in Alpine.js

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Attaches a `maska` event listener to an input element using Alpine.js directives. The `x-on:maska` attribute calls the `onMaska` function.

```html
<input x-maska data-maska="#-#" x-on:maska="onMaska" />
```

--------------------------------

### Define MaskaDetail Interface

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Defines the structure of the `detail` object passed with the `maska` event. It includes the masked value, unmasked value, and a completion flag.

```typescript
interface MaskaDetail {
  masked: string
  unmasked: string
  completed: boolean
}
```

--------------------------------

### Destroy Mask Instance

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vanilla.md

To remove the mask functionality from an input element, call the `destroy()` method on the `MaskInput` instance.

```javascript
const mask = new MaskInput(input)
mask.destroy()
```

--------------------------------

### Use Maska Event in Vue

Source: https://github.com/beholdr/maska/blob/master/docs/v3/hooks.md

Listens for the `maska` event on an input element with the `v-maska` directive in Vue. The `onMaska` handler is called when the event fires.

```vue
<input v-maska data-maska="#-#" @maska="onMaska" />
```

--------------------------------

### Pass Mask Options via Directive Value in v3

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

Maska v3 requires mask options to be passed as the directive value, similar to binding a value.

```vue
<script setup>
const options = reactive({
  mask: "#-#",
  eager: true
})
</script>

<template>
  <input v-maska="options">
</template>

```

--------------------------------

### Bind Value with Directive Argument and Modifier in v3

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

Maska v3 uses a directive argument for the variable and an optional modifier (e.g., '.unmasked') to specify which property to bind.

```vue
<script setup>
const boundobject = ref('')
</script>

<template>
<input v-maska:boundobject.unmasked>
</template>

```

--------------------------------

### Bind Object Value with Maska v2

Source: https://github.com/beholdr/maska/blob/master/docs/v3/upgrade.md

Maska v2 used the directive value to bind an object containing masked, unmasked, and completed states.

```vue
<script setup>
const boundObject = reactive({
  masked: '',
  unmasked: '',
  completed: false
})
</script>

<template>
<input v-maska="boundObject">
</template>

```

--------------------------------

### Bind Masked and Unmasked Values in Vue

Source: https://github.com/beholdr/maska/blob/master/docs/v3/vue.md

Use the directive argument and modifier to bind unmasked values or completion status to a variable. Standard v-model can be used for the masked value.

```vue
<script setup>
  import { ref } from "vue"
  import { vMaska } from "maska/vue"

  const maskedValue = ref('')
  const unmaskedValue = ref('')

  defineExpose({ unmaskedValue }) // make sure you expose the bound variable
</script>

<template>
  <input v-maska:unmaskedValue.unmasked="'#-#'" v-model="maskedValue">

  Masked value: {{ maskedValue }}
  Unmasked value: {{ unmaskedValue }}
</template>
```

```vue
<script>
  import { vMaska } from "maska/vue"

  export default {
    directives: { maska: vMaska },
    data: () => ({
      maskedValue: "",
      unmaskedValue: ""
    })
  }
</script>

<template>
  <input v-maska:unmaskedValue.unmasked="'#-#'" v-model="maskedValue">

  Masked value: {{ maskedValue }}
  Unmasked value: {{ unmaskedValue }}
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.