├── .editorconfig ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .npmignore ├── .stylelintignore ├── .stylelintrc.json ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── css │ └── app.1fafb447.css ├── favicon.ico ├── favicon.png ├── img │ └── flags.9c96e0ed.png ├── index.html ├── js │ ├── app.8673456a.js │ ├── app.8673456a.js.map │ ├── chunk-vendors.cf089acd.js │ └── chunk-vendors.cf089acd.js.map └── vue-phone-number-input-demo.gif ├── nuxt ├── index.js └── plugin.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── favicon.png ├── index.html └── vue-phone-number-input-demo.gif ├── src ├── App.vue ├── VuePhoneNumberInput │ ├── CountrySelector │ │ ├── assets │ │ │ └── iti-flags │ │ │ │ ├── flags.css │ │ │ │ ├── flags.png │ │ │ │ └── flags@2x.png │ │ └── index.vue │ ├── InputTel │ │ └── index.vue │ ├── assets │ │ ├── js │ │ │ └── phoneCodeCountries.js │ │ └── locales │ │ │ └── index.js │ ├── index.vue │ └── mixins │ │ └── StylesHandler.js ├── assets │ ├── logo.png │ └── scss │ │ └── variables.scss ├── main.js └── pages │ └── index.vue ├── tsconfig.json ├── vue-phone-number-input.d.ts └── vue.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | 6 | env: { 7 | node: true 8 | }, 9 | 10 | extends: [ 11 | 'plugin:vue/strongly-recommended', 12 | 'eslint:recommended' 13 | ], 14 | 15 | rules: { 16 | 'generator-star-spacing': 0, 17 | 'arrow-parens': 0, 18 | 'prefer-const': 2, 19 | 'no-trailing-spaces': 'error', 20 | 'no-debugger': 0, 21 | 'no-extra-semi': 'error', 22 | semi: ['error', 'never'], 23 | quotes: ['error', 'single'], 24 | 'no-var': 'error', 25 | 'vue/attributes-order': 'error', 26 | 'no-unused-vars': 'error', 27 | 'vue/no-v-html': 'error', 28 | 'vue/order-in-components': 'error', 29 | 'vue/this-in-template': 'error', 30 | 'vue/script-indent': 'error', 31 | 'vue/multi-word-component-names': 'off', 32 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off' 33 | }, 34 | 35 | parserOptions: { 36 | parser: 'babel-eslint' 37 | }, 38 | 39 | overrides: [ 40 | { 41 | files: ['*.vue'], 42 | rules: { 43 | indent: 'off', 44 | 'vue/script-indent': ['error', 2, { baseIndent: 1 }] 45 | } 46 | } 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Report any issues / bugs you've found. Could be a typo, visual issue, functional 4 | issue, etc. 5 | title: '(BUG)' 6 | labels: bug 7 | assignees: '' 8 | 9 | --- 10 | 11 | ## Describe the bug 12 | 13 | A clear and concise description of what the bug is. 14 | 15 | ## Steps to reproduce 16 | 17 | Describe us how we could reproduce the bug you're trying to report. 18 | 19 | Example: 20 | 21 | 1. Go to '...' 22 | 2. Click on '....' 23 | 3. Scroll down to '....' 24 | 4. See error 25 | 26 | ## Expected behavior 27 | 28 | A clear and concise description of what you expected to happen when you encounter the bug. 29 | 30 | ## Screenshots 31 | 32 | If applicable, add screenshots to help explain your problem. 33 | 34 | ## Device (please complete the following information) 35 | 36 | - OS: [e.g. iOS, Windows 10, ...] 37 | - Browser: [e.g. Chrome 75, Safari 9] 38 | - Package version: [e.g. 2.2.0] 39 | 40 | ## Additional context 41 | 42 | Add any other context about the problem here. 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '(FEATURE REQUEST)' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Is your feature request related to a problem? Please describe 11 | 12 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 13 | 14 | ## Describe the solution you'd like 15 | 16 | A clear and concise description of what you want to happen. 17 | 18 | ## Describe alternatives you've considered 19 | 20 | A clear and concise description of any alternative solutions or features you've considered. 21 | 22 | ## Additional context 23 | 24 | Add any other context or screenshots about the feature request here. 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | .nuxt 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw* 23 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | public/ 2 | node_modules/ 3 | docs/ 4 | .gitignore 5 | .editorconfig 6 | .eslintrc -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | **/*.min.css 2 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "plugins": [ 4 | "stylelint-scss", 5 | "stylelint-order" 6 | ], 7 | "rules": { 8 | "color-hex-case": "upper", 9 | "string-quotes": "single", 10 | "no-empty-source": null, 11 | "unit-case": "lower", 12 | "property-case": "lower", 13 | "property-no-vendor-prefix": true, 14 | "value-no-vendor-prefix": true, 15 | "at-rule-no-unknown": null, 16 | "order/order": [ 17 | "custom-properties", 18 | "declarations" 19 | ], 20 | "no-descending-specificity": null 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 LouisMazel 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-phone-number-input 2 | 3 | [![license](https://img.shields.io/github/license/LouisMazel/vue-phone-number-input.svg?style=flat-square)](https://github.com/LouisMazel/vue-phone-number-input/blob/master/LICENSE) 4 | [![vue 2](https://img.shields.io/badge/vue-2-42b983.svg?style=flat-square)](https://vuejs.org) 5 | [![npm](https://img.shields.io/npm/v/vue-phone-number-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-phone-number-input) 6 | [![npm](https://img.shields.io/npm/dt/vue-phone-number-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-phone-number-input) 7 | [![Codacy grade](https://img.shields.io/codacy/grade/3d15a7c11bfe47c69a2aed93cc67cc29.svg?style=flat-square)](https://www.codacy.com/app/LouisMazel/vue-phone-number-input) 8 | 9 | [![npm](https://nodei.co/npm/vue-phone-number-input.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/vue-phone-number-input) 10 | 11 | > A beautiful text field to format phone numbers made with VueJS 12 | 13 | --- 14 | 15 | ## ⚠️ This plugin is unmaintained ⚠️ 16 | 17 | ### Version for Vue 2 on [maz-ui v2.x](https://louismazel.github.io/maz-ui) 18 | 19 | The version for **Vue 2** is available here: **[maz-ui v2.x - MazPhoneNumberInput](https://louismazel.github.io/maz-ui/documentation/maz-phone-number-input)** 20 | 21 | ### New version for Vue 3 on [maz-ui v3.x](https://maz-ui.com) 22 | 23 | The version for **Vue 3** is available here: **[maz-ui v3.x - MazPhoneNumberInput](https://maz-ui.com/components/maz-phone-number-input.html)** 24 | 25 | --- 26 | 27 | ![vue-phone-number-input](./public/vue-phone-number-input-demo.gif) 28 | 29 | ## Demo 30 | 31 | [Enjoy](https://louismazel.github.io/vue-phone-number-input/) 32 | 33 | ## Installation 34 | 35 | ### Using yarn 36 | 37 | `yarn add vue-phone-number-input` 38 | 39 | ### Using npm 40 | 41 | `npm i --save vue-phone-number-input` 42 | 43 | ## Usage 44 | 45 | ### ES6 Modules / CommonJS 46 | 47 | ```js 48 | import VuePhoneNumberInput from 'vue-phone-number-input'; 49 | import 'vue-phone-number-input/dist/vue-phone-number-input.css'; 50 | 51 | Vue.component('vue-phone-number-input', VuePhoneNumberInput); 52 | ``` 53 | 54 | ```html 55 | 56 | ``` 57 | 58 | ### UMD 59 | 60 | ```html 61 | 62 | 63 | 64 | 65 | 66 | 67 | 70 | ``` 71 | 72 | ## Features List 73 | 74 | - You can set `preferred-countries`, `ignored-countries` or have `only-countries` 75 | - Validator State: input becomes green (you can modify this color with `valid-color` option) when the phone number is valid (can be disabled by `no-validator-state` attr) 76 | - Multi options to getting country code : By default the component get the country code via the browser (disable it with `no-use-browser-locale`) or you can use `fetch-country` to get the country code via [https://ip2c.org/s](https://ip2c.org/s) (network needed) - you can use `default-country-code` option instead to set one 77 | - Phone number formatting while typing 78 | - You can search your country in list (open countries list & type your country name) 79 | - Keyboard accessibility (Arrow down, Arrow up: Countries list navigation - Escape: Close countries list) 80 | - Phone number example for each country in placeholder/label 81 | - Auto focus phone number input after selecting country 82 | - You can disable the flags - `no-flags` props 83 | - Set your translations 84 | 85 | ### All options of [VueInputUi](https://github.com/LouisMazel/vue-input-ui) are available 86 | 87 | - Differents size of input (sm or lg) `size="sm|lg"` 88 | - Disabled option (`disabled` prop) 89 | - Dark UI option (`dark` prop) 90 | - Active a clear button by the prop `clearable` (cf: [VueInputUi options](https://github.com/LouisMazel/vue-input-ui#props-api)) 91 | - Active a loader progress bar by the prop `loader` (cf: [VueInputUi options](https://github.com/LouisMazel/vue-input-ui#props-api)) 92 | - And others 93 | 94 | ## Props API 95 | 96 | | Props | Type | Required | Default | 97 | |---------------------------|-----------------|----------|---------------------| 98 | | v-model | String/Int | true | - | 99 | | id | String | false | VuePhoneNumberInput | 100 | | color | String `HEX` | no | dogderblue | 101 | | valid-color | String `HEX` | no | yellowgreen | 102 | | error-color | String `HEX` | no | orangered | 103 | | size | String `sm|lg` | no | null | 104 | | default-country-code (1) | String | no | null | 105 | | preferred-countries (2) | Array`` | no | null | 106 | | ignored-countries | Array`` | no | null | 107 | | only-countries | Array`` | no | null | 108 | | no-validator-state | Boolean | no | false | 109 | | no-flags | Boolean | no | false | 110 | | disabled | Boolean | no | false | 111 | | dark | Boolean | no | false | 112 | | dark-color | String (hex) | no | #424242 | 113 | | required | Boolean | no | false | 114 | | error | Boolean | no | false | 115 | | clearable | Boolean | no | false | 116 | | loader (3) | Boolean | no | false | 117 | | translations (4) | Object | no | null | 118 | | countries-height (5) | Number | no | 30 | 119 | | no-use-browser-locale (6) | Boolean | no | false | 120 | | fetch-country (7) | Boolean | no | false | 121 | | no-country-selector (8) | Boolean | no | false | 122 | | border-radius | Number | no | 4 | 123 | | show-code-on-list | Boolean | no | false | 124 | | no-example | Boolean | no | false | 125 | 126 | (1) Ex : `default-country-code="FR"` 127 | 128 | (2) Ex : `preferred-countries="['FR', 'BE', 'DE']"` This countries will be at the top of the list 129 | 130 | (3) Loader progress bar has the input color (`color` props) 131 | 132 | (4) translations comes to replace default texts - Ex : 133 | 134 | ```html 135 | translations="{ 136 | countrySelectorLabel: 'Code pays', 137 | countrySelectorError: 'Choisir un pays', 138 | phoneNumberLabel: 'Numéro de téléphone', 139 | example: 'Exemple :' 140 | }" 141 | ``` 142 | 143 | (5) height in px of the rows included in the dropdown. Ex: 144 | countries-height: 40 145 | 146 | (6) By default the component get country code via browser - No network needed but not work on SSR with NuxtJS (disable it with `no-use-browser-locale`) 147 | 148 | (7) Fetch country code via [https://ip2c.org/s](https://ip2c.org/s) - Network needed - (Do not use it with `default-country-code` options) 149 | 150 | (8) The country selector is not shown, you can validate your phone number with the country code set 151 | 152 | ## Events API 153 | 154 | | Event | Return | 155 | |----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 156 | | phone-number-focused | `-` (emit when phone number input is focused) | 157 | | phone-number-blur | `-` (emit when phone number input is blur) | 158 | | input | [AsYouType value](https://github.com/catamphetamine/libphonenumber-js#as-you-type-formatter) (emit when new value is enter on phone number input && when a country is choosed) | 159 | | update | All values (cf values in table on [demo](https://louismazel.github.io/vue-phone-number-input/)) (emit when new value is enter on phone number input && when a country is choosed) | 160 | 161 | ## Keyboard accessibility 162 | 163 | | Props | Action | 164 | |------------------------|-----------------------------------------------------------| 165 | | ArrowDown | Navigation down in countries list | 166 | | ArrowUp | Navigation up in countries list | 167 | | Escape | Close countries list | 168 | | All letters characters | Searching country name in countries list (should be open) | 169 | 170 | ## Named slots 171 | 172 | | Slot | Action | 173 | |-------|-------------------------------------------------------------------------| 174 | | arrow | Override the default arrow character for toggling the list of countries | 175 | 176 | ## Contribution 177 | 178 | ### Project setup 179 | 180 | ```bash 181 | npm install 182 | ``` 183 | 184 | ### Compiles and hot-reloads for development 185 | 186 | ```bash 187 | npm run serve 188 | ``` 189 | 190 | ### Lints and fixes files 191 | 192 | ```bash 193 | npm run lint 194 | ``` 195 | 196 | ## License 197 | 198 | This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License) 199 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/docs/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/docs/favicon.png -------------------------------------------------------------------------------- /docs/img/flags.9c96e0ed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/docs/img/flags.9c96e0ed.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue-phone-number-input
-------------------------------------------------------------------------------- /docs/js/app.8673456a.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(t){for(var n,i,s=t[0],l=t[1],u=t[2],d=0,h=[];d-1:e.inputValue},on:{keydown:e.keyDown,keyup:e.keyUp,focus:e.onFocus,blur:e.onBlur,click:function(t){return e.$emit("click",t)},change:function(t){var r=e.inputValue,n=t.target,o=!!n.checked;if(Array.isArray(r)){var a=null,i=e._i(r,a);n.checked?i<0&&(e.inputValue=r.concat([a])):i>-1&&(e.inputValue=r.slice(0,i).concat(r.slice(i+1)))}else e.inputValue=o}}},"input",e.$attrs,!1)):"radio"===e.type?r("input",e._b({directives:[{name:"model",rawName:"v-model",value:e.inputValue,expression:"inputValue"}],ref:"InputTel",staticClass:"input-tel__input",class:{"no-country-selector":e.noCountrySelector},style:[e.noCountrySelector?e.radiusStyle:e.radiusRightStyle,e.inputCaretStyle,e.inputBorderStyle,e.inputBoxShadowStyle,e.inputBgColor,e.textColor],attrs:{id:e.id,placeholder:e.labelValue,disabled:e.disabled,required:e.required,type:"radio"},domProps:{checked:e._q(e.inputValue,null)},on:{keydown:e.keyDown,keyup:e.keyUp,focus:e.onFocus,blur:e.onBlur,click:function(t){return e.$emit("click",t)},change:function(t){e.inputValue=null}}},"input",e.$attrs,!1)):r("input",e._b({directives:[{name:"model",rawName:"v-model",value:e.inputValue,expression:"inputValue"}],ref:"InputTel",staticClass:"input-tel__input",class:{"no-country-selector":e.noCountrySelector},style:[e.noCountrySelector?e.radiusStyle:e.radiusRightStyle,e.inputCaretStyle,e.inputBorderStyle,e.inputBoxShadowStyle,e.inputBgColor,e.textColor],attrs:{id:e.id,placeholder:e.labelValue,disabled:e.disabled,required:e.required,type:e.type},domProps:{value:e.inputValue},on:{keydown:e.keyDown,keyup:e.keyUp,focus:e.onFocus,blur:e.onBlur,click:function(t){return e.$emit("click",t)},input:function(t){t.target.composing||(e.inputValue=t.target.value)}}},"input",e.$attrs,!1)),r("label",{ref:"label",staticClass:"input-tel__label",class:e.error?"text-danger":null,style:[e.labelColorStyle],attrs:{for:e.id},on:{click:e.focusInput}},[e._v(" "+e._s(e.hintValue||e.labelValue)+" ")]),e.clearable&&e.inputValue?r("button",{staticClass:"input-tel__clear",attrs:{title:"clear",type:"button",tabindex:"-1"},on:{click:e.clear}},[r("span",{staticClass:"input-tel__clear__effect"}),r("span",[e._v(" ✕ ")])]):e._e(),e.loader?r("div",{staticClass:"input-tel__loader"},[r("div",{staticClass:"input-tel__loader__progress-bar",style:[e.loaderBgColor]})]):e._e()])},C=[],g={props:{theme:{type:Object,required:!0}},computed:{labelColorStyle:function(){return this.error?this.theme.errorColor:this.valid?this.theme.validColor:this.isFocus?this.theme.color:this.dark?this.theme.textDarkColor:null},inputBorderStyle:function(){return this.error?this.theme.borderErrorColor:this.valid?this.theme.borderValidColor:this.isHover||this.isFocus?this.theme.borderColor:null},inputBoxShadowStyle:function(){return this.isFocus?this.error?this.theme.boxShadowError:this.valid?this.theme.boxShadowValid:this.theme.boxShadowColor:null},inputBgColor:function(){return this.dark?this.theme.bgDarkColor:null},textColor:function(){return this.dark?this.theme.textDarkColor:null},inputCaretStyle:function(){return{caretColor:this.theme.colorValue}},radiusStyle:function(){return this.theme.borderRadius},radiusLeftStyle:function(){return this.theme.borderLeftRadius},radiusRightStyle:function(){return this.theme.borderRightRadius},bgItemSelectedStyle:function(){return this.theme.bgColor},loaderBgColor:function(){return this.theme.bgColor}}},v={name:"InputTel",mixins:[g],props:{value:{type:[String,Number],default:null},label:{type:String,default:"Enter text"},hint:{type:String,default:null},error:{type:Boolean,default:Boolean},disabled:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},id:{type:String,default:"InputTel"},size:{type:String,default:null},type:{type:String,default:"tel"},readonly:{type:Boolean,default:!1},valid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},loader:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},noCountrySelector:{type:Boolean,default:!1}},data:function(){return{isFocus:!1,isHover:!1}},computed:{inputValue:{get:function(){return this.value},set:function(e){this.$emit("input",e)}},labelValue:function(){var e=this.label;return this.required&&e?"".concat(e," *"):e},hintValue:function(){var e=this.hint;return this.required&&e?"".concat(e," *"):e}},methods:{updateHoverState:function(e){this.isHover=e},focusInput:function(){this.$refs.InputTel.focus()},onFocus:function(){this.$emit("focus"),this.isFocus=!0},onBlur:function(){this.$emit("blur"),this.isFocus=!1},clear:function(){this.$emit("input",null),this.$emit("clear")},keyUp:function(e){this.$emit("keyup",e)},keyDown:function(e){this.$emit("keydown",e)}}},S=v,k=(r("d499"),r("2877")),_=Object(k["a"])(S,y,C,!1,null,"e59be3b4",null),w=_.exports,x=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{ref:"parent",staticClass:"country-selector",class:[{"is-focused":e.isFocus,"has-value":e.value,"has-hint":e.hint,"has-error":e.error,"is-disabled":e.disabled,"is-dark":e.dark,"no-flags":e.noFlags,"has-list-open":e.hasListOpen,"is-valid":e.valid},e.size],on:{"!blur":function(t){return e.handleBlur.apply(null,arguments)},mouseenter:function(t){return e.updateHoverState(!0)},mouseleave:function(t){return e.updateHoverState(!1)}}},[e.value&&!e.noFlags?r("div",{staticClass:"country-selector__country-flag",on:{click:function(t){return t.stopPropagation(),e.toggleList.apply(null,arguments)}}},[r("div",{class:"iti-flag-small iti-flag "+e.value.toLowerCase()})]):e._e(),r("input",{ref:"CountrySelector",staticClass:"country-selector__input",style:[e.radiusLeftStyle,e.inputBorderStyle,e.inputBoxShadowStyle,e.inputBgColor],attrs:{id:e.id,placeholder:e.label,disabled:e.disabled,readonly:""},domProps:{value:e.callingCode},on:{focus:function(t){e.isFocus=!0},keydown:e.keyboardNav,click:function(t){return t.stopPropagation(),e.toggleList.apply(null,arguments)}}}),r("div",{staticClass:"country-selector__toggle",on:{click:function(t){return t.stopPropagation(),e.toggleList.apply(null,arguments)}}},[e._t("arrow",(function(){return[r("svg",{staticClass:"country-selector__toggle__arrow",attrs:{mlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"}},[r("path",{staticClass:"arrow",attrs:{d:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"}}),r("path",{attrs:{fill:"none",d:"M0 0h24v24H0V0z"}})])]}))],2),r("label",{ref:"label",staticClass:"country-selector__label",style:[e.labelColorStyle],on:{click:function(t){return t.stopPropagation(),e.toggleList.apply(null,arguments)}}},[e._v(" "+e._s(e.hint||e.label)+" ")]),r("Transition",{attrs:{name:"slide"}},[r("div",{directives:[{name:"show",rawName:"v-show",value:e.hasListOpen,expression:"hasListOpen"}],ref:"countriesList",staticClass:"country-selector__list",class:{"has-calling-code":e.showCodeOnList},style:[e.radiusStyle,e.listHeight,e.inputBgColor]},[r("RecycleScroller",{attrs:{items:e.countriesSorted,"item-size":1,"key-field":"iso2"},scopedSlots:e._u([{key:"default",fn:function(t){var n=t.item;return[r("button",{key:"item-"+n.code,staticClass:"flex align-center country-selector__list__item",class:[{selected:e.value===n.iso2},{"keyboard-selected":e.value!==n.iso2&&e.tmpValue===n.iso2}],style:[e.itemHeight,e.value===n.iso2?e.bgItemSelectedStyle:null],attrs:{tabindex:"-1",type:"button"},on:{click:function(t){return t.stopPropagation(),e.updateValue(n.iso2)}}},[e.noFlags?e._e():r("div",{staticClass:"country-selector__list__item__flag-container"},[r("div",{class:"iti-flag-small iti-flag "+n.iso2.toLowerCase()})]),e.showCodeOnList?r("span",{staticClass:"country-selector__list__item__calling-code flex-fixed"},[e._v("+"+e._s(n.dialCode))]):e._e(),r("div",{staticClass:"dots-text"},[e._v(" "+e._s(n.name)+" ")])])]}}])})],1)])],1)},N=[],L=(r("7f7f"),r("f559"),r("20d6"),r("75fc")),B=(r("7514"),r("4037")),V=r("e508"),O={name:"CountrySelector",components:{RecycleScroller:V["a"]},mixins:[g],props:{id:{type:String,default:"CountrySelector"},value:{type:[String,Object],default:null},label:{type:String,default:"Choose country"},hint:{type:String,default:String},size:{type:String,default:String},error:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},valid:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},items:{type:Array,default:Array,required:!0},preferredCountries:{type:Array,default:null},onlyCountries:{type:Array,default:null},ignoredCountries:{type:Array,default:null},noFlags:{type:Boolean,default:!1},countriesHeight:{type:Number,default:35},showCodeOnList:{type:Boolean,default:!1}},data:function(){return{isFocus:!1,hasListOpen:!1,selectedIndex:null,tmpValue:this.value,query:"",indexItemToShow:0,isHover:!1}},computed:{itemHeight:function(){return{height:"".concat(this.countriesHeight,"px")}},listHeight:function(){return{height:"".concat(7*(this.countriesHeight+1),"px"),maxHeight:"".concat(7*(this.countriesHeight+1),"px")}},countriesList:function(){var e=this;return this.items.filter((function(t){return!e.ignoredCountries.includes(t.iso2)}))},countriesFiltered:function(){var e=this,t=this.onlyCountries||this.preferredCountries;return t.map((function(t){return e.countriesList.find((function(e){return e.iso2.includes(t)}))}))},otherCountries:function(){var e=this;return this.countriesList.filter((function(t){return!e.preferredCountries.includes(t.iso2)}))},countriesSorted:function(){return this.preferredCountries?[].concat(Object(L["a"])(this.countriesFiltered),Object(L["a"])(this.otherCountries)):this.onlyCountries?this.countriesFiltered:this.countriesList},selectedValueIndex:function(){var e=this;return this.value?this.countriesSorted.findIndex((function(t){return t.iso2===e.value})):null},tmpValueIndex:function(){var e=this;return this.countriesSorted.findIndex((function(t){return t.iso2===e.tmpValue}))},callingCode:function(){return this.value?"+".concat(Object(B["a"])(this.value)):null}},methods:{updateHoverState:function(e){this.isHover=e},handleBlur:function(e){this.$el.contains(e.relatedTarget)||(this.isFocus=!1,this.closeList())},toggleList:function(){this.$refs.countriesList.offsetParent?this.closeList():this.openList()},openList:function(){this.disabled||(this.$refs.CountrySelector.focus(),this.$emit("open"),this.isFocus=!0,this.hasListOpen=!0,this.value&&this.scrollToSelectedOnFocus(this.selectedValueIndex))},closeList:function(){this.$emit("close"),this.hasListOpen=!1},updateValue:function(){var e=Object(l["a"])(regeneratorRuntime.mark((function e(t){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return this.tmpValue=t,this.$emit("input",t||null),e.next=4,this.$nextTick();case 4:this.closeList();case 5:case"end":return e.stop()}}),e,this)})));function t(t){return e.apply(this,arguments)}return t}(),scrollToSelectedOnFocus:function(e){var t=this;this.$nextTick((function(){t.$refs.countriesList.scrollTop=e*(t.countriesHeight+1)-3*(t.countriesHeight+1)}))},keyboardNav:function(e){var t=e.keyCode;if(40===t||38===t){e.view&&e.view.event&&e.view.event.preventDefault(),this.hasListOpen||this.openList();var r=40===t?this.tmpValueIndex+1:this.tmpValueIndex-1;(-1===r||r>=this.countriesSorted.length)&&(r=-1===r?this.countriesSorted.length-1:0),this.tmpValue=this.countriesSorted[r].iso2,this.scrollToSelectedOnFocus(r)}else 13===t?this.hasListOpen?this.updateValue(this.tmpValue):this.openList():27===t?this.closeList():this.searching(e)},searching:function(e){var t=this,r=e.keyCode;clearTimeout(this.queryTimer),this.queryTimer=setTimeout((function(){t.query=""}),1e3);var n=String.fromCharCode(r);if(8===r&&""!==this.query)this.query=this.query.substring(0,this.query.length-1);else if(/[a-zA-Z-e ]/.test(n)){this.hasListOpen||this.openList(),this.query+=e.key;var o=this.preferredCountries?this.countriesSorted.slice(this.preferredCountries.length):this.countriesSorted,a=o.findIndex((function(e){return t.tmpValue=e.iso2,e.name.toLowerCase().startsWith(t.query)}));-1!==a&&this.scrollToSelectedOnFocus(a+(this.preferredCountries?this.preferredCountries.length:0))}}}},I=O,P=(r("e71e"),Object(k["a"])(I,x,N,!1,null,"46e105de",null)),T=P.exports,j={countrySelectorLabel:"Country code",countrySelectorError:"Choose country",phoneNumberLabel:"Phone number",example:"Example:"},R=r("6038");function E(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function F(e){for(var t=1;t", 6 | "scripts": { 7 | "serve": "vue-cli-service serve --mode development --open", 8 | "serve:nuxt": "nuxt src", 9 | "build": "npm run build:lib && npm run build:docs", 10 | "test": "vue-cli-service test:unit /test/specs", 11 | "lint": "vue-cli-service lint && npm run lint:style", 12 | "lint:style": "stylelint 'src/**/*{.scss,.vue}'", 13 | "lint:style:fix": "npm run lint -- --fix", 14 | "before-publish": "npm run lint && npm i && npm run build", 15 | "build:docs": "vue-cli-service build --dest docs --mode production", 16 | "build:lib": "vue-cli-service build --target lib ./src/VuePhoneNumberInput/index.vue", 17 | "publish-npm:beta": "npm publish --tag beta", 18 | "serve:build": "vue-cli-service serve --mode production", 19 | "test:unit": "vue-cli-service test:unit", 20 | "test:unit:watch": "vue-cli-service test:unit --watch", 21 | "ui": "vue ui" 22 | }, 23 | "files": [ 24 | "dist/", 25 | "nuxt/" 26 | ], 27 | "dependencies": { 28 | "libphonenumber-js": "^1.10.13", 29 | "style-helpers": "^1.0.2", 30 | "vue": "^2.6.0", 31 | "vue-virtual-scroller": "^1.0.10" 32 | }, 33 | "devDependencies": { 34 | "@vue/cli-plugin-babel": "^3.12.1", 35 | "@vue/cli-plugin-eslint": "^4.3.1", 36 | "@vue/cli-service": "^4.3.1", 37 | "babel-eslint": "^10.1.0", 38 | "color-transformer-ui": "^1.0.3", 39 | "eslint": "^7.32.0", 40 | "eslint-plugin-vue": "^9.5.1", 41 | "nuxt": "^2.12.2", 42 | "path": "^0.12.7", 43 | "sass": "^1.54.9", 44 | "sass-loader": "^10.3.1", 45 | "stylelint": "^13.6.1", 46 | "stylelint-config-standard": "^19.0.0", 47 | "stylelint-order": "^3.1.1", 48 | "stylelint-scss": "^3.17.1", 49 | "vue": "^2.6.14", 50 | "vue-server-renderer": "^2.6.14", 51 | "vue-template-compiler": "^2.6.14" 52 | }, 53 | "postcss": { 54 | "plugins": { 55 | "autoprefixer": {} 56 | } 57 | }, 58 | "keywords": [ 59 | "vue", 60 | "vuejs", 61 | "input", 62 | "phone", 63 | "number", 64 | "format", 65 | "text", 66 | "javascript", 67 | "vue-component" 68 | ], 69 | "browserslist": [ 70 | "> 1%", 71 | "last 2 versions", 72 | "not ie <= 8" 73 | ], 74 | "license": "MIT", 75 | "main": "dist/vue-phone-number-input.common.js", 76 | "repository": { 77 | "type": "git", 78 | "url": "git+https://github.com/LouisMazel/vue-phone-number-input.git" 79 | }, 80 | "bugs": { 81 | "url": "https://github.com/LouisMazel/vue-phone-number-input/issues" 82 | }, 83 | "homepage": "https://github.com/LouisMazel/vue-phone-number-input#readme", 84 | "types": "dist/index.d.ts" 85 | } 86 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-phone-number-input 9 | 10 | 11 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /public/vue-phone-number-input-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/public/vue-phone-number-input-demo.gif -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 206 | 207 | 262 | 263 | 270 | 271 | 429 | -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/CountrySelector/assets/iti-flags/flags.css: -------------------------------------------------------------------------------- 1 | .iti-flag { 2 | width: 20px; 3 | } 4 | .iti-flag.be { 5 | width: 18px; 6 | } 7 | .iti-flag.ch { 8 | width: 15px; 9 | } 10 | .iti-flag.mc { 11 | width: 19px; 12 | } 13 | .iti-flag.ne { 14 | width: 18px; 15 | } 16 | .iti-flag.np { 17 | width: 13px; 18 | } 19 | .iti-flag.va { 20 | width: 15px; 21 | } 22 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 23 | only screen and (min--moz-device-pixel-ratio: 2), 24 | only screen and (-o-min-device-pixel-ratio: 2), 25 | only screen and (min-device-pixel-ratio: 2), 26 | only screen and (min-resolution: 192dpi), 27 | only screen and (min-resolution: 2dppx) { 28 | .iti-flag { 29 | background-size: 5630px 15px; 30 | } 31 | } 32 | .iti-flag.ac { 33 | height: 10px; 34 | background-position: 0px 0px; 35 | } 36 | .iti-flag.ad { 37 | height: 14px; 38 | background-position: -22px 0px; 39 | } 40 | .iti-flag.ae { 41 | height: 10px; 42 | background-position: -44px 0px; 43 | } 44 | .iti-flag.af { 45 | height: 14px; 46 | background-position: -66px 0px; 47 | } 48 | .iti-flag.ag { 49 | height: 14px; 50 | background-position: -88px 0px; 51 | } 52 | .iti-flag.ai { 53 | height: 10px; 54 | background-position: -110px 0px; 55 | } 56 | .iti-flag.al { 57 | height: 15px; 58 | background-position: -132px 0px; 59 | } 60 | .iti-flag.am { 61 | height: 10px; 62 | background-position: -154px 0px; 63 | } 64 | .iti-flag.ao { 65 | height: 14px; 66 | background-position: -176px 0px; 67 | } 68 | .iti-flag.aq { 69 | height: 14px; 70 | background-position: -198px 0px; 71 | } 72 | .iti-flag.ar { 73 | height: 13px; 74 | background-position: -220px 0px; 75 | } 76 | .iti-flag.as { 77 | height: 10px; 78 | background-position: -242px 0px; 79 | } 80 | .iti-flag.at { 81 | height: 14px; 82 | background-position: -264px 0px; 83 | } 84 | .iti-flag.au { 85 | height: 10px; 86 | background-position: -286px 0px; 87 | } 88 | .iti-flag.aw { 89 | height: 14px; 90 | background-position: -308px 0px; 91 | } 92 | .iti-flag.ax { 93 | height: 13px; 94 | background-position: -330px 0px; 95 | } 96 | .iti-flag.az { 97 | height: 10px; 98 | background-position: -352px 0px; 99 | } 100 | .iti-flag.ba { 101 | height: 10px; 102 | background-position: -374px 0px; 103 | } 104 | .iti-flag.bb { 105 | height: 14px; 106 | background-position: -396px 0px; 107 | } 108 | .iti-flag.bd { 109 | height: 12px; 110 | background-position: -418px 0px; 111 | } 112 | .iti-flag.be { 113 | height: 15px; 114 | background-position: -440px 0px; 115 | } 116 | .iti-flag.bf { 117 | height: 14px; 118 | background-position: -460px 0px; 119 | } 120 | .iti-flag.bg { 121 | height: 12px; 122 | background-position: -482px 0px; 123 | } 124 | .iti-flag.bh { 125 | height: 12px; 126 | background-position: -504px 0px; 127 | } 128 | .iti-flag.bi { 129 | height: 12px; 130 | background-position: -526px 0px; 131 | } 132 | .iti-flag.bj { 133 | height: 14px; 134 | background-position: -548px 0px; 135 | } 136 | .iti-flag.bl { 137 | height: 14px; 138 | background-position: -570px 0px; 139 | } 140 | .iti-flag.bm { 141 | height: 10px; 142 | background-position: -592px 0px; 143 | } 144 | .iti-flag.bn { 145 | height: 10px; 146 | background-position: -614px 0px; 147 | } 148 | .iti-flag.bo { 149 | height: 14px; 150 | background-position: -636px 0px; 151 | } 152 | .iti-flag.bq { 153 | height: 14px; 154 | background-position: -658px 0px; 155 | } 156 | .iti-flag.br { 157 | height: 14px; 158 | background-position: -680px 0px; 159 | } 160 | .iti-flag.bs { 161 | height: 10px; 162 | background-position: -702px 0px; 163 | } 164 | .iti-flag.bt { 165 | height: 14px; 166 | background-position: -724px 0px; 167 | } 168 | .iti-flag.bv { 169 | height: 15px; 170 | background-position: -746px 0px; 171 | } 172 | .iti-flag.bw { 173 | height: 14px; 174 | background-position: -768px 0px; 175 | } 176 | .iti-flag.by { 177 | height: 10px; 178 | background-position: -790px 0px; 179 | } 180 | .iti-flag.bz { 181 | height: 14px; 182 | background-position: -812px 0px; 183 | } 184 | .iti-flag.ca { 185 | height: 10px; 186 | background-position: -834px 0px; 187 | } 188 | .iti-flag.cc { 189 | height: 10px; 190 | background-position: -856px 0px; 191 | } 192 | .iti-flag.cd { 193 | height: 15px; 194 | background-position: -878px 0px; 195 | } 196 | .iti-flag.cf { 197 | height: 14px; 198 | background-position: -900px 0px; 199 | } 200 | .iti-flag.cg { 201 | height: 14px; 202 | background-position: -922px 0px; 203 | } 204 | .iti-flag.ch { 205 | height: 15px; 206 | background-position: -944px 0px; 207 | } 208 | .iti-flag.ci { 209 | height: 14px; 210 | background-position: -961px 0px; 211 | } 212 | .iti-flag.ck { 213 | height: 10px; 214 | background-position: -983px 0px; 215 | } 216 | .iti-flag.cl { 217 | height: 14px; 218 | background-position: -1005px 0px; 219 | } 220 | .iti-flag.cm { 221 | height: 14px; 222 | background-position: -1027px 0px; 223 | } 224 | .iti-flag.cn { 225 | height: 14px; 226 | background-position: -1049px 0px; 227 | } 228 | .iti-flag.co { 229 | height: 14px; 230 | background-position: -1071px 0px; 231 | } 232 | .iti-flag.cp { 233 | height: 14px; 234 | background-position: -1093px 0px; 235 | } 236 | .iti-flag.cr { 237 | height: 12px; 238 | background-position: -1115px 0px; 239 | } 240 | .iti-flag.cu { 241 | height: 10px; 242 | background-position: -1137px 0px; 243 | } 244 | .iti-flag.cv { 245 | height: 12px; 246 | background-position: -1159px 0px; 247 | } 248 | .iti-flag.cw { 249 | height: 14px; 250 | background-position: -1181px 0px; 251 | } 252 | .iti-flag.cx { 253 | height: 10px; 254 | background-position: -1203px 0px; 255 | } 256 | .iti-flag.cy { 257 | height: 14px; 258 | background-position: -1225px 0px; 259 | } 260 | .iti-flag.cz { 261 | height: 14px; 262 | background-position: -1247px 0px; 263 | } 264 | .iti-flag.de { 265 | height: 12px; 266 | background-position: -1269px 0px; 267 | } 268 | .iti-flag.dg { 269 | height: 10px; 270 | background-position: -1291px 0px; 271 | } 272 | .iti-flag.dj { 273 | height: 14px; 274 | background-position: -1313px 0px; 275 | } 276 | .iti-flag.dk { 277 | height: 15px; 278 | background-position: -1335px 0px; 279 | } 280 | .iti-flag.dm { 281 | height: 10px; 282 | background-position: -1357px 0px; 283 | } 284 | .iti-flag.do { 285 | height: 13px; 286 | background-position: -1379px 0px; 287 | } 288 | .iti-flag.dz { 289 | height: 14px; 290 | background-position: -1401px 0px; 291 | } 292 | .iti-flag.ea { 293 | height: 14px; 294 | background-position: -1423px 0px; 295 | } 296 | .iti-flag.ec { 297 | height: 14px; 298 | background-position: -1445px 0px; 299 | } 300 | .iti-flag.ee { 301 | height: 13px; 302 | background-position: -1467px 0px; 303 | } 304 | .iti-flag.eg { 305 | height: 14px; 306 | background-position: -1489px 0px; 307 | } 308 | .iti-flag.eh { 309 | height: 10px; 310 | background-position: -1511px 0px; 311 | } 312 | .iti-flag.er { 313 | height: 10px; 314 | background-position: -1533px 0px; 315 | } 316 | .iti-flag.es { 317 | height: 14px; 318 | background-position: -1555px 0px; 319 | } 320 | .iti-flag.et { 321 | height: 10px; 322 | background-position: -1577px 0px; 323 | } 324 | .iti-flag.eu { 325 | height: 14px; 326 | background-position: -1599px 0px; 327 | } 328 | .iti-flag.fi { 329 | height: 12px; 330 | background-position: -1621px 0px; 331 | } 332 | .iti-flag.fj { 333 | height: 10px; 334 | background-position: -1643px 0px; 335 | } 336 | .iti-flag.fk { 337 | height: 10px; 338 | background-position: -1665px 0px; 339 | } 340 | .iti-flag.fm { 341 | height: 11px; 342 | background-position: -1687px 0px; 343 | } 344 | .iti-flag.fo { 345 | height: 15px; 346 | background-position: -1709px 0px; 347 | } 348 | .iti-flag.fr { 349 | height: 14px; 350 | background-position: -1731px 0px; 351 | } 352 | .iti-flag.ga { 353 | height: 15px; 354 | background-position: -1753px 0px; 355 | } 356 | .iti-flag.gb { 357 | height: 10px; 358 | background-position: -1775px 0px; 359 | } 360 | .iti-flag.gd { 361 | height: 12px; 362 | background-position: -1797px 0px; 363 | } 364 | .iti-flag.ge { 365 | height: 14px; 366 | background-position: -1819px 0px; 367 | } 368 | .iti-flag.gf { 369 | height: 14px; 370 | background-position: -1841px 0px; 371 | } 372 | .iti-flag.gg { 373 | height: 14px; 374 | background-position: -1863px 0px; 375 | } 376 | .iti-flag.gh { 377 | height: 14px; 378 | background-position: -1885px 0px; 379 | } 380 | .iti-flag.gi { 381 | height: 10px; 382 | background-position: -1907px 0px; 383 | } 384 | .iti-flag.gl { 385 | height: 14px; 386 | background-position: -1929px 0px; 387 | } 388 | .iti-flag.gm { 389 | height: 14px; 390 | background-position: -1951px 0px; 391 | } 392 | .iti-flag.gn { 393 | height: 14px; 394 | background-position: -1973px 0px; 395 | } 396 | .iti-flag.gp { 397 | height: 14px; 398 | background-position: -1995px 0px; 399 | } 400 | .iti-flag.gq { 401 | height: 14px; 402 | background-position: -2017px 0px; 403 | } 404 | .iti-flag.gr { 405 | height: 14px; 406 | background-position: -2039px 0px; 407 | } 408 | .iti-flag.gs { 409 | height: 10px; 410 | background-position: -2061px 0px; 411 | } 412 | .iti-flag.gt { 413 | height: 13px; 414 | background-position: -2083px 0px; 415 | } 416 | .iti-flag.gu { 417 | height: 11px; 418 | background-position: -2105px 0px; 419 | } 420 | .iti-flag.gw { 421 | height: 10px; 422 | background-position: -2127px 0px; 423 | } 424 | .iti-flag.gy { 425 | height: 12px; 426 | background-position: -2149px 0px; 427 | } 428 | .iti-flag.hk { 429 | height: 14px; 430 | background-position: -2171px 0px; 431 | } 432 | .iti-flag.hm { 433 | height: 10px; 434 | background-position: -2193px 0px; 435 | } 436 | .iti-flag.hn { 437 | height: 10px; 438 | background-position: -2215px 0px; 439 | } 440 | .iti-flag.hr { 441 | height: 10px; 442 | background-position: -2237px 0px; 443 | } 444 | .iti-flag.ht { 445 | height: 12px; 446 | background-position: -2259px 0px; 447 | } 448 | .iti-flag.hu { 449 | height: 10px; 450 | background-position: -2281px 0px; 451 | } 452 | .iti-flag.ic { 453 | height: 14px; 454 | background-position: -2303px 0px; 455 | } 456 | .iti-flag.id { 457 | height: 14px; 458 | background-position: -2325px 0px; 459 | } 460 | .iti-flag.ie { 461 | height: 10px; 462 | background-position: -2347px 0px; 463 | } 464 | .iti-flag.il { 465 | height: 15px; 466 | background-position: -2369px 0px; 467 | } 468 | .iti-flag.im { 469 | height: 10px; 470 | background-position: -2391px 0px; 471 | } 472 | .iti-flag.in { 473 | height: 14px; 474 | background-position: -2413px 0px; 475 | } 476 | .iti-flag.io { 477 | height: 10px; 478 | background-position: -2435px 0px; 479 | } 480 | .iti-flag.iq { 481 | height: 14px; 482 | background-position: -2457px 0px; 483 | } 484 | .iti-flag.ir { 485 | height: 12px; 486 | background-position: -2479px 0px; 487 | } 488 | .iti-flag.is { 489 | height: 15px; 490 | background-position: -2501px 0px; 491 | } 492 | .iti-flag.it { 493 | height: 14px; 494 | background-position: -2523px 0px; 495 | } 496 | .iti-flag.je { 497 | height: 12px; 498 | background-position: -2545px 0px; 499 | } 500 | .iti-flag.jm { 501 | height: 10px; 502 | background-position: -2567px 0px; 503 | } 504 | .iti-flag.jo { 505 | height: 10px; 506 | background-position: -2589px 0px; 507 | } 508 | .iti-flag.jp { 509 | height: 14px; 510 | background-position: -2611px 0px; 511 | } 512 | .iti-flag.ke { 513 | height: 14px; 514 | background-position: -2633px 0px; 515 | } 516 | .iti-flag.kg { 517 | height: 12px; 518 | background-position: -2655px 0px; 519 | } 520 | .iti-flag.kh { 521 | height: 13px; 522 | background-position: -2677px 0px; 523 | } 524 | .iti-flag.ki { 525 | height: 10px; 526 | background-position: -2699px 0px; 527 | } 528 | .iti-flag.km { 529 | height: 12px; 530 | background-position: -2721px 0px; 531 | } 532 | .iti-flag.kn { 533 | height: 14px; 534 | background-position: -2743px 0px; 535 | } 536 | .iti-flag.kp { 537 | height: 10px; 538 | background-position: -2765px 0px; 539 | } 540 | .iti-flag.kr { 541 | height: 14px; 542 | background-position: -2787px 0px; 543 | } 544 | .iti-flag.kw { 545 | height: 10px; 546 | background-position: -2809px 0px; 547 | } 548 | .iti-flag.ky { 549 | height: 10px; 550 | background-position: -2831px 0px; 551 | } 552 | .iti-flag.kz { 553 | height: 10px; 554 | background-position: -2853px 0px; 555 | } 556 | .iti-flag.la { 557 | height: 14px; 558 | background-position: -2875px 0px; 559 | } 560 | .iti-flag.lb { 561 | height: 14px; 562 | background-position: -2897px 0px; 563 | } 564 | .iti-flag.lc { 565 | height: 10px; 566 | background-position: -2919px 0px; 567 | } 568 | .iti-flag.li { 569 | height: 12px; 570 | background-position: -2941px 0px; 571 | } 572 | .iti-flag.lk { 573 | height: 10px; 574 | background-position: -2963px 0px; 575 | } 576 | .iti-flag.lr { 577 | height: 11px; 578 | background-position: -2985px 0px; 579 | } 580 | .iti-flag.ls { 581 | height: 14px; 582 | background-position: -3007px 0px; 583 | } 584 | .iti-flag.lt { 585 | height: 12px; 586 | background-position: -3029px 0px; 587 | } 588 | .iti-flag.lu { 589 | height: 12px; 590 | background-position: -3051px 0px; 591 | } 592 | .iti-flag.lv { 593 | height: 10px; 594 | background-position: -3073px 0px; 595 | } 596 | .iti-flag.ly { 597 | height: 10px; 598 | background-position: -3095px 0px; 599 | } 600 | .iti-flag.ma { 601 | height: 14px; 602 | background-position: -3117px 0px; 603 | } 604 | .iti-flag.mc { 605 | height: 15px; 606 | background-position: -3139px 0px; 607 | } 608 | .iti-flag.md { 609 | height: 10px; 610 | background-position: -3160px 0px; 611 | } 612 | .iti-flag.me { 613 | height: 10px; 614 | background-position: -3182px 0px; 615 | } 616 | .iti-flag.mf { 617 | height: 14px; 618 | background-position: -3204px 0px; 619 | } 620 | .iti-flag.mg { 621 | height: 14px; 622 | background-position: -3226px 0px; 623 | } 624 | .iti-flag.mh { 625 | height: 11px; 626 | background-position: -3248px 0px; 627 | } 628 | .iti-flag.mk { 629 | height: 10px; 630 | background-position: -3270px 0px; 631 | } 632 | .iti-flag.ml { 633 | height: 14px; 634 | background-position: -3292px 0px; 635 | } 636 | .iti-flag.mm { 637 | height: 14px; 638 | background-position: -3314px 0px; 639 | } 640 | .iti-flag.mn { 641 | height: 10px; 642 | background-position: -3336px 0px; 643 | } 644 | .iti-flag.mo { 645 | height: 14px; 646 | background-position: -3358px 0px; 647 | } 648 | .iti-flag.mp { 649 | height: 10px; 650 | background-position: -3380px 0px; 651 | } 652 | .iti-flag.mq { 653 | height: 14px; 654 | background-position: -3402px 0px; 655 | } 656 | .iti-flag.mr { 657 | height: 14px; 658 | background-position: -3424px 0px; 659 | } 660 | .iti-flag.ms { 661 | height: 10px; 662 | background-position: -3446px 0px; 663 | } 664 | .iti-flag.mt { 665 | height: 14px; 666 | background-position: -3468px 0px; 667 | } 668 | .iti-flag.mu { 669 | height: 14px; 670 | background-position: -3490px 0px; 671 | } 672 | .iti-flag.mv { 673 | height: 14px; 674 | background-position: -3512px 0px; 675 | } 676 | .iti-flag.mw { 677 | height: 14px; 678 | background-position: -3534px 0px; 679 | } 680 | .iti-flag.mx { 681 | height: 12px; 682 | background-position: -3556px 0px; 683 | } 684 | .iti-flag.my { 685 | height: 10px; 686 | background-position: -3578px 0px; 687 | } 688 | .iti-flag.mz { 689 | height: 14px; 690 | background-position: -3600px 0px; 691 | } 692 | .iti-flag.na { 693 | height: 14px; 694 | background-position: -3622px 0px; 695 | } 696 | .iti-flag.nc { 697 | height: 10px; 698 | background-position: -3644px 0px; 699 | } 700 | .iti-flag.ne { 701 | height: 15px; 702 | background-position: -3666px 0px; 703 | } 704 | .iti-flag.nf { 705 | height: 10px; 706 | background-position: -3686px 0px; 707 | } 708 | .iti-flag.ng { 709 | height: 10px; 710 | background-position: -3708px 0px; 711 | } 712 | .iti-flag.ni { 713 | height: 12px; 714 | background-position: -3730px 0px; 715 | } 716 | .iti-flag.nl { 717 | height: 14px; 718 | background-position: -3752px 0px; 719 | } 720 | .iti-flag.no { 721 | height: 15px; 722 | background-position: -3774px 0px; 723 | } 724 | .iti-flag.np { 725 | height: 15px; 726 | background-position: -3796px 0px; 727 | } 728 | .iti-flag.nr { 729 | height: 10px; 730 | background-position: -3811px 0px; 731 | } 732 | .iti-flag.nu { 733 | height: 10px; 734 | background-position: -3833px 0px; 735 | } 736 | .iti-flag.nz { 737 | height: 10px; 738 | background-position: -3855px 0px; 739 | } 740 | .iti-flag.om { 741 | height: 10px; 742 | background-position: -3877px 0px; 743 | } 744 | .iti-flag.pa { 745 | height: 14px; 746 | background-position: -3899px 0px; 747 | } 748 | .iti-flag.pe { 749 | height: 14px; 750 | background-position: -3921px 0px; 751 | } 752 | .iti-flag.pf { 753 | height: 14px; 754 | background-position: -3943px 0px; 755 | } 756 | .iti-flag.pg { 757 | height: 15px; 758 | background-position: -3965px 0px; 759 | } 760 | .iti-flag.ph { 761 | height: 10px; 762 | background-position: -3987px 0px; 763 | } 764 | .iti-flag.pk { 765 | height: 14px; 766 | background-position: -4009px 0px; 767 | } 768 | .iti-flag.pl { 769 | height: 13px; 770 | background-position: -4031px 0px; 771 | } 772 | .iti-flag.pm { 773 | height: 14px; 774 | background-position: -4053px 0px; 775 | } 776 | .iti-flag.pn { 777 | height: 10px; 778 | background-position: -4075px 0px; 779 | } 780 | .iti-flag.pr { 781 | height: 14px; 782 | background-position: -4097px 0px; 783 | } 784 | .iti-flag.ps { 785 | height: 10px; 786 | background-position: -4119px 0px; 787 | } 788 | .iti-flag.pt { 789 | height: 14px; 790 | background-position: -4141px 0px; 791 | } 792 | .iti-flag.pw { 793 | height: 13px; 794 | background-position: -4163px 0px; 795 | } 796 | .iti-flag.py { 797 | height: 11px; 798 | background-position: -4185px 0px; 799 | } 800 | .iti-flag.qa { 801 | height: 8px; 802 | background-position: -4207px 0px; 803 | } 804 | .iti-flag.re { 805 | height: 14px; 806 | background-position: -4229px 0px; 807 | } 808 | .iti-flag.ro { 809 | height: 14px; 810 | background-position: -4251px 0px; 811 | } 812 | .iti-flag.rs { 813 | height: 14px; 814 | background-position: -4273px 0px; 815 | } 816 | .iti-flag.ru { 817 | height: 14px; 818 | background-position: -4295px 0px; 819 | } 820 | .iti-flag.rw { 821 | height: 14px; 822 | background-position: -4317px 0px; 823 | } 824 | .iti-flag.sa { 825 | height: 14px; 826 | background-position: -4339px 0px; 827 | } 828 | .iti-flag.sb { 829 | height: 10px; 830 | background-position: -4361px 0px; 831 | } 832 | .iti-flag.sc { 833 | height: 10px; 834 | background-position: -4383px 0px; 835 | } 836 | .iti-flag.sd { 837 | height: 10px; 838 | background-position: -4405px 0px; 839 | } 840 | .iti-flag.se { 841 | height: 13px; 842 | background-position: -4427px 0px; 843 | } 844 | .iti-flag.sg { 845 | height: 14px; 846 | background-position: -4449px 0px; 847 | } 848 | .iti-flag.sh { 849 | height: 10px; 850 | background-position: -4471px 0px; 851 | } 852 | .iti-flag.si { 853 | height: 10px; 854 | background-position: -4493px 0px; 855 | } 856 | .iti-flag.sj { 857 | height: 15px; 858 | background-position: -4515px 0px; 859 | } 860 | .iti-flag.sk { 861 | height: 14px; 862 | background-position: -4537px 0px; 863 | } 864 | .iti-flag.sl { 865 | height: 14px; 866 | background-position: -4559px 0px; 867 | } 868 | .iti-flag.sm { 869 | height: 15px; 870 | background-position: -4581px 0px; 871 | } 872 | .iti-flag.sn { 873 | height: 14px; 874 | background-position: -4603px 0px; 875 | } 876 | .iti-flag.so { 877 | height: 14px; 878 | background-position: -4625px 0px; 879 | } 880 | .iti-flag.sr { 881 | height: 14px; 882 | background-position: -4647px 0px; 883 | } 884 | .iti-flag.ss { 885 | height: 10px; 886 | background-position: -4669px 0px; 887 | } 888 | .iti-flag.st { 889 | height: 10px; 890 | background-position: -4691px 0px; 891 | } 892 | .iti-flag.sv { 893 | height: 12px; 894 | background-position: -4713px 0px; 895 | } 896 | .iti-flag.sx { 897 | height: 14px; 898 | background-position: -4735px 0px; 899 | } 900 | .iti-flag.sy { 901 | height: 14px; 902 | background-position: -4757px 0px; 903 | } 904 | .iti-flag.sz { 905 | height: 14px; 906 | background-position: -4779px 0px; 907 | } 908 | .iti-flag.ta { 909 | height: 10px; 910 | background-position: -4801px 0px; 911 | } 912 | .iti-flag.tc { 913 | height: 10px; 914 | background-position: -4823px 0px; 915 | } 916 | .iti-flag.td { 917 | height: 14px; 918 | background-position: -4845px 0px; 919 | } 920 | .iti-flag.tf { 921 | height: 14px; 922 | background-position: -4867px 0px; 923 | } 924 | .iti-flag.tg { 925 | height: 13px; 926 | background-position: -4889px 0px; 927 | } 928 | .iti-flag.th { 929 | height: 14px; 930 | background-position: -4911px 0px; 931 | } 932 | .iti-flag.tj { 933 | height: 10px; 934 | background-position: -4933px 0px; 935 | } 936 | .iti-flag.tk { 937 | height: 10px; 938 | background-position: -4955px 0px; 939 | } 940 | .iti-flag.tl { 941 | height: 10px; 942 | background-position: -4977px 0px; 943 | } 944 | .iti-flag.tm { 945 | height: 14px; 946 | background-position: -4999px 0px; 947 | } 948 | .iti-flag.tn { 949 | height: 14px; 950 | background-position: -5021px 0px; 951 | } 952 | .iti-flag.to { 953 | height: 10px; 954 | background-position: -5043px 0px; 955 | } 956 | .iti-flag.tr { 957 | height: 14px; 958 | background-position: -5065px 0px; 959 | } 960 | .iti-flag.tt { 961 | height: 12px; 962 | background-position: -5087px 0px; 963 | } 964 | .iti-flag.tv { 965 | height: 10px; 966 | background-position: -5109px 0px; 967 | } 968 | .iti-flag.tw { 969 | height: 14px; 970 | background-position: -5131px 0px; 971 | } 972 | .iti-flag.tz { 973 | height: 14px; 974 | background-position: -5153px 0px; 975 | } 976 | .iti-flag.ua { 977 | height: 14px; 978 | background-position: -5175px 0px; 979 | } 980 | .iti-flag.ug { 981 | height: 14px; 982 | background-position: -5197px 0px; 983 | } 984 | .iti-flag.um { 985 | height: 11px; 986 | background-position: -5219px 0px; 987 | } 988 | .iti-flag.us { 989 | height: 11px; 990 | background-position: -5241px 0px; 991 | } 992 | .iti-flag.uy { 993 | height: 14px; 994 | background-position: -5263px 0px; 995 | } 996 | .iti-flag.uz { 997 | height: 10px; 998 | background-position: -5285px 0px; 999 | } 1000 | .iti-flag.va { 1001 | height: 15px; 1002 | background-position: -5307px 0px; 1003 | } 1004 | .iti-flag.vc { 1005 | height: 14px; 1006 | background-position: -5324px 0px; 1007 | } 1008 | .iti-flag.ve { 1009 | height: 14px; 1010 | background-position: -5346px 0px; 1011 | } 1012 | .iti-flag.vg { 1013 | height: 10px; 1014 | background-position: -5368px 0px; 1015 | } 1016 | .iti-flag.vi { 1017 | height: 14px; 1018 | background-position: -5390px 0px; 1019 | } 1020 | .iti-flag.vn { 1021 | height: 14px; 1022 | background-position: -5412px 0px; 1023 | } 1024 | .iti-flag.vu { 1025 | height: 12px; 1026 | background-position: -5434px 0px; 1027 | } 1028 | .iti-flag.wf { 1029 | height: 14px; 1030 | background-position: -5456px 0px; 1031 | } 1032 | .iti-flag.ws { 1033 | height: 10px; 1034 | background-position: -5478px 0px; 1035 | } 1036 | .iti-flag.xk { 1037 | height: 15px; 1038 | background-position: -5500px 0px; 1039 | } 1040 | .iti-flag.ye { 1041 | height: 14px; 1042 | background-position: -5522px 0px; 1043 | } 1044 | .iti-flag.yt { 1045 | height: 14px; 1046 | background-position: -5544px 0px; 1047 | } 1048 | .iti-flag.za { 1049 | height: 14px; 1050 | background-position: -5566px 0px; 1051 | } 1052 | .iti-flag.zm { 1053 | height: 14px; 1054 | background-position: -5588px 0px; 1055 | } 1056 | .iti-flag.zw { 1057 | height: 10px; 1058 | background-position: -5610px 0px; 1059 | } 1060 | .iti-flag { 1061 | width: 20px; 1062 | height: 15px; 1063 | background-image: url('./flags.png'); 1064 | background-repeat: no-repeat; 1065 | background-color: #dbdbdb; 1066 | background-position: 20px 0; 1067 | } 1068 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 1069 | only screen and (min--moz-device-pixel-ratio: 2), 1070 | only screen and (-o-min-device-pixel-ratio: 2), 1071 | only screen and (min-device-pixel-ratio: 2), 1072 | only screen and (min-resolution: 192dpi), 1073 | only screen and (min-resolution: 2dppx) { 1074 | .iti-flag { 1075 | background-image: url('./flags.png'); 1076 | } 1077 | } 1078 | .iti-flag.np { 1079 | background-color: transparent; 1080 | } 1081 | -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/CountrySelector/assets/iti-flags/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/src/VuePhoneNumberInput/CountrySelector/assets/iti-flags/flags.png -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/CountrySelector/assets/iti-flags/flags@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/src/VuePhoneNumberInput/CountrySelector/assets/iti-flags/flags@2x.png -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/CountrySelector/index.vue: -------------------------------------------------------------------------------- 1 | 119 | 120 | 293 | 294 | 673 | -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/InputTel/index.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 155 | 156 | 544 | -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/assets/js/phoneCodeCountries.js: -------------------------------------------------------------------------------- 1 | const allCountries = [ 2 | [ 3 | 'Afghanistan (‫افغانستان‬‎)', 4 | 'af', 5 | '93' 6 | ], 7 | [ 8 | 'Albania (Shqipëri)', 9 | 'al', 10 | '355' 11 | ], 12 | [ 13 | 'Algeria (‫الجزائر‬‎)', 14 | 'dz', 15 | '213' 16 | ], 17 | [ 18 | 'American Samoa', 19 | 'as', 20 | '1684' 21 | ], 22 | [ 23 | 'Andorra', 24 | 'ad', 25 | '376' 26 | ], 27 | [ 28 | 'Angola', 29 | 'ao', 30 | '244' 31 | ], 32 | [ 33 | 'Anguilla', 34 | 'ai', 35 | '1264' 36 | ], 37 | [ 38 | 'Antigua and Barbuda', 39 | 'ag', 40 | '1268' 41 | ], 42 | [ 43 | 'Argentina', 44 | 'ar', 45 | '54' 46 | ], 47 | [ 48 | 'Armenia (Հայաստան)', 49 | 'am', 50 | '374' 51 | ], 52 | [ 53 | 'Aruba', 54 | 'aw', 55 | '297' 56 | ], 57 | [ 58 | 'Australia', 59 | 'au', 60 | '61', 61 | 0 62 | ], 63 | [ 64 | 'Austria (Österreich)', 65 | 'at', 66 | '43' 67 | ], 68 | [ 69 | 'Azerbaijan (Azərbaycan)', 70 | 'az', 71 | '994' 72 | ], 73 | [ 74 | 'Bahamas', 75 | 'bs', 76 | '1242' 77 | ], 78 | [ 79 | 'Bahrain (‫البحرين‬‎)', 80 | 'bh', 81 | '973' 82 | ], 83 | [ 84 | 'Bangladesh (বাংলাদেশ)', 85 | 'bd', 86 | '880' 87 | ], 88 | [ 89 | 'Barbados', 90 | 'bb', 91 | '1246' 92 | ], 93 | [ 94 | 'Belarus (Беларусь)', 95 | 'by', 96 | '375' 97 | ], 98 | [ 99 | 'Belgium (België)', 100 | 'be', 101 | '32' 102 | ], 103 | [ 104 | 'Belize', 105 | 'bz', 106 | '501' 107 | ], 108 | [ 109 | 'Benin (Bénin)', 110 | 'bj', 111 | '229' 112 | ], 113 | [ 114 | 'Bermuda', 115 | 'bm', 116 | '1441' 117 | ], 118 | [ 119 | 'Bhutan (འབྲུག)', 120 | 'bt', 121 | '975' 122 | ], 123 | [ 124 | 'Bolivia', 125 | 'bo', 126 | '591' 127 | ], 128 | [ 129 | 'Bosnia and Herzegovina (Босна и Херцеговина)', 130 | 'ba', 131 | '387' 132 | ], 133 | [ 134 | 'Botswana', 135 | 'bw', 136 | '267' 137 | ], 138 | [ 139 | 'Brazil (Brasil)', 140 | 'br', 141 | '55' 142 | ], 143 | [ 144 | 'British Indian Ocean Territory', 145 | 'io', 146 | '246' 147 | ], 148 | [ 149 | 'British Virgin Islands', 150 | 'vg', 151 | '1284' 152 | ], 153 | [ 154 | 'Brunei', 155 | 'bn', 156 | '673' 157 | ], 158 | [ 159 | 'Bulgaria (България)', 160 | 'bg', 161 | '359' 162 | ], 163 | [ 164 | 'Burkina Faso', 165 | 'bf', 166 | '226' 167 | ], 168 | [ 169 | 'Burundi (Uburundi)', 170 | 'bi', 171 | '257' 172 | ], 173 | [ 174 | 'Cambodia (កម្ពុជា)', 175 | 'kh', 176 | '855' 177 | ], 178 | [ 179 | 'Cameroon (Cameroun)', 180 | 'cm', 181 | '237' 182 | ], 183 | [ 184 | 'Canada', 185 | 'ca', 186 | '1', 187 | 1, 188 | ['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'] 189 | ], 190 | [ 191 | 'Cape Verde (Kabu Verdi)', 192 | 'cv', 193 | '238' 194 | ], 195 | [ 196 | 'Caribbean Netherlands', 197 | 'bq', 198 | '599', 199 | 1 200 | ], 201 | [ 202 | 'Cayman Islands', 203 | 'ky', 204 | '1345' 205 | ], 206 | [ 207 | 'Central African Republic (République centrafricaine)', 208 | 'cf', 209 | '236' 210 | ], 211 | [ 212 | 'Chad (Tchad)', 213 | 'td', 214 | '235' 215 | ], 216 | [ 217 | 'Chile', 218 | 'cl', 219 | '56' 220 | ], 221 | [ 222 | 'China (中国)', 223 | 'cn', 224 | '86' 225 | ], 226 | [ 227 | 'Christmas Island', 228 | 'cx', 229 | '61', 230 | 2 231 | ], 232 | [ 233 | 'Cocos (Keeling) Islands', 234 | 'cc', 235 | '61', 236 | 1 237 | ], 238 | [ 239 | 'Colombia', 240 | 'co', 241 | '57' 242 | ], 243 | [ 244 | 'Comoros (‫جزر القمر‬‎)', 245 | 'km', 246 | '269' 247 | ], 248 | [ 249 | 'Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)', 250 | 'cd', 251 | '243' 252 | ], 253 | [ 254 | 'Congo (Republic) (Congo-Brazzaville)', 255 | 'cg', 256 | '242' 257 | ], 258 | [ 259 | 'Cook Islands', 260 | 'ck', 261 | '682' 262 | ], 263 | [ 264 | 'Costa Rica', 265 | 'cr', 266 | '506' 267 | ], 268 | [ 269 | 'Côte d’Ivoire', 270 | 'ci', 271 | '225' 272 | ], 273 | [ 274 | 'Croatia (Hrvatska)', 275 | 'hr', 276 | '385' 277 | ], 278 | [ 279 | 'Cuba', 280 | 'cu', 281 | '53' 282 | ], 283 | [ 284 | 'Curaçao', 285 | 'cw', 286 | '599', 287 | 0 288 | ], 289 | [ 290 | 'Cyprus (Κύπρος)', 291 | 'cy', 292 | '357' 293 | ], 294 | [ 295 | 'Czech Republic (Česká republika)', 296 | 'cz', 297 | '420' 298 | ], 299 | [ 300 | 'Denmark (Danmark)', 301 | 'dk', 302 | '45' 303 | ], 304 | [ 305 | 'Djibouti', 306 | 'dj', 307 | '253' 308 | ], 309 | [ 310 | 'Dominica', 311 | 'dm', 312 | '1767' 313 | ], 314 | [ 315 | 'Dominican Republic (República Dominicana)', 316 | 'do', 317 | '1', 318 | 2, 319 | ['809', '829', '849'] 320 | ], 321 | [ 322 | 'Ecuador', 323 | 'ec', 324 | '593' 325 | ], 326 | [ 327 | 'Egypt (‫مصر‬‎)', 328 | 'eg', 329 | '20' 330 | ], 331 | [ 332 | 'El Salvador', 333 | 'sv', 334 | '503' 335 | ], 336 | [ 337 | 'Equatorial Guinea (Guinea Ecuatorial)', 338 | 'gq', 339 | '240' 340 | ], 341 | [ 342 | 'Eritrea', 343 | 'er', 344 | '291' 345 | ], 346 | [ 347 | 'Estonia (Eesti)', 348 | 'ee', 349 | '372' 350 | ], 351 | [ 352 | 'Ethiopia', 353 | 'et', 354 | '251' 355 | ], 356 | [ 357 | 'Falkland Islands (Islas Malvinas)', 358 | 'fk', 359 | '500' 360 | ], 361 | [ 362 | 'Faroe Islands (Føroyar)', 363 | 'fo', 364 | '298' 365 | ], 366 | [ 367 | 'Fiji', 368 | 'fj', 369 | '679' 370 | ], 371 | [ 372 | 'Finland (Suomi)', 373 | 'fi', 374 | '358', 375 | 0 376 | ], 377 | [ 378 | 'France', 379 | 'fr', 380 | '33' 381 | ], 382 | [ 383 | 'French Guiana (Guyane française)', 384 | 'gf', 385 | '594' 386 | ], 387 | [ 388 | 'French Polynesia (Polynésie française)', 389 | 'pf', 390 | '689' 391 | ], 392 | [ 393 | 'Gabon', 394 | 'ga', 395 | '241' 396 | ], 397 | [ 398 | 'Gambia', 399 | 'gm', 400 | '220' 401 | ], 402 | [ 403 | 'Georgia (საქართველო)', 404 | 'ge', 405 | '995' 406 | ], 407 | [ 408 | 'Germany (Deutschland)', 409 | 'de', 410 | '49' 411 | ], 412 | [ 413 | 'Ghana (Gaana)', 414 | 'gh', 415 | '233' 416 | ], 417 | [ 418 | 'Gibraltar', 419 | 'gi', 420 | '350' 421 | ], 422 | [ 423 | 'Greece (Ελλάδα)', 424 | 'gr', 425 | '30' 426 | ], 427 | [ 428 | 'Greenland (Kalaallit Nunaat)', 429 | 'gl', 430 | '299' 431 | ], 432 | [ 433 | 'Grenada', 434 | 'gd', 435 | '1473' 436 | ], 437 | [ 438 | 'Guadeloupe', 439 | 'gp', 440 | '590', 441 | 0 442 | ], 443 | [ 444 | 'Guam', 445 | 'gu', 446 | '1671' 447 | ], 448 | [ 449 | 'Guatemala', 450 | 'gt', 451 | '502' 452 | ], 453 | [ 454 | 'Guernsey', 455 | 'gg', 456 | '44', 457 | 1 458 | ], 459 | [ 460 | 'Guinea (Guinée)', 461 | 'gn', 462 | '224' 463 | ], 464 | [ 465 | 'Guinea-Bissau (Guiné Bissau)', 466 | 'gw', 467 | '245' 468 | ], 469 | [ 470 | 'Guyana', 471 | 'gy', 472 | '592' 473 | ], 474 | [ 475 | 'Haiti', 476 | 'ht', 477 | '509' 478 | ], 479 | [ 480 | 'Honduras', 481 | 'hn', 482 | '504' 483 | ], 484 | [ 485 | 'Hong Kong (香港)', 486 | 'hk', 487 | '852' 488 | ], 489 | [ 490 | 'Hungary (Magyarország)', 491 | 'hu', 492 | '36' 493 | ], 494 | [ 495 | 'Iceland (Ísland)', 496 | 'is', 497 | '354' 498 | ], 499 | [ 500 | 'India (भारत)', 501 | 'in', 502 | '91' 503 | ], 504 | [ 505 | 'Indonesia', 506 | 'id', 507 | '62' 508 | ], 509 | [ 510 | 'Iran (‫ایران‬‎)', 511 | 'ir', 512 | '98' 513 | ], 514 | [ 515 | 'Iraq (‫العراق‬‎)', 516 | 'iq', 517 | '964' 518 | ], 519 | [ 520 | 'Ireland', 521 | 'ie', 522 | '353' 523 | ], 524 | [ 525 | 'Isle of Man', 526 | 'im', 527 | '44', 528 | 2 529 | ], 530 | [ 531 | 'Israel (‫ישראל‬‎)', 532 | 'il', 533 | '972' 534 | ], 535 | [ 536 | 'Italy (Italia)', 537 | 'it', 538 | '39', 539 | 0 540 | ], 541 | [ 542 | 'Jamaica', 543 | 'jm', 544 | '1876' 545 | ], 546 | [ 547 | 'Japan (日本)', 548 | 'jp', 549 | '81' 550 | ], 551 | [ 552 | 'Jersey', 553 | 'je', 554 | '44', 555 | 3 556 | ], 557 | [ 558 | 'Jordan (‫الأردن‬‎)', 559 | 'jo', 560 | '962' 561 | ], 562 | [ 563 | 'Kazakhstan (Казахстан)', 564 | 'kz', 565 | '7', 566 | 1 567 | ], 568 | [ 569 | 'Kenya', 570 | 'ke', 571 | '254' 572 | ], 573 | [ 574 | 'Kiribati', 575 | 'ki', 576 | '686' 577 | ], 578 | [ 579 | 'Kosovo', 580 | 'xk', 581 | '383' 582 | ], 583 | [ 584 | 'Kuwait (‫الكويت‬‎)', 585 | 'kw', 586 | '965' 587 | ], 588 | [ 589 | 'Kyrgyzstan (Кыргызстан)', 590 | 'kg', 591 | '996' 592 | ], 593 | [ 594 | 'Laos (ລາວ)', 595 | 'la', 596 | '856' 597 | ], 598 | [ 599 | 'Latvia (Latvija)', 600 | 'lv', 601 | '371' 602 | ], 603 | [ 604 | 'Lebanon (‫لبنان‬‎)', 605 | 'lb', 606 | '961' 607 | ], 608 | [ 609 | 'Lesotho', 610 | 'ls', 611 | '266' 612 | ], 613 | [ 614 | 'Liberia', 615 | 'lr', 616 | '231' 617 | ], 618 | [ 619 | 'Libya (‫ليبيا‬‎)', 620 | 'ly', 621 | '218' 622 | ], 623 | [ 624 | 'Liechtenstein', 625 | 'li', 626 | '423' 627 | ], 628 | [ 629 | 'Lithuania (Lietuva)', 630 | 'lt', 631 | '370' 632 | ], 633 | [ 634 | 'Luxembourg', 635 | 'lu', 636 | '352' 637 | ], 638 | [ 639 | 'Macau (澳門)', 640 | 'mo', 641 | '853' 642 | ], 643 | [ 644 | 'Macedonia (FYROM) (Македонија)', 645 | 'mk', 646 | '389' 647 | ], 648 | [ 649 | 'Madagascar (Madagasikara)', 650 | 'mg', 651 | '261' 652 | ], 653 | [ 654 | 'Malawi', 655 | 'mw', 656 | '265' 657 | ], 658 | [ 659 | 'Malaysia', 660 | 'my', 661 | '60' 662 | ], 663 | [ 664 | 'Maldives', 665 | 'mv', 666 | '960' 667 | ], 668 | [ 669 | 'Mali', 670 | 'ml', 671 | '223' 672 | ], 673 | [ 674 | 'Malta', 675 | 'mt', 676 | '356' 677 | ], 678 | [ 679 | 'Marshall Islands', 680 | 'mh', 681 | '692' 682 | ], 683 | [ 684 | 'Martinique', 685 | 'mq', 686 | '596' 687 | ], 688 | [ 689 | 'Mauritania (‫موريتانيا‬‎)', 690 | 'mr', 691 | '222' 692 | ], 693 | [ 694 | 'Mauritius (Moris)', 695 | 'mu', 696 | '230' 697 | ], 698 | [ 699 | 'Mayotte', 700 | 'yt', 701 | '262', 702 | 1 703 | ], 704 | [ 705 | 'Mexico (México)', 706 | 'mx', 707 | '52' 708 | ], 709 | [ 710 | 'Micronesia', 711 | 'fm', 712 | '691' 713 | ], 714 | [ 715 | 'Moldova (Republica Moldova)', 716 | 'md', 717 | '373' 718 | ], 719 | [ 720 | 'Monaco', 721 | 'mc', 722 | '377' 723 | ], 724 | [ 725 | 'Mongolia (Монгол)', 726 | 'mn', 727 | '976' 728 | ], 729 | [ 730 | 'Montenegro (Crna Gora)', 731 | 'me', 732 | '382' 733 | ], 734 | [ 735 | 'Montserrat', 736 | 'ms', 737 | '1664' 738 | ], 739 | [ 740 | 'Morocco (‫المغرب‬‎)', 741 | 'ma', 742 | '212', 743 | 0 744 | ], 745 | [ 746 | 'Mozambique (Moçambique)', 747 | 'mz', 748 | '258' 749 | ], 750 | [ 751 | 'Myanmar (Burma) (မြန်မာ)', 752 | 'mm', 753 | '95' 754 | ], 755 | [ 756 | 'Namibia (Namibië)', 757 | 'na', 758 | '264' 759 | ], 760 | [ 761 | 'Nauru', 762 | 'nr', 763 | '674' 764 | ], 765 | [ 766 | 'Nepal (नेपाल)', 767 | 'np', 768 | '977' 769 | ], 770 | [ 771 | 'Netherlands (Nederland)', 772 | 'nl', 773 | '31' 774 | ], 775 | [ 776 | 'New Caledonia (Nouvelle-Calédonie)', 777 | 'nc', 778 | '687' 779 | ], 780 | [ 781 | 'New Zealand', 782 | 'nz', 783 | '64' 784 | ], 785 | [ 786 | 'Nicaragua', 787 | 'ni', 788 | '505' 789 | ], 790 | [ 791 | 'Niger (Nijar)', 792 | 'ne', 793 | '227' 794 | ], 795 | [ 796 | 'Nigeria', 797 | 'ng', 798 | '234' 799 | ], 800 | [ 801 | 'Niue', 802 | 'nu', 803 | '683' 804 | ], 805 | [ 806 | 'Norfolk Island', 807 | 'nf', 808 | '672' 809 | ], 810 | [ 811 | 'North Korea (조선 민주주의 인민 공화국)', 812 | 'kp', 813 | '850' 814 | ], 815 | [ 816 | 'Northern Mariana Islands', 817 | 'mp', 818 | '1670' 819 | ], 820 | [ 821 | 'Norway (Norge)', 822 | 'no', 823 | '47', 824 | 0 825 | ], 826 | [ 827 | 'Oman (‫عُمان‬‎)', 828 | 'om', 829 | '968' 830 | ], 831 | [ 832 | 'Pakistan (‫پاکستان‬‎)', 833 | 'pk', 834 | '92' 835 | ], 836 | [ 837 | 'Palau', 838 | 'pw', 839 | '680' 840 | ], 841 | [ 842 | 'Palestine (‫فلسطين‬‎)', 843 | 'ps', 844 | '970' 845 | ], 846 | [ 847 | 'Panama (Panamá)', 848 | 'pa', 849 | '507' 850 | ], 851 | [ 852 | 'Papua New Guinea', 853 | 'pg', 854 | '675' 855 | ], 856 | [ 857 | 'Paraguay', 858 | 'py', 859 | '595' 860 | ], 861 | [ 862 | 'Peru (Perú)', 863 | 'pe', 864 | '51' 865 | ], 866 | [ 867 | 'Philippines', 868 | 'ph', 869 | '63' 870 | ], 871 | [ 872 | 'Poland (Polska)', 873 | 'pl', 874 | '48' 875 | ], 876 | [ 877 | 'Portugal', 878 | 'pt', 879 | '351' 880 | ], 881 | [ 882 | 'Puerto Rico', 883 | 'pr', 884 | '1', 885 | 3, 886 | ['787', '939'] 887 | ], 888 | [ 889 | 'Qatar (‫قطر‬‎)', 890 | 'qa', 891 | '974' 892 | ], 893 | [ 894 | 'Réunion (La Réunion)', 895 | 're', 896 | '262', 897 | 0 898 | ], 899 | [ 900 | 'Romania (România)', 901 | 'ro', 902 | '40' 903 | ], 904 | [ 905 | 'Russia (Россия)', 906 | 'ru', 907 | '7', 908 | 0 909 | ], 910 | [ 911 | 'Rwanda', 912 | 'rw', 913 | '250' 914 | ], 915 | [ 916 | 'Saint Barthélemy', 917 | 'bl', 918 | '590', 919 | 1 920 | ], 921 | [ 922 | 'Saint Helena', 923 | 'sh', 924 | '290' 925 | ], 926 | [ 927 | 'Saint Kitts and Nevis', 928 | 'kn', 929 | '1869' 930 | ], 931 | [ 932 | 'Saint Lucia', 933 | 'lc', 934 | '1758' 935 | ], 936 | [ 937 | 'Saint Martin (Saint-Martin (partie française))', 938 | 'mf', 939 | '590', 940 | 2 941 | ], 942 | [ 943 | 'Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)', 944 | 'pm', 945 | '508' 946 | ], 947 | [ 948 | 'Saint Vincent and the Grenadines', 949 | 'vc', 950 | '1784' 951 | ], 952 | [ 953 | 'Samoa', 954 | 'ws', 955 | '685' 956 | ], 957 | [ 958 | 'San Marino', 959 | 'sm', 960 | '378' 961 | ], 962 | [ 963 | 'São Tomé and Príncipe (São Tomé e Príncipe)', 964 | 'st', 965 | '239' 966 | ], 967 | [ 968 | 'Saudi Arabia (‫المملكة العربية السعودية‬‎)', 969 | 'sa', 970 | '966' 971 | ], 972 | [ 973 | 'Senegal (Sénégal)', 974 | 'sn', 975 | '221' 976 | ], 977 | [ 978 | 'Serbia (Србија)', 979 | 'rs', 980 | '381' 981 | ], 982 | [ 983 | 'Seychelles', 984 | 'sc', 985 | '248' 986 | ], 987 | [ 988 | 'Sierra Leone', 989 | 'sl', 990 | '232' 991 | ], 992 | [ 993 | 'Singapore', 994 | 'sg', 995 | '65' 996 | ], 997 | [ 998 | 'Sint Maarten', 999 | 'sx', 1000 | '1721' 1001 | ], 1002 | [ 1003 | 'Slovakia (Slovensko)', 1004 | 'sk', 1005 | '421' 1006 | ], 1007 | [ 1008 | 'Slovenia (Slovenija)', 1009 | 'si', 1010 | '386' 1011 | ], 1012 | [ 1013 | 'Solomon Islands', 1014 | 'sb', 1015 | '677' 1016 | ], 1017 | [ 1018 | 'Somalia (Soomaaliya)', 1019 | 'so', 1020 | '252' 1021 | ], 1022 | [ 1023 | 'South Africa', 1024 | 'za', 1025 | '27' 1026 | ], 1027 | [ 1028 | 'South Korea (대한민국)', 1029 | 'kr', 1030 | '82' 1031 | ], 1032 | [ 1033 | 'South Sudan (‫جنوب السودان‬‎)', 1034 | 'ss', 1035 | '211' 1036 | ], 1037 | [ 1038 | 'Spain (España)', 1039 | 'es', 1040 | '34' 1041 | ], 1042 | [ 1043 | 'Sri Lanka (ශ්‍රී ලංකාව)', 1044 | 'lk', 1045 | '94' 1046 | ], 1047 | [ 1048 | 'Sudan (‫السودان‬‎)', 1049 | 'sd', 1050 | '249' 1051 | ], 1052 | [ 1053 | 'Suriname', 1054 | 'sr', 1055 | '597' 1056 | ], 1057 | [ 1058 | 'Svalbard and Jan Mayen', 1059 | 'sj', 1060 | '47', 1061 | 1 1062 | ], 1063 | [ 1064 | 'Swaziland', 1065 | 'sz', 1066 | '268' 1067 | ], 1068 | [ 1069 | 'Sweden (Sverige)', 1070 | 'se', 1071 | '46' 1072 | ], 1073 | [ 1074 | 'Switzerland (Schweiz)', 1075 | 'ch', 1076 | '41' 1077 | ], 1078 | [ 1079 | 'Syria (‫سوريا‬‎)', 1080 | 'sy', 1081 | '963' 1082 | ], 1083 | [ 1084 | 'Taiwan (台灣)', 1085 | 'tw', 1086 | '886' 1087 | ], 1088 | [ 1089 | 'Tajikistan', 1090 | 'tj', 1091 | '992' 1092 | ], 1093 | [ 1094 | 'Tanzania', 1095 | 'tz', 1096 | '255' 1097 | ], 1098 | [ 1099 | 'Thailand (ไทย)', 1100 | 'th', 1101 | '66' 1102 | ], 1103 | [ 1104 | 'Timor-Leste', 1105 | 'tl', 1106 | '670' 1107 | ], 1108 | [ 1109 | 'Togo', 1110 | 'tg', 1111 | '228' 1112 | ], 1113 | [ 1114 | 'Tokelau', 1115 | 'tk', 1116 | '690' 1117 | ], 1118 | [ 1119 | 'Tonga', 1120 | 'to', 1121 | '676' 1122 | ], 1123 | [ 1124 | 'Trinidad and Tobago', 1125 | 'tt', 1126 | '1868' 1127 | ], 1128 | [ 1129 | 'Tunisia (‫تونس‬‎)', 1130 | 'tn', 1131 | '216' 1132 | ], 1133 | [ 1134 | 'Turkey (Türkiye)', 1135 | 'tr', 1136 | '90' 1137 | ], 1138 | [ 1139 | 'Turkmenistan', 1140 | 'tm', 1141 | '993' 1142 | ], 1143 | [ 1144 | 'Turks and Caicos Islands', 1145 | 'tc', 1146 | '1649' 1147 | ], 1148 | [ 1149 | 'Tuvalu', 1150 | 'tv', 1151 | '688' 1152 | ], 1153 | [ 1154 | 'U.S. Virgin Islands', 1155 | 'vi', 1156 | '1340' 1157 | ], 1158 | [ 1159 | 'Uganda', 1160 | 'ug', 1161 | '256' 1162 | ], 1163 | [ 1164 | 'Ukraine (Україна)', 1165 | 'ua', 1166 | '380' 1167 | ], 1168 | [ 1169 | 'United Arab Emirates (‫الإمارات العربية المتحدة‬‎)', 1170 | 'ae', 1171 | '971' 1172 | ], 1173 | [ 1174 | 'United Kingdom', 1175 | 'gb', 1176 | '44', 1177 | 0 1178 | ], 1179 | [ 1180 | 'United States', 1181 | 'us', 1182 | '1', 1183 | 0 1184 | ], 1185 | [ 1186 | 'Uruguay', 1187 | 'uy', 1188 | '598' 1189 | ], 1190 | [ 1191 | 'Uzbekistan (Oʻzbekiston)', 1192 | 'uz', 1193 | '998' 1194 | ], 1195 | [ 1196 | 'Vanuatu', 1197 | 'vu', 1198 | '678' 1199 | ], 1200 | [ 1201 | 'Vatican City (Città del Vaticano)', 1202 | 'va', 1203 | '39', 1204 | 1 1205 | ], 1206 | [ 1207 | 'Venezuela', 1208 | 've', 1209 | '58' 1210 | ], 1211 | [ 1212 | 'Vietnam (Việt Nam)', 1213 | 'vn', 1214 | '84' 1215 | ], 1216 | [ 1217 | 'Wallis and Futuna (Wallis-et-Futuna)', 1218 | 'wf', 1219 | '681' 1220 | ], 1221 | [ 1222 | 'Western Sahara (‫الصحراء الغربية‬‎)', 1223 | 'eh', 1224 | '212', 1225 | 1 1226 | ], 1227 | [ 1228 | 'Yemen (‫اليمن‬‎)', 1229 | 'ye', 1230 | '967' 1231 | ], 1232 | [ 1233 | 'Zambia', 1234 | 'zm', 1235 | '260' 1236 | ], 1237 | [ 1238 | 'Zimbabwe', 1239 | 'zw', 1240 | '263' 1241 | ], 1242 | [ 1243 | 'Åland Islands', 1244 | 'ax', 1245 | '358', 1246 | 1 1247 | ] 1248 | ] 1249 | 1250 | export const countriesIso = allCountries.map(country => country[1].toUpperCase()) 1251 | 1252 | export const countries = allCountries.map(country => ({ 1253 | name: country[0], 1254 | iso2: country[1].toUpperCase(), 1255 | dialCode: country[2], 1256 | priority: country[3] || 0, 1257 | areaCodes: country[4] || null 1258 | })) 1259 | -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/assets/locales/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | countrySelectorLabel: 'Country code', 3 | countrySelectorError: 'Choose country', 4 | phoneNumberLabel: 'Phone number', 5 | example: 'Example:' 6 | } 7 | -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/index.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 318 | 344 | -------------------------------------------------------------------------------- /src/VuePhoneNumberInput/mixins/StylesHandler.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | theme: { type: Object, required: true } 4 | }, 5 | computed: { 6 | labelColorStyle () { 7 | if (this.error) return this.theme.errorColor 8 | else if (this.valid) return this.theme.validColor 9 | else if (this.isFocus) return this.theme.color 10 | else if (this.dark) return this.theme.textDarkColor 11 | return null 12 | }, 13 | inputBorderStyle () { 14 | if (this.error) return this.theme.borderErrorColor 15 | else if (this.valid) return this.theme.borderValidColor 16 | else if (this.isHover || this.isFocus) return this.theme.borderColor 17 | return null 18 | }, 19 | inputBoxShadowStyle () { 20 | if (this.isFocus) { 21 | if (this.error) return this.theme.boxShadowError 22 | else if (this.valid) return this.theme.boxShadowValid 23 | return this.theme.boxShadowColor 24 | } 25 | return null 26 | }, 27 | inputBgColor () { 28 | return !this.dark ? null : this.theme.bgDarkColor 29 | }, 30 | textColor () { 31 | return this.dark ? this.theme.textDarkColor : null 32 | }, 33 | inputCaretStyle () { 34 | return ({ caretColor: this.theme.colorValue }) 35 | }, 36 | radiusStyle () { 37 | return this.theme.borderRadius 38 | }, 39 | radiusLeftStyle () { 40 | return this.theme.borderLeftRadius 41 | }, 42 | radiusRightStyle () { 43 | return this.theme.borderRightRadius 44 | }, 45 | bgItemSelectedStyle () { 46 | return this.theme.bgColor 47 | }, 48 | loaderBgColor () { 49 | return this.theme.bgColor 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LouisMazel/vue-phone-number-input/e612eb6d766fdb3fbee99a4b48fe429d9b7bceeb/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/scss/variables.scss: -------------------------------------------------------------------------------- 1 | $primary-color: dodgerblue !default; 2 | $secondary-color: #747474 !default; 3 | $secondary-color-dark: rgba(255, 255, 255, 0.7) !default; 4 | $third-color: #CCC !default; 5 | $third-color-dark: rgba(255, 255, 255, 0.7) !default; 6 | $danger-color: orangered !default; 7 | $success-color: yellowgreen !default; 8 | $info-color: #17A2B8 !default; 9 | $warning-color: #FFA300 !default; 10 | $light-color: #F5F5F5 !default; 11 | $default-color: #CCC !default; 12 | $black-color: #000 !default; 13 | $white-color: #FFF !default; 14 | $grey-color: #F2F2F2 !default; 15 | $text-color: black !default; 16 | $bg-color: white !default; 17 | $hover-color: #F2F2F2 !default; 18 | $muted-color: #747474 !default; 19 | $disabled-color: #CCC !default; 20 | $primary-color-transparency: rgba($primary-color, 0.7) !default; 21 | $danger-color-transparency: rgba($danger-color, 0.7) !default; 22 | $success-color-transparency: rgba($success-color, 0.7) !default; 23 | 24 | $dark-color: #24292E !default; 25 | $grey-color-dark: darken($grey-color, 25%) !default; 26 | $text-color-dark: #F2F2F2 !default; 27 | $bg-color-dark: #21222E !default; 28 | $bg-color-dark-l: #303144 !default; 29 | $hover-color-dark: #2E2F40 !default; 30 | $muted-color-dark: rgba(255, 255, 255, 0.3) !default; 31 | 32 | $border-radius: 8px !default; 33 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 34 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | // this aligns with Vue's browser support 4 | "target": "es5", 5 | // this enables stricter inference for data properties on `this` 6 | "strict": true, 7 | // if using webpack 2+ or rollup, to leverage tree shaking: 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "declaration": true, 11 | "outDir": "dist", 12 | "esModuleInterop": true, 13 | "allowJs": true, 14 | "jsx": "preserve" 15 | }, 16 | "include": ["**/*"], 17 | "exclude": [ 18 | "node_modules", 19 | "dist" 20 | ] 21 | } -------------------------------------------------------------------------------- /vue-phone-number-input.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'vue-phone-number-input' -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pluginOptions: { 3 | webpackBundleAnalyzer: { 4 | openAnalyzer: false 5 | } 6 | }, 7 | publicPath: './', 8 | lintOnSave: undefined 9 | } --------------------------------------------------------------------------------