Skip to content

evildvl/vue-e164

Repository files navigation

vue-e164

npm version js-standard-style Awesome Conventional Commits Total alerts Language grade: JavaScript

Vue.js filter for phone formatting with E.164 support

Includes:

  • Filter
  • Global method
  • Directive

Setup

NPM

npm install --save vue-e164

CDN

<script src="//unpkg.com/vue-e164/dist/vue-e164.js"></script>
import e164 from 'vue-164'

const options = {
  plus: true,
  brackets: false,
  space: false,
  dash: false,
  areaCode: true
}

Vue.use(e164, options)

Options

plus {Boolean} - add plus symbol before area code

brackets {Boolean} - add brackets

space {Boolean} - split number by space

dash {Boolean} - split number by dash

areaCode {Boolean} - set to false to exclude area code and plus

If you want to use E.164 standart, you need this options:

{
  plus: true,
  brackets: false,
  space: false,
  dash: false,
  areaCode: true
}

Examples

plus brackets space dash areaCode Result
true true true false true +1 (495) 000 99 88
false false false false true 14950009988
true false false false true +14950009988 (E.164)
true true false false true +1(495)0009988
false true true false true 1 (495) 000 99 88
false false true false true 1 495 000 99 88
false true false false true 1(495)0009988
true false true false true +1 495 000 99 88
true true true true true +1 (495) 000 - 99 - 88
true true false true true +1(495)000-99-88
true false true true true +1 495 000 - 99 - 88
false true true true true 1 (495) 000 - 99 - 88
true false true true true +1 495 000 - 99 - 88
true true true true false (495) 000 - 99 - 88
true true false true false (495)000-99-88
true false true true false 495 000 - 99 - 88
false true true true false (495) 000 - 99 - 88
true false true true false 495 000 - 99 - 88

Usage

vue-e164 adds phone filter, and can be used as any other vue.js filter.

<template>
  <p>{{ string | phone }}</p>
</template>

If you need to use different options for each element, from v0.0.2 you can use directive v-phone:

<template>
  <p v-phone="{ plus: true, brackets: false, space: false, dash: false, areaCode: true }">{{ string }}</p>
</template>

From v1.2.0 you can use global function $filterPhone:

...
methods: {
    applyFilter (phoneInput) {
        return this.$filterPhone(phoneInput, {
              plus: true,
              brackets: false,
              space: false,
              dash: false,
              areaCode: true
        })
    } 
}
...
/* Or as computed property */
...
data () {
    return {
      phone: '70005555555'
    }
},
computed: {
    filteredPhone () {
        return this.$filterPhone(this.phone, {
          plus: true,
          brackets: false,
          space: false,
          dash: false,
          areaCode: true
        })
    }
}
...

Test

npm run build
npm run test

License

MIT

Copyright (c) 2018-2020 Stanislav Mihaylov