svelte-tel-input 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # svelte-tel-input
 
+## 3.1.0
+
+### Minor Changes
+
+-   feat: value can be reseted without country reset ([#165](https://github.com/gyurielf/svelte-tel-input/pull/165))
+
+    -   In order to reset `value` and/or `country` from outside (you must pass (or set if you binded) `null` for the property) have some side-effects:
+
+        -   Reseting the `value` will set (keep the `country` as is):
+            -   `detailedValue` to `null`
+            -   dispatch `updateDetailedValue` event
+        -   Reseting the `country` will set:
+            -   `value` to `null`
+            -   `detailedValue` to `null`
+            -   `valid` to `true` if `invalidateOnCountryChange` config option is false (_@default false_). Otherwise it will be `false`.
+            -   and dispatch `updateValid`, `updateValue` `updateDetailedValue` events
+        -   Reseting both `value` and `country` will set:
+            -   `valid` to `true`
+            -   `detailedValue` to `null`;
+
+## 3.0.1
+
+### Patch Changes
+
+-   chore: update readme with advanced example REPL ([#162](https://github.com/gyurielf/svelte-tel-input/pull/162))
+
+-   fix: auto country update after manual country change ([#162](https://github.com/gyurielf/svelte-tel-input/pull/162))
+
 ## 3.0.0
 
 ### Major Changes

package/README.md

@@ -28,6 +28,10 @@ npm install --save svelte-tel-input
 
 ## Usage
 
+### Advanced
+
+_Snippet would be too long_ - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl-1jfaar?file=README.md) (StackBlitz)
+
 ### Basic
 
 [REPL](https://stackblitz.com/edit/svelte-tel-input-repl?file=README.md) (StackBlitz)
@@ -115,7 +119,7 @@ The default export of the library is the main TelInput component. It has the fol
 
 Config options:
 
-```
+```javascript
 {
     // Generates country specific placeholder for the selected country.
     autoPlaceholder: true,
@@ -159,7 +163,20 @@ The default export of the library is the main TelInput component. It has the fol
 
 ## Caveats
 
--   In order to reset the component from outside, you must pass (or set if you binded) `null` for both the `value` and `country` properties.
+-   In order to reset `value` and/or `country` from outside (you must pass (or set if you binded) `null` for the property) have some side-effects:
+
+    -   Reseting the `value` will set (keep the `country` as is):
+        -   `detailedValue` to `null`
+        -   dispatch `updateDetailedValue` event
+    -   Reseting the `country` will set:
+        -   `value` to `null`
+        -   `detailedValue` to `null`
+        -   `valid` to `true` if `invalidateOnCountryChange` config option is false (_@default false_). Otherwise it will be `false`.
+        -   and dispatch `updateValid`, `updateValue` `updateDetailedValue` events
+    -   Reseting both `value` and `country` will set:
+        -   `valid` to `true`
+        -   `detailedValue` to `null`;
+
 -   Let's assume you pass a `US` `E164` number, which can be a partial `E164`, but long enough to determine the country and you pass `DE` country directly. The country will be updated to `US`, which is determined from the `E164` in this example. If the `E164` is not long enough to determine its country, then the country will stay what you passed to the component (`DE`).
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

package/components/Input/TelInput.svelte

@@ -62,13 +62,11 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
     if (detailedValue?.isValid && combinedOptions.spaces && detailedValue?.formatOriginal) {
       if (inputValue === detailedValue?.formatOriginal) {
         inputValue = null;
-        inputValue = "";
       }
       inputValue = detailedValue?.formatOriginal;
     } else if (detailedValue?.isValid && detailedValue?.nationalNumber) {
       if (inputValue === detailedValue?.nationalNumber) {
         inputValue = null;
-        inputValue = "";
       }
       inputValue = detailedValue?.nationalNumber;
     }
@@ -79,11 +77,11 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
     dispatch("updateDetailedValue", detailedValue);
   } else if (input === null && currCountry !== null) {
     if (currCountry !== prevCountry) {
+      prevCountry = currCountry;
       valid = !options.invalidateOnCountryChange;
       value = null;
       if (inputValue !== null || inputValue !== "") {
         inputValue = null;
-        inputValue = "";
       }
       detailedValue = null;
       dispatch("updateValid", valid);
@@ -98,7 +96,6 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
     dispatch("updateValid", valid);
     dispatch("updateDetailedValue", detailedValue);
     inputValue = null;
-    inputValue = "";
   }
 };
 let countryWatchInitRun = true;
@@ -113,6 +110,12 @@ $:
   $countryChangeWatch = country;
 $:
   getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country) : null : placeholder;
+$:
+  if (value === null && inputValue !== null && detailedValue !== null) {
+    inputValue = null;
+    detailedValue = null;
+    dispatch("updateDetailedValue", detailedValue);
+  }
 const initialize = () => {
   if (value && country) {
     handleParsePhoneNumber(value, country);
@@ -148,5 +151,9 @@ onMount(() => {
 	on:keyup
 	on:paste
 	on:click
-	use:telInputAction={{ handler: handleInputAction, spaces: combinedOptions.spaces }}
+	use:telInputAction={{
+		handler: handleInputAction,
+		spaces: combinedOptions.spaces,
+		value
+	}}
 />

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '../../types';
 declare const __propDef: {
-    props: {
+    /** Set the required attribute on the input element */ props: {
         [x: string]: any;
         country: CountryCode | null;
         value: E164Number | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -22,7 +22,7 @@
     "pnpm": ">= 7"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.30",
+    "libphonenumber-js": "^1.10.36",
     "svelte": "^3.58.0"
   },
   "devDependencies": {
@@ -30,35 +30,35 @@
     "@changesets/get-github-info": "^0.5.2",
     "@changesets/types": "^5.2.1",
     "@macfja/svelte-persistent-store": "^2.3.0",
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.35.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.16.3",
+    "@sveltejs/kit": "^1.20.4",
     "@sveltejs/package": "^1.0.2",
     "@testing-library/svelte": "^3.2.2",
     "@testing-library/user-event": "^14.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "autoprefixer": "^10.4.14",
     "cssnano": "^6.0.1",
-    "dotenv": "^16.0.3",
-    "edit-package-json": "^0.8.13",
-    "eslint": "^8.40.0",
+    "dotenv": "^16.3.1",
+    "edit-package-json": "^0.8.14",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "husky": "^8.0.3",
-    "jsdom": "^22.0.0",
+    "jsdom": "^22.1.0",
     "micromatch": "^4.0.5",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "schema-dts": "^1.1.2",
-    "svelte-check": "^3.3.2",
-    "svelte2tsx": "^0.6.14",
+    "svelte-check": "^3.4.3",
+    "svelte2tsx": "^0.6.15",
     "tailwindcss": "^3.3.2",
-    "tslib": "^2.5.0",
+    "tslib": "^2.5.3",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vitest": "^0.31.0"
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
   },
   "type": "module",
   "license": "MIT",

package/utils/directives/telInputAction.d.ts

@@ -1,6 +1,13 @@
+import type { E164Number } from 'libphonenumber-js';
 export declare const telInputAction: (node: HTMLInputElement, { handler, spaces }: {
     handler: (val: string) => void;
     spaces: boolean;
+    value: E164Number | null;
 }) => {
+    update(params: {
+        handler: (val: string) => void;
+        spaces: boolean;
+        value: E164Number | null;
+    }): void;
     destroy(): void;
 };

package/utils/directives/telInputAction.js

@@ -2,8 +2,8 @@ import { inspectAllowedChars, inputParser } from '../..';
 export const telInputAction = (node, { handler, spaces }) => {
     const onInput = (event) => {
         if (node && node.contains(event.target)) {
-            const value = event.target.value;
-            const formattedInput = inputParser(value, {
+            const currentValue = event.target.value;
+            const formattedInput = inputParser(currentValue, {
                 parseCharacter: inspectAllowedChars,
                 allowSpaces: spaces
             });
@@ -13,6 +13,11 @@ export const telInputAction = (node, { handler, spaces }) => {
     };
     node.addEventListener('input', onInput, true);
     return {
+        update(params) {
+            if (params.value === null || params.value === '') {
+                node.value = '';
+            }
+        },
         destroy() {
             node.removeEventListener('input', onInput, true);
         }