Vue-country-dropdown-2 NPM

Vue Country Dropdown 2

Country dropdown for Vue@2.

Demo

Installation

yarn:
```
  yarn add vue-country-dropdown-2
```
npm:
```
  npm i --save vue-country-dropdown-2
```

Usage

Install as a global component:

import Vue from "vue";
import VueCountryDropdown from "vue-country-dropdown-2";

Vue.use(VueCountryDropdown);

Or use in a specific component

import VueCountryDropdown from 'vue-country-dropdown-2'

export default {
  components: {
    VueCountryDropdown
  }
}

In your component:

<template>
...
  <vue-country-dropdown
    @onSelect="onSelect"
    :preferredCountries="['TR', 'US', 'GB']"
    :defaultCountry="'TR'"
    :immediateCallSelectEvent="true"
    :enabledFlags="true"
    :enabledName="true"
    :enabledPhonecode="true"
    :showNotSelectedOption="true"
    :notSelectedOptionText="'Not Selected'"
    :disabled="false"
    :clearable="false"
    :multiple="false"
    :searchable="true"
    :closeOnSelect="true"
    :placeholder="'Select a country'"
  />
...
<template>
<script>
export default {
  methods: {
     onSelect(country) {
       console.log(country);
       // Check the country object example below.
     },
  },
}
</script>

Country Object Example

{
    "id": 225,
    "name": "Turkey",
    "iso3": "TUR",
    "iso2": "TR",
    "numeric_code": "792",
    "phone_code": "+90",
    "capital": "Ankara",
    "currency": "TRY",
    "currency_name": "Turkish lira",
    "currency_symbol": "₺",
    "tld": ".tr",
    "native": "Türkiye",
    "region": "Asia",
    "subregion": "Western Asia",
    "timezones": [
        {
            "zoneName": "Europe/Istanbul",
            "gmtOffset": 10800,
            "gmtOffsetName": "UTC+03:00",
            "abbreviation": "EET",
            "tzName": "Eastern European Time"
        }
    ],
    "translations": {
        "kr": "터키",
        "br": "Turquia",
        "pt": "Turquia",
        "nl": "Turkije",
        "hr": "Turska",
        "fa": "ترکیه",
        "de": "Türkei",
        "es": "Turquía",
        "fr": "Turquie",
        "ja": "トルコ",
        "it": "Turchia",
        "cn": "土耳其",
        "tr": "Türkiye"
    },
    "latitude": "39.00000000",
    "longitude": "35.00000000",
    "emoji": "🇹🇷",
    "emojiU": "U+1F1F9 U+1F1F7"
}

Props

Property value	Type	Default value	Description
`disabled`	`Boolean`	`false`	Disables the dropdown
`defaultCountry`	`string`	`''`	Set a country as selected at startup with iso code. ie `'TR'`
`defaultCountryByName`	`string`	`''`	Set a country as selected at startup with name. ie `'Turkey'`
`defaultCountryByPhoneCode`	`string`	`''`	Set a country as selected at startup with phone code. ie '`+90`'
`enabledName`	`Boolean`	`true`	Enable country name in the input
`enabledFlags`	`Boolean`	`true`	Enable flags in the input
`enabledPhonecode`	`Boolean`	`true`	Enable phone code in the input
`clearable`	`Boolean`	`false`	User can clear or not the selected country
`multiple`	`Boolean`	`false`	Select multiple country
`searchable`	`Boolean`	`true`	Set countries searchable
`closeOnSelect`	`Boolean`	`true`	Close country list on select
`placeholder`	`String`	`''`	Set a placeholder for the input
`preferredCountries`	`Array`	`[]`	Preferred countries list, will be on top of the dropdown. ie `['TR', 'US', 'AL']`
`onlyCountries`	`Array`	`[]`	List of countries will be shown on the dropdown. ie `['TR', 'US', 'AL']`
`ignoredCountries`	`Array`	`[]`	List of countries will NOT be shown on the dropdown. ie `['TR', 'US', 'AL']`
`immediateCallSelectEvent`	`Boolean`	`false`	Call the `onSelect` event when the component is mounted.
`showNotSelectedOption`	`Boolean`	`false`	The `Not Selected` option is added to the top of the list. (All values are empty.)
`notSelectedOptionText`	`String`	`Not Selected`	Replace `Not Selected` text with another string.
`countryNameTranslation`	`String`	`''`	Shows the name in the translation object instead of the country default name. ie `'tr'`

Events

Property value	Arguments	Description
`onSelect`	`Object`	Fires when the input changes with the argument is the object includes `country object`. (Check the country object example above)
`open`	`none`	Triggered when the dropdown is open.
`close`	`none`	Triggered when the dropdown is closed.
`option_selecting`	`Object`	Triggered after an option has been selected, before updating internal state. (Return same object with onSelect).
`option_selected`	`Object`	Triggered when an option has been selected, after updating internal state. (Return same object with onSelect).
`option_deselecting`	`Object`	Triggered when an option has been deselected, before updating internal state. (Return same object with onSelect).
`option_deselected`	`Object`	Triggered when an option has been deselected, after updating internal state. (Return same object with onSelect).