svelte-tel-input 3.3.0 → 3.3.2

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.
Files changed (6) hide show
  1. package/README.md +9 -2
  2. package/dist/components/input/TelInput.svelte +29 -21
  3. package/dist/components/input/TelInput.svelte.d.ts +15 -10
  4. package/dist/types/index.d.ts +1 -1
  5. package/dist/utils/helpers.js +1 -1
  6. package/package.json +8 -8
package/README.md CHANGED
@@ -26,16 +26,17 @@ npm install --save svelte-tel-input
26
26
  - Prevent non-digits typing into the input, except the leading `+` sign (and `space` optionally).
27
27
  - Handle copy-pasted phone numbers, it's sanitize non-digit characters except the leading `+` sign (and `space` optionally).
28
28
  - Automatic placeholder generation for the selected country.
29
+ - International or National formatted phone numbers.
29
30
 
30
31
  ## Usage
31
32
 
32
33
  ### Advanced
33
34
 
34
- _Snippet would be too long_ - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl-1jfaar?file=README.md) (StackBlitz)
35
+ _Snippet would be too long_ - [Example](https://github.com/gyurielf/svelte-tel-input/blob/main/apps/site/src/lib/components/examples/AdvancedPhoneInput.svelte) - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl-1jfaar?file=README.md) (StackBlitz)
35
36
 
36
37
  ### Basic
37
38
 
38
- [REPL](https://stackblitz.com/edit/svelte-tel-input-repl?file=README.md) (StackBlitz)
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)
39
40
 
40
41
  ```html
41
42
  <script lang="ts">
@@ -117,6 +118,12 @@ The default export of the library is the main TelInput component. It has the fol
117
118
  | class | `string` | `` | You can pass down any classname to the component |
118
119
  | required | `boolean \| null` | `null` | Set the required attribute on the input element |
119
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
+ | |
120
127
 
121
128
  Config options:
122
129
 
package/dist/components/input/TelInput.svelte CHANGED
@@ -1,4 +1,4 @@
1
- <script>import { createEventDispatcher, onMount } from "svelte";
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 country;
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
  };
@@ -65,7 +72,9 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
65
72
  const formatOption = combinedOptions.format === "national" ? "nationalNumber" : "e164";
66
73
  const formattedValue = combinedOptions.format === "national" ? "formatOriginal" : "formatInternational";
67
74
  if (combinedOptions.spaces && detailedValue?.[formattedValue]) {
68
- inputValue = inputValue === detailedValue[formattedValue] ? null : detailedValue[formattedValue] ?? null;
75
+ if (inputValue !== detailedValue[formattedValue]) {
76
+ inputValue = detailedValue[formattedValue] ?? null;
77
+ }
69
78
  } else if (detailedValue?.[formatOption]) {
70
79
  inputValue = inputValue === detailedValue[formatOption] ? null : detailedValue[formatOption] ?? null;
71
80
  }
@@ -117,34 +126,33 @@ $:
117
126
  detailedValue = null;
118
127
  dispatch("updateDetailedValue", detailedValue);
119
128
  }
120
- const initialize = () => {
121
- if (value) {
122
- handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
123
- }
124
- };
125
- onMount(() => {
126
- initialize();
127
- });
129
+ if (value) {
130
+ handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
131
+ }
128
132
  </script>
129
133
 
130
134
  <input
131
- type="tel"
132
- placeholder={getPlaceholder}
133
- {required}
135
+ {autocomplete}
136
+ class={classes}
134
137
  {disabled}
135
- {...$$restProps}
138
+ {id}
139
+ {name}
140
+ {readonly}
141
+ {required}
142
+ {size}
143
+ placeholder={getPlaceholder}
144
+ type="tel"
136
145
  value={inputValue}
137
- class={$$props.class}
138
146
  on:beforeinput
139
147
  on:blur
140
148
  on:change
149
+ on:click
141
150
  on:focus
142
151
  on:input
143
152
  on:keydown
144
153
  on:keypress
145
154
  on:keyup
146
155
  on:paste
147
- on:click
148
156
  use:telInputAction={{
149
157
  handler: handleInputAction,
150
158
  spaces: combinedOptions.spaces,
package/dist/components/input/TelInput.svelte.d.ts CHANGED
@@ -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
- [x: string]: any;
6
- country: CountryCode | null;
7
- value: E164Number | null;
8
- detailedValue?: Partial<DetailedValue> | null | undefined;
9
- valid?: boolean | undefined;
10
- disabled?: boolean | undefined;
11
- placeholder?: string | null | undefined;
12
- options?: TelInputOptions | undefined;
13
- required?: boolean | null | undefined;
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
@@ -78,7 +78,7 @@ export interface TelInputOptions {
78
78
  /**
79
79
  * "international": `+36 20 123 4567`,
80
80
  * "default": `20 123 4567`
81
- * @default national
81
+ * @default "national"
82
82
  */
83
83
  format?: 'national' | 'international';
84
84
  }
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.0",
4
+ "version": "3.3.2",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,23 +30,23 @@
30
30
  "svelte": "^3.58.0 || ^4.0.0"
31
31
  },
32
32
  "dependencies": {
33
- "libphonenumber-js": "^1.10.38"
33
+ "libphonenumber-js": "^1.10.39"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@sveltejs/adapter-auto": "2.1.0",
37
- "@sveltejs/kit": "^1.22.3",
37
+ "@sveltejs/kit": "^1.22.4",
38
38
  "@sveltejs/package": "^2.2.0",
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.2.0",
43
- "@typescript-eslint/parser": "^6.2.0",
42
+ "@typescript-eslint/eslint-plugin": "^6.3.0",
43
+ "@typescript-eslint/parser": "^6.3.0",
44
44
  "autoprefixer": "^10.4.14",
45
45
  "cssnano": "^6.0.1",
46
46
  "dotenv": "^16.3.1",
47
47
  "eslint": "^8.45.0",
48
48
  "eslint-config-prettier": "^8.8.0",
49
- "eslint-plugin-import": "^2.27.5",
49
+ "eslint-plugin-import": "^2.28.0",
50
50
  "eslint-plugin-svelte": "^2.32.4",
51
51
  "jsdom": "^22.1.0",
52
52
  "micromatch": "^4.0.5",
@@ -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.7",
64
- "vitest": "^0.33.0"
63
+ "vite": "^4.4.9",
64
+ "vitest": "^0.34.1"
65
65
  },
66
66
  "type": "module",
67
67
  "license": "MIT",