Vue-state-dropdown NPM

Vue State Dropdown

State dropdown for Vue@2.

Demo

Installation

yarn:
```
  yarn add vue-state-dropdown
```
npm:
```
  npm i --save vue-state-dropdown
```

Usage

Install as a global component:

import Vue from "vue";
import VueStateDropdown from "vue-state-dropdown";

Vue.use(VueStateDropdown);

Or use in a specific component

import VueStateDropdown from 'vue-state-dropdown'

export default {
  components: {
    VueStateDropdown
  }
}

In your component:

<template>
...
  <vue-state-dropdown
    @onSelect="onSelect"
    :countryCode="'tr'"
    :selectFirstItem="true"
    :preferredStates="['06', '34']"
    :immediateCallSelectEvent="true"
    :disabled="false"
    :clearable="false"
    :multiple="false"
    :searchable="true"
    :closeOnSelect="true"
  />
...
<template>
<script>
export default {
  methods: {
     onSelect(state) {
       console.log(state);
       // Check the state object example below.
     },
  },
}
</script>

State Object Example

{
  "id": 2217,
  "name": "Ankara",
  "country_id": 225,
  "country_code": "TR",
  "country_name": "Turkey",
  "state_code": "06",
  "type": "province",
  "latitude": "39.78052450",
  "longitude": "32.71813750"
}

Props

Property value	Type	Default value	Description
`disabled`	`Boolean`	`false`	Disables the dropdown
`countryCode`	`string`	`''`	Get states by country code. ie `'tr'`
`countryName`	`string`	`''`	Get states by country name. ie `'turkey'`
`countryId`	`Number`	`null`	Get states by country id. ie `225`
`defaultState`	`Number`	`''`	Set a state as selected at startup with state id. ie `2217`
`defaultStateByName`	`string`	`''`	Set a state as selected at startup with state name. ie `'Ankara'`
`selectFirstItem`	`Boolean`	`false`	Set first state in the list as selected
`clearable`	`Boolean`	`false`	User can clear or not the selected country
`multiple`	`Boolean`	`false`	Select multiple country
`searchable`	`Boolean`	`true`	Set states searchable
`closeOnSelect`	`Boolean`	`true`	Close country list on select
`placeholder`	`String`	`''`	Set a placeholder for the input
`preferredState`	`Array`	`[]`	Preferred states list, will be on top of the dropdown. ie `['06', 'WTO']`
`onlyStates`	`Array`	`[]`	List of states will be shown on the dropdown. ie `['06', 'WTO']`
`ignoredStates`	`Array`	`[]`	List of states will NOT be shown on the dropdown. ie `['06', 'WTO']`
`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.

Events

Property value	Arguments	Description
`onSelect`	`Object`	Fires when the input changes with the argument is the object includes `state object`. (Check the state 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).