svelte-tel-input 3.3.1 → 3.3.3
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
CHANGED
|
@@ -118,6 +118,12 @@ The default export of the library is the main TelInput component. It has the fol
|
|
|
118
118
|
| class | `string` | `` | You can pass down any classname to the component |
|
|
119
119
|
| required | `boolean \| null` | `null` | Set the required attribute on the input element |
|
|
120
120
|
| options | `TelInputOptions` | check below | Allow or disallow spaces in the input field |
|
|
121
|
+
| id | `string \| null` | uid | HTMLInputElement's attribute |
|
|
122
|
+
| name | `string \| null` | `null` | HTMLInputElement's attribute |
|
|
123
|
+
| readonly | `boolean \| null` | `null` | HTMLInputElement's attribute |
|
|
124
|
+
| size | `number \| null` | `null` | HTMLInputElement's attribute |
|
|
125
|
+
| autocomplete | `string \| null` | `null` | HTMLInputElement's attribute |
|
|
126
|
+
| |
|
|
121
127
|
|
|
122
128
|
Config options:
|
|
123
129
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<script>import { createEventDispatcher
|
|
1
|
+
<script>import { createEventDispatcher } from "svelte";
|
|
2
2
|
import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js/max";
|
|
3
3
|
import {
|
|
4
4
|
normalizeTelInput,
|
|
@@ -14,14 +14,21 @@ const defaultOptions = {
|
|
|
14
14
|
invalidateOnCountryChange: false,
|
|
15
15
|
format: "national"
|
|
16
16
|
};
|
|
17
|
-
export let
|
|
17
|
+
export let autocomplete = null;
|
|
18
|
+
let classes = "";
|
|
19
|
+
export { classes as class };
|
|
20
|
+
export let disabled = false;
|
|
21
|
+
export let id = "phone-input-" + (/* @__PURE__ */ new Date()).getTime().toString(36) + Math.random().toString(36).slice(2);
|
|
22
|
+
export let name = null;
|
|
23
|
+
export let placeholder = null;
|
|
24
|
+
export let readonly = null;
|
|
25
|
+
export let required = null;
|
|
26
|
+
export let size = null;
|
|
18
27
|
export let value;
|
|
28
|
+
export let country;
|
|
19
29
|
export let detailedValue = null;
|
|
20
30
|
export let valid = true;
|
|
21
|
-
export let disabled = false;
|
|
22
|
-
export let placeholder = null;
|
|
23
31
|
export let options = defaultOptions;
|
|
24
|
-
export let required = null;
|
|
25
32
|
let inputValue = value;
|
|
26
33
|
let prevCountry = country;
|
|
27
34
|
const combinedOptions = {
|
|
@@ -29,7 +36,7 @@ const combinedOptions = {
|
|
|
29
36
|
...options
|
|
30
37
|
};
|
|
31
38
|
const handleInputAction = (value2) => {
|
|
32
|
-
if (disabled)
|
|
39
|
+
if (disabled || readonly)
|
|
33
40
|
return;
|
|
34
41
|
handleParsePhoneNumber(value2, country);
|
|
35
42
|
};
|
|
@@ -61,14 +68,12 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
|
|
|
61
68
|
throw err;
|
|
62
69
|
}
|
|
63
70
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
inputValue = inputValue === detailedValue[formatOption] ? null : detailedValue[formatOption] ?? null;
|
|
71
|
-
}
|
|
71
|
+
const formatOption = combinedOptions.format === "national" ? "nationalNumber" : "e164";
|
|
72
|
+
const formattedValue = combinedOptions.format === "national" ? "formatOriginal" : "formatInternational";
|
|
73
|
+
if (combinedOptions.spaces && detailedValue?.[formattedValue]) {
|
|
74
|
+
inputValue = detailedValue[formattedValue] ?? null;
|
|
75
|
+
} else if (detailedValue?.[formatOption]) {
|
|
76
|
+
inputValue = detailedValue[formatOption] ?? null;
|
|
72
77
|
}
|
|
73
78
|
value = detailedValue?.e164 ?? input ?? null;
|
|
74
79
|
valid = detailedValue?.isValid ?? false;
|
|
@@ -117,34 +122,33 @@ $:
|
|
|
117
122
|
detailedValue = null;
|
|
118
123
|
dispatch("updateDetailedValue", detailedValue);
|
|
119
124
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
onMount(() => {
|
|
126
|
-
initialize();
|
|
127
|
-
});
|
|
125
|
+
if (value) {
|
|
126
|
+
handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
|
|
127
|
+
}
|
|
128
128
|
</script>
|
|
129
129
|
|
|
130
130
|
<input
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
{required}
|
|
131
|
+
{autocomplete}
|
|
132
|
+
class={classes}
|
|
134
133
|
{disabled}
|
|
135
|
-
{
|
|
134
|
+
{id}
|
|
135
|
+
{name}
|
|
136
|
+
{readonly}
|
|
137
|
+
{required}
|
|
138
|
+
{size}
|
|
139
|
+
placeholder={getPlaceholder}
|
|
140
|
+
type="tel"
|
|
136
141
|
value={inputValue}
|
|
137
|
-
class={$$props.class}
|
|
138
142
|
on:beforeinput
|
|
139
143
|
on:blur
|
|
140
144
|
on:change
|
|
145
|
+
on:click
|
|
141
146
|
on:focus
|
|
142
147
|
on:input
|
|
143
148
|
on:keydown
|
|
144
149
|
on:keypress
|
|
145
150
|
on:keyup
|
|
146
151
|
on:paste
|
|
147
|
-
on:click
|
|
148
152
|
use:telInputAction={{
|
|
149
153
|
handler: handleInputAction,
|
|
150
154
|
spaces: combinedOptions.spaces,
|
|
@@ -2,27 +2,32 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '../../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
autocomplete?: string | null | undefined;
|
|
6
|
+
/** You can set the classes of the input field*/ class?: string | undefined;
|
|
7
|
+
/** You can disable the component and set the disabled attribute of the input field */ disabled?: boolean | undefined;
|
|
8
|
+
/** You can set the id attribute of the input field */ id?: string | undefined;
|
|
9
|
+
/** You can set the name attribute of the input field */ name?: string | null | undefined;
|
|
10
|
+
/** It will overwrite the autoPlaceholder ! */ placeholder?: string | null | undefined;
|
|
11
|
+
/** You can set the readonly attribute of the input field */ readonly?: boolean | null | undefined;
|
|
12
|
+
/** Set the required attribute on the input element */ required?: boolean | null | undefined;
|
|
13
|
+
/** You can set the size attribute of the input field */ size?: number | null | undefined;
|
|
14
|
+
/** The core value of the input, this is the only one what you can store. It's an E164 phone number.*/ value: E164Number | null;
|
|
15
|
+
/** It's accept any Country Code Alpha-2 (ISO 3166) */ country: CountryCode | null;
|
|
16
|
+
/** Detailed parse of the E164 phone number */ detailedValue?: Partial<DetailedValue> | null | undefined;
|
|
17
|
+
/** Validity of the input based on the config settings.*/ valid?: boolean | undefined;
|
|
18
|
+
/** You can turn on and off certain features by this object */ options?: TelInputOptions | undefined;
|
|
14
19
|
};
|
|
15
20
|
events: {
|
|
16
21
|
beforeinput: InputEvent;
|
|
17
22
|
blur: FocusEvent;
|
|
18
23
|
change: Event;
|
|
24
|
+
click: MouseEvent;
|
|
19
25
|
focus: FocusEvent;
|
|
20
26
|
input: Event;
|
|
21
27
|
keydown: KeyboardEvent;
|
|
22
28
|
keypress: KeyboardEvent;
|
|
23
29
|
keyup: KeyboardEvent;
|
|
24
30
|
paste: ClipboardEvent;
|
|
25
|
-
click: MouseEvent;
|
|
26
31
|
updateCountry: CustomEvent<CountryCode | null>;
|
|
27
32
|
parseError: CustomEvent<string>;
|
|
28
33
|
updateDetailedValue: CustomEvent<Partial<DetailedValue> | null>;
|
package/dist/types/index.d.ts
CHANGED
package/dist/utils/helpers.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AsYouType, Metadata, getCountryCallingCode, getExampleNumber } from 'libphonenumber-js/max';
|
|
2
|
-
import examples from 'libphonenumber-js/mobile/examples';
|
|
2
|
+
import examples from 'libphonenumber-js/mobile/examples' assert { type: 'json' };
|
|
3
3
|
export const capitalize = (str) => {
|
|
4
4
|
if (!str)
|
|
5
5
|
return '';
|
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.3",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/gyurielf/svelte-tel-input.git"
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
"svelte": "^3.58.0 || ^4.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"libphonenumber-js": "^1.10.
|
|
33
|
+
"libphonenumber-js": "^1.10.41"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@sveltejs/adapter-auto": "2.1.0",
|
|
37
|
-
"@sveltejs/kit": "^1.22.
|
|
38
|
-
"@sveltejs/package": "^2.2.
|
|
37
|
+
"@sveltejs/kit": "^1.22.6",
|
|
38
|
+
"@sveltejs/package": "^2.2.1",
|
|
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.
|
|
43
|
-
"@typescript-eslint/parser": "^6.
|
|
44
|
-
"autoprefixer": "^10.4.
|
|
42
|
+
"@typescript-eslint/eslint-plugin": "^6.3.0",
|
|
43
|
+
"@typescript-eslint/parser": "^6.3.0",
|
|
44
|
+
"autoprefixer": "^10.4.15",
|
|
45
45
|
"cssnano": "^6.0.1",
|
|
46
46
|
"dotenv": "^16.3.1",
|
|
47
47
|
"eslint": "^8.45.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"eslint-plugin-svelte": "^2.32.4",
|
|
51
51
|
"jsdom": "^22.1.0",
|
|
52
52
|
"micromatch": "^4.0.5",
|
|
53
|
-
"postcss": "^8.4.
|
|
53
|
+
"postcss": "^8.4.28",
|
|
54
54
|
"prettier": "^2.8.8",
|
|
55
55
|
"prettier-plugin-svelte": "^2.10.1",
|
|
56
56
|
"publint": "^0.2.0",
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
"tailwindcss": "^3.3.3",
|
|
61
61
|
"tslib": "^2.6.1",
|
|
62
62
|
"typescript": "^5.1.6",
|
|
63
|
-
"vite": "^4.4.
|
|
64
|
-
"vitest": "^0.34.
|
|
63
|
+
"vite": "^4.4.9",
|
|
64
|
+
"vitest": "^0.34.2"
|
|
65
65
|
},
|
|
66
66
|
"type": "module",
|
|
67
67
|
"license": "MIT",
|