svelte-tel-input 4.1.0 → 4.2.0
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.
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
onValueChange,
|
|
30
30
|
onError,
|
|
31
31
|
initialFormat = 'international',
|
|
32
|
+
placeholderFormat = undefined,
|
|
32
33
|
value = $bindable(''),
|
|
33
34
|
country = $bindable(null),
|
|
34
35
|
defaultCountry = null,
|
|
@@ -419,7 +420,8 @@
|
|
|
419
420
|
const getPlaceholder = $derived(
|
|
420
421
|
combinedOptions.autoPlaceholder && initialCountry
|
|
421
422
|
? generatePlaceholder(initialCountry, {
|
|
422
|
-
spaces: combinedOptions.spaces
|
|
423
|
+
spaces: combinedOptions.spaces,
|
|
424
|
+
format: placeholderFormat ?? initialFormat
|
|
423
425
|
})
|
|
424
426
|
: placeholder
|
|
425
427
|
);
|
package/dist/types/index.d.ts
CHANGED
|
@@ -173,6 +173,14 @@ export interface Props extends HTMLInputAttributes {
|
|
|
173
173
|
* @default 'international'
|
|
174
174
|
*/
|
|
175
175
|
initialFormat?: 'international' | 'national';
|
|
176
|
+
/**
|
|
177
|
+
* Controls the format of the auto-generated placeholder (when `autoPlaceholder` is enabled).
|
|
178
|
+
* - `'international'` — placeholder includes the country dial code prefix (e.g. `+1 201 555 0123`).
|
|
179
|
+
* - `'national'` — placeholder shows the national part only (e.g. `201 555 0123`).
|
|
180
|
+
*
|
|
181
|
+
* When not provided, `initialFormat` is used as the fallback. If neither is provided, defaults to `'international'`.
|
|
182
|
+
*/
|
|
183
|
+
placeholderFormat?: 'international' | 'national';
|
|
176
184
|
}
|
|
177
185
|
|
|
178
186
|
export type { CountryCode };
|
package/dist/utils/helpers.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { Country, DetailedValue } from '../types/index.js';
|
|
2
2
|
import type { CountryCode } from 'libphonenumber-js';
|
|
3
|
-
export declare const generatePlaceholder: (country: CountryCode, { spaces }?: {
|
|
3
|
+
export declare const generatePlaceholder: (country: CountryCode, { spaces, format }?: {
|
|
4
4
|
spaces: boolean;
|
|
5
|
+
format?: "international" | "national";
|
|
5
6
|
}) => string;
|
|
6
7
|
export declare const isSelected: <T extends {
|
|
7
8
|
id: string;
|
package/dist/utils/helpers.js
CHANGED
|
@@ -3,11 +3,20 @@ import { examplePhoneNumbers, countries } from '../assets/index.js';
|
|
|
3
3
|
import { getCountry } from './countryHelpers.js';
|
|
4
4
|
const whiteSpaceRegex = new RegExp('[\\t\\n\\v\\f\\r \\u00a0\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u200b\\u2028\\u2029\\u3000]', 'g');
|
|
5
5
|
const plusSignRegex = new RegExp('\\+', 'g');
|
|
6
|
-
export const generatePlaceholder = (country, { spaces } = {
|
|
7
|
-
spaces: true
|
|
6
|
+
export const generatePlaceholder = (country, { spaces, format } = {
|
|
7
|
+
spaces: true,
|
|
8
|
+
format: 'international'
|
|
8
9
|
}) => {
|
|
9
10
|
const examplePhoneNumber = getExampleNumber(country, examplePhoneNumbers);
|
|
10
11
|
if (examplePhoneNumber) {
|
|
12
|
+
if (format === 'national') {
|
|
13
|
+
const international = examplePhoneNumber.formatInternational().trim();
|
|
14
|
+
const prefix = `+${examplePhoneNumber.countryCallingCode} `;
|
|
15
|
+
const national = international.startsWith(prefix)
|
|
16
|
+
? international.slice(prefix.length)
|
|
17
|
+
: international;
|
|
18
|
+
return spaces ? national : national.replace(/\s/g, '');
|
|
19
|
+
}
|
|
11
20
|
return spaces ? examplePhoneNumber.formatInternational().trim() : examplePhoneNumber.number;
|
|
12
21
|
}
|
|
13
22
|
else {
|
|
@@ -108,7 +117,7 @@ export const inputParser = (input, { allowSpaces }) => {
|
|
|
108
117
|
return value;
|
|
109
118
|
};
|
|
110
119
|
// ---------------------------------------------------------------------------
|
|
111
|
-
// Phone-number normalizer
|
|
120
|
+
// Phone-number normalizer
|
|
112
121
|
// ---------------------------------------------------------------------------
|
|
113
122
|
const normalizeForLibphonenumber = (input) => {
|
|
114
123
|
let value = '';
|
|
@@ -193,8 +202,23 @@ export const parsePhoneInput = (input, country) => {
|
|
|
193
202
|
}
|
|
194
203
|
else if (defaultCountryIso2) {
|
|
195
204
|
const formatted = formatIncompletePhoneNumber(capped, defaultCountryIso2);
|
|
196
|
-
if (formatted === capped &&
|
|
197
|
-
|
|
205
|
+
if (formatted === capped && country?.dialCode) {
|
|
206
|
+
if (phone && phone.nationalNumber !== capped) {
|
|
207
|
+
// Trunk-prefixed complete number (e.g. GB "07947…" → nationalNumber
|
|
208
|
+
// "7947…"). Synthesis would be invalid; use the actual international
|
|
209
|
+
// format which correctly omits the trunk prefix.
|
|
210
|
+
formattedNumber =
|
|
211
|
+
formatInternational && countryCallingCode
|
|
212
|
+
? formatInternational.slice(countryCallingCode.length + 1).trim()
|
|
213
|
+
: stripSpecialChars(capped);
|
|
214
|
+
}
|
|
215
|
+
else {
|
|
216
|
+
// National significant digits (partial or complete, no trunk prefix).
|
|
217
|
+
// Synthesize an international string to get consistent spacing from
|
|
218
|
+
// the first digit, then strip "+{dialCode} ".
|
|
219
|
+
const intl = formatIncompletePhoneNumber(`+${country.dialCode}${capped}`);
|
|
220
|
+
formattedNumber = stripSpecialChars(intl.slice(country.dialCode.length + 1).trim());
|
|
221
|
+
}
|
|
198
222
|
}
|
|
199
223
|
else {
|
|
200
224
|
formattedNumber = stripSpecialChars(formatted || capped);
|
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.
|
|
4
|
+
"version": "4.2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/gyurielf/svelte-tel-input.git"
|
|
@@ -30,14 +30,14 @@
|
|
|
30
30
|
"svelte": "^5.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"libphonenumber-js": "1.12.
|
|
33
|
+
"libphonenumber-js": "1.12.42"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@sveltejs/adapter-auto": "7.0.1",
|
|
37
37
|
"@sveltejs/kit": "^2.57.1",
|
|
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.4",
|
|
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",
|
|
@@ -51,12 +51,12 @@
|
|
|
51
51
|
"svelte": "^5.55.4",
|
|
52
52
|
"svelte-check": "^4.4.6",
|
|
53
53
|
"svelte2tsx": "^0.7.53",
|
|
54
|
-
"tailwindcss": "^4.2.
|
|
54
|
+
"tailwindcss": "^4.2.4",
|
|
55
55
|
"tslib": "^2.8.1",
|
|
56
56
|
"typescript": "^5.9.3",
|
|
57
57
|
"valibot": "^1.3.1",
|
|
58
58
|
"vite": "^7.3.2",
|
|
59
|
-
"vitest": "^4.1.
|
|
59
|
+
"vitest": "^4.1.5",
|
|
60
60
|
"zod": "^4.3.6"
|
|
61
61
|
},
|
|
62
62
|
"type": "module",
|