svelte-tel-input 4.0.0-next.3 → 4.0.0-next.4
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 +5 -2
- package/dist/utils/helpers.js +11 -6
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
[](https://www.npmjs.com/package/svelte-tel-input)
|
|
6
6
|
[](LICENSE.md)
|
|
7
7
|
|
|
8
|
-
A
|
|
9
|
-
|
|
8
|
+
A **headless**, fully customizable **Svelte 5** phone input toolkit.
|
|
9
|
+
All the ingredients to parse, format, and validate international phone numbers — you build the UI.
|
|
10
|
+
Store in [E.164](https://en.wikipedia.org/wiki/E.164). Ship with any CSS framework, design system, or custom markup.
|
|
10
11
|
|
|
11
12
|
[Documentation](https://svelte-tel-input.vercel.app/) · [Playground](https://svelte-tel-input.vercel.app/playground/) · [Changelog](CHANGELOG.md)
|
|
12
13
|
|
|
@@ -16,6 +17,8 @@ Parse, format, and validate international phone numbers — store in [E.164](htt
|
|
|
16
17
|
|
|
17
18
|
## Features
|
|
18
19
|
|
|
20
|
+
- **Headless & unstyled** — zero built-in styles; bring Tailwind, CSS Modules, or plain CSS
|
|
21
|
+
- **Fully customizable UI** — you own the markup; the library owns the logic
|
|
19
22
|
- **E.164 storage** — one canonical format, always searchable and SMS-ready
|
|
20
23
|
- **Auto-detect country** from dial code (`+44` → `GB`)
|
|
21
24
|
- **Smart formatting** — international display with cursor position preservation
|
package/dist/utils/helpers.js
CHANGED
|
@@ -158,11 +158,15 @@ const formatNanp = (e164ish) => {
|
|
|
158
158
|
if (national.length <= 3)
|
|
159
159
|
rest = a;
|
|
160
160
|
else if (national.length <= 6)
|
|
161
|
-
rest = `${a}
|
|
161
|
+
rest = `${a} ${b}`;
|
|
162
162
|
else
|
|
163
|
-
rest = `${a}
|
|
163
|
+
rest = `${a} ${b} ${c}`;
|
|
164
164
|
return `+1 ${rest}`.trimEnd();
|
|
165
165
|
};
|
|
166
|
+
const stripSpecialChars = (s) => s
|
|
167
|
+
.replace(/[()-]/g, ' ')
|
|
168
|
+
.replace(/\s{2,}/g, ' ')
|
|
169
|
+
.trim();
|
|
166
170
|
export const parsePhoneInput = (input, country) => {
|
|
167
171
|
const normalized = normalizeForLibphonenumber(input);
|
|
168
172
|
const defaultCountryIso2 = country?.iso2;
|
|
@@ -177,13 +181,15 @@ export const parsePhoneInput = (input, country) => {
|
|
|
177
181
|
const countryCode = asYouType.getCountry() || country?.iso2 || null;
|
|
178
182
|
const formatInternational = phone?.formatInternational() || null;
|
|
179
183
|
const formatNational = phone?.formatNational() || null;
|
|
184
|
+
const nationalNumber = phone?.nationalNumber || null;
|
|
180
185
|
let formattedNumber = null;
|
|
181
186
|
if (capped) {
|
|
182
187
|
if (capped.startsWith('+')) {
|
|
183
|
-
|
|
188
|
+
let raw = formatIncompletePhoneNumber(capped) || capped;
|
|
184
189
|
if (countryCallingCode === '1' && (countryCode === 'US' || countryCode === 'CA')) {
|
|
185
|
-
|
|
190
|
+
raw = formatNanp(capped);
|
|
186
191
|
}
|
|
192
|
+
formattedNumber = stripSpecialChars(raw);
|
|
187
193
|
}
|
|
188
194
|
else if (defaultCountryIso2) {
|
|
189
195
|
const formatted = formatIncompletePhoneNumber(capped, defaultCountryIso2);
|
|
@@ -191,7 +197,7 @@ export const parsePhoneInput = (input, country) => {
|
|
|
191
197
|
formattedNumber = formatInternational.slice(countryCallingCode.length + 1).trim();
|
|
192
198
|
}
|
|
193
199
|
else {
|
|
194
|
-
formattedNumber = formatted || capped;
|
|
200
|
+
formattedNumber = stripSpecialChars(formatted || capped);
|
|
195
201
|
}
|
|
196
202
|
}
|
|
197
203
|
else {
|
|
@@ -199,7 +205,6 @@ export const parsePhoneInput = (input, country) => {
|
|
|
199
205
|
}
|
|
200
206
|
}
|
|
201
207
|
const phoneNumber = phone?.number || null;
|
|
202
|
-
const nationalNumber = phone?.nationalNumber || null;
|
|
203
208
|
const uri = phone?.getURI() || null;
|
|
204
209
|
const isValid = asYouType.isValid();
|
|
205
210
|
let phoneValidationError = null;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-tel-input",
|
|
3
3
|
"description": "svelte-tel-input",
|
|
4
|
-
"version": "4.0.0-next.
|
|
4
|
+
"version": "4.0.0-next.4",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/gyurielf/svelte-tel-input.git"
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
"@sveltejs/kit": "^2.55.0",
|
|
38
38
|
"@sveltejs/package": "^2.5.7",
|
|
39
39
|
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
40
|
-
"@tailwindcss/vite": "^4.2.
|
|
40
|
+
"@tailwindcss/vite": "^4.2.2",
|
|
41
41
|
"@testing-library/jest-dom": "6.9.1",
|
|
42
42
|
"@testing-library/svelte": "^5.3.1",
|
|
43
43
|
"@testing-library/user-event": "^14.6.1",
|
|
44
44
|
"@types/micromatch": "^4.0.10",
|
|
45
45
|
"dotenv": "^17.3.1",
|
|
46
|
-
"jsdom": "^29.0.
|
|
46
|
+
"jsdom": "^29.0.1",
|
|
47
47
|
"micromatch": "^4.0.8",
|
|
48
48
|
"postcss": "^8.5.8",
|
|
49
49
|
"publint": "^0.3.18",
|
|
50
50
|
"svelte": "^5.54.0",
|
|
51
51
|
"svelte-check": "^4.4.5",
|
|
52
52
|
"svelte2tsx": "^0.7.52",
|
|
53
|
-
"tailwindcss": "^4.2.
|
|
53
|
+
"tailwindcss": "^4.2.2",
|
|
54
54
|
"tslib": "^2.8.1",
|
|
55
55
|
"typescript": "^5.9.3",
|
|
56
|
-
"valibot": "^1.3.
|
|
56
|
+
"valibot": "^1.3.1",
|
|
57
57
|
"vite": "^7.3.1",
|
|
58
58
|
"vitest": "^4.1.0",
|
|
59
59
|
"zod": "^4.3.6"
|