# vue-tel-mini-input

> International Telephone Input with Vue

Latest version **1.0.2** (published 2019-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-tel-mini-input
pnpm add vue-tel-mini-input
yarn add vue-tel-mini-input
bun add vue-tel-mini-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-03-29 |
| First published | 2018-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 265.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Steven Dao |
| Maintainers | cre-o |
| Keywords | vue, telephone, phone, vue-tel-mini-input, phone input, telephone input |

## Links

- npm: https://www.npmjs.com/package/vue-tel-mini-input
- Repository: https://github.com/cre-o/vue-tel-mini-input
- Issues: https://github.com/cre-o/vue-tel-mini-input/issues
- npm.io page: https://npm.io/package/vue-tel-mini-input

## Dependencies (2)

- [get-json](https://npm.io/package/get-json.md) ^1.0.0
- [libphonenumber-js](https://npm.io/package/libphonenumber-js.md) ^0.4.44

## Recent versions

- 1.0.2 (latest) — 2019-03-29
- 1.0.1 — 2018-09-16
- 1.0.0 — 2018-09-14

## README

# vue-tel-mini-input
International Telephone Input (this is minified version of package vue-tel-input by [Steven](https://github.com/iamstevendao))

![preview](https://user-images.githubusercontent.com/723379/45596230-62aafd80-b9c1-11e8-8cc0-de3545908907.png)

## Installation
- **yarn**:
  ```bash
    yarn add vue-tel-mini-input
  ```
- **npm**:
  ```bash
    npm i --save vue-tel-mini-input
  ```

## Usage
- Install as a global component:
    ```javascript
    import Vue from 'vue'
    import VueTelMiniInput from 'vue-tel-mini-input'

    Vue.use(VueTelMiniInput)
    ```

- In your component:
     ```js
     <template>
     ...
        <vue-tel-input v-model="phone"
                       @onInput="onInput"
                       <!-- optional -->
                       :preferredCountries="['us', 'gb', 'ua']">
        </vue-tel-input>
     ...
     <template>
     <script>
     export default {
       data() {
         return {
           phone: '',
         };
       },
       methods: {
         /**
          * @param {string} number
          * the phone number inputted by user, will be formatted along with country code
          * // Ex: inputted: (AU) 0432 432 432
          * // number = '+61432421546'
          *
          * @param {Boolean} isValid
          * @param {string} country
          */
          onInput({ number, isValid, country }) {
            console.log(number, isValid, country);
          },
       },
     }
     </script>
     ```

### Props

  | Property value | Type | Default value | Description |
  | -------------- | ---- | ------------- | ----------- |
  | `defaultCountry` | `string` | `''` | Default country, will override the country fetched from IP address of user |
  | `disabledFetchingCountry` | `Boolean` | false | Disable fetching current country based on IP address of user |
  | `preferredCountries` | `Array` | `[]` | Preferred countries list, will be on top of the dropdown. ie `['AU', 'BR']` |
  | `disabled` | `Boolean` | `false` | Disable input field |
  | `placeholder` | `string` | Enter a phone number | Placeholder for the input |
  | `required` | `Boolean` | `false` | Required property for HTML5 required attribute |

### Events

  | Property value | Arguments | Description |
  | -------------- | --------- | ----------- |
  | `onInput` | `Object` | Fires when the input changes with the argument is the object includes `{ number, isValid, country }` |
  | `onBlur` |  | Fires on blur event |

## Highlights & Credits
- Vue app created by [vue-cli](https://github.com/vuejs/vue-cli).
- Telephone Number parsing, validation by [libphonenumber-js](https://catamphetamine.github.io/libphonenumber-js/).
- Country Codes data from [intl-tel-input](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/data.js).
- Country Flags by [behdad/region-flags](https://github.com/behdad/region-flags).
- [Boostrap-Vue](https://bootstrap-vue.js.org/docs/).
- User's Location by [get-json](https://www.npmjs.com/package/get-json) and [ipifo.io](https://ipinfo.io/json)

## Demo Usage

```bash

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

# open Browser and start serve in demo
$ yarn/npm demo:open

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist

```

## Contributors
- [mikob](https://github.com/mikob) for super awesome work to [remove the bootstrap dependency](https://github.com/EducationLink/vue-tel-input/pull/13).
- [kalcifield](https://github.com/kalcifield) for helping make the input [preload with a phone number](https://github.com/EducationLink/vue-tel-input/pull/8).

made with &#x2764; by [Steven](https://github.com/iamstevendao) and [Sergey](https://github.com/cre-o).

---
_Source: https://npm.io/package/vue-tel-mini-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._