mustafacagri / vue-mask-next Goto Github PK

vue-mask-next is a simple input mask library for Vue.js 3, designed to facilitate the creation of input masks for fields in your Vue.js 3 applications. This library is inspired by vue-3-mask but provides additional functionality such as prefilled value support, and it currently works with Vue version 3.4.26+, composition API, and script setup.

Install the library via npm or yarn:

npm install vue-mask-next

or

yarn add vue-mask-next

In your Vue 3 application, open the main.js (or main.ts) file and import the MaskInput component from the vue-mask-next library. Register it globally:

import { createApp } from "vue";
import App from "./App.vue";
import { MaskInput } from "vue-mask-next";

const app = createApp(App);

app.component("MaskInput", MaskInput);

app.mount("#app");

Now you can use the MaskInput component throughout your application.

If you prefer to register the component locally, you can do so in the components section of your Vue component:

import { MaskInput } from "vue-mask-next";

export default {
  components: {
    MaskInput,
  },
};

To use the MaskInput component in your Vue components, simply include it in your template and provide a mask prop with the desired pattern. Various mask patterns are supported:

• #: Any digit (0-9)
• X: Any alphanumeric character (0-9, a-z, A-Z)
• S: Any alphabetic character (a-z, A-Z)
• A: Any uppercase alphabetic character (A-Z)
• a: Any lowercase alphabetic character (a-z)
• !: Escape character (use the next character in the mask as a literal)

Here's an example of using the MaskInput component with a phone number mask:

<template>
  <div>
    <h1>Phone number input example</h1>
    <MaskInput v-model="phoneNumber" mask="(##) ####-####" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: "",
    };
  },
};
</script>

In this example, the MaskInput component will enforce the provided phone number mask as the user types, and the masked value will be stored in the phoneNumber data property.

The $attrs object allows you to pass additional attributes to the underlying input element. Here are some examples:

• Binding a placeholder:

<MaskInput
  v-model="phoneNumber"
  mask="(##) ####-####"
  placeholder="Enter phone number"
/>

• Binding a CSS class:

<MaskInput v-model="phoneNumber" mask="(##) ####-####" class="form-control" />

• Binding an event handler:

<MaskInput v-model="phoneNumber" mask="(##) ####-####" @focus="handleFocus" />

In each of these examples, the additional attribute is forwarded to the underlying input element using v-bind="$attrs", allowing for flexible usage and customization.

The MaskInput component implementation utilizes the following:

• A template with a single <input> element, bound to the value data property using v-model.
• The $attrs object, which forwards any attributes passed to the component to the underlying input element using v-bind="$attrs". This allows users to apply additional attributes directly to the input element.
• Script setup with props, including a required prop mask specifying the masking pattern.
• Mask definitions allowing different characters to be interpreted differently in the mask pattern.
• The applyMask function, which applies the masking logic to generate the masked value.
• The handleInput function, triggered on input events, applies the mask to the input value, updating the value data property accordingly.

⭐ Star my GitHub repo

🛠 Create pull requests, submit bugs, suggest new features or updates

Contributions to the vue-mask-next library are welcome. If you encounter a bug or have an idea for a new feature, please feel free to open an issue or submit a pull request.