feature: rewrite to Composition API (#446)

docs/others/v3.md

@@ -135,10 +135,10 @@ Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.i
   | ----- | --------- | ----------- | ----- |
   | `input` | `String`, `Object` | Fires when the input changes with the argument is the object includes `{ number, isValid, country }` | `onInput` deprecated |
   | `validate` | `Object` | Fires when the correctness of the phone number changes (from `true` to `false` or vice-versa) and when the component is mounted `{ number, isValid, country }` | `onValidate` deprecated |
-  | `blur` |  | Fires on blur event | `onBlur` deprecated |
-  | `focus` |  | Fires on focus event | |
-  | `space` |  | Fires on keyup.space event | `onSpace` deprecated |
-  | `enter` |  | Fires on keyup.enter event | `onEnter` deprecated |
+  | `blur` | `FocusEvent` | Fires on blur event  | `onBlur` deprecated |
+  | `focus` | `FocusEvent` | Fires on focus event  | |
+  | `space` | `KeyboardEvent` | Fires on keyup.space event  | `onSpace` deprecated |
+  | `enter` | `KeyboardEvent` | Fires on keyup.enter event  | `onEnter` deprecated |
   | `open` |  | Fires when the flags dropdown opens | |
   | `close` |  | Fires when the flags dropdown closes | |
   | `country-changed` | `Object` | Fires when country changed (even for the first time) | Available from [v2.4.2](https://github.com/iamstevendao/vue-tel-input/releases/tag/v2.4.2) |

package.json

@@ -21,6 +21,7 @@
   "module": "./dist/vue-tel-input.js",
   "scripts": {
     "dev": "vitepress dev docs",
+    "test": "vitest --ui",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "docs:dev": "vitepress dev docs",
@@ -29,17 +30,21 @@
   },
   "dependencies": {
     "libphonenumber-js": "^1.10.51",
-    "vue": "^3.3.9"
+    "vue": "^3.4.21"
   },
   "files": [
     "dist"
   ],
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/ui": "^1.4.0",
+    "@vue/test-utils": "^2.4.5",
+    "jsdom": "^24.0.0",
     "typescript": "^5.3.2",
     "vite": "^5.0.2",
     "vitepress": "^1.0.0-rc.31",
-    "vue-tsc": "^1.8.22"
+    "vitest": "^1.4.0",
+    "vue-tsc": "^2.0.6"
   },
   "keywords": [
     "vue",

src/assets/all-countries.js → src/assets/all-countries.ts

@@ -1,5 +1,8 @@
 // A fork of https://github.com/jackocnr/intl-tel-input/blob/master/src/js/data.js
 
+import type { Country, CountryObject } from "../types";
+
+
 // Array of country objects for the flag dropdown.
 
 // Here is the criteria for the plugin to support a given country/territory
@@ -16,7 +19,8 @@
 //    Order (if >1 country with same dial code),
 //    Area codes
 // ]
-const allCountries = [
+
+const allCountries: Country[] = [
   [
     'Afghanistan (‫افغانستان‬‎)',
     'af',
@@ -1330,4 +1334,4 @@ export default allCountries.map(([name, iso2, dialCode, priority = 0, areaCodes
   dialCode,
   priority,
   areaCodes,
-}));
+})) as CountryObject[];