├── .babelrc
├── .editorconfig
├── .envrc
├── .eslintignore
├── .eslintrc.js
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── 01_bug_report.md
    │   └── 02_feature_request.md
    └── workflows
    │   └── release.yml
├── .gitignore
├── .lintstagedrc.json
├── .releaserc.js
├── .vscode
    └── settings.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── babel.config.js
├── build
    ├── rollup.config.base.js
    ├── rollup.config.browser.js
    ├── rollup.config.es.js
    └── rollup.config.umd.js
├── circle.yml
├── commitlint.config.js
├── demo.sh
├── dist
    ├── vue-tel-input-vuetify.esm.js
    ├── vue-tel-input-vuetify.min.js
    └── vue-tel-input-vuetify.umd.js
├── jest.config.js
├── lib
    ├── all-countries.js
    ├── index.js
    ├── plugin.js
    ├── sprite.css
    ├── utils.js
    └── vue-tel-input-vuetify.vue
├── package-lock.json
├── package.json
├── public
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.svg
    ├── components
    │   └── Example.vue
    ├── lib
    │   ├── all-countries.js
    │   ├── index.js
    │   ├── plugin.js
    │   ├── sprite.css
    │   ├── utils.js
    │   └── vue-tel-input-vuetify.vue
    ├── main.js
    └── plugins
    │   └── vuetify.js
└── vue.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "test": {
 4 |       "passPerPreset": true,
 5 |       "presets": [
 6 |         {
 7 |           "plugins": [
 8 |             "@babel/plugin-proposal-object-rest-spread"
 9 |           ]
10 |         },
11 |         {
12 |           "passPerPreset": false,
13 |           "presets": [
14 |             "@babel/preset-env"
15 |           ]
16 |         }
17 |       ]
18 |     }
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.envrc:
--------------------------------------------------------------------------------
1 | PATH_add bin
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 | /test/unit/coverage/
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   env: {
 6 |     'node': true,
 7 |   },
 8 |   extends: [
 9 |     'plugin:vue/essential',
10 |     '@vue/airbnb',
11 |   ],
12 |   plugins: ['vue'],
13 |   parserOptions: {
14 |     parser: 'babel-eslint',
15 |   },
16 |   // add your custom rules here
17 |   rules: {
18 |     // disallow reassignment of function parameters
19 |     // disallow parameter object manipulation except for specific exclusions
20 |     'no-param-reassign': ['error', {
21 |       props: true,
22 |       ignorePropertyModificationsFor: [
23 |         'el',
24 |       ]
25 |     }],
26 |     'no-console': [
27 |       'error',
28 |       { allow: ['warn', 'error'] },
29 |     ],
30 |     // allow debugger during development
31 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
32 |     'no-underscore-dangle': [
33 |       'error',
34 |       {
35 |         allow: [
36 |           '__vueClickOutside__'
37 |         ]
38 |       }
39 |     ],
40 |   },
41 | }
42 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/01_bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 🐛 Bug report
 3 | about: Create a bug report to help us improve.
 4 | ---
 5 | 
 6 | ## Current behavior
 7 | 
 8 | A clear and concise description of what the issue is.
 9 | 
10 | ## Expected behavior
11 | 
12 | A clear and concise description of what you expected to happen.
13 | 
14 | ## Versions
15 | 
16 | **Libraries:**
17 | 
18 | - **taiger-design-system** version: [e.g. 1.0.0]
19 | - **vue** version: [e.g. 2.#.#]
20 | 
21 | **Environment:**
22 | 
23 | - Device: [e.g. Mac or iPhone X]
24 | - OS: [e.g. macOS Mojave or iOS 12]
25 | - Browser: [e.g. Chrome]
26 | - Browser Version: [e.g. 70]
27 | 
28 | ## Additional context
29 | 
30 | Add any other context about the bug here.
31 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/02_feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 🚀 Feature request
 3 | about: Suggest an idea for this project.
 4 | ---
 5 | 
 6 | ### Is your feature request related to a problem? Please describe...
 7 | 
 8 | A clear and concise description of what the problem is.
 9 | 
10 | ### Describe the solution you'd like
11 | 
12 | A clear and concise description of what you want to happen.
13 | 
14 | ### Describe alternatives you've considered
15 | 
16 | A clear and concise description of any alternative solutions or features you've considered.
17 | 
18 | ### Additional context
19 | 
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Vue Tel Input Vuetify Release CI
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - master
 6 | jobs:
 7 |   release:
 8 |     name: Release
 9 |     runs-on: ubuntu-18.04
10 |     steps:
11 |       - name: Checkout
12 |         uses: actions/checkout@v1
13 |       - name: Setup Node.js
14 |         uses: actions/setup-node@v1
15 |         with:
16 |           node-version: 12
17 |       - name: Install dependencies
18 |         run: npm ci
19 |       - name: Build
20 |         run: npm run build
21 |       - name: Release
22 |         env:
23 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
24 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
25 |         run: npx semantic-release
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | yarn-error.log
5 | .idea/
6 | 


--------------------------------------------------------------------------------
/.lintstagedrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "*.{js,vue}": [
3 |     "eslint --quiet --fix",
4 |     "git add"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.releaserc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     "@semantic-release/commit-analyzer",
 4 |     "@semantic-release/release-notes-generator",
 5 |     [
 6 |       "@semantic-release/changelog",
 7 |       {
 8 |         changelogFile: "CHANGELOG.md",
 9 |       },
10 |     ],
11 |     [
12 |       "@semantic-release/npm",
13 |       {
14 |         npmPublish: true,
15 |       },
16 |     ],
17 |     [
18 |       "@semantic-release/git",
19 |       {
20 |         assets: ["package.json", "package-lock.json", "CHANGELOG.md"],
21 |         message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
22 |       },
23 |     ],
24 |     "@semantic-release/github",
25 |   ],
26 |   branches: ["master"],
27 | }
28 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "cSpell.words": [
 3 |     "dropdown",
 4 |     "gmail",
 5 |     "iamstevendao",
 6 |     "keydown",
 7 |     "keyup",
 8 |     "maxlength",
 9 |     "mousemove",
10 |     "nbsp",
11 |     "rgba",
12 |     "tabindex",
13 |     "typeof"
14 |   ],
15 |   "editor.formatOnSave": false,
16 |   "javascript.format.enable": false,
17 |   "eslint.autoFixOnSave": true,
18 |   "eslint.alwaysShowStatus": true,
19 |   "eslint.options": {
20 |     "extensions": [
21 |       ".html",
22 |       ".js",
23 |       ".vue",
24 |       ".jsx"
25 |     ]
26 |   },
27 |   "eslint.validate": [
28 |     {
29 |       "language": "html",
30 |       "autoFix": true
31 |     },
32 |     {
33 |       "language": "vue",
34 |       "autoFix": true
35 |     },
36 |     {
37 |       "language": "javascript",
38 |       "autoFix": true
39 |     },
40 |     {
41 |       "language": "javascriptreact",
42 |       "autoFix": true
43 |     }
44 |   ],
45 |   "editor.codeActionsOnSave": {
46 |     "source.fixAll.eslint": true
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## [1.5.3](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.5.2...v1.5.3) (2022-05-02)
  2 | 
  3 | 
  4 | ### Bug Fixes
  5 | 
  6 | * **lib:** add color property ([4310614](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/431061406707c7f921dee191d457d1678e615d6d))
  7 | 
  8 | ## [1.5.2](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.5.1...v1.5.2) (2022-03-26)
  9 | 
 10 | 
 11 | ### Bug Fixes
 12 | 
 13 | * **lib:** fix [#24](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/24) ([eb2c223](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/eb2c223a5920058fde4740ec4cf4ed1e243f92a6))
 14 | 
 15 | ## [1.5.1](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.5.0...v1.5.1) (2022-03-26)
 16 | 
 17 | 
 18 | ### Bug Fixes
 19 | 
 20 | * **lib:** fix message slot in text field ([12ab5f1](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/12ab5f16cc84b651965d0c0fec4315012eba0fa0))
 21 | 
 22 | # [1.5.0](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.4.1...v1.5.0) (2022-01-06)
 23 | 
 24 | 
 25 | ### Features
 26 | 
 27 | * **lib:** apply some changes from PRs ([a0efb8a](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/a0efb8acbbc4bf0f43e20701021b5f8160712920))
 28 | 
 29 | ## [1.4.1](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.4.0...v1.4.1) (2021-09-01)
 30 | 
 31 | 
 32 | ### Bug Fixes
 33 | 
 34 | * **lib:** fix undefined variable ([8b592a7](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/8b592a79d9c5ede64d03cc3c79818527c056faa4))
 35 | 
 36 | # [1.4.0](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.3.0...v1.4.0) (2021-09-01)
 37 | 
 38 | 
 39 | ### Features
 40 | 
 41 | * **lib:** add new props ([8c4e6bc](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/8c4e6bc36e17b361fdf98b10ebfe1bc36e927ee6))
 42 | 
 43 | # [1.3.0](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.17...v1.3.0) (2021-07-08)
 44 | 
 45 | 
 46 | ### Features
 47 | 
 48 | * **lib:** adding menu-props to v-select ([66fccb3](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/66fccb3161f707d9e2a275e0e9751ccdd003931a)), closes [#50](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/50)
 49 | 
 50 | ## [1.2.17](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.16...v1.2.17) (2021-07-08)
 51 | 
 52 | 
 53 | ### Bug Fixes
 54 | 
 55 | * **lib:** remove redundant code ([e4735ea](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/e4735ea960a9a160549cf8a5f4c87ab0f682ba72))
 56 | 
 57 | ## [1.2.16](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.15...v1.2.16) (2021-02-03)
 58 | 
 59 | 
 60 | ### Bug Fixes
 61 | 
 62 | * **core:** update item-value on v-select ([a9f2b40](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/a9f2b403eeaf205049a6c69038c61cbed7534e96))
 63 | 
 64 | ## [1.2.15](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.14...v1.2.15) (2020-10-24)
 65 | 
 66 | 
 67 | ### Bug Fixes
 68 | 
 69 | * **lib:** return input event on v-model value change ([e16482b](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/e16482bfb599793a4c54e2a2d50955f6163f320e))
 70 | 
 71 | ## [1.2.14](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.13...v1.2.14) (2020-10-24)
 72 | 
 73 | 
 74 | ### Bug Fixes
 75 | 
 76 | * **lib:** add style props to the CountryCode v-select ([50c6fe3](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/50c6fe36ca1ccc5a7a6841e696e1824e0b879376))
 77 | 
 78 | ## [1.2.13](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.12...v1.2.13) (2020-08-26)
 79 | 
 80 | 
 81 | ### Bug Fixes
 82 | 
 83 | * **lib:** error when applying function "reset" of v-form ([30cdf78](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/30cdf78364526dd3ce929997d5c59dfd4f83fba6))
 84 | 
 85 | ## [1.2.12](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.11...v1.2.12) (2020-07-28)
 86 | 
 87 | 
 88 | ### Bug Fixes
 89 | 
 90 | * **component:** fix issue switching countries ([bf6e26e](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/bf6e26e36e63b88d5594ffb092b7ad5860b3e824)), closes [#22](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/22)
 91 | 
 92 | ## [1.2.11](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.10...v1.2.11) (2020-07-24)
 93 | 
 94 | 
 95 | ### Bug Fixes
 96 | 
 97 | * **component:** add dense and outlined props ([a2f43b4](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/a2f43b439697fb235893a3ab9dea842d03140673)), closes [#21](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/21)
 98 | 
 99 | ## [1.2.10](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.9...v1.2.10) (2020-07-22)
100 | 
101 | 
102 | ### Bug Fixes
103 | 
104 | * **component:** fix missing margin between flag and country ([dc1ec7b](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/dc1ec7be6d7ffde5d7f3e634d2c664e37a22c985)), closes [#18](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/18)
105 | 
106 | ## [1.2.9](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.8...v1.2.9) (2020-07-20)
107 | 
108 | 
109 | ### Bug Fixes
110 | 
111 | * **component:** prop for country selector 'label' attribute ([1aeffe9](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/1aeffe95fd87eb65b933789f3c3d516728a623d3))
112 | 
113 | ## [1.2.8](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.7...v1.2.8) (2020-07-16)
114 | 
115 | 
116 | ### Bug Fixes
117 | 
118 | * **lib:** add focus event and other important events ([bcc9b7e](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/bcc9b7ec0fd0796082fe8f2cd9d3d8a35183b7d1)), closes [#17](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/17)
119 | 
120 | ## [1.2.7](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.6...v1.2.7) (2020-07-13)
121 | 
122 | 
123 | ### Bug Fixes
124 | 
125 | * **lib:** replace js scoped css to class scoped css ([8e6ab94](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/8e6ab949b625af6112481cec9502b31dba79b5c6))
126 | 
127 | ## [1.2.6](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.5...v1.2.6) (2020-07-13)
128 | 
129 | 
130 | ### Bug Fixes
131 | 
132 | * **lib:** fix default label ([333e449](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/333e449f61920a8f128948bfc5fc63f7ce1120c7))
133 | 
134 | ## [1.2.5](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.4...v1.2.5) (2020-07-13)
135 | 
136 | 
137 | ### Bug Fixes
138 | 
139 | * **core:** add polyfill for fetch ([34f9f6a](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/34f9f6a9914b1a366e053a0a045b3d6ee6efa829))
140 | 
141 | ## [1.2.4](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.3...v1.2.4) (2020-07-13)
142 | 
143 | 
144 | ### Bug Fixes
145 | 
146 | * **lib:** export plugin instead of component ([a106fff](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/a106fff58e6f93d5b5e5ddc1503848bb1dc5111c))
147 | 
148 | ## [1.2.3](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.2...v1.2.3) (2020-07-12)
149 | 
150 | 
151 | ### Bug Fixes
152 | 
153 | * **core:** add label in plugin options ([7cfa111](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/7cfa1112dfd4dcada74de5fe1f83846f47703271)), closes [#10](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/10)
154 | 
155 | ## [1.2.2](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.1...v1.2.2) (2020-07-12)
156 | 
157 | 
158 | ### Bug Fixes
159 | 
160 | * **readme:** update readme ([c6e2a9c](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/c6e2a9cce9d7d58ea75b19a61d826f55c9f72a79))
161 | 
162 | ## [1.2.1](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.2.0...v1.2.1) (2020-07-12)
163 | 
164 | 
165 | ### Bug Fixes
166 | 
167 | * **lib:** simplify component import from lib ([83bb59e](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/83bb59e8c122607d89f345348d8f9139f32439ef))
168 | 
169 | # [1.2.0](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.10...v1.2.0) (2020-07-12)
170 | 
171 | 
172 | ### Features
173 | 
174 | * **textfield:** use v-text-field slots from the outside component ([c1a5459](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/c1a54594cf86bd8c7f3d32d269e7e9c06591c303))
175 | 
176 | ## [1.1.10](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.9...v1.1.10) (2020-07-10)
177 | 
178 | 
179 | ### Bug Fixes
180 | 
181 | * **core:** support vuetify loader ([072910f](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/072910f1f0188426f6a4bf91f45dd9653165ce2f))
182 | 
183 | ## [1.1.9](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.8...v1.1.9) (2020-07-10)
184 | 
185 | 
186 | ### Bug Fixes
187 | 
188 | * **build:** trigger build ([aece3ce](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/aece3ce6ca24bff78e915783ddd4dcadc2677c5a))
189 | 
190 | ## [1.1.8](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.7...v1.1.8) (2020-06-10)
191 | 
192 | 
193 | ### Bug Fixes
194 | 
195 | * **core:** disable country selector ([ad4d78f](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/ad4d78fc2f499506b63e3e94c8b4abf670f41552))
196 | 
197 | ## [1.1.7](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.6...v1.1.7) (2020-05-22)
198 | 
199 | 
200 | ### Bug Fixes
201 | 
202 | * **readme:** update readme ([c31f484](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/c31f4849c758e60df4f8bff03aa00bbe4904e708))
203 | 
204 | ## [1.1.6](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.5...v1.1.6) (2020-05-18)
205 | 
206 | 
207 | ### Bug Fixes
208 | 
209 | * **core:** fix installation issue ([31d6ac4](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/31d6ac41258ced930e23a9f0ed9c62c5705f4c82))
210 | 
211 | ## [1.1.5](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.4...v1.1.5) (2020-05-18)
212 | 
213 | 
214 | ### Bug Fixes
215 | 
216 | * **core:** fix can't import vuetify components ([75e4f0e](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/75e4f0ef09f6232d679605a7acb416311cd52d07))
217 | 
218 | ## [1.1.4](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.3...v1.1.4) (2020-05-18)
219 | 
220 | 
221 | ### Bug Fixes
222 | 
223 | * **core:** fix some issues ([f83b060](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/f83b060aa5d552d7e4cc845d02e1665f6fdd967f))
224 | 
225 | ## [1.1.3](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.2...v1.1.3) (2020-05-01)
226 | 
227 | 
228 | ### Bug Fixes
229 | 
230 | * **readme:** update readme ([71b456b](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/71b456b83f1cbdb52f29c27352b7ec329e7edb63))
231 | 
232 | ## [1.1.2](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.1...v1.1.2) (2020-05-01)
233 | 
234 | 
235 | ### Bug Fixes
236 | 
237 | * **textfield:** add new prop text-field-label for user custom label ([d0ccae8](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/d0ccae8bc6ff0bb02cabdedd334357bde1215df2)), closes [#1](https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/1)
238 | 
239 | ## [1.1.1](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.1.0...v1.1.1) (2020-05-01)
240 | 
241 | 
242 | ### Bug Fixes
243 | 
244 | * **vuetify:** add vuetify properly ([d495a57](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/d495a57ef26ff312ab63d0c0569f805890900d6a))
245 | 
246 | # [1.1.0](https://github.com/yogakurniawan/vue-tel-input-vuetify/compare/v1.0.0...v1.1.0) (2020-02-11)
247 | 
248 | 
249 | ### Features
250 | 
251 | * release first version ([57949ff](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/57949ffea4cf6d1ac83a1e6c7fab814f55ac2d06))
252 | 
253 | # 1.0.0 (2020-02-11)
254 | 
255 | 
256 | ### Features
257 | 
258 | * release first version ([900f2da](https://github.com/yogakurniawan/vue-tel-input-vuetify/commit/900f2da3fbf230b7d536a869ab053f3cbc52a56d))
259 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 EducationLink
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-tel-input-vuetify
  2 | International Telephone Input with Vuetify.
  3 | 
  4 | <p align="center">
  5 | <img width="600px" alt="International Telephone Input with Vuetify." src="https://media.giphy.com/media/eNe0TdR03G7MMNkFab/giphy.gif"/>
  6 | </p>
  7 | 
  8 | 
  9 | **Table of Contents**
 10 | 
 11 | - [Getting started](#getting-started)
 12 | - [Installation](#installation)
 13 |   - [vue-cli](#vue-cli)
 14 |   - [vuetify](#vuetify)
 15 |   - [npm](#npm)
 16 | - [Usage](#usage)
 17 |   - [Props](#props)
 18 |   - [Events](#events)
 19 | - [Credits & Contributors](#Credits-&-Contributors)
 20 | 
 21 | ## Installation
 22 | 
 23 | ### Example Repository
 24 | 
 25 | You might want to follow and use the basic example usage of this library in this repository [Example](https://github.com/yogakurniawan/vue-tel-input-vuetify-example)
 26 | 
 27 | OR try from scratch with below steps
 28 | 
 29 | ### vue-cli
 30 | - create new vue project using `vue-cli`:
 31 | 
 32 | ```bash
 33 |   vue create my-app
 34 |   cd my-app
 35 | ```
 36 | 
 37 | ### vuetify
 38 | - install `vuetify` to newly created vue project
 39 | 
 40 | ```bash
 41 |   vue add vuetify
 42 | ```
 43 | 
 44 | ### npm
 45 | - install `vue-tel-input-vuetify` to newly created vue project
 46 | 
 47 | ```bash
 48 |   npm install vue-tel-input-vuetify
 49 | ```
 50 | 
 51 | Install the plugin into Vue:
 52 | 
 53 | With vuetify loader:
 54 | 
 55 | ```javascript
 56 |   // vue.config.js
 57 | 
 58 |   "transpileDependencies": [
 59 |     "vuetify",
 60 |     "vue-tel-input-vuetify"
 61 |   ]
 62 | ```
 63 | 
 64 | ```javascript
 65 |   // src/plugins/vuetify.js
 66 | 
 67 |   import Vue from 'vue';
 68 |   import Vuetify from 'vuetify/lib';
 69 | 
 70 |   Vue.use(Vuetify);
 71 | 
 72 |   export default new Vuetify({
 73 |   });
 74 | 
 75 | ```
 76 | 
 77 | ```javascript
 78 | // src/main.js
 79 | 
 80 | import Vue from 'vue';
 81 | import vuetify from "@/plugins/vuetify";
 82 | import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';
 83 | 
 84 | Vue.use(VueTelInputVuetify, {
 85 |   vuetify,
 86 | });
 87 | 
 88 | new Vue({
 89 |   vuetify,
 90 |   render: (h) => h(App),
 91 | }).$mount("#app");
 92 | 
 93 | ```
 94 | 
 95 | Without vuetify loader:
 96 | 
 97 | ```javascript
 98 |   // vue.config.js
 99 | 
100 |   "transpileDependencies": [
101 |     "vuetify",
102 |     "vue-tel-input-vuetify"
103 |   ]
104 | ```
105 | 
106 | ```javascript
107 |   // src/plugins/vuetify.js
108 | 
109 |   import Vue from 'vue';
110 |   import Vuetify from 'vuetify';
111 |   import 'vuetify/dist/vuetify.min.css'
112 | 
113 |   Vue.use(Vuetify);
114 | 
115 |   export default new Vuetify({
116 |   });
117 | 
118 | ```
119 | 
120 | ```javascript
121 | // src/main.js
122 | 
123 | import Vue from 'vue';
124 | import VueTelInputVuetify from "vue-tel-input-vuetify";
125 | import vuetify from "./plugins/vuetify";
126 | 
127 | Vue.use(VueTelInputVuetify, {
128 |   vuetify,
129 | });
130 | 
131 | new Vue({
132 |   vuetify,
133 |   render: (h) => h(App),
134 | }).$mount("#app");
135 | 
136 | ```
137 | 
138 | > View all available options in [Props](#props).
139 | 
140 | Use the `vue-tel-input-vuetify` component:
141 | 
142 |   ```html
143 |   <template>
144 |     <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
145 |   </template>
146 | 
147 |   <script>
148 |   export default {
149 |     data() {
150 |       return {
151 |         phone: null
152 |       }
153 |     }
154 |   };
155 |   </script>
156 |   ```
157 | 
158 | ## Usage
159 | 
160 | ### Props
161 | 
162 |   | Property | Type | Default value | Description |
163 |   | -------- | ---- | ------------- | ----------- |
164 |   | `messages` | `String` &#124; `Array` | `[]` | Displays a list of messages or message if using a string |
165 |   | `success-messages` | `String` &#124; `Array` | `[]` | Puts the input in a success state and passes through custom success messages. |
166 |   | `error-messages` | `String` &#124; `Array` | `[]` | Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation |
167 |   | `hint` | `String` | `undefined` | Hint text |
168 |   | `suffix` | `String` | `undefined` | Displays suffix text |
169 |   | `prefix` | `String` | `undefined` | Displays prefix text |
170 |   | `background-color` | `String` | `undefined` | Changes the background-color of the input |
171 |   | `rules` | `String` | `Array` | Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message |
172 |   | `loader-height` | `Number` &#124; `String` | `2` | Specifies the height of the loader |
173 |   | `loading` | `String` &#124; `Boolean` | `false` | Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color |
174 |   | `hide-details` | `String` &#124; `Boolean` | `undefined` | Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display |
175 |   | `clearable` | `Boolean` | `false` | Add input clear functionality, default icon is Material Icons clear |
176 |   | `filled` | `Boolean` | `false` | Applies the alternate filled input style |
177 |   | `full-width` | `Boolean` | `false` | Designates input type as full-width |
178 |   | `flat` | `Boolean` | `false` | Removes elevation (shadow) added to element when using the solo or solo-inverted props |
179 |   | `light` | `Boolean` | `false` | Applies the light theme variant to the component. |
180 |   | `validate-on-blur` | `Boolean` | `false` | Delays validation until blur event |
181 |   | `dense` | `Boolean` | `false` | Reduces the input height |
182 |   | `outlined` | `Boolean` | `false` | Applies the outlined style to the input |
183 |   | `persistent-hint` | `Boolean` | `false` | Forces hint to always be visible |
184 |   | `readonly` | `Boolean` | `false` | Puts input in readonly state |
185 |   | `error` | `Boolean` | `false` | Puts the input in a manual error state |
186 |   | `success` | `Boolean` | `false` | Puts the input in a manual success state |
187 |   | `shaped` | `Boolean` | `false` | Round if outlined and increase border-radius if filled. Must be used with either outlined or filled |
188 |   | `single-line` | `Boolean` | `false` | Label does not move on focus/dirty |
189 |   | `rounded` | `Boolean` | `false` | Adds a border radius to the input |
190 |   | `value` | `any` | `''` | The input's value |
191 |   | `label` | `String` | `'Enter a Phone Number'` | Native input 'label' attribute |
192 |   | `selectLabel` | `String` | `''` | Country selector 'label' attribute |
193 |   | `autocomplete` | `String` | `'on'` | Native input 'autocomplete' attribute |
194 |   | `autofocus` | `Boolean` | `false` | Native input 'autofocus' attribute |
195 |   | `defaultCountry` | `String` | `''` | Default country, will override the country fetched from IP address of user |
196 |   | `disabled` | `Boolean` | `false` | Disable input field |
197 |   | `disabledFetchingCountry` | `Boolean` | `false` | Disable fetching current country based on IP address of user |
198 |   | `ignoredCountries` | `Array` | `[]` | List of countries will NOT be shown on the dropdown. ie `['AU', 'BR']` |
199 |   | `inputId` | `String` | `''` | Custom 'id' for the `input` |
200 |   | `inputOptions` | `Object` | `{ showDialCode: false, tabindex: 0 }` | Options for input, supporting `showDialCode` (always show dial code in the input) and `tabindex`|
201 |   | `maxLen` | `Number` | `25` | Native input 'maxlength' attribute |
202 |   | `mode` | `String` | `''` | Format number to `'international'` (with + dial code) or `'national'` (with 0...) |
203 |   | `name` | `String` | `'telephone'` | Native input 'name' attribute |
204 |   | `onlyCountries` | `Array` | `[]` | List of countries will be shown on the dropdown. ie `['AU', 'BR']` |
205 |   | `placeholder` | `String` | `'Enter a phone number'` | Placeholder for the input |
206 |   | `preferredCountries` | `Array` | `[]` | Preferred countries list, will be on top of the dropdown. ie `['AU', 'BR']` |
207 |   | `required` | `Boolean` | `false` | Required property for HTML5 required attribute |
208 |   | `wrapperClasses` | `String` &#124; `Array` &#124; `Object` | `''` | Custom classes for the wrapper |
209 | 
210 | ### Events
211 | 
212 |   | Event | Arguments | Description | Notes |
213 |   | ----- | --------- | ----------- | ----- |
214 |   | `input` | `String`, `Object` | Fires when the input changes with the argument is the object includes `{ number, isValid, country }` | `onInput` deprecated |
215 |   | `validate` | `Object` | Fires when the correctness of the phone number changes (from `true` to `false` or vice-versa) and when the component is mounted `{ number, isValid, country }` | `onValidate` deprecated |
216 |   | `blur` |  | Fires on blur event | `onBlur` deprecated |
217 |   | `change` |  | Emitted when the input is changed by user interaction |
218 |   | `click` |  | Emitted when input is clicked |
219 |   | `focus` |  | Emitted when component is focused |
220 |   | `keydown` |  | Emitted when any key is pressed |
221 |   | `mousedown` |  | Emitted when click is pressed |
222 |   | `mouseup` |  | Emitted when click is released |
223 |   | `blur` |  | Fires on blur event | `onBlur` deprecated |
224 |   | `space` |  | Fires on keyup.space event | `onSpace` deprecated |
225 |   | `enter` |  | Fires on keyup.enter event | `onEnter` deprecated |
226 |   | `open` |  | Fires when the flags dropdown opens | |
227 |   | `close` |  | Fires when the flags dropdown closes | |
228 |   | `country-changed` | `Object` | Fires when country changed (even for the first time) |
229 | 
230 | ## Credits & Contributors
231 | 
232 | **Credits**
233 | - Telephone Number parsing, validation by [awesome-phonenumber](https://www.npmjs.com/package/awesome-phonenumber).
234 | - Country Codes data from [intl-tel-input](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/data.js).
235 | - User's country by [ip2c.org](https://ip2c.org/s), request using [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
236 | 
237 | made with &#x2764; by [Yoga](https://github.com/yogakurniawan).
238 | 


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


--------------------------------------------------------------------------------
/build/rollup.config.base.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import copy from 'rollup-plugin-copy';
 3 | import resolve from 'rollup-plugin-node-resolve';
 4 | import vue from 'rollup-plugin-vue';
 5 | import cjs from 'rollup-plugin-commonjs';
 6 | import replace from 'rollup-plugin-replace';
 7 | import postcss from 'rollup-plugin-postcss';
 8 | import analyze from 'rollup-plugin-analyzer';
 9 | 
10 | const config = require('../package.json');
11 | 
12 | export default {
13 |   input: 'src/lib/plugin.js',
14 |   plugins: [
15 |     resolve({
16 |       mainFields: ['module', 'jsnext:main', 'main', 'browser'],
17 |     }),
18 |     vue({
19 |       css: true,
20 |     }),
21 |     babel({
22 |       exclude: 'node_modules/**',
23 |       runtimeHelpers: true,
24 |       extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
25 |     }),
26 |     cjs(),
27 |     replace({
28 |       VERSION: JSON.stringify(config.version),
29 |     }),
30 |     postcss(),
31 |     analyze(),
32 |     copy({
33 |       targets: [
34 |         {
35 |           src: 'src/lib/**/*',
36 |           dest: 'lib'
37 |         },
38 |       ]
39 |     }),
40 |   ],
41 |   watch: {
42 |     include: 'src/**',
43 |   },
44 | };
45 | 


--------------------------------------------------------------------------------
/build/rollup.config.browser.js:
--------------------------------------------------------------------------------
 1 | import { terser } from 'rollup-plugin-terser';
 2 | import base from './rollup.config.base';
 3 | 
 4 | const config = Object.assign({}, base, {
 5 |   output: {
 6 |     exports: 'named',
 7 |     name: 'VueTelInputVuetify',
 8 |     file: 'dist/vue-tel-input-vuetify.min.js',
 9 |     format: 'iife',
10 |   },
11 | });
12 | 
13 | config.plugins.push(terser());
14 | 
15 | export default config;
16 | 


--------------------------------------------------------------------------------
/build/rollup.config.es.js:
--------------------------------------------------------------------------------
 1 | import base from './rollup.config.base';
 2 | 
 3 | const config = Object.assign({}, base, {
 4 |   output: {
 5 |     name: 'vue-tel-input-vuetify',
 6 |     file: 'dist/vue-tel-input-vuetify.esm.js',
 7 |     format: 'es',
 8 |   },
 9 |   external: [
10 |     'libphonenumber-js',
11 |   ],
12 | });
13 | 
14 | export default config;
15 | 


--------------------------------------------------------------------------------
/build/rollup.config.umd.js:
--------------------------------------------------------------------------------
 1 | import base from './rollup.config.base';
 2 | 
 3 | const config = Object.assign({}, base, {
 4 |   output: {
 5 |     exports: 'named',
 6 |     name: 'vue-tel-input-vuetify',
 7 |     file: 'dist/vue-tel-input-vuetify.umd.js',
 8 |     format: 'umd',
 9 |   },
10 | });
11 | 
12 | export default config;
13 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | 
 3 | jobs:
 4 |   build:
 5 |     docker:
 6 |       - image: cypress/base:8
 7 | 
 8 |     branches:
 9 |       ignore:
10 |         - gh-pages
11 | 
12 |     steps:
13 |       - checkout
14 | 
15 |       - restore_cache:
16 |           keys:
17 |           - v1-dependencies-{{ checksum "package.json" }}-{{ checksum "circle.yml" }}
18 | 
19 |       - run:
20 |           name: Installing dependencies
21 |           command: npm install
22 | 
23 |       - save_cache:
24 |           paths:
25 |             - node_modules
26 |             - ~/.cache
27 |           key: v1-dependencies-{{ checksum "package.json" }}-{{ checksum "circle.yml" }}
28 | 
29 |       - run:
30 |           name: Build demo
31 |           command: sh demo.sh
32 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = { extends: ["@commitlint/config-conventional"] }
2 | 


--------------------------------------------------------------------------------
/demo.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # abort on errors
 4 | set -e
 5 | 
 6 | # build
 7 | npm run demo
 8 | 
 9 | # navigate into the build output directory
10 | cd docs
11 | 
12 | git init
13 | git add -A
14 | git commit -m "Deploy"
15 | 
16 | git push -f git@github.com:yogakurniawan/vue-tel-input-vuetify.git master:gh-pages
17 | 
18 | cd -
19 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "moduleFileExtensions": [
 3 |     "js",
 4 |     "jsx",
 5 |     "json",
 6 |     "vue"
 7 |   ],
 8 |   "transform": {
 9 |     "^.+\\.vue$": "vue-jest",
10 |     ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
11 |     "^.+\\.jsx?$": "babel-jest"
12 |   },
13 |   "transformIgnorePatterns": [
14 |     "/node_modules/"
15 |   ],
16 |   "moduleNameMapper": {
17 |     "^@/(.*)$": "<rootDir>/src/$1"
18 |   },
19 |   "snapshotSerializers": [
20 |     "jest-serializer-vue"
21 |   ],
22 |   // "testMatch": [
23 |   //   "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
24 |   // ],
25 |   "testURL": "http://localhost/",
26 |   "watchPlugins": [
27 |     "jest-watch-typeahead/filename",
28 |     "jest-watch-typeahead/testname"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/lib/all-countries.js:
--------------------------------------------------------------------------------
   1 | // Array of country objects for the flag dropdown.
   2 | 
   3 | // Here is the criteria for the plugin to support a given country/territory
   4 | // - It has an iso2 code: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
   5 | // - It has it's own country calling code (it is not a sub-region of another country): https://en.wikipedia.org/wiki/List_of_country_calling_codes
   6 | // - It has a flag in the region-flags project: https://github.com/behdad/region-flags/tree/gh-pages/png
   7 | // - It is supported by libphonenumber (it must be listed on this page): https://github.com/googlei18n/libphonenumber/blob/master/resources/ShortNumberMetadata.xml
   8 | 
   9 | // Each country array has the following information:
  10 | // [
  11 | //    Country name,
  12 | //    iso2 code,
  13 | //    International dial code,
  14 | //    Order (if >1 country with same dial code),
  15 | //    Area codes
  16 | // ]
  17 | const allCountries = [
  18 |   [
  19 |     'Afghanistan (‫افغانستان‬‎)',
  20 |     'af',
  21 |     '93',
  22 |   ],
  23 |   [
  24 |     'Albania (Shqipëri)',
  25 |     'al',
  26 |     '355',
  27 |   ],
  28 |   [
  29 |     'Algeria (‫الجزائر‬‎)',
  30 |     'dz',
  31 |     '213',
  32 |   ],
  33 |   [
  34 |     'American Samoa',
  35 |     'as',
  36 |     '1684',
  37 |   ],
  38 |   [
  39 |     'Andorra',
  40 |     'ad',
  41 |     '376',
  42 |   ],
  43 |   [
  44 |     'Angola',
  45 |     'ao',
  46 |     '244',
  47 |   ],
  48 |   [
  49 |     'Anguilla',
  50 |     'ai',
  51 |     '1264',
  52 |   ],
  53 |   [
  54 |     'Antigua and Barbuda',
  55 |     'ag',
  56 |     '1268',
  57 |   ],
  58 |   [
  59 |     'Argentina',
  60 |     'ar',
  61 |     '54',
  62 |   ],
  63 |   [
  64 |     'Armenia (Հայաստան)',
  65 |     'am',
  66 |     '374',
  67 |   ],
  68 |   [
  69 |     'Aruba',
  70 |     'aw',
  71 |     '297',
  72 |   ],
  73 |   [
  74 |     'Australia',
  75 |     'au',
  76 |     '61',
  77 |     0,
  78 |   ],
  79 |   [
  80 |     'Austria (Österreich)',
  81 |     'at',
  82 |     '43',
  83 |   ],
  84 |   [
  85 |     'Azerbaijan (Azərbaycan)',
  86 |     'az',
  87 |     '994',
  88 |   ],
  89 |   [
  90 |     'Bahamas',
  91 |     'bs',
  92 |     '1242',
  93 |   ],
  94 |   [
  95 |     'Bahrain (‫البحرين‬‎)',
  96 |     'bh',
  97 |     '973',
  98 |   ],
  99 |   [
 100 |     'Bangladesh (বাংলাদেশ)',
 101 |     'bd',
 102 |     '880',
 103 |   ],
 104 |   [
 105 |     'Barbados',
 106 |     'bb',
 107 |     '1246',
 108 |   ],
 109 |   [
 110 |     'Belarus (Беларусь)',
 111 |     'by',
 112 |     '375',
 113 |   ],
 114 |   [
 115 |     'Belgium (België)',
 116 |     'be',
 117 |     '32',
 118 |   ],
 119 |   [
 120 |     'Belize',
 121 |     'bz',
 122 |     '501',
 123 |   ],
 124 |   [
 125 |     'Benin (Bénin)',
 126 |     'bj',
 127 |     '229',
 128 |   ],
 129 |   [
 130 |     'Bermuda',
 131 |     'bm',
 132 |     '1441',
 133 |   ],
 134 |   [
 135 |     'Bhutan (འབྲུག)',
 136 |     'bt',
 137 |     '975',
 138 |   ],
 139 |   [
 140 |     'Bolivia',
 141 |     'bo',
 142 |     '591',
 143 |   ],
 144 |   [
 145 |     'Bosnia and Herzegovina (Босна и Херцеговина)',
 146 |     'ba',
 147 |     '387',
 148 |   ],
 149 |   [
 150 |     'Botswana',
 151 |     'bw',
 152 |     '267',
 153 |   ],
 154 |   [
 155 |     'Brazil (Brasil)',
 156 |     'br',
 157 |     '55',
 158 |   ],
 159 |   [
 160 |     'British Indian Ocean Territory',
 161 |     'io',
 162 |     '246',
 163 |   ],
 164 |   [
 165 |     'British Virgin Islands',
 166 |     'vg',
 167 |     '1284',
 168 |   ],
 169 |   [
 170 |     'Brunei',
 171 |     'bn',
 172 |     '673',
 173 |   ],
 174 |   [
 175 |     'Bulgaria (България)',
 176 |     'bg',
 177 |     '359',
 178 |   ],
 179 |   [
 180 |     'Burkina Faso',
 181 |     'bf',
 182 |     '226',
 183 |   ],
 184 |   [
 185 |     'Burundi (Uburundi)',
 186 |     'bi',
 187 |     '257',
 188 |   ],
 189 |   [
 190 |     'Cambodia (កម្ពុជា)',
 191 |     'kh',
 192 |     '855',
 193 |   ],
 194 |   [
 195 |     'Cameroon (Cameroun)',
 196 |     'cm',
 197 |     '237',
 198 |   ],
 199 |   [
 200 |     'Canada',
 201 |     'ca',
 202 |     '1',
 203 |     1,
 204 |     ['204', '226', '236', '249', '250', '289', '306', '343', '365', '387', '403', '416', '418', '431', '437', '438', '450', '506', '514', '519', '548', '579', '581', '587', '604', '613', '639', '647', '672', '705', '709', '742', '778', '780', '782', '807', '819', '825', '867', '873', '902', '905'],
 205 |   ],
 206 |   [
 207 |     'Cape Verde (Kabu Verdi)',
 208 |     'cv',
 209 |     '238',
 210 |   ],
 211 |   [
 212 |     'Caribbean Netherlands',
 213 |     'bq',
 214 |     '599',
 215 |     1,
 216 |   ],
 217 |   [
 218 |     'Cayman Islands',
 219 |     'ky',
 220 |     '1345',
 221 |   ],
 222 |   [
 223 |     'Central African Republic (République centrafricaine)',
 224 |     'cf',
 225 |     '236',
 226 |   ],
 227 |   [
 228 |     'Chad (Tchad)',
 229 |     'td',
 230 |     '235',
 231 |   ],
 232 |   [
 233 |     'Chile',
 234 |     'cl',
 235 |     '56',
 236 |   ],
 237 |   [
 238 |     'China (中国)',
 239 |     'cn',
 240 |     '86',
 241 |   ],
 242 |   [
 243 |     'Christmas Island',
 244 |     'cx',
 245 |     '61',
 246 |     2,
 247 |   ],
 248 |   [
 249 |     'Cocos (Keeling) Islands',
 250 |     'cc',
 251 |     '61',
 252 |     1,
 253 |   ],
 254 |   [
 255 |     'Colombia',
 256 |     'co',
 257 |     '57',
 258 |   ],
 259 |   [
 260 |     'Comoros (‫جزر القمر‬‎)',
 261 |     'km',
 262 |     '269',
 263 |   ],
 264 |   [
 265 |     'Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)',
 266 |     'cd',
 267 |     '243',
 268 |   ],
 269 |   [
 270 |     'Congo (Republic) (Congo-Brazzaville)',
 271 |     'cg',
 272 |     '242',
 273 |   ],
 274 |   [
 275 |     'Cook Islands',
 276 |     'ck',
 277 |     '682',
 278 |   ],
 279 |   [
 280 |     'Costa Rica',
 281 |     'cr',
 282 |     '506',
 283 |   ],
 284 |   [
 285 |     'Côte d’Ivoire',
 286 |     'ci',
 287 |     '225',
 288 |   ],
 289 |   [
 290 |     'Croatia (Hrvatska)',
 291 |     'hr',
 292 |     '385',
 293 |   ],
 294 |   [
 295 |     'Cuba',
 296 |     'cu',
 297 |     '53',
 298 |   ],
 299 |   [
 300 |     'Curaçao',
 301 |     'cw',
 302 |     '599',
 303 |     0,
 304 |   ],
 305 |   [
 306 |     'Cyprus (Κύπρος)',
 307 |     'cy',
 308 |     '357',
 309 |   ],
 310 |   [
 311 |     'Czech Republic (Česká republika)',
 312 |     'cz',
 313 |     '420',
 314 |   ],
 315 |   [
 316 |     'Denmark (Danmark)',
 317 |     'dk',
 318 |     '45',
 319 |   ],
 320 |   [
 321 |     'Djibouti',
 322 |     'dj',
 323 |     '253',
 324 |   ],
 325 |   [
 326 |     'Dominica',
 327 |     'dm',
 328 |     '1767',
 329 |   ],
 330 |   [
 331 |     'Dominican Republic (República Dominicana)',
 332 |     'do',
 333 |     '1',
 334 |     2,
 335 |     ['809', '829', '849'],
 336 |   ],
 337 |   [
 338 |     'Ecuador',
 339 |     'ec',
 340 |     '593',
 341 |   ],
 342 |   [
 343 |     'Egypt (‫مصر‬‎)',
 344 |     'eg',
 345 |     '20',
 346 |   ],
 347 |   [
 348 |     'El Salvador',
 349 |     'sv',
 350 |     '503',
 351 |   ],
 352 |   [
 353 |     'Equatorial Guinea (Guinea Ecuatorial)',
 354 |     'gq',
 355 |     '240',
 356 |   ],
 357 |   [
 358 |     'Eritrea',
 359 |     'er',
 360 |     '291',
 361 |   ],
 362 |   [
 363 |     'Estonia (Eesti)',
 364 |     'ee',
 365 |     '372',
 366 |   ],
 367 |   [
 368 |     'Ethiopia',
 369 |     'et',
 370 |     '251',
 371 |   ],
 372 |   [
 373 |     'Falkland Islands (Islas Malvinas)',
 374 |     'fk',
 375 |     '500',
 376 |   ],
 377 |   [
 378 |     'Faroe Islands (Føroyar)',
 379 |     'fo',
 380 |     '298',
 381 |   ],
 382 |   [
 383 |     'Fiji',
 384 |     'fj',
 385 |     '679',
 386 |   ],
 387 |   [
 388 |     'Finland (Suomi)',
 389 |     'fi',
 390 |     '358',
 391 |     0,
 392 |   ],
 393 |   [
 394 |     'France',
 395 |     'fr',
 396 |     '33',
 397 |   ],
 398 |   [
 399 |     'French Guiana (Guyane française)',
 400 |     'gf',
 401 |     '594',
 402 |   ],
 403 |   [
 404 |     'French Polynesia (Polynésie française)',
 405 |     'pf',
 406 |     '689',
 407 |   ],
 408 |   [
 409 |     'Gabon',
 410 |     'ga',
 411 |     '241',
 412 |   ],
 413 |   [
 414 |     'Gambia',
 415 |     'gm',
 416 |     '220',
 417 |   ],
 418 |   [
 419 |     'Georgia (საქართველო)',
 420 |     'ge',
 421 |     '995',
 422 |   ],
 423 |   [
 424 |     'Germany (Deutschland)',
 425 |     'de',
 426 |     '49',
 427 |   ],
 428 |   [
 429 |     'Ghana (Gaana)',
 430 |     'gh',
 431 |     '233',
 432 |   ],
 433 |   [
 434 |     'Gibraltar',
 435 |     'gi',
 436 |     '350',
 437 |   ],
 438 |   [
 439 |     'Greece (Ελλάδα)',
 440 |     'gr',
 441 |     '30',
 442 |   ],
 443 |   [
 444 |     'Greenland (Kalaallit Nunaat)',
 445 |     'gl',
 446 |     '299',
 447 |   ],
 448 |   [
 449 |     'Grenada',
 450 |     'gd',
 451 |     '1473',
 452 |   ],
 453 |   [
 454 |     'Guadeloupe',
 455 |     'gp',
 456 |     '590',
 457 |     0,
 458 |   ],
 459 |   [
 460 |     'Guam',
 461 |     'gu',
 462 |     '1671',
 463 |   ],
 464 |   [
 465 |     'Guatemala',
 466 |     'gt',
 467 |     '502',
 468 |   ],
 469 |   [
 470 |     'Guernsey',
 471 |     'gg',
 472 |     '44',
 473 |     1,
 474 |   ],
 475 |   [
 476 |     'Guinea (Guinée)',
 477 |     'gn',
 478 |     '224',
 479 |   ],
 480 |   [
 481 |     'Guinea-Bissau (Guiné Bissau)',
 482 |     'gw',
 483 |     '245',
 484 |   ],
 485 |   [
 486 |     'Guyana',
 487 |     'gy',
 488 |     '592',
 489 |   ],
 490 |   [
 491 |     'Haiti',
 492 |     'ht',
 493 |     '509',
 494 |   ],
 495 |   [
 496 |     'Honduras',
 497 |     'hn',
 498 |     '504',
 499 |   ],
 500 |   [
 501 |     'Hong Kong (香港)',
 502 |     'hk',
 503 |     '852',
 504 |   ],
 505 |   [
 506 |     'Hungary (Magyarország)',
 507 |     'hu',
 508 |     '36',
 509 |   ],
 510 |   [
 511 |     'Iceland (Ísland)',
 512 |     'is',
 513 |     '354',
 514 |   ],
 515 |   [
 516 |     'India (भारत)',
 517 |     'in',
 518 |     '91',
 519 |   ],
 520 |   [
 521 |     'Indonesia',
 522 |     'id',
 523 |     '62',
 524 |   ],
 525 |   [
 526 |     'Iran (‫ایران‬‎)',
 527 |     'ir',
 528 |     '98',
 529 |   ],
 530 |   [
 531 |     'Iraq (‫العراق‬‎)',
 532 |     'iq',
 533 |     '964',
 534 |   ],
 535 |   [
 536 |     'Ireland',
 537 |     'ie',
 538 |     '353',
 539 |   ],
 540 |   [
 541 |     'Isle of Man',
 542 |     'im',
 543 |     '44',
 544 |     2,
 545 |   ],
 546 |   [
 547 |     'Israel (‫ישראל‬‎)',
 548 |     'il',
 549 |     '972',
 550 |   ],
 551 |   [
 552 |     'Italy (Italia)',
 553 |     'it',
 554 |     '39',
 555 |     0,
 556 |   ],
 557 |   [
 558 |     'Jamaica',
 559 |     'jm',
 560 |     '1876',
 561 |   ],
 562 |   [
 563 |     'Japan (日本)',
 564 |     'jp',
 565 |     '81',
 566 |   ],
 567 |   [
 568 |     'Jersey',
 569 |     'je',
 570 |     '44',
 571 |     3,
 572 |   ],
 573 |   [
 574 |     'Jordan (‫الأردن‬‎)',
 575 |     'jo',
 576 |     '962',
 577 |   ],
 578 |   [
 579 |     'Kazakhstan (Казахстан)',
 580 |     'kz',
 581 |     '7',
 582 |     1,
 583 |   ],
 584 |   [
 585 |     'Kenya',
 586 |     'ke',
 587 |     '254',
 588 |   ],
 589 |   [
 590 |     'Kiribati',
 591 |     'ki',
 592 |     '686',
 593 |   ],
 594 |   [
 595 |     'Kosovo',
 596 |     'xk',
 597 |     '383',
 598 |   ],
 599 |   [
 600 |     'Kuwait (‫الكويت‬‎)',
 601 |     'kw',
 602 |     '965',
 603 |   ],
 604 |   [
 605 |     'Kyrgyzstan (Кыргызстан)',
 606 |     'kg',
 607 |     '996',
 608 |   ],
 609 |   [
 610 |     'Laos (ລາວ)',
 611 |     'la',
 612 |     '856',
 613 |   ],
 614 |   [
 615 |     'Latvia (Latvija)',
 616 |     'lv',
 617 |     '371',
 618 |   ],
 619 |   [
 620 |     'Lebanon (‫لبنان‬‎)',
 621 |     'lb',
 622 |     '961',
 623 |   ],
 624 |   [
 625 |     'Lesotho',
 626 |     'ls',
 627 |     '266',
 628 |   ],
 629 |   [
 630 |     'Liberia',
 631 |     'lr',
 632 |     '231',
 633 |   ],
 634 |   [
 635 |     'Libya (‫ليبيا‬‎)',
 636 |     'ly',
 637 |     '218',
 638 |   ],
 639 |   [
 640 |     'Liechtenstein',
 641 |     'li',
 642 |     '423',
 643 |   ],
 644 |   [
 645 |     'Lithuania (Lietuva)',
 646 |     'lt',
 647 |     '370',
 648 |   ],
 649 |   [
 650 |     'Luxembourg',
 651 |     'lu',
 652 |     '352',
 653 |   ],
 654 |   [
 655 |     'Macau (澳門)',
 656 |     'mo',
 657 |     '853',
 658 |   ],
 659 |   [
 660 |     'Macedonia (FYROM) (Македонија)',
 661 |     'mk',
 662 |     '389',
 663 |   ],
 664 |   [
 665 |     'Madagascar (Madagasikara)',
 666 |     'mg',
 667 |     '261',
 668 |   ],
 669 |   [
 670 |     'Malawi',
 671 |     'mw',
 672 |     '265',
 673 |   ],
 674 |   [
 675 |     'Malaysia',
 676 |     'my',
 677 |     '60',
 678 |   ],
 679 |   [
 680 |     'Maldives',
 681 |     'mv',
 682 |     '960',
 683 |   ],
 684 |   [
 685 |     'Mali',
 686 |     'ml',
 687 |     '223',
 688 |   ],
 689 |   [
 690 |     'Malta',
 691 |     'mt',
 692 |     '356',
 693 |   ],
 694 |   [
 695 |     'Marshall Islands',
 696 |     'mh',
 697 |     '692',
 698 |   ],
 699 |   [
 700 |     'Martinique',
 701 |     'mq',
 702 |     '596',
 703 |   ],
 704 |   [
 705 |     'Mauritania (‫موريتانيا‬‎)',
 706 |     'mr',
 707 |     '222',
 708 |   ],
 709 |   [
 710 |     'Mauritius (Moris)',
 711 |     'mu',
 712 |     '230',
 713 |   ],
 714 |   [
 715 |     'Mayotte',
 716 |     'yt',
 717 |     '262',
 718 |     1,
 719 |   ],
 720 |   [
 721 |     'Mexico (México)',
 722 |     'mx',
 723 |     '52',
 724 |   ],
 725 |   [
 726 |     'Micronesia',
 727 |     'fm',
 728 |     '691',
 729 |   ],
 730 |   [
 731 |     'Moldova (Republica Moldova)',
 732 |     'md',
 733 |     '373',
 734 |   ],
 735 |   [
 736 |     'Monaco',
 737 |     'mc',
 738 |     '377',
 739 |   ],
 740 |   [
 741 |     'Mongolia (Монгол)',
 742 |     'mn',
 743 |     '976',
 744 |   ],
 745 |   [
 746 |     'Montenegro (Crna Gora)',
 747 |     'me',
 748 |     '382',
 749 |   ],
 750 |   [
 751 |     'Montserrat',
 752 |     'ms',
 753 |     '1664',
 754 |   ],
 755 |   [
 756 |     'Morocco (‫المغرب‬‎)',
 757 |     'ma',
 758 |     '212',
 759 |     0,
 760 |   ],
 761 |   [
 762 |     'Mozambique (Moçambique)',
 763 |     'mz',
 764 |     '258',
 765 |   ],
 766 |   [
 767 |     'Myanmar (Burma) (မြန်မာ)',
 768 |     'mm',
 769 |     '95',
 770 |   ],
 771 |   [
 772 |     'Namibia (Namibië)',
 773 |     'na',
 774 |     '264',
 775 |   ],
 776 |   [
 777 |     'Nauru',
 778 |     'nr',
 779 |     '674',
 780 |   ],
 781 |   [
 782 |     'Nepal (नेपाल)',
 783 |     'np',
 784 |     '977',
 785 |   ],
 786 |   [
 787 |     'Netherlands (Nederland)',
 788 |     'nl',
 789 |     '31',
 790 |   ],
 791 |   [
 792 |     'New Caledonia (Nouvelle-Calédonie)',
 793 |     'nc',
 794 |     '687',
 795 |   ],
 796 |   [
 797 |     'New Zealand',
 798 |     'nz',
 799 |     '64',
 800 |   ],
 801 |   [
 802 |     'Nicaragua',
 803 |     'ni',
 804 |     '505',
 805 |   ],
 806 |   [
 807 |     'Niger (Nijar)',
 808 |     'ne',
 809 |     '227',
 810 |   ],
 811 |   [
 812 |     'Nigeria',
 813 |     'ng',
 814 |     '234',
 815 |   ],
 816 |   [
 817 |     'Niue',
 818 |     'nu',
 819 |     '683',
 820 |   ],
 821 |   [
 822 |     'Norfolk Island',
 823 |     'nf',
 824 |     '672',
 825 |   ],
 826 |   [
 827 |     'North Korea (조선 민주주의 인민 공화국)',
 828 |     'kp',
 829 |     '850',
 830 |   ],
 831 |   [
 832 |     'Northern Mariana Islands',
 833 |     'mp',
 834 |     '1670',
 835 |   ],
 836 |   [
 837 |     'Norway (Norge)',
 838 |     'no',
 839 |     '47',
 840 |     0,
 841 |   ],
 842 |   [
 843 |     'Oman (‫عُمان‬‎)',
 844 |     'om',
 845 |     '968',
 846 |   ],
 847 |   [
 848 |     'Pakistan (‫پاکستان‬‎)',
 849 |     'pk',
 850 |     '92',
 851 |   ],
 852 |   [
 853 |     'Palau',
 854 |     'pw',
 855 |     '680',
 856 |   ],
 857 |   [
 858 |     'Palestine (‫فلسطين‬‎)',
 859 |     'ps',
 860 |     '970',
 861 |   ],
 862 |   [
 863 |     'Panama (Panamá)',
 864 |     'pa',
 865 |     '507',
 866 |   ],
 867 |   [
 868 |     'Papua New Guinea',
 869 |     'pg',
 870 |     '675',
 871 |   ],
 872 |   [
 873 |     'Paraguay',
 874 |     'py',
 875 |     '595',
 876 |   ],
 877 |   [
 878 |     'Peru (Perú)',
 879 |     'pe',
 880 |     '51',
 881 |   ],
 882 |   [
 883 |     'Philippines',
 884 |     'ph',
 885 |     '63',
 886 |   ],
 887 |   [
 888 |     'Poland (Polska)',
 889 |     'pl',
 890 |     '48',
 891 |   ],
 892 |   [
 893 |     'Portugal',
 894 |     'pt',
 895 |     '351',
 896 |   ],
 897 |   [
 898 |     'Puerto Rico',
 899 |     'pr',
 900 |     '1',
 901 |     3,
 902 |     ['787', '939'],
 903 |   ],
 904 |   [
 905 |     'Qatar (‫قطر‬‎)',
 906 |     'qa',
 907 |     '974',
 908 |   ],
 909 |   [
 910 |     'Réunion (La Réunion)',
 911 |     're',
 912 |     '262',
 913 |     0,
 914 |   ],
 915 |   [
 916 |     'Romania (România)',
 917 |     'ro',
 918 |     '40',
 919 |   ],
 920 |   [
 921 |     'Russia (Россия)',
 922 |     'ru',
 923 |     '7',
 924 |     0,
 925 |   ],
 926 |   [
 927 |     'Rwanda',
 928 |     'rw',
 929 |     '250',
 930 |   ],
 931 |   [
 932 |     'Saint Barthélemy',
 933 |     'bl',
 934 |     '590',
 935 |     1,
 936 |   ],
 937 |   [
 938 |     'Saint Helena',
 939 |     'sh',
 940 |     '290',
 941 |   ],
 942 |   [
 943 |     'Saint Kitts and Nevis',
 944 |     'kn',
 945 |     '1869',
 946 |   ],
 947 |   [
 948 |     'Saint Lucia',
 949 |     'lc',
 950 |     '1758',
 951 |   ],
 952 |   [
 953 |     'Saint Martin (Saint-Martin (partie française))',
 954 |     'mf',
 955 |     '590',
 956 |     2,
 957 |   ],
 958 |   [
 959 |     'Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)',
 960 |     'pm',
 961 |     '508',
 962 |   ],
 963 |   [
 964 |     'Saint Vincent and the Grenadines',
 965 |     'vc',
 966 |     '1784',
 967 |   ],
 968 |   [
 969 |     'Samoa',
 970 |     'ws',
 971 |     '685',
 972 |   ],
 973 |   [
 974 |     'San Marino',
 975 |     'sm',
 976 |     '378',
 977 |   ],
 978 |   [
 979 |     'São Tomé and Príncipe (São Tomé e Príncipe)',
 980 |     'st',
 981 |     '239',
 982 |   ],
 983 |   [
 984 |     'Saudi Arabia (‫المملكة العربية السعودية‬‎)',
 985 |     'sa',
 986 |     '966',
 987 |   ],
 988 |   [
 989 |     'Senegal (Sénégal)',
 990 |     'sn',
 991 |     '221',
 992 |   ],
 993 |   [
 994 |     'Serbia (Србија)',
 995 |     'rs',
 996 |     '381',
 997 |   ],
 998 |   [
 999 |     'Seychelles',
1000 |     'sc',
1001 |     '248',
1002 |   ],
1003 |   [
1004 |     'Sierra Leone',
1005 |     'sl',
1006 |     '232',
1007 |   ],
1008 |   [
1009 |     'Singapore',
1010 |     'sg',
1011 |     '65',
1012 |   ],
1013 |   [
1014 |     'Sint Maarten',
1015 |     'sx',
1016 |     '1721',
1017 |   ],
1018 |   [
1019 |     'Slovakia (Slovensko)',
1020 |     'sk',
1021 |     '421',
1022 |   ],
1023 |   [
1024 |     'Slovenia (Slovenija)',
1025 |     'si',
1026 |     '386',
1027 |   ],
1028 |   [
1029 |     'Solomon Islands',
1030 |     'sb',
1031 |     '677',
1032 |   ],
1033 |   [
1034 |     'Somalia (Soomaaliya)',
1035 |     'so',
1036 |     '252',
1037 |   ],
1038 |   [
1039 |     'South Africa',
1040 |     'za',
1041 |     '27',
1042 |   ],
1043 |   [
1044 |     'South Korea (대한민국)',
1045 |     'kr',
1046 |     '82',
1047 |   ],
1048 |   [
1049 |     'South Sudan (‫جنوب السودان‬‎)',
1050 |     'ss',
1051 |     '211',
1052 |   ],
1053 |   [
1054 |     'Spain (España)',
1055 |     'es',
1056 |     '34',
1057 |   ],
1058 |   [
1059 |     'Sri Lanka (ශ්‍රී ලංකාව)',
1060 |     'lk',
1061 |     '94',
1062 |   ],
1063 |   [
1064 |     'Sudan (‫السودان‬‎)',
1065 |     'sd',
1066 |     '249',
1067 |   ],
1068 |   [
1069 |     'Suriname',
1070 |     'sr',
1071 |     '597',
1072 |   ],
1073 |   [
1074 |     'Svalbard and Jan Mayen',
1075 |     'sj',
1076 |     '47',
1077 |     1,
1078 |   ],
1079 |   [
1080 |     'Swaziland',
1081 |     'sz',
1082 |     '268',
1083 |   ],
1084 |   [
1085 |     'Sweden (Sverige)',
1086 |     'se',
1087 |     '46',
1088 |   ],
1089 |   [
1090 |     'Switzerland (Schweiz)',
1091 |     'ch',
1092 |     '41',
1093 |   ],
1094 |   [
1095 |     'Syria (‫سوريا‬‎)',
1096 |     'sy',
1097 |     '963',
1098 |   ],
1099 |   [
1100 |     'Taiwan (台灣)',
1101 |     'tw',
1102 |     '886',
1103 |   ],
1104 |   [
1105 |     'Tajikistan',
1106 |     'tj',
1107 |     '992',
1108 |   ],
1109 |   [
1110 |     'Tanzania',
1111 |     'tz',
1112 |     '255',
1113 |   ],
1114 |   [
1115 |     'Thailand (ไทย)',
1116 |     'th',
1117 |     '66',
1118 |   ],
1119 |   [
1120 |     'Timor-Leste',
1121 |     'tl',
1122 |     '670',
1123 |   ],
1124 |   [
1125 |     'Togo',
1126 |     'tg',
1127 |     '228',
1128 |   ],
1129 |   [
1130 |     'Tokelau',
1131 |     'tk',
1132 |     '690',
1133 |   ],
1134 |   [
1135 |     'Tonga',
1136 |     'to',
1137 |     '676',
1138 |   ],
1139 |   [
1140 |     'Trinidad and Tobago',
1141 |     'tt',
1142 |     '1868',
1143 |   ],
1144 |   [
1145 |     'Tunisia (‫تونس‬‎)',
1146 |     'tn',
1147 |     '216',
1148 |   ],
1149 |   [
1150 |     'Turkey (Türkiye)',
1151 |     'tr',
1152 |     '90',
1153 |   ],
1154 |   [
1155 |     'Turkmenistan',
1156 |     'tm',
1157 |     '993',
1158 |   ],
1159 |   [
1160 |     'Turks and Caicos Islands',
1161 |     'tc',
1162 |     '1649',
1163 |   ],
1164 |   [
1165 |     'Tuvalu',
1166 |     'tv',
1167 |     '688',
1168 |   ],
1169 |   [
1170 |     'U.S. Virgin Islands',
1171 |     'vi',
1172 |     '1340',
1173 |   ],
1174 |   [
1175 |     'Uganda',
1176 |     'ug',
1177 |     '256',
1178 |   ],
1179 |   [
1180 |     'Ukraine (Україна)',
1181 |     'ua',
1182 |     '380',
1183 |   ],
1184 |   [
1185 |     'United Arab Emirates (‫الإمارات العربية المتحدة‬‎)',
1186 |     'ae',
1187 |     '971',
1188 |   ],
1189 |   [
1190 |     'United Kingdom',
1191 |     'gb',
1192 |     '44',
1193 |     0,
1194 |   ],
1195 |   [
1196 |     'United States',
1197 |     'us',
1198 |     '1',
1199 |     0,
1200 |   ],
1201 |   [
1202 |     'Uruguay',
1203 |     'uy',
1204 |     '598',
1205 |   ],
1206 |   [
1207 |     'Uzbekistan (Oʻzbekiston)',
1208 |     'uz',
1209 |     '998',
1210 |   ],
1211 |   [
1212 |     'Vanuatu',
1213 |     'vu',
1214 |     '678',
1215 |   ],
1216 |   [
1217 |     'Vatican City (Città del Vaticano)',
1218 |     'va',
1219 |     '39',
1220 |     1,
1221 |   ],
1222 |   [
1223 |     'Venezuela',
1224 |     've',
1225 |     '58',
1226 |   ],
1227 |   [
1228 |     'Vietnam (Việt Nam)',
1229 |     'vn',
1230 |     '84',
1231 |   ],
1232 |   [
1233 |     'Wallis and Futuna (Wallis-et-Futuna)',
1234 |     'wf',
1235 |     '681',
1236 |   ],
1237 |   [
1238 |     'Western Sahara (‫الصحراء الغربية‬‎)',
1239 |     'eh',
1240 |     '212',
1241 |     1,
1242 |   ],
1243 |   [
1244 |     'Yemen (‫اليمن‬‎)',
1245 |     'ye',
1246 |     '967',
1247 |   ],
1248 |   [
1249 |     'Zambia',
1250 |     'zm',
1251 |     '260',
1252 |   ],
1253 |   [
1254 |     'Zimbabwe',
1255 |     'zw',
1256 |     '263',
1257 |   ],
1258 |   [
1259 |     'Åland Islands',
1260 |     'ax',
1261 |     '358',
1262 |     1,
1263 |   ],
1264 | ];
1265 | 
1266 | export default allCountries.map(country => ({
1267 |   name: country[0],
1268 |   iso2: country[1].toUpperCase(),
1269 |   dialCode: country[2],
1270 |   priority: country[3] || 0,
1271 |   areaCodes: country[4] || null,
1272 | }));
1273 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | import plugin from './plugin';
2 | 
3 | export default plugin;
4 | 


--------------------------------------------------------------------------------
/lib/plugin.js:
--------------------------------------------------------------------------------
 1 | import utils, { defaultOptions } from './utils';
 2 | import VueTelInputVuetify from './vue-tel-input-vuetify.vue';
 3 | 
 4 | export function install(Vue, customOptions = {}) {
 5 |   if (install.installed) return;
 6 |   if (!customOptions || !customOptions.vuetify) {
 7 |     return;
 8 |   }
 9 |   const { vuetify: vuetifyFramework } = customOptions;
10 |   install.installed = true;
11 |   install.vuetify = vuetifyFramework;
12 |   utils.options = {
13 |     ...defaultOptions,
14 |     ...customOptions,
15 |   };
16 |   Vue.use(vuetifyFramework);
17 |   Vue.component('vue-tel-input-vuetify', VueTelInputVuetify);
18 | }
19 | 
20 | export { VueTelInputVuetify };
21 | 
22 | const plugin = {
23 |   install,
24 | };
25 | 
26 | // Auto-install
27 | let GlobalVue = null;
28 | if (typeof window !== 'undefined') {
29 |   GlobalVue = window.Vue;
30 | } else if (typeof global !== 'undefined') {
31 |   GlobalVue = global.Vue;
32 | }
33 | if (GlobalVue) {
34 |   GlobalVue.use(plugin);
35 | }
36 | 
37 | export default plugin;
38 | 


--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
 1 | import allCountries from './all-countries';
 2 | import 'whatwg-fetch';
 3 | 
 4 | export function getCountry() {
 5 |   return fetch('https://ip2c.org/s')
 6 |     .then(response => response.text())
 7 |     .then((response) => {
 8 |       const result = (response || '').toString();
 9 | 
10 |       if (!result || result[0] !== '1') {
11 |         throw new Error('unable to fetch the country');
12 |       }
13 | 
14 |       return result.substr(2, 2);
15 |     });
16 | }
17 | 
18 | // Credits: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
19 | export function setCaretPosition(ctrl, pos) {
20 |   // Modern browsers
21 |   if (ctrl.setSelectionRange) {
22 |     ctrl.focus();
23 |     ctrl.setSelectionRange(pos, pos);
24 | 
25 |   // IE8 and below
26 |   } else if (ctrl.createTextRange) {
27 |     const range = ctrl.createTextRange();
28 |     range.collapse(true);
29 |     range.moveEnd('character', pos);
30 |     range.moveStart('character', pos);
31 |     range.select();
32 |   }
33 | }
34 | 
35 | export const defaultOptions = {
36 |   placeholder: 'Enter a phone number',
37 |   label: 'Enter a Phone Number',
38 |   disabledFetchingCountry: false,
39 |   disabled: false,
40 |   disabledFormatting: false,
41 |   mode: '',
42 |   invalidMsg: '',
43 |   required: false,
44 |   allCountries,
45 |   defaultCountry: '',
46 |   enabledCountryCode: false,
47 |   enabledFlags: true,
48 |   preferredCountries: [],
49 |   onlyCountries: [],
50 |   ignoredCountries: [],
51 |   autofocus: false,
52 |   autocomplete: 'on',
53 |   name: 'telephone',
54 |   wrapperClasses: '',
55 |   inputClasses: '',
56 |   inputId: '',
57 |   dropdownOptions: {},
58 |   inputOptions: {},
59 |   maxLen: 25,
60 |   dynamicPlaceholder: false,
61 | };
62 | 
63 | export default {
64 |   options: { ...defaultOptions },
65 | };
66 | 


--------------------------------------------------------------------------------
/lib/vue-tel-input-vuetify.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="['vue-tel-input-vuetify', wrapperClasses]">
  3 |     <div class="country-code">
  4 |       <v-select
  5 |         ref="countryInput"
  6 |         v-model="countryCode"
  7 |         :append-icon="appendIcon"
  8 |         :class="selectClasses"
  9 |         :label="selectLabel"
 10 |         @change="onChangeCountryCode"
 11 |         :items="sortedCountries"
 12 |         :disabled="disabled"
 13 |         :outlined="outlined"
 14 |         :filled="filled"
 15 |         :flat="flat"
 16 |         :light="light"
 17 |         :dark="dark"
 18 |         :readonly="readonly"
 19 |         :shaped="shaped"
 20 |         :rounded="rounded"
 21 |         :background-color="backgroundColor"
 22 |         :color="color"
 23 |         :dense="dense"
 24 |         :menu-props="menuProps"
 25 |         :height="inputHeight"
 26 |         item-text="name"
 27 |         item-value="iso2"
 28 |         return-object
 29 |       >
 30 |         <template v-slot:selection>
 31 |           <div :class="activeCountry.iso2.toLowerCase()" class="vti__flag" />
 32 |         </template>
 33 |         <template v-slot:item="data">
 34 |           <span :class="data.item.iso2.toLowerCase()" class="vti__flag" />
 35 |           <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
 36 |         </template>
 37 |       </v-select>
 38 |     </div>
 39 |     <v-text-field
 40 |       ref="input"
 41 |       type="tel"
 42 |       :class="textFieldClasses"
 43 |       :messages="messages"
 44 |       :error-messages="errorMessages"
 45 |       :success-messages="successMessages"
 46 |       :hint="hint"
 47 |       :suffix="suffix"
 48 |       :prefix="prefix"
 49 |       :background-color="backgroundColor"
 50 |       :color="color"
 51 |       :rules="rules"
 52 |       :loader-height="loaderHeight"
 53 |       :loading="loading"
 54 |       :hide-details="hideDetails"
 55 |       :clearable="clearable"
 56 |       :filled="filled"
 57 |       :full-width="fullWidth"
 58 |       :flat="flat"
 59 |       :light="light"
 60 |       :dark="dark"
 61 |       :validate-on-blur="validateOnBlur"
 62 |       :outlined="outlined"
 63 |       :dense="dense"
 64 |       :persistent-hint="persistentHint"
 65 |       :readonly="readonly"
 66 |       :error="error"
 67 |       :success="success"
 68 |       :shaped="shaped"
 69 |       :single-line="singleLine"
 70 |       :rounded="rounded"
 71 |       :value="value"
 72 |       :label="label"
 73 |       :disabled="disabled"
 74 |       :placeholder="placeholder"
 75 |       :persistent-placeholder="persistentPlaceholder"
 76 |       v-model="phone"
 77 |       :autofocus="autofocus"
 78 |       :name="name"
 79 |       :required="required"
 80 |       :autocomplete="autocomplete"
 81 |       :id="inputId"
 82 |       :maxlength="maxLen"
 83 |       :tabindex="
 84 |         inputOptions && inputOptions.tabindex ? inputOptions.tabindex : 0
 85 |       "
 86 |       :height="inputHeight"
 87 |       @input="onInput"
 88 |       @blur="onBlur"
 89 |       @focus="onFocus"
 90 |       @click="onClick"
 91 |       @change="onChange"
 92 |       @mousedown="onMouseDown"
 93 |       @mouseup="onMouseUp"
 94 |       @keydown="onKeyDown"
 95 |       @keyup.enter="onEnter"
 96 |       @keyup.space="onSpace"
 97 |     >
 98 |       <template #append>
 99 |         <slot name="append" />
100 |       </template>
101 |       <template #append-outer>
102 |         <slot name="append-outer" />
103 |       </template>
104 |       <template #label>
105 |         <slot name="label" />
106 |       </template>
107 |       <template #message="{ key, message }">
108 |         <slot name="message" v-bind="{ key, message }" />
109 |       </template>
110 |       <template #prepend>
111 |         <slot name="prepend" />
112 |       </template>
113 |       <template #prepend-inner>
114 |         <slot name="prepend-inner" />
115 |       </template>
116 |       <template #progress>
117 |         <slot name="progress" />
118 |       </template>
119 |     </v-text-field>
120 |   </div>
121 | </template>
122 | 
123 | <script>
124 | import PhoneNumber from 'awesome-phonenumber';
125 | import utils, { getCountry, setCaretPosition } from './utils';
126 | 
127 | function getDefault(key) {
128 |   return utils.options[key];
129 | }
130 | 
131 | // Polyfill for Event.path in IE 11: https://stackoverflow.com/a/46093727
132 | function getParents(node, memo) {
133 |   const parsedMemo = memo || [];
134 |   const { parentNode } = node;
135 |   if (!parentNode) {
136 |     return parsedMemo;
137 |   }
138 |   return getParents(parentNode, parsedMemo.concat(parentNode));
139 | }
140 | 
141 | export default {
142 |   name: 'VueTelInputVuetify',
143 |   directives: {
144 |     // Click-outside by BosNaufal: https://github.com/BosNaufal/vue-click-outside
145 |     'click-outside': {
146 |       bind(el, binding, vNode) {
147 |         // Provided expression must evaluate to a function.
148 |         if (typeof binding.value !== 'function') {
149 |           const compName = vNode.context.name;
150 |           let warn = `[Vue-click-outside:] provided expression ${binding.expression} is not a function, but has to be`;
151 |           if (compName) {
152 |             warn += `Found in component ${compName}`;
153 |           }
154 |           console.warn(warn);
155 |         }
156 |         // Define Handler and cache it on the element
157 |         const { bubble } = binding.modifiers;
158 |         const handler = (e) => {
159 |           // Fall back to composedPath if e.path is undefined
160 |           const path = e.path
161 |             || (e.composedPath ? e.composedPath() : false)
162 |             || getParents(e.target);
163 |           if (
164 |             bubble
165 |             || (path.length && !el.contains(path[0]) && el !== path[0])
166 |           ) {
167 |             binding.value(e);
168 |           }
169 |         };
170 |         el.__vueClickOutside__ = handler;
171 |         // add Event Listeners
172 |         document.addEventListener('click', handler);
173 |       },
174 |       unbind(el) {
175 |         // Remove Event Listeners
176 |         document.removeEventListener('click', el.__vueClickOutside__);
177 |         el.__vueClickOutside__ = null;
178 |       },
179 |     },
180 |   },
181 |   props: {
182 |     messages: {
183 |       type: [Array, String],
184 |     },
185 |     errorMessages: {
186 |       type: [Array, String],
187 |     },
188 |     successMessages: {
189 |       type: [Array, String],
190 |     },
191 |     hint: {
192 |       type: String,
193 |     },
194 |     suffix: {
195 |       type: String,
196 |     },
197 |     prefix: {
198 |       type: String,
199 |     },
200 |     appendIcon: {
201 |       type: String,
202 |       default: '',
203 |     },
204 |     backgroundColor: {
205 |       type: String,
206 |     },
207 |     color: {
208 |       type: String,
209 |     },
210 |     rules: {
211 |       type: Array,
212 |       default: () => [],
213 |     },
214 |     loaderHeight: {
215 |       type: [Number, String],
216 |       default: 2,
217 |     },
218 |     loading: {
219 |       type: [Boolean, String],
220 |       default: false,
221 |     },
222 |     hideDetails: {
223 |       type: [Boolean, String],
224 |     },
225 |     clearable: {
226 |       type: Boolean,
227 |       default: false,
228 |     },
229 |     filled: {
230 |       type: Boolean,
231 |       default: false,
232 |     },
233 |     fullWidth: {
234 |       type: Boolean,
235 |       default: false,
236 |     },
237 |     flat: {
238 |       type: Boolean,
239 |       default: false,
240 |     },
241 |     light: {
242 |       type: Boolean,
243 |       default: false,
244 |     },
245 |     dark: {
246 |       type: Boolean,
247 |       default: false,
248 |     },
249 |     validateOnBlur: {
250 |       type: Boolean,
251 |       default: false,
252 |     },
253 |     outlined: {
254 |       type: Boolean,
255 |       default: false,
256 |     },
257 |     dense: {
258 |       type: Boolean,
259 |       default: false,
260 |     },
261 |     persistentHint: {
262 |       type: Boolean,
263 |       default: false,
264 |     },
265 |     readonly: {
266 |       type: Boolean,
267 |       default: false,
268 |     },
269 |     error: {
270 |       type: Boolean,
271 |       default: false,
272 |     },
273 |     success: {
274 |       type: Boolean,
275 |       default: false,
276 |     },
277 |     shaped: {
278 |       type: Boolean,
279 |       default: false,
280 |     },
281 |     singleLine: {
282 |       type: Boolean,
283 |       default: false,
284 |     },
285 |     rounded: {
286 |       type: Boolean,
287 |       default: false,
288 |     },
289 |     inputHeight: {
290 |       type: String,
291 |       default: '',
292 |     },
293 |     value: {
294 |       type: String,
295 |       default: '',
296 |     },
297 |     label: {
298 |       type: String,
299 |       default: () => getDefault('label'),
300 |     },
301 |     selectLabel: {
302 |       type: String,
303 |       default: '',
304 |     },
305 |     menuProps: {
306 |       type: [String, Array, Object],
307 |       default: () => {},
308 |     },
309 |     placeholder: {
310 |       type: String,
311 |       default: () => getDefault('placeholder'),
312 |     },
313 |     persistentPlaceholder: {
314 |       type: Boolean,
315 |       default: false,
316 |     },
317 |     disabledFetchingCountry: {
318 |       type: Boolean,
319 |       default: () => getDefault('disabledFetchingCountry'),
320 |     },
321 |     disabled: {
322 |       type: Boolean,
323 |       default: () => getDefault('disabled'),
324 |     },
325 |     mode: {
326 |       type: String,
327 |       default: () => getDefault('mode'),
328 |     },
329 |     invalidMsg: {
330 |       type: String,
331 |       default: () => getDefault('invalidMsg'),
332 |     },
333 |     required: {
334 |       type: Boolean,
335 |       default: () => getDefault('required'),
336 |     },
337 |     allCountries: {
338 |       type: Array,
339 |       default: () => getDefault('allCountries'),
340 |     },
341 |     defaultCountry: {
342 |       // Default country code, ie: 'AU'
343 |       // Will override the current country of user
344 |       type: String,
345 |       default: () => getDefault('defaultCountry'),
346 |     },
347 |     preferredCountries: {
348 |       type: Array,
349 |       default: () => getDefault('preferredCountries'),
350 |     },
351 |     onlyCountries: {
352 |       type: Array,
353 |       default: () => getDefault('onlyCountries'),
354 |     },
355 |     ignoredCountries: {
356 |       type: Array,
357 |       default: () => getDefault('ignoredCountries'),
358 |     },
359 |     autocomplete: {
360 |       type: String,
361 |       default: () => getDefault('autocomplete'),
362 |     },
363 |     autofocus: {
364 |       type: Boolean,
365 |       default: () => getDefault('autofocus'),
366 |     },
367 |     name: {
368 |       type: String,
369 |       default: () => getDefault('name'),
370 |     },
371 |     wrapperClasses: {
372 |       type: [String, Array, Object],
373 |       default: () => getDefault('wrapperClasses'),
374 |     },
375 |     textFieldClasses: {
376 |       type: [String, Array, Object],
377 |       default: () => '',
378 |     },
379 |     selectClasses: {
380 |       type: [String, Array, Object],
381 |       default: () => '',
382 |     },
383 |     inputClasses: {
384 |       type: [String, Array, Object],
385 |       default: () => '',
386 |     },
387 |     inputId: {
388 |       type: String,
389 |       default: () => getDefault('inputId'),
390 |     },
391 |     inputOptions: {
392 |       type: Object,
393 |       default: () => getDefault('inputOptions'),
394 |     },
395 |     maxLen: {
396 |       type: Number,
397 |       default: () => getDefault('maxLen'),
398 |     },
399 |   },
400 |   data() {
401 |     return {
402 |       phone: '',
403 |       activeCountry: { iso2: '' },
404 |       open: false,
405 |       finishMounted: false,
406 |       selectedIndex: null,
407 |       typeToFindInput: '',
408 |       typeToFindTimer: null,
409 |       cursorPosition: 0,
410 |       countryCode: null,
411 |     };
412 |   },
413 |   computed: {
414 |     parsedMode() {
415 |       if (this.mode) {
416 |         if (!['international', 'national'].includes(this.mode)) {
417 |           console.error('Invalid value of prop "mode"');
418 |         } else {
419 |           return this.mode;
420 |         }
421 |       }
422 |       if (!this.phone || this.phone[0] !== '+') {
423 |         return 'national';
424 |       }
425 |       return 'international';
426 |     },
427 |     filteredCountries() {
428 |       // List countries after filtered
429 |       if (this.onlyCountries.length) {
430 |         return this.getCountries(this.onlyCountries);
431 |       }
432 |       if (this.ignoredCountries.length) {
433 |         return this.allCountries.filter(
434 |           ({ iso2 }) => !this.ignoredCountries.includes(iso2.toUpperCase())
435 |             && !this.ignoredCountries.includes(iso2.toLowerCase()),
436 |         );
437 |       }
438 |       return this.allCountries;
439 |     },
440 |     sortedCountries() {
441 |       // Sort the list countries: from preferred countries to all countries
442 |       const preferredCountries = this.getCountries(this.preferredCountries).map(
443 |         country => ({
444 |           ...country,
445 |           preferred: true,
446 |         }),
447 |       );
448 |       return [...preferredCountries, ...this.filteredCountries];
449 |     },
450 |     phoneObject() {
451 |       const result = PhoneNumber(
452 |         this.phone || '',
453 |         this.activeCountry.iso2,
454 |       ).toJSON();
455 |       Object.assign(result, {
456 |         isValid: result.valid,
457 |         country: this.activeCountry,
458 |       });
459 |       if (!this.phone) {
460 |         return {
461 |           ...result,
462 |           number: {
463 |             input: '',
464 |           },
465 |         };
466 |       }
467 |       return result;
468 |     },
469 |     phoneText() {
470 |       let key = 'input';
471 |       if (this.phoneObject.valid) {
472 |         key = this.parsedMode;
473 |       }
474 |       return this.phoneObject.number[key] || '';
475 |     },
476 |   },
477 |   watch: {
478 |     // eslint-disable-next-line func-names
479 |     'phoneObject.valid': function (value) {
480 |       if (value) {
481 |         this.phone = this.phoneText;
482 |       }
483 |       this.$emit('validate', this.phoneObject);
484 |       this.$emit('onValidate', this.phoneObject); // Deprecated
485 |     },
486 |     value() {
487 |       this.phone = this.value;
488 |     },
489 |     open(isDropdownOpened) {
490 |       // Emit open and close events
491 |       if (isDropdownOpened) {
492 |         this.$emit('open');
493 |       } else {
494 |         this.$emit('close');
495 |       }
496 |     },
497 |     phone(newValue, oldValue) {
498 |       if (newValue) {
499 |         if (newValue[0] === '+') {
500 |           const code = PhoneNumber(newValue).getRegionCode();
501 |           if (code) {
502 |             this.activeCountry = this.findCountry(code) || this.activeCountry;
503 |           }
504 |         }
505 |       }
506 |       // Reset the cursor to current position if it's not the last character.
507 |       if (oldValue && this.cursorPosition < oldValue.length) {
508 |         this.$nextTick(() => {
509 |           setCaretPosition(this.$refs.input, this.cursorPosition);
510 |         });
511 |       }
512 | 
513 |       this.$emit('input', this.phoneText, this.phoneObject);
514 |     },
515 |     activeCountry(value) {
516 |       if (value && value.iso2) {
517 |         this.$emit('country-changed', value);
518 |       }
519 |     },
520 |   },
521 |   mounted() {
522 |     this.$watch('$refs.countryInput.isResetting', v => v && this.reset());
523 |     this.reset();
524 |   },
525 |   created() {
526 |     if (this.value) {
527 |       this.phone = this.value.trim();
528 |     }
529 |   },
530 |   methods: {
531 |     initializeCountry() {
532 |       return new Promise((resolve) => {
533 |         /**
534 |          * 1. If the phone included prefix (+12), try to get the country and set it
535 |          */
536 |         if (this.phone && this.phone[0] === '+') {
537 |           const activeCountry = PhoneNumber(this.phone).getRegionCode();
538 |           if (activeCountry) {
539 |             this.choose(activeCountry);
540 |             resolve();
541 |             return;
542 |           }
543 |         }
544 |         /**
545 |          * 2. Use default country if passed from parent
546 |          */
547 |         if (this.defaultCountry) {
548 |           const defaultCountry = this.findCountry(this.defaultCountry);
549 |           if (defaultCountry) {
550 |             this.choose(defaultCountry);
551 |             resolve();
552 |             return;
553 |           }
554 |         }
555 |         const fallbackCountry = this.findCountry(this.preferredCountries[0])
556 |           || this.filteredCountries[0];
557 |         /**
558 |          * 3. Check if fetching country based on user's IP is allowed, set it as the default country
559 |          */
560 |         if (!this.disabledFetchingCountry) {
561 |           getCountry()
562 |             .then((res) => {
563 |               if (this.phone === '') {
564 |                 this.activeCountry = this.findCountry(res) || this.activeCountry;
565 |               }
566 |             })
567 |             .catch((error) => {
568 |               console.warn(error);
569 |               /**
570 |                * 4. Use the first country from preferred list (if available) or all countries list
571 |                */
572 |               this.choose(fallbackCountry);
573 |             })
574 |             .finally(() => {
575 |               resolve();
576 |             });
577 |         } else {
578 |           /**
579 |            * 4. Use the first country from preferred list (if available) or all countries list
580 |            */
581 |           this.choose(fallbackCountry);
582 |           resolve();
583 |         }
584 |       });
585 |     },
586 |     /**
587 |      * Get the list of countries from the list of iso2 code
588 |      */
589 |     getCountries(list = []) {
590 |       return list
591 |         .map(countryCode => this.findCountry(countryCode))
592 |         .filter(Boolean);
593 |     },
594 |     findCountry(iso = '') {
595 |       return this.allCountries.find(
596 |         country => country.iso2 === iso.toUpperCase(),
597 |       );
598 |     },
599 |     getItemClass(index, iso2) {
600 |       const highlighted = this.selectedIndex === index;
601 |       const lastPreferred = index === this.preferredCountries.length - 1;
602 |       const preferred = this.preferredCountries.some(
603 |         c => c.toUpperCase() === iso2,
604 |       );
605 |       return {
606 |         highlighted,
607 |         'last-preferred': lastPreferred,
608 |         preferred,
609 |       };
610 |     },
611 |     choose(country, toEmitInputEvent = false) {
612 |       this.activeCountry = country || this.activeCountry || {};
613 |       if (
614 |         this.phone
615 |         && this.phone[0] === '+'
616 |         && this.activeCountry.iso2
617 |         && this.phoneObject.number.significant
618 |       ) {
619 |         // Attach the current phone number with the newly selected country
620 |         this.phone = PhoneNumber(
621 |           this.phoneObject.number.significant,
622 |           this.activeCountry.iso2,
623 |         ).getNumber('international');
624 |       } else if (
625 |         this.inputOptions
626 |         && this.inputOptions.showDialCode
627 |         && country
628 |       ) {
629 |         // Reset phone if the showDialCode is set
630 |         this.phone = `+${country.dialCode}`;
631 |       }
632 |       if (toEmitInputEvent) {
633 |         this.$emit('input', this.phoneText, this.phoneObject);
634 |         this.$emit('onInput', this.phoneObject); // Deprecated
635 |       }
636 |     },
637 |     onInput(e) {
638 |       // this.$refs.input.setCustomValidity(
639 |       //   this.phoneObject.valid ? "" : this.invalidMsg
640 |       // );
641 |       // Returns response.number to assign it to v-model (if being used)
642 |       // Returns full response for cases @input is used
643 |       // and parent wants to return the whole response.
644 |       this.$emit('input', this.phoneText, this.phoneObject);
645 |       this.$emit('onInput', this.phoneObject); // Deprecated
646 |       // Keep the current cursor position just in case the input reformatted
647 |       // and it gets moved to the last character.
648 |       if (e && e.target) {
649 |         this.cursorPosition = e.target.selectionStart;
650 |       }
651 |     },
652 |     onBlur() {
653 |       this.$emit('blur');
654 |       this.$emit('onBlur'); // Deprecated
655 |     },
656 |     onFocus(event) {
657 |       this.$emit('focus', event);
658 |     },
659 |     onClick(event) {
660 |       this.$emit('click', event);
661 |     },
662 |     onChange(value) {
663 |       this.$emit('change', value);
664 |     },
665 |     onMouseUp(event) {
666 |       this.$emit('mouseup', event);
667 |     },
668 |     onMouseDown(event) {
669 |       this.$emit('mousedown', event);
670 |     },
671 |     onKeyDown(event) {
672 |       this.$emit('keydown', event);
673 |     },
674 |     onEnter() {
675 |       this.$emit('enter');
676 |       this.$emit('onEnter'); // Deprecated
677 |     },
678 |     onSpace() {
679 |       this.$emit('space');
680 |       this.$emit('onSpace'); // Deprecated
681 |     },
682 |     focus() {
683 |       this.$refs.input.focus();
684 |     },
685 |     toggleDropdown() {
686 |       if (this.disabled) {
687 |         return;
688 |       }
689 |       this.open = !this.open;
690 |     },
691 |     clickedOutside() {
692 |       this.open = false;
693 |     },
694 |     keyboardNav(e) {
695 |       if (e.keyCode === 40) {
696 |         // down arrow
697 |         e.preventDefault();
698 |         this.open = true;
699 |         if (this.selectedIndex === null) {
700 |           this.selectedIndex = 0;
701 |         } else {
702 |           this.selectedIndex = Math.min(
703 |             this.sortedCountries.length - 1,
704 |             this.selectedIndex + 1,
705 |           );
706 |         }
707 |         const selEle = this.$refs.list.children[this.selectedIndex];
708 |         if (
709 |           selEle.offsetTop + selEle.clientHeight
710 |           > this.$refs.list.scrollTop + this.$refs.list.clientHeight
711 |         ) {
712 |           this.$refs.list.scrollTop = selEle.offsetTop
713 |             - this.$refs.list.clientHeight
714 |             + selEle.clientHeight;
715 |         }
716 |       } else if (e.keyCode === 38) {
717 |         // up arrow
718 |         e.preventDefault();
719 |         this.open = true;
720 |         if (this.selectedIndex === null) {
721 |           this.selectedIndex = this.sortedCountries.length - 1;
722 |         } else {
723 |           this.selectedIndex = Math.max(0, this.selectedIndex - 1);
724 |         }
725 |         const selEle = this.$refs.list.children[this.selectedIndex];
726 |         if (selEle.offsetTop < this.$refs.list.scrollTop) {
727 |           this.$refs.list.scrollTop = selEle.offsetTop;
728 |         }
729 |       } else if (e.keyCode === 13) {
730 |         // enter key
731 |         if (this.selectedIndex !== null) {
732 |           this.choose(this.sortedCountries[this.selectedIndex]);
733 |         }
734 |         this.open = !this.open;
735 |       } else {
736 |         // typing a country's name
737 |         this.typeToFindInput += e.key;
738 |         clearTimeout(this.typeToFindTimer);
739 |         this.typeToFindTimer = setTimeout(() => {
740 |           this.typeToFindInput = '';
741 |         }, 700);
742 |         // don't include preferred countries so we jump to the right place in the alphabet
743 |         const typedCountryI = this.sortedCountries
744 |           .slice(this.preferredCountries.length)
745 |           .findIndex(c => c.name.toLowerCase().startsWith(this.typeToFindInput));
746 |         if (typedCountryI >= 0) {
747 |           this.selectedIndex = this.preferredCountries.length + typedCountryI;
748 |           const selEle = this.$refs.list.children[this.selectedIndex];
749 |           const needToScrollTop = selEle.offsetTop < this.$refs.list.scrollTop;
750 |           const needToScrollBottom = selEle.offsetTop + selEle.clientHeight
751 |             > this.$refs.list.scrollTop + this.$refs.list.clientHeight;
752 |           if (needToScrollTop || needToScrollBottom) {
753 |             this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight / 2;
754 |           }
755 |         }
756 |       }
757 |     },
758 |     reset() {
759 |       this.countryCode = this.activeCountry;
760 |       this.initializeCountry()
761 |         .then(() => {
762 |           if (
763 |             !this.phone
764 |             && this.inputOptions
765 |             && this.inputOptions.showDialCode
766 |             && this.activeCountry.dialCode
767 |           ) {
768 |             this.phone = `+${this.activeCountry.dialCode}`;
769 |           }
770 |           this.countryCode = this.activeCountry;
771 |           this.$emit('validate', this.phoneObject);
772 |           this.$emit('onValidate', this.phoneObject); // Deprecated
773 |         })
774 |         .catch(console.error)
775 |         .finally(() => {
776 |           this.finishMounted = true;
777 |         });
778 |       this.open = false;
779 |     },
780 |     onChangeCountryCode() {
781 |       this.choose(this.countryCode, true);
782 |     },
783 |   },
784 | };
785 | </script>
786 | 
787 | <style src="./sprite.css"></style>
788 | <style lang="scss">
789 | .vti__flag {
790 |   margin-right: 8px;
791 | }
792 | 
793 | .vue-tel-input-vuetify {
794 |   display: flex;
795 |   align-items: center;
796 | 
797 |   .country-code {
798 |     width: 75px;
799 |   }
800 | 
801 |   li.last-preferred {
802 |     border-bottom: 1px solid #cacaca;
803 |   }
804 | 
805 |   .v-text-field {
806 |     .v-select__selections {
807 |       position: relative;
808 |       .vti__flag {
809 |         position: absolute;
810 |         margin-left: 18px;
811 |       }
812 |     }
813 |     &--outlined {
814 |       .v-select__selections {
815 |         .vti__flag {
816 |           margin-left: auto;
817 |         }
818 |       }
819 |     }
820 |   }
821 | }
822 | </style>
823 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "vue-tel-input-vuetify",
  3 |   "version": "1.5.3",
  4 |   "description": "International Telephone Input with Vuetify",
  5 |   "author": "Yoga Kurniawan <yogaygk@gmail.com>",
  6 |   "scripts": {
  7 |     "build": "set NODE_ENV=production && npm run build:browser && npm run build:es && npm run build:umd",
  8 |     "test:unit": "vue-cli-service test:unit",
  9 |     "lint": "vue-cli-service lint --fix",
 10 |     "build:browser": "rollup --config build/rollup.config.browser.js",
 11 |     "build:es": "rollup --config build/rollup.config.es.js",
 12 |     "build:umd": "rollup --config build/rollup.config.umd.js",
 13 |     "commit": "git-cz",
 14 |     "demo": "vue-cli-service build",
 15 |     "dev": "vue-cli-service serve"
 16 |   },
 17 |   "main": "dist/vue-tel-input-vuetify.umd.js",
 18 |   "module": "dist/vue-tel-input-vuetify.esm.js",
 19 |   "unpkg": "dist/vue-tel-input-vuetify.min.js",
 20 |   "files": [
 21 |     "dist/",
 22 |     "src/",
 23 |     "lib/"
 24 |   ],
 25 |   "dependencies": {
 26 |     "awesome-phonenumber": "^2.15.0",
 27 |     "vuetify": "^2.2.11",
 28 |     "whatwg-fetch": "^3.2.0"
 29 |   },
 30 |   "devDependencies": {
 31 |     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
 32 |     "@babel/preset-env": "^7.6.0",
 33 |     "@commitlint/cli": "^8.3.5",
 34 |     "@commitlint/config-conventional": "^8.3.4",
 35 |     "@semantic-release/changelog": "^3.0.6",
 36 |     "@semantic-release/git": "^8.0.0",
 37 |     "@vue/cli-plugin-babel": "^3.0.1",
 38 |     "@vue/cli-plugin-eslint": "^3.0.1",
 39 |     "@vue/cli-plugin-unit-jest": "^3.0.1",
 40 |     "@vue/cli-service": "^3.0.1",
 41 |     "@vue/eslint-config-airbnb": "^4.0.0",
 42 |     "@vue/test-utils": "1.0.0-beta.29",
 43 |     "babel-core": "7.0.0-bridge.0",
 44 |     "babel-eslint": "^10.0.1",
 45 |     "babel-jest": "^23.6.0",
 46 |     "commitizen": "^4.2.2",
 47 |     "core-js": "^2.6.5",
 48 |     "cz-conventional-changelog": "^3.1.0",
 49 |     "eslint": "^5.16.0",
 50 |     "eslint-plugin-vue": "^5.0.0",
 51 |     "lint-staged": "^8.1.5",
 52 |     "rollup": "^1.10.0",
 53 |     "rollup-plugin-analyzer": "^3.0.0",
 54 |     "rollup-plugin-babel": "^4.3.2",
 55 |     "rollup-plugin-commonjs": "^9.3.4",
 56 |     "rollup-plugin-copy": "^3.3.0",
 57 |     "rollup-plugin-css-only": "^1.0.0",
 58 |     "rollup-plugin-node-resolve": "^4.2.3",
 59 |     "rollup-plugin-postcss": "^2.0.3",
 60 |     "rollup-plugin-replace": "^2.0.0",
 61 |     "rollup-plugin-terser": "^4.0.4",
 62 |     "rollup-plugin-vue": "^5.0.0",
 63 |     "sass": "^1.19.0",
 64 |     "sass-loader": "^8.0.0",
 65 |     "semantic-release": "^17.2.3",
 66 |     "vue": "^2.6.10",
 67 |     "vue-cli-plugin-vuetify": "~2.0.5",
 68 |     "vue-template-compiler": "^2.6.11",
 69 |     "vuetify-loader": "^1.3.0"
 70 |   },
 71 |   "browserslist": [
 72 |     "> 1%",
 73 |     "last 2 versions"
 74 |   ],
 75 |   "config": {
 76 |     "commitizen": {
 77 |       "path": "./node_modules/cz-conventional-changelog"
 78 |     }
 79 |   },
 80 |   "homepage": "https://yogakurniawan.github.io/vue-tel-input-vuetify/",
 81 |   "husky": {
 82 |     "hooks": {
 83 |       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
 84 |     }
 85 |   },
 86 |   "keywords": [
 87 |     "vue",
 88 |     "vuetify",
 89 |     "telephone",
 90 |     "phone",
 91 |     "vue-tel-input",
 92 |     "phone input",
 93 |     "telephone input",
 94 |     "input",
 95 |     "international phone"
 96 |   ],
 97 |   "license": "MIT",
 98 |   "repository": {
 99 |     "type": "git",
100 |     "url": "https://github.com/yogakurniawan/vue-tel-input-vuetify.git"
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap" rel="stylesheet">
 9 |     <title>vue-tel-input</title>
10 |     <style>
11 |       body {
12 |         font-family: 'Nunito Sans', sans-serif;
13 |         -webkit-font-smoothing: antialiased;
14 |         -moz-osx-font-smoothing: grayscale;
15 |         text-align: center;
16 |         color: #2c3e50;
17 |         margin-top: 60px;
18 |       }
19 |     </style>
20 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
21 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
22 |   </head>
23 |   <body>
24 |     <noscript>
25 |       <strong>We're sorry but the vue-tel-input demo page doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
26 |     </noscript>
27 |     <h1>International Telephone Input with Vuetify</h1>
28 |     <div id="app"></div>
29 |     <!-- built files will be auto injected -->
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-main>
 4 |       <Example/>
 5 |     </v-main>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 | import Example from './components/Example.vue';
11 | 
12 | export default {
13 |   name: 'App',
14 |   components: {
15 |     Example,
16 |   },
17 |   data: () => ({
18 |     //
19 |   }),
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/Example.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-row justify="center">
 4 |       <v-col cols="6">
 5 |         <vue-tel-input-vuetify
 6 |           v-model="myPhone"
 7 |           :preferred-countries="['id', 'gb', 'ua', 'us']"
 8 |           :valid-characters-only="true"
 9 |           select-label="Code"
10 |           @input="onInput"
11 |         />
12 |       </v-col>
13 |     </v-row>
14 |     <v-row justify="center">
15 |       <v-col cols="6">
16 |         <div v-if="phone.number" style="color: #e83e8c">
17 |           <span>
18 |             Number:
19 |             <strong>{{ phone.number }}</strong
20 |             >,&nbsp;
21 |           </span>
22 |           <span>
23 |             Is valid:
24 |             <strong>{{ phone.valid }}</strong
25 |             >,&nbsp;
26 |           </span>
27 |           <span>
28 |             Country:
29 |             <strong>{{ phone.country }}</strong>
30 |           </span>
31 |         </div>
32 |       </v-col>
33 |     </v-row>
34 |      <v-row justify="center">
35 |       <v-col cols="6">
36 |         <v-btn @click="myPhone = '+503 7703 4643'">Set phone</v-btn>
37 |       </v-col>
38 |     </v-row>
39 |   </v-container>
40 | </template>
41 | 
42 | <script>
43 | import VueTelInputVuetify from '../lib/vue-tel-input-vuetify.vue';
44 | 
45 | export default {
46 |   name: 'Example',
47 |   components: {
48 |     VueTelInputVuetify,
49 |   },
50 |   data() {
51 |     return {
52 |       myPhone: '',
53 |       phone: {
54 |         number: '',
55 |         valid: false,
56 |         country: undefined,
57 |       },
58 |     };
59 |   },
60 |   methods: {
61 |     onInput(formattedNumber, { number, valid, country }) {
62 |       this.phone.number = number.international;
63 |       this.phone.valid = valid;
64 |       this.phone.country = country && country.name;
65 |     },
66 |   },
67 | };
68 | </script>
69 | 


--------------------------------------------------------------------------------
/src/lib/all-countries.js:
--------------------------------------------------------------------------------
   1 | // Array of country objects for the flag dropdown.
   2 | 
   3 | // Here is the criteria for the plugin to support a given country/territory
   4 | // - It has an iso2 code: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
   5 | // - It has it's own country calling code (it is not a sub-region of another country): https://en.wikipedia.org/wiki/List_of_country_calling_codes
   6 | // - It has a flag in the region-flags project: https://github.com/behdad/region-flags/tree/gh-pages/png
   7 | // - It is supported by libphonenumber (it must be listed on this page): https://github.com/googlei18n/libphonenumber/blob/master/resources/ShortNumberMetadata.xml
   8 | 
   9 | // Each country array has the following information:
  10 | // [
  11 | //    Country name,
  12 | //    iso2 code,
  13 | //    International dial code,
  14 | //    Order (if >1 country with same dial code),
  15 | //    Area codes
  16 | // ]
  17 | const allCountries = [
  18 |   [
  19 |     'Afghanistan (‫افغانستان‬‎)',
  20 |     'af',
  21 |     '93',
  22 |   ],
  23 |   [
  24 |     'Albania (Shqipëri)',
  25 |     'al',
  26 |     '355',
  27 |   ],
  28 |   [
  29 |     'Algeria (‫الجزائر‬‎)',
  30 |     'dz',
  31 |     '213',
  32 |   ],
  33 |   [
  34 |     'American Samoa',
  35 |     'as',
  36 |     '1684',
  37 |   ],
  38 |   [
  39 |     'Andorra',
  40 |     'ad',
  41 |     '376',
  42 |   ],
  43 |   [
  44 |     'Angola',
  45 |     'ao',
  46 |     '244',
  47 |   ],
  48 |   [
  49 |     'Anguilla',
  50 |     'ai',
  51 |     '1264',
  52 |   ],
  53 |   [
  54 |     'Antigua and Barbuda',
  55 |     'ag',
  56 |     '1268',
  57 |   ],
  58 |   [
  59 |     'Argentina',
  60 |     'ar',
  61 |     '54',
  62 |   ],
  63 |   [
  64 |     'Armenia (Հայաստան)',
  65 |     'am',
  66 |     '374',
  67 |   ],
  68 |   [
  69 |     'Aruba',
  70 |     'aw',
  71 |     '297',
  72 |   ],
  73 |   [
  74 |     'Australia',
  75 |     'au',
  76 |     '61',
  77 |     0,
  78 |   ],
  79 |   [
  80 |     'Austria (Österreich)',
  81 |     'at',
  82 |     '43',
  83 |   ],
  84 |   [
  85 |     'Azerbaijan (Azərbaycan)',
  86 |     'az',
  87 |     '994',
  88 |   ],
  89 |   [
  90 |     'Bahamas',
  91 |     'bs',
  92 |     '1242',
  93 |   ],
  94 |   [
  95 |     'Bahrain (‫البحرين‬‎)',
  96 |     'bh',
  97 |     '973',
  98 |   ],
  99 |   [
 100 |     'Bangladesh (বাংলাদেশ)',
 101 |     'bd',
 102 |     '880',
 103 |   ],
 104 |   [
 105 |     'Barbados',
 106 |     'bb',
 107 |     '1246',
 108 |   ],
 109 |   [
 110 |     'Belarus (Беларусь)',
 111 |     'by',
 112 |     '375',
 113 |   ],
 114 |   [
 115 |     'Belgium (België)',
 116 |     'be',
 117 |     '32',
 118 |   ],
 119 |   [
 120 |     'Belize',
 121 |     'bz',
 122 |     '501',
 123 |   ],
 124 |   [
 125 |     'Benin (Bénin)',
 126 |     'bj',
 127 |     '229',
 128 |   ],
 129 |   [
 130 |     'Bermuda',
 131 |     'bm',
 132 |     '1441',
 133 |   ],
 134 |   [
 135 |     'Bhutan (འབྲུག)',
 136 |     'bt',
 137 |     '975',
 138 |   ],
 139 |   [
 140 |     'Bolivia',
 141 |     'bo',
 142 |     '591',
 143 |   ],
 144 |   [
 145 |     'Bosnia and Herzegovina (Босна и Херцеговина)',
 146 |     'ba',
 147 |     '387',
 148 |   ],
 149 |   [
 150 |     'Botswana',
 151 |     'bw',
 152 |     '267',
 153 |   ],
 154 |   [
 155 |     'Brazil (Brasil)',
 156 |     'br',
 157 |     '55',
 158 |   ],
 159 |   [
 160 |     'British Indian Ocean Territory',
 161 |     'io',
 162 |     '246',
 163 |   ],
 164 |   [
 165 |     'British Virgin Islands',
 166 |     'vg',
 167 |     '1284',
 168 |   ],
 169 |   [
 170 |     'Brunei',
 171 |     'bn',
 172 |     '673',
 173 |   ],
 174 |   [
 175 |     'Bulgaria (България)',
 176 |     'bg',
 177 |     '359',
 178 |   ],
 179 |   [
 180 |     'Burkina Faso',
 181 |     'bf',
 182 |     '226',
 183 |   ],
 184 |   [
 185 |     'Burundi (Uburundi)',
 186 |     'bi',
 187 |     '257',
 188 |   ],
 189 |   [
 190 |     'Cambodia (កម្ពុជា)',
 191 |     'kh',
 192 |     '855',
 193 |   ],
 194 |   [
 195 |     'Cameroon (Cameroun)',
 196 |     'cm',
 197 |     '237',
 198 |   ],
 199 |   [
 200 |     'Canada',
 201 |     'ca',
 202 |     '1',
 203 |     1,
 204 |     ['204', '226', '236', '249', '250', '289', '306', '343', '365', '387', '403', '416', '418', '431', '437', '438', '450', '506', '514', '519', '548', '579', '581', '587', '604', '613', '639', '647', '672', '705', '709', '742', '778', '780', '782', '807', '819', '825', '867', '873', '902', '905'],
 205 |   ],
 206 |   [
 207 |     'Cape Verde (Kabu Verdi)',
 208 |     'cv',
 209 |     '238',
 210 |   ],
 211 |   [
 212 |     'Caribbean Netherlands',
 213 |     'bq',
 214 |     '599',
 215 |     1,
 216 |   ],
 217 |   [
 218 |     'Cayman Islands',
 219 |     'ky',
 220 |     '1345',
 221 |   ],
 222 |   [
 223 |     'Central African Republic (République centrafricaine)',
 224 |     'cf',
 225 |     '236',
 226 |   ],
 227 |   [
 228 |     'Chad (Tchad)',
 229 |     'td',
 230 |     '235',
 231 |   ],
 232 |   [
 233 |     'Chile',
 234 |     'cl',
 235 |     '56',
 236 |   ],
 237 |   [
 238 |     'China (中国)',
 239 |     'cn',
 240 |     '86',
 241 |   ],
 242 |   [
 243 |     'Christmas Island',
 244 |     'cx',
 245 |     '61',
 246 |     2,
 247 |   ],
 248 |   [
 249 |     'Cocos (Keeling) Islands',
 250 |     'cc',
 251 |     '61',
 252 |     1,
 253 |   ],
 254 |   [
 255 |     'Colombia',
 256 |     'co',
 257 |     '57',
 258 |   ],
 259 |   [
 260 |     'Comoros (‫جزر القمر‬‎)',
 261 |     'km',
 262 |     '269',
 263 |   ],
 264 |   [
 265 |     'Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)',
 266 |     'cd',
 267 |     '243',
 268 |   ],
 269 |   [
 270 |     'Congo (Republic) (Congo-Brazzaville)',
 271 |     'cg',
 272 |     '242',
 273 |   ],
 274 |   [
 275 |     'Cook Islands',
 276 |     'ck',
 277 |     '682',
 278 |   ],
 279 |   [
 280 |     'Costa Rica',
 281 |     'cr',
 282 |     '506',
 283 |   ],
 284 |   [
 285 |     'Côte d’Ivoire',
 286 |     'ci',
 287 |     '225',
 288 |   ],
 289 |   [
 290 |     'Croatia (Hrvatska)',
 291 |     'hr',
 292 |     '385',
 293 |   ],
 294 |   [
 295 |     'Cuba',
 296 |     'cu',
 297 |     '53',
 298 |   ],
 299 |   [
 300 |     'Curaçao',
 301 |     'cw',
 302 |     '599',
 303 |     0,
 304 |   ],
 305 |   [
 306 |     'Cyprus (Κύπρος)',
 307 |     'cy',
 308 |     '357',
 309 |   ],
 310 |   [
 311 |     'Czech Republic (Česká republika)',
 312 |     'cz',
 313 |     '420',
 314 |   ],
 315 |   [
 316 |     'Denmark (Danmark)',
 317 |     'dk',
 318 |     '45',
 319 |   ],
 320 |   [
 321 |     'Djibouti',
 322 |     'dj',
 323 |     '253',
 324 |   ],
 325 |   [
 326 |     'Dominica',
 327 |     'dm',
 328 |     '1767',
 329 |   ],
 330 |   [
 331 |     'Dominican Republic (República Dominicana)',
 332 |     'do',
 333 |     '1',
 334 |     2,
 335 |     ['809', '829', '849'],
 336 |   ],
 337 |   [
 338 |     'Ecuador',
 339 |     'ec',
 340 |     '593',
 341 |   ],
 342 |   [
 343 |     'Egypt (‫مصر‬‎)',
 344 |     'eg',
 345 |     '20',
 346 |   ],
 347 |   [
 348 |     'El Salvador',
 349 |     'sv',
 350 |     '503',
 351 |   ],
 352 |   [
 353 |     'Equatorial Guinea (Guinea Ecuatorial)',
 354 |     'gq',
 355 |     '240',
 356 |   ],
 357 |   [
 358 |     'Eritrea',
 359 |     'er',
 360 |     '291',
 361 |   ],
 362 |   [
 363 |     'Estonia (Eesti)',
 364 |     'ee',
 365 |     '372',
 366 |   ],
 367 |   [
 368 |     'Ethiopia',
 369 |     'et',
 370 |     '251',
 371 |   ],
 372 |   [
 373 |     'Falkland Islands (Islas Malvinas)',
 374 |     'fk',
 375 |     '500',
 376 |   ],
 377 |   [
 378 |     'Faroe Islands (Føroyar)',
 379 |     'fo',
 380 |     '298',
 381 |   ],
 382 |   [
 383 |     'Fiji',
 384 |     'fj',
 385 |     '679',
 386 |   ],
 387 |   [
 388 |     'Finland (Suomi)',
 389 |     'fi',
 390 |     '358',
 391 |     0,
 392 |   ],
 393 |   [
 394 |     'France',
 395 |     'fr',
 396 |     '33',
 397 |   ],
 398 |   [
 399 |     'French Guiana (Guyane française)',
 400 |     'gf',
 401 |     '594',
 402 |   ],
 403 |   [
 404 |     'French Polynesia (Polynésie française)',
 405 |     'pf',
 406 |     '689',
 407 |   ],
 408 |   [
 409 |     'Gabon',
 410 |     'ga',
 411 |     '241',
 412 |   ],
 413 |   [
 414 |     'Gambia',
 415 |     'gm',
 416 |     '220',
 417 |   ],
 418 |   [
 419 |     'Georgia (საქართველო)',
 420 |     'ge',
 421 |     '995',
 422 |   ],
 423 |   [
 424 |     'Germany (Deutschland)',
 425 |     'de',
 426 |     '49',
 427 |   ],
 428 |   [
 429 |     'Ghana (Gaana)',
 430 |     'gh',
 431 |     '233',
 432 |   ],
 433 |   [
 434 |     'Gibraltar',
 435 |     'gi',
 436 |     '350',
 437 |   ],
 438 |   [
 439 |     'Greece (Ελλάδα)',
 440 |     'gr',
 441 |     '30',
 442 |   ],
 443 |   [
 444 |     'Greenland (Kalaallit Nunaat)',
 445 |     'gl',
 446 |     '299',
 447 |   ],
 448 |   [
 449 |     'Grenada',
 450 |     'gd',
 451 |     '1473',
 452 |   ],
 453 |   [
 454 |     'Guadeloupe',
 455 |     'gp',
 456 |     '590',
 457 |     0,
 458 |   ],
 459 |   [
 460 |     'Guam',
 461 |     'gu',
 462 |     '1671',
 463 |   ],
 464 |   [
 465 |     'Guatemala',
 466 |     'gt',
 467 |     '502',
 468 |   ],
 469 |   [
 470 |     'Guernsey',
 471 |     'gg',
 472 |     '44',
 473 |     1,
 474 |   ],
 475 |   [
 476 |     'Guinea (Guinée)',
 477 |     'gn',
 478 |     '224',
 479 |   ],
 480 |   [
 481 |     'Guinea-Bissau (Guiné Bissau)',
 482 |     'gw',
 483 |     '245',
 484 |   ],
 485 |   [
 486 |     'Guyana',
 487 |     'gy',
 488 |     '592',
 489 |   ],
 490 |   [
 491 |     'Haiti',
 492 |     'ht',
 493 |     '509',
 494 |   ],
 495 |   [
 496 |     'Honduras',
 497 |     'hn',
 498 |     '504',
 499 |   ],
 500 |   [
 501 |     'Hong Kong (香港)',
 502 |     'hk',
 503 |     '852',
 504 |   ],
 505 |   [
 506 |     'Hungary (Magyarország)',
 507 |     'hu',
 508 |     '36',
 509 |   ],
 510 |   [
 511 |     'Iceland (Ísland)',
 512 |     'is',
 513 |     '354',
 514 |   ],
 515 |   [
 516 |     'India (भारत)',
 517 |     'in',
 518 |     '91',
 519 |   ],
 520 |   [
 521 |     'Indonesia',
 522 |     'id',
 523 |     '62',
 524 |   ],
 525 |   [
 526 |     'Iran (‫ایران‬‎)',
 527 |     'ir',
 528 |     '98',
 529 |   ],
 530 |   [
 531 |     'Iraq (‫العراق‬‎)',
 532 |     'iq',
 533 |     '964',
 534 |   ],
 535 |   [
 536 |     'Ireland',
 537 |     'ie',
 538 |     '353',
 539 |   ],
 540 |   [
 541 |     'Isle of Man',
 542 |     'im',
 543 |     '44',
 544 |     2,
 545 |   ],
 546 |   [
 547 |     'Israel (‫ישראל‬‎)',
 548 |     'il',
 549 |     '972',
 550 |   ],
 551 |   [
 552 |     'Italy (Italia)',
 553 |     'it',
 554 |     '39',
 555 |     0,
 556 |   ],
 557 |   [
 558 |     'Jamaica',
 559 |     'jm',
 560 |     '1876',
 561 |   ],
 562 |   [
 563 |     'Japan (日本)',
 564 |     'jp',
 565 |     '81',
 566 |   ],
 567 |   [
 568 |     'Jersey',
 569 |     'je',
 570 |     '44',
 571 |     3,
 572 |   ],
 573 |   [
 574 |     'Jordan (‫الأردن‬‎)',
 575 |     'jo',
 576 |     '962',
 577 |   ],
 578 |   [
 579 |     'Kazakhstan (Казахстан)',
 580 |     'kz',
 581 |     '7',
 582 |     1,
 583 |   ],
 584 |   [
 585 |     'Kenya',
 586 |     'ke',
 587 |     '254',
 588 |   ],
 589 |   [
 590 |     'Kiribati',
 591 |     'ki',
 592 |     '686',
 593 |   ],
 594 |   [
 595 |     'Kosovo',
 596 |     'xk',
 597 |     '383',
 598 |   ],
 599 |   [
 600 |     'Kuwait (‫الكويت‬‎)',
 601 |     'kw',
 602 |     '965',
 603 |   ],
 604 |   [
 605 |     'Kyrgyzstan (Кыргызстан)',
 606 |     'kg',
 607 |     '996',
 608 |   ],
 609 |   [
 610 |     'Laos (ລາວ)',
 611 |     'la',
 612 |     '856',
 613 |   ],
 614 |   [
 615 |     'Latvia (Latvija)',
 616 |     'lv',
 617 |     '371',
 618 |   ],
 619 |   [
 620 |     'Lebanon (‫لبنان‬‎)',
 621 |     'lb',
 622 |     '961',
 623 |   ],
 624 |   [
 625 |     'Lesotho',
 626 |     'ls',
 627 |     '266',
 628 |   ],
 629 |   [
 630 |     'Liberia',
 631 |     'lr',
 632 |     '231',
 633 |   ],
 634 |   [
 635 |     'Libya (‫ليبيا‬‎)',
 636 |     'ly',
 637 |     '218',
 638 |   ],
 639 |   [
 640 |     'Liechtenstein',
 641 |     'li',
 642 |     '423',
 643 |   ],
 644 |   [
 645 |     'Lithuania (Lietuva)',
 646 |     'lt',
 647 |     '370',
 648 |   ],
 649 |   [
 650 |     'Luxembourg',
 651 |     'lu',
 652 |     '352',
 653 |   ],
 654 |   [
 655 |     'Macau (澳門)',
 656 |     'mo',
 657 |     '853',
 658 |   ],
 659 |   [
 660 |     'Macedonia (FYROM) (Македонија)',
 661 |     'mk',
 662 |     '389',
 663 |   ],
 664 |   [
 665 |     'Madagascar (Madagasikara)',
 666 |     'mg',
 667 |     '261',
 668 |   ],
 669 |   [
 670 |     'Malawi',
 671 |     'mw',
 672 |     '265',
 673 |   ],
 674 |   [
 675 |     'Malaysia',
 676 |     'my',
 677 |     '60',
 678 |   ],
 679 |   [
 680 |     'Maldives',
 681 |     'mv',
 682 |     '960',
 683 |   ],
 684 |   [
 685 |     'Mali',
 686 |     'ml',
 687 |     '223',
 688 |   ],
 689 |   [
 690 |     'Malta',
 691 |     'mt',
 692 |     '356',
 693 |   ],
 694 |   [
 695 |     'Marshall Islands',
 696 |     'mh',
 697 |     '692',
 698 |   ],
 699 |   [
 700 |     'Martinique',
 701 |     'mq',
 702 |     '596',
 703 |   ],
 704 |   [
 705 |     'Mauritania (‫موريتانيا‬‎)',
 706 |     'mr',
 707 |     '222',
 708 |   ],
 709 |   [
 710 |     'Mauritius (Moris)',
 711 |     'mu',
 712 |     '230',
 713 |   ],
 714 |   [
 715 |     'Mayotte',
 716 |     'yt',
 717 |     '262',
 718 |     1,
 719 |   ],
 720 |   [
 721 |     'Mexico (México)',
 722 |     'mx',
 723 |     '52',
 724 |   ],
 725 |   [
 726 |     'Micronesia',
 727 |     'fm',
 728 |     '691',
 729 |   ],
 730 |   [
 731 |     'Moldova (Republica Moldova)',
 732 |     'md',
 733 |     '373',
 734 |   ],
 735 |   [
 736 |     'Monaco',
 737 |     'mc',
 738 |     '377',
 739 |   ],
 740 |   [
 741 |     'Mongolia (Монгол)',
 742 |     'mn',
 743 |     '976',
 744 |   ],
 745 |   [
 746 |     'Montenegro (Crna Gora)',
 747 |     'me',
 748 |     '382',
 749 |   ],
 750 |   [
 751 |     'Montserrat',
 752 |     'ms',
 753 |     '1664',
 754 |   ],
 755 |   [
 756 |     'Morocco (‫المغرب‬‎)',
 757 |     'ma',
 758 |     '212',
 759 |     0,
 760 |   ],
 761 |   [
 762 |     'Mozambique (Moçambique)',
 763 |     'mz',
 764 |     '258',
 765 |   ],
 766 |   [
 767 |     'Myanmar (Burma) (မြန်မာ)',
 768 |     'mm',
 769 |     '95',
 770 |   ],
 771 |   [
 772 |     'Namibia (Namibië)',
 773 |     'na',
 774 |     '264',
 775 |   ],
 776 |   [
 777 |     'Nauru',
 778 |     'nr',
 779 |     '674',
 780 |   ],
 781 |   [
 782 |     'Nepal (नेपाल)',
 783 |     'np',
 784 |     '977',
 785 |   ],
 786 |   [
 787 |     'Netherlands (Nederland)',
 788 |     'nl',
 789 |     '31',
 790 |   ],
 791 |   [
 792 |     'New Caledonia (Nouvelle-Calédonie)',
 793 |     'nc',
 794 |     '687',
 795 |   ],
 796 |   [
 797 |     'New Zealand',
 798 |     'nz',
 799 |     '64',
 800 |   ],
 801 |   [
 802 |     'Nicaragua',
 803 |     'ni',
 804 |     '505',
 805 |   ],
 806 |   [
 807 |     'Niger (Nijar)',
 808 |     'ne',
 809 |     '227',
 810 |   ],
 811 |   [
 812 |     'Nigeria',
 813 |     'ng',
 814 |     '234',
 815 |   ],
 816 |   [
 817 |     'Niue',
 818 |     'nu',
 819 |     '683',
 820 |   ],
 821 |   [
 822 |     'Norfolk Island',
 823 |     'nf',
 824 |     '672',
 825 |   ],
 826 |   [
 827 |     'North Korea (조선 민주주의 인민 공화국)',
 828 |     'kp',
 829 |     '850',
 830 |   ],
 831 |   [
 832 |     'Northern Mariana Islands',
 833 |     'mp',
 834 |     '1670',
 835 |   ],
 836 |   [
 837 |     'Norway (Norge)',
 838 |     'no',
 839 |     '47',
 840 |     0,
 841 |   ],
 842 |   [
 843 |     'Oman (‫عُمان‬‎)',
 844 |     'om',
 845 |     '968',
 846 |   ],
 847 |   [
 848 |     'Pakistan (‫پاکستان‬‎)',
 849 |     'pk',
 850 |     '92',
 851 |   ],
 852 |   [
 853 |     'Palau',
 854 |     'pw',
 855 |     '680',
 856 |   ],
 857 |   [
 858 |     'Palestine (‫فلسطين‬‎)',
 859 |     'ps',
 860 |     '970',
 861 |   ],
 862 |   [
 863 |     'Panama (Panamá)',
 864 |     'pa',
 865 |     '507',
 866 |   ],
 867 |   [
 868 |     'Papua New Guinea',
 869 |     'pg',
 870 |     '675',
 871 |   ],
 872 |   [
 873 |     'Paraguay',
 874 |     'py',
 875 |     '595',
 876 |   ],
 877 |   [
 878 |     'Peru (Perú)',
 879 |     'pe',
 880 |     '51',
 881 |   ],
 882 |   [
 883 |     'Philippines',
 884 |     'ph',
 885 |     '63',
 886 |   ],
 887 |   [
 888 |     'Poland (Polska)',
 889 |     'pl',
 890 |     '48',
 891 |   ],
 892 |   [
 893 |     'Portugal',
 894 |     'pt',
 895 |     '351',
 896 |   ],
 897 |   [
 898 |     'Puerto Rico',
 899 |     'pr',
 900 |     '1',
 901 |     3,
 902 |     ['787', '939'],
 903 |   ],
 904 |   [
 905 |     'Qatar (‫قطر‬‎)',
 906 |     'qa',
 907 |     '974',
 908 |   ],
 909 |   [
 910 |     'Réunion (La Réunion)',
 911 |     're',
 912 |     '262',
 913 |     0,
 914 |   ],
 915 |   [
 916 |     'Romania (România)',
 917 |     'ro',
 918 |     '40',
 919 |   ],
 920 |   [
 921 |     'Russia (Россия)',
 922 |     'ru',
 923 |     '7',
 924 |     0,
 925 |   ],
 926 |   [
 927 |     'Rwanda',
 928 |     'rw',
 929 |     '250',
 930 |   ],
 931 |   [
 932 |     'Saint Barthélemy',
 933 |     'bl',
 934 |     '590',
 935 |     1,
 936 |   ],
 937 |   [
 938 |     'Saint Helena',
 939 |     'sh',
 940 |     '290',
 941 |   ],
 942 |   [
 943 |     'Saint Kitts and Nevis',
 944 |     'kn',
 945 |     '1869',
 946 |   ],
 947 |   [
 948 |     'Saint Lucia',
 949 |     'lc',
 950 |     '1758',
 951 |   ],
 952 |   [
 953 |     'Saint Martin (Saint-Martin (partie française))',
 954 |     'mf',
 955 |     '590',
 956 |     2,
 957 |   ],
 958 |   [
 959 |     'Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)',
 960 |     'pm',
 961 |     '508',
 962 |   ],
 963 |   [
 964 |     'Saint Vincent and the Grenadines',
 965 |     'vc',
 966 |     '1784',
 967 |   ],
 968 |   [
 969 |     'Samoa',
 970 |     'ws',
 971 |     '685',
 972 |   ],
 973 |   [
 974 |     'San Marino',
 975 |     'sm',
 976 |     '378',
 977 |   ],
 978 |   [
 979 |     'São Tomé and Príncipe (São Tomé e Príncipe)',
 980 |     'st',
 981 |     '239',
 982 |   ],
 983 |   [
 984 |     'Saudi Arabia (‫المملكة العربية السعودية‬‎)',
 985 |     'sa',
 986 |     '966',
 987 |   ],
 988 |   [
 989 |     'Senegal (Sénégal)',
 990 |     'sn',
 991 |     '221',
 992 |   ],
 993 |   [
 994 |     'Serbia (Србија)',
 995 |     'rs',
 996 |     '381',
 997 |   ],
 998 |   [
 999 |     'Seychelles',
1000 |     'sc',
1001 |     '248',
1002 |   ],
1003 |   [
1004 |     'Sierra Leone',
1005 |     'sl',
1006 |     '232',
1007 |   ],
1008 |   [
1009 |     'Singapore',
1010 |     'sg',
1011 |     '65',
1012 |   ],
1013 |   [
1014 |     'Sint Maarten',
1015 |     'sx',
1016 |     '1721',
1017 |   ],
1018 |   [
1019 |     'Slovakia (Slovensko)',
1020 |     'sk',
1021 |     '421',
1022 |   ],
1023 |   [
1024 |     'Slovenia (Slovenija)',
1025 |     'si',
1026 |     '386',
1027 |   ],
1028 |   [
1029 |     'Solomon Islands',
1030 |     'sb',
1031 |     '677',
1032 |   ],
1033 |   [
1034 |     'Somalia (Soomaaliya)',
1035 |     'so',
1036 |     '252',
1037 |   ],
1038 |   [
1039 |     'South Africa',
1040 |     'za',
1041 |     '27',
1042 |   ],
1043 |   [
1044 |     'South Korea (대한민국)',
1045 |     'kr',
1046 |     '82',
1047 |   ],
1048 |   [
1049 |     'South Sudan (‫جنوب السودان‬‎)',
1050 |     'ss',
1051 |     '211',
1052 |   ],
1053 |   [
1054 |     'Spain (España)',
1055 |     'es',
1056 |     '34',
1057 |   ],
1058 |   [
1059 |     'Sri Lanka (ශ්‍රී ලංකාව)',
1060 |     'lk',
1061 |     '94',
1062 |   ],
1063 |   [
1064 |     'Sudan (‫السودان‬‎)',
1065 |     'sd',
1066 |     '249',
1067 |   ],
1068 |   [
1069 |     'Suriname',
1070 |     'sr',
1071 |     '597',
1072 |   ],
1073 |   [
1074 |     'Svalbard and Jan Mayen',
1075 |     'sj',
1076 |     '47',
1077 |     1,
1078 |   ],
1079 |   [
1080 |     'Swaziland',
1081 |     'sz',
1082 |     '268',
1083 |   ],
1084 |   [
1085 |     'Sweden (Sverige)',
1086 |     'se',
1087 |     '46',
1088 |   ],
1089 |   [
1090 |     'Switzerland (Schweiz)',
1091 |     'ch',
1092 |     '41',
1093 |   ],
1094 |   [
1095 |     'Syria (‫سوريا‬‎)',
1096 |     'sy',
1097 |     '963',
1098 |   ],
1099 |   [
1100 |     'Taiwan (台灣)',
1101 |     'tw',
1102 |     '886',
1103 |   ],
1104 |   [
1105 |     'Tajikistan',
1106 |     'tj',
1107 |     '992',
1108 |   ],
1109 |   [
1110 |     'Tanzania',
1111 |     'tz',
1112 |     '255',
1113 |   ],
1114 |   [
1115 |     'Thailand (ไทย)',
1116 |     'th',
1117 |     '66',
1118 |   ],
1119 |   [
1120 |     'Timor-Leste',
1121 |     'tl',
1122 |     '670',
1123 |   ],
1124 |   [
1125 |     'Togo',
1126 |     'tg',
1127 |     '228',
1128 |   ],
1129 |   [
1130 |     'Tokelau',
1131 |     'tk',
1132 |     '690',
1133 |   ],
1134 |   [
1135 |     'Tonga',
1136 |     'to',
1137 |     '676',
1138 |   ],
1139 |   [
1140 |     'Trinidad and Tobago',
1141 |     'tt',
1142 |     '1868',
1143 |   ],
1144 |   [
1145 |     'Tunisia (‫تونس‬‎)',
1146 |     'tn',
1147 |     '216',
1148 |   ],
1149 |   [
1150 |     'Turkey (Türkiye)',
1151 |     'tr',
1152 |     '90',
1153 |   ],
1154 |   [
1155 |     'Turkmenistan',
1156 |     'tm',
1157 |     '993',
1158 |   ],
1159 |   [
1160 |     'Turks and Caicos Islands',
1161 |     'tc',
1162 |     '1649',
1163 |   ],
1164 |   [
1165 |     'Tuvalu',
1166 |     'tv',
1167 |     '688',
1168 |   ],
1169 |   [
1170 |     'U.S. Virgin Islands',
1171 |     'vi',
1172 |     '1340',
1173 |   ],
1174 |   [
1175 |     'Uganda',
1176 |     'ug',
1177 |     '256',
1178 |   ],
1179 |   [
1180 |     'Ukraine (Україна)',
1181 |     'ua',
1182 |     '380',
1183 |   ],
1184 |   [
1185 |     'United Arab Emirates (‫الإمارات العربية المتحدة‬‎)',
1186 |     'ae',
1187 |     '971',
1188 |   ],
1189 |   [
1190 |     'United Kingdom',
1191 |     'gb',
1192 |     '44',
1193 |     0,
1194 |   ],
1195 |   [
1196 |     'United States',
1197 |     'us',
1198 |     '1',
1199 |     0,
1200 |   ],
1201 |   [
1202 |     'Uruguay',
1203 |     'uy',
1204 |     '598',
1205 |   ],
1206 |   [
1207 |     'Uzbekistan (Oʻzbekiston)',
1208 |     'uz',
1209 |     '998',
1210 |   ],
1211 |   [
1212 |     'Vanuatu',
1213 |     'vu',
1214 |     '678',
1215 |   ],
1216 |   [
1217 |     'Vatican City (Città del Vaticano)',
1218 |     'va',
1219 |     '39',
1220 |     1,
1221 |   ],
1222 |   [
1223 |     'Venezuela',
1224 |     've',
1225 |     '58',
1226 |   ],
1227 |   [
1228 |     'Vietnam (Việt Nam)',
1229 |     'vn',
1230 |     '84',
1231 |   ],
1232 |   [
1233 |     'Wallis and Futuna (Wallis-et-Futuna)',
1234 |     'wf',
1235 |     '681',
1236 |   ],
1237 |   [
1238 |     'Western Sahara (‫الصحراء الغربية‬‎)',
1239 |     'eh',
1240 |     '212',
1241 |     1,
1242 |   ],
1243 |   [
1244 |     'Yemen (‫اليمن‬‎)',
1245 |     'ye',
1246 |     '967',
1247 |   ],
1248 |   [
1249 |     'Zambia',
1250 |     'zm',
1251 |     '260',
1252 |   ],
1253 |   [
1254 |     'Zimbabwe',
1255 |     'zw',
1256 |     '263',
1257 |   ],
1258 |   [
1259 |     'Åland Islands',
1260 |     'ax',
1261 |     '358',
1262 |     1,
1263 |   ],
1264 | ];
1265 | 
1266 | export default allCountries.map(country => ({
1267 |   name: country[0],
1268 |   iso2: country[1].toUpperCase(),
1269 |   dialCode: country[2],
1270 |   priority: country[3] || 0,
1271 |   areaCodes: country[4] || null,
1272 | }));
1273 | 


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | import plugin from './plugin';
2 | 
3 | export default plugin;
4 | 


--------------------------------------------------------------------------------
/src/lib/plugin.js:
--------------------------------------------------------------------------------
 1 | import utils, { defaultOptions } from './utils';
 2 | import VueTelInputVuetify from './vue-tel-input-vuetify.vue';
 3 | 
 4 | export function install(Vue, customOptions = {}) {
 5 |   if (install.installed) return;
 6 |   if (!customOptions || !customOptions.vuetify) {
 7 |     return;
 8 |   }
 9 |   const { vuetify: vuetifyFramework } = customOptions;
10 |   install.installed = true;
11 |   install.vuetify = vuetifyFramework;
12 |   utils.options = {
13 |     ...defaultOptions,
14 |     ...customOptions,
15 |   };
16 |   Vue.use(vuetifyFramework);
17 |   Vue.component('vue-tel-input-vuetify', VueTelInputVuetify);
18 | }
19 | 
20 | export { VueTelInputVuetify };
21 | 
22 | const plugin = {
23 |   install,
24 | };
25 | 
26 | // Auto-install
27 | let GlobalVue = null;
28 | if (typeof window !== 'undefined') {
29 |   GlobalVue = window.Vue;
30 | } else if (typeof global !== 'undefined') {
31 |   GlobalVue = global.Vue;
32 | }
33 | if (GlobalVue) {
34 |   GlobalVue.use(plugin);
35 | }
36 | 
37 | export default plugin;
38 | 


--------------------------------------------------------------------------------
/src/lib/utils.js:
--------------------------------------------------------------------------------
 1 | import allCountries from './all-countries';
 2 | import 'whatwg-fetch';
 3 | 
 4 | export function getCountry() {
 5 |   return fetch('https://ip2c.org/s')
 6 |     .then(response => response.text())
 7 |     .then((response) => {
 8 |       const result = (response || '').toString();
 9 | 
10 |       if (!result || result[0] !== '1') {
11 |         throw new Error('unable to fetch the country');
12 |       }
13 | 
14 |       return result.substr(2, 2);
15 |     });
16 | }
17 | 
18 | // Credits: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
19 | export function setCaretPosition(ctrl, pos) {
20 |   // Modern browsers
21 |   if (ctrl.setSelectionRange) {
22 |     ctrl.focus();
23 |     ctrl.setSelectionRange(pos, pos);
24 | 
25 |   // IE8 and below
26 |   } else if (ctrl.createTextRange) {
27 |     const range = ctrl.createTextRange();
28 |     range.collapse(true);
29 |     range.moveEnd('character', pos);
30 |     range.moveStart('character', pos);
31 |     range.select();
32 |   }
33 | }
34 | 
35 | export const defaultOptions = {
36 |   placeholder: 'Enter a phone number',
37 |   label: 'Enter a Phone Number',
38 |   disabledFetchingCountry: false,
39 |   disabled: false,
40 |   disabledFormatting: false,
41 |   mode: '',
42 |   invalidMsg: '',
43 |   required: false,
44 |   allCountries,
45 |   defaultCountry: '',
46 |   enabledCountryCode: false,
47 |   enabledFlags: true,
48 |   preferredCountries: [],
49 |   onlyCountries: [],
50 |   ignoredCountries: [],
51 |   autofocus: false,
52 |   autocomplete: 'on',
53 |   name: 'telephone',
54 |   wrapperClasses: '',
55 |   inputClasses: '',
56 |   inputId: '',
57 |   dropdownOptions: {},
58 |   inputOptions: {},
59 |   maxLen: 25,
60 |   dynamicPlaceholder: false,
61 | };
62 | 
63 | export default {
64 |   options: { ...defaultOptions },
65 | };
66 | 


--------------------------------------------------------------------------------
/src/lib/vue-tel-input-vuetify.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="['vue-tel-input-vuetify', wrapperClasses]">
  3 |     <div class="country-code">
  4 |       <v-select
  5 |         ref="countryInput"
  6 |         v-model="countryCode"
  7 |         :append-icon="appendIcon"
  8 |         :class="selectClasses"
  9 |         :label="selectLabel"
 10 |         @change="onChangeCountryCode"
 11 |         :items="sortedCountries"
 12 |         :disabled="disabled"
 13 |         :outlined="outlined"
 14 |         :filled="filled"
 15 |         :flat="flat"
 16 |         :light="light"
 17 |         :dark="dark"
 18 |         :readonly="readonly"
 19 |         :shaped="shaped"
 20 |         :rounded="rounded"
 21 |         :background-color="backgroundColor"
 22 |         :color="color"
 23 |         :dense="dense"
 24 |         :menu-props="menuProps"
 25 |         :height="inputHeight"
 26 |         item-text="name"
 27 |         item-value="iso2"
 28 |         return-object
 29 |       >
 30 |         <template v-slot:selection>
 31 |           <div :class="activeCountry.iso2.toLowerCase()" class="vti__flag" />
 32 |         </template>
 33 |         <template v-slot:item="data">
 34 |           <span :class="data.item.iso2.toLowerCase()" class="vti__flag" />
 35 |           <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
 36 |         </template>
 37 |       </v-select>
 38 |     </div>
 39 |     <v-text-field
 40 |       ref="input"
 41 |       type="tel"
 42 |       :class="textFieldClasses"
 43 |       :messages="messages"
 44 |       :error-messages="errorMessages"
 45 |       :success-messages="successMessages"
 46 |       :hint="hint"
 47 |       :suffix="suffix"
 48 |       :prefix="prefix"
 49 |       :background-color="backgroundColor"
 50 |       :color="color"
 51 |       :rules="rules"
 52 |       :loader-height="loaderHeight"
 53 |       :loading="loading"
 54 |       :hide-details="hideDetails"
 55 |       :clearable="clearable"
 56 |       :filled="filled"
 57 |       :full-width="fullWidth"
 58 |       :flat="flat"
 59 |       :light="light"
 60 |       :dark="dark"
 61 |       :validate-on-blur="validateOnBlur"
 62 |       :outlined="outlined"
 63 |       :dense="dense"
 64 |       :persistent-hint="persistentHint"
 65 |       :readonly="readonly"
 66 |       :error="error"
 67 |       :success="success"
 68 |       :shaped="shaped"
 69 |       :single-line="singleLine"
 70 |       :rounded="rounded"
 71 |       :value="value"
 72 |       :label="label"
 73 |       :disabled="disabled"
 74 |       :placeholder="placeholder"
 75 |       :persistent-placeholder="persistentPlaceholder"
 76 |       v-model="phone"
 77 |       :autofocus="autofocus"
 78 |       :name="name"
 79 |       :required="required"
 80 |       :autocomplete="autocomplete"
 81 |       :id="inputId"
 82 |       :maxlength="maxLen"
 83 |       :tabindex="
 84 |         inputOptions && inputOptions.tabindex ? inputOptions.tabindex : 0
 85 |       "
 86 |       :height="inputHeight"
 87 |       @input="onInput"
 88 |       @blur="onBlur"
 89 |       @focus="onFocus"
 90 |       @click="onClick"
 91 |       @change="onChange"
 92 |       @mousedown="onMouseDown"
 93 |       @mouseup="onMouseUp"
 94 |       @keydown="onKeyDown"
 95 |       @keyup.enter="onEnter"
 96 |       @keyup.space="onSpace"
 97 |     >
 98 |       <template #append>
 99 |         <slot name="append" />
100 |       </template>
101 |       <template #append-outer>
102 |         <slot name="append-outer" />
103 |       </template>
104 |       <template #label>
105 |         <slot name="label" />
106 |       </template>
107 |       <template #message="{ key, message }">
108 |         <slot name="message" v-bind="{ key, message }" />
109 |       </template>
110 |       <template #prepend>
111 |         <slot name="prepend" />
112 |       </template>
113 |       <template #prepend-inner>
114 |         <slot name="prepend-inner" />
115 |       </template>
116 |       <template #progress>
117 |         <slot name="progress" />
118 |       </template>
119 |     </v-text-field>
120 |   </div>
121 | </template>
122 | 
123 | <script>
124 | import PhoneNumber from 'awesome-phonenumber';
125 | import utils, { getCountry, setCaretPosition } from './utils';
126 | 
127 | function getDefault(key) {
128 |   return utils.options[key];
129 | }
130 | 
131 | // Polyfill for Event.path in IE 11: https://stackoverflow.com/a/46093727
132 | function getParents(node, memo) {
133 |   const parsedMemo = memo || [];
134 |   const { parentNode } = node;
135 |   if (!parentNode) {
136 |     return parsedMemo;
137 |   }
138 |   return getParents(parentNode, parsedMemo.concat(parentNode));
139 | }
140 | 
141 | export default {
142 |   name: 'VueTelInputVuetify',
143 |   directives: {
144 |     // Click-outside by BosNaufal: https://github.com/BosNaufal/vue-click-outside
145 |     'click-outside': {
146 |       bind(el, binding, vNode) {
147 |         // Provided expression must evaluate to a function.
148 |         if (typeof binding.value !== 'function') {
149 |           const compName = vNode.context.name;
150 |           let warn = `[Vue-click-outside:] provided expression ${binding.expression} is not a function, but has to be`;
151 |           if (compName) {
152 |             warn += `Found in component ${compName}`;
153 |           }
154 |           console.warn(warn);
155 |         }
156 |         // Define Handler and cache it on the element
157 |         const { bubble } = binding.modifiers;
158 |         const handler = (e) => {
159 |           // Fall back to composedPath if e.path is undefined
160 |           const path = e.path
161 |             || (e.composedPath ? e.composedPath() : false)
162 |             || getParents(e.target);
163 |           if (
164 |             bubble
165 |             || (path.length && !el.contains(path[0]) && el !== path[0])
166 |           ) {
167 |             binding.value(e);
168 |           }
169 |         };
170 |         el.__vueClickOutside__ = handler;
171 |         // add Event Listeners
172 |         document.addEventListener('click', handler);
173 |       },
174 |       unbind(el) {
175 |         // Remove Event Listeners
176 |         document.removeEventListener('click', el.__vueClickOutside__);
177 |         el.__vueClickOutside__ = null;
178 |       },
179 |     },
180 |   },
181 |   props: {
182 |     messages: {
183 |       type: [Array, String],
184 |     },
185 |     errorMessages: {
186 |       type: [Array, String],
187 |     },
188 |     successMessages: {
189 |       type: [Array, String],
190 |     },
191 |     hint: {
192 |       type: String,
193 |     },
194 |     suffix: {
195 |       type: String,
196 |     },
197 |     prefix: {
198 |       type: String,
199 |     },
200 |     appendIcon: {
201 |       type: String,
202 |       default: '',
203 |     },
204 |     backgroundColor: {
205 |       type: String,
206 |     },
207 |     color: {
208 |       type: String,
209 |     },
210 |     rules: {
211 |       type: Array,
212 |       default: () => [],
213 |     },
214 |     loaderHeight: {
215 |       type: [Number, String],
216 |       default: 2,
217 |     },
218 |     loading: {
219 |       type: [Boolean, String],
220 |       default: false,
221 |     },
222 |     hideDetails: {
223 |       type: [Boolean, String],
224 |     },
225 |     clearable: {
226 |       type: Boolean,
227 |       default: false,
228 |     },
229 |     filled: {
230 |       type: Boolean,
231 |       default: false,
232 |     },
233 |     fullWidth: {
234 |       type: Boolean,
235 |       default: false,
236 |     },
237 |     flat: {
238 |       type: Boolean,
239 |       default: false,
240 |     },
241 |     light: {
242 |       type: Boolean,
243 |       default: false,
244 |     },
245 |     dark: {
246 |       type: Boolean,
247 |       default: false,
248 |     },
249 |     validateOnBlur: {
250 |       type: Boolean,
251 |       default: false,
252 |     },
253 |     outlined: {
254 |       type: Boolean,
255 |       default: false,
256 |     },
257 |     dense: {
258 |       type: Boolean,
259 |       default: false,
260 |     },
261 |     persistentHint: {
262 |       type: Boolean,
263 |       default: false,
264 |     },
265 |     readonly: {
266 |       type: Boolean,
267 |       default: false,
268 |     },
269 |     error: {
270 |       type: Boolean,
271 |       default: false,
272 |     },
273 |     success: {
274 |       type: Boolean,
275 |       default: false,
276 |     },
277 |     shaped: {
278 |       type: Boolean,
279 |       default: false,
280 |     },
281 |     singleLine: {
282 |       type: Boolean,
283 |       default: false,
284 |     },
285 |     rounded: {
286 |       type: Boolean,
287 |       default: false,
288 |     },
289 |     inputHeight: {
290 |       type: String,
291 |       default: '',
292 |     },
293 |     value: {
294 |       type: String,
295 |       default: '',
296 |     },
297 |     label: {
298 |       type: String,
299 |       default: () => getDefault('label'),
300 |     },
301 |     selectLabel: {
302 |       type: String,
303 |       default: '',
304 |     },
305 |     menuProps: {
306 |       type: [String, Array, Object],
307 |       default: () => {},
308 |     },
309 |     placeholder: {
310 |       type: String,
311 |       default: () => getDefault('placeholder'),
312 |     },
313 |     persistentPlaceholder: {
314 |       type: Boolean,
315 |       default: false,
316 |     },
317 |     disabledFetchingCountry: {
318 |       type: Boolean,
319 |       default: () => getDefault('disabledFetchingCountry'),
320 |     },
321 |     disabled: {
322 |       type: Boolean,
323 |       default: () => getDefault('disabled'),
324 |     },
325 |     mode: {
326 |       type: String,
327 |       default: () => getDefault('mode'),
328 |     },
329 |     invalidMsg: {
330 |       type: String,
331 |       default: () => getDefault('invalidMsg'),
332 |     },
333 |     required: {
334 |       type: Boolean,
335 |       default: () => getDefault('required'),
336 |     },
337 |     allCountries: {
338 |       type: Array,
339 |       default: () => getDefault('allCountries'),
340 |     },
341 |     defaultCountry: {
342 |       // Default country code, ie: 'AU'
343 |       // Will override the current country of user
344 |       type: String,
345 |       default: () => getDefault('defaultCountry'),
346 |     },
347 |     preferredCountries: {
348 |       type: Array,
349 |       default: () => getDefault('preferredCountries'),
350 |     },
351 |     onlyCountries: {
352 |       type: Array,
353 |       default: () => getDefault('onlyCountries'),
354 |     },
355 |     ignoredCountries: {
356 |       type: Array,
357 |       default: () => getDefault('ignoredCountries'),
358 |     },
359 |     autocomplete: {
360 |       type: String,
361 |       default: () => getDefault('autocomplete'),
362 |     },
363 |     autofocus: {
364 |       type: Boolean,
365 |       default: () => getDefault('autofocus'),
366 |     },
367 |     name: {
368 |       type: String,
369 |       default: () => getDefault('name'),
370 |     },
371 |     wrapperClasses: {
372 |       type: [String, Array, Object],
373 |       default: () => getDefault('wrapperClasses'),
374 |     },
375 |     textFieldClasses: {
376 |       type: [String, Array, Object],
377 |       default: () => '',
378 |     },
379 |     selectClasses: {
380 |       type: [String, Array, Object],
381 |       default: () => '',
382 |     },
383 |     inputClasses: {
384 |       type: [String, Array, Object],
385 |       default: () => '',
386 |     },
387 |     inputId: {
388 |       type: String,
389 |       default: () => getDefault('inputId'),
390 |     },
391 |     inputOptions: {
392 |       type: Object,
393 |       default: () => getDefault('inputOptions'),
394 |     },
395 |     maxLen: {
396 |       type: Number,
397 |       default: () => getDefault('maxLen'),
398 |     },
399 |   },
400 |   data() {
401 |     return {
402 |       phone: '',
403 |       activeCountry: { iso2: '' },
404 |       open: false,
405 |       finishMounted: false,
406 |       selectedIndex: null,
407 |       typeToFindInput: '',
408 |       typeToFindTimer: null,
409 |       cursorPosition: 0,
410 |       countryCode: null,
411 |     };
412 |   },
413 |   computed: {
414 |     parsedMode() {
415 |       if (this.mode) {
416 |         if (!['international', 'national'].includes(this.mode)) {
417 |           console.error('Invalid value of prop "mode"');
418 |         } else {
419 |           return this.mode;
420 |         }
421 |       }
422 |       if (!this.phone || this.phone[0] !== '+') {
423 |         return 'national';
424 |       }
425 |       return 'international';
426 |     },
427 |     filteredCountries() {
428 |       // List countries after filtered
429 |       if (this.onlyCountries.length) {
430 |         return this.getCountries(this.onlyCountries);
431 |       }
432 |       if (this.ignoredCountries.length) {
433 |         return this.allCountries.filter(
434 |           ({ iso2 }) => !this.ignoredCountries.includes(iso2.toUpperCase())
435 |             && !this.ignoredCountries.includes(iso2.toLowerCase()),
436 |         );
437 |       }
438 |       return this.allCountries;
439 |     },
440 |     sortedCountries() {
441 |       // Sort the list countries: from preferred countries to all countries
442 |       const preferredCountries = this.getCountries(this.preferredCountries).map(
443 |         country => ({
444 |           ...country,
445 |           preferred: true,
446 |         }),
447 |       );
448 |       return [...preferredCountries, ...this.filteredCountries];
449 |     },
450 |     phoneObject() {
451 |       const result = PhoneNumber(
452 |         this.phone || '',
453 |         this.activeCountry.iso2,
454 |       ).toJSON();
455 |       Object.assign(result, {
456 |         isValid: result.valid,
457 |         country: this.activeCountry,
458 |       });
459 |       if (!this.phone) {
460 |         return {
461 |           ...result,
462 |           number: {
463 |             input: '',
464 |           },
465 |         };
466 |       }
467 |       return result;
468 |     },
469 |     phoneText() {
470 |       let key = 'input';
471 |       if (this.phoneObject.valid) {
472 |         key = this.parsedMode;
473 |       }
474 |       return this.phoneObject.number[key] || '';
475 |     },
476 |   },
477 |   watch: {
478 |     // eslint-disable-next-line func-names
479 |     'phoneObject.valid': function (value) {
480 |       if (value) {
481 |         this.phone = this.phoneText;
482 |       }
483 |       this.$emit('validate', this.phoneObject);
484 |       this.$emit('onValidate', this.phoneObject); // Deprecated
485 |     },
486 |     value() {
487 |       this.phone = this.value;
488 |     },
489 |     open(isDropdownOpened) {
490 |       // Emit open and close events
491 |       if (isDropdownOpened) {
492 |         this.$emit('open');
493 |       } else {
494 |         this.$emit('close');
495 |       }
496 |     },
497 |     phone(newValue, oldValue) {
498 |       if (newValue) {
499 |         if (newValue[0] === '+') {
500 |           const code = PhoneNumber(newValue).getRegionCode();
501 |           if (code) {
502 |             this.activeCountry = this.findCountry(code) || this.activeCountry;
503 |           }
504 |         }
505 |       }
506 |       // Reset the cursor to current position if it's not the last character.
507 |       if (oldValue && this.cursorPosition < oldValue.length) {
508 |         this.$nextTick(() => {
509 |           setCaretPosition(this.$refs.input, this.cursorPosition);
510 |         });
511 |       }
512 | 
513 |       this.$emit('input', this.phoneText, this.phoneObject);
514 |     },
515 |     activeCountry(value) {
516 |       if (value && value.iso2) {
517 |         this.$emit('country-changed', value);
518 |       }
519 |     },
520 |   },
521 |   mounted() {
522 |     this.$watch('$refs.countryInput.isResetting', v => v && this.reset());
523 |     this.reset();
524 |   },
525 |   created() {
526 |     if (this.value) {
527 |       this.phone = this.value.trim();
528 |     }
529 |   },
530 |   methods: {
531 |     initializeCountry() {
532 |       return new Promise((resolve) => {
533 |         /**
534 |          * 1. If the phone included prefix (+12), try to get the country and set it
535 |          */
536 |         if (this.phone && this.phone[0] === '+') {
537 |           const activeCountry = PhoneNumber(this.phone).getRegionCode();
538 |           if (activeCountry) {
539 |             this.choose(activeCountry);
540 |             resolve();
541 |             return;
542 |           }
543 |         }
544 |         /**
545 |          * 2. Use default country if passed from parent
546 |          */
547 |         if (this.defaultCountry) {
548 |           const defaultCountry = this.findCountry(this.defaultCountry);
549 |           if (defaultCountry) {
550 |             this.choose(defaultCountry);
551 |             resolve();
552 |             return;
553 |           }
554 |         }
555 |         const fallbackCountry = this.findCountry(this.preferredCountries[0])
556 |           || this.filteredCountries[0];
557 |         /**
558 |          * 3. Check if fetching country based on user's IP is allowed, set it as the default country
559 |          */
560 |         if (!this.disabledFetchingCountry) {
561 |           getCountry()
562 |             .then((res) => {
563 |               if (this.phone === '') {
564 |                 this.activeCountry = this.findCountry(res) || this.activeCountry;
565 |               }
566 |             })
567 |             .catch((error) => {
568 |               console.warn(error);
569 |               /**
570 |                * 4. Use the first country from preferred list (if available) or all countries list
571 |                */
572 |               this.choose(fallbackCountry);
573 |             })
574 |             .finally(() => {
575 |               resolve();
576 |             });
577 |         } else {
578 |           /**
579 |            * 4. Use the first country from preferred list (if available) or all countries list
580 |            */
581 |           this.choose(fallbackCountry);
582 |           resolve();
583 |         }
584 |       });
585 |     },
586 |     /**
587 |      * Get the list of countries from the list of iso2 code
588 |      */
589 |     getCountries(list = []) {
590 |       return list
591 |         .map(countryCode => this.findCountry(countryCode))
592 |         .filter(Boolean);
593 |     },
594 |     findCountry(iso = '') {
595 |       return this.allCountries.find(
596 |         country => country.iso2 === iso.toUpperCase(),
597 |       );
598 |     },
599 |     getItemClass(index, iso2) {
600 |       const highlighted = this.selectedIndex === index;
601 |       const lastPreferred = index === this.preferredCountries.length - 1;
602 |       const preferred = this.preferredCountries.some(
603 |         c => c.toUpperCase() === iso2,
604 |       );
605 |       return {
606 |         highlighted,
607 |         'last-preferred': lastPreferred,
608 |         preferred,
609 |       };
610 |     },
611 |     choose(country, toEmitInputEvent = false) {
612 |       this.activeCountry = country || this.activeCountry || {};
613 |       if (
614 |         this.phone
615 |         && this.phone[0] === '+'
616 |         && this.activeCountry.iso2
617 |         && this.phoneObject.number.significant
618 |       ) {
619 |         // Attach the current phone number with the newly selected country
620 |         this.phone = PhoneNumber(
621 |           this.phoneObject.number.significant,
622 |           this.activeCountry.iso2,
623 |         ).getNumber('international');
624 |       } else if (
625 |         this.inputOptions
626 |         && this.inputOptions.showDialCode
627 |         && country
628 |       ) {
629 |         // Reset phone if the showDialCode is set
630 |         this.phone = `+${country.dialCode}`;
631 |       }
632 |       if (toEmitInputEvent) {
633 |         this.$emit('input', this.phoneText, this.phoneObject);
634 |         this.$emit('onInput', this.phoneObject); // Deprecated
635 |       }
636 |     },
637 |     onInput(e) {
638 |       // this.$refs.input.setCustomValidity(
639 |       //   this.phoneObject.valid ? "" : this.invalidMsg
640 |       // );
641 |       // Returns response.number to assign it to v-model (if being used)
642 |       // Returns full response for cases @input is used
643 |       // and parent wants to return the whole response.
644 |       this.$emit('input', this.phoneText, this.phoneObject);
645 |       this.$emit('onInput', this.phoneObject); // Deprecated
646 |       // Keep the current cursor position just in case the input reformatted
647 |       // and it gets moved to the last character.
648 |       if (e && e.target) {
649 |         this.cursorPosition = e.target.selectionStart;
650 |       }
651 |     },
652 |     onBlur() {
653 |       this.$emit('blur');
654 |       this.$emit('onBlur'); // Deprecated
655 |     },
656 |     onFocus(event) {
657 |       this.$emit('focus', event);
658 |     },
659 |     onClick(event) {
660 |       this.$emit('click', event);
661 |     },
662 |     onChange(value) {
663 |       this.$emit('change', value);
664 |     },
665 |     onMouseUp(event) {
666 |       this.$emit('mouseup', event);
667 |     },
668 |     onMouseDown(event) {
669 |       this.$emit('mousedown', event);
670 |     },
671 |     onKeyDown(event) {
672 |       this.$emit('keydown', event);
673 |     },
674 |     onEnter() {
675 |       this.$emit('enter');
676 |       this.$emit('onEnter'); // Deprecated
677 |     },
678 |     onSpace() {
679 |       this.$emit('space');
680 |       this.$emit('onSpace'); // Deprecated
681 |     },
682 |     focus() {
683 |       this.$refs.input.focus();
684 |     },
685 |     toggleDropdown() {
686 |       if (this.disabled) {
687 |         return;
688 |       }
689 |       this.open = !this.open;
690 |     },
691 |     clickedOutside() {
692 |       this.open = false;
693 |     },
694 |     keyboardNav(e) {
695 |       if (e.keyCode === 40) {
696 |         // down arrow
697 |         e.preventDefault();
698 |         this.open = true;
699 |         if (this.selectedIndex === null) {
700 |           this.selectedIndex = 0;
701 |         } else {
702 |           this.selectedIndex = Math.min(
703 |             this.sortedCountries.length - 1,
704 |             this.selectedIndex + 1,
705 |           );
706 |         }
707 |         const selEle = this.$refs.list.children[this.selectedIndex];
708 |         if (
709 |           selEle.offsetTop + selEle.clientHeight
710 |           > this.$refs.list.scrollTop + this.$refs.list.clientHeight
711 |         ) {
712 |           this.$refs.list.scrollTop = selEle.offsetTop
713 |             - this.$refs.list.clientHeight
714 |             + selEle.clientHeight;
715 |         }
716 |       } else if (e.keyCode === 38) {
717 |         // up arrow
718 |         e.preventDefault();
719 |         this.open = true;
720 |         if (this.selectedIndex === null) {
721 |           this.selectedIndex = this.sortedCountries.length - 1;
722 |         } else {
723 |           this.selectedIndex = Math.max(0, this.selectedIndex - 1);
724 |         }
725 |         const selEle = this.$refs.list.children[this.selectedIndex];
726 |         if (selEle.offsetTop < this.$refs.list.scrollTop) {
727 |           this.$refs.list.scrollTop = selEle.offsetTop;
728 |         }
729 |       } else if (e.keyCode === 13) {
730 |         // enter key
731 |         if (this.selectedIndex !== null) {
732 |           this.choose(this.sortedCountries[this.selectedIndex]);
733 |         }
734 |         this.open = !this.open;
735 |       } else {
736 |         // typing a country's name
737 |         this.typeToFindInput += e.key;
738 |         clearTimeout(this.typeToFindTimer);
739 |         this.typeToFindTimer = setTimeout(() => {
740 |           this.typeToFindInput = '';
741 |         }, 700);
742 |         // don't include preferred countries so we jump to the right place in the alphabet
743 |         const typedCountryI = this.sortedCountries
744 |           .slice(this.preferredCountries.length)
745 |           .findIndex(c => c.name.toLowerCase().startsWith(this.typeToFindInput));
746 |         if (typedCountryI >= 0) {
747 |           this.selectedIndex = this.preferredCountries.length + typedCountryI;
748 |           const selEle = this.$refs.list.children[this.selectedIndex];
749 |           const needToScrollTop = selEle.offsetTop < this.$refs.list.scrollTop;
750 |           const needToScrollBottom = selEle.offsetTop + selEle.clientHeight
751 |             > this.$refs.list.scrollTop + this.$refs.list.clientHeight;
752 |           if (needToScrollTop || needToScrollBottom) {
753 |             this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight / 2;
754 |           }
755 |         }
756 |       }
757 |     },
758 |     reset() {
759 |       this.countryCode = this.activeCountry;
760 |       this.initializeCountry()
761 |         .then(() => {
762 |           if (
763 |             !this.phone
764 |             && this.inputOptions
765 |             && this.inputOptions.showDialCode
766 |             && this.activeCountry.dialCode
767 |           ) {
768 |             this.phone = `+${this.activeCountry.dialCode}`;
769 |           }
770 |           this.countryCode = this.activeCountry;
771 |           this.$emit('validate', this.phoneObject);
772 |           this.$emit('onValidate', this.phoneObject); // Deprecated
773 |         })
774 |         .catch(console.error)
775 |         .finally(() => {
776 |           this.finishMounted = true;
777 |         });
778 |       this.open = false;
779 |     },
780 |     onChangeCountryCode() {
781 |       this.choose(this.countryCode, true);
782 |     },
783 |   },
784 | };
785 | </script>
786 | 
787 | <style src="./sprite.css"></style>
788 | <style lang="scss">
789 | .vti__flag {
790 |   margin-right: 8px;
791 | }
792 | 
793 | .vue-tel-input-vuetify {
794 |   display: flex;
795 |   align-items: center;
796 | 
797 |   .country-code {
798 |     width: 75px;
799 |   }
800 | 
801 |   li.last-preferred {
802 |     border-bottom: 1px solid #cacaca;
803 |   }
804 | 
805 |   .v-text-field {
806 |     .v-select__selections {
807 |       position: relative;
808 |       .vti__flag {
809 |         position: absolute;
810 |         margin-left: 18px;
811 |       }
812 |     }
813 |     &--outlined {
814 |       .v-select__selections {
815 |         .vti__flag {
816 |           margin-left: auto;
817 |         }
818 |       }
819 |     }
820 |   }
821 | }
822 | </style>
823 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-extraneous-dependencies */
 2 | 
 3 | import Vue from 'vue';
 4 | import App from './App.vue';
 5 | import vuetify from './plugins/vuetify';
 6 | 
 7 | Vue.config.productionTip = false;
 8 | 
 9 | new Vue({
10 |   vuetify,
11 |   render: h => h(App),
12 | }).$mount('#app');
13 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import Vue from 'vue';
3 | import Vuetify from 'vuetify/lib';
4 | 
5 | Vue.use(Vuetify);
6 | 
7 | export default new Vuetify({
8 | });
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   publicPath: process.env.NODE_ENV === 'production'
 3 |     ? '/vue-tel-input-vuetify/'
 4 |     : '/',
 5 |   "lintOnSave": true,
 6 |   "outputDir": "./docs",
 7 |   "transpileDependencies": [
 8 |     "vuetify"
 9 |   ]
10 | }


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