svelte-tel-input 3.3.6 → 3.3.8
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.
- package/README.md +14 -20
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ _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
|
-
```
|
|
41
|
+
```svelte
|
|
42
42
|
<script lang="ts">
|
|
43
43
|
import { TelInput, normalizedCountries } from 'svelte-tel-input';
|
|
44
44
|
import type { DetailedValue, CountryCode, E164Number } from 'svelte-tel-input/types';
|
|
@@ -58,34 +58,28 @@ _Snippet would be too long_ - [Example](https://github.com/gyurielf/svelte-tel-i
|
|
|
58
58
|
|
|
59
59
|
<div class="wrapper">
|
|
60
60
|
<select
|
|
61
|
-
class="country-select {!valid
|
|
61
|
+
class="country-select {!valid ? 'invalid' : ''}"
|
|
62
62
|
aria-label="Default select example"
|
|
63
63
|
name="Country"
|
|
64
|
-
bind:value=
|
|
64
|
+
bind:value={selectedCountry}
|
|
65
65
|
>
|
|
66
|
-
<option value=
|
|
67
|
-
{#each normalizedCountries as
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
=""
|
|
76
|
-
=""
|
|
77
|
-
="selectedCountry}"
|
|
78
|
-
>
|
|
79
|
-
{country.iso2} (+{country.dialCode})
|
|
80
|
-
</option>
|
|
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>
|
|
81
75
|
{/each}
|
|
82
76
|
</select>
|
|
83
77
|
<TelInput
|
|
84
|
-
bind:country=
|
|
78
|
+
bind:country={selectedCountry}
|
|
85
79
|
bind:value
|
|
86
80
|
bind:valid
|
|
87
81
|
bind:detailedValue
|
|
88
|
-
class="basic-tel-input {!isValid
|
|
82
|
+
class="basic-tel-input {!isValid ? 'invalid' : ''}"
|
|
89
83
|
/>
|
|
90
84
|
</div>
|
|
91
85
|
|
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.
|
|
4
|
+
"version": "3.3.8",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/gyurielf/svelte-tel-input.git"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
],
|
|
23
23
|
"engines": {
|
|
24
24
|
"npm": ">= 8",
|
|
25
|
-
"yarn": ">=
|
|
25
|
+
"yarn": ">= 1",
|
|
26
26
|
"node": ">= 18",
|
|
27
27
|
"pnpm": ">= 8"
|
|
28
28
|
},
|