mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-05-15 11:59:38 +03:00
Code Activity

Updated docs about token transform functions

Browse Source
This commit is contained in:
Alexander Shabunevich
2020-10-10 21:45:58 +03:00
parent 2237462972
commit 7cc8274b85
9 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.htm
+49 -2
View File
@@ -43,6 +43,22 @@
</div>
<p class="help is-family-code">v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}"</p>
</div>
<div class="field">
<div class="field-body">
<div class="field">
<label class="label">Masked input:</label>
<div class="control">
<input v-maska="customMask" class="input">
</div>
</div>
<div class="field">
<label class="label">mask to apply:</label>
<div class="control">
<input class="input" v-model="customMask">
</div>
</div>
</div>
</div>
</form>
</div>
@@ -65,6 +81,13 @@
</div>
<p class="help is-family-code">data-mask="A* A*"</p>
</div>
<div class="field">
<label class="label">Leet speak (tokens with transform)</label>
<div class="control">
<input data-mask="T*" class="transform-masked input">
</div>
<p class="help is-family-code">data-mask="T*"</p>
</div>
<div class="field">
<label class="label">All digits</label>
<div class="control">
@@ -88,6 +111,13 @@
</div>
<p class="help is-family-code">data-mask="##/##/####"</p>
</div>
<div class="field">
<label class="label">Credit card</label>
<div class="control">
<input data-mask="#### #### #### ####" class="masked input">
</div>
<p class="help is-family-code">data-mask="#### #### #### ####"</p>
</div>
<div class="field">
<label class="label">Hex color (custom tokens)</label>
<div class="control">
@@ -118,7 +148,7 @@
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maska@1.2.0/dist/maska.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maska@1.3.0/dist/maska.js"></script>
<script>
// vue
new Vue({
@@ -126,7 +156,8 @@
data: {
phone: '19992345678',
dotFormat: false,
color: null
color: null,
customMask: '#*'
},
computed: {
@@ -136,6 +167,18 @@
}
});
function leetSpeak(char) {
const letters = Object.entries({
'a': '4', 'b': '8', 'e': '3', 'f': 'ph', 'g': '9', 'i': '1', 'o': '0', 's': '5', 't': '7'
}).reduce((acc, [from, to]) => {
acc[from] = to
acc[from.toLocaleUpperCase()] = to
return acc
}, {})
return letters[char] ? letters[char] : char
}
// vanilla default
Maska.create('#vanilla-form .masked');
@@ -144,6 +187,10 @@
tokens: { 'H': { pattern: '[0-9a-fA-F]', uppercase: true }}
});
Maska.create('#vanilla-form .transform-masked', {
tokens: { 'T': { pattern: '[ 0-9a-zA-Z]', transform: leetSpeak }}
});
// vanilla destroy
var mask = Maska.create('#vanilla-form .unmasked');
mask.destroy();