mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-06-11 18:02:27 +03:00
Code Activity

Demo updated: add example with number format

Browse Source
This commit is contained in:
Alexander Shabunevich
2023-01-21 12:30:36 +03:00
parent 8325a46f8f
commit f06bbf529a
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/Demo.vue
+12 -8
View File
@@ -19,7 +19,7 @@ const examples = [
},
{
label: 'IP address with optional digits',
code: `<input\n v-maska\n data-maska="100.100.100.100"\n data-maska-tokens="1:[0-2]|0:[0-9]:optional"\n>`
code: `<input\n v-maska\n data-maska="#00.#00.#00.#00"\n data-maska-tokens="0:[0-9]:optional"\n>`
},
{
label: 'Dynamic mask: CPF/CNPJ',
@@ -27,23 +27,27 @@ const examples = [
},
{
label: 'Cardholder name: via hook',
code: `const options = {\n preProcess: (val) => val.toUpperCase()\n}\n\n<input\n v-maska:[options]\n data-maska="A A"\n data-maska-tokens="A:[A-Z]:multiple"\n>`
code: `const options = {\n preProcess: val => val.toUpperCase()\n}\n\n<input\n v-maska:[options]\n data-maska="A A"\n data-maska-tokens="A:[A-Z]:multiple"\n>`
},
{
label: 'Cardholder name: via token transform',
code: `const options = {\n tokens: {\n A: {\n pattern: /[A-Z]/,\n multiple: true,\n transform: (chr) => chr.toUpperCase()\n }\n }\n}\n\n<input v-maska:[options] data-maska="A A">`
code: `const options = {\n tokens: {\n A: {\n pattern: /[A-Z]/,\n multiple: true,\n transform: chr => chr.toUpperCase()\n }\n }\n}\n\n<input v-maska:[options] data-maska="A A">`
},
{
label: 'Year: with current year as a limit',
code: `const options = {\n postProcess: (val) => {\n const max = "" + new Date().getFullYear()\n return val > max ? max : val\n }\n}\n\n<input v-maska:[options] data-maska="####">`
code: `const options = {\n postProcess: val => {\n const max = "" + new Date().getFullYear()\n return val > max ? max : val\n }\n}\n\n<input v-maska:[options] data-maska="####">`
},
{
label: 'Money format simple',
code: `<input\n v-maska\n data-maska="0,99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
label: 'Money format: simple',
code: `<input\n v-maska\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
},
{
label: 'Money format with thousand separators',
code: `<input\n v-maska\n data-maska="9 99#,##"\n data-maska-tokens="9:[0-9]:repeated"\n data-maska-reversed\n>`
label: 'Money format: full via hooks',
code: `const options = {\n preProcess: val => val.replace(/[$,]/g, ''),\n postProcess: val => {\n if (!val) return ''\n\n const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).formatToParts(val)\n .map(v => v.value)\n .join('')\n .slice(0, sub ? -sub : undefined)\n }\n}\n\n<input\n v-maska:[options]\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
},
{
label: 'Reversed number format with thousand separators',
code: `<input\n v-maska\n data-maska="9 99#.##"\n data-maska-tokens="9:[0-9]:repeated"\n data-maska-reversed\n>`
}
]