svelte-tel-input 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # svelte-tel-input
 
+## 2.1.0
+
+### Minor Changes
+
+-   feat: support event driven behavior ([#150](https://github.com/gyurielf/svelte-tel-input/pull/150))
+
+## 2.0.1
+
+### Patch Changes
+
+-   fix: component export ([#147](https://github.com/gyurielf/svelte-tel-input/pull/147))
+
 ## 2.0.0
 
 ### Major Changes

package/README.md

@@ -6,6 +6,10 @@
 
 > Lightweight svelte tel/phone input standardizer.
 
+<img src="https://raw.githubusercontent.com/gyurielf/svelte-tel-input/main/static/demo.gif" width="600px" align="center">
+
+🔥 Check it out live [here](https://svelte-tel-input.vercel.app/)
+
 ## Installation
 
 Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-tel-input).

package/components/Input/TelInput.svelte

@@ -101,16 +101,32 @@ const initialize = () => {
 onMount(() => {
   initialize();
 });
-let initRun = true;
-const watchFunction = () => {
-  if (!initRun) {
+let countryWatchInitRun = true;
+const countryChangeWatchFunction = () => {
+  if (!countryWatchInitRun) {
     handleParsePhoneNumber(null, country);
   }
-  initRun = false;
+  countryWatchInitRun = false;
 };
-const countryChangeWatch = watcher(null, watchFunction);
+let resetValueWatchInitRun = true;
+const resetValueWatchFunction = () => {
+  if (!resetValueWatchInitRun) {
+    inputValue = "";
+    updateCountry(null);
+    valid = true;
+    parsedTelInput = null;
+    dispatch("parseInput", parsedTelInput);
+  }
+  resetValueWatchInitRun = false;
+};
+const countryChangeWatch = watcher(null, countryChangeWatchFunction);
 $:
   $countryChangeWatch = country;
+const resetValueWatch = watcher(null, resetValueWatchFunction);
+$:
+  if (value === null && inputValue !== "") {
+    $resetValueWatch = value;
+  }
 $:
   getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country) : null : placeholder;
 </script>

package/components/Input/TelInput.svelte.d.ts

@@ -22,9 +22,11 @@ declare const __propDef: {
         keypress: KeyboardEvent;
         keyup: KeyboardEvent;
         paste: ClipboardEvent;
-        parseError: CustomEvent<any>;
-        valid: CustomEvent<any>;
-        parseInput: CustomEvent<any>;
+        country: CustomEvent<CountryCode | null>;
+        parseError: CustomEvent<string>;
+        parseInput: CustomEvent<NormalizedTelNumber | Partial<NormalizedTelNumber> | null>;
+        valid: CustomEvent<boolean>;
+        value: CustomEvent<E164Number | null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './components/Input/TelInput.svelte';
+export { default as TelInput } from './components/Input/TelInput.svelte';
 export { getCurrentCountry, isSelected, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number } from './utils/helpers';
 export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
 export { clickOutsideAction } from './utils/directives/clickOutsideAction';

package/index.js

@@ -1,4 +1,4 @@
-export { default } from './components/Input/TelInput.svelte';
+export { default as TelInput } from './components/Input/TelInput.svelte';
 export { getCurrentCountry, isSelected, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number } from './utils/helpers';
 export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
 export { clickOutsideAction } from './utils/directives/clickOutsideAction';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -22,43 +22,43 @@
     "pnpm": ">= 7"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.28",
+    "libphonenumber-js": "^1.10.30",
     "svelte": "^3.58.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
     "@changesets/get-github-info": "^0.5.2",
     "@changesets/types": "^5.2.1",
-    "@macfja/svelte-persistent-store": "^2.2.1",
-    "@playwright/test": "^1.32.3",
+    "@macfja/svelte-persistent-store": "^2.3.0",
+    "@playwright/test": "^1.33.0",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.15.7",
+    "@sveltejs/kit": "^1.16.2",
     "@sveltejs/package": "^1.0.2",
     "@testing-library/svelte": "^3.2.2",
     "@testing-library/user-event": "^14.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "autoprefixer": "^10.4.14",
-    "cssnano": "^6.0.0",
+    "cssnano": "^6.0.1",
     "dotenv": "^16.0.3",
     "edit-package-json": "^0.8.12",
-    "eslint": "^8.39.0",
+    "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "husky": "^8.0.3",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.0.0",
     "micromatch": "^4.0.5",
     "postcss": "^8.4.23",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
     "schema-dts": "^1.1.2",
-    "svelte-check": "^3.2.0",
-    "svelte2tsx": "^0.6.11",
-    "tailwindcss": "^3.3.1",
+    "svelte-check": "^3.3.1",
+    "svelte2tsx": "^0.6.13",
+    "tailwindcss": "^3.3.2",
     "tslib": "^2.5.0",
     "typescript": "^5.0.4",
-    "vite": "^4.3.1",
-    "vitest": "^0.30.1"
+    "vite": "^4.3.5",
+    "vitest": "^0.31.0"
   },
   "type": "module",
   "license": "MIT",

package/types/index.d.ts

@@ -67,14 +67,6 @@ export interface TelInputValidity {
 	errorMessage?: string;
 }
 
-export type TelInputDispatchEvents = {
-	country: CountryCode | null;
-	parseError: string;
-	parseInput: Partial<NormalizedTelNumber> | null;
-	valid: boolean;
-	value: E164Number | null;
-};
-
 export interface TelInputOptions {
 	/**
 	 * It generates a placeholder into your input for the selected country. E.g. if the country is `US`, the placeholder will be `201 555 0123` by default.