Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    vue-e164

    2.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    vue-e164

    npm version js-standard-style Awesome Conventional Commits

    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

    Install

    npm i vue-e164

    DownloadsWeekly Downloads

    6

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    21.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar