Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kerimkuscu/mask-input
mask-input is a Vue.js component library that provides an easy-to-use input masking solution. With flexible masking options, you can format user input for phone numbers, credit cards, dates, and more. This library offers a seamless way to enforce input formats and ensure data consistency in your Vue.js applications.
https://github.com/kerimkuscu/mask-input
form-controls form-validation frontend frontend-development javascript mask-input open-source typescript vue-components vue-directive vue3 vuejs
Last synced: 20 days ago
JSON representation
mask-input is a Vue.js component library that provides an easy-to-use input masking solution. With flexible masking options, you can format user input for phone numbers, credit cards, dates, and more. This library offers a seamless way to enforce input formats and ensure data consistency in your Vue.js applications.
- Host: GitHub
- URL: https://github.com/kerimkuscu/mask-input
- Owner: kerimkuscu
- Created: 2024-09-17T13:51:01.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-12-16T14:28:00.000Z (about 1 month ago)
- Last Synced: 2024-12-16T15:39:59.263Z (about 1 month ago)
- Topics: form-controls, form-validation, frontend, frontend-development, javascript, mask-input, open-source, typescript, vue-components, vue-directive, vue3, vuejs
- Language: Vue
- Homepage: https://www.npmjs.com/package/my-mask-library?activeTab=readme
- Size: 104 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My Mask Library
## 🚀 Overview
`mask-input` is a Vue.js component library that provides an easy-to-use input masking solution. With flexible masking options, you can format user input for phone numbers, credit cards, dates, and more. This library offers a seamless way to enforce input formats and ensure data consistency in your Vue.js applications.
## 📦 Installation
To get started with `mask-input`, follow these steps:
### 1. Install the Package
You can install the library via npm or yarn:
#### Using npm
```bash
npm install my-mask-library
or
yarn add my-mask-library
```
## 📘 Usage
Once installed, you can import and use the MaskInputComponent in your Vue.js application. Here's a step-by-step guide on how to integrate it:
### 1. Import and Register the Component
In your main entry file (e.g., main.js or main.ts), import the MaskInputComponent and register it globally or locally in your components.
#### Global Registration
```bash
import { createApp } from 'vue';
import App from './App.vue';
import MaskInputComponent from 'my-mask-library';
// Create your Vue app
const app = createApp(App);
// Register the component globally
app.component('MaskInputComponent', MaskInputComponent);
// Mount the app
app.mount('#app');
```
#### Local Registration
In the component where you want to use the masked input:
```bash
import { defineComponent, ref } from 'vue';
import MaskInputComponent from 'mask-input';
export default defineComponent({
components: {
MaskInputComponent
},
setup() {
const maskedValue = ref('');
return {
maskedValue
};
}
});
```
### 2. Component Props
The MaskInputComponent accepts the following props:
- mask (String, Required): The mask pattern to be applied to the input. Example: "(###) ###-####".
- type (String, Optional): The type of the input. Defaults to "text".
- className (String, Optional): Additional CSS class names to apply to the input.
- placeholder (String, Optional): Placeholder text for the input. Defaults to an empty string.
- disabled (Boolean, Optional): Disables the input if set to true. Defaults to false.
- name (String, Optional): The name attribute for the input. Defaults to an empty string.
- id (String, Optional): The id attribute for the input. Defaults to an empty string.
- autocomplete (String, Optional): The autocomplete attribute for the input. Defaults to "off".
- readonly (Boolean, Optional): Makes the input read-only if set to true. Defaults to false.
### 3. Handling Events
The component emits the following event:
update:modelValue: Emitted when the masked value changes. You can use this event to update your model value or handle changes in your application.
```bash
import { defineComponent, ref } from 'vue';
import MaskInputComponent from 'mask-input';
export default defineComponent({
components: {
MaskInputComponent
},
setup() {
const maskedValue = ref('');
function handleUpdate(newValue: string) {
console.log('Updated masked value:', newValue);
maskedValue.value = newValue;
}
return {
maskedValue,
handleUpdate
};
}
});
```
## 📝 Contributing
We welcome contributions! If you have any ideas, suggestions, or bug fixes, please feel free to open an issue or submit a pull request.
## 🔗 License
This project is licensed under the MIT License.
## ☕ Support Me
If you like my work and want to support me, you can buy me a coffee! 😊
[](https://buymeacoffee.com/kerimkuscu)