svelte-tel-input 4.1.1 → 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 {
|
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",
|