svelte-tel-input 3.0.1 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # 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

package/README.md

@@ -163,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;
     }
@@ -84,7 +82,6 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
       value = null;
       if (inputValue !== null || inputValue !== "") {
         inputValue = null;
-        inputValue = "";
       }
       detailedValue = null;
       dispatch("updateValid", valid);
@@ -99,7 +96,6 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
     dispatch("updateValid", valid);
     dispatch("updateDetailedValue", detailedValue);
     inputValue = null;
-    inputValue = "";
   }
 };
 let countryWatchInitRun = true;
@@ -114,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);
@@ -149,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.1",
+  "version": "3.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -36,11 +36,11 @@
     "@sveltejs/package": "^1.0.2",
     "@testing-library/svelte": "^3.2.2",
     "@testing-library/user-event": "^14.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "autoprefixer": "^10.4.14",
     "cssnano": "^6.0.1",
-    "dotenv": "^16.3.0",
+    "dotenv": "^16.3.1",
     "edit-package-json": "^0.8.14",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",

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);
         }