├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
        ├── country-select.vue
        └── region-select.vue
    ├── data.js
    ├── index.js
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-Country-Region-Select ![CI status](https://img.shields.io/badge/build-passing-brightgreen.svg)
 2 | 
 3 | Vue-Country-Region-Select provides a pair of Vue components that will allow you to easily put a country and region dropdown in your project that will work together or standalone. Supports vue-i18n.
 4 | 
 5 | ## Installation
 6 | `npm install vue-country-region-select --save`
 7 | 
 8 | ## Dependencies 
 9 | Being that these are Vue components you will need to use them inside of Vue.
10 | 
11 | The Data for the countries and regions are originally taken from: https://www.npmjs.com/package/country-region-data
12 | However the data set is now located in this project and is available to be edited to suit more countries and regions as you need.
13 | 
14 | ## Usage
15 | Here is a sample use case of how you would use vue-country-region-select in your vue project. You can alternatively store the data in a store somewhere. Country and Region values will be returned in their short code values by default. 
16 | 
17 | Ex. country: 'US' and region: 'IL'
18 | 
19 | There is a prop that will allow for country to be returned in full instead of in short code version.
20 | 
21 | The library registers the components globally so only need to import the library once in order to make the components be available throughout your project.
22 | ```javascript
23 | // too be added before mounting app
24 | import Vue from 'vue'
25 | import vueCountryRegionSelect from 'vue-country-region-select'
26 | Vue.use(vueCountryRegionSelect)
27 | 
28 | new Vue({}).$mount('#app')
29 | // end mounting app
30 | 
31 | // then inside your vue components
32 | export default Vue.extend({
33 |   data: () => ({
34 |     country: '',
35 |     region: ''
36 |   })
37 | })
38 | 
39 | <template>
40 |   <country-select v-model="country" :country="country" topCountry="US" />
41 |   <region-select v-model="region" :country="country" :region="region" />
42 | </template>
43 | ```
44 | 
45 | ## Options
46 | Here are the available attributes that can be used with the provided components.
47 | 
48 | ```<country-select />```
49 | 
50 | Parameter | Required? | Default | Type | Description
51 | --------- | --------- | ------- | -------- | ----------
52 | v-model | yes | ''| string | The data binding for your component
53 | country | yes | '' | string | Make this tied to the same piece of data as v-model
54 | topCountry | no | '' | string | By providing this value you will tell component what country to put at the top of the dropdown list for easy selection. Make sure to use country short code. So for United states you would provide 'US'. However, if you set countryName to true make sure to also write out full country name when setting a topCountry. In this scenerio United States would be 'United States'.
55 | countryName | no | false | boolean | By setting this value to true, country names will be output in full instead of using the abbreviated short codes. Make sure to set this true for both country and region if you are using.
56 | whiteList | no | [] | array | Fill this array with capitalized short codes of the countries you want to appear in the dropdown list. ex: ['US', 'CA', 'MX']
57 | blackList | no | [] | array | Fill this array with capitalized short codes of the countries you want to remove from dropdown list. ex: ['US'] 
58 | className | no | '' | string | Class name ex: `form-control`
59 | placeholder | no | 'Select Country' | string | The placeholder text for country select
60 | autocomplete | no | false | boolean | Set to true to enable browser to automatically fill out the country.
61 | shortCodeDropdown | no | false | boolean | Use this to have dropdown text display as short codes
62 | usei18n | no | true | boolean | Set to false if using i18n and want to disable for this component
63 | disablePlaceholder | no | false | boolean | Set to true to make placeholder non-selectable
64 | removePlaceholder | no | false | boolean | Set to true to remove placeholder all together, this will autoselect first in list automatically
65 | 
66 | ```<region-select /> ```
67 | 
68 | Parameter | Required? | Default | Type | Description
69 | --------- | --------- | ------- | -------- | ----------
70 | v-model | yes | ''| string | The data binding for your component
71 | region | yes | '' | string | Make this tied to the same piece of data as v-model
72 | country | no | '' | string | This tells the component what country to grab the list of displayed regions from. To have it work in tandem with country component provide it the variable that is tied to the v-model of the country-select component.
73 | defaultRegion | no | 'US' | string | This allows you to set a default region when choosing not to use the country attribute. It will be set to regions of the United States if not provided.
74 | countryName | no | false | boolean | Set this to true if you are setting it to true while using Country Select. This is just to help keep the data values in sync.
75 | regionName | no | false | boolean | Set this to true if you want the v-model to output full region names instead of the default abbreviations.
76 | whiteList | no | [] | array | Fill this array with capitalized short codes of the regions you want to appear in the dropdown list. ex: ['AL', 'AK', 'WA']
77 | blackList | no | [] | array | Fill this array with capitalized short codes of the regions you want to remove from dropdown list. ex: ['AZ'] 
78 | className | no | '' | string | Class name ex: `form-control`
79 | placeholder | no | 'Select Region' | string | The placeholder text for region select
80 | autocomplete | no | false | boolean | Set to true to enable browser to automatically fill out the region.
81 | shortCodeDropdown | no | false | boolean | Use this to have dropdown text display as short codes
82 | usei18n | no | true | boolean | Set to false if using i18n and want to disable for this component
83 | disablePlaceholder | no | false | boolean | Set to true to make placeholder non-selectable, this will cause regions to set to first available when switching countries
84 | removePlaceholder | no | false | boolean | Set to true to remove placeholder all together, this will autoselect first in list automatically
85 | 
86 | 
87 | ## Contributing
88 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
89 | 
90 | ## License
91 | [MIT](https://choosealicense.com/licenses/mit/)
92 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-country-region-select",
 3 |   "version": "2.0.16",
 4 |   "description": "A Country select component and Region select component for Vue.js. Work together and standalone.",
 5 |   "repository": "https://github.com/gehrj/vue-country-region-select",
 6 |   "author": "Justin Gehr <gehrjay@gmail.com>",
 7 |   "license": "MIT",
 8 |   "keywords": [
 9 |     "vue-country-region-select",
10 |     "vue-country-state-select",
11 |     "vue country select",
12 |     "vue region select",
13 |     "vue",
14 |     "select",
15 |     "country",
16 |     "region",
17 |     "vue component",
18 |     "component",
19 |     "country select",
20 |     "region select",
21 |     "lightweight",
22 |     "state select",
23 |     "state",   
24 |     "vue state select",
25 |     "country dropdown",
26 |     "dropdown",
27 |     "region dropdown",
28 |     "state dropdown",
29 |     "vue-country-region-dropdown",
30 |     "vue-country-state-dropdown",
31 |     "vue dropdown component",
32 |     "country and state select"
33 |   ],
34 |   "private": false,
35 |   "scripts": {
36 |     "serve": "vue-cli-service serve",
37 |     "build": "vue-cli-service build",
38 |     "build-bundle": "vue-cli-service build --target lib --name vueCountryRegionSelect ./src/index.js",
39 |     "test": "vue-cli-service test",
40 |     "e2e": "vue-cli-service e2e",
41 |     "lint": "vue-cli-service lint",
42 |     "e2e:open": "vue-cli-service e2e:open"
43 |   },
44 |   "files": [
45 |     "dist/vueCountryRegionSelect.umd.min.js"
46 |   ],
47 |   "main": "./dist/vueCountryRegionSelect.umd.min.js",
48 |   "dependencies": {
49 |     "vue": "^2.5.17"
50 |   },
51 |   "devDependencies": {
52 |     "@vue/cli-plugin-babel": "^3.6.0",
53 |     "@vue/cli-plugin-eslint": "^3.0.5",
54 |     "@vue/cli-service": "^3.6.0",
55 |     "vue-template-compiler": "^2.5.17"
56 |   },
57 |   "eslintConfig": {
58 |     "root": true,
59 |     "env": {
60 |       "node": true
61 |     },
62 |     "extends": [
63 |       "plugin:vue/essential",
64 |       "eslint:recommended"
65 |     ],
66 |     "rules": {},
67 |     "parserOptions": {
68 |       "parser": "babel-eslint"
69 |     }
70 |   },
71 |   "postcss": {
72 |     "plugins": {
73 |       "autoprefixer": {}
74 |     }
75 |   },
76 |   "browserslist": [
77 |     "> 1%",
78 |     "last 2 versions",
79 |     "not ie <= 8"
80 |   ]
81 | }
82 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     {{"country: " + country}}
 4 |     <country-select v-model="country" :country="country" topCountry="United Kingdom" :countryName="true" />
 5 |     {{"region: " + region}}
 6 |     <region-select v-model="region" :country="country" :region="region" :countryName="true" :regionName="true" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import CountrySelect from '@/components/country-select'
12 | import RegionSelect from '@/components/region-select'
13 | 
14 | // ***** For demo testing only *****
15 | export default {
16 |   name: 'app',
17 |   components: {
18 |     CountrySelect,
19 |     RegionSelect
20 |   },
21 |   data: () => ({
22 |     country: 'United Kingdom',
23 |     region: 'West Lothian (Linlithgowshire)'
24 |   })
25 | }
26 | </script>
27 | 
28 | <style>
29 | #app {
30 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
31 |   -webkit-font-smoothing: antialiased;
32 |   -moz-osx-font-smoothing: grayscale;
33 |   text-align: center;
34 |   color: #2c3e50;
35 |   margin-top: 60px;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/components/country-select.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import regions from '@/data.js'
  3 | 
  4 |   export default {
  5 |     name: 'CountrySelect',
  6 |     props: {
  7 |       country: String,
  8 |       countryName: Boolean,
  9 |       whiteList: Array,
 10 |       blackList: Array,
 11 |       className: String,
 12 |       shortCodeDropdown: Boolean,
 13 |       autocomplete: Boolean,
 14 |       topCountry: {
 15 |         type: String,
 16 |         default: ""
 17 |       },
 18 |       placeholder: {
 19 |         type: String,
 20 |         default: 'Select Country'
 21 |       },
 22 |       disablePlaceholder: {
 23 |         type: Boolean,
 24 |         default: false
 25 |       },
 26 |       removePlaceholder: {
 27 |         type: Boolean,
 28 |         default: false
 29 |       },
 30 |       usei18n: {
 31 |         type: Boolean,
 32 |         default: true
 33 |       }
 34 |     },
 35 |     data: () => ({
 36 |       ran: false
 37 |     }),
 38 |     computed: {
 39 |       countries() {
 40 |         let countryList = regions.filter((region) => {
 41 |           if (this.countryName) {
 42 |             return region.countryName !== this.firstCountry
 43 |           } else {
 44 |             return region.countryShortCode !== this.firstCountry
 45 |           }
 46 |         })
 47 |         if (this.whiteList) {
 48 |           countryList = countryList.filter((country) => {
 49 |             return this.whiteList.includes(country.countryShortCode)
 50 |           })
 51 |         }
 52 |         if (this.blackList) {
 53 |           countryList = countryList.filter((country) => {
 54 |             return !this.blackList.includes(country.countryShortCode)
 55 |           })
 56 |         }
 57 |         if (this.$i18n && this.usei18n) {
 58 |           countryList = countryList.map((country) => {
 59 |             let localeCountry = Object.assign({ }, country)
 60 |             localeCountry.countryName = this.$t(country.countryName)
 61 |             return localeCountry
 62 |           })
 63 |           countryList.sort((country1, country2) => {
 64 |             return (country1.countryName > country2.countryName) ? 1 : -1
 65 |           })
 66 |         }
 67 |         if (this.removePlaceholder) {
 68 |           let c = this.firstCountry || countryList[0][this.valueType]
 69 |           this.onChange(c)
 70 |         }
 71 |         return countryList
 72 |       },
 73 |       firstCountry() {
 74 |         if(this.countryName) {
 75 |           if(this.topCountry.length === 2 ) {
 76 |             const regionObj = regions.find((region) => {
 77 |               return region.countryShortCode === this.topCountry
 78 |             })
 79 |             return regionObj.countryName
 80 |           } else {
 81 |             return this.topCountry
 82 |           }
 83 |         }
 84 |         if (this.topCountry) {
 85 |           return this.topCountry
 86 |         }
 87 |         return ''
 88 |       },
 89 |       name() {
 90 |         return this.name
 91 |       },
 92 |       value() {
 93 |         return this.country
 94 |       },
 95 |       valueType() {
 96 |         return this.countryName ? 'countryName' : 'countryShortCode'
 97 |       },
 98 |       autocompleteAttr() {
 99 |         const autocompleteType = (showsFullCountryName) => showsFullCountryName ? "country-name" : "country";
100 |         return this.autocomplete ? autocompleteType(this.countryName) : "off";
101 |       }
102 |     },
103 |     methods: {
104 |       onChange(country) {
105 |         this.$emit('input', country)
106 |       },
107 |       topCountryName() {
108 |         const regionObj = regions.find((region) => {
109 |           if (this.countryName) {
110 |             return region.countryName === this.firstCountry
111 |           } else {
112 |             return region.countryShortCode === this.firstCountry
113 |           }
114 |         })
115 |         if (this.$i18n && this.usei18n) {
116 |           return this.$t(regionObj.countryName)
117 |         }
118 |         return this.shortCodeDropdown ? regionObj.countryShortCode : regionObj.countryName
119 |       }
120 |     }
121 |   }
122 | </script>
123 | 
124 | <template>
125 |   <select @change="onChange($event.target.value)" :class="className" :autocomplete="autocompleteAttr">
126 |     <option value="" v-if="!disablePlaceholder && !removePlaceholder">{{ placeholder }}</option>
127 |     <option value="" v-if="disablePlaceholder && !removePlaceholder" disabled selected>{{ placeholder }}</option>
128 |     <option v-if="topCountry" :value="firstCountry" :selected="country === firstCountry">{{topCountryName()}}</option>
129 |     <option v-for="(region, index) in countries" :value="region[valueType]" :selected="country === region[valueType]" :key="index">{{ shortCodeDropdown ? region.countryShortCode : region.countryName }}</option>
130 |   </select>
131 | </template>
132 | 


--------------------------------------------------------------------------------
/src/components/region-select.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import regions from '@/data.js'
  3 | export default {
  4 |   name: 'RegionSelect',
  5 |   props: {
  6 |     country: String,
  7 |     region: String,
  8 |     defaultRegion: String,
  9 |     countryName: Boolean,
 10 |     whiteList: Array,
 11 |     blackList: Array,
 12 |     regionName: Boolean,
 13 |     className: String,
 14 |     shortCodeDropdown: Boolean,
 15 |     placeholder: {
 16 |       type: String,
 17 |       default: 'Select Region'
 18 |     },
 19 |     disablePlaceholder: {
 20 |       type: Boolean,
 21 |       default: false
 22 |     },
 23 |     removePlaceholder: {
 24 |       type: Boolean,
 25 |       default: false
 26 |     },
 27 |     usei18n: {
 28 |       type: Boolean,
 29 |       default: true
 30 |     }
 31 |   },
 32 |   data: () => ({
 33 |     shownRegions: [],
 34 |     regions,
 35 |     ran: false
 36 |   }),
 37 |   mounted() {
 38 |     if (this.country) {
 39 |       this.getRegionWithCountry()
 40 |     } else {
 41 |       let findRegion = ''
 42 |       if (this.countryName) {
 43 |         findRegion = this.defaultRegion ? this.defaultRegion : 'United States'
 44 |       } else {
 45 |         findRegion = this.defaultRegion ? this.defaultRegion : 'US'
 46 |       }
 47 |       this.getRegionWithCountry(findRegion)
 48 |     }
 49 |   },
 50 |     computed: {
 51 |       name() {
 52 |         return this.name
 53 |       },
 54 |       value() {
 55 |         return this.region
 56 |       },
 57 |       valueType() {
 58 |         return this.regionName ? 'name' : 'shortCode'
 59 |       },
 60 |       autocompleteAttr() {
 61 |         return this.autocomplete ? "address-level1" : "off";
 62 |       }
 63 |   },
 64 |   methods: {
 65 |     onChange(region) {
 66 |       this.$emit('input', region)
 67 |     },
 68 |     getRegionWithCountry(country) {
 69 |       country = country || this.country
 70 |       let countryRegions = regions.find((elem) => {
 71 |         if (this.countryName) {
 72 |           return elem.countryName === country
 73 |         } else {
 74 |           return elem.countryShortCode === country
 75 |         }
 76 |       }).regions
 77 |       if (this.$i18n && this.usei18n) {
 78 |         countryRegions = countryRegions.map((region) => {
 79 |           let localeRegion = Object.assign({}, region)
 80 |           localeRegion.name = this.$t(region.name)
 81 |           return localeRegion
 82 |         })
 83 |         countryRegions.sort((region1, region2) => {
 84 |           return region1.name > region2.name ? 1 : -1
 85 |         })
 86 |       }
 87 |       if (this.whiteList) {
 88 |         countryRegions = countryRegions.filter((region) => {
 89 |           return this.whiteList.includes(region.shortCode)
 90 |         })
 91 |       }
 92 |       if (this.blackList) {
 93 |         countryRegions = countryRegions.filter((region) => {
 94 |           return !this.blackList.includes(region.shortCode)
 95 |         })
 96 |       }
 97 |       this.shownRegions = countryRegions
 98 |       if (this.disablePlaceholder && this.ran) {
 99 |         this.onChange(this.shownRegions[0][this.valueType])
100 |       }
101 |       if (this.removePlaceholder) {
102 |         this.onChange(this.shownRegions[0][this.valueType])
103 |       }
104 |       this.ran = true
105 |     }
106 |   },
107 |   watch: {
108 |     country(newVal, oldVal) {
109 |       if (oldVal !== '') {
110 |         this.onChange('')
111 |       }
112 |       if (this.country) {
113 |         this.getRegionWithCountry()
114 |       } else {
115 |         this.shownRegions = []
116 |       }
117 |     }
118 |   }
119 | }
120 | </script>
121 | 
122 | <template>
123 |   <select @change="onChange($event.target.value)" :class="className" :autocomplete="autocompleteAttr">
124 |     <option v-if="!disablePlaceholder && !removePlaceholder" value="">{{ placeholder }}</option>
125 |     <option v-if="disablePlaceholder && !removePlaceholder" value="" disabled selected>{{ placeholder }}</option>
126 |     <option v-for="(place, index) in shownRegions" v-bind:key="index" :value="place[valueType] !== '' ? place[valueType] : place.name.substring(0,3)" :selected="region === place[valueType]">{{shortCodeDropdown ? place.shortCode : place.name}}</option>
127 |   </select>
128 | </template>
129 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import CountrySelect from '@/components/country-select.vue'
 2 | import RegionSelect from '@/components/region-select.vue'
 3 | 
 4 | const install = function (Vue) {
 5 |     const components = { CountrySelect, RegionSelect }
 6 |     Object.keys(components).forEach(name => {
 7 |         Vue.component(name, components[name])
 8 |     })
 9 | }
10 | 
11 | const VueCountryRegionSelect = { CountrySelect, RegionSelect, install }
12 | 
13 | export default VueCountryRegionSelect
14 | export { CountrySelect, RegionSelect }
15 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------