Skip to content

Commit 628a815

Browse files
docs(input): examples for setting an initial value with maskito (#3597)
* add examples for setting an initial value when using maskito (using maskitoTransform) * chore: prettier formatting * input-masking: add maskitoTransform reference to demo.html --------- Co-authored-by: Sean Perkins <[email protected]>
1 parent 7ffcd39 commit 628a815

File tree

14 files changed

+82
-31
lines changed

14 files changed

+82
-31
lines changed

static/usage/v7/input/mask/angular/example_component_html.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<ion-input
1313
label="US phone number"
1414
placeholder="+1 (xxx) xxx-xxxx"
15+
[(ngModel)]="myPhoneNumber"
1516
[maskito]="phoneMask"
1617
[maskitoElement]="maskPredicate"
1718
></ion-input>

static/usage/v7/input/mask/angular/example_component_ts.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```ts
22
import { Component } from '@angular/core';
33

4-
import { MaskitoOptions, MaskitoElementPredicate } from '@maskito/core';
4+
import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core';
55

66
@Component({
77
selector: 'app-example',
@@ -12,6 +12,9 @@ export class ExampleComponent {
1212
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
1313
};
1414

15+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
16+
myPhoneNumber = maskitoTransform('5555551212', this.phoneMask);
17+
1518
readonly cardMask: MaskitoOptions = {
1619
mask: [
1720
...Array(4).fill(/\d/),

static/usage/v7/input/mask/demo.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
<script src="../../common.js"></script>
99
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
1010
<script type="module">
11-
import { Maskito } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
11+
import { Maskito, maskitoTransform } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
1212
window.Maskito = Maskito;
13+
window.maskitoTransform = maskitoTransform;
1314
</script>
1415
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
1516

@@ -39,10 +40,13 @@
3940
async function initPhoneMask() {
4041
const ionInput = document.querySelector('#phone');
4142
const nativeEl = await ionInput.getInputElement();
42-
43-
new window.Maskito(nativeEl, {
43+
const phoneMaskOptions = {
4444
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
45-
});
45+
};
46+
new window.Maskito(nativeEl, phoneMaskOptions);
47+
48+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
49+
ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
4650
}
4751

4852
async function initCardMask() {

static/usage/v7/input/mask/javascript/index_html.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@
1212
async function initPhoneMask() {
1313
const ionInput = document.querySelector('#phone');
1414
const nativeEl = await ionInput.getInputElement();
15-
16-
new window.Maskito(nativeEl, {
15+
const phoneMaskOptions = {
1716
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
18-
});
17+
};
18+
new window.Maskito(nativeEl, phoneMaskOptions);
19+
20+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
21+
ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
1922
}
2023
2124
async function initCardMask() {

static/usage/v7/input/mask/javascript/index_ts.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```ts
22
import { defineCustomElements } from '@ionic/core/loader';
33

4-
import { Maskito } from '@maskito/core';
4+
import { Maskito, maskitoTransform } from '@maskito/core';
55

66
/* Core CSS required for Ionic components to work properly */
77
import '@ionic/core/css/core.css';
@@ -25,4 +25,5 @@ import './theme/variables.css';
2525
defineCustomElements();
2626

2727
(window as any).Maskito = Maskito;
28+
(window as any).maskitoTransform = maskitoTransform;
2829
```

static/usage/v7/input/mask/react.md

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
```tsx
2-
import React from 'react';
2+
import { useState } from 'react';
33
import { IonInput, IonItem, IonList } from '@ionic/react';
44
import { useMaskito } from '@maskito/react';
5+
import { MaskitoOptions, maskitoTransform } from '@maskito/core';
56

67
function Example() {
78
const cardMask = useMaskito({
@@ -20,11 +21,13 @@ function Example() {
2021
},
2122
});
2223

23-
const phoneMask = useMaskito({
24-
options: {
25-
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
26-
},
27-
});
24+
const phoneMaskOptions: MaskitoOptions = {
25+
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
26+
};
27+
const phoneMask = useMaskito({ options: phoneMaskOptions });
28+
29+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
30+
const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
2831

2932
return (
3033
<IonList>
@@ -48,6 +51,8 @@ function Example() {
4851
phoneMask(input);
4952
}
5053
}}
54+
value={myPhoneNumber}
55+
onIonInput={(e) => setMyPhoneNumber(e.detail.value || '')}
5156
label="US phone number"
5257
placeholder="+1 (xxx) xxx-xxxx"
5358
></IonInput>

static/usage/v7/input/mask/vue.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,21 @@
55
<ion-input label="Card number" placeholder="0000 0000 0000 0000" v-maskito="cardOptions"></ion-input>
66
</ion-item>
77
<ion-item>
8-
<ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-maskito="phoneOptions"></ion-input>
8+
<ion-input
9+
label="US phone number"
10+
placeholder="+1 (xxx) xxx-xxxx"
11+
v-model="myPhoneNumber"
12+
v-maskito="phoneOptions"
13+
></ion-input>
914
</ion-item>
1015
</ion-list>
1116
</template>
1217

1318
<script setup lang="ts">
19+
import { ref } from 'vue';
1420
import { IonInput, IonItem, IonList } from '@ionic/vue';
1521
import { maskito as vMaskito } from '@maskito/vue';
22+
import { maskitoTransform } from '@maskito/core';
1623
1724
const cardOptions = {
1825
mask: [
@@ -47,5 +54,7 @@
4754
});
4855
},
4956
};
57+
// If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
58+
const myPhoneNumber = ref(maskitoTransform('5555551212', phoneOptions));
5059
</script>
5160
```

static/usage/v8/input/mask/angular/example_component_html.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<ion-input
1313
label="US phone number"
1414
placeholder="+1 (xxx) xxx-xxxx"
15+
[(ngModel)]="myPhoneNumber"
1516
[maskito]="phoneMask"
1617
[maskitoElement]="maskPredicate"
1718
></ion-input>

static/usage/v8/input/mask/angular/example_component_ts.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```ts
22
import { Component } from '@angular/core';
33

4-
import { MaskitoOptions, MaskitoElementPredicateAsync } from '@maskito/core';
4+
import { MaskitoOptions, MaskitoElementPredicateAsync, maskitoTransform } from '@maskito/core';
55

66
@Component({
77
selector: 'app-example',
@@ -12,6 +12,9 @@ export class ExampleComponent {
1212
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
1313
};
1414

15+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
16+
myPhoneNumber = maskitoTransform('5555551212', this.phoneMask);
17+
1518
readonly cardMask: MaskitoOptions = {
1619
mask: [
1720
...Array(4).fill(/\d/),

static/usage/v8/input/mask/demo.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
<script src="../../common.js"></script>
99
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
1010
<script type="module">
11-
import { Maskito } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
11+
import { Maskito, maskitoTransform } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
1212
window.Maskito = Maskito;
13+
window.maskitoTransform = maskitoTransform;
1314
</script>
1415
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
1516

@@ -39,10 +40,13 @@
3940
async function initPhoneMask() {
4041
const ionInput = document.querySelector('#phone');
4142
const nativeEl = await ionInput.getInputElement();
42-
43-
new window.Maskito(nativeEl, {
43+
const phoneMaskOptions = {
4444
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
45-
});
45+
};
46+
new window.Maskito(nativeEl, phoneMaskOptions);
47+
48+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
49+
ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
4650
}
4751

4852
async function initCardMask() {

static/usage/v8/input/mask/javascript/index_html.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@
1212
async function initPhoneMask() {
1313
const ionInput = document.querySelector('#phone');
1414
const nativeEl = await ionInput.getInputElement();
15-
16-
new window.Maskito(nativeEl, {
15+
const phoneMaskOptions = {
1716
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
18-
});
17+
};
18+
new window.Maskito(nativeEl, phoneMaskOptions);
19+
20+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
21+
ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
1922
}
2023
2124
async function initCardMask() {

static/usage/v8/input/mask/javascript/index_ts.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```ts
22
import { defineCustomElements } from '@ionic/core/loader';
33

4-
import { Maskito } from '@maskito/core';
4+
import { Maskito, maskitoTransform } from '@maskito/core';
55

66
/* Core CSS required for Ionic components to work properly */
77
import '@ionic/core/css/core.css';
@@ -25,4 +25,5 @@ import './theme/variables.css';
2525
defineCustomElements();
2626

2727
(window as any).Maskito = Maskito;
28+
(window as any).maskitoTransform = maskitoTransform;
2829
```

static/usage/v8/input/mask/react.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,13 @@ function Example() {
2020
},
2121
});
2222

23-
const phoneMask = useMaskito({
24-
options: {
25-
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
26-
},
27-
});
23+
const phoneMaskOptions: MaskitoOptions = {
24+
mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
25+
};
26+
const phoneMask = useMaskito({ options: phoneMaskOptions });
27+
28+
//If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
29+
const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
2830

2931
return (
3032
<IonList>
@@ -48,6 +50,8 @@ function Example() {
4850
phoneMask(input);
4951
}
5052
}}
53+
value={myPhoneNumber}
54+
onIonInput={(e) => setMyPhoneNumber(e.detail.value || '')}
5155
label="US phone number"
5256
placeholder="+1 (xxx) xxx-xxxx"
5357
></IonInput>

static/usage/v8/input/mask/vue.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,21 @@
55
<ion-input label="Card number" placeholder="0000 0000 0000 0000" v-maskito="cardOptions"></ion-input>
66
</ion-item>
77
<ion-item>
8-
<ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-maskito="phoneOptions"></ion-input>
8+
<ion-input
9+
label="US phone number"
10+
placeholder="+1 (xxx) xxx-xxxx"
11+
v-model="myPhoneNumber"
12+
v-maskito="phoneOptions"
13+
></ion-input>
914
</ion-item>
1015
</ion-list>
1116
</template>
1217

1318
<script setup lang="ts">
19+
import { ref } from 'vue';
1420
import { IonInput, IonItem, IonList } from '@ionic/vue';
1521
import { maskito as vMaskito } from '@maskito/vue';
22+
import { maskitoTransform } from '@maskito/core';
1623
1724
const cardOptions = {
1825
mask: [
@@ -47,5 +54,7 @@
4754
});
4855
},
4956
};
57+
// If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
58+
const myPhoneNumber = ref(maskitoTransform('5555551212', phoneOptions));
5059
</script>
5160
```

0 commit comments

Comments
 (0)