{"_id":"@aiabdelbaqy/vue-country-tel-input","_rev":"5-827b6f02a3828e03ffc89f952efdb0fa","name":"@aiabdelbaqy/vue-country-tel-input","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.1":{"name":"@aiabdelbaqy/vue-country-tel-input","private":false,"version":"0.0.1","keywords":["vue-country-tel-input","vue","vue3","vue3-component","vue3-input","vue3-tel-input","vue3-country-input","vue3-tel-country-input","vue3-tel-country-input","vue3-tel-country-input","plugin","tell","number","country","phone","input","input-tell","input-number","input-country","input-phone","input-tell-number","phone number"],"type":"module","main":"dist/index.js","module":"dist/index.js","unpkg":"dist/index.js","jsdelivr":"dist/index.js","exports":{".":"./dist/index.js","./styles.css":"./dist/style.css"},"browser":{"./styles.css":"./dist/style.css"},"types":"./dist/pluginBuilder.d.ts","license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@popperjs/core":"^2.11.8","vue":"^3.3.11"},"devDependencies":{"@vitejs/plugin-vue":"^4.5.2","libphonenumber-js":"^1.10.53","rollup-plugin-typescript2":"^0.36.0","sass":"^1.70.0","typescript":"^5.2.2","vite":"^5.0.8","vue-tsc":"^1.8.25"},"description":"VueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r a telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.","repository":{"type":"git","url":"git+https://github.com/AliAbdelbaky/vue-country-tel-input.git"},"author":{"name":"Ali abdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"bugs":{"url":"https://github.com/AliAbdelbaky/vue-country-tel-input/issues"},"homepage":"https://github.com/AliAbdelbaky/vue-country-tel-input#readme","gitHead":"410a5f58cb260fc6f869cb14ff7a2c70a65e9d05","_id":"@aiabdelbaqy/vue-country-tel-input@0.0.1","_nodeVersion":"18.14.2","_npmVersion":"9.6.5","dist":{"integrity":"sha512-aJS0vfQRegtSHcNjX2yjOnv18cop6rbGp29TCQ80FK6ZQRIz5KS6xyPHKzGfaqVBdxkmesrmRAH+dGtbxqY4pA==","shasum":"a74e658bbbe3a94c4061d6765f766c0ba6f90bbc","tarball":"https://registry.npmjs.org/@aiabdelbaqy/vue-country-tel-input/-/vue-country-tel-input-0.0.1.tgz","fileCount":13,"unpackedSize":687850,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBL/Oz6maGg4R8yk7cT/njazsWfr/ljfPF646JWOyoorAiBLhPYLUbsD8cS95K3kp4WTlVyjCOTOb0HEknu/mtwadw=="}]},"_npmUser":{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"directories":{},"maintainers":[{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-country-tel-input_0.0.1_1707398972462_0.29293038380704317"},"_hasShrinkwrap":false},"0.0.2":{"name":"@aiabdelbaqy/vue-country-tel-input","private":false,"version":"0.0.2","keywords":["vue-country-tel-input","vue","vue3","vue3-component","vue3-input","vue3-tel-input","vue3-country-input","vue3-tel-country-input","vue3-tel-country-input","vue3-tel-country-input","plugin","tell","number","country","phone","input","input-tell","input-number","input-country","input-phone","input-tell-number","phone number"],"type":"module","main":"dist/index.js","module":"dist/index.js","unpkg":"dist/index.js","jsdelivr":"dist/index.js","exports":{".":"./dist/index.js","./styles.css":"./dist/style.css"},"browser":{"./styles.css":"./dist/style.css"},"types":"./dist/pluginBuilder.d.ts","license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@popperjs/core":"^2.11.8","vue":"^3.3.11"},"devDependencies":{"@vitejs/plugin-vue":"^4.5.2","libphonenumber-js":"^1.10.53","rollup-plugin-typescript2":"^0.36.0","sass":"^1.70.0","typescript":"^5.2.2","vite":"^5.0.8","vue-tsc":"^1.8.25"},"description":"VueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r a telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.","repository":{"type":"git","url":"git+https://github.com/AliAbdelbaky/vue-country-tel-input.git"},"author":{"name":"Ali abdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"bugs":{"url":"https://github.com/AliAbdelbaky/vue-country-tel-input/issues"},"homepage":"https://github.com/AliAbdelbaky/vue-country-tel-input#readme","gitHead":"57e84276f356d8db8ca7a261154391ad243b8b29","_id":"@aiabdelbaqy/vue-country-tel-input@0.0.2","_nodeVersion":"18.14.2","_npmVersion":"9.6.5","dist":{"integrity":"sha512-Krop5vv/u7hzntO6PVxNgWIBfcqtmGPyKEEESMwRb6RqhlaJafUy1JvbVrrrY7UAe/oeNkelsW0yWgzPsOrjhw==","shasum":"b6d5dfa952163df6eba7a86a11a33b4a8f177811","tarball":"https://registry.npmjs.org/@aiabdelbaqy/vue-country-tel-input/-/vue-country-tel-input-0.0.2.tgz","fileCount":13,"unpackedSize":687964,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvFn5cjtQdsoZI7p8UbmjKB5bwqG2PzgFqsP47t+3zZgIgaKrwpIM8IowMnEImJ83dW2CyXVrDSGNezFsDJza+BQ8="}]},"_npmUser":{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"directories":{},"maintainers":[{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-country-tel-input_0.0.2_1707399927838_0.45982922122415504"},"_hasShrinkwrap":false},"0.0.3":{"name":"@aiabdelbaqy/vue-country-tel-input","private":false,"version":"0.0.3","keywords":["vue-country-tel-input","vue","vue3","vue3-component","vue3-input","vue3-tel-input","vue3-country-input","vue3-tel-country-input","vue3-tel-country-input","vue3-tel-country-input","plugin","tell","number","country","phone","input","input-tell","input-number","input-country","input-phone","input-tell-number","phone number"],"type":"module","main":"dist/index.js","module":"dist/index.js","unpkg":"dist/index.js","jsdelivr":"dist/index.js","exports":{".":"./dist/index.js","./styles.css":"./dist/style.css"},"browser":{"./styles.css":"./dist/style.css"},"types":"./dist/pluginBuilder.d.ts","license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@popperjs/core":"^2.11.8","vue":"^3.3.11"},"devDependencies":{"@vitejs/plugin-vue":"^4.5.2","libphonenumber-js":"^1.10.53","rollup-plugin-typescript2":"^0.36.0","sass":"^1.70.0","typescript":"^5.2.2","vite":"^5.0.8","vue-tsc":"^1.8.25"},"description":"VueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r a telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.","repository":{"type":"git","url":"git+https://github.com/AliAbdelbaky/vue-country-tel-input.git"},"author":{"name":"Ali abdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"bugs":{"url":"https://github.com/AliAbdelbaky/vue-country-tel-input/issues"},"homepage":"https://github.com/AliAbdelbaky/vue-country-tel-input#readme","gitHead":"20635138842615ad16e85c7c5811628511630d44","_id":"@aiabdelbaqy/vue-country-tel-input@0.0.3","_nodeVersion":"18.14.2","_npmVersion":"9.6.5","dist":{"integrity":"sha512-ESdnNy5SLvba04eDgeEhWL/cS5uMhd0DSv2+Wx5/Yxa915lTO1iWe3HF9Aw62DJshUAQLNHLypa8E7dbt7TlQQ==","shasum":"3a18dc836c0aff2ab57ce5cafec27daed95c047a","tarball":"https://registry.npmjs.org/@aiabdelbaqy/vue-country-tel-input/-/vue-country-tel-input-0.0.3.tgz","fileCount":13,"unpackedSize":687977,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb8tL3uIx44be2mK/L5Z2ktU5uuxyuBQrm1JptsXRkUgIhANL7wsl4qFl3DB+8WY0DHZ801yb70U4DLUPLEDzMTArw"}]},"_npmUser":{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"directories":{},"maintainers":[{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-country-tel-input_0.0.3_1707400230562_0.6000254064099526"},"_hasShrinkwrap":false},"0.0.4":{"name":"@aiabdelbaqy/vue-country-tel-input","private":false,"version":"0.0.4","keywords":["vue-country-tel-input","vue","vue3","vue3-component","vue3-input","vue3-tel-input","vue3-country-input","vue3-tel-country-input","vue3-tel-country-input","vue3-tel-country-input","plugin","tell","number","country","phone","input","input-tell","input-number","input-country","input-phone","input-tell-number","phone number"],"type":"module","main":"dist/index.js","module":"dist/index.js","unpkg":"dist/index.js","jsdelivr":"dist/index.js","exports":{".":"./dist/index.js","./styles.css":"./dist/style.css"},"browser":{"./styles.css":"./dist/style.css"},"types":"./dist/pluginBuilder.d.ts","license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@popperjs/core":"^2.11.8","vue":"^3.3.11"},"devDependencies":{"@vitejs/plugin-vue":"^4.5.2","libphonenumber-js":"^1.10.53","rollup-plugin-typescript2":"^0.36.0","sass":"^1.70.0","typescript":"^5.2.2","vite":"^5.0.8","vue-tsc":"^1.8.25"},"description":"VueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r a telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.","repository":{"type":"git","url":"git+https://github.com/AliAbdelbaky/vue-country-tel-input.git"},"author":{"name":"Ali abdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"bugs":{"url":"https://github.com/AliAbdelbaky/vue-country-tel-input/issues"},"homepage":"https://github.com/AliAbdelbaky/vue-country-tel-input#readme","gitHead":"da256e932cdcf6c1508e5ddbeaadb9ce45cca730","_id":"@aiabdelbaqy/vue-country-tel-input@0.0.4","_nodeVersion":"18.14.2","_npmVersion":"9.6.5","dist":{"integrity":"sha512-K9r1VQCQD5OkEPTF3SGdDZwZt/CoapaR+nmTDl6B1X/KLYDhqZY100XkTHtisRVhZIcHTaPsAaR7mux2OOaBuA==","shasum":"dba1ba69b42b938601b5609693d1a60096ededd7","tarball":"https://registry.npmjs.org/@aiabdelbaqy/vue-country-tel-input/-/vue-country-tel-input-0.0.4.tgz","fileCount":13,"unpackedSize":687994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyGNMjKY7ZMWws7I6LcYKoDk1zFRMwAPRbSdYb2GXogAiBaYC6DDeSoazr6u3IJ90hz8XzaXng+iBs+8hzRsOhwsQ=="}]},"_npmUser":{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"directories":{},"maintainers":[{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-country-tel-input_0.0.4_1707400540325_0.34759296700105247"},"_hasShrinkwrap":false},"1.0.0":{"name":"@aiabdelbaqy/vue-country-tel-input","private":false,"version":"1.0.0","keywords":["vue-country-tel-input","vue","vue3","vue3-component","vue3-input","vue3-tel-input","vue3-country-input","vue3-tel-country-input","vue3-tel-country-input","vue3-tel-country-input","plugin","tell","number","country","phone","input","input-tell","input-number","input-country","input-phone","input-tell-number","phone number"],"main":"dist/index.js","module":"dist/index.js","unpkg":"dist/index.js","jsdelivr":"dist/index.js","exports":{".":"./dist/index.js","./styles.css":"./dist/style.css"},"browser":{"./styles.css":"./dist/style.css"},"types":"./dist/components.d.ts","license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","build:package":"rollup -c","gen-version":"node scripts/gen-version.js","publish:npm":"npm run build && npm publish --access public","preview":"vite preview"},"dependencies":{"@popperjs/core":"^2.11.8","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@rollup/plugin-terser":"^0.4.4","deepmerge":"^4.3.1","rollup-plugin-esbuild":"^6.1.1","vue":"^3.3.11"},"devDependencies":{"@babel/core":"^7.22.15","@babel/eslint-parser":"^7.22.15","@babel/generator":"^7.22.15","@babel/parser":"^7.22.16","@babel/preset-env":"^7.22.15","@babel/traverse":"^7.22.15","@lylajs/web":"^1.2.2","@vitejs/plugin-vue":"^4.5.2","libphonenumber-js":"^1.10.53","rollup-plugin-typescript2":"^0.36.0","rollup":"^4.3.0","rollup-plugin-esbuild":"^6.1.0","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-replace":"^5.0.2","@rollup/plugin-terser":"^0.4.3","sass":"^1.70.0","typescript":"^5.2.2","vite":"^5.0.8","vue-tsc":"^1.8.25"},"description":"VueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r a telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.","repository":{"type":"git","url":"git+https://github.com/AliAbdelbaky/vue-country-tel-input.git"},"author":{"name":"Ali abdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"bugs":{"url":"https://github.com/AliAbdelbaky/vue-country-tel-input/issues"},"homepage":"https://github.com/AliAbdelbaky/vue-country-tel-input#readme","gitHead":"38de99bcbbf8f44d2d6e41384ea0acd1acadd60d","_id":"@aiabdelbaqy/vue-country-tel-input@1.0.0","_nodeVersion":"18.14.2","_npmVersion":"9.6.5","dist":{"integrity":"sha512-h0bG33nt0YRc+buDyhKowzkR/tKna3qJIq+p9Vz9jtQ3jc2LklwfAuZy9x06f9VOubWHGqT4b/Zh46shCoyEJw==","shasum":"a3e10031855d12de841feb978a3da12904e77e99","tarball":"https://registry.npmjs.org/@aiabdelbaqy/vue-country-tel-input/-/vue-country-tel-input-1.0.0.tgz","fileCount":10,"unpackedSize":697481,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT231xP9O2kaXrmvHvZOg98xFmfIgyK7XFkpN0A1j0aQIhAK6Q+xfilWz2fQHTdz2t8NdOu8f8/LFFQ/6sT8OSChdl"}]},"_npmUser":{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"directories":{},"maintainers":[{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-country-tel-input_1.0.0_1707584336862_0.6364388230105573"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aiabdelbaqy/vue-country-tel-input","private":false,"version":"1.0.1","keywords":["vue-country-tel-input","vue","vue3","vue3-component","vue3-input","vue3-tel-input","vue3-country-input","vue3-tel-country-input","vue3-tel-country-input","vue3-tel-country-input","plugin","tell","number","country","phone","input","input-tell","input-number","input-country","input-phone","input-tell-number","phone number"],"main":"dist/index.js","module":"dist/index.js","unpkg":"dist/index.js","jsdelivr":"dist/index.js","exports":{".":"./dist/index.js","./styles.css":"./dist/style.css"},"browser":{"./styles.css":"./dist/style.css"},"types":"./dist/components.d.ts","license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","build:package":"rollup -c","gen-version":"node scripts/gen-version.js","publish":"npm publish --access public  ","preview":"vite preview"},"dependencies":{"@popperjs/core":"^2.11.8","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@rollup/plugin-terser":"^0.4.4","deepmerge":"^4.3.1","rollup-plugin-esbuild":"^6.1.1","vue":"^3.3.11"},"devDependencies":{"@babel/core":"^7.22.15","@babel/eslint-parser":"^7.22.15","@babel/generator":"^7.22.15","@babel/parser":"^7.22.16","@babel/preset-env":"^7.22.15","@babel/traverse":"^7.22.15","@lylajs/web":"^1.2.2","@vitejs/plugin-vue":"^4.5.2","libphonenumber-js":"^1.10.53","rollup-plugin-typescript2":"^0.36.0","rollup":"^4.3.0","rollup-plugin-esbuild":"^6.1.0","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-replace":"^5.0.2","@rollup/plugin-terser":"^0.4.3","sass":"^1.70.0","typescript":"^5.2.2","vite":"^5.0.8","vue-tsc":"^1.8.25"},"description":"VueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r a telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.","repository":{"type":"git","url":"git+https://github.com/AliAbdelbaky/vue-country-tel-input.git"},"author":{"name":"Ali abdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"bugs":{"url":"https://github.com/AliAbdelbaky/vue-country-tel-input/issues"},"homepage":"https://github.com/AliAbdelbaky/vue-country-tel-input#readme","gitHead":"77b3801199f898d4c6d8b8f2fffe6bfc0ad74200","_id":"@aiabdelbaqy/vue-country-tel-input@1.0.1","_nodeVersion":"18.14.2","_npmVersion":"9.6.5","dist":{"integrity":"sha512-F7LcmgXDEZaSE4NuSfA4ojNK0OZF+AEj6ZbpoZL+GuDER43UH0QLgpiCgsn7bdW0pKu/gSVVw7EJDTfjmvASLw==","shasum":"32f12964bf411ce7ba6d745a25b6646e5105da14","tarball":"https://registry.npmjs.org/@aiabdelbaqy/vue-country-tel-input/-/vue-country-tel-input-1.0.1.tgz","fileCount":18,"unpackedSize":700262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMPZDXiG7BlqWtN81PZLDFr52BciHjL28QzYdL9NBJgAiEA43vJQ621VzSRrRQy2e9kpaajt9rB+AGsYZOHf8oPUVw="}]},"_npmUser":{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"directories":{},"maintainers":[{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-country-tel-input_1.0.1_1707584665657_0.9452857261376517"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-08T13:29:32.352Z","0.0.1":"2024-02-08T13:29:32.666Z","modified":"2024-02-10T17:04:26.150Z","0.0.2":"2024-02-08T13:45:28.070Z","0.0.3":"2024-02-08T13:50:30.750Z","0.0.4":"2024-02-08T13:55:40.607Z","1.0.0":"2024-02-10T16:58:57.076Z","1.0.1":"2024-02-10T17:04:25.955Z"},"maintainers":[{"name":"aiabdelbaqy","email":"ali.abdelbaky2000@gmail.com"}],"description":"VueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r a telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.","homepage":"https://github.com/AliAbdelbaky/vue-country-tel-input#readme","keywords":["vue-country-tel-input","vue","vue3","vue3-component","vue3-input","vue3-tel-input","vue3-country-input","vue3-tel-country-input","vue3-tel-country-input","vue3-tel-country-input","plugin","tell","number","country","phone","input","input-tell","input-number","input-country","input-phone","input-tell-number","phone number"],"repository":{"type":"git","url":"git+https://github.com/AliAbdelbaky/vue-country-tel-input.git"},"author":{"name":"Ali abdelbaqy","email":"ali.abdelbaky2000@gmail.com"},"bugs":{"url":"https://github.com/AliAbdelbaky/vue-country-tel-input/issues"},"license":"MIT","readme":"# VueCountryTelInput @beta\r\n\r\n## Description\r\n\r\nVueCountryTelInput is a Vue.js plugin that provides a user-friendly input component for selecting a country and entering\r\na telephone number. It offers built-in validation to ensure the entered phone number is valid for the selected country.\r\n\r\nThe plugin utilizes the REST Countries API to fetch country data, allowing users to easily select their country from a\r\ndropdown list. It also leverages the libphonenumber-js library for phone number parsing and validation, ensuring that\r\nthe entered phone number adheres to the expected format for the selected country.\r\n\r\nWith VueCountryTelInput, you can enhance your Vue.js applications with a seamless and intuitive country and telephone\r\nnumber input, all while ensuring the accuracy and validity of the entered phone numbers.\r\n\r\n## Features\r\n\r\n- Country selection: Users can easily select their country from a dropdown list.\r\n- Phone number input: Users can input their telephone number according to the selected country's format.\r\n- Validation: The plugin validates the entered phone number to ensure it is valid for the selected country.\r\n- REST Countries API integration: Country data is fetched from the REST Countries API, providing accurate and up-to-date\r\n  information.\r\n- libphonenumber-js integration: The plugin leverages the libphonenumber-js library for phone number parsing and\r\n  validation.\r\n- Customization: The plugin provides various customization options, including themes, sizes, and more.\r\n- it's typescript ready\r\n\r\n### International Telephone Input with Vue 3.\r\n\r\n[![npm](https://img.shields.io/badge/npm-f00?logo=npm&logoColor=wight)](https://www.npmjs.com/package/@aiabdelbaqy/vue-country-tel-input) [![stars](https://img.shields.io/badge/github-000?logo=github&logoColor=wight)](https://github.com/AliAbdelbaky/vue-country-tell-number)\r\n\r\n\r\n\r\n## Changelog\r\n\r\n[Go to Github Releases](https://www.npmjs.com/package/@aiabdelbaqy/vue-country-tel-input/releases)\r\n\r\n## Getting started\r\n\r\n- Install the plugin:\r\n\r\n  ```sh\r\n  npm i @aiabdelbaqy/vue-country-tel-input@latest\r\n  ```\r\n\r\n- Add the plugin into your app:\r\n\r\n  ```javascript\r\n  import {createApp} from 'vue'\r\n  \r\n  import VueCountryTelInput from '@aiabdelbaqy/vue-country-tel-input'\r\n  import '@aiabdelbaqy/vue-country-tel-input/styles.css';\r\n\r\n  const app = createApp(App);\r\n  app.use(VueCountryTelInput);\r\n  \r\n  app.mount('#app');\r\n  ```\r\n\r\n  [More info on installation](#installation)\r\n\r\n- Use the `vue-country-tel-input` component:\r\n\r\n  ```html\r\n  <template>\r\n    <VueCountryTelInput />\r\n  </template>\r\n  ```\r\n\r\n## Installation\r\n\r\n### npm\r\n\r\n```bash\r\n  npm i @aiabdelbaqy/vue-country-tel-input@latest\r\n```\r\n\r\nInstall the plugin into Vue:\r\n\r\n```javascript\r\n  import {createApp} from 'vue'\r\n\r\n  import VueCountryTelInput from '@aiabdelbaqy/vue-country-tel-input'\r\n  import '@aiabdelbaqy/vue-country-tel-input/styles.css';\r\n  \r\n  const app = createApp(App);\r\n  app.use(VueCountryTelInput);\r\n  \r\n  app.mount('#app');\r\n```\r\nOr use the component directly:\r\n\r\n```vue\r\n\r\n<template>\r\n  <VueCountryTelInput ref=\"inputRef\"/>\r\n  <button @click=\"validatePhone\">validate</button>\r\n  <button @click=\"resetPhone\">reset</button>\r\n  <p>{{phone}}</p>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import {ref} from 'vue';\r\n  // important \r\n  import {VueCountryTelInput} from '@aiabdelbaqy/vue-country-tel-input'\r\n  import '@aiabdelbaqy/vue-country-tel-input/styles.css';\r\n\r\n  interface ValidatePayload {\r\n    valid: boolean;\r\n    errors: string[];\r\n    model: {\r\n      country: string | null;\r\n      phone: string | undefined;\r\n      dialingNumber: number | null;\r\n    };\r\n    countryInfo: () => any;\r\n  }\r\n\r\n  const inputRef = ref<any>(null);\r\n  const phone = ref<string>('');\r\n\r\n  const validatePhone = () => {\r\n    const data = inputRef.value?.validate<ValidatePayload>();\r\n    if (!data.valid) return;\r\n    console.log('valid', data);\r\n    phone.value = data.model.dialingNumber + data.model.phone;\r\n  }\r\n  const resetPhone = () => {\r\n    inputRef.value?.reset();\r\n  }\r\n</script>\r\n```\r\n\r\n> View all available options in [Props](https://www.npmjs.com/package/@aiabdelbaqy/vue-country-tel-input).\r\n\r\n\r\n| **Prop**            | **Type** | **Default** **Value** | **Accepted** **Values**                                |\r\n|---------------------|----------|-----------------------|--------------------------------------------------------|\r\n| **`msg`**           | String   |                       | Any string                                             |\r\n| **`size`**          | String   | 'medium'              | 'small', 'medium', 'large'                             |\r\n| **`label`**         | String   | **phone number**      | Any string                                             |\r\n| **`showRequired`**  | Boolean  | false                 | true, false                                            |\r\n| **`showLabel`**     | Boolean  | true                  | true, false                                            |\r\n| **`themeOverride`** | Object   | null                  | [ThemeOverride](#ThemeOverride)                        |\r\n| **`selectWidth`**   | String   | '20%'                 | Any valid CSS width value (e.g., '100px', '50%', etc.) |\r\n\r\n\r\n# Events\r\n\r\n> validate\r\n\r\n```typescript\r\ntype validate = () => {\r\n    valid: boolean;\r\n    errors: string[];\r\n    model: {\r\n        country: string | null;\r\n        phone: string | undefined;\r\n        dialingNumber: number | null;\r\n    };\r\n    countryInfo: () => any;\r\n};\r\ntype reset = () => void;\r\n```\r\n\r\n> reset\r\n\r\n```typescript\r\ntype reset = () => void;\r\n```\r\n\r\n\r\n## ThemeOverride\r\n```typescript\r\n\r\ninterface ThemeType {\r\n    text: TextType;\r\n    height: HeightType;\r\n    padding: PaddingType;\r\n    border: BorderType;\r\n    color: ColorType;\r\n    font: FontType;\r\n    transitions: TransitionsType;\r\n}\r\n\r\ninterface TextType {\r\n    tiny: string;\r\n    sm: string;\r\n    md: string;\r\n    lg: string;\r\n}\r\n\r\ninterface HeightType {\r\n    tiny: string;\r\n    sm: string;\r\n    md: string;\r\n    lg: string;\r\n}\r\n\r\ninterface PaddingType {\r\n    tiny: string;\r\n    sm: string;\r\n    md: string;\r\n    lg: string;\r\n}\r\n\r\ninterface BorderType {\r\n    base: string;\r\n    active: string;\r\n    hover: string;\r\n    focus: string;\r\n    error: string;\r\n    radius: string;\r\n}\r\n\r\ninterface ColorType {\r\n    primary: string;\r\n    primaryHover: string;\r\n    secondary: string;\r\n    secondaryHover: string;\r\n    menuHover: string;\r\n    menuActive: string;\r\n}\r\n\r\ninterface FontType {\r\n    other: string;\r\n    en: string;\r\n}\r\n\r\ninterface TransitionsType {\r\n    base: string;\r\n    bezier: string;\r\n}\r\n```\r\n```html\r\n<template>\r\n  <VueCountryTelInput :themeOverride=\"themeOverride\"/>\r\n</template>\r\n```\r\n\r\n\r\n## Development\r\n\r\nClone the project\r\n\r\n```bash\r\n  git clone https://github.com/AliAbdelbaky/vue-country-tel-number\r\n```\r\n\r\nGo to the project directory\r\n\r\n```bash\r\n  cd vue-country-tel-number\r\n```\r\n\r\nInstall dependencies\r\n\r\n```bash\r\n  npm install\r\n```\r\n\r\n_**or**_\r\n\r\n```bash\r\n  yarn install \r\n```\r\n\r\nStart the server\r\n\r\n```bash\r\n  npm run dev \r\n```\r\n_**or**_\r\n\r\n```bash\r\n  yarn run dev \r\n```\r\n\r\n## License\r\n\r\nCopyright (c) 2024 Ali Abdelbaqy.\r\nReleased under the [MIT License](https://github.com/AliAbdelbaky/vue-country-tel-number).\r\n\r\nmade with &#x2764; by [Ali Abdelbaqy](https://github.com/AliAbdelbaky).\r\n\r\n\r\n","readmeFilename":"README.md"}