@tofandel/q-tel-input

$3

!Node version !Types   

##### @tofandel/q-tel-input

The plugin was made for Vue 3 using the Quasar Framework v2.X. The plugin provides auto country
detection on user inputs as well as dropdown for country which supports search by name, country code and country phone
code.

Live preview for the code is available in CodePen

---

#### Installation

##### Package manager

###### npm

``
npm i @tofandel/q-tel-input
`

###### yarn

`
yarn add @tofandel/q-tel-input
`

Import the component as

`
import {QTelInput} from '@tofandel/q-tel-input'
`

Import the styles as

`
import '@tofandel/q-tel-input/dist/@tofandel/style.css'
`

#### Usage

`

`

All the props that are supported in quasar input field are available in the
plugin as well.
_example_

`

`

All the slots that are supported in quasar input field are available in the
plugin as input slots. Country selection element uses #append slot

_example_

`



`

All the slots that are supported in quasar select field are available in the
plugin as country select control slots with prefix cs-.

_example_

`



`

#### Model

| Prop | Type | Description | Usage |
|-------------|------------------|--------------------------------------------------|--------------------------------|
| model-value | string or number | The international phone number value | v-model="telephone_number" |
| country | string | The iso2 country code of the selected country | v-model:country="country" |
| dial-code | string | The dial code of the phone number (without plus) | v-model:dial-code="dialCode" |
| valid | boolean | Whether the phone number is valid or not | v-model:valid="valid"` |

#### Props

| Prop | Type | Required | Description |
|------------------|-----------------|----------|---------------------------------------------------------------------------------------------------------------------|
| invalid-message | String or false | No | Show this message when the phone number is not valid (set to false to disable validation) |
| search-label | String | No | The label for the search field inside the country dropdown |
| search-icon | String | No | Set the icon for the search field to something else |
| dropdown-options | Object | No | The props to pass to the country select |
| use-emoji | Boolean | No | Set to use the emoji icon instead of the default flag images |
| no-results-text | String | No | Set a string when the search results nothing, default: 'No results found' |
| output-formatted | Boolean | No | Set to true if you want the pretty formatting to be emitted in the model-value, by default no space will be present |

#### Events

| Event name | Type | Description |
|--------------|---------|---------------------------------------------------------------|
| country | Country | Gets back the object information of a country when it changes |
| update:valid | Boolean | Gets back information about the validity of the phone number |