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

feat: simple mode for mask directive

Browse Source 
Allow string passing to set a mask without data-maska attribute
This commit is contained in:
Alexander Shabunevich
2024-06-12 17:52:55 +03:00
parent cb87ea76c0
commit 488a52f760
16 changed files with 150 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/alpine.html
+21 -17
View File
@@ -24,38 +24,42 @@
<main>
<article>
<div x-data="{
maskedvalue: '123',
unmaskedvalue: '',
options: { eager: true }
}">
<input
x-model="maskedvalue"
x-maska:unmaskedvalue.unmasked="options"
x-on:maska="console.log($event.detail)"
data-maska="##-##"
>
<div><label><input type="checkbox" x-model="options.eager"> eager?</label></div>
<div>masked value: <span x-text="maskedvalue"></span></div>
<div>unmasked value: <span x-text="unmaskedvalue"></span></div>
<div x-data="{ enabled: true }">
<div><label><input type="checkbox" x-model="enabled"> enabled?</label></div>
<template x-if="enabled">
<div x-data="{
maskedvalue: '123',
unmaskedvalue: '',
options: { mask: '#-#', eager: true }
}">
<input
x-model="maskedvalue"
x-maska:unmaskedvalue.unmasked="options"
>
<div><label><input type="checkbox" x-model="options.eager"> eager?</label></div>
<div>masked value: <span x-text="maskedvalue"></span></div>
<div>unmasked value: <span x-text="unmaskedvalue"></span></div>
</div>
</template>
</div>
<div x-data="{
maskedvalue: '-1234.90',
unmaskedvalue: '',
options: { number: { locale: 'ru', fraction: 2 }}
}" style="margin-top: 1em">
<input
x-model="maskedvalue"
x-maska:unmaskedvalue.unmasked="options"
x-maska:unmaskedvalue.unmasked
x-on:maska="console.log($event.detail)"
data-maska-number-locale="ru"
data-maska-number-fraction="2"
>
<div>masked value: <span x-text="maskedvalue"></span></div>
<div>unmasked value: <span x-text="unmaskedvalue"></span></div>
</div>
<div x-data style="margin-top: 1em">
<input x-maska data-maska="+1 (###) ###-####" data-maska-eager value="1234567">
<input x-maska="'+1 (###) ###-####'" data-maska-eager value="1234567">
</div>
<script type="module">