ankurk91 / Vue Cleave Component
Licence: mit
Vue.js component for Cleave.js ⌨️
Stars: ✭ 271
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Cleave Component
AutoFormatInputWatcher
This repository contains input watcher for auto formatting digits in edit text
Stars: ✭ 15 (-94.46%)
Mutual labels: formatting
teks
Easily get custom go template based outputs to your command-line tool. Like in docker/kubernetes
Stars: ✭ 41 (-84.87%)
Mutual labels: formatting
sublime-php-grammar
An smart macro PHP plugin for Sublime Text.
Stars: ✭ 30 (-88.93%)
Mutual labels: formatting
CHRTextFieldFormatter
Provides UITextField formatting masks. Such as phone number and credit card number formatters.
Stars: ✭ 52 (-80.81%)
Mutual labels: formatting
yaml-front-matter
A to the point yaml front matter parser
Stars: ✭ 200 (-26.2%)
Mutual labels: formatting
megalinter
🦙 Mega-Linter analyzes 48 languages, 22 formats, 19 tooling formats, excessive copy-pastes, spelling mistakes and security issues in your repository sources with a GitHub Action, other CI tools or locally.
Stars: ✭ 534 (+97.05%)
Mutual labels: formatting
format.nvim
Neovim lua plugin to format the current buffer with external executables
Stars: ✭ 189 (-30.26%)
Mutual labels: formatting
dockerfile-utils
A library and command line interface for formatting and linting Dockerfiles.
Stars: ✭ 17 (-93.73%)
Mutual labels: formatting
intl-tel-input-rails
intl-tel-input for the Rails asset pipeline
Stars: ✭ 35 (-87.08%)
Mutual labels: formatting
address-formatter
Universal international address formatter in Javascript
Stars: ✭ 65 (-76.01%)
Mutual labels: formatting
kirai
String formatting library for Java, Android, Web and Unix Terminal
Stars: ✭ 69 (-74.54%)
Mutual labels: formatting
MineDown
A MarkDown inspired markup library for Minecraft chat components
Stars: ✭ 128 (-52.77%)
Mutual labels: formatting
marker-extension
Sample project demonstrating use of an Xcode Source Editor Extension to format Swift code
Stars: ✭ 19 (-92.99%)
Mutual labels: formatting
Address Formatting
templates to format geographic addresses
Stars: ✭ 253 (-6.64%)
Mutual labels: formatting
Chatty
Bukkit-compatible chat plugin with multiple chat-modes.
Stars: ✭ 30 (-88.93%)
Mutual labels: formatting
humanize
A collection of utility functions, with built-in localization, for humanizing various types of data input
Stars: ✭ 73 (-73.06%)
Mutual labels: formatting
Vue Cleave Component
Vue.js component for Cleave.js
JSFiddle
Demo onVersion matrix
Vue.js version | Package version | Branch |
---|---|---|
2.x | 2.x | 2.x |
3.x | 3.x | master |
Features
- Reactive
v-model
value- You can change input value programmatically
- Reactive options
- You can change config options dynamically
- Component will watch for any changes and redraw itself
- Compatible with Bootstrap, Bulma or any other CSS framework
- Works with validation libraries
- Option to disable
raw
mode to get masked value
Installation
# yarn
yarn add vue-cleave-component
# npm
npm install vue-cleave-component --save
Usage
<template>
<div>
<cleave v-model="cardNumber"
:options="options"
class="form-control"
name="card"/>
</div>
</template>
<script>
import Cleave from 'vue-cleave-component';
export default {
data () {
return {
cardNumber: null,
options: {
creditCard: true,
delimiter: '-',
}
}
},
components: {
Cleave
}
}
</script>
As plugin
import {createApp} from 'vue';
import Cleave from 'vue-cleave-component';
const app = createApp().mount('#app')
app.use(Cleave);
This will register a global component <cleave>
Available props
The component accepts these props:
Attribute | Type | Default | Description |
---|---|---|---|
v-model | String / Number / null
|
null |
Set or Get input value (required) |
options | Object | {} |
Cleave.js options |
raw | Boolean | true |
When set to false ; emits formatted value with format pattern and delimiter |
Install in non-module environments (without webpack)
- Include required files
<!-- cleave.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
// Init as global component
yourApp.use(VueCleave);
</script>
Run examples on your localhost
- Clone this repo
- You should have node-js
>=10.13
and yarn>=1.x
pre-installed - Install dependencies
yarn install
- Run webpack dev server
yarn start
- This should open the demo page at
http://localhost:9000
in your default web browser
Testing
- This package is using Jest and vue-test-utils for testing.
- Tests can be found in
__test__
folder - Execute tests with this command
yarn test
Changelog
Please see CHANGELOG for more information what has changed recently.
License
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].