svelte-tel-input 3.3.5 → 3.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +47 -41
  2. package/dist/components/input/TelInput.svelte +8 -5
  3. package/dist/stores/index.d.ts +2 -1
  4. package/package.json +16 -16
package/README.md CHANGED
@@ -38,62 +38,68 @@ _Snippet would be too long_ - [Example](https://github.com/gyurielf/svelte-tel-i
38
38
 
39
39
  [Example](https://github.com/gyurielf/svelte-tel-input/blob/main/apps/site/src/lib/components/examples/BasicPhoneInput.svelte) - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl?file=README.md) (StackBlitz)
40
40
 
41
- ```html
41
+ ```svelte
42
42
  <script lang="ts">
43
- import { TelInput, normalizedCountries } from 'svelte-tel-input';
44
- import type { DetailedValue, CountryCode, E164Number } from 'svelte-tel-input/types';
43
+ import { TelInput, normalizedCountries } from 'svelte-tel-input';
44
+ import type { DetailedValue, CountryCode, E164Number } from 'svelte-tel-input/types';
45
45
 
46
- // Any Country Code Alpha-2 (ISO 3166)
47
- let selectedCountry: CountryCode | null = 'HU';
46
+ // Any Country Code Alpha-2 (ISO 3166)
47
+ let selectedCountry: CountryCode | null = 'HU';
48
48
 
49
- // You must use E164 number format. It's guarantee the parsing and storing consistency.
50
- let value: E164Number | null = '+36301234567';
49
+ // You must use E164 number format. It's guarantee the parsing and storing consistency.
50
+ let value: E164Number | null = '+36301234567';
51
51
 
52
- // Validity
53
- let valid = true;
52
+ // Validity
53
+ let valid = true;
54
54
 
55
- // Optional - Extended details about the parsed phone number
56
- let detailedValue: DetailedValue | null = null;
55
+ // Optional - Extended details about the parsed phone number
56
+ let detailedValue: DetailedValue | null = null;
57
57
  </script>
58
58
 
59
59
  <div class="wrapper">
60
- <select
61
- class="country-select {!valid && 'invalid'}"
62
- aria-label="Default select example"
63
- name="Country"
64
- bind:value={selectedCountry}
65
- >
66
- <option value={null} hidden={selectedCountry !== null}>Please select</option>
67
- {#each normalizedCountries as country (country.id)}
68
- <option
69
- value={country.iso2}
70
- selected={country.iso2 === selectedCountry}
71
- aria-selected={country.iso2 === selectedCountry}
72
- >
73
- {country.iso2} (+{country.dialCode})
74
- </option>
75
- {/each}
76
- </select>
77
- <TelInput bind:country={selectedCountry} bind:value bind:valid bind:detailedValue class="basic-tel-input {!isValid && 'invalid'}" />
60
+ <select
61
+ class="country-select {!valid ? 'invalid' : ''}"
62
+ aria-label="Default select example"
63
+ name="Country"
64
+ bind:value={selectedCountry}
65
+ >
66
+ <option value={null} hidden={country !== null}>Please select</option>
67
+ {#each normalizedCountries as currentCountry (currentCountry.id)}
68
+ <option
69
+ value={currentCountry.iso2}
70
+ selected={currentCountry.iso2 === country}
71
+ aria-selected={currentCountry.iso2 === country}
72
+ >
73
+ {currentCountry.iso2} (+{currentCountry.dialCode})
74
+ </option>
75
+ {/each}
76
+ </select>
77
+ <TelInput
78
+ bind:country={selectedCountry}
79
+ bind:value
80
+ bind:valid
81
+ bind:detailedValue
82
+ class="basic-tel-input {!isValid ? 'invalid' : ''}"
83
+ />
78
84
  </div>
79
85
 
80
86
  <style>
81
87
  .wrapper :global(.basic-tel-input) {
82
- height: 32px;
83
- padding-left: 12px;
84
- padding-right: 12px;
85
- border-radius: 6px;
86
- border: 1px solid;
87
- outline: none;
88
+ height: 32px;
89
+ padding-left: 12px;
90
+ padding-right: 12px;
91
+ border-radius: 6px;
92
+ border: 1px solid;
93
+ outline: none;
88
94
  }
89
95
 
90
96
  .wrapper :global(.country-select) {
91
- height: 36px;
92
- padding-left: 12px;
93
- padding-right: 12px;
94
- border-radius: 6px;
95
- border: 1px solid;
96
- outline: none;
97
+ height: 36px;
98
+ padding-left: 12px;
99
+ padding-right: 12px;
100
+ border-radius: 6px;
101
+ border: 1px solid;
102
+ outline: none;
97
103
  }
98
104
 
99
105
  .wrapper :global(.invalid) {
package/dist/components/input/TelInput.svelte CHANGED
@@ -1,4 +1,4 @@
1
- <script>import { createEventDispatcher } from "svelte";
1
+ <script>import { createEventDispatcher, onMount } from "svelte";
2
2
  import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js/max";
3
3
  import {
4
4
  normalizeTelInput,
@@ -42,7 +42,8 @@ const handleInputAction = (value2) => {
42
42
  };
43
43
  const updateCountry = (countryCode) => {
44
44
  if (countryCode !== country) {
45
- country = prevCountry = countryCode;
45
+ country = countryCode;
46
+ prevCountry = country;
46
47
  dispatch("updateCountry", country);
47
48
  }
48
49
  return country;
@@ -122,9 +123,11 @@ $:
122
123
  detailedValue = null;
123
124
  dispatch("updateDetailedValue", detailedValue);
124
125
  }
125
- if (value) {
126
- handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
127
- }
126
+ onMount(() => {
127
+ if (value) {
128
+ handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
129
+ }
130
+ });
128
131
  </script>
129
132
 
130
133
  <input
package/dist/stores/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
+ /// <reference types="svelte" />
1
2
  export declare const watcher: (initialValue: string | null, watchFunction: (oldVal: string | null, newVal: string | null) => void) => {
2
- subscribe: (this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: ((value?: string | null | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
3
+ subscribe: (this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined) => import("svelte/store").Unsubscriber;
3
4
  set: (value: string | null) => void;
4
5
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "svelte-tel-input",
3
3
  "description": "svelte-tel-input",
4
- "version": "3.3.5",
4
+ "version": "3.3.7",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,38 +30,38 @@
30
30
  "svelte": "^3.58.0 || ^4.0.0"
31
31
  },
32
32
  "dependencies": {
33
- "libphonenumber-js": "^1.10.41"
33
+ "libphonenumber-js": "^1.10.43"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@sveltejs/adapter-auto": "2.1.0",
37
- "@sveltejs/kit": "^1.22.6",
38
- "@sveltejs/package": "^2.2.1",
37
+ "@sveltejs/kit": "^1.23.0",
38
+ "@sveltejs/package": "^2.2.2",
39
39
  "@testing-library/svelte": "^4.0.3",
40
40
  "@testing-library/user-event": "^14.4.3",
41
41
  "@types/micromatch": "^4.0.2",
42
- "@typescript-eslint/eslint-plugin": "^6.4.0",
43
- "@typescript-eslint/parser": "^6.4.0",
42
+ "@typescript-eslint/eslint-plugin": "^6.5.0",
43
+ "@typescript-eslint/parser": "^6.5.0",
44
44
  "autoprefixer": "^10.4.15",
45
45
  "cssnano": "^6.0.1",
46
46
  "dotenv": "^16.3.1",
47
- "eslint": "^8.47.0",
48
- "eslint-config-prettier": "^8.8.0",
47
+ "eslint": "^8.48.0",
48
+ "eslint-config-prettier": "^9.0.0",
49
49
  "eslint-plugin-import": "^2.28.1",
50
- "eslint-plugin-svelte": "^2.32.4",
50
+ "eslint-plugin-svelte": "^2.33.0",
51
51
  "jsdom": "^22.1.0",
52
52
  "micromatch": "^4.0.5",
53
53
  "postcss": "^8.4.28",
54
- "prettier": "^2.8.8",
55
- "prettier-plugin-svelte": "^2.10.1",
54
+ "prettier": "^3.0.2",
55
+ "prettier-plugin-svelte": "^3.0.3",
56
56
  "publint": "^0.2.2",
57
- "svelte": "^3.58.0",
58
- "svelte-check": "^3.5.0",
59
- "svelte2tsx": "^0.6.20",
57
+ "svelte": "^4.2.0",
58
+ "svelte-check": "^3.5.1",
59
+ "svelte2tsx": "^0.6.21",
60
60
  "tailwindcss": "^3.3.3",
61
61
  "tslib": "^2.6.2",
62
- "typescript": "^5.1.6",
62
+ "typescript": "^5.2.2",
63
63
  "vite": "^4.4.9",
64
- "vitest": "^0.34.2"
64
+ "vitest": "^0.34.3"
65
65
  },
66
66
  "type": "module",
67
67
  "license": "MIT",