├── .gitignore
├── yarn.lock
├── package.json
├── README.md
├── LICENSE
└── src
    └── Cleave.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | cleave.js@^0.7.15:
6 |   version "0.7.15"
7 |   resolved "https://registry.yarnpkg.com/cleave.js/-/cleave.js-0.7.15.tgz#f8e33a2b4d48c48c410e4978f983c85a8be32a5a"
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cleave",
 3 |   "version": "1.2.2",
 4 |   "description": "Cleave component is based on cleave.js for Vue",
 5 |   "repository": "vue-bulma/cleave",
 6 |   "license": "MIT",
 7 |   "author": {
 8 |     "name": "Fangdun Cai",
 9 |     "email": "cfddream@gmail.com",
10 |     "url": "fundon.me"
11 |   },
12 |   "keywords": [
13 |     "vue",
14 |     "vue-cleave",
15 |     "cleave",
16 |     "javascript",
17 |     "html",
18 |     "format",
19 |     "form",
20 |     "input"
21 |   ],
22 |   "main": "src/Cleave.vue",
23 |   "peerDependencies": {
24 |     "vue": ">=2"
25 |   },
26 |   "dependencies": {
27 |     "cleave.js": "^0.7.15"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cleave
 2 | 
 3 | Cleave component is based on [cleave.js](https://github.com/nosir/cleave.js) for Vue Bulma.
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```
 9 | $ npm install vue-cleave --save
10 | ```
11 | 
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <cleave placeholder="Enter your credit card number" :options="{ creditCard: true }"></cleave>
18 | </template>
19 | 
20 | <script>
21 | import Cleave from 'vue-cleave'
22 | 
23 | export default {
24 |   components: {
25 |     Cleave
26 |   }
27 | }
28 | </script>
29 | ```
30 | 
31 | 
32 | ## Badges
33 | 
34 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
35 | ![](https://img.shields.io/badge/status-stable-green.svg)
36 | 
37 | ---
38 | 
39 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
40 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
41 | > Twitter [@_fundon](https://twitter.com/_fundon)
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Fangdun Cai <cfddream@gmail.com> (fundon.me)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/Cleave.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input ref="input" type="text" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import Cleave from 'cleave.js'
 7 | 
 8 | export default {
 9 |   props: {
10 |     value: {
11 |       type: String,
12 |       default: ''
13 |     },
14 |     options: {
15 |       type: Object,
16 |       default: () => ({})
17 |     },
18 |     events: {
19 |       type: Object,
20 |       default: () => ({})
21 |     }
22 |   },
23 | 
24 |   data () {
25 |     return {
26 |       cleave: null
27 |     }
28 |   },
29 | 
30 |   methods: {
31 |     emitEvent () {
32 |       this.$emit('input', this.$el.value)
33 |       this.$emit('rawValueChanged', this.cleave.getRawValue())
34 |     }
35 |   },
36 | 
37 |   mounted () {
38 |     this.$el.value = this.value
39 |     this.cleave = new Cleave(this.$el, this.options)
40 |     Object.keys(this.events).map((key) => {
41 |       this.$refs.input.addEventListener(key, this.events[key])
42 |     })
43 |     if (this.options.maxLength) {
44 |       this.$el.setAttribute('maxlength', this.options.maxLength)
45 |     }
46 | 
47 |     // in case of cleave.js remove result or properties from cleave instance.
48 |     if (this.cleave.properties && this.cleave.properties.hasOwnProperty('result')) {
49 |       this.$watch('cleave.properties.result', this.emitEvent)
50 |     } else {
51 |       this.$el.addEventListener('input', this.emitEvent)
52 |     }
53 |   },
54 | 
55 |   beforeDestroy () {
56 |     this.cleave.destroy()
57 |   },
58 | 
59 |   watch: {
60 |     options: {
61 |       deep: true,
62 |       handler (val) {
63 |         this.cleave.destroy()
64 |         this.cleave = new Cleave(this.$el, val)
65 |       }
66 |     }
67 |   },
68 | 
69 | }
70 | </script>
71 | 


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